Add registerBundledModules option

Author: dabbott

README.md

@@ -103,6 +103,7 @@ The sandbox accepts the following props/parameters.
 | **`entry`** | The filename of the file that runs first. This is only relevant when showing multiple files with the `files` parameter. Defaults to `index.js`, or `index.tsx` if TypeScript is enabled. | `'index.js'` or `'index.tsx'` |
 | **`initialTab`** | The filename of the tab to show by default. This is only relevant when showing multiple files with the `files` parameter. Defaults to the value of `entry`. | `entry` |
 | **`modules`** | An array of external modules to make available to the sandbox. Each object in the array should be an object containing a `name` and `url`. As a shorthand, pass a string name to load a module from unpkg (`https://unpkg.com/${name}`). More detail below. | `[]` |
+| **`registerBundledModules`** | Should the player share its bundled React, React DOM, and React Native implementations with the running app? Disable this if you plan to pass a `react`, `react-dom` or `react-native` module url. | `true` |
 | **`css`** | An optional CSS string to apply within the workspace `iframe`. | `''` |
 | **`styles`** | An map of inline style objects, applied to various elements to customize the style of the UI. Example: `{ header: { backgroundColor: 'red' } }` | `{}` |
 | **`strings`** | A map of strings that appear in the UI. Example: `{ loading: 'Loading dependencies...' }` | `{}` |

src/components/workspace/App.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react'
+import React, { useState } from 'react'
 import screenfull from 'screenfull'
 import diff, { DiffRange } from '../../utils/Diff'
 import { InternalOptions, WorkspaceStep } from '../../utils/options'
