React 18.2.0 upgrade

.gitignore

@@ -4,3 +4,5 @@ npm-debug.log
 storybook-static
 dist
 yarn-error.log
+
+*storybook.log

.prettierrc.js

@@ -1,7 +1,7 @@
-module.exports = {
+export default {
   printWidth: 80,
   trailingComma: 'none',
   semi: false,
   singleQuote: true,
-  jsxBracketSameLine: true
+  bracketSameLine: true
 }

.storybook/main.js

@@ -0,0 +1,13 @@
+export default {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-webpack5-compiler-babel',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-links'
+  ],
+  framework: '@storybook/react-webpack5',
+  core: {
+    disableTelemetry: true
+  }
+}

.storybook/preview.js

@@ -0,0 +1,10 @@
+export default {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+}

README.md

@@ -1,12 +1,23 @@
-# react-canvas
+# react-canvas - development master branch
 
-`react-canvas` fork which supports React 18.6.8 using custom fiber renderer.
+`react-canvas` fork which supports React up to 18.3.1 using custom fiber renderer.
+
+Support for React 19.0.0 is in progress.
+
+Check out other branches which might support other React versions, for example branches:
+- `master` is a development branch, support for React 19.0.0 is in progress
+- `react-18` should work with React 18.3.1
+- `react-17` should work with React 17.0.2
+- `react-16` should work with React 16.14.0
 
 Previous work / forks:
 
 - [Flipboard/react-canvas](https://github.com/Flipboard/react-canvas)
 - [CraigMorton/react-canvas](https://github.com/CraigMorton/react-canvas)
 - [CSBerger/react-canvas](https://github.com/CSberger/react-canvas)
+- [vojty/react-canvas](https://github.com/vojty/react-canvas)
+- [qntln/react-canvas](https://github.com/qntln/react-canvas)
+- [darkyen/react-canvas](https://github.com/darkyen/react-canvas)
 
 # Original repo's README
 
@@ -80,7 +91,7 @@ React Canvas provides a set of standard React components that abstract the under
 
 React Canvas components support the same event model as normal React components. However, not all event types are currently supported.
 
-For a full list of supported events see [EventTypes](lib/EventTypes.js).
+For a full list of supported events see [EventTypes](src/EventTypes.js).
 
 ## Building Components
 
@@ -143,7 +154,7 @@ There is experimental support for using [css-layout](https://github.com/facebook
 
 Future versions may not support css-layout out of the box. The performance implications need to be investigated before baking this in as a core layout principle.
 
-See the [css-layout example](examples/css-layout).
+See the [css-layout example](src/stories/CSS.stories.jsx).
 
 ## Running the examples (storybook)
 

babel.config.json

@@ -0,0 +1,18 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": ["last 2 versions and not dead"]
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-private-methods",
+    "@babel/plugin-proposal-private-property-in-object"
+  ]
+}

eslint.config.js

@@ -0,0 +1,64 @@
+import prettierConfig from './.prettierrc.js'
+import eslintTsParser from '@typescript-eslint/parser'
+import globals from 'globals'
+import eslint_js from '@eslint/js'
+import esp_react from '@eslint-react/eslint-plugin'
+import esc_prettier from 'eslint-config-prettier'
+import esp_prettier from 'eslint-plugin-prettier/recommended'
+import esp_storybook from 'eslint-plugin-storybook'
+import esp_import from 'eslint-plugin-import'
+import esp_jsxA11y from 'eslint-plugin-jsx-a11y'
+
+export default [
+  eslint_js.configs.recommended,
+  esp_react.configs.recommended,
+  {
+    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
+    languageOptions: {
+      parser: eslintTsParser,
+      parserOptions: {
+        ecmaVersion: 2017,
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true
+        }
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2015
+      }
+    },
+    plugins: {
+      storybook: esp_storybook,
+      react: esp_react,
+      import: esp_import,
+      'jsx-a11y': esp_jsxA11y
+    },
+    rules: {
+      'prettier/prettier': [2, prettierConfig],
+      'no-param-reassign': 0,
+      'no-underscore-dangle': 0,
+      'no-plusplus': 0,
+      'no-restricted-syntax': 0,
+      'import/prefer-default-export': 0,
+      'react/prefer-stateless-function': 0,
+      'react/destructuring-assignment': 0,
+      'react/jsx-uses-vars': 'error',
+      'import/no-extraneous-dependencies': [
+        'error',
+        {
+          devDependencies: ['stories/**/*']
+        }
+      ],
+      'jsx-a11y/mouse-events-have-key-events': 0
+    },
+    settings: {
+      react: {
+        version: 'detect'
+      }
+    }
+  },
+  esc_prettier,
+  esp_prettier
+]

package.json

@@ -1,69 +1,103 @@
 {
   "name": "react-canvas",
-  "version": "1.7.0",
-  "description": "High performance <canvas> rendering for React components",
+  "version": "1.8.0-react18",
+  "description": "High performance <canvas> rendering for React components for React 18",
   "main": "dist/index.js",
   "files": [
     "dist",
     "src"
   ],
+  "type": "module",
   "repository": {
     "type": "git",
-    "url": "https://github.com/gfodor/react-canvas.git"
+    "url": "https://github.com/antoninkriz/react-canvas.git"
   },
   "scripts": {
     "build": "rimraf dist && babel src --out-dir dist",
-    "storybook": "start-storybook -p 6006 -c .storybook",
-    "build-storybook": "build-storybook -c .storybook",
+    "storybook": "storybook dev -p 6006",
     "prepare": "yarn build",
     "prettier": "prettier {src,stories}/**/* --write",
-    "lint": "eslint 'src/**/*' 'stories/**/*'"
+    "lint": "eslint 'src/**/*' 'src/stories/**/*'",
+    "build-storybook": "storybook build"
   },
   "keywords": [
     "react",
     "canvas"
   ],
+  "maintainers": [
+    {
+      "name": "Antonín Kříž",
+      "url": "https://www.antoninkriz.eu"
+    }
+  ],
+  "contributors": [
+    "Antonín Kříž (https://www.antoninkriz.eu)",
+    "Abhishek Hingnikar <[email protected]>",
+    "Jakub Kottnauer <[email protected]>",
+    "Tomáš Vojtášek <[email protected]>",
+    "Vita Smid <[email protected]>",
+    "Greg Fodor <[email protected]>",
+    "Christopher Berger <[email protected]>",
+    "Brent Vatne <[email protected]>"
+  ],
   "author": "Michael Johnston <[email protected]>",
   "license": "BSD-3-Clause",
-  "homepage": "https://github.com/gfodor/react-canvas",
+  "homepage": "https://github.com/antoninkriz/react-canvas",
   "bugs": {
-    "url": "https://github.com/gfodor/react-canvas/issues"
+    "url": "https://github.com/antoninkriz/react-canvas/issues"
   },
   "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.4",
-    "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "@babel/preset-env": "^7.4.4",
-    "@babel/preset-react": "^7.0.0",
-    "@storybook/react": "^5.0.11",
-    "alea": "^0.0.9",
-    "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.6",
-    "d3-scale": "^1.0.6",
-    "eslint": "5.3.0",
-    "eslint-config-airbnb": "17.1.0",
-    "eslint-config-prettier": "^4.3.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.11.0",
+    "@babel/cli": "^7.26.4",
+    "@babel/core": "^7.26.0",
+    "@babel/eslint-parser": "^7.25.9",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@eslint-react/eslint-plugin": "^1.19.0",
+    "@eslint/js": "^9.16.0",
+    "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-webpack5": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@types/react-reconciler": "^0.28.9",
+    "@typescript-eslint/parser": "^8.18.0",
+    "alea": "^1.0.1",
+    "babel-loader": "^9.2.1",
+    "d3-scale": "^4.0.2",
+    "d3-scale-chromatic": "^3.1.0",
+    "eslint": "^9.16.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-storybook": "^0.11.1",
+    "globals": "^15.13.0",
     "lodash.range": "^3.2.0",
-    "prettier": "^1.17.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "rimraf": "^2.6.2"
+    "prettier": "^3.4.2",
+    "react": "==19.0.0",
+    "react-dom": "==19.0.0",
+    "rimraf": "^6.0.1",
+    "storybook": "^8.4.7",
+    "typescript": "^5.7.2"
   },
   "peerDependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react": "==19.0.0",
+    "react-dom": "==19.0.0"
   },
   "dependencies": {
     "css-layout": "^1.1.1",
-    "css-line-break": "^1.1.1",
+    "css-line-break": "^2.1.0",
     "invariant": "^2.2.4",
     "multi-key-cache": "^1.0.2",
-    "prop-types": "^15.6.1",
-    "react-reconciler": "^0.20.4",
-    "scheduler": "^0.14.0"
+    "prop-types": "^15.8.1",
+    "react-reconciler": "==0.30.0",
+    "scheduler": "==0.23.0"
   }
-}
+}

src/Canvas.js

@@ -22,7 +22,7 @@ Object.assign(Canvas.prototype, {
   },
 
   getContext() {
-    return this._canvas.getContext('2d')
+    return this._canvas ? this._canvas.getContext('2d') : undefined
   }
 })