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/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,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"