├── .github
    └── workflows
    │   └── test.yaml
├── .gitignore
├── .parcelrc
├── .vscode
    └── settings.json
├── README.md
├── jest.config.js
├── package.json
├── src
    ├── __tests__
    │   └── main.test.ts
    ├── api
    │   └── remote.ts
    ├── components
    │   ├── App.tsx
    │   ├── Keybindings.tsx
    │   ├── layout.ts
    │   └── windows
    │   │   ├── Filer.tsx
    │   │   ├── MonacoEditor.tsx
    │   │   ├── Preview.tsx
    │   │   ├── Tools.tsx
    │   │   └── Workspace.tsx
    ├── decls.d.ts
    ├── helpers
    │   ├── monacoFileSystem.ts
    │   └── nativeFileSystem.ts
    ├── index.html
    ├── index.tsx
    ├── reducers
    │   ├── actions.ts
    │   ├── index.ts
    │   └── presetStates.ts
    ├── storages
    │   ├── fileCache.ts
    │   ├── npmCache.ts
    │   └── workspace.ts
    ├── store
    │   └── configureStore.ts
    └── workers
    │   └── compilerWorker.ts
├── tsconfig.json
├── webpack.config.js
└── yarn.lock


/.github/workflows/test.yaml:
--------------------------------------------------------------------------------
 1 | name: Test
 2 | 
 3 | on: [push]
 4 | 
 5 | jobs:
 6 |   test:
 7 |     runs-on: ubuntu-latest
 8 |     steps:
 9 |       - uses: actions/checkout@v1
10 |       - uses: actions/setup-node@v1
11 |         with:
12 |           node-version: 12
13 |       - run: yarn install
14 |       - run: yarn typecheck
15 |       - run: yarn build
16 |       - run: yarn test


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | ### https://raw.github.com/github/gitignore/967cd6479319efde70a6fa44fa1bfa02020f2357/Node.gitignore
 2 | 
 3 | # Logs
 4 | logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Coverage directory used by tools like istanbul
11 | coverage
12 | 
13 | # Dependency directories
14 | node_modules/
15 | 
16 | # Optional npm cache directory
17 | .npm
18 | 
19 | # Optional eslint cache
20 | .eslintcache
21 | 
22 | # Yarn Integrity file
23 | .yarn-integrity
24 | 
25 | # dotenv environment variables file
26 | .env
27 | 
28 | # parcel-bundler cache (https://parceljs.org/)
29 | .cache
30 | 
31 | # next.js build output
32 | .next
33 | 
34 | # nuxt.js build output
35 | .nuxt
36 | 
37 | # vuepress build output
38 | .vuepress/dist
39 | 
40 | # Serverless directories
41 | .serverless
42 | 
43 | dist
44 | .netlify
45 | .parcel-cache


--------------------------------------------------------------------------------
/.parcelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["@parcel/config-default"]
3 | }


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "editor.formatOnSave": true,
3 |   "typescript.tsdk": "node_modules/typescript/lib"
4 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Bundle in browser
 2 | 
 3 | ## How to dev
 4 | 
 5 | - `yarn dev`: Start application server on `http://localhost:8080`
 6 | - `yarn build`: Generate `dist`
 7 | - `yarn test`: Run jest
 8 | - `yarn deploy`: Deploy to netlify (need netlify account)
 9 | 
10 | ## TODO
11 | 
12 | - [x] Resolve `preact/hooks` pattern
13 | - [x] virtual fs
14 | - [x] transform ts on compile
15 | - [ ] load types with @types/xxx
16 | - [ ] load types with `.d.ts` in repo
17 | - [ ] load types with relative path
18 | - [x] Persist current fs
19 | - [ ] Self bootstrap rollup compiler
20 | - [x] compile with tsconfig.json
21 | - [ ] in memory eslint
22 | - [ ] test-runner
23 | - [ ] filer: fold modules
24 | - [x] filer: add
25 | - [x] filer: delete
26 | - [ ] filer: rename
27 | - [ ] filer: validate filename
28 | - [ ] Resolve process.env before compile
29 | - [ ] Compiler version Selectable
30 | 
31 | ## LICENSE
32 | 
33 | MIT
34 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   roots: ["<rootDir>/src", "<rootDir>/packages"],
3 |   transform: {
4 |     "^.+\\.tsx?$": "ts-jest"
5 |   },
6 |   testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
7 |   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"]
8 | };
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "license": "MIT",
 4 |   "scripts": {
 5 |     "dev": "webpack-dev-server --mode development",
 6 |     "build": "webpack --mode production",
 7 |     "typecheck": "tsc -p . --noEmit",
 8 |     "test": "jest",
 9 |     "deploy": "netlify deploy -d dist --prod"
10 |   },
11 |   "dependencies": {
12 |     "@babel/core": "^7.6.4",
13 |     "@blueprintjs/core": "^3.17.2",
14 |     "@blueprintjs/icons": "^3.12.0",
15 |     "@emotion/core": "^10.0.22",
16 |     "@mizchi/web-compiler": "^0.0.3",
17 |     "comlink": "^4.1.0",
18 |     "file-loader": "^4.2.0",
19 |     "kv-storage-polyfill": "^2.0.0",
20 |     "lodash-es": "^4.17.15",
21 |     "modern-css-reset": "^1.0.4",
22 |     "monaco-editor": "^0.18.1",
23 |     "monaco-editor-core": "^0.18.1",
24 |     "monaco-typescript": "^3.5.1",
25 |     "normalize.css": "^8.0.1",
26 |     "react": "^16.11.0",
27 |     "react-dom": "^16.11.0",
28 |     "react-redux": "^7.1.1",
29 |     "react-unite": "^0.3.1",
30 |     "redux": "^4.0.4",
31 |     "redux-promise": "^0.6.0",
32 |     "redux-thunk": "^2.3.0",
33 |     "rollup": "^1.25.2",
34 |     "rollup-plugin-json": "^4.0.0",
35 |     "rollup-plugin-replace": "^2.2.0",
36 |     "rollup-plugin-virtual": "^1.0.1",
37 |     "ses": "^0.6.4",
38 |     "terser": "^4.3.9",
39 |     "unfetch": "^4.1.0",
40 |     "url-loader": "^2.2.0",
41 |     "uuid": "^3.3.3"
42 |   },
43 |   "devDependencies": {
44 |     "@types/async": "^3.0.3",
45 |     "@types/graphlib": "^2.1.5",
46 |     "@types/hosted-git-info": "^2.7.0",
47 |     "@types/jest": "^24.0.19",
48 |     "@types/lodash-es": "^4.17.3",
49 |     "@types/npm": "^2.0.31",
50 |     "@types/react": "^16.9.10",
51 |     "@types/react-dom": "^16.9.2",
52 |     "@types/react-redux": "^7.1.5",
53 |     "@types/rollup-plugin-commonjs": "^9.3.1",
54 |     "@types/semver": "^6.0.2",
55 |     "@types/validate-npm-package-name": "^3.0.0",
56 |     "css-loader": "^3.2.0",
57 |     "html-webpack-plugin": "^3.2.0",
58 |     "isomorphic-unfetch": "^3.0.0",
59 |     "jest": "^24.9.0",
60 |     "monaco-editor-webpack-plugin": "^1.7.0",
61 |     "netlify-cli": "^2.19.3",
62 |     "prettier": "^1.19.1",
63 |     "raw-loader": "^3.1.0",
64 |     "redux-logger": "^3.0.6",
65 |     "ress": "^2.0.1",
66 |     "rollup-plugin-cdn-resolver": "0.1.3",
67 |     "rollup-plugin-commonjs": "^10.1.0",
68 |     "rollup-plugin-svelte": "^5.1.1",
69 |     "rollup-plugin-url-resolve": "^0.1.1",
70 |     "rollup-pluginutils": "^2.8.2",
71 |     "style-loader": "^1.0.0",
72 |     "svelte": "^3.15.0",
73 |     "ts-jest": "^24.1.0",
74 |     "ts-loader": "^6.2.1",
75 |     "ts-node": "^8.4.1",
76 |     "typescript": "^3.7.2",
77 |     "webpack": "^4.41.2",
78 |     "webpack-cli": "^3.3.9",
79 |     "webpack-dev-server": "^3.9.0",
80 |     "workbox-webpack-plugin": "^4.3.1",
81 |     "worker-plugin": "^3.2.0"
82 |   }
83 | }
84 | 


--------------------------------------------------------------------------------
/src/__tests__/main.test.ts:
--------------------------------------------------------------------------------
 1 | import assert from "assert";
 2 | 
 3 | test("sample", () => {
 4 |   assert(1 === 1);
 5 | });
 6 | 
 7 | // === Test example
 8 | //
 9 | // beforeEach(() => {
