Skip to content

Commit 6bed48d

Browse files
antoninkrizantoninkriz
authored
React 18.2.0 upgrade (#1)
* Updated storybook dependencies, fixed build a little bit * Updated to support React 18.2.0 * Updated README.md * Restored deleted touch events
1 parent 1690a1a commit 6bed48d

File tree

12 files changed

+7552
-5161
lines changed

12 files changed

+7552
-5161
lines changed

‎.babelrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,5 @@
1010
],
1111
"@babel/preset-react"
1212
],
13-
"plugins": [["@babel/plugin-proposal-class-properties", { "loose": false }]]
13+
"plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-private-methods", "@babel/plugin-proposal-private-property-in-object"]
1414
}

‎.eslintrc.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const prettierConfig = require('./.prettierrc.js')
1+
const prettierConfig = require('./.prettierrc.js');
22

33
module.exports = {
44
parser: 'babel-eslint',
@@ -14,7 +14,7 @@ module.exports = {
1414
es6: true,
1515
node: true
1616
},
17-
extends: ['airbnb', 'prettier', 'prettier/react'],
17+
extends: ['airbnb', 'prettier', 'prettier/react', 'plugin:storybook/recommended', 'plugin:storybook/recommended'],
1818
plugins: ['prettier'],
1919
rules: {
2020
'prettier/prettier': [2, prettierConfig],
@@ -25,15 +25,14 @@ module.exports = {
2525
'import/prefer-default-export': 0,
2626
'react/prefer-stateless-function': 0,
2727
'react/destructuring-assignment': 0,
28-
'import/no-extraneous-dependencies': [
29-
'error',
30-
{ devDependencies: ['stories/**/*'] }
31-
],
28+
'import/no-extraneous-dependencies': ['error', {
29+
devDependencies: ['stories/**/*']
30+
}],
3231
'jsx-a11y/mouse-events-have-key-events': 0
3332
},
3433
settings: {
3534
react: {
3635
version: 'detect'
3736
}
3837
}
39-
}
38+
};

‎.storybook/config.js‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎.storybook/main.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = {
2+
"stories": [
3+
'../stories/**/*',
4+
],
5+
"addons": [
6+
"@storybook/addon-links",
7+
"@storybook/addon-essentials",
8+
"@storybook/addon-interactions"
9+
],
10+
"framework": "@storybook/react"
11+
}

‎.storybook/preview.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const parameters = {}

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
# react-canvas
22

3-
`react-canvas` fork which supports React 18.6.8 using custom fiber renderer.
3+
`react-canvas` fork which supports React 18.2.0 using custom fiber renderer.
44

55
Previous work / forks:
66

