Component progress

Author: Ives van Hoorne

packages/react-sandpack/package.json

@@ -31,7 +31,7 @@
     "semantic-release": "semantic-release",
     "semantic-release-prepare": "ts-node tools/semantic-release-prepare",
     "precommit": "lint-staged",
-    "storybook": "start-storybook"
+    "storybook": "start-storybook -p 9001 -c .storybook"
   },
   "lint-staged": {
     "{src,test}/**/*.ts": [
@@ -74,13 +74,18 @@
     "mapCoverage": true
   },
   "dependencies": {
-    "codesandbox-import-utils": "^1.1.21"
+    "codesandbox-import-utils": "^1.1.21",
+    "react-broadcast": "^0.6.2"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0"
   },
   "devDependencies": {
     "@storybook/addon-knobs": "^3.3.14",
     "@storybook/react": "^3.3.14",
     "@types/jest": "^22.0.0",
     "@types/node": "^9.4.6",
+    "@types/react-broadcast": "^0.6.0",
     "awesome-typescript-loader": "^3.5.0",
     "colors": "^1.1.2",
     "commitizen": "^2.9.6",

packages/react-sandpack/src/components/BrowserPreview/BrowserPreview.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import SandpackConsumer from '../SandpackConsumer';
+import Preview from '../Preview';
+
+export default class BrowserPreview extends React.PureComponent {
+  render() {
+    return (
+      <div>
+        This is the navigation
+        <Preview />
+      </div>
+    );
+  }
+}

packages/react-sandpack/src/components/BrowserPreview/index.ts

@@ -0,0 +1,3 @@
+import BrowserPreview from './BrowserPreview';
+
+export default BrowserPreview;

packages/react-sandpack/src/components/Preview/Preview.tsx

@@ -1,64 +1,47 @@
 import * as React from 'react';
-import { Manager } from 'sandpack';
+import SandpackConsumer from '../SandpackConsumer';
 
-import { IFileProps } from '../types';
+export interface PreviewProps {
+  browser: HTMLIFrameElement;
+}
+
+class Preview extends React.PureComponent<PreviewProps> {
+  container?: HTMLDivElement;
 
-export default class Preview extends React.PureComponent<IFileProps> {
-  static defaultProps = {
-    dependencies: {},
-    entry: '/index.js',
-    sandboxUrl: 'https://sandbox.codesandbox.io',
+  setContainerElement = (el: HTMLDivElement) => {
+    this.container = el;
   };
 
-  manager?: Manager;
+  initializeFrame = () => {
+    const { browser } = this.props;
 
-  setupFrame = (el: HTMLIFrameElement) => {
-    if (el) {
-      this.manager = new Manager(
-        el,
-        {
-          dependencies: this.props.dependencies,
-          files: this.props.files,
-          entry: this.props.entry,
-        },
-        {
-          sandboxUrl: this.props.sandboxUrl,
-        }
-      );
-    }
-  };
+    if (browser && this.container) {
+      browser.style.width = '100%';
+      browser.style.height = '500px';
+      browser.style.visibility = 'visible';
+      browser.style.position = 'relative';
 
-  sendCode = () => {
-    if (this.manager) {
-      this.manager.sendCode(
-        this.props.files,
-        this.props.dependencies,
-        this.props.entry
-      );
+      this.container.appendChild(browser);
     }
   };
 
-  componentDidUpdate(prevProps: IFileProps) {
-    if (
-      this.props.files !== prevProps.files ||
-      this.props.dependencies !== prevProps.dependencies ||
-      this.props.entry !== prevProps.entry
-    ) {
-      this.sendCode();
+  componentDidUpdate(prevProps: PreviewProps) {
+    if (prevProps.browser !== this.props.browser) {
+      this.initializeFrame();
     }
   }
 
+  render() {
+    return <div ref={this.setContainerElement} />;
+  }
+}
+
+export default class ContainerElement extends React.PureComponent {
   render() {
     return (
-      <iframe
-        style={{
-          width: this.props.width || '100%',
-          height: this.props.height || '500px',
-          border: 'none',
-        }}
-        src={this.props.sandboxUrl}
-        ref={this.setupFrame}
-      />
+      <SandpackConsumer>
+        {state => <Preview browser={state.browserFrame} />}
+      </SandpackConsumer>
     );
   }
 }

packages/react-sandpack/src/components/SandpackConsumer/SandpackConsumer.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Subscriber } from 'react-broadcast';
+
+import { ISandpackContext } from '../types';
+
+export interface Props {
+  children: (state: ISandpackContext) => React.ReactNode;
+}
+
+export default class SandpackConsumer extends React.PureComponent<Props> {
+  render() {
+    return <Subscriber channel="sandpack">{this.props.children}</Subscriber>;
+  }
+}

packages/react-sandpack/src/components/SandpackConsumer/index.ts

@@ -0,0 +1,3 @@
+import SandpackConsumer from './SandpackConsumer';
+
+export default SandpackConsumer;

packages/react-sandpack/src/components/SandpackProvider/SandpackProvider.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { Broadcast } from 'react-broadcast';
+import { Manager } from 'sandpack';
+
+import { IFileProps, IFiles } from '../types';
+
+export interface State {
+  files: IFiles;
+}
+
+export default class SandpackProvider extends React.PureComponent<
+  IFileProps,
+  State
+> {
+  manager?: Manager;
+  iframe?: HTMLIFrameElement;
+
+  constructor(props: IFileProps) {
+    super(props);
+
+    this.state = {
+      files: props.files,
+    };
+  }
+
+  setupFrame = (el: HTMLIFrameElement) => {
+    this.manager = new Manager(el, {
+      files: this.props.files,
+      entry: this.props.entry,
+      dependencies: this.props.dependencies,
+    });
+
+    this.iframe = el;
+  };
+
+  updateFiles = (files: IFiles) => {
+    this.setState({ files });
+
+    if (this.manager) {
+      this.manager.sendCode(files, {}, '/index.js');
+    }
+  };
+
+  componentDidUpdate(props: IFileProps) {
+    if (props.files !== this.props.files) {
+      this.updateFiles(this.props.files);
+    }
+  }
+
+  render() {
+    const { children } = this.props;
+    const { files } = this.state;
+    return (
+      <Broadcast
+        channel="sandpack"
+        value={{
+          files,
+          updateFiles: this.updateFiles,
+          browserFrame: this.iframe,
+        }}
+      >
+        <div className="sandpack">
+          {/* We create a hidden iframe, the bundler will live in this. */}
+          <iframe
+            ref={this.setupFrame}
+            style={{
+              width: 0,
+              height: 0,
+              border: 0,
+              outline: 0,
+              position: 'absolute',
+              visibility: 'hidden',
+            }}
+            src="http://localhost:3001"
+          />
+          {children}
+        </div>
+      </Broadcast>
+    );
+  }
+}

packages/react-sandpack/src/components/SandpackProvider/index.ts

@@ -0,0 +1,3 @@
+import SandpackProvider from './SandpackProvider';
+
+export default SandpackProvider;

packages/react-sandpack/src/components/types.d.ts

@@ -1,14 +1,20 @@
-export interface IFileProps {
-  files: {
-    [path: string]: {
-      code: string;
-    };
+export interface IFiles {
+  [path: string]: {
+    code: string;
   };
+}
+
+export interface IFileProps {
+  files: IFiles;
   entry: string;
   dependencies: {
-    [dep: string]: string;
+    [depName: string]: string;
   };
   width?: number | string;
   height?: number | string;
   sandboxUrl: string;
 }
+
+export interface ISandpackContext {
+  browserFrame: HTMLIFrameElement;
+}

packages/react-sandpack/stories/InTheWild.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { storiesOf, setAddon } from '@storybook/react';
+import JSXAddon from 'storybook-addon-jsx';
+import { withKnobs, text, object } from '@storybook/addon-knobs/react';
+
+import SandpackProvider from '../src/components/SandpackProvider/index.ts';
+import BrowserPreview from '../src/components/BrowserPreview/index.ts';
+
+setAddon(JSXAddon);
+
+const stories = storiesOf('InTheWild', module);
+
+stories.addDecorator(withKnobs);
+
+stories.addWithJSX('with one file', () => (
+  <SandpackProvider
+    files={{
+      '/index.js': {
+        code: text(
+          'code',
+          `document.body.innerHTML = \`<div>$\{require('uuid')()}</div>\``
+        ),
+      },
+    }}
+    dependencies={object('dependencies', {
+      uuid: 'latest',
+    })}
+  >
+    <BrowserPreview />
+  </SandpackProvider>
+));