Add local file system functionality to all tools

components/src/chips/memory.tsx

@@ -192,6 +192,7 @@ export const Memory = forwardRef(
       fileSelect,
       showClear = true,
       onChange = undefined,
+      onClear = undefined,
     }: {
       name?: string;
       className?: string;
@@ -210,6 +211,7 @@ export const Memory = forwardRef(
       fileSelect?: () => Promise<{ name: string; content: string }>;
       showClear?: boolean;
       onChange?: () => void;
+      onClear?: () => void;
     },
     ref,
   ) => {
@@ -275,6 +277,7 @@ export const Memory = forwardRef(
     const clear = () => {
       memory.reset();
       onChange?.();
+      onClear?.();
       rerenderMemoryBlock();
     };
 

components/src/stores/asm.store.ts

@@ -20,12 +20,12 @@ import {
   CompilationError,
   Span,
 } from "@nand2tetris/simulator/languages/base.js";
+import { Action } from "@nand2tetris/simulator/types.js";
 import { bin } from "@nand2tetris/simulator/util/twos.js";
 import { Dispatch, MutableRefObject, useContext, useMemo, useRef } from "react";
 import { RunSpeed } from "src/runbar.js";
 import { useImmerReducer } from "../react.js";
 import { BaseContext } from "./base.context.js";
-import { Action } from "@nand2tetris/simulator/types.js";
 
 export interface TranslatorSymbol {
   name: string;
@@ -200,6 +200,7 @@ export function makeAsmStore(
   fs: FileSystem,
   setStatus: Action<string>,
   dispatch: MutableRefObject<AsmStoreDispatch>,
+  upgraded: boolean,
 ) {
   const translator = new Translator();
   const highlightInfo: HighlightInfo = {
@@ -347,14 +348,23 @@ export function makeAsmStore(
       animate = value;
     },
 
-    step(): boolean {
+    async step(): Promise<boolean> {
       if (compiled) {
         translating = true;
       }
       translator.step(highlightInfo);
+
       if (animate || translator.done) {
         dispatch.current({ action: "update" });
+
+        if (path && upgraded) {
+          await fs.writeFile(
+            path.replace(/\.asm$/, ".hack"),
+            translator.getResult(),
+          );
+        }
       }
+
       if (translator.done) {
         setStatus("Translation done.");
       }
@@ -447,13 +457,13 @@ export function makeAsmStore(
 }
 
 export function useAsmPageStore() {
-  const { setStatus, fs } = useContext(BaseContext);
+  const { setStatus, fs, localFsRoot } = useContext(BaseContext);
 
   const dispatch = useRef<AsmStoreDispatch>(() => undefined);
 
   const { initialState, reducers, actions } = useMemo(
-    () => makeAsmStore(fs, setStatus, dispatch),
-    [setStatus, dispatch],
+    () => makeAsmStore(fs, setStatus, dispatch, localFsRoot != undefined),
+    [setStatus, dispatch, fs],
   );
 
   const [state, dispatcher] = useImmerReducer(reducers, initialState);

components/src/stores/base.context.ts

@@ -2,6 +2,7 @@ import {
   FileSystem,
   LocalStorageFileSystemAdapter,
 } from "@davidsouther/jiffies/lib/esm/fs.js";
+import { Action } from "@nand2tetris/simulator/types.js";
 import {
   createContext,
   useCallback,
@@ -10,7 +11,6 @@ import {
   useState,
 } from "react";
 import {
-  ChainedFileSystemAdapter,
   FileSystemAccessFileSystemAdapter,
   openNand2TetrisDirectory,
 } from "./base/fs.js";
@@ -19,14 +19,13 @@ import {
   createAndStoreLocalAdapterInIndexedDB,
   removeLocalAdapterFromIndexedDB,
 } from "./base/indexDb.js";
-import { Action } from "@nand2tetris/simulator/types.js";
 
 export interface BaseContext {
   fs: FileSystem;
+  localFsRoot?: string;
   canUpgradeFs: boolean;
-  upgradeFs: (force?: boolean) => void;
+  upgradeFs: (force?: boolean, createFiles?: boolean) => Promise<void>;
   closeFs: () => void;
-  upgraded?: string;
   status: string;
   setStatus: Action<string>;
   storage: Record<string, string>;
@@ -35,68 +34,73 @@ export interface BaseContext {
 export function useBaseContext(): BaseContext {
   const localAdapter = useMemo(() => new LocalStorageFileSystemAdapter(), []);
   const [fs, setFs] = useState(new FileSystem(localAdapter));
-  const [upgraded, setUpgraded] = useState<string | undefined>();
+  const [root, setRoot] = useState<string>();
 
-  const replaceFs = useCallback(
-    (handle: FileSystemDirectoryHandle) => {
+  const setLocalFs = useCallback(
+    async (handle: FileSystemDirectoryHandle, createFiles = false) => {
+      // We will not mirror the changes in localStorage, since they will be saved in the user's file system
       const newFs = new FileSystem(
-        new ChainedFileSystemAdapter(
-          new FileSystemAccessFileSystemAdapter(handle),
-          localAdapter,
-        ),
+        new FileSystemAccessFileSystemAdapter(handle),
       );
-      newFs.cd(fs.cwd());
+      if (createFiles) {
+        const loaders = await import("@nand2tetris/projects/loader.js");
+        await loaders.createFiles(newFs);
+      }
       setFs(newFs);
-      setUpgraded(handle.name);
+      setRoot(handle.name);
     },
-    [setFs, setUpgraded],
+    [setRoot, setFs],
   );
 
   useEffect(() => {
-    if (upgraded) return;
-    attemptLoadAdapterFromIndexedDb().then((adapter) => {
-      if (!adapter) return;
-      replaceFs(adapter);
-    });
-  }, [upgraded, replaceFs]);
+    if (root) return;
+
+    if ("showDirectoryPicker" in window) {
+      attemptLoadAdapterFromIndexedDb().then((adapter) => {
+        if (!adapter) return;
+        setLocalFs(adapter);
+      });
+    }
+  }, [root, setLocalFs]);
 
   const canUpgradeFs = `showDirectoryPicker` in window;
+
   const upgradeFs = useCallback(
-    async (force = false) => {
-      if (!canUpgradeFs || (upgraded && !force)) return;
+    async (force = false, createFiles = false) => {
+      if (!canUpgradeFs || (root && !force)) return;
       const handler = await openNand2TetrisDirectory();
       const adapter = await createAndStoreLocalAdapterInIndexedDB(handler);
-      replaceFs(adapter);
+      await setLocalFs(adapter, createFiles);
     },
-    [upgraded, replaceFs],
+    [root, setLocalFs],
   );
 
   const closeFs = useCallback(async () => {
-    if (!upgraded) return;
+    if (!root) return;
     await removeLocalAdapterFromIndexedDB();
+    setRoot(undefined);
     setFs(new FileSystem(localAdapter));
-    setUpgraded(undefined);
-  }, [upgraded, localAdapter]);
+  }, [root]);
 
   const [status, setStatus] = useState("");
 
   return {
     fs,
+    localFsRoot: root,
     status,
     setStatus,
     storage: localStorage,
     canUpgradeFs,
     upgradeFs,
     closeFs,
-    upgraded,
   };
 }
 
 export const BaseContext = createContext<BaseContext>({
   fs: new FileSystem(new LocalStorageFileSystemAdapter()),
   canUpgradeFs: false,
   // eslint-disable-next-line @typescript-eslint/no-empty-function
-  upgradeFs() {},
+  async upgradeFs() {},
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   closeFs() {},
   status: "",

components/src/stores/chip.store.test.ts

@@ -4,7 +4,6 @@ import {
 } from "@davidsouther/jiffies/lib/esm/fs.js";
 import { cleanState } from "@davidsouther/jiffies/lib/esm/scope/state.js";
 import * as not from "@nand2tetris/projects/project_01/01_not.js";
-import * as bit from "@nand2tetris/projects/project_03/01_bit.js";
 import { produce } from "immer";
 import { MutableRefObject } from "react";
 import { ImmPin } from "src/pinout.js";
@@ -27,6 +26,7 @@ function testChipStore(
     setStatus,
     storage,
     dispatch,
+    false,
   );
   const store = { state: initialState, actions, reducers, dispatch, setStatus };
   dispatch.current = jest.fn().mockImplementation(
@@ -46,61 +46,40 @@ function testChipStore(
 
 describe("ChipStore", () => {
   describe("initialization", () => {
-    it("starts on project 01 not", async () => {
-      const { state } = testChipStore({});
-
-      expect(state.controls.project).toBe("01");
-      expect(state.controls.chipName).toBe("Not");
-      expect(state.files.hdl).toBe("");
-      expect(state.files.tst).toBe("");
-      expect(state.files.cmp).toBe("");
-      expect(state.files.out).toBe("");
-    });
-
-    it("reloads initial chip not", async () => {
+    it("loads chip", async () => {
       const store = testChipStore({
         "projects/01/Not.hdl": not.hdl,
         "projects/01/Not.tst": not.tst,
         "projects/01/Not.cmp": not.cmp,
       });
 
       await store.actions.initialize();
+      await store.actions.loadChip("projects/01/Not.hdl");
 
       expect(store.state.controls.project).toBe("01");
       expect(store.state.controls.chipName).toBe("Not");
       expect(store.state.files.hdl).toBe(not.hdl);
       expect(store.state.files.tst).toBe(not.tst);
-      expect(store.state.files.cmp).toBe(not.cmp);
+      expect(store.state.files.cmp).toBe("");
       expect(store.state.files.out).toBe("");
     });
-
-    it("loads saved state", () => {
-      const { state } = testChipStore(
-        {
-          "projects/01/Not.hdl": not.hdl,
-          "projects/01/Not.tst": not.tst,
-          "projects/01/Not.cmp": not.cmp,
-          "projects/03/Bit.hdl": bit.hdl,
-          "projects/03/Bit.tst": bit.tst,
-          "projects/03/Bit.cmp": bit.cmp,
-        },
-        {
-          "/chip/project": "03",
-          "/chip/chip": "Bit",
-        },
-      );
-      expect(state.controls.project).toBe("03");
-      expect(state.controls.chipName).toBe("Bit");
-    });
   });
 
   describe("behavior", () => {
-    const state = cleanState(() => ({ store: testChipStore() }), beforeEach);
+    const state = cleanState(async () => {
+      const store = testChipStore({
+        "projects/01/Not.hdl": not.hdl,
+        "projects/01/Not.tst": not.tst,
+        "projects/01/Not.cmp": not.cmp,
+      });
+      await store.actions.initialize();
+      await store.actions.loadChip("projects/01/Not.hdl");
+      return { store };
+    }, beforeEach);
 
     it.todo("loads projects and chips");
 
     it("toggles bits", async () => {
-      await state.store.actions.initialize();
       state.store.actions.toggle(state.store.state.sim.chip[0].in(), 0);
       expect(state.store.state.sim.chip[0].in().busVoltage).toBe(1);
       expect(state.store.dispatch.current).toHaveBeenCalledWith({
@@ -127,6 +106,7 @@ describe("ChipStore", () => {
         "projects/01/Not.cmp": not.cmp,
       });
       await store.actions.initialize();
+      await store.actions.loadChip("projects/01/Not.hdl");
       return { store };
     }, beforeEach);
 
@@ -139,12 +119,12 @@ describe("ChipStore", () => {
       expect(bits(state.store.state.sim.inPins)).toEqual([[0]]);
       expect(bits(state.store.state.sim.outPins)).toEqual([[0]]);
 
-      await state.store.actions.useBuiltin();
+      await state.store.actions.toggleBuiltin();
 
       expect(bits(state.store.state.sim.inPins)).toEqual([[0]]);
       expect(bits(state.store.state.sim.outPins)).toEqual([[1]]);
 
-      await state.store.actions.stepTest(); // Output List
+      await state.store.actions.stepTest(); // Load, Compare To and Output List
 
       await state.store.actions.stepTest(); // Set in 0
       expect(bits(state.store.state.sim.inPins)).toEqual([[0]]);
@@ -154,7 +134,7 @@ describe("ChipStore", () => {
       expect(bits(state.store.state.sim.inPins)).toEqual([[1]]);
       expect(bits(state.store.state.sim.outPins)).toEqual([[0]]);
 
-      await state.store.actions.stepTest(); // No change (afte end)
+      await state.store.actions.stepTest(); // No change (after end)
       expect(bits(state.store.state.sim.inPins)).toEqual([[1]]);
       expect(bits(state.store.state.sim.outPins)).toEqual([[0]]);
     });