From ebafc77758e81927307617e2bdef8416a8079474 Mon Sep 17 00:00:00 2001 From: jdpigeon Date: Thu, 5 May 2022 17:25:24 -0400 Subject: [PATCH 1/6] added react --- packages/library/package.json | 6 ++++- yarn.lock | 47 ++++++++++++++++++++++++++++++++++- 2 files changed, 51 insertions(+), 2 deletions(-) diff --git a/packages/library/package.json b/packages/library/package.json index d850845d5..526c69fb6 100644 --- a/packages/library/package.json +++ b/packages/library/package.json @@ -20,7 +20,9 @@ "lodash": "^4.17.10", "seedrandom": "^3.0.5", "shim-keyboard-event-key": "^1.0.2", - "ua-parser-js": "^1.0.2" + "ua-parser-js": "^1.0.2", + "react": "^18.1.0", + "react-dom": "^18.1.0" }, "devDependencies": { "@types/file-saver": "1.3.0", @@ -28,6 +30,8 @@ "@types/lodash": "4.14.108", "@types/seedrandom": "2.4.27", "@types/ua-parser-js": "^0.7.35", + "@types/react": "^18.0.8", + "@types/react-dom": "^18.0.3", "babel-plugin-istanbul": "^6.0.0", "chai": "^4.1.0", "jest": "^27.4.7", diff --git a/yarn.lock b/yarn.lock index 4cb34f862..fc844b57f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3708,6 +3708,13 @@ resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.1.tgz#48fd98c1561fe718b61733daed46ff115b496e18" integrity sha512-eqz8c/0kwNi/OEHQfvIuJVLTst3in0e7uTKeuY+WL/zfKn0xVujOTp42bS/vUUokhK5P2BppLd9JXMOMHcgbjA== +"@types/react-dom@^18.0.3": + version "18.0.3" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.3.tgz#a022ea08c75a476fe5e96b675c3e673363853831" + integrity sha512-1RRW9kst+67gveJRYPxGmVy8eVJ05O43hg77G2j5m76/RFJtMbcfAs2viQ2UNsvvDg8F7OfQZx8qQcl6ymygaQ== + dependencies: + "@types/react" "*" + "@types/react-redux@^7.1.16": version "7.1.16" resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.16.tgz#0fbd04c2500c12105494c83d4a3e45c084e3cb21" @@ -3726,6 +3733,15 @@ "@types/prop-types" "*" csstype "^3.0.2" +"@types/react@^18.0.8": + version "18.0.8" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.8.tgz#a051eb380a9fbcaa404550543c58e1cf5ce4ab87" + integrity sha512-+j2hk9BzCOrrOSJASi5XiOyBbERk9jG5O73Ya4M0env5Ixi6vUNli4qy994AINcEF+1IEHISYFfIT4zwr++LKw== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + csstype "^3.0.2" + "@types/resolve@0.0.8": version "0.0.8" resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194" @@ -3740,6 +3756,11 @@ dependencies: "@types/node" "*" +"@types/scheduler@*": + version "0.16.2" + resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" + integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew== + "@types/seedrandom@2.4.27": version "2.4.27" resolved "https://registry.yarnpkg.com/@types/seedrandom/-/seedrandom-2.4.27.tgz#9db563937dd86915f69092bc43259d2f48578e41" @@ -12195,7 +12216,7 @@ konva@^7.2.2: integrity sha512-yk/li8rUF+09QNlOdkwbEId+QvfATMe/aMGVouWW1oFoUVTYWHsQuIAE6lWy11DK8mLJEJijkNAXC5K+NVlMew== "lab.js@file:packages/library": - version "22.0.0-alpha6" + version "22.0.0-beta1" dependencies: "@types/common-tags" "^1.8.0" "@types/jsdom" "^16.2.5" @@ -12203,6 +12224,8 @@ konva@^7.2.2: file-saver "^2.0.5" jszip "^3.5.0" lodash "^4.17.10" + react "^18.1.0" + react-dom "^18.1.0" seedrandom "^3.0.5" shim-keyboard-event-key "^1.0.2" ua-parser-js "^1.0.2" @@ -15843,6 +15866,14 @@ react-dom@^17.0.1: object-assign "^4.1.1" scheduler "^0.20.2" +react-dom@^18.1.0: + version "18.1.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f" + integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w== + dependencies: + loose-envify "^1.1.0" + scheduler "^0.22.0" + react-error-overlay@^6.0.9: version "6.0.9" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a" @@ -16026,6 +16057,13 @@ react@^17.0.1: loose-envify "^1.1.0" object-assign "^4.1.1" +react@^18.1.0: + version "18.1.0" + resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890" + integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ== + dependencies: + loose-envify "^1.1.0" + reactstrap@^8.9.0: version "8.9.0" resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-8.9.0.tgz#bca4afa3f5cd18899ef9b33d877a141886d5abae" @@ -16883,6 +16921,13 @@ scheduler@^0.20.1, scheduler@^0.20.2: loose-envify "^1.1.0" object-assign "^4.1.1" +scheduler@^0.22.0: + version "0.22.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8" + integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ== + dependencies: + loose-envify "^1.1.0" + schema-utils@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770" From 6eab45ea8cac972df59565e3bbbe9e6f9c0d1899 Mon Sep 17 00:00:00 2001 From: jdpigeon Date: Thu, 5 May 2022 17:25:38 -0400 Subject: [PATCH 2/6] Added react screen --- packages/library/src/react/index.ts | 45 +++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 packages/library/src/react/index.ts diff --git a/packages/library/src/react/index.ts b/packages/library/src/react/index.ts new file mode 100644 index 000000000..f167be4b3 --- /dev/null +++ b/packages/library/src/react/index.ts @@ -0,0 +1,45 @@ +import React from 'react' +import ReactDOM from 'react-dom' + +import { Screen, ScreenOptions } from '../html/screen' + +export interface ReactScreenOptions extends ScreenOptions { + component: React.FunctionComponent + props: T +} + +/** + * ReactScreens have all the features of Screen as well as the + * ability to render a React component to a DOM element. Simply include + * a reference to a React.FunctionComponent in the `component` option and its props as the `props` option. + */ +export class ReactScreen extends Screen { + options!: ReactScreenOptions + componentDiv?: HTMLElement + + constructor(options: ReactScreenOptions) { + super(options) + } + + onRun() { + super.onRun() + this.componentDiv = document.createElement('div') + this.options.el?.appendChild(this.componentDiv) + if (!this.options.component) { + return + } + + const { component, props } = this.options + + const element = React.createElement(component, props) + ReactDOM.render(element, this.componentDiv) + } + + onEnd() { + if (!this.componentDiv) { + return + } + ReactDOM.unmountComponentAtNode(this.componentDiv) + this.componentDiv.remove() + } +} From cc9cf735657f7fbb2e481f42ae5578e5eb2bc22a Mon Sep 17 00:00:00 2001 From: jdpigeon Date: Thu, 5 May 2022 17:26:06 -0400 Subject: [PATCH 3/6] exported react screen --- packages/library/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/library/src/index.ts b/packages/library/src/index.ts index c12701366..6f84ad56c 100644 --- a/packages/library/src/index.ts +++ b/packages/library/src/index.ts @@ -12,6 +12,7 @@ export * as data from './data' export * as flow from './flow' export * as html from './html' export * as canvas from './canvas' +export * as react from './react' export * as plugins from './plugins' From a32627f4d9d0ac2abebed3ced0c07246b276f2b9 Mon Sep 17 00:00:00 2001 From: jdpigeon Date: Tue, 10 May 2022 09:50:15 -0400 Subject: [PATCH 4/6] Updated dom element location --- packages/library/src/react/index.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/library/src/react/index.ts b/packages/library/src/react/index.ts index f167be4b3..6e652e177 100644 --- a/packages/library/src/react/index.ts +++ b/packages/library/src/react/index.ts @@ -24,13 +24,8 @@ export class ReactScreen extends Screen { onRun() { super.onRun() this.componentDiv = document.createElement('div') - this.options.el?.appendChild(this.componentDiv) - if (!this.options.component) { - return - } - + this.internals.domConnection.el?.appendChild(this.componentDiv) const { component, props } = this.options - const element = React.createElement(component, props) ReactDOM.render(element, this.componentDiv) } From cbcd38842d70353dd534d87bbf73133abeca416d Mon Sep 17 00:00:00 2001 From: jdpigeon Date: Tue, 10 May 2022 10:03:06 -0400 Subject: [PATCH 5/6] Changed dom location again to global rootEl --- packages/library/src/react/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/library/src/react/index.ts b/packages/library/src/react/index.ts index 6e652e177..a989e6051 100644 --- a/packages/library/src/react/index.ts +++ b/packages/library/src/react/index.ts @@ -24,7 +24,7 @@ export class ReactScreen extends Screen { onRun() { super.onRun() this.componentDiv = document.createElement('div') - this.internals.domConnection.el?.appendChild(this.componentDiv) + this.global.rootEl?.appendChild(this.componentDiv) const { component, props } = this.options const element = React.createElement(component, props) ReactDOM.render(element, this.componentDiv) From 096516ccddd2916b3d531fc43aa3843b67b5c5a8 Mon Sep 17 00:00:00 2001 From: jdpigeon Date: Tue, 7 Jun 2022 11:06:27 -0400 Subject: [PATCH 6/6] moved from options to fields --- packages/library/src/react/index.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/library/src/react/index.ts b/packages/library/src/react/index.ts index a989e6051..beb7f64a2 100644 --- a/packages/library/src/react/index.ts +++ b/packages/library/src/react/index.ts @@ -11,22 +11,24 @@ export interface ReactScreenOptions extends ScreenOptions { /** * ReactScreens have all the features of Screen as well as the * ability to render a React component to a DOM element. Simply include - * a reference to a React.FunctionComponent in the `component` option and its props as the `props` option. + * a reference to a React.FunctionComponent in the `component` option and its props within the `props` option. */ export class ReactScreen extends Screen { - options!: ReactScreenOptions componentDiv?: HTMLElement + component: React.FC + props: T constructor(options: ReactScreenOptions) { super(options) + this.component = options.component + this.props = options.props } onRun() { super.onRun() this.componentDiv = document.createElement('div') this.global.rootEl?.appendChild(this.componentDiv) - const { component, props } = this.options - const element = React.createElement(component, props) + const element = React.createElement(this.component, this.props) ReactDOM.render(element, this.componentDiv) }