Merge pull request #55 from dabbott/html-environment

Add experimental HTML environment

Author: dabbott

README.md

@@ -96,7 +96,7 @@ The sandbox accepts the following props/parameters.
 
 | Title | Description | Default |
 | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
-| **`preset`** | This sets reasonable defaults for other parameters. Options are `javascript`, `react`, and `react-native`.   | `'javascript'` |
+| **`preset`** | This sets reasonable defaults for other parameters. Options are `javascript`, `react`, and `react-native`. Experimental options are `html` and `python` - make sure to lock down your javascript-playgrounds library version if you use these, since they may change. | `'javascript'` |
 | **`title`** | An optional title for the editor pane. | `''` |
 | **`code`** | The code to show/run in the player. | The sample app |
 | **`files`** | A map of `{ [filename]: code }`. This will take precedence over `code` if given. | `undefined` |

package.json

@@ -1,6 +1,6 @@
 {
  "name": "javascript-playgrounds",
- "version": "1.1.0",
+ "version": "1.1.1",
  "description": "Interactive JavaScript sandbox",
  "main": "dist/javascript-playgrounds.js",
  "files": [

src/components/workspace/Editor.tsx

@@ -11,6 +11,7 @@ import { SourceLocation, LogCommand } from '../../types/Messages'
 import type * as ts from 'typescript'
 import CodeMirror from 'codemirror'
 import type { PlaygroundOptions } from './Workspace'
+import { extname } from '../../utils/path'
 
 // Import scrollPosIntoView directly. The public API calls the native DOM scrollIntoView,
 // which will scroll the parent window when displayed in an iframe.
@@ -36,8 +37,15 @@ const styles = prefixObject({
 
 const docCache: Record<string, CM.Doc> = {}
 
-function getMode(filename: string) {
- return filename.endsWith('.py') ? 'python' : 'text/typescript-jsx'
+const modeMap: Record<string, string> = {
+ '.py': 'python',
+ '.css': 'css',
+ '.html': 'htmlmixed',
+}
+
+function getMode(filename: string): string {
+ const ext = extname(filename)
+ return modeMap[ext] || 'text/typescript-jsx'
 }
 
 export interface Props {

src/components/workspace/PlayerFrame.tsx

@@ -69,6 +69,8 @@ export default class extends PureComponent<Props, State> {
  id: null,
  }
 
+ iframe = React.createRef<HTMLIFrameElement>()
+
  componentDidMount() {
  const { sharedEnvironment } = this.props
 
@@ -128,7 +130,7 @@ export default class extends PureComponent<Props, State> {
  this.codeVersion = codeVersion
  break
  case 'ready':
- ;(this.refs.iframe as HTMLIFrameElement).contentWindow!.postMessage(
+ this.iframe.current!.contentWindow!.postMessage(
  { fileMap, entry, codeVersion, source: 'rnwp' },
  '*'
  )
@@ -176,7 +178,7 @@ export default class extends PureComponent<Props, State> {
  return (
  <iframe
  style={styles.iframe}
- ref={'iframe'}
+ ref={this.iframe}
  frameBorder={0}
  src={`player.html#${queryString}`}
  />

src/environments/html-environment.tsx

@@ -0,0 +1,46 @@
+import { appendCSS } from '../utils/CSS'
+import { initializeCommunication } from '../utils/playerCommunication'
+import { createAppLayout } from '../utils/PlayerUtils'
+import { EnvironmentOptions, IEnvironment } from './IEnvironment'
+
+export class HTMLEnvironment implements IEnvironment {
+ async initialize({
+ id,
+ sharedEnvironment,
+ styles,
+ }: EnvironmentOptions): Promise<void> {
+ const { appElement } = createAppLayout(document, styles)
+ const iframe = document.createElement('iframe')
+
+ appElement.appendChild(iframe)
+
+ initializeCommunication({
+ id,
+ prefixLineCount: 0,
+ sharedEnvironment,
+ onRunApplication: (context) => {
+ const entryFile = context.fileMap[context.entry]
+
+ const document = iframe.contentDocument
+
+ if (!document) return
+
+ // https://stackoverflow.com/questions/5784638/replace-entire-content-of-iframe
+ document.close()
+ document.open()
+ document.write(entryFile)
+ document.close()
+
+ const cssFiles = Object.entries(context.fileMap).filter(([name]) =>
+ name.endsWith('.css')
+ )
+
+ cssFiles.forEach(([_name, value]) => {
+ appendCSS(document, value)
+ })
+ },
+ })
+ }
+}
+
+export default new HTMLEnvironment()

src/environments/javascript-environment.tsx

@@ -8,6 +8,7 @@ import VendorComponents, {
 import formatError from '../utils/formatError'
 import * as path from '../utils/path'
 import { initializeCommunication } from '../utils/playerCommunication'
+import { createAppLayout } from '../utils/PlayerUtils'
 import { prefixAndApply } from '../utils/Styles'
 import type {
  EnvironmentOptions,
@@ -196,19 +197,7 @@ export class JavaScriptEnvironment implements IEnvironment {
  detectedModules,
  hasModule: this.hasModule,
  }).then(() => {
- const mount = document.getElementById('player-root') as HTMLDivElement
- prefixAndApply(styles.playerRoot, mount)
-
- const wrapperElement = document.createElement('div')
- prefixAndApply(styles.playerWrapper, wrapperElement)
-
- mount.appendChild(wrapperElement)
-
- const appElement = document.createElement('div')
- appElement.id = 'app'
- prefixAndApply(styles.playerApp, appElement)
-
- wrapperElement.appendChild(appElement)
+ const { appElement, wrapperElement } = createAppLayout(document, styles)
 
  if (statusBarHeight > 0) {
  const statusBarStyle: CSSProperties = {

src/index.tsx

@@ -9,7 +9,7 @@ import ReactDOM from 'react-dom'
 import { getHashString, buildHashString } from './utils/HashString'
 import { prefixAndApply } from './utils/Styles'
 import { appendCSS } from './utils/CSS'
-import { normalize, InternalOptions, PublicOptions } from './utils/options'
+import { normalize, PublicOptions, getFileExtensions } from './utils/options'
 import App from './components/workspace/App'
 
 const { data = '{}', preset } = getHashString()
@@ -20,10 +20,12 @@ if (preset) {
  publicOptions.preset = decodeURIComponent(preset)
 }
 
-const { css, targetOrigin, ...rest }: InternalOptions = normalize(publicOptions)
+const internalOptions = normalize(publicOptions)
+
+const { css, targetOrigin, ...rest } = internalOptions
 
 if (css) {
- appendCSS(css)
+ appendCSS(document, css)
 }
 
 const mount = document.getElementById('player-root') as HTMLDivElement
@@ -35,11 +37,20 @@ function render() {
  ReactDOM.render(<App onChange={onChange} {...rest} />, mount)
 }
 
-if (rest.environmentName === 'python') {
- import('codemirror/mode/python/python' as any).then(render)
-} else {
- render()
+const extensions = getFileExtensions(internalOptions)
+const editorModes: Promise<void>[] = []
+
+if (extensions.includes('.py')) {
+ editorModes.push(import('codemirror/mode/python/python' as any))
+}
+if (extensions.includes('.html')) {
+ editorModes.push(import('codemirror/mode/htmlmixed/htmlmixed' as any))
 }
+if (extensions.includes('.css')) {
+ editorModes.push(import('codemirror/mode/css/css' as any))
+}
+
+Promise.all(editorModes).then(render)
 
 function onChange(files: Record<string, string>) {
  const merged = {

src/player.tsx

@@ -31,7 +31,7 @@ if (styleSheet === 'reset') {
 require('./styles/player.css')
 
 if (css) {
- appendCSS(css)
+ appendCSS(document, css)
 }
 
 export type PlayerStyles = {

src/utils/CSS.ts

@@ -1,4 +1,4 @@
-export const appendCSS = (css: string) => {
+export const appendCSS = (document: Document, css: string) => {
  const textNode = document.createTextNode(css)
  const element = document.createElement('style')
  element.type = 'text/css'

src/utils/CodeMirror.ts

@@ -15,11 +15,14 @@ export const getOptions = (mode: string) => ({
  extraKeys: {
  Tab: 'indentMore',
  'Cmd-/': (cm: CodeMirror.Editor) => {
- cm.listSelections().forEach((selection) => {
+ // Improve commenting within JSX (the default is HTML-style comments)
+ if (mode === 'text/typescript-jsx') {
  ;(cm as any).toggleComment({
- lineComment: mode === 'python' ? '#' : '//',
+ lineComment: '//',
  })
- })
+ } else {
+ cm.execCommand('toggleComment')
+ }
  },
  },
 })