Updates

Author: Ives van Hoorne

packages/app/config/webpack.common.js

@@ -13,9 +13,10 @@ const babelDev = require('./babel.dev');
 const babelProd = require('./babel.prod');
 
 const NODE_ENV = JSON.parse(env['process.env.NODE_ENV']);
+const SANDBOX_ONLY = !!process.env.SANDBOX_ONLY;
 const __DEV__ = NODE_ENV === 'development'; // eslint-disable-line no-underscore-dangle
 const __PROD__ = NODE_ENV === 'production'; // eslint-disable-line no-underscore-dangle
-const __TEST__ = NODE_ENV === 'test'; // eslint-disable-line no-underscore-dangle
+// const __TEST__ = NODE_ENV === 'test'; // eslint-disable-line no-underscore-dangle
 const babelConfig = __DEV__ ? babelDev : babelProd;
 
 // Shim for `eslint-plugin-vue/lib/index.js`
@@ -35,7 +36,7 @@ const ESLINT_PLUGIN_VUE_INDEX = `module.exports = {
 }`;
 
 module.exports = {
-  entry: __TEST__
+  entry: SANDBOX_ONLY
     ? {
         sandbox: [
           require.resolve('./polyfills'),

packages/app/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "cross-env LOCAL_SERVER=1 node scripts/start.js",
     "start:dev_api": "node scripts/start.js",
-    "start:test": "cross-env LOCAL_SERVER=1 NODE_ENV=test node scripts/start.js",
+    "start:test": "cross-env LOCAL_SERVER=1 NODE_ENV=test SANDBOX_ONLY=true node scripts/start.js",
     "build": "NODE_ENV=production node scripts/build.js",
     "test": "jest --env=jsdom",
     "test:watch": "jest --watch --env=jsdom",

packages/app/src/app/components/Preview/DevTools/Console/index.js

@@ -5,8 +5,6 @@ import ClearIcon from 'react-icons/lib/md/clear-all';
 
 import CircularJSON from 'circular-json';
 
-import { evaluateInSandbox } from 'app/components/Preview';
-
 import Message from './Message';
 import Input from './Input';
 
@@ -135,7 +133,7 @@ class Console extends React.Component {
     this.addMessage('log', [command], 'command');
 
     // TODO move everything of frames to store and this command too
-    evaluateInSandbox(this.props.sandboxId, command);
+    dispatch({ type: 'evaluate', command });
   };
 
   render() {

packages/app/src/app/components/Preview/index.js

@@ -12,10 +12,6 @@ import { generateFileFromSandbox } from 'common/templates/configuration/package-
 import Navigator from './Navigator';
 import { Container, StyledFrame } from './elements';
 
-export function evaluateInSandbox(command: string) {
-  dispatch({ type: 'evaluate', command });
-}
-
 type Props = {
   onInitialized: (preview: BasePreview) => void, // eslint-disable-line no-use-before-define
   sandbox: Sandbox,
@@ -190,7 +186,10 @@ class BasePreview extends React.Component<Props, State> {
       this.handleRefresh();
     } else {
       if (!this.props.isInProjectView) {
-        evaluateInSandbox(`history.pushState({}, null, '/')`);
+        dispatch({
+          type: 'evaluate',
+          command: `history.pushState({}, null, '/')`,
+        });
       }
 
       const modulesObject = {};

packages/react-sandpack/src/components/FileExplorer/Directory/Directory.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+import File from '../File';
+import ModuleList from '../ModuleList';
+
+import { IFiles } from '../../../types';
+
+export interface Props {
+  prefixedPath: string;
+  files: IFiles;
+  selectFile: (path: string) => void;
+  openedPath: string;
+  depth: number;
+}
+
+export default class Directory extends React.Component<Props> {
+  state = {
+    open: true,
+  };
+
+  toggleOpen = () => {
+    this.setState({ open: !this.state.open });
+  };
+
+  render() {
+    const { prefixedPath, files, selectFile, openedPath, depth } = this.props;
+
+    return (
+      <div key={prefixedPath}>
+        <File onClick={this.toggleOpen} path={prefixedPath + '/'} />
+        {this.state.open && (
+          <ModuleList
+            prefixedPath={prefixedPath}
+            files={files}
+            selectFile={selectFile}
+            openedPath={openedPath}
+            depth={depth}
+          />
+        )}
+      </div>
+    );
+  }
+}

packages/react-sandpack/src/components/FileExplorer/Directory/index.ts

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

packages/react-sandpack/src/components/FileExplorer/File/File.tsx

@@ -5,13 +5,16 @@ import cn from '../../../utils/cn';
 
 export interface Props {
   path: string;
-  selectFile: (path: string) => void;
+  selectFile?: (path: string) => void;
   active?: boolean;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 
 export default class File extends React.PureComponent<Props> {
   selectFile = () => {
-    this.props.selectFile(this.props.path);
+    if (this.props.selectFile) {
+      this.props.selectFile(this.props.path);
+    }
   };
 
   render() {
@@ -25,7 +28,10 @@ export default class File extends React.PureComponent<Props> {
     });
 
     return (
-      <div onClick={this.selectFile} className={className}>
+      <div
+        onClick={this.props.selectFile ? this.selectFile : this.props.onClick}
+        className={className}
+      >
         {fileName}
       </div>
     );

packages/react-sandpack/src/components/FileExplorer/ModuleList/ModuleList.tsx

@@ -2,43 +2,57 @@ import * as React from 'react';
 import { IFiles, IFile } from '../../../types';
 
 import File from '../File';
+import Directory from '../Directory';
 
 export interface Props {
   prefixedPath: string;
   files: IFiles;
   selectFile: (path: string) => void;
   openedPath: string;
+  depth?: number;
 }
 
 export default class ModuleList extends React.PureComponent<Props> {
-  render() {
-    const { openedPath } = this.props;
+  render(): JSX.Element {
+    const {
+      depth = 0,
+      openedPath,
+      selectFile,
+      prefixedPath,
+      files,
+    } = this.props;
 
-    const filesToShow: { path: string; code: string }[] = [];
-    const directoriesToShow: { path: string }[] = [];
-    const pathParts = this.props.prefixedPath.split('/');
+    const filesToShow: { path: string }[] = [];
+    const directoriesToShow: Set<string> = new Set();
+    const pathParts = prefixedPath.split('/');
 
-    Object.keys(this.props.files).forEach(path => {
-      if (path.startsWith(this.props.prefixedPath)) {
+    Object.keys(files).forEach(path => {
+      if (path.startsWith(prefixedPath)) {
         const filePathParts = path.split('/');
 
         if (filePathParts.length === pathParts.length) {
           if (path.endsWith('/')) {
-            directoriesToShow.push({ path });
+            directoriesToShow.add(path);
           } else {
-            filesToShow.push({ path, code: this.props.files[path].code });
+            filesToShow.push({ path });
           }
+        } else if (filePathParts.length === pathParts.length + 1) {
+          filePathParts.pop();
+          directoriesToShow.add(filePathParts.join('/') + '/');
         }
       }
     });
 
     return (
-      <div>
-        {directoriesToShow.map(dir => (
-          <File
-            key={dir.path}
-            selectFile={this.props.selectFile}
-            path={dir.path}
+      <div style={{ marginLeft: `${0.5 * depth}rem` }}>
+        {Array.from(directoriesToShow).map(dir => (
+          <Directory
+            key={dir}
+            prefixedPath={dir}
+            files={files}
+            selectFile={selectFile}
+            openedPath={openedPath}
+            depth={depth + 1}
           />
         ))}
 

packages/react-sandpack/stories/InTheWild.js

@@ -52,6 +52,35 @@ stories.addWithJSX('one file', () => (
   </SandpackProvider>
 ));
 
+stories.addWithJSX('subdirectories', () => (
+  <SandpackProvider
+    files={{
+      '/index.js': {
+        code: `document.body.innerHTML = \`<div>$\{require('uuid')()}</div>\``,
+      },
+      '/test/index.js': {
+        code: 'module.exports = "test"',
+      },
+    }}
+    dependencies={{ uuid: 'latest' }}
+    entry="/index.js"
+    skipEval
+  >
+    <div
+      style={{
+        display: 'flex',
+        width: '100vw',
+        height: '100vh',
+      }}
+    >
+      <FileExplorer style={{ width: 300 }} />
+
+      <CodeEditor style={{ width: '100%', overflowX: 'hidden' }} />
+      <TranspiledCodeView style={{ width: '100%', overflowX: 'hidden' }} />
+    </div>
+  </SandpackProvider>
+));
+
 stories.addWithJSX('transpiled view', () => (
   <SandpackProvider
     files={{