Progress

Ives van Hoorne · Ives van Hoorne · commit cde33c3a30d8 · 2018-02-28T15:12:55.000+01:00
diff --git a/packages/app/src/app/components/Preview/index.js b/packages/app/src/app/components/Preview/index.js
@@ -65,8 +65,6 @@ class BasePreview extends React.Component<Props, State> {
     if (props.delay) {
       this.executeCode = debounce(this.executeCode, 800);
     }
-
-    frames = [];
   }
 
   static defaultProps = {
diff --git a/packages/codesandbox-api/src/typings/codesandbox.ts b/packages/codesandbox-api/src/typings/codesandbox.ts
diff --git a/packages/react-sandpack/gulpfile.js b/packages/react-sandpack/gulpfile.js
@@ -0,0 +1,13 @@
+const gulp = require('gulp');
+const concat = require('gulp-concat');
+const sass = require('gulp-sass');
+
+gulp.task('sass', () =>
+  gulp
+    .src('./src/**/*.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(concat('styles.css'))
+    .pipe(gulp.dest('./dist/'))
+);
+
+gulp.task('sass:watch', () => gulp.watch('./src/**/*.scss', ['sass']));
diff --git a/packages/react-sandpack/package.json b/packages/react-sandpack/package.json
@@ -20,8 +20,10 @@
   "scripts": {
     "lint": "tslint -t codeFrame 'src/**/*.ts' 'test/**/*.ts'",
     "prebuild": "rimraf dist",
-    "build": "tsc --module commonjs && rollup -c rollup.config.ts && typedoc --out docs --target es6 --theme minimal --mode file src",
-    "start": "rollup -c rollup.config.ts -w",
+    "build": "tsc --module commonjs && rollup -c rollup.config.ts && typedoc --out docs --target es6 --theme minimal --mode file src && gulp sass",
+    "start": "npm-run-all --parallel watch:**",
+    "watch:rollup": "rollup -c rollup.config.ts -w",
+    "watch:gulp": "gulp sass:watch",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:prod": "npm run lint && npm run test -- --coverage --no-cache",
@@ -75,7 +77,8 @@
   },
   "dependencies": {
     "codesandbox-import-utils": "^1.1.21",
-    "react-broadcast": "^0.6.2"
+    "react-broadcast": "^0.6.2",
+    "rollup-plugin-scss": "^0.4.0"
   },
   "peerDependencies": {
     "react": "^16.0.0"
@@ -92,17 +95,22 @@
     "coveralls": "^3.0.0",
     "cross-env": "^5.0.1",
     "cz-conventional-changelog": "^2.0.0",
+    "gulp": "^3.9.1",
+    "gulp-concat": "^2.6.1",
+    "gulp-sass": "^3.1.0",
     "husky": "^0.14.0",
     "jest": "^22.0.2",
     "lint-staged": "^7.0.0",
     "lodash.camelcase": "^4.3.0",
+    "npm-run-all": "^4.1.2",
     "prettier": "^1.4.4",
     "prompt": "^1.0.0",
     "replace-in-file": "^3.0.0-beta.2",
     "rimraf": "^2.6.1",
     "rollup": "^0.55.4",
     "rollup-plugin-commonjs": "^8.0.2",
     "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-sass": "^0.6.0",
     "rollup-plugin-sourcemaps": "^0.4.2",
     "rollup-plugin-typescript2": "^0.11.1",
     "semantic-release": "^12.4.1",
diff --git a/packages/react-sandpack/src/components/BrowserPreview/BrowserPreview.tsx b/packages/react-sandpack/src/components/BrowserPreview/BrowserPreview.tsx
@@ -2,14 +2,19 @@ import * as React from 'react';
 
 import SandpackConsumer from '../SandpackConsumer';
 import Preview from '../Preview';
+import Navigator from '../Navigator';
 
-export default class BrowserPreview extends React.PureComponent {
+import cn from '../../utils/cn';
+
+export interface Props {}
+
+export default class BrowserPreview extends React.PureComponent<Props> {
   render() {
     return (
-      <div>
-        This is the navigation
+      <React.Fragment>
+        <Navigator />
         <Preview />
-      </div>
+      </React.Fragment>
     );
   }
 }
diff --git a/packages/react-sandpack/src/components/BrowserPreview/styles.scss b/packages/react-sandpack/src/components/BrowserPreview/styles.scss
@@ -0,0 +1,3 @@
+.sandpack-BrowserPreview__navigation {
+  color: red;
+}
diff --git a/packages/react-sandpack/src/components/Navigator/Navigator.tsx b/packages/react-sandpack/src/components/Navigator/Navigator.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { listen } from 'codesandbox-api';
+import withSandpack from '../../utils/with-sandpack';
+
+import { ISandpackContext } from '../../types';
+
+interface Props {
+  sandpack: ISandpackContext;
+  test: string;
+}
+
+class Navigator extends React.Component<Props> {
+  listener: Function;
+
+  constructor(props: Props) {
+    super(props);
+    this.listener = listen(this.handleMessage);
+  }
+
+  componentWillUnmount() {
+    this.listener();
+  }
+
+  handleMessage = (message: any) => {
+    console.log(message);
+  };
+
+  render() {
+    return <div />;
+  }
+}
+
+export default withSandpack(Navigator);
diff --git a/packages/react-sandpack/src/components/Navigator/index.ts b/packages/react-sandpack/src/components/Navigator/index.ts
@@ -0,0 +1,3 @@
+import Navigator from './Navigator';
+
+export default Navigator;
diff --git a/packages/react-sandpack/src/components/OpenInCodeSandbox/OpenInCodeSandbox.tsx b/packages/react-sandpack/src/components/OpenInCodeSandbox/OpenInCodeSandbox.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { getParameters } from 'codesandbox-import-utils/lib/api/define';
-import { IFileProps } from '../types';
+import { IFileProps } from '../../types';
 
 export default class OpenInCodeSandbox extends React.Component<IFileProps> {
   static defaultProps = {
diff --git a/packages/react-sandpack/src/components/SandpackConsumer/SandpackConsumer.tsx b/packages/react-sandpack/src/components/SandpackConsumer/SandpackConsumer.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Subscriber } from 'react-broadcast';
 
-import { ISandpackContext } from '../types';
+import { ISandpackContext } from '../../types';
 
 export interface Props {
   children: (state: ISandpackContext) => React.ReactNode;
diff --git a/packages/react-sandpack/src/components/SandpackProvider/SandpackProvider.tsx b/packages/react-sandpack/src/components/SandpackProvider/SandpackProvider.tsx
@@ -2,33 +2,85 @@ import * as React from 'react';
 import { Broadcast } from 'react-broadcast';
 import { Manager } from 'sandpack';
 
-import { IFileProps, IFiles } from '../types';
+import { IFileProps, IFiles } from '../../types';
 
 export interface State {
   files: IFiles;
+  browserPath: string;
+}
+
+export interface Props {
+  files: IFiles;
+  initialPath?: string;
+  entry?: string;
+  dependencies?: {
+    [depName: string]: string;
+  };
+  width?: number | string;
+  height?: number | string;
+  sandboxUrl?: string;
 }
 
 export default class SandpackProvider extends React.PureComponent<
-  IFileProps,
+  Props,
   State
 > {
   manager?: Manager;
   iframe?: HTMLIFrameElement;
 
-  constructor(props: IFileProps) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
-      files: props.files,
+      files: this.createMissingPackageJSON(
+        props.files,
+        props.dependencies,
+        props.entry
+      ),
+      browserPath: props.initialPath || '/',
     };
   }
 
+  createMissingPackageJSON(
+    files: IFiles,
+    dependencies?: {
+      [depName: string]: string;
+    },
+    entry?: string
+  ) {
+    const newFiles = { ...files };
+
+    if (!files['/package.json']) {
+      if (!dependencies) {
+        throw new Error(
+          'No dependencies specified, please specify either a package.json or dependencies.'
+        );
+      }
+
+      if (!entry) {
+        throw new Error(
+          "No entry specified, please specify either a package.json with 'main' field or dependencies."
+        );
+      }
+
+      files['/package.json'] = {
+        code: JSON.stringify(
+          {
+            name: 'run',
+            main: entry,
+            dependencies,
+          },
+          null,
+          2
+        ),
+      };
+    }
+
+    return newFiles;
+  }
+
   setupFrame = (el: HTMLIFrameElement) => {
-    this.manager = new Manager(el, {
-      files: this.props.files,
-      entry: this.props.entry,
-      dependencies: this.props.dependencies,
-    });
+    this.manager = new Manager(el, this.props.files);
 
     this.iframe = el;
   };
@@ -37,26 +89,37 @@ export default class SandpackProvider extends React.PureComponent<
     this.setState({ files });
 
     if (this.manager) {
-      this.manager.sendCode(files, {}, '/index.js');
+      this.manager.sendCode(files);
     }
   };
 
   componentDidUpdate(props: IFileProps) {
-    if (props.files !== this.props.files) {
-      this.updateFiles(this.props.files);
+    if (
+      props.files !== this.props.files ||
+      props.dependencies !== this.props.dependencies ||
+      props.entry !== this.props.entry
+    ) {
+      const newFiles = this.createMissingPackageJSON(
+        this.props.files,
+        this.props.dependencies,
+        this.props.entry
+      );
+
+      this.updateFiles(newFiles);
     }
   }
 
   render() {
     const { children } = this.props;
-    const { files } = this.state;
+    const { files, browserPath } = this.state;
+
     return (
       <Broadcast
         channel="sandpack"
         value={{
           files,
-          updateFiles: this.updateFiles,
           browserFrame: this.iframe,
+          updateFiles: this.updateFiles,
         }}
       >
         <div className="sandpack">
diff --git a/packages/react-sandpack/src/types.d.ts b/packages/react-sandpack/src/types.d.ts
diff --git a/packages/react-sandpack/src/utils/cn.ts b/packages/react-sandpack/src/utils/cn.ts
@@ -0,0 +1,8 @@
+const LIB_NAME = 'sandpack';
+
+export default function generateClassName(
+  namespace: string,
+  stylename: string
+) {
+  return `${LIB_NAME}-${namespace}__${stylename}`;
+}
diff --git a/packages/react-sandpack/src/utils/with-sandpack.tsx b/packages/react-sandpack/src/utils/with-sandpack.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Subscriber } from 'react-broadcast';
+
+import { ISandpackContext } from '../types';
+
+export default function withSandpack(Component: React.ComponentClass<any>) {
+  return (props: any) => (
+    <Subscriber channel="sandpack">
+      {sandpack => <Component {...props} sandpack={sandpack} />}
+    </Subscriber>
+  );
+}
diff --git a/packages/react-sandpack/stories/InTheWild.js b/packages/react-sandpack/stories/InTheWild.js
@@ -7,6 +7,8 @@ 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';
 
+import '../dist/styles.css';
+
 setAddon(JSXAddon);
 
 const stories = storiesOf('InTheWild', module);
@@ -26,6 +28,7 @@ stories.addWithJSX('with one file', () => (
     dependencies={object('dependencies', {
       uuid: 'latest',
     })}
+    entry="/index.js"
   >
     <BrowserPreview />
   </SandpackProvider>
diff --git a/packages/sandpack/src/manager/index.ts b/packages/sandpack/src/manager/index.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -65,8 +65,6 @@ class BasePreview extends React.Component<Props, State> {`
`65`	`65`	`if (props.delay) {`
`66`	`66`	`this.executeCode = debounce(this.executeCode, 800);`
`67`	`67`	`}`
`68`		`-`
`69`		`- frames = [];`
`70`	`68`	`}`
`71`	`69`
`72`	`70`	`static defaultProps = {`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.sandpack-BrowserPreview__navigation {`
	`2`	`+ color: red;`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import Navigator from './Navigator';`
	`2`	`+`
	`3`	`+export default Navigator;`