Switch to webpack

src/App.tsx

@@ -31,7 +31,13 @@ function EditorPanel() {
         monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
         monaco.KeyCode.F6,
       ],
-      run: () => model.render()
+      run: () => model.render({isPreview: false})
+    });
+    editor.addAction({
+      id: "openscad-preview",
+      label: "Preview OpenSCAD",
+      keybindings: [monaco.KeyCode.F5],
+      run: () => model.render({isPreview: false})
     });
     setEditor(editor)
   }
@@ -100,7 +106,7 @@ export function App({initialState}: {initialState: State}) {
           }
           </div>
         <div style={{display: 'flex', flexDirection: 'row'}}>
-            <button onClick={() => model.render()}>Render</button>
+            <button onClick={() => model.render({isPreview: false})}>Render</button>
             {model.state.previewing && 'previewing... '}
             {model.state.rendering && 'rendering... '}
             {model.state.checkingSyntax && 'checking syntax... '}

src/BrowserFS.d.ts

@@ -5,6 +5,7 @@
 declare interface FS {
   readdir(path: string, cb: (err: any, files: string[]) => void): void;
   symlink(target: string, source: string): void;
+  readFileSync(path: string): BufferSource;
 }
 
 declare interface EmscriptenFS extends FS {}

src/app-state.ts

@@ -2,7 +2,7 @@
 
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
-import { createContext } from "react"
+import React from 'react';
 import { Model } from "./model"
 
 export interface State {
@@ -19,12 +19,13 @@ export interface State {
   checkingSyntax?: boolean,
 
   output?: {
+    isPreview: boolean,
     stlFile: File,
     stlFileURL: string,
   },
 };
 
-export const ModelContext = createContext(new Model(
+export const ModelContext = React.createContext(new Model(
   {
     params: {
       source: '',

src/default-scad.ts

@@ -0,0 +1,17 @@
+export default `
+rotate([90, 0, 0]) {
+	translate([-50, 0, 50])
+  linear_extrude(10)
+    text("hello world!");
+        
+}
+cube(40, center=true);
+translate([10, 10, 10])
+	cube(40, center=true);
+
+// This demo includes many libraries:
+//
+// include <BOSL2/std.scad>
+// translate([-100, 0, 0])
+	spheroid(d=100, style="icosa", $fn=20);
+`

src/index.tsx

@@ -10,6 +10,17 @@ import { zipArchives } from './zip-archives';
 import {readStateFromFragment} from './fragment-state'
 import { State } from './app-state';
 import './index.css';
+import defaultScad from './default-scad'
+
+import debug from 'debug';
+const log = debug('app:log');
+
+if (process.env.NODE_ENV !== 'production') {
+  debug.enable('*');
+  log('Logging is enabled!');
+} else {
+  debug.disable();
+}
 
 (async () => {
   
@@ -17,11 +28,12 @@ import './index.css';
   const fs = await createEditorFS(workingDir);
   await registerOpenSCADLanguage(fs, workingDir, zipArchives);
 
-  const initialState = readStateFromFragment() ?? {
+  const initialState: State = readStateFromFragment() ?? {
     params: {
-      source: 'cube(1);\ntranslate([0.5, 0.5, 0.5])\n\tcube(1);',
+      source: defaultScad,
+      features: [],
     }
-  } as State;
+  };
 
   const defaultFeatures = ['manifold', 'fast-csg', 'lazy-union'];
   defaultFeatures.forEach(f => {

src/language/openscad-completions.ts

@@ -47,7 +47,7 @@ const builtinCompletions = [
     insertText: `${v}`,
     insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
   })),
-  ...openscadLanguage.language.keywords.map(v => ({
+  ...openscadLanguage.language.keywords.map((v: string) => ({
     label: v,
     kind: monaco.languages.CompletionItemKind.Function,
     insertText: v,
@@ -92,7 +92,7 @@ export async function buildOpenSCADCompletionItemProvider(fs: FS, workingDir: st
     path = toAbsolutePath(path);
     try {
       const bytes = await fs.readFileSync(path);
-      const src = new TextDecoder("utf-8").decode(bytes);
+      const src = new TextDecoder("utf-8").decode(bytes as any);
       return src;
     } catch (e) {
       throw e;

src/openscad-runner.ts

@@ -43,7 +43,7 @@ export function spawnOpenSCAD({inputs, args, outputPaths}: OpenSCADInvocation):
   }
     
   return AbortablePromise<OpenSCADInvocationResults>((resolve, reject) => {
-    worker = new Worker('./openscad-worker-inlined.js');//, {type: "module"})
+    worker = new Worker('./openscad-worker.js');//, {type: "module"})
     // if (navigator.userAgent.indexOf(' Chrome/') < 0) {
     //   worker = new Worker('./openscad-worker-firefox.js'); // {'type': 'module'}
     // } else {