Skip to content

Commit 191415f

Browse files
author
Tomáš Vojtášek
committed
Support React 18.6.8
1 parent 1364367 commit 191415f

File tree

9 files changed

+162
-270
lines changed

9 files changed

+162
-270
lines changed

‎package.json‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,21 +42,22 @@
4242
"eslint-plugin-react": "^7.8.2",
4343
"lodash.range": "^3.2.0",
4444
"prettier": "^1.12.1",
45-
"react": "^16.3.2",
46-
"react-dom": "^16.3.2",
45+
"react": "^16.8.6",
46+
"react-dom": "^16.8.6",
4747
"rimraf": "^2.6.2"
4848
},
4949
"peerDependencies": {
50-
"react": "^16.3.2",
51-
"react-dom": "^16.3.2"
50+
"react": "^16.8.6",
51+
"react-dom": "^16.8.6"
5252
},
5353
"dependencies": {
5454
"@craigmorton/linebreak": "^0.4.5",
5555
"css-layout": "^1.1.1",
56-
"fbjs": "^0.8.16",
56+
"invariant": "^2.2.4",
5757
"multi-key-cache": "^1.0.2",
5858
"prop-types": "^15.6.1",
59-
"react-reconciler": "^0.10.0",
59+
"react-reconciler": "^0.20.4",
60+
"scheduler": "^0.14.0",
6061
"scroller": "https://github.com/mjohnston/scroller"
6162
}
6263
}

‎src/CanvasComponent.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import RenderLayer from "./RenderLayer";
22
import { make } from "./FrameUtils";
33
import * as EventTypes from "./EventTypes";
4-
import emptyObject from "fbjs/lib/emptyObject";
4+
import { emptyObject } from "./utils";
55

66
let LAYER_GUID = 1;
77

