Make Jacdac modules readonly

Remove Jacdac modules from project when user code no longer
references them. We now auto add and auto remove.

Author: microbit-robert

package-lock.json

@@ -16,7 +16,7 @@
     "@codemirror/view": "^6.26.3",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@microbit/microbit-connection": "0.0.0-worker.jacdac.600",
+    "@microbit/microbit-connection": "0.0.0-worker.jacdac.601",
     "@microbit/microbit-fs": "^0.10.0",
     "@sanity/block-content-to-react": "^3.0.0",
     "@sanity/image-url": "^1.0.1",

package.json

@@ -29,10 +29,17 @@ const EditorContainer = ({ selection }: EditorContainerProps) => {
     return null;
   }
 
-  return fileInfo.isThirdPartyModule &&
-    !settings.allowEditingThirdPartyModules ? (
-    <ModuleOverlay moduleData={fileInfo.moduleData} />
-  ) : (
+  // Jacdac modules are managed by the editor and always shown read-only (the
+  // user can read them but not edit), regardless of the third-party module
+  // setting, which is why they're handled before the overlay branch.
+  if (
+    !fileInfo.isJacdacModule &&
+    fileInfo.isThirdPartyModule &&
+    !settings.allowEditingThirdPartyModules
+  ) {
+    return <ModuleOverlay moduleData={fileInfo.moduleData} />;
+  }
+  return (
     <Editor
       defaultValue={fileInfo.initialValue}
       selection={selection}
@@ -42,6 +49,7 @@ const EditorContainer = ({ selection }: EditorContainerProps) => {
       parameterHelpOption={settings.parameterHelp}
       warnOnV2OnlyFeatures={settings.warnForApiUnsupportedByDevice}
       disableV2OnlyFeaturesWarning={disableV2OnlyFeaturesWarning}
+      readOnly={fileInfo.isJacdacModule}
     />
   );
 };

src/editor/EditorContainer.tsx

@@ -53,6 +53,8 @@ interface CodeMirrorProps {
   parameterHelpOption: ParameterHelpOption;
   warnOnV2OnlyFeatures: boolean;
   disableV2OnlyFeaturesWarning: () => void;
+  /** Show the document but disallow edits (e.g. for managed Jacdac modules). */
+  readOnly?: boolean;
 }
 
 /**
@@ -73,6 +75,7 @@ const CodeMirror = ({
   parameterHelpOption,
   warnOnV2OnlyFeatures,
   disableV2OnlyFeaturesWarning,
+  readOnly = false,
 }: CodeMirrorProps) => {
   // Really simple model for now as we only have one editor at a time.
   const [, setActiveEditor] = useActiveEditorActionsState();
@@ -125,6 +128,8 @@ const CodeMirror = ({
         extensions: [
           notify,
           editorConfig,
+          EditorState.readOnly.of(readOnly),
+          EditorView.editable.of(!readOnly),
           // Extension requires external state.
           dndSupport({ sessionSettings, setSessionSettings }),
           // Extensions only relevant for editing:
@@ -186,6 +191,7 @@ const CodeMirror = ({
     apiReferenceMap,
     device,
     disableV2OnlyFeaturesWarning,
+    readOnly,
   ]);
   useEffect(() => {
     // Do this separately as we don't want to destroy the view whenever options needed for initialization change.

src/editor/codemirror/CodeMirror.tsx

@@ -26,6 +26,7 @@ import {
 } from "react";
 import { MAIN_FILE, VersionAction } from "../fs/fs";
 import { useFileSystem } from "../fs/fs-hooks";
+import { extractModuleData } from "../fs/fs-util";
 import { parseRoles, ParsedRole } from "./parse-roles";
 import { JACDAC_MODULES } from "./python/module-source";
 import { SupportedService, supportedServiceByClass } from "./supported-services";
@@ -127,11 +128,16 @@ export const useJacdacIdentify = (): ((deviceId: string) => Promise<void>) => {
 };
 
 /**
- * Ensure each Jacdac sensor module (JacdacButton.py, etc.) is a project file
- * whenever the user's code uses that class, so the import resolves at runtime
- * (in the simulator) and the user can read the module. Only the modules
- * actually used are added, keeping the flat filesystem lean. Added as micro:bit
- * module files.
+ * Keep the Jacdac sensor modules (JacdacButton.py, etc.) in sync with the user's
+ * code: add a module file whenever the code uses that class (so the import
+ * resolves in the simulator and the user can read it), and remove it again once
+ * the code no longer references the class. Only used modules are present, keeping
+ * the flat filesystem lean. Added/removed as micro:bit module files.
+ *
+ * Removal is guarded by the magic module comment: we only delete a file we
+ * recognise as our own module (matching class name), so a user's own same-named
+ * file is left untouched. This does mean edits to an added module file are lost
+ * if the last reference is removed.
  */
 export const useEnsureJacdacModules = (): void => {
   const fs = useFileSystem();
@@ -149,8 +155,16 @@ export const useEnsureJacdacModules = (): void => {
           }
           const used = new RegExp(`\\b${module.className}\\b`).test(text);
           const filename = `${module.className}.py`;
-          if (used && !(await fs.exists(filename))) {
+          const exists = await fs.exists(filename);
+          if (used && !exists) {
             await fs.write(filename, module.source, VersionAction.INCREMENT);
+          } else if (!used && exists) {
+            const existing = new TextDecoder().decode(
+              (await fs.read(filename)).data
+            );
+            if (extractModuleData(existing)?.name === module.className) {
+              await fs.remove(filename);
+            }
           }
         }
       } catch {

src/jacdac/jacdac-hooks.tsx

@@ -9,6 +9,7 @@
  * (the micro:bit filesystem is flat and small). Each module's source feeds both
  * the language-server stub and the project file, so the two never drift.
  */
+import { extractModuleData } from "../../fs/fs-util";
 import { JacdacRoleType } from "../parse-roles";
 import jacdacButton from "./JacdacButton.py?raw";
 import jacdacRotaryEncoder from "./JacdacRotaryEncoder.py?raw";
@@ -30,3 +31,22 @@ export const JACDAC_MODULES: JacdacModule[] = [
   },
   { className: "JacdacSlider", type: "slider", source: jacdacSlider },
 ];
+
+/**
+ * True if the given source is one of our Jacdac modules, identified by its magic
+ * module comment's name (not just the filename), so a user's own same-named file
+ * is not treated as ours. Jacdac modules are managed by the editor and shown
+ * read-only.
+ */
+export const isJacdacModuleSource = (source: string): boolean => {
+  const name = extractModuleData(source)?.name;
+  return !!name && JACDAC_MODULES.some((m) => m.className === name);
+};
+
+/**
+ * True if the filename is one of our managed Jacdac module files (e.g.
+ * "JacdacButton.py"). Used where only the name is available (the project file
+ * list); prefer isJacdacModuleSource when the content is available.
+ */
+export const isJacdacModuleFilename = (filename: string): boolean =>
+  JACDAC_MODULES.some((m) => `${m.className}.py` === filename);

src/jacdac/python/module-source.ts

@@ -19,6 +19,7 @@ import { RiDeleteBin2Line, RiDownload2Line, RiEdit2Line } from "react-icons/ri";
 import { FormattedMessage, useIntl } from "react-intl";
 import { zIndexProjectAreaMenu } from "../common/zIndex";
 import { FileVersion, MAIN_FILE } from "../fs/fs";
+import { isJacdacModuleFilename } from "../jacdac/python/module-source";
 import { useProjectActions } from "./project-hooks";
 import { isEditableFile } from "./project-utils";
 
@@ -34,6 +35,9 @@ interface FileRowProps extends BoxProps {
 const FileRow = ({ projectName, value, onEdit, ...props }: FileRowProps) => {
   const { name } = value;
   const isMainFile = name === MAIN_FILE;
+  // Jacdac modules are managed by the editor and read-only, so they can't be
+  // edited or deleted from here (only saved/downloaded).
+  const isJacdacModule = isJacdacModuleFilename(name);
   const actions = useProjectActions();
   const intl = useIntl();
 
@@ -63,26 +67,30 @@ const FileRow = ({ projectName, value, onEdit, ...props }: FileRowProps) => {
         />
         <Portal>
           <MenuList zIndex={zIndexProjectAreaMenu}>
-            <MenuItem
-              icon={<RiEdit2Line />}
-              isDisabled={!isEditableFile(name)}
-              onClick={onEdit}
-            >
-              <FormattedMessage id="edit-file-action" values={{ name }} />
-            </MenuItem>
+            {!isJacdacModule && (
+              <MenuItem
+                icon={<RiEdit2Line />}
+                isDisabled={!isEditableFile(name)}
+                onClick={onEdit}
+              >
+                <FormattedMessage id="edit-file-action" values={{ name }} />
+              </MenuItem>
+            )}
             <MenuItem
               icon={<RiDownload2Line />}
               onClick={() => actions.saveFile(name)}
             >
               <FormattedMessage id="save-file-action" values={{ name }} />
             </MenuItem>
-            <MenuItem
-              icon={<RiDeleteBin2Line />}
-              onClick={() => actions.deleteFile(name)}
-              isDisabled={isMainFile}
-            >
-              <FormattedMessage id="delete-file-action" values={{ name }} />
-            </MenuItem>
+            {!isJacdacModule && (
+              <MenuItem
+                icon={<RiDeleteBin2Line />}
+                onClick={() => actions.deleteFile(name)}
+                isDisabled={isMainFile}
+              >
+                <FormattedMessage id="delete-file-action" values={{ name }} />
+              </MenuItem>
+            )}
           </MenuList>
         </Portal>
       </Menu>

src/project/FileRow.tsx

@@ -16,6 +16,7 @@ import {
   isPythonMicrobitModule,
   ModuleData,
 } from "../fs/fs-util";
+import { isJacdacModuleSource } from "../jacdac/python/module-source";
 import { useLanguageServerClient } from "../language-server/language-server-hooks";
 import { useLogging } from "../logging/logging-hooks";
 import { useSessionSettings } from "../settings/session-settings";
@@ -102,6 +103,9 @@ export const useProject = (): DefaultedProject => {
 
 interface ProjectTextFileInfo {
   isThirdPartyModule: boolean;
+  // A Jacdac module managed by the editor: shown read-only rather than via the
+  // third-party module overlay, so the user can read (but not edit) it.
+  isJacdacModule: boolean;
   initialValue: string;
   moduleData: ModuleData | undefined;
 }
@@ -128,6 +132,7 @@ export const useProjectFileText = (
               // We don't change this value if the text is edited to become a module
               // as that would abruptly prevent it being edited further.
               isThirdPartyModule: isPythonMicrobitModule(text),
+              isJacdacModule: isJacdacModuleSource(text),
               moduleData: extractModuleData(text),
             });
           }