Add ReactScreen

packages/library/package.json

@@ -20,14 +20,18 @@
  "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",
  "@types/jest": "^27.4.0",
  "@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",

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'
 

packages/library/src/react/index.ts

@@ -0,0 +1,42 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import { Screen, ScreenOptions } from '../html/screen'
+
+export interface ReactScreenOptions<T> extends ScreenOptions {
+ component: React.FunctionComponent<T>
+ 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 within the `props` option.
+ */
+export class ReactScreen<T> extends Screen {
+ componentDiv?: HTMLElement
+ component: React.FC<T>
+ props: T
+
+ constructor(options: ReactScreenOptions<T>) {
+ 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 element = React.createElement(this.component, this.props)
+ ReactDOM.render(element, this.componentDiv)
+ }
+
+ onEnd() {
+ if (!this.componentDiv) {
+ return
+ }
+ ReactDOM.unmountComponentAtNode(this.componentDiv)
+ this.componentDiv.remove()
+ }
+}

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/[email protected]":
  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/[email protected]":
  version "2.4.27"
  resolved "https://registry.yarnpkg.com/@types/seedrandom/-/seedrandom-2.4.27.tgz#9db563937dd86915f69092bc43259d2f48578e41"
@@ -12195,14 +12216,16 @@ 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"
  common-tags "^1.8.0"
  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"