10 | //   document.body.innerHTML = `<div class="root"></div>`;
11 | // });
12 | 
13 | // test("Run app", () => {
14 | //   require("../main");
15 | //   assert(document.body.textContent === "Hello, {app_name}");
16 | // });
17 | 


--------------------------------------------------------------------------------
/src/api/remote.ts:
--------------------------------------------------------------------------------
 1 | import { CompileOptions } from "./../../packages/memory-compiler/index";
 2 | import { wrap } from "comlink";
 3 | 
 4 | const worker = new Worker(
 5 |   /* webpackChunkName: "compiler" */
 6 |   "../workers/compilerWorker.ts",
 7 |   { type: "module" }
 8 | );
 9 | 
10 | export const remote: {
11 |   compile(options: CompileOptions): Promise<string>;
12 |   format(code: string): Promise<string>;
13 | } = wrap(worker) as any;
14 | 


--------------------------------------------------------------------------------
/src/components/App.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { LayoutSystem, useWindowSize, WindowManager } from "react-unite";
 3 | import { WindowID, initialLayoutData } from "./layout";
 4 | 
 5 | const windowManager = new WindowManager();
 6 | windowManager.registerWindow(
 7 |   WindowID.WORKSPACE,
 8 |   React.lazy(() => import("../components/windows/Workspace"))
 9 | );
