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]]);
  });