Merge pull request #57 from dabbott/codesandbox

Add CodeSandbox integration

Author: dabbott

package.json

@@ -53,6 +53,7 @@
     "babel-preset-stage-1": "^6.3.13",
     "babel-runtime": "^6.3.19",
     "codemirror": "^5.54.0",
+    "codesandbox": "^2.2.1",
     "css-loader": "^3.5.3",
     "diff": "^4.0.1",
     "eslint": "^1.10.3",

src/components/workspace/CodeSandboxButton.tsx

@@ -0,0 +1,143 @@
+import { getParameters } from 'codesandbox/lib/api/define'
+import React, { memo, useMemo } from 'react'
+import { useOptions } from '../../contexts/OptionsContext'
+import { entries, fromEntries } from '../../utils/Object'
+import { prefixObject } from '../../utils/Styles'
+import HeaderLink from './HeaderLink'
+
+interface Props {
+  files: Record<string, string>
+  children?: React.ReactNode
+}
+
+const styles = prefixObject({
+  form: {
+    display: 'flex',
+  },
+  // Reset button CSS: https://gist.github.com/MoOx/9137295
+  button: {
+    border: 'none',
+    margin: '0',
+    padding: '0',
+    width: 'auto',
+    overflow: 'visible',
+    background: 'transparent',
+    color: 'inherit',
+    font: 'inherit',
+    lineHeight: 'normal',
+    WebkitFontSmoothing: 'inherit',
+    MozOsxFontSmoothing: 'inherit',
+    WebkitAppearance: 'none',
+  },
+})
+
+const scriptTargetMap: Record<number, string> = {
+  0: 'ES3',
+  1: 'ES5',
+  2: 'ES2015',
+  3: 'ES2016',
+  4: 'ES2017',
+  5: 'ES2018',
+  6: 'ES2019',
+  7: 'ES2020',
+  99: 'ESNext',
+  100: 'JSON',
+}
+
+const moduleKindMap: Record<number, string> = {
+  0: 'None',
+  1: 'CommonJS',
+  2: 'AMD',
+  3: 'UMD',
+  4: 'System',
+  5: 'ES2015',
+  6: 'ES2020',
+  99: 'ESNext',
+}
+
+const jsxEmitMap: Record<number, string> = {
+  0: 'none',
+  1: 'preserve',
+  2: 'react',
+  3: 'react-native',
+}
+
+export const CodeSandboxButton = memo(function CodeSandboxButton({
+  files,
+  children,
+}: Props) {
+  const internalOptions = useOptions()
+
+  const parameters = useMemo(() => {
+    const { typescript, title, initialTab: main } = internalOptions
+    const compilerOptions = typescript.compilerOptions || {}
+
+    const allFiles = {
+      ...files,
+      ...(typescript.enabled && {
+        'tsconfig.json': JSON.stringify(
+          {
+            compilerOptions: {
+              ...compilerOptions,
+              ...('target' in compilerOptions && {
+                target: scriptTargetMap[compilerOptions.target as number],
+              }),
+              ...('module' in compilerOptions && {
+                module: moduleKindMap[compilerOptions.module as number],
+              }),
+              ...('jsx' in compilerOptions && {
+                jsx: jsxEmitMap[compilerOptions.jsx as number],
+              }),
+              lib: (compilerOptions.lib || typescript.libs || [])
+                .map((name) => (name.startsWith('lib.') ? name.slice(4) : name))
+                .filter((name) => name !== 'lib'),
+            },
+          },
+          null,
+          2
+        ),
+      }),
+    }
+
+    return getParameters({
+      files: {
+        'package.json': {
+          isBinary: false,
+          content: {
+            name: title,
+            version: '1.0.0',
+            main,
+            scripts: {
+              start: `parcel ${main} --open`,
+              build: `parcel build ${main}`,
+            },
+            dependencies: {},
+            devDependencies: {
+              'parcel-bundler': '^1.6.1',
+            },
+          } as any,
+        },
+        ...fromEntries(
+          entries(allFiles).map(([name, code]) => [
+            name,
+            { isBinary: false, content: code },
+          ])
+        ),
+      },
+    })
+  }, [files, internalOptions])
+
+  return (
+    <form
+      style={styles.form}
+      action="https://codesandbox.io/api/v1/sandboxes/define"
+      method="POST"
+      target="_blank"
+    >
+      <input type="hidden" name="parameters" value={parameters} />
+      <button style={styles.button} type="submit">
+        <HeaderLink>{children}</HeaderLink>
+      </button>
+    </form>
+  )
+})