10 | windowManager.registerWindow(
11 |   WindowID.FILER,
12 |   React.lazy(() => import("../components/windows/Filer"))
13 | );
14 | windowManager.registerWindow(
15 |   WindowID.EDITOR,
16 |   React.lazy(() => import("../components/windows/MonacoEditor"))
17 | );
18 | windowManager.registerWindow(
19 |   WindowID.PREVIEW,
20 |   React.lazy(() => import("../components/windows/Preview"))
21 | );
22 | windowManager.registerWindow(
23 |   WindowID.TOOLS,
24 |   React.lazy(() => import("../components/windows/Tools"))
25 | );
26 | 
27 | export function App() {
28 |   const size = useWindowSize();
29 |   return (
30 |     <LayoutSystem
31 |       width={size.width}
32 |       height={size.height}
33 |       windowManager={windowManager}
34 |       initialLayout={initialLayoutData}
35 |     />
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/src/components/Keybindings.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from "react";
 2 | import { useDispatch } from "react-redux";
 3 | import { writeToNativeFs, loadFromNativeFS } from "../reducers/actions";
 4 | // @ts-ignore
 5 | const hasFileSystemApi: boolean = !!window.chooseFileSystemEntries;
 6 | 
 7 | export function KeyBindings() {
 8 |   const dispatch = useDispatch();
 9 |   useEffect(() => {
10 |     const fn = (ev: KeyboardEvent) => {
11 |       // console.log("key", ev.key);
12 |       if (ev.metaKey && ev.key === "s") {
13 |         if (hasFileSystemApi) {
14 |           ev.preventDefault();
15 |           dispatch(writeToNativeFs());
16 |         }
17 |       }
18 | 
19 |       if (ev.metaKey && ev.key === "o") {
20 |         if (hasFileSystemApi) {
21 |           ev.preventDefault();
22 |           dispatch(loadFromNativeFS());
23 |         }
24 |       }
25 |     };
26 |     window.addEventListener("keydown", fn);
27 |     return () => {
28 |       window.removeEventListener("keydown", fn);
29 |     };
30 |   }, []);
31 |   return <></>;
32 | }
33 | 


--------------------------------------------------------------------------------
/src/components/layout.ts:
--------------------------------------------------------------------------------
 1 | import { LayoutData } from "react-unite";
 2 | 
 3 | export enum PaneID {
 4 |   RIGHT_TOP = "right-top",
 5 |   RIGHT = "right",
 6 |   HEADER = "header",
 7 |   SIDE = "side",
 8 |   CENTER = "center"
 9 | }
10 | 
11 | export enum WindowID {
12 |   TOOLS = "#tools",
13 |   FILER = "#FILER",
14 |   PREVIEW = "#PREVIEW",
15 |   EDITOR = "#editor",
16 |   WORKSPACE = "#WORKSPACE"
17 | }
18 | 
19 | export const initialLayoutData: LayoutData = {
20 |   grid: {
21 |     columns: ["200px", "3fr", "2fr"],
22 |     rows: ["1px", "200px", "1fr"],
23 |     areas: [
24 |       [PaneID.HEADER, PaneID.HEADER, PaneID.HEADER],
25 |       [PaneID.SIDE, PaneID.CENTER, PaneID.RIGHT_TOP],
26 |       [PaneID.SIDE, PaneID.CENTER, PaneID.RIGHT]
27 |     ]
28 |   },
29 |   windows: {
30 |     [WindowID.TOOLS]: { id: WindowID.TOOLS, displayName: "Tools" },
31 |     [WindowID.FILER]: { id: WindowID.FILER, displayName: "Filer" },
32 |     [WindowID.PREVIEW]: { id: WindowID.PREVIEW, displayName: "Preview" },
33 |     [WindowID.EDITOR]: { id: WindowID.EDITOR, displayName: "Editor" },
34 |     [WindowID.WORKSPACE]: { id: WindowID.WORKSPACE, displayName: "Workspace" }
35 |   },
36 |   panes: [
37 |     {
38 |       id: PaneID.RIGHT_TOP,
39 |       displayName: "Tools",
40 |       selectedId: WindowID.TOOLS,
41 |       windowIds: [WindowID.TOOLS]
42 |     },
43 |     {
44 |       id: PaneID.SIDE,
45 |       displayName: PaneID.SIDE,
46 |       selectedId: WindowID.FILER,
47 |       windowIds: [WindowID.FILER, WindowID.WORKSPACE]
48 |     },
49 |     {
50 |       id: PaneID.CENTER,
51 |       displayName: "Center",
52 |       selectedId: WindowID.EDITOR,
53 |       windowIds: [WindowID.EDITOR]
54 |     },
55 |     {
56 |       id: PaneID.RIGHT,
57 |       showTab: false,
58 |       displayName: "Center",
59 |       selectedId: WindowID.PREVIEW,
60 |       windowIds: [WindowID.PREVIEW]
61 |     }
62 |   ]
63 | };
64 | 


--------------------------------------------------------------------------------
/src/components/windows/Filer.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useCallback, useEffect, useRef } from "react";
  2 | import { useDispatch, useSelector } from "react-redux";
  3 | import { State } from "../../reducers";
  4 | import path from "path";
  5 | import { deleteFile, addFile, selectFile } from "../../reducers/actions";
  6 | import { Menu, Tree, ITreeNode, ContextMenu, Button } from "@blueprintjs/core";
  7 | import groupBy from "lodash-es/groupBy";
  8 | 
  9 | export default function Filer() {
 10 |   const { files, currentFileId } = useSelector((s: State) => {
 11 |     return { files: s.files, currentFileId: s.editing.filepath };
 12 |   });
 13 |   const [openIds, setOpenIds] = useState<string[]>([]);
 14 | 
 15 |   const dispatch = useDispatch();
 16 | 
 17 |   const contents = toTree(files, openIds, currentFileId);
 18 |   return (
 19 |     <div style={{ width: "100%", height: "100%" }}>
 20 |       <Menu>
 21 |         <Tree
 22 |           contents={contents}
 23 |           onNodeClick={(p, ev) => {
 24 |             const id = p.id as any;
 25 |             const found = files.find(f => f.filepath === id);
 26 |             if (found) {
 27 |               dispatch(selectFile(id));
 28 |             }
 29 |           }}
 30 |           onNodeCollapse={(p, ev) => {
 31 |             console.log(p);
 32 |             setOpenIds(openIds.filter(id => id !== p.id));
 33 |           }}
 34 |           onNodeExpand={(p, ev) => {
 35 |             console.log(p);
 36 |             setOpenIds([...openIds, p.id as any]);
 37 |           }}
 38 |         />
 39 |         <AddFileButton />
 40 |       </Menu>
 41 |     </div>
 42 |   );
 43 | }
 44 | 
 45 | function AddFileButton() {
 46 |   const dispatch = useDispatch();
 47 |   const [adding, setAdding] = useState(false);
 48 |   const onClickAdd = useCallback(() => {
 49 |     setAdding(true);
 50 |   }, [adding]);
 51 | 
 52 |   const onDefine = useCallback((filepath: string) => {
 53 |     dispatch(addFile(filepath));
 54 |     setAdding(false);
 55 |   }, []);
 56 | 
 57 |   const onCancel = useCallback(() => {
 58 |     setAdding(false);
 59 |   }, []);
 60 |   if (adding) {
 61 |     return <InputFileName onDefine={onDefine} onCancel={onCancel} />;
 62 |   } else {
 63 |     return <Button icon="plus" onClick={onClickAdd} text="Add" />;
 64 |   }
 65 | }
 66 | 
 67 | function InputFileName(props: {
 68 |   onDefine: (name: string) => void;
 69 |   onCancel: () => void;
 70 | }) {
 71 |   const ref = useRef<HTMLInputElement>(null);
 72 |   const onKeyDown = useCallback(
 73 |     ev => {
 74 |       if (ev.key === "Escape") {
 75 |         props.onCancel();
 76 |       }
 77 |       if (ev.key === "Enter") {
 78 |         props.onDefine(ev.target.value);
 79 |       }
 80 |     },
 81 |     [props.onDefine, props.onCancel]
 82 |   );
 83 |   const onBlur = useCallback(() => {
 84 |     props.onCancel();
 85 |   }, [props.onCancel]);
 86 |   useEffect(() => {
 87 |     if (ref.current) {
 88 |       ref.current.focus();
 89 |     }
 90 |   }, []);
 91 |   return (
 92 |     <input
 93 |       className="bp3-input"
 94 |       ref={ref}
 95 |       onKeyDown={onKeyDown}
 96 |       onBlur={onBlur}
 97 |     />
 98 |   );
 99 | }
100 | 
101 | function toTree(
102 |   files: Array<{ filepath: string }>,
103 |   openIds: string[],
104 |   currentFileId: string
105 | ): Array<ITreeNode> {
106 |   const names = files.map(f => f.filepath);
107 |   names.sort();
108 |   const splits = names.map(f => f.split("/").filter(f => f.length > 0));
109 | 
110 |   function buildTreeNode(
111 |     paths: string[][],
112 |     parentPath: string = "/"
113 |   ): ITreeNode[] {
114 |     const files = paths.filter(f => f.length === 1);
115 |     const withDirs = paths.filter(f => f.length > 1);
116 |     const ret: ITreeNode[] = [];
117 | 
118 |     const dirs = groupBy(withDirs, w => w[0]);
119 |     Object.entries(dirs).map(([dirname, items]) => {
120 |       const label = dirname;
121 |       const id = path.join("/", parentPath, dirname);
122 |       const shifted = items.map(i => i.slice(1));
123 |       ret.push({
124 |         id,
125 |         label,
126 |         childNodes: buildTreeNode(shifted, id + "/"),
127 |         isExpanded: openIds.includes(id)
128 |       });
129 |     });
130 | 
131 |     for (const file of files) {
132 |       const name = file[0];
133 |       const id = parentPath + name;
134 |       ret.push({
135 |         id: id,
136 |         label: <FileText id={id} label={name} selected={currentFileId === id} />
137 |       });
138 |     }
139 | 
140 |     return ret;
141 |   }
142 | 
143 |   return buildTreeNode(splits);
144 |   // const buf = [];
145 | 
146 |   // for (const split of splits) {
147 |   //   let pt = [];
148 |   //   for (const cur of split) {
149 |   //     pt.push(cur);
150 |   //     // path.push(cur)
151 |   //   }
152 |   // }
153 | 
154 |   // files.filter(f => f.filepath.startsWith(parent));
155 |   // return [];
156 | }
157 | 
158 | function FileText(props: {
159 |   id: string;
160 |   label: string;
161 |   selected: boolean;
162 |   // onClick: Function;
163 | }) {
164 |   const dispatch = useDispatch();
165 |   const ref = useRef(null);
166 |   const onClickTrash = useCallback(() => {
167 |     dispatch(deleteFile(props.id));
168 |   }, [props.id]);
169 |   const onContextMenu = useCallback((ev: any) => {
170 |     ev.preventDefault();
171 |     if (ref.current) {
172 |       ContextMenu.show(
173 |         <Menu>
174 |           <Menu.Item label="Delete" icon="trash" onClick={onClickTrash} />
175 |         </Menu>,
176 |         { left: ev.clientX, top: ev.clientY },
177 |         () => {
178 |           console.log("xxx");
179 |         }
180 |       );
181 |     }
182 |   }, []);
183 |   return (
184 |     <div
185 |       ref={ref}
186 |       onContextMenu={onContextMenu}
187 |       style={{ color: props.selected ? "red" : "inherit" }}
188 |     >
189 |       {props.label}
190 |     </div>
191 |   );
192 | }
193 | 


--------------------------------------------------------------------------------
/src/components/windows/MonacoEditor.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState, useRef } from "react";
  2 | import * as mfs from "../../helpers/monacoFileSystem";
  3 | import * as monaco from "monaco-editor";
  4 | import * as actions from "../../reducers/actions";
  5 | import { useDispatch, useSelector } from "react-redux";
  6 | import { State } from "../../reducers";
  7 | import { useElementSize } from "react-unite";
  8 | import { remote } from "../../api/remote";
  9 | import { Diagnostic } from "typescript";
 10 | // import {IMonacoTypeScriptServiceProxy} from 'typescript';
 11 | 
 12 | export default function MonacoEditor() {
 13 |   const ref = useRef(null);
 14 |   const size = useElementSize(ref);
 15 |   return (
 16 |     <div ref={ref} style={{ width: "100%", height: "100%" }}>
 17 |       {size && <_MonacoEditor width={size.width} height={size.height} />}
 18 |     </div>
 19 |   );
 20 | }
 21 | 
 22 | function _MonacoEditor(props: {
 23 |   width: number | string;
 24 |   height: number | string;
 25 | }) {
 26 |   const dispatch = useDispatch();
 27 |   const [
 28 |     currentEditor,
 29 |     setCurrentEditor
 30 |   ] = useState<null | monaco.editor.IStandaloneCodeEditor>(null);
 31 | 
 32 |   const { currentFilepath } = useSelector((s: State) => {
 33 |     return {
 34 |       files: s.files,
 35 |       currentFilepath: s.editing.filepath
 36 |     };
 37 |   });
 38 | 
 39 |   const editorRef = useRef(null as any);
 40 |   useEffect(() => {
 41 |     if (editorRef.current) {
 42 |       const editor = monaco.editor.create(editorRef.current, options);
 43 |       editor.onDidChangeModel(() => {
 44 |         editor.focus();
 45 |       });
 46 |       editor.onDidChangeModelContent(_changes => {
 47 |         if (editor) {
 48 |           const value = editor.getValue();
 49 |           const fpath = editor.getModel()?.uri.path;
 50 |           if (fpath) {
 51 |             dispatch(actions.writeFile(fpath, value));
 52 |           }
 53 | 
 54 |           // (async () => {
 55 |           //   const uri = editor?.getModel()?.uri;
 56 |           //   if (uri) {
 57 |           //     const getWorker = await tsWorkerPromise;
 58 |           //     const proxy = await getWorker(uri);
 59 |           //     const d: Diagnostic[] = await proxy.getSemanticDiagnostics(
 60 |           //       uri.toString()
 61 |           //     );
 62 |           //     console.log(d.map(d => d));
 63 |           //   }
 64 |           //   // const worker = await monaco.languages.typescript.getTypeScriptWorker();
 65 |           // })();
 66 |         }
 67 |       });
 68 |       editor.addAction({
 69 |         id: "prettier-format",
 70 |         label: "Prettier Format",
 71 |         keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_F],
 72 |         contextMenuGroupId: "navigation",
 73 |         contextMenuOrder: 1.5,
 74 |         run: async ed => {
 75 |           const formatted = await remote.format(ed.getValue());
 76 |           ed.setValue(formatted);
 77 |         }
 78 |       });
 79 |       setCurrentEditor(editor);
 80 |       return () => {
 81 |         editor.dispose();
 82 |       };
 83 |     }
 84 | 
 85 |     return () => {};
 86 |   }, []);
 87 |   useEffect(() => {
 88 |     if (currentEditor && editorRef.current) {
 89 |       // const editor = currentEditor(editorRef.current, dispatch);
 90 |       currentEditor.layout({ width: props.width, height: props.height } as any);
 91 |       currentEditor.focus();
 92 |       const model =
 93 |         mfs.findFile(currentFilepath) || mfs.writeFile(currentFilepath, "");
 94 |       currentEditor.setModel(model);
 95 |     }
 96 |   }, [currentEditor, currentFilepath, props.width, props.height]);
 97 |   return (
 98 |     <div
 99 |       style={{
100 |         width: "100%",
101 |         height: "100%",
102 |         overflow: "hidden"
103 |       }}
104 |     >
105 |       <div ref={editorRef}></div>
106 |     </div>
107 |   );
108 | }
109 | 
110 | const options: monaco.editor.IEditorConstructionOptions = {
111 |   model: null,
112 |   theme: "vs-dark",
113 |   scrollbar: {
114 |     arrowSize: 11
115 |   },
116 |   fontSize: 16,
117 |   wordWrap: "on",
118 |   wordWrapMinified: true,
119 |   minimap: {
120 |     enabled: false
121 |   },
122 |   lineNumbers: "off"
123 | };
124 | 