@@ -65,6 +65,7 @@ export default function App({
  workspaces,
  typescript,
  detectedModules,
+ registerBundledModules,
  compiler,
  onChange,
 }: Props) {
@@ -100,6 +101,7 @@ export default function App({
  activeStepIndex={activeStepIndex}
  onChangeActiveStepIndex={setActiveStepIndex}
  detectedModules={detectedModules}
+ registerBundledModules={registerBundledModules}
  diff={diff}
  // Merge props from the current workspace step
  {...(workspaces.length > 0

src/components/workspace/PlayerFrame.tsx

@@ -1,11 +1,11 @@
 import React, { PureComponent } from 'react'
+import { ConsoleCommand, Message } from '../../types/Messages'
 import * as ExtendedJSON from '../../utils/ExtendedJSON'
+import { encode } from '../../utils/queryString'
 import { prefixObject } from '../../utils/Styles'
+import type { ExternalModule } from '../player/VendorComponents'
 import Phone from './Phone'
-import { Message, ConsoleCommand } from '../../types/Messages'
-import { encode } from '../../utils/queryString'
 import { ExternalStyles } from './Workspace'
-import type { ExternalModule } from '../player/VendorComponents'
 
 const styles = prefixObject({
  iframe: {
@@ -27,6 +27,7 @@ interface Props {
  sharedEnvironment: boolean
  detectedModules: ExternalModule[]
  modules: ExternalModule[]
+ registerBundledModules: boolean
  styleSheet: string
  css: string
  prelude: string
@@ -149,6 +150,7 @@ export default class extends PureComponent<Props, State> {
  externalStyles,
  environmentName,
  assetRoot,
+ registerBundledModules,
  detectedModules,
  modules,
  styleSheet,
@@ -169,6 +171,7 @@ export default class extends PureComponent<Props, State> {
  assetRoot,
  detectedModules: JSON.stringify(detectedModules),
  modules: JSON.stringify(modules),
+ registerBundledModules,
  styleSheet,
  css,
  statusBarColor,

src/components/workspace/Workspace.tsx

@@ -1,24 +1,33 @@
 import React, {
  CSSProperties,
+ memo,
  ReactNode,
+ useCallback,
  useEffect,
+ useMemo,
  useReducer,
  useRef,
- useMemo,
- useCallback,
- memo,
  useState,
 } from 'react'
 import type * as ts from 'typescript'
+import { useOptions } from '../../contexts/OptionsContext'
+import useRerenderEffect from '../../hooks/useRerenderEffect'
+import useResponsiveBreakpoint from '../../hooks/useResponsiveBreakpoint'
 import * as workspace from '../../reducers/workspace'
 import { ConsoleCommand, LogCommand } from '../../types/Messages'
 import babelRequest, { BabelResponse } from '../../utils/BabelRequest'
-import { PaneOptions, containsPane } from '../../utils/Panes'
+import {
+ CompilerOptions,
+ TypeScriptOptions,
+ UserInterfaceStrings,
+ WorkspaceStep,
+} from '../../utils/options'
+import { containsPane, PaneOptions } from '../../utils/Panes'
 import { prefixObject, rowStyle } from '../../utils/Styles'
 import { Tab } from '../../utils/Tab'
-import typeScriptRequest, {
- TypeScriptCompileRequest,
-} from '../../utils/TypeScriptRequest'
+import typeScriptRequest from '../../utils/TypeScriptRequest'
+import type { ExternalModule } from '../player/VendorComponents'
+import { WorkspaceDiff } from './App'
 import { Props as EditorProps } from './Editor'
 import ConsolePane from './panes/ConsolePane'
 import EditorPane from './panes/EditorPane'
@@ -27,18 +36,6 @@ import StackPane from './panes/StackPane'
 import TranspilerPane from './panes/TranspilerPane'
 import WorkspacesPane from './panes/WorkspacesPane'
 import PlayerFrame from './PlayerFrame'
-import useResponsiveBreakpoint from '../../hooks/useResponsiveBreakpoint'
-import {
- WorkspaceStep,
- UserInterfaceStrings,
- CompilerOptions,
- TypeScriptOptions,
-} from '../../utils/options'
-import { WorkspaceDiff } from './App'
-import useRerenderEffect from '../../hooks/useRerenderEffect'
-import type { ExternalModule } from '../player/VendorComponents'
-import { basename, extname } from '../../utils/path'
-import { useOptions } from '../../contexts/OptionsContext'
 
 const {
  reducer,
@@ -144,6 +141,7 @@ export interface Props {
  activeStepIndex: number
  onChangeActiveStepIndex: (index: number) => void
  detectedModules: ExternalModule[]
+ registerBundledModules: boolean
 }
 
 type WorkspacePaneProps = {
@@ -161,6 +159,7 @@ type WorkspacePaneProps = {
  typescriptOptions: TypeScriptOptions
  workspaces: WorkspaceStep[]
  detectedModules: ExternalModule[]
+ registerBundledModules: boolean
  diff: Record<string, WorkspaceDiff>
  activeStepIndex: number
  onChangeActiveStepIndex: (index: number) => void
@@ -197,6 +196,7 @@ const WorkspacePane = memo((props: WorkspacePaneProps) => {
  sharedEnvironment,
  workspaces,
  detectedModules,
+ registerBundledModules,
  activeStepIndex,
  onChangeActiveStepIndex,
  fullscreen,
@@ -265,6 +265,7 @@ const WorkspacePane = memo((props: WorkspacePaneProps) => {
  onCreatePlayer(options.id, player)
  }}
  detectedModules={detectedModules}
+ registerBundledModules={registerBundledModules}
  options={options}
  externalStyles={externalStyles}
  environmentName={environmentName}
@@ -635,6 +636,7 @@ export default function Workspace(props: Props) {
  typescriptOptions={props.typescriptOptions}
  workspaces={props.workspaces}
  detectedModules={props.detectedModules}
+ registerBundledModules={props.registerBundledModules}
  diff={props.diff}
  activeStepIndex={props.activeStepIndex}
  onChangeActiveStepIndex={props.onChangeActiveStepIndex}

src/components/workspace/panes/PlayerPane.tsx

@@ -1,23 +1,23 @@
-import React, { CSSProperties, memo, useState } from 'react'
+import React, { memo, useState } from 'react'
+import { useOptions } from '../../../contexts/OptionsContext'
 import { ConsoleCommand, LogCommand } from '../../../types/Messages'
+import { PlayerPaneOptions } from '../../../utils/Panes'
 import {
  columnStyle,
  mergeStyles,
  prefixObject,
  rowStyle,
 } from '../../../utils/Styles'
+import type { ExternalModule } from '../../player/VendorComponents'
 import Button from '../Button'
 import Console from '../Console'
 import Header from '../Header'
+import HeaderLink from '../HeaderLink'
+import { ReloadIcon } from '../Icons'
 import PlayerFrame from '../PlayerFrame'
+import { HorizontalSpacer } from '../Spacer'
 import Status from '../Status'
-import { PlayerPaneOptions } from '../../../utils/Panes'
 import { ExternalStyles } from '../Workspace'
-import type { ExternalModule } from '../../player/VendorComponents'
-import { ReloadIcon } from '../Icons'
-import HeaderLink from '../HeaderLink'
-import { HorizontalSpacer } from '../Spacer'
-import { useOptions } from '../../../contexts/OptionsContext'
 
 const styles = prefixObject({
  playerPane: mergeStyles(columnStyle, { flex: '0 0 auto' }),
@@ -32,6 +32,7 @@ export interface Props {
  sharedEnvironment: boolean
  files: Record<string, string>
  detectedModules: ExternalModule[]
+ registerBundledModules: boolean
  logs: LogCommand[]
  onPlayerRun: () => void
  onPlayerReady: () => void
@@ -55,6 +56,7 @@ const PlayerPane = memo(
  onPlayerError,
  onPlayerConsole,
  detectedModules,
+ registerBundledModules,
  },
  ref
  ) {
@@ -112,6 +114,7 @@ const PlayerPane = memo(
  assetRoot={assetRoot}
  detectedModules={detectedModules}
  modules={modules}
+ registerBundledModules={registerBundledModules}
  styleSheet={styleSheet}
  css={css}
  prelude={prelude}

src/environments/IEnvironment.tsx

@@ -26,6 +26,7 @@ export interface EnvironmentOptions {
  styles: PlayerStyles
  modules: ExternalModuleDescription[]
  detectedModules: ExternalModuleDescription[]
+ registerBundledModules: boolean
 }
 
 export interface IEnvironment {

src/environments/javascript-environment.tsx

@@ -26,6 +26,7 @@ export interface BeforeEvaluateOptions {
 export interface AfterEvaluateOptions {
  context: EvaluationContext
  host: HTMLDivElement
+ require: (name: string) => unknown
 }
 
 class JavaScriptSandbox {
@@ -54,10 +55,6 @@ class JavaScriptSandbox {
  const { fileMap, entry, requireCache } = context
  let { environment, assetRoot } = this
 
- if (environment.hasModule(name)) {
- return environment.requireModule(name)
- }
-
  // If name begins with . or ..
  if (name.match(/^\.{1,2}\//)) {
  const lookup = path.join(path.dirname(requirerName), name)
@@ -103,6 +100,8 @@ class JavaScriptSandbox {
  }
 
  return requireCache[name]
+ } else if (environment.hasModule(name)) {
+ return environment.requireModule(name)
  } else {
  throw new Error(`Failed to resolve module ${name}`)
  }
@@ -133,7 +132,11 @@ class JavaScriptSandbox {
 
  this.evaluate(entry, fileMap[entry], context)
 
- environment.afterEvaluate({ context, host })
+ environment.afterEvaluate({
+ context,
+ host,
+ require: (name: string) => this.require(context, name, entry),
+ })
  } catch (e) {
  onError(codeVersion, e as Error)
  }
@@ -182,23 +185,26 @@ export class JavaScriptEnvironment implements IEnvironment {
  styles,
  modules,
  detectedModules,
+ registerBundledModules,
  }: EnvironmentOptions) {
- // Since these are already loaded anyway, there's no real cost to exposing them.
- // Always register them even for pure JS
- this.nodeModules['react'] = React
- this.nodeModules['react-dom'] = ReactDOM
- this.nodeModules['prop-types'] = PropTypes
-
- Object.assign(window, {
- React,
- ReactDOM,
- PropTypes,
- })
+ if (registerBundledModules) {
+ // Since these are already loaded anyway, there's no real cost to exposing them.
+ // Always register them even for pure JS
+ this.nodeModules['react'] = React
+ this.nodeModules['react-dom'] = ReactDOM
+ this.nodeModules['prop-types'] = PropTypes
+
+ Object.assign(window, {
+ React,
+ ReactDOM,
+ PropTypes,
+ })
+ }
 
  return this.loadExternalModules({
  modules,
  detectedModules,
- hasModule: this.hasModule,
+ hasModule: registerBundledModules ? this.hasModule : () => false,
  }).then(() => {
  const { appElement, wrapperElement } = createAppLayout(document, styles)
 
@@ -263,9 +269,9 @@ export class JavaScriptEnvironment implements IEnvironment {
  const normalizedModules = modules.filter(({ name }) => !hasModule(name))
 
  // Only download detected modules that aren't also listed as vendor components
- const detectedModulesToDownload = detectedModules.filter(
- ({ name }) => !normalizedModules.some((m) => m.name === name)
- )
+ const detectedModulesToDownload = detectedModules
+ .filter(({ name }) => !hasModule(name))
+  .filter(({ name }) => !normalizedModules.some((m) => m.name === name))
 
  return VendorComponents.load([
  ...normalizedModules,

src/environments/react-environment.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import type ReactDOM from 'react-dom'
 import hasProperty from '../utils/hasProperty'
 import {
  AfterEvaluateOptions,
@@ -8,11 +8,16 @@ import {
 } from './javascript-environment'
 
 class ReactEnvironment extends JavaScriptEnvironment {
+ lastReactDOM: typeof ReactDOM | null = null
+
  beforeEvaluate({ host }: BeforeEvaluateOptions) {
- ReactDOM.unmountComponentAtNode(host)
+ this.lastReactDOM?.unmountComponentAtNode(host)
  }
 
- afterEvaluate({ context, host }: AfterEvaluateOptions) {
+ afterEvaluate({ context, host, require }: AfterEvaluateOptions) {
+ const currentReactDOM = require('react-dom') as typeof ReactDOM
+ this.lastReactDOM = currentReactDOM
+
  const EntryComponent = context.requireCache[context.entry]
 
  if (
@@ -21,7 +26,7 @@ class ReactEnvironment extends JavaScriptEnvironment {
  hasProperty(EntryComponent, 'default')
  ) {
  const Component = EntryComponent.default as React.FunctionComponent
- ReactDOM.render(<Component />, host)
+ currentReactDOM.render(<Component />, host)
  }
 
  const renderedElement = host.firstElementChild as HTMLElement | undefined