src/components/workspace/Fullscreen.tsx renamed to src/components/workspace/HeaderLink.tsx

@@ -1,5 +1,4 @@
 import React, { CSSProperties, memo } from 'react'
-import screenfull from 'screenfull'
 import { mergeStyles, prefixObject } from '../../utils/Styles'
 
 const styles = prefixObject({
@@ -10,22 +9,27 @@ const styles = prefixObject({
     padding: '0 20px',
     display: 'flex',
     alignItems: 'center',
+    cursor: 'pointer',
+    textDecoration: 'underline',
   },
 })
 
 interface Props {
-  title: string
+  children: React.ReactNode
   textStyle?: CSSProperties
+  onClick?: () => void
 }
 
-const toggleFullscreen = () => (screenfull as any).toggle()
-
-export default memo(function Fullscreen({ textStyle, title }: Props) {
+export default memo(function Fullscreen({
+  textStyle,
+  onClick,
+  children,
+}: Props) {
   const computedTextStyle = mergeStyles(styles.text, textStyle)
 
   return (
-    <div style={computedTextStyle} onClick={toggleFullscreen}>
-      {title}
+    <div style={computedTextStyle} onClick={onClick}>
+      {children}
     </div>
   )
 })

src/components/workspace/panes/EditorPane.tsx

@@ -1,4 +1,5 @@
 import React, { memo, useState } from 'react'
+import screenfull from 'screenfull'
 import { LogCommand } from '../../../types/Messages'
 import { EditorPaneOptions } from '../../../utils/Panes'
 import { columnStyle, mergeStyles, prefixObject } from '../../../utils/Styles'
@@ -11,14 +12,18 @@ import {
 import About from '../About'
 import Button from '../Button'
 import Editor, { Props as EditorProps } from '../Editor'
-import Fullscreen from '../Fullscreen'
+import HeaderLink from '../HeaderLink'
 import Header from '../Header'
 import Overlay from '../Overlay'
 import Status from '../Status'
 import Tabs from '../Tabs'
 import { PlaygroundOptions, PublicError, ExternalStyles } from '../Workspace'
 import type { WorkspaceDiff } from '../App'
 import { TypeScriptOptions, UserInterfaceStrings } from '../../../utils/options'
+import { useOptions } from '../../../contexts/OptionsContext'
+import { CodeSandboxButton } from '../CodeSandboxButton'
+
+const toggleFullscreen = () => (screenfull as any).toggle()
 
 const styles = prefixObject({
   editorPane: columnStyle,
@@ -97,9 +102,11 @@ export default memo(function EditorPane({
   getTypeInfo,
   onClickTab,
 }: Props) {
+  const internalOptions = useOptions()
+
   const [showDetails, setShowDetails] = useState(false)
 
-  const { title } = options
+  const title = options.title ?? internalOptions.title
 
   const fileDiff = diff[activeFile] ? diff[activeFile].ranges : []
 
@@ -108,6 +115,24 @@ export default memo(function EditorPane({
 
   const style = mergeStyles(styles.editorPane, options.style)
 
+  const headerElements = (
+    <>
+      {fullscreen && (
+        <HeaderLink
+          textStyle={externalStyles.tabText}
+          onClick={toggleFullscreen}
+        >
+          {strings.fullscreen}
+        </HeaderLink>
+      )}
+      {internalOptions.codesandbox && (
+        <CodeSandboxButton files={files}>
+          {strings.codesandbox}
+        </CodeSandboxButton>
+      )}
+    </>
+  )
+
   return (
     <div style={style}>
       {title && (
@@ -116,12 +141,7 @@ export default memo(function EditorPane({
           headerStyle={externalStyles.header}
           textStyle={externalStyles.headerText}
         >
-          {fullscreen && (
-            <Fullscreen
-              title={strings.fullscreen}
-              textStyle={externalStyles.headerText}
-            />
-          )}
+          {headerElements}
         </Header>
       )}
       {fileTabs.length > 1 && (
@@ -137,12 +157,7 @@ export default memo(function EditorPane({
           activeTextStyle={externalStyles.tabTextActive}
           changedTextStyle={externalStyles.tabTextChanged}
         >
-          {fullscreen && !title && (
-            <Fullscreen
-              title={strings.fullscreen}
-              textStyle={externalStyles.tabText}
-            />
-          )}
+          {!title && headerElements}
         </Tabs>
       )}
       <Editor

src/contexts/OptionsContext.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react'
+import { InternalOptions } from '../utils/options'
+
+const OptionsContext = createContext<InternalOptions | undefined>(undefined)
+
+export const OptionsProvider = OptionsContext.Provider
+
+export const useOptions = () => {
+  const options = useContext(OptionsContext)
+
+  if (!options) {
+    throw new Error(`Supply a Options component using OptionsContext.Provider`)
+  }
+
+  return options
+}

src/environments/html-environment.tsx

@@ -1,4 +1,5 @@
 import { appendCSS } from '../utils/CSS'
+import { entries } from '../utils/Object'
 import { initializeCommunication } from '../utils/playerCommunication'
 import { createAppLayout } from '../utils/PlayerUtils'
 import { EnvironmentOptions, IEnvironment } from './IEnvironment'
@@ -31,7 +32,7 @@ export class HTMLEnvironment implements IEnvironment {
         document.write(entryFile)
         document.close()
 
-        const cssFiles = Object.entries(context.fileMap).filter(([name]) =>
+        const cssFiles = entries(context.fileMap).filter(([name]) =>
           name.endsWith('.css')
         )
 

src/index.tsx

@@ -11,6 +11,7 @@ import { prefixAndApply } from './utils/Styles'
 import { appendCSS } from './utils/CSS'
 import { normalize, PublicOptions, getFileExtensions } from './utils/options'
 import App from './components/workspace/App'
+import { OptionsProvider } from './contexts/OptionsContext'
 
 const { data = '{}', preset } = getHashString()
 
@@ -34,7 +35,12 @@ const mount = document.getElementById('player-root') as HTMLDivElement
 prefixAndApply({ display: 'flex' }, mount)
 
 function render() {
-  ReactDOM.render(<App onChange={onChange} {...rest} />, mount)
+  ReactDOM.render(
+    <OptionsProvider value={internalOptions}>
+      <App onChange={onChange} {...rest} />
+    </OptionsProvider>,
+    mount
+  )
 }
 
 const extensions = getFileExtensions(internalOptions)

src/typescript-worker.ts

@@ -1,4 +1,5 @@
 import * as ts from 'typescript'
+import { entries } from './utils/Object'
 import type {
   TypeScriptErrorResponse,
   TypeScriptRequest,
@@ -137,7 +138,7 @@ onmessage = function ({ data }) {
       compiler.then(({ host }) => {
         const { files } = command
 
-        Object.entries(files).forEach(([filename, code]) => {
+        entries(files).forEach(([filename, code]) => {
           host.addFile(filename, code)
         })
       })

src/utils/Object.ts

@@ -0,0 +1,37 @@
+export function hasOwnProperty<O extends object, K extends PropertyKey>(
+  obj: O,
+  key: K
+): obj is O & { [key in K]: unknown } {
+  return Object.prototype.hasOwnProperty.call(obj, key)
+}
+
+function isEnumerable(obj: object, key: PropertyKey) {
+  return Object.prototype.propertyIsEnumerable.call(obj, key)
+}
+
+export function fromEntries<T = any>(
+  entries: Iterable<readonly [PropertyKey, T]>
+): { [k: string]: T } {
+  return [...entries].reduce((obj: Record<PropertyKey, T>, [key, val]) => {
+    obj[key as any] = val
+    return obj
+  }, {})
+}
+
+export function entries<T>(
+  obj: { [s: string]: T } | ArrayLike<T>
+): [string, T][] {
+  if (obj == null) {
+    throw new TypeError('Cannot convert undefined or null to object')
+  }
+
+  const pairs: [string, T][] = []
+
+  for (let key in obj) {
+    if (hasOwnProperty(obj, key) && isEnumerable(obj, key)) {
+      pairs.push([key, obj[key]])
+    }
+  }
+
+  return pairs
+}