--------------------------------------------------------------------------------
/src/components/windows/Preview.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef, useState } from "react";
 2 | import { useSelector } from "react-redux";
 3 | import { EditableGrid, GridData, useElementSize } from "react-unite";
 4 | import { State } from "../../reducers";
 5 | 
 6 | const initialGrid: GridData = {
 7 |   rows: ["1px", "1fr", "1px"],
 8 |   columns: ["1px", "1fr", "1px"],
 9 |   areas: [
10 |     ["0", "1", "2"],
11 |     ["3", "c", "5"],
12 |     ["6", "7", "8"]
13 |   ]
14 | };
15 | 
16 | export default function Preview() {
17 |   const ref = useRef(null);
18 |   const size = useElementSize(ref);
19 |   const [grid, setGrid] = useState(initialGrid);
20 |   return (
21 |     <div ref={ref} style={{ width: "100%", height: "100%" }}>
22 |       {size && (
23 |         <EditableGrid
24 |           width={size.width}
25 |           height={size.height}
26 |           spacerSize={16}
27 |           rows={grid.rows}
28 |           columns={grid.columns}
29 |           areas={grid.areas}
30 |           showVertical={false}
31 |           showHorizontal={false}
32 |           onChangeGridData={data => {
33 |             setGrid(data);
34 |           }}
35 |         >
36 |           <div style={{ gridArea: "c", overflow: "hidden" }}>
37 |             <_Preview />
38 |           </div>
39 |         </EditableGrid>
40 |       )}
41 |     </div>
42 |   );
43 | }
44 | 
45 | export function _Preview() {
46 |   const ref = useRef<HTMLIFrameElement>(null);
47 |   const [previewedCode, setPreviewCode] = useState<string | null>(null);
48 |   const { preview } = useSelector((s: State) => {
49 |     return {
50 |       preview: s.preview
51 |     };
52 |   });
53 |   useEffect(() => {
54 |     if (ref.current) {
55 |       if (preview?.previewCode && previewedCode !== preview.previewCode) {
56 |         ref.current.src = createIframeBlob(preview.previewCode);
57 |         setPreviewCode(preview.previewCode);
58 |       }
59 |     }
60 |   }, [previewedCode, preview?.previewCode]);
61 |   console.log("previewCode", preview);
62 | 
63 |   if (preview?.previewCode) {
64 |     return (
65 |       <iframe
66 |         ref={ref}
67 |         scrolling="no"
68 |         frameBorder="no"
69 |         style={{
70 |           overflow: "hidden",
71 |           backgroundColor: "#eee",
72 |           boxSizing: "border-box",
73 |           width: "100%",
74 |           height: "100%"
75 |         }}
76 |       />
77 |     );
78 |   } else {
79 |     return (
80 |       <div>
81 |         Click <code>Preview</code>
82 |       </div>
83 |     );
84 |   }
85 | }
86 | 
87 | function createIframeBlob(code: string) {
88 |   const html = `<html><head><style>html,body{margin:0;padding:0}</style></head><body><script type="module">${code}</script></body></html>`;
89 |   const blob = new Blob([html], { type: "text/html" });
90 |   return URL.createObjectURL(blob);
91 | }
92 | 


--------------------------------------------------------------------------------
/src/components/windows/Tools.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useCallback, useState, useRef } from "react";
  2 | import { useDispatch, useSelector } from "react-redux";
  3 | import { State } from "../../reducers";
  4 | import { requestBundle, requestPreview } from "../../reducers/actions";
  5 | import { Button } from "@blueprintjs/core";
  6 | 
  7 | export default function Tools() {
  8 |   const dispatch = useDispatch();
  9 |   const ref = useRef<HTMLDivElement>(null);
 10 |   const { dist } = useSelector((s: State) => {
 11 |     return {
 12 |       dist: s.dist
 13 |     };
 14 |   });
 15 |   const [building, setBuilding] = useState<boolean>(false);
 16 | 
 17 |   const onClickBundle = useCallback(() => {
 18 |     (async () => {
 19 |       setBuilding(true);
 20 |       try {
 21 |         const a = await requestBundle("/index");
 22 |         dispatch(a);
 23 |       } finally {
 24 |         setBuilding(false);
 25 |       }
 26 |     })();
 27 |   }, [ref, building]);
 28 | 
 29 |   const onClickPreview = useCallback(() => {
 30 |     (async () => {
 31 |       setBuilding(true);
 32 |       try {
 33 |         const a = await requestPreview("/__preview__/index.tsx");
 34 |         dispatch(a);
 35 |       } finally {
 36 |         setBuilding(false);
 37 |       }
 38 |     })();
 39 |   }, [ref, building]);
 40 | 
 41 |   const hash = dist?.code ? toHash(dist.code) : null;
 42 |   const onClickUpload = useCallback(() => {
 43 |     (async () => {
 44 |       setBuilding(true);
 45 |       try {
 46 |         console.log("uploading code", dist?.code);
 47 |         await fetch(`http://localhost:6001/code/${hash}`, {
 48 |           method: "POST",
 49 |           headers: {
 50 |             Accept: "application/json",
 51 |             "Content-Type": "application/json"
 52 |           },
 53 |           body: JSON.stringify({ code: dist?.code })
 54 |         });
 55 |         alert("uploaded to " + hash);
 56 |       } catch (err) {
 57 |         throw new Error("err");
 58 |       } finally {
 59 |         setBuilding(false);
 60 |       }
 61 |     })();
 62 |   }, [dist?.code, hash]);
 63 | 
 64 |   return (
 65 |     <div style={{ overflow: "auto", height: "100%", width: "100%" }}>
 66 |       <div>
 67 |         <Button
 68 |           text="Preview"
 69 |           icon="build"
 70 |           onClick={onClickPreview}
 71 |           disabled={building}
 72 |         />
 73 | 
 74 |         <Button
 75 |           text="Build"
 76 |           icon="build"
 77 |           onClick={onClickBundle}
 78 |           disabled={building}
 79 |         />
 80 |         {dist?.code && (
 81 |           <div>
 82 |             <code>Size: {kb(Array.from(dist.code).length)}kb</code>
 83 |           </div>
 84 |         )}
 85 |         {hash && (
 86 |           <>
 87 |             <div>
 88 |               <a
 89 |                 download={`${hash}.js`}
 90 |                 onClick={ev => {
 91 |                   if (hash && dist?.code) {
 92 |                     const url = URL.createObjectURL(
 93 |                       new Blob([dist?.code], { type: "text/javascript" })
 94 |                     );
 95 |                     // @ts-ignore
 96 |                     ev.target.href = url;
 97 |                   }
 98 |                 }}
 99 |               >
100 |                 {hash}.js
101 |               </a>
102 |             </div>
103 |             <Button onClick={onClickUpload} text="Upload" />
104 |           </>
105 |         )}
106 |       </div>
107 |     </div>
108 |   );
109 | }
110 | 
111 | function kb(size: number) {
112 |   const k = size / 1024;
113 |   return Math.floor(k * 1000) / 1000;
114 | }
115 | 
116 | function toHash(code: string) {
117 |   const crypto = require("crypto");
118 |   const shasum = crypto.createHash("sha1");
119 |   shasum.update(code); // ここの引数にハッシュを計算したい文字列を渡す
120 |   return shasum.digest("hex");
121 | }
122 | 


--------------------------------------------------------------------------------
/src/components/windows/Workspace.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import { Button } from "@blueprintjs/core";
 3 | import { useDispatch } from "react-redux";
 4 | import { loadPreset, reset } from "../../reducers/actions";
 5 | 
 6 | const presetNames = ["playground", "react", "preact", "svelte", "vue"];
 7 | 
 8 | export default function Workspace() {
 9 |   const dispatch = useDispatch();
10 |   const [preset, setPreset] = useState<string>(presetNames[0]);
11 |   return (
12 |     <div
13 |       style={{ overflow: "auto", height: "100%", width: "100%", padding: 10 }}
14 |     >
15 |       <h3>Load workspace</h3>
16 |       TODO
17 |       <h3>Create new workspace</h3>
18 |       <div className="bp3-select">
19 |         <select
20 |           value={preset}
21 |           onChange={ev => {
22 |             setPreset(ev.target.value);
23 |           }}
24 |         >
25 |           {presetNames.map(presetName => {
26 |             return (
27 |               <option key={presetName} value={presetName}>
28 |                 {presetName}
29 |               </option>
30 |             );
31 |           })}
32 |         </select>
33 |       </div>
34 |       <Button
35 |         onClick={() => {
36 |           dispatch(loadPreset(preset as any));
37 |         }}
38 |         text="create"
39 |       />
40 |       <hr />
41 |       <div>
42 |         <Button
43 |           onClick={() => {
44 |             const confirmed = confirm("Remove all and restart");
45 |             if (confirmed) {
46 |               dispatch(reset());
47 |             }
48 |           }}
49 |           text="Reset"
50 |         />
51 |       </div>
52 |     </div>
53 |   );
54 | }
55 | 


