fix types in tests, add skia backend

Author: lavrton

eslint.config.mjs

@@ -3,16 +3,23 @@
   "version": "9.3.22",
   "description": "HTML5 2d canvas library.",
   "author": "Anton Lavrenov",
+  "type": "module",
   "files": [
     "README.md",
     "konva.js",
     "konva.min.js",
-    "lib",
-    "cmj"
+    "lib"
   ],
-  "main": "./lib/index-node.js",
-  "browser": "./lib/index.js",
-  "typings": "./lib/index-types.d.ts",
+  "exports": {
+    ".": {
+      "default": "./lib/index.js"
+    },
+    "./setup-node-canvas": {
+      "default": "./lib/setup-node-canvas.js"
+    }
+  },
+  "main": "./lib/index.js",
+  "types": "./lib/index-types.d.ts",
   "scripts": {
     "start": "npm run test:watch",
     "compile": "npm run clean && npm run tsc && cp ./src/index-types.d.ts ./lib/index-types.d.ts && npm run rollup",
@@ -22,10 +29,12 @@
     "test:build": "PARCEL_WORKER_BACKEND=process parcel build ./test/unit-tests.html --dist-dir ./test-build --target none --public-url ./ --no-source-maps",
     "test:browser": "npm run test:build && mocha-headless-chrome -f ./test-build/unit-tests.html -a disable-web-security -a no-sandbox -a disable-setuid-sandbox",
     "test:watch": "rm -rf ./.parcel-cache && PARCEL_WORKERS=0  parcel serve ./test/unit-tests.html ./test/manual-tests.html ./test/sandbox.html ./test/text-paths.html ./test/bunnies.html",
-    "test:node:compiled": "rm -rf ./.test-temp && mkdir ./.test-temp && (tsc -p ./test/tsconfig.json --outDir ./.test-temp || true) && mocha './.test-temp/test/unit/**/*.js' -r ./test/node-global-setup.mjs --exit && rm -rf ./.test-temp && npm run test:import",
-    "test:node": "npm run test:node:compiled",
+    
+    "test:node:canvas": "rm -rf ./.test-temp && mkdir ./.test-temp && (tsc -p ./test/tsconfig.json --outDir ./.test-temp || true) && node ./rename-imports-test.mjs && mocha './.test-temp/test/unit/**/*.js' -r ./test/node-canvas-global-setup.mjs --exit && rm -rf ./.test-temp && npm run test:import",
+    "test:node:skia": "rm -rf ./.test-temp && mkdir ./.test-temp && (tsc -p ./test/tsconfig.json --outDir ./.test-temp || true) && node ./rename-imports-test.mjs && mocha './.test-temp/test/unit/**/*.js' -r ./test/node-skia-global-setup.mjs --exit && rm -rf ./.test-temp && npm run test:import",
+    "test:node": "npm run test:node:canvas && npm run test:node:skia",
     "tsc": "tsc --removeComments",
-    "rollup": "rollup -c --bundleConfigAsCjs",
+    "rollup": "rollup -c",
     "clean": "rm -rf ./lib && rm -rf ./types && rm -rf ./cmj && rm -rf ./test-build",
     "watch": "rollup -c -w",
     "size": "size-limit"
@@ -61,18 +70,18 @@
     }
   ],
   "devDependencies": {
-    "@parcel/transformer-image": "2.13.2",
-    "@size-limit/preset-big-lib": "^11.1.6",
+    "@parcel/transformer-image": "2.15.4",
+    "@size-limit/preset-big-lib": "^11.2.0",
     "@types/mocha": "^10.0.10",
-    "canvas": "^3.1.0",
-    "chai": "5.1.2",
+    "canvas": "^3.1.2",
+    "chai": "5.2.1",
     "filehound": "^1.17.6",
-    "gulp": "^5.0.0",
+    "gulp": "^5.0.1",
     "gulp-concat": "^2.6.1",
     "gulp-connect": "^5.7.0",
     "gulp-exec": "^5.0.0",
     "gulp-jsdoc3": "^3.0.0",
-    "gulp-rename": "^2.0.0",
+    "gulp-rename": "^2.1.0",
     "gulp-replace": "^1.1.4",
     "gulp-typescript": "^5.0.1",
     "gulp-uglify": "^3.0.2",
@@ -82,12 +91,13 @@
     "mocha-headless-chrome": "^4.0.0",
     "parcel": "2.13.3",
     "process": "^0.11.10",
-    "rollup": "^4.31.0",
+    "rollup": "^4.46.2",
     "rollup-plugin-typescript2": "^0.36.0",
-    "size-limit": "^11.1.6",
-    "ts-mocha": "^10.0.0",
+    "size-limit": "^11.2.0",
+    "skia-canvas": "^2.0.2",
+    "ts-mocha": "^11.1.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.7.3"
+    "typescript": "^5.9.2"
   },
   "keywords": [
     "canvas",

konva-node/demo.js

@@ -0,0 +1,36 @@
+import FileHound from 'filehound';
+import fs from 'fs';
+
+const files = FileHound.create().paths('./.test-temp').ext(['js', 'ts']).find();
+
+files.then((filePaths) => {
+  filePaths.forEach((filepath) => {
+    fs.readFile(filepath, 'utf8', (err, text) => {
+      if (!text.match(/import .* from/g)) {
+        return;
+      }
+      text = text.replace(/(import .* from\s+['"])(.*)(?=['"])/g, '$1$2.js');
+      if (text.match(/export .* from/g)) {
+        text = text.replace(/(export .* from\s+['"])(.*)(?=['"])/g, '$1$2.js');
+      }
+
+      if (err) throw err;
+
+      // stupid replacement back
+      text = text.replace("from 'canvas.js';", "from 'canvas';");
+      text = text.replace("from 'chai.js';", "from 'chai';");
+      text = text.replace("from 'skia-canvas.js';", "from 'skia-canvas';");
+
+      // Handle import("./x/y/z") syntax.
+      text = text.replace(/(import\s*\(\s*['"])(.*)(?=['"])/g, '$1$2.js');
+
+      fs.writeFile(filepath, text, function (err) {
+        if (err) {
+          throw err;
+        }
+      });
+    });
+  });
+});
+
+// Removed CommonJS export rewriting to keep ESM output intact

konva-node/index.js

@@ -34,14 +34,4 @@ files.then((filePaths) => {
   });
 });
 
-const indexFiles = ['lib/index.js', 'lib/index-node.js', 'lib/Core.js'];
-indexFiles.forEach((filepath) => {
-  fs.readFile(filepath, 'utf8', (err, text) => {
-    text = text.replace('exports.default =', 'module.exports =');
-    fs.writeFile(filepath, text, function (err) {
-      if (err) {
-        throw err;
-      }
-    });
-  });
-});
+// Removed CommonJS export rewriting to keep ESM output intact

konva-node/package.json

@@ -11,16 +11,12 @@ export default {
       sourcemap: false,
       freeze: false,
     },
-    // { file: pkg.module, format: 'es', sourcemap: true }
   ],
-  // Indicate here external modules you don't wanna include in your bundle (i.e.: 'lodash')
   external: [],
   watch: {
     include: 'src/**',
   },
   plugins: [
-    // Allow json resolution
-    // json(),
     // Compile TypeScript files
     typescript({
       useTsconfigDeclarationDir: true,
@@ -32,14 +28,5 @@ export default {
         },
       },
     }),
-    // // Allow bundling cjs modules (unlike webpack, rollup doesn't understand cjs)
-    // commonjs(),
-    // // Allow node_modules resolution, so you can use 'external' to control
-    // // which external modules to include in the bundle
-    // // https://github.com/rollup/rollup-plugin-node-resolve#usage
-    // resolve(),
-
-    // Resolve source maps to the original source
-    // sourceMaps()
   ],
 };

package.json

@@ -184,6 +184,11 @@ export const Konva = {
   // insert Konva into global namespace (window)
   // it is required for npm packages
   _injectGlobal(Konva) {
+    if (typeof glob.Konva !== 'undefined') {
+      console.error(
+        'Severa Konva instances detected. It is not recommended to use multiple Konva instances in the same environment.'
+      );
+    }
     glob.Konva = Konva;
   },
 };

rename-imports-test.mjs

@@ -2,6 +2,14 @@ import { Konva } from './Global';
 import { Context } from './Context';
 import { IRect, RGB, Vector2d } from './types';
 
+const ensureBrowser = () => {
+  if (typeof document === 'undefined') {
+    throw new Error(
+      'document is undefined, this is not a browser environment. For node.js env add `import "konva/register-node"`'
+    );
+  }
+};
+
 /*
  * Last updated November 2011
  * By Simon Sarris
@@ -424,7 +432,7 @@ const OBJECT_ARRAY = '[object Array]',
     yellowgreen: [154, 205, 5],
   },
   RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/;
-  let animQueue: Array<Function> = [];
+let animQueue: Array<Function> = [];
 
 const req =
   (typeof requestAnimationFrame !== 'undefined' && requestAnimationFrame) ||
@@ -505,6 +513,7 @@ export const Util = {
     }
   },
   createCanvasElement() {
+    ensureBrowser();
     const canvas = document.createElement('canvas');
     // on some environments canvas.style is readonly
     try {
@@ -513,6 +522,7 @@ export const Util = {
     return canvas;
   },
   createImageElement() {
+    ensureBrowser();
     return document.createElement('img');
   },
   _isInDocument(el: any) {