77
- [Flipboard/react-canvas](https://github.com/Flipboard/react-canvas)
88
- [CraigMorton/react-canvas](https://github.com/CraigMorton/react-canvas)
99
- [CSBerger/react-canvas](https://github.com/CSberger/react-canvas)
10+
- [vojty/react-canvas](https://github.com/vojty/react-canvas)
11+
- [qntln/react-canvas](https://github.com/qntln/react-canvas)
1012

1113
# Original repo's README
1214

‎package.json‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
},
1414
"scripts": {
1515
"build": "rimraf dist && babel src --out-dir dist",
16-
"storybook": "start-storybook -p 6006 -c .storybook",
17-
"build-storybook": "build-storybook -c .storybook",
16+
"storybook": "start-storybook -p 6006",
17+
"build-storybook": "build-storybook",
1818
"prepare": "yarn build",
1919
"prettier": "prettier {src,stories}/**/* --write",
2020
"lint": "eslint 'src/**/*' 'stories/**/*'"
@@ -30,40 +30,47 @@
3030
"url": "https://github.com/gfodor/react-canvas/issues"
3131
},
3232
"devDependencies": {
33-
"@babel/cli": "^7.4.4",
34-
"@babel/core": "^7.4.4",
35-
"@babel/plugin-proposal-class-properties": "^7.4.4",
36-
"@babel/preset-env": "^7.4.4",
37-
"@babel/preset-react": "^7.0.0",
38-
"@storybook/react": "^5.0.11",
33+
"@babel/cli": "^7.18.9",
34+
"@babel/core": "^7.18.9",
35+
"@babel/plugin-proposal-class-properties": "^7.18.6",
36+
"@babel/preset-env": "^7.18.9",
37+
"@babel/preset-react": "^7.18.6",
38+
"@storybook/addon-actions": "^6.5.9",
39+
"@storybook/addon-essentials": "^6.5.9",
40+
"@storybook/addon-interactions": "^6.5.9",
41+
"@storybook/addon-links": "^6.5.9",
42+
"@storybook/builder-webpack4": "^6.5.9",
43+
"@storybook/manager-webpack4": "^6.5.9",
44+
"@storybook/react": "^6.5.9",
45+
"@storybook/testing-library": "^0.0.13",
3946
"alea": "^0.0.9",
4047
"babel-eslint": "^10.0.1",
4148
"babel-loader": "^8.0.6",
42-
"d3-scale": "^1.0.6",
49+
"d3-scale": "^1.0.7",
4350
"eslint": "5.3.0",
4451
"eslint-config-airbnb": "17.1.0",
4552
"eslint-config-prettier": "^4.3.0",
4653
"eslint-plugin-import": "^2.14.0",
4754
"eslint-plugin-jsx-a11y": "^6.1.1",
4855
"eslint-plugin-prettier": "^3.1.0",
4956
"eslint-plugin-react": "^7.11.0",
57+
"eslint-plugin-storybook": "^0.6.1",
5058
"lodash.range": "^3.2.0",
5159
"prettier": "^1.17.1",
52-
"react": "^16.8.6",
53-
"react-dom": "^16.8.6",
60+
"react": "^18.2.0",
61+
"react-dom": "^18.2.0",
5462
"rimraf": "^2.6.2"
5563
},
5664
"peerDependencies": {
57-
"react": "^16.8.6",
58-
"react-dom": "^16.8.6"
65+
"react": "^18.2.0",
66+
"react-dom": "^18.2.0"
5967
},
6068
"dependencies": {
6169
"css-layout": "^1.1.1",
62-
"css-line-break": "^1.1.1",
70+
"css-line-break": "^2.1.0",
6371
"invariant": "^2.2.4",
6472
"multi-key-cache": "^1.0.2",
65-
"prop-types": "^15.6.1",
66-
"react-reconciler": "^0.20.4",
67-
"scheduler": "^0.14.0"
73+
"prop-types": "^15.8.1",
74+
"react-reconciler": "^0.29.0"
6875
}
69-
}
76+
}

‎src/Canvas.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Object.assign(Canvas.prototype, {
2222
},
2323

2424
getContext() {
25-
return this._canvas.getContext('2d')
25+
return this._canvas?.getContext('2d')
2626
}
2727
})
2828

‎src/CanvasRenderer.js‎

Lines changed: 22 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
import React from 'react'
22
import invariant from 'invariant'
33
import ReactFiberReconciler from 'react-reconciler'
4-
import {
5-
unstable_now as now,
6-
unstable_shouldYield as shouldYield,
7-
unstable_scheduleCallback as scheduleDeferredCallback,
8-
unstable_cancelCallback as cancelDeferredCallback
9-
} from 'scheduler'
4+
import { DefaultEventPriority } from 'react-reconciler/constants'
105
import { emptyObject } from './utils'
116
import Gradient from './Gradient'
127
import Text from './Text'
@@ -56,6 +51,26 @@ const freeComponentAndChildren = c => {
5651
}
5752

5853
const CanvasHostConfig = {
54+
supportsHydration: false,
55+
supportsPersistence: true,
56+
cancelTimeout: clearTimeout,
57+
scheduleTimeout: setTimeout,
58+
noTimeout: -1,
59+
detachDeletedInstance() {},
60+
getInstanceFromScope() {
61+
return null
62+
},
63+
preparePortalMount() {},
64+
afterActiveInstanceBlur() {},
65+
beforeActiveInstanceBlur() {},
66+
getCurrentEventPriority() {
67+
return DefaultEventPriority
68+
},
69+
getInstanceFromNode() {
70+
return undefined
71+
},
72+
prepareScopeUpdate() {},
73+
clearContainer() {},
5974
appendInitialChild(parentInstance, child) {
6075
if (typeof child === 'string') {
6176
// Noop for string children of Text (eg <Text>{'foo'}{'bar'}</Text>)
@@ -100,7 +115,7 @@ const CanvasHostConfig = {
100115
},
101116

102117
prepareForCommit() {
103-
// Noop
118+
return null
104119
},
105120

106121
prepareUpdate(/* domElement, type, oldProps, newProps */) {
@@ -111,10 +126,6 @@ const CanvasHostConfig = {
111126
// Noop
112127
},
113128

114-
resetTextContent(/* domElement */) {
115-
// Noop
116-
},
117-
118129
shouldDeprioritizeSubtree(/* type, props */) {
119130
return false
120131
},
@@ -127,24 +138,14 @@ const CanvasHostConfig = {
127138
return emptyObject
128139
},
129140

130-
scheduleDeferredCallback,
131-
132-
cancelDeferredCallback,
133-
134-
shouldYield,
135-
136141
shouldSetTextContent(type, props) {
137142
return (
138143
typeof props.children === 'string' || typeof props.children === 'number'
139144
)
140145
},
141146

142-
now,
143-
144147
isPrimaryRenderer: false,
145148

146-
useSyncScheduling: true,
147-
148149
supportsMutation: true,
149150

150151
appendChild(parentInstance, child) {
@@ -199,14 +200,6 @@ const CanvasHostConfig = {
199200
parentLayer.invalidateLayout()
200201
},
201202

202-
commitTextUpdate(/* textInstance, oldText, newText */) {
203-
// Noop
204-
},
205-
206-
commitMount(/* instance, type, newProps */) {
207-
// Noop
208-
},
209-
210203
commitUpdate(instance, updatePayload, type, oldProps, newProps) {
211204
if (typeof instance.applyLayerProps !== 'undefined') {
212205
instance.applyLayerProps(oldProps, newProps)

‎src/ReactDOMComponentTree.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const HostText = 6
77
const randomKey = Math.random()
88
.toString(36)
99
.slice(2)
10-
const internalInstanceKey = `__reactInternalInstance$${randomKey}`
10+
const internalInstanceKey = `__reactFiber$${randomKey}`
1111

1212
/**
1313
* Given a DOM node, return the closest ReactDOMComponent or

0 commit comments

Comments
 (0)