--------------------------------------------------------------------------------
/src/decls.d.ts:
--------------------------------------------------------------------------------
 1 | /* === Ignore === */
 2 | 
 3 | declare module "rollup-plugin-url-resolve";
 4 | declare module "monaco-typescript/*";
 5 | declare module "kv-storage-polyfill" {
 6 |   export class StorageArea<K, V> {
 7 |     constructor(area: string);
 8 |     entries(): Array<Promise<[K, V]>>;
 9 |     clear(): Promise<void>;
10 |     delete(key: K): Promise<void>;
11 |     get(key: K): Promise<V>;
12 |     set(key: K, value: V): Promise<void>;
13 |   }
14 |   export const storage: StorageArea<any, any>;
15 | }
16 | 


--------------------------------------------------------------------------------
/src/helpers/monacoFileSystem.ts:
--------------------------------------------------------------------------------
  1 | import * as monaco from "monaco-editor";
  2 | 
  3 | // @ts-ignore
  4 | globalThis.MonacoEnvironment = {
  5 |   getWorkerUrl: function(_moduleId: string, label: string) {
  6 |     if (label === "json") {
  7 |       return "./json.worker.bundle.js";
  8 |     }
  9 |     if (label === "css") {
 10 |       return "./css.worker.bundle.js";
 11 |     }
 12 |     if (label === "html") {
 13 |       return "./html.worker.bundle.js";
 14 |     }
 15 |     if (label === "typescript" || label === "javascript") {
 16 |       return "./ts.worker.bundle.js";
 17 |     }
 18 |     return "./editor.worker.bundle.js";
 19 |   }
 20 | };
 21 | 
 22 | // monaco.languages.typescript.
 23 | monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
 24 | import path from "path";
 25 | import { parseConfigFileTextToJson } from "typescript";
 26 | 
 27 | const extToLang: {
 28 |   [key: string]: "json" | "javascript" | "typescript" | "html";
 29 | } = {
 30 |   ".js": "javascript",
 31 |   ".ts": "typescript",
 32 |   ".tsx": "typescript",
 33 |   ".json": "json",
 34 |   ".svelte": "html",
 35 |   ".vue": "html"
 36 | };
 37 | 
 38 | export function findFile(filepath: string): monaco.editor.IModel | void {
 39 |   return monaco.editor.getModels().find(model => {
 40 |     return model.uri.path === filepath;
 41 |   });
 42 | }
 43 | 
 44 | export function renameFile(
 45 |   filepath: string,
 46 |   to: string
 47 | ): monaco.editor.IModel | void {
 48 |   const m = findFile(filepath);
 49 |   if (m) {
 50 |     const value = m.getValue();
 51 |     deleteFile(filepath);
 52 |     writeFile(to, value);
 53 |   }
 54 | }
 55 | 
 56 | export function updateFile(filepath: string, content: string) {
 57 |   const m = monaco.editor.getModels().find(m => m.uri.path === filepath);
 58 |   if (m) {
 59 |     m.setValue(content);
 60 |   }
 61 |   return m;
 62 | }
 63 | 
 64 | export function deleteFile(filepath: string) {
 65 |   const confirmed = window.confirm(`Delete ${filepath}`);
 66 |   if (!confirmed) {
 67 |     return;
 68 |   }
 69 |   const m = monaco.editor.getModels().find(m => m.uri.path === filepath);
 70 |   if (m) {
 71 |     m.dispose();
 72 |     console.log("disposed", filepath);
 73 |   } else {
 74 |     console.warn(`[mfs:deleteFile] ${filepath} does not exists`);
 75 |   }
 76 | }
 77 | 
 78 | export function writeFile(
 79 |   filepath: string,
 80 |   content?: string
 81 | ): monaco.editor.ITextModel {
 82 |   const extname = path.extname(filepath);
 83 |   const lang = extToLang[extname as any];
 84 |   console.log(extname, lang);
 85 |   if (lang === undefined) {
 86 |     debugger;
 87 |   }
 88 |   const newModel = monaco.editor.createModel(
 89 |     content || "",
 90 |     lang,
 91 |     monaco.Uri.from({
 92 |       scheme: "file",
 93 |       path: filepath
 94 |     })
 95 |   );
 96 |   newModel.updateOptions({
 97 |     tabSize: 2,
 98 |     insertSpaces: true
 99 |   });
100 |   if (filepath === "/tsconfig.json" && content) {
101 |     const conf = parseConfigFileTextToJson(filepath, content);
102 |     // debugger;
103 | 
104 |     monaco.languages.typescript.typescriptDefaults.setCompilerOptions(
105 |       conf.config.compilerOptions
106 |     );
107 |     monaco.languages.typescript.typescriptDefaults.addExtraLib(
108 |       "declare module '*';",
109 |       "decls.d.ts"
110 |     );
111 |   }
112 |   return newModel;
113 | }
114 | 
115 | export type SerializedFS = { [k: string]: string };
116 | 
117 | export function toJSON(): SerializedFS {
118 |   const ret: { [k: string]: string } = {};
119 |   for (const m of monaco.editor.getModels()) {
120 |     const v = m.getValue();
121 |     const fpath = m.uri.path;
122 |     ret[fpath] = v;
123 |   }
124 |   return ret;
125 | }
126 | 
127 | export function restoreFromJSON(serialized: SerializedFS): void {
128 |   Object.entries(serialized).map(([k, v]) => {
129 |     writeFile(k, v);
130 |   });
131 | }
132 | 
133 | export function disposeAll(): void {
134 |   for (const m of monaco.editor.getModels()) {
135 |     m.dispose();
136 |   }
137 | }
138 | 


--------------------------------------------------------------------------------
/src/helpers/nativeFileSystem.ts:
--------------------------------------------------------------------------------
 1 | export async function writeToNativeFS(files: { [k: string]: string }) {
 2 |   try {
 3 |     // @ts-ignore
 4 |     const handler = await window.chooseFileSystemEntries({
 5 |       type: "saveFile",
 6 |       accepts: [
 7 |         {
 8 |           description: "json",
 9 |           extensions: ["json"],
10 |           mimeTypes: ["application/json"]
11 |         }
12 |       ]
13 |     });
14 |     await _writeFile(handler, JSON.stringify(files));
15 |   } catch (err) {
16 |     alert("Please select file");
17 |     return;
18 |   }
19 | }
20 | 
21 | export async function loadFromNativeFS(): Promise<{ [k: string]: string }> {
22 |   // @ts-ignore
23 |   const handler = await window.chooseFileSystemEntries({
24 |     type: "openFile",
25 |     accepts: [
26 |       {
27 |         description: "json", // ファイルに関する説明
28 |         mimeTypes: ["application/json"], // 受け付けるファイルのmimeType
29 |         extensions: ["json"] // 受け付けるファイル拡張子
30 |       }
31 |     ]
32 |   });
33 |   // await writeFile(handler, JSON.stringify(files));
34 |   const jsonText = await _readFile(handler);
35 |   return JSON.parse(jsonText);
36 | }
37 | 
38 | async function _writeFile(handler: any, text: string): Promise<void> {
39 |   const writer = await handler.createWriter();
40 |   await writer.truncate(0);
41 |   await writer.write(0, text);
42 |   await writer.close();
43 | }
44 | 
45 | async function _readFile(handler: any) {
46 |   const file = await handler.getFile();
47 |   const text = await file.text();
48 |   return text;
49 | }
50 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-US">
 3 |   <head>
 4 |     <title>Bundle Editor</title>
 5 |     <meta charset="UTF-8" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <style>
 8 |       html,
 9 |       body,