@@ -126,6 +126,7 @@ export default class CanvasComponent {
126126
// Register events
127127
for (const type in EventTypes) {
128128
if (prevProps[type] !== props[type]) {
129+
console.log(props[type], type)
129130
this.putEventListener(EventTypes[type], props[type]);
130131
}
131132
}

‎src/CanvasRenderer.js‎

Lines changed: 85 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
import React from "react";
2-
import invariant from "fbjs/lib/invariant";
3-
import emptyObject from "fbjs/lib/emptyObject";
2+
import invariant from "invariant";
3+
import { emptyObject } from "./utils";
44
import Gradient from "./Gradient";
55
import Text from "./Text";
66
import Group from "./Group";
77
import { RawImage } from "./Image";
8-
import ReactDOMFrameScheduling from "./ReactDOMFrameScheduling";
98
import ReactFiberReconciler from "react-reconciler";
109
import CanvasComponent from "./CanvasComponent";
1110
import { getClosestInstanceFromNode } from "./ReactDOMComponentTree";
11+
import {
12+
unstable_now as now,
13+
unstable_shouldYield as shouldYield,
14+
unstable_scheduleCallback as scheduleDeferredCallback,
15+
unstable_cancelCallback as cancelDeferredCallback
16+
} from 'scheduler';
1217

1318
const UPDATE_SIGNAL = {};
1419
const MAX_POOLED_COMPONENTS_PER_TYPE = 1024;
@@ -120,86 +125,90 @@ const CanvasHostConfig = {
120125
return emptyObject;
121126
},
122127

123-
scheduleDeferredCallback: ReactDOMFrameScheduling.rIC,
128+
scheduleDeferredCallback,
129+
130+
cancelDeferredCallback,
131+
132+
shouldYield,
124133

125134
shouldSetTextContent(type, props) {
126135
return (
127136
typeof props.children === "string" || typeof props.children === "number"
128137
);
129138
},
130139

131-
now: ReactDOMFrameScheduling.now,
140+
now,
132141

133142
isPrimaryRenderer: false,
134143

135144
useSyncScheduling: true,
136145

137-
mutation: {
138-
appendChild(parentInstance, child) {
139-
const childLayer = child.getLayer();
140-
const parentLayer = parentInstance.getLayer();
141-
142-
if (childLayer.parentLayer === parentLayer) {
143-
childLayer.moveToTop();
144-
} else {
145-
childLayer.inject(parentLayer);
146-
}
147-
148-
parentLayer.invalidateLayout();
149-
},
150-
151-
appendChildToContainer(parentInstance, child) {
152-
const childLayer = child.getLayer();
153-
const parentLayer = parentInstance.getLayer();
154-
155-
if (childLayer.parentLayer === parentLayer) {
156-
childLayer.moveToTop();
157-
} else {
158-
childLayer.inject(parentLayer);
159-
}
160-
161-
parentLayer.invalidateLayout();
162-
},
163-
164-
insertBefore(parentInstance, child, beforeChild) {
165-
const parentLayer = parentInstance.getLayer();
166-
child.getLayer().injectBefore(parentLayer, beforeChild.getLayer());
167-
parentLayer.invalidateLayout();
168-
},
169-
170-
insertInContainerBefore(parentInstance, child, beforeChild) {
171-
const parentLayer = parentInstance.getLayer();
172-
child.getLayer().injectBefore(parentLayer, beforeChild.getLayer());
173-
parentLayer.invalidateLayout();
174-
},
175-
176-
removeChild(parentInstance, child) {
177-
const parentLayer = parentInstance.getLayer();
178-
child.getLayer().remove();
179-
freeComponentAndChildren(child);
180-
parentLayer.invalidateLayout();
181-
},
182-
183-
removeChildFromContainer(parentInstance, child) {
184-
const parentLayer = parentInstance.getLayer();
185-
child.getLayer().remove();
186-
freeComponentAndChildren(child);
187-
parentLayer.invalidateLayout();
188-
},
189-
190-
commitTextUpdate(/*textInstance, oldText, newText*/) {
191-
// Noop
192-
},
193-
194-
commitMount(/*instance, type, newProps*/) {
195-
// Noop
196-
},
197-
198-
commitUpdate(instance, updatePayload, type, oldProps, newProps) {
199-
if (typeof instance.applyLayerProps !== "undefined") {
200-
instance.applyLayerProps(oldProps, newProps);
201-
instance.getLayer().invalidateLayout();
202-
}
146+
supportsMutation: true,
147+
148+
appendChild(parentInstance, child) {
149+
const childLayer = child.getLayer();
150+
const parentLayer = parentInstance.getLayer();
151+
152+
if (childLayer.parentLayer === parentLayer) {
153+
childLayer.moveToTop();
154+
} else {
155+
childLayer.inject(parentLayer);
156+
}
157+
158+
parentLayer.invalidateLayout();
159+
},
160+
161+
appendChildToContainer(parentInstance, child) {
162+
const childLayer = child.getLayer();
163+
const parentLayer = parentInstance.getLayer();
164+
165+
if (childLayer.parentLayer === parentLayer) {
166+
childLayer.moveToTop();
167+
} else {
168+
childLayer.inject(parentLayer);
169+
}
170+
171+
parentLayer.invalidateLayout();
172+
},
173+
174+
insertBefore(parentInstance, child, beforeChild) {
175+
const parentLayer = parentInstance.getLayer();
176+
child.getLayer().injectBefore(parentLayer, beforeChild.getLayer());
177+
parentLayer.invalidateLayout();
178+
},
179+
180+
insertInContainerBefore(parentInstance, child, beforeChild) {
181+
const parentLayer = parentInstance.getLayer();
182+
child.getLayer().injectBefore(parentLayer, beforeChild.getLayer());
183+
parentLayer.invalidateLayout();
184+
},
185+
186+
removeChild(parentInstance, child) {
187+
const parentLayer = parentInstance.getLayer();
188+
child.getLayer().remove();
189+
freeComponentAndChildren(child);
190+
parentLayer.invalidateLayout();
191+
},
192+
193+
removeChildFromContainer(parentInstance, child) {
194+
const parentLayer = parentInstance.getLayer();
195+
child.getLayer().remove();
196+
freeComponentAndChildren(child);
197+
parentLayer.invalidateLayout();
198+
},
199+
200+
commitTextUpdate(/*textInstance, oldText, newText*/) {
201+
// Noop
202+
},
203+
204+
commitMount(/*instance, type, newProps*/) {
205+
// Noop
206+
},
207+
208+
commitUpdate(instance, updatePayload, type, oldProps, newProps) {
209+
if (typeof instance.applyLayerProps !== "undefined") {
210+
instance.applyLayerProps(oldProps, newProps);
211+
instance.getLayer().invalidateLayout();
203212
}
204213
}
205214
};
@@ -216,8 +225,11 @@ CanvasRenderer.injectIntoDevTools({
216225
}
217226
});
218227

219-
CanvasRenderer.registerComponentConstructor = (name, ctor) => {
228+
const registerComponentConstructor = (name, ctor) => {
220229
componentConstructors[name] = ctor;
221230
};
222231

223-
export default CanvasRenderer;
232+
export {
233+
CanvasRenderer,
234+
registerComponentConstructor
235+
};

‎src/ReactDOMComponentTree.js‎

Lines changed: 3 additions & 3 deletions
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 = '__reactInternalInstance$' + randomKey;
1111

1212
/**
1313
* Given a DOM node, return the closest ReactDOMComponent or
@@ -28,11 +28,11 @@ export function getClosestInstanceFromNode(node) {
2828
}
2929
}
3030

31-
const inst = node[internalInstanceKey];
31+
let inst = node[internalInstanceKey];
3232
if (inst.tag === HostComponent || inst.tag === HostText) {
3333
// In Fiber, this will always be the deepest root.
3434
return inst;
3535
}
3636

3737
return null;
38-
}
38+
}

0 commit comments

Comments
 (0)