Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add ReactScreen #170

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Add ReactScreen #170

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ebafc77
added react
jdpigeon May 5, 2022
6eab45e
Added react screen
jdpigeon May 5, 2022
cc9cf73
exported react screen
jdpigeon May 5, 2022
a32627f
Updated dom element location
jdpigeon May 10, 2022
cbcd388
Changed dom location again to global rootEl
jdpigeon May 10, 2022
096516c
moved from options to fields
jdpigeon Jun 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/library/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions packages/library/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down
45 changes: 45 additions & 0 deletions packages/library/src/react/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
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 as the `props` option.
*/
export class ReactScreen<T> extends Screen {
options!: ReactScreenOptions<T>
componentDiv?: HTMLElement

constructor(options: ReactScreenOptions<T>) {
super(options)
}

onRun() {
super.onRun()
this.componentDiv = document.createElement('div')
this.options.el?.appendChild(this.componentDiv)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This usage of the el option actually seems to have broken with the typescript update. I'm not seeing any active el attached to components now, even at run time.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this was part of the removal of runtime data from options. The component el is now part of the context in which a component is presented, which in turn is added while the study is running. I think you should be able to access the specific component via this.internals.context.el, cf. for example the canvas.Screen code

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What I ended up doing is using global.rootEl. Is there any meaningful difference between that and context.el?

Another thing I did to make this nicer in the implementation of this in our library is add rootEl to the global interface in our equivalent of html.Screen

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()
}
}
47 changes: 46 additions & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down