10 |       .root {
11 |         margin: 0;
12 |         padding: 0;
13 |         height: 100vh;
14 |         width: 100vw;
15 |       }
16 |     </style>
17 |   </head>
18 |   <body class="bp3-light">
19 |     <div class="root"></div>
20 |     <script type="module">
21 |       if (location.hostname !== "localhost") {
22 |         navigator.serviceWorker.register("/service-worker.js");
23 |       }
24 |     </script>
25 |     <script src="main.bundle.js"></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | // import "normalize.css/normalize.css";
 2 | import "ress/dist/ress.min.css";
 3 | import "@blueprintjs/icons/lib/css/blueprint-icons.css";
 4 | import "@blueprintjs/core/lib/css/blueprint.css";
 5 | 
 6 | // ---
 7 | 
 8 | import React from "react";
 9 | import ReactDOM from "react-dom";
10 | import { Provider } from "react-redux";
11 | import { App } from "./components/App";
12 | import { configureStore } from "./store/configureStore";
13 | import { KeyBindings } from "./components/Keybindings";
14 | 
15 | async function main() {
16 |   const root = document.querySelector(".root") as HTMLDivElement;
17 |   const store = await configureStore();
18 | 
19 |   ReactDOM.render(
20 |     <Provider store={store}>
21 |       <>
22 |         <KeyBindings />
23 |         <App />
24 |       </>
25 |     </Provider>,
26 |     root
27 |   );
28 | }
29 | 
30 | main();
31 | 


--------------------------------------------------------------------------------
/src/reducers/actions.ts:
--------------------------------------------------------------------------------
  1 | import { fileCache } from "../storages/fileCache";
  2 | import * as mfs from "../helpers/monacoFileSystem";
  3 | import * as presets from "./presetStates";
  4 | import * as nfs from "../helpers/nativeFileSystem";
  5 | import { remote } from "../api/remote";
  6 | 
  7 | export type UpdateFilesAction = {
  8 |   type: "update-files";
  9 |   payload: {
 10 |     files: Array<{ filepath: string }>;
 11 |   };
 12 | };
 13 | 
 14 | export type UpdateDistAction = {
 15 |   type: "update-dist";
 16 |   payload: {
 17 |     code: string;
 18 |     builtAt: number;
 19 |   };
 20 | };
 21 | 
 22 | export type UpdatePreviewAction = {
 23 |   type: "update-preview";
 24 |   payload: {
 25 |     previewCode: string;
 26 |     builtAt: number;
 27 |   };
 28 | };
 29 | 
 30 | export type SelectFileAction = {
 31 |   type: "select-file";
 32 |   payload: {
 33 |     filepath: string;
 34 |   };
 35 | };
 36 | 
 37 | export type Action =
 38 |   | UpdateFilesAction
 39 |   | UpdateDistAction
 40 |   | UpdatePreviewAction
 41 |   | SelectFileAction;
 42 | 
 43 | export async function reset() {
 44 |   await fileCache.clear();
 45 |   setTimeout(() => {
 46 |     location.reload();
 47 |   }, 0);
 48 |   return {
 49 |     type: "__reset"
 50 |   };
 51 | }
 52 | 
 53 | export async function loadPreset(presetName: "playground" | "svelte") {
 54 |   await fileCache.clear();
 55 |   await mfs.disposeAll();
 56 |   const files = presets[presetName] || {
 57 |     "/index.tsx": "// coding!",
 58 |     "/package.json": '{"dependencies": {}}',
 59 |     "/tsconfig.json": '{"compilerOptions": {}}'
 60 |   };
 61 |   await Promise.all(
 62 |     Object.entries(files).map(async ([fname, content]) => {
 63 |       await fileCache.set(fname, content);
 64 |       mfs.writeFile(fname, content);
 65 |     })
 66 |   );
 67 |   // TODO: Uupdate correctrly
 68 |   location.reload();
 69 |   return { type: "__loadPreset" };
 70 | }
 71 | 
 72 | export async function loadFromNativeFS() {
 73 |   await fileCache.clear();
 74 |   await mfs.disposeAll();
 75 |   const files = await nfs.loadFromNativeFS();
 76 |   await Promise.all(
 77 |     Object.entries(files).map(async ([fname, content]) => {
 78 |       await fileCache.set(fname, content);
 79 |       mfs.writeFile(fname, content);
 80 |     })
 81 |   );
 82 |   location.reload();
 83 |   return {
 84 |     type: "__load_from_native_fs"
 85 |   };
 86 | }
 87 | 
 88 | export async function writeFile(filepath: string, content: string) {
 89 |   await fileCache.set(filepath, content);
 90 | 
 91 |   return {
 92 |     type: "__write",
 93 |     payload: { filepath, content }
 94 |   };
 95 | }
 96 | 
 97 | export function selectFile(filepath: string) {
 98 |   return {
 99 |     type: "select-file",
100 |     payload: { filepath }
101 |   };
102 | }
103 | 
104 | export function updateFileTree() {
105 |   const json = mfs.toJSON();
106 |   const t = Object.keys(json);
107 |   t.sort();
108 |   const files = t.map(f => ({ filepath: f }));
109 |   return {
110 |     type: "update-files",
111 |     payload: {
112 |       files
113 |     }
114 |   };
115 | }
116 | 
117 | export async function addFile(filepath: string) {
118 |   mfs.writeFile(filepath, "");
119 |   await fileCache.set(filepath, "");
120 | 
121 |   return (dispatch: Function) => {
122 |     dispatch(updateFileTree());
123 |     dispatch(selectFile(filepath));
124 |   };
125 | }
126 | 
127 | export async function deleteFile(filepath: string) {
128 |   mfs.deleteFile(filepath);
129 |   await fileCache.delete(filepath);
130 | 
131 |   return (dispatch: Function) => dispatch(updateFileTree());
132 | }
133 | 
134 | export async function requestBundle(entry: string) {
135 |   const code = await _compileOnMemory(entry, { minify: true });
136 |   return (dispatch: Function) => {
137 |     dispatch({
138 |       type: "update-dist",
139 |       payload: {
140 |         code,
141 |         builtAt: Date.now()
142 |       }
143 |     });
144 |   };
145 | }
146 | 
147 | export async function requestPreview(entry: string = "/__preview__/index.tsx") {
148 |   const code = await _compileOnMemory(entry, { minify: false });
149 |   return (dispatch: Function) => {
150 |     dispatch({
151 |       type: "update-preview",
152 |       payload: {
153 |         previewCode: code,
154 |         builtAt: Date.now()
155 |       }
156 |     });
157 |   };
158 | }
159 | 
160 | export async function writeToNativeFs() {
161 |   const fileMap = mfs.toJSON();
162 |   await nfs.writeToNativeFS(fileMap);
163 |   return {
164 |     type: "__write_to_native_fs"
165 |   };
166 | }
167 | 
168 | async function _compileOnMemory(
169 |   entry: string,
170 |   options: { minify: boolean }
171 | ): Promise<string> {
172 |   const pkgModel = mfs.findFile("/package.json");
173 |   const tsconfigModel = mfs.findFile("/tsconfig.json");
174 |   if (pkgModel && tsconfigModel) {
175 |     const fileMap = mfs.toJSON();
176 |     const code = await remote.compile({
177 |       entry,
178 |       files: fileMap,
179 |       tsConfig: tsconfigModel.getValue(),
180 |       minify: options.minify,
181 |       pkg: JSON.parse(pkgModel.getValue()),
182 |       cache: fileCache
183 |     });
184 |     return code;
185 |   }
186 |   throw new Error("Need package.json and tsconfig.json");
187 | }
188 | 


--------------------------------------------------------------------------------
/src/reducers/index.ts:
--------------------------------------------------------------------------------
 1 | import { Action } from "./actions";
 2 | 
 3 | export type State = {
 4 |   editing: {
 5 |     workspaceId: string;
 6 |     filepath: string;
 7 |   };
 8 |   preview: null | {
 9 |     previewCode: string;
10 |     builtAt: string;
11 |   };
12 |   dist: null | {
13 |     code: string;
14 |     builtAt: number;
15 |   };
16 |   files: Array<{
17 |     filepath: string;
18 |   }>;
19 |   workspaces: Array<{
20 |     workspaceId: string;
21 |   }>;
22 | };
23 | 
24 | export const reducer = (state: State, action: Action) => {
25 |   switch (action.type) {
26 |     case "update-dist": {
27 |       return {
28 |         ...state,
29 |         dist: {
30 |           code: action.payload.code,
31 |           builtAt: action.payload.builtAt
32 |         }
33 |       };
34 |     }
35 |     case "update-preview": {
36 |       return {
37 |         ...state,
38 |         preview: {
39 |           previewCode: action.payload.previewCode,
40 |           builtAt: action.payload.builtAt
41 |         }
42 |       };
43 |     }
44 | 
45 |     case "select-file": {
46 |       return {
47 |         ...state,
48 |         editing: {
49 |           filepath: action.payload.filepath
50 |         }
51 |       };
52 |     }
53 |     case "update-files": {
54 |       return {
55 |         ...state,
56 |         files: action.payload.files
57 |       };
58 |     }
59 |     default: {
60 |       return state;
61 |     }
62 |   }
63 | };
64 | 


--------------------------------------------------------------------------------
/src/reducers/presetStates.ts:
--------------------------------------------------------------------------------
  1 | const deps = {
  2 |   preact: "10.*.*",
  3 |   "lodash.flatten": "*",
  4 |   react: "16.*.*",
  5 |   svelte: "3.15.0"
  6 | };
  7 | 
  8 | const initialTsConfig = {
  9 |   compilerOptions: {
 10 |     target: "es2019",
 11 |     module: "esNext",
 12 |     jsx: "react",
 13 |     jsxFactory: "h"
 14 |   }
 15 | };
 16 | 
 17 | const initialPkg = {
 18 |   private: true,
 19 |   dependencies: deps
 20 | };
 21 | 
 22 | const sampleSvelte = `<script>
 23 | let name = 'world';
 24 | </script>
 25 | <h1>Hello {name}!</h1>
 26 | `;
 27 | const sampleVue = `<template><div>hello</div></template>`;
 28 | 
 29 | const previewAssets = {
 30 |   "__preview__/index.tsx": `// preview
 31 | import main from "../index";
 32 | import variables from './variables';
 33 | main({ variables, onClose() { console.log("closed") }});
 34 | `,
 35 |   "/__preview__/variables.json": JSON.stringify(
 36 |     { name: "John Doe", count: 0 },
 37 |     null,
 38 |     2
 39 |   )
 40 | };
 41 | 
 42 | export const vue = {
 43 |   ...previewAssets,
 44 |   "/index.tsx": `// vue sample
 45 | import Vue from "vue";
 46 | new Vue({
 47 |   render(h) {
 48 |     return <div>hello</div>
 49 |   }
 50 | }).$mount(document.body)
 51 | `,
 52 |   "/package.json": JSON.stringify(
 53 |     {
 54 |       private: true,
 55 |       dependencies: { vue: "2.*" }
 56 |     },
 57 |     null,
 58 |     2
 59 |   ),
 60 |   "/tsconfig.json": JSON.stringify(
 61 |     {
 62 |       compilerOptions: {
 63 |         target: "es2019",
 64 |         module: "esNext",
 65 |         jsx: "react",
 66 |         jsxFactory: "h"
 67 |       }
 68 |     },
 69 |     null,
 70 |     2
 71 |   )
 72 | };
 73 | 
 74 | export const react = {
 75 |   ...previewAssets,
 76 |   "/index.tsx": `import React from "react";
 77 | import ReactDOM from "react-dom";
 78 | 
 79 | function Hello() {
 80 |   return <h1>Hello</h1>
 81 | }
 82 | 
 83 | export default (options) => {
 84 |   ReactDOM.render(<Hello />, document.body);
 85 | };
 86 | `,
 87 |   "/package.json": JSON.stringify(
 88 |     {
 89 |       private: true,
 90 |       dependencies: { react: "16.*", "react-dom": "16.*" }
 91 |     },
 92 |     null,
 93 |     2
 94 |   ),
 95 |   "/tsconfig.json": JSON.stringify(
 96 |     {
 97 |       compilerOptions: {
 98 |         target: "es2019",
 99 |         module: "esNext",
100 |         jsx: "react"
101 |       }
102 |     },
103 |     null,
104 |     2
105 |   )
106 | };
107 | 
108 | export const preact = {
109 |   ...previewAssets,
110 |   "/index.tsx": `import { render, h } from "preact";
111 | import { useState, useCallback } from "preact/hooks";
112 | 
113 | function Counter() {
114 |   const [state, setState] = useState(0);
115 |   const onClick = useCallback(() => {
116 |     setState(state + 1)
117 |   }, [state]);
118 |   return <button onClick={onClick}>{state}++</button>
119 | }
120 | 
121 | export default (options: any) => {
122 |   render(<Counter />, document.body);
123 | }
124 | `,
125 |   "/package.json": JSON.stringify(
126 |     {
127 |       private: true,
128 |       dependencies: { preact: "10.*" }
129 |     },
130 |     null,
131 |     2
132 |   ),
133 |   "/tsconfig.json": JSON.stringify(initialTsConfig, null, 2)
134 | };
135 | 
136 | export const svelte = {
137 |   ...previewAssets,
138 |   "/index.tsx": `import App from "./app.svelte";
139 | export default (options: any) => {
140 |   new App({ target: document.body });
141 | };
142 | `,
143 |   "/app.svelte": sampleSvelte,
144 |   "/package.json": JSON.stringify({
145 |     private: true,
146 |     dependencies: { svelte: "3.15.*" }
147 |   }),
148 |   "/tsconfig.json": JSON.stringify(initialTsConfig, null, 2)
149 | };
150 | 
151 | export const playground = {
152 |   ...previewAssets,
153 |   "/index.tsx": `import flatten from 'lodash.flatten';
154 | import {render, h} from 'preact';
155 | import {foo} from './foo';
156 | import Bar from './bar.svelte';
157 | export default () => {
158 |   new Bar({target: document.body});
159 |   const el = document.createElement('div');
160 |   el.style.position = "absolute";
161 |   el.style.right = "10px";
162 |   el.style.bottom = "10px";
163 |   el.style.width = "200px";
164 |   el.style.height = "100px";
165 |   el.style.backgroundColor = "wheat";
166 |   document.body.appendChild(el);
167 |   render(<div style={{padding: 10}}>{foo.a}</div>, el);
168 | }
169 | `,
170 |   "/bar.svelte": sampleSvelte,
171 |   "/foo.ts": "export const foo = { a: 'text from foo.a' }",
172 |   "/my-component.vue": sampleVue,
173 |   "/package.json": JSON.stringify(initialPkg, null, 2),
174 |   "/tsconfig.json": JSON.stringify(initialTsConfig, null, 2)
175 | };
176 | 
177 | export function createFirstFiles() {
178 |   return playground;
179 | }
180 | 


--------------------------------------------------------------------------------
/src/storages/fileCache.ts:
--------------------------------------------------------------------------------
 1 | import { StorageArea, storage } from "kv-storage-polyfill";
 2 | 
 3 | const FS_STORAGE_VERSION = 1;
 4 | const FS_STORAGE_KEY = `fs:${FS_STORAGE_VERSION}`;
 5 | 
 6 | export const fileCache = new StorageArea<string, string>(FS_STORAGE_KEY);
 7 | 
 8 | export function getStorage() {}
 9 | 
10 | export async function loadFilesFromCache(): Promise<{ [key: string]: string }> {
11 |   const ret: { [key: string]: string } = {};
12 |   for await (const [fpath, value] of fileCache.entries()) {
13 |     ret[fpath] = value;
14 |   }
15 |   return ret;
16 | }
17 | 
18 | export async function saveFilesToCache(files: {
19 |   [key: string]: string;
20 | }): Promise<void> {
21 |   await Promise.all(
22 |     Object.entries(files).map(([fpath, value]) => {
23 |       return fileCache.set(fpath, value);
24 |     })
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/src/storages/npmCache.ts:
--------------------------------------------------------------------------------
1 | import { StorageArea } from "kv-storage-polyfill";
2 | 
3 | const NPM_STORAGE_VERSION = 1;
4 | const NPM_STORAGE_KEY = `npm:${NPM_STORAGE_VERSION}`;
5 | 
6 | export const npmCache = new StorageArea<string, string>(NPM_STORAGE_KEY);
7 | 


--------------------------------------------------------------------------------
/src/storages/workspace.ts:
--------------------------------------------------------------------------------
 1 | import { StorageArea } from "kv-storage-polyfill";
 2 | 
 3 | const WORKSPACE_VERSION = 1;
 4 | const WORKSPACE_KEY = `ws:${WORKSPACE_VERSION}`;
 5 | 
 6 | export type PersistedWorkspace = {
 7 |   workspaceId: string;
 8 |   files: { [k: string]: string };
 9 | };
10 | 
11 | export const workspace = new StorageArea<string, PersistedWorkspace>(
12 |   WORKSPACE_KEY
13 | );
14 | 


--------------------------------------------------------------------------------
/src/store/configureStore.ts:
--------------------------------------------------------------------------------
 1 | import { workspace, PersistedWorkspace } from "./../storages/workspace";
 2 | // @ts-ignore
 3 | import logger from "redux-logger";
 4 | import { loadFilesFromCache, saveFilesToCache } from "./../storages/fileCache";
 5 | import {
 6 |   applyMiddleware,
 7 |   createStore as createReduxStore,
 8 |   Action
 9 | } from "redux";
10 | import thunk from "redux-thunk";
11 | import { createFirstFiles } from "../reducers/presetStates";
12 | // @ts-ignore
13 | import promise from "redux-promise";
14 | import * as mfs from "../helpers/monacoFileSystem";
15 | import { State, reducer } from "../reducers";
16 | // @ts-ignore
17 | import uuid from "uuid";
18 | 
19 | export async function configureStore() {
20 |   const id = await findWorkspaceId();
21 |   const initialState = await loadInitialState(id);
22 |   const store = createReduxStore<State, Action, {}, {}>(
23 |     reducer as any,
24 |     initialState,
25 |     applyMiddleware(thunk, promise, logger)
26 |   );
27 |   return store;
28 | }
29 | 
30 | async function findWorkspaceId(): Promise<string> {
31 |   const storagedWorkspaceId = localStorage.getItem("workspaceId");
32 |   if (storagedWorkspaceId) {
33 |     return storagedWorkspaceId;
34 |   }
35 | 
36 |   const ws: PersistedWorkspace[] = [];
37 |   for await (const [, w] of workspace.entries()) {
38 |     ws.push(w);
39 |   }
40 | 
41 |   if (ws.length > 0) {
42 |     return ws[0].workspaceId;
43 |   }
44 |   const workspaceId = uuid();
45 |   localStorage.setItem("workspaceId", workspaceId);
46 |   const initialFiles = createFirstFiles();
47 |   await saveFilesToCache(initialFiles);
48 |   await workspace.set(workspaceId, { workspaceId, files: initialFiles });
49 |   return workspaceId;
50 | }
51 | 
52 | async function loadInitialState(workspaceId: string) {
53 |   const files = await loadFilesFromCache();
54 |   await mfs.restoreFromJSON(files);
55 |   // if (Object.keys(files).length === 0) {
56 |   //   console.log("initialize...");
57 |   //   const initialFiles = createFirstFiles();
58 |   //   await saveFilesToCache(initialFiles);
59 |   //   await mfs.restoreFromJSON(initialFiles);
60 |   // } else {
61 |   //   await mfs.restoreFromJSON(files);
62 |   // }
63 | 
64 |   const data = mfs.toJSON();
65 |   const fileNames = Object.keys(data);
66 |   fileNames.sort();
67 | 
68 |   const main = fileNames.find(name => name.startsWith("/index"));
69 | 
70 |   // const workspace = 1;
71 |   const initialState: State = {
72 |     dist: null,
73 |     preview: null,
74 |     workspaces: [],
75 |     editing: {
76 |       workspaceId: "",
77 |       filepath: main ?? "/index.tsx"
78 |     },
79 |     files: fileNames.map(f => ({
80 |       filepath: f
81 |     }))
82 |   };
83 |   return initialState;
84 | }
85 | 


--------------------------------------------------------------------------------
/src/workers/compilerWorker.ts:
--------------------------------------------------------------------------------
 1 | import { npmCache } from "./../storages/npmCache";
 2 | import { expose } from "comlink";
 3 | // import * as compiler from "memory-compiler";
 4 | // @ts-ignore
 5 | import * as compiler from "@mizchi/web-compiler";
 6 | // @ts-ignore
 7 | import prettier from "prettier/standalone";
 8 | // @ts-ignore
 9 | import parserTypeScript from "prettier/parser-typescript";
10 | 
11 | async function compile(args: {
12 |   entry: string;
13 |   files: { [filepath: string]: string };
14 |   pkg: { dependencies: any };
15 |   tsConfig: any;
16 |   minify?: boolean;
17 |   typescript?: boolean;
18 | }) {
19 |   return compiler.compile({ ...args, cache: npmCache });
20 | }
21 | 
22 | async function format(code: string) {
23 |   // @ts-ignore
24 |   return prettier.format(code, {
25 |     parser: "typescript",
26 |     plugins: [parserTypeScript]
27 |   });
28 | }
29 | 
30 | expose({
31 |   compile,
32 |   format
33 | });
34 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": [
 3 |     "src",
 4 |     "packages/version-resolver",
 5 |     "virtual.js",
 6 |     "src/components/.tsx"
 7 |   ],
 8 |   "exclude": ["node_modules", "external"],
 9 |   "compilerOptions": {
10 |     /* Basic Options */
11 |     "target": "ES2019" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
12 |     "module": "ESNext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
13 |     // "lib": [],                             /* Specify library files to be included in the compilation. */
14 |     "allowJs": true /* Allow javascript files to be compiled. */,
15 |     "checkJs": true /* Report errors in .js files. */,
16 |     "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
17 |     // "jsxFactory": "React",
18 |     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
19 |     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
20 |     // "sourceMap": true,                     /* Generates corresponding '.map' file. */
21 |     // "outFile": "./",                       /* Concatenate and emit output to single file. */
22 |     // "outDir": "./",                        /* Redirect output structure to the directory. */
23 |     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
24 |     // "composite": true,                     /* Enable project compilation */
25 |     // "removeComments": true,                /* Do not emit comments to output. */
26 |     "noEmit": true /* Do not emit outputs. */,
27 |     // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
28 |     // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
29 |     // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
30 | 
31 |     /* Strict Type-Checking Options */
32 |     "strict": true /* Enable all strict type-checking options. */,
33 |     // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
34 |     "strictNullChecks": true /* Enable strict null checks. */,
35 |     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
36 |     // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
37 |     // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
38 |     // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
39 | 
40 |     /* Additional Checks */
41 |     // "noUnusedLocals": true,                /* Report errors on unused locals. */
42 |     // "noUnusedParameters": true,            /* Report errors on unused parameters. */
43 |     // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
44 |     // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
45 | 
46 |     /* Module Resolution Options */
47 |     "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
48 |     // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
49 |     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
50 |     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
51 |     // "typeRoots": [],                       /* List of folders to include type definitions from. */
52 |     // "types": [],                           /* Type declaration files to be included in compilation. */
53 |     // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
54 |     "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
55 |     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
56 | 
57 |     /* Source Map Options */
58 |     // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
59 |     // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
60 |     // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
61 |     // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
62 | 
63 |     /* Experimental Options */
64 |     "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */
65 |     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | const HTMLPlugin = require("html-webpack-plugin");
 3 | const { GenerateSW } = require("workbox-webpack-plugin");
 4 | const WorkerPlugin = require("worker-plugin");
 5 | module.exports = {
 6 |   entry: {
 7 |     main: path.join(__dirname, "src/index"),
 8 |     "json.worker": "monaco-editor/esm/vs/language/json/json.worker",
 9 |     "css.worker": "monaco-editor/esm/vs/language/css/css.worker",
10 |     "html.worker": "monaco-editor/esm/vs/language/html/html.worker",
11 |     "ts.worker": "monaco-editor/esm/vs/language/typescript/ts.worker",
12 |     // "ts.worker": path.join(__dirname, "src/monaco-typescript/ts.worker.ts"),
13 |     "editor.worker": "monaco-editor/esm/vs/editor/editor.worker.js"
14 |   },
15 |   output: {
16 |     path: path.join(__dirname, "dist"),
17 |     filename: "[name].bundle.js",
18 |     chunkFilename: "chunk.[id].[contenthash].js",
19 |     globalObject: "self"
20 |   },
21 |   resolve: {
22 |     extensions: [".mjs", ".js", ".json", ".ts", ".tsx"]
23 |   },
24 |   module: {
25 |     rules: [
26 |       {
27 |         test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/,
28 |         use: [
29 |           {
30 |             loader: "url-loader",
31 |             options: {
32 |               limit: 8192
33 |             }
34 |           }
35 |         ]
36 |       },
37 |       {
38 |         test: /\.css$/,
39 |         use: ["style-loader", "css-loader"]
40 |       },
41 |       {
42 |         test: /\.tsx?$/,
43 |         use: [
44 |           {
45 |             loader: "ts-loader",
46 |             options: {
47 |               transpileOnly: true
48 |             }
49 |           }
50 |         ]
51 |       }
52 |     ]
53 |   },
54 |   node: {
55 |     fs: "empty",
56 |     module: "empty",
57 |     dns: "empty",
58 |     net: "empty",
59 |     tls: "empty"
60 |   },
61 |   plugins: [
62 |     new GenerateSW({
63 |       clientsClaim: true,
64 |       skipWaiting: true
65 |     }),
66 |     new HTMLPlugin({
67 |       template: path.join(__dirname, "src/index.html"),
68 |       inject: false
69 |     }),
70 |     new WorkerPlugin({
71 |       // globalObject: "self"
72 |     })
73 |   ]
74 | };
75 | 


--------------------------------------------------------------------------------