Datacore views correctly update paths on renames

Also adds the datacore 'rename' event.

Author: blacksmithgu

src/api/local-api.tsx

@@ -231,13 +231,12 @@ export class DatacoreLocalApi {
 
     /** Use the current path. Automatically updates the view if the path changes (though that would be weird). */
     public useCurrentPath(settings?: { debounce?: number }): string {
-        const meta = this.useCurrentFile(settings);
-        return meta.$path;
+        return this.path;
     }
 
     /** Use the file metadata for a specific file. Automatically updates the view when the file changes. */
     public useFile(path: string, settings?: { debounce?: number }): Indexable | undefined {
-        return useFileMetadata(this.core, path, settings)!;
+        return useFileMetadata(this.core, path, settings);
     }
 
     /** Automatically refresh the view whenever the index updates; returns the latest index revision ID. */
@@ -403,17 +402,4 @@ export class DatacoreLocalApi {
     public Slider = Slider;
     public Switch = Switch;
     public VanillaSelect = VanillaSelect;
-
-    ////////////////////////////////////
-    // Stateful / internal components //
-    ////////////////////////////////////
-
-    /**
-     * Updates the path for the local API; usually only called by the top-level script renderer on
-     * path changes (such as renaming a file).
-     * @internal
-     */
-    updatePath(path: string): void {
-        this.path = path;
-    }
 }

src/index/datacore.ts

@@ -150,10 +150,11 @@ export class Datacore extends Component {
         // This is less optimal than what can probably be done, but paths are used in a bunch of places
         // (for sections, tasks, etc to refer to their parent file) and it requires some finesse to fix.
         this.datastore.delete(oldPath);
-        this.reload(file);
+        this.reload(file).then(() => this.trigger("rename", file.path, oldPath));
 
         // TODO: For correctness, probably have to either fix links in all linked files OR
-        // just stop normalizing links in the store.
+        // just stop normalizing links in the store. We can traverse the links index to do so
+        // but it is fairly painful.
     }
 
     /**
@@ -182,7 +183,7 @@ export class Datacore extends Component {
         const result = await this.importer.import<ImportResult>(file);
 
         if (result.type === "error") {
-            throw new Error(`Failed to import file '${file.name}: ${result.$error}`);
+            throw new Error(`Failed to import file '${file.name}': ${result.$error}`);
         } else if (result.type === "markdown") {
             // Parse the file and normalize metadata from it.
             const parsed = MarkdownPage.from(result.result, (link) => {
@@ -206,8 +207,14 @@ export class Datacore extends Component {
                 if (rpath) return link.withPath(rpath.path);
                 else return link;
             });
+
+            // Store it recursively into the datastore for querying.
             this.storeCanvas(parsed);
+
+            // Write it to the file cache for faster loads in the future.
             this.persister.storeFile(parsed.$path, parsed.json());
+
+            // And finally trigger an update.
             this.trigger("update", this.revision);
             return parsed;
         }
@@ -252,10 +259,15 @@ export class Datacore extends Component {
         });
     }
 
-    // Event propogation.
+    ///////////////////////
+    // Event propogation //
+    ///////////////////////
 
     /** Called whenever the index updates to a new revision. This is the broadest possible datacore event. */
     public on(evt: "update", callback: (revision: number) => any, context?: any): EventRef;
+    /** Called whenever datacore records a file rename and has finished reindexing the rename. */
+    public on(evt: "rename", callback: (newPath: string, oldPath: string) => any, context?: any): EventRef;
+    /** Called when datacore has initialized and is querable. */
     public on(evt: "initialized", callback: () => any, context?: any): EventRef;
 
     on(evt: string, callback: (...data: any) => any, context?: any): EventRef {
@@ -274,6 +286,8 @@ export class Datacore extends Component {
 
     /** Trigger an update event. */
     private trigger(evt: "update", revision: number): void;
+    /** Trigger a rename event. */
+    private trigger(evt: "rename", newPath: string, oldPath: string): void;
     /** Trigger an initialization event. */
     private trigger(evt: "initialized"): void;
 

src/ui/javascript.tsx

@@ -6,6 +6,7 @@ import { unmountComponentAtNode } from "preact/compat";
 import { ScriptLanguage, asyncEvalInContext, transpile } from "utils/javascript";
 import { LoadingBoundary, ScriptContainer } from "./loading-boundary";
 import { Datacore } from "index/datacore";
+import { Literal } from "expression/literal";
 
 /**
  * Renders a script by executing it and handing it the appropriate React context to execute
@@ -38,22 +39,16 @@ export class DatacoreJSRenderer extends MarkdownRenderChild {
                 });
             };
 
-            render(
-                <DatacoreContextProvider
-                    app={this.api.app}
-                    component={this}
-                    datacore={this.api.core}
-                    settings={this.api.core.settings}
-                >
-                    <CURRENT_FILE_CONTEXT.Provider value={this.path}>
-                        <SimpleErrorBoundary message="The datacore script failed to execute.">
-                            <LoadingBoundary datacore={this.api.core}>
-                                <ScriptContainer executor={renderer} sourcePath={this.path} />
-                            </LoadingBoundary>
-                        </SimpleErrorBoundary>
-                    </CURRENT_FILE_CONTEXT.Provider>
-                </DatacoreContextProvider>,
-                this.container
+            this.renderScript(renderer);
+
+            // If the path ever changes, update the context provider and re-render.
+            this.registerEvent(
+                this.api.core.on("rename", (newPath, oldPath) => {
+                    if (oldPath === this.path) {
+                        this.path = this.api.path = newPath;
+                        this.renderScript(renderer);
+                    }
+                })
             );
         } catch (ex) {
             render(
@@ -63,6 +58,27 @@ export class DatacoreJSRenderer extends MarkdownRenderChild {
         }
     }
 
+    /** Lazily renders a script, catching errors automatically. */
+    private renderScript(renderer: () => Promise<Literal | VNode | Function>) {
+        render(
+            <DatacoreContextProvider
+                app={this.api.app}
+                component={this}
+                datacore={this.api.core}
+                settings={this.api.core.settings}
+            >
+                <CURRENT_FILE_CONTEXT.Provider value={this.path}>
+                    <SimpleErrorBoundary message="The datacore script failed to execute.">
+                        <LoadingBoundary datacore={this.api.core}>
+                            <ScriptContainer executor={renderer} sourcePath={this.path} />
+                        </LoadingBoundary>
+                    </SimpleErrorBoundary>
+                </CURRENT_FILE_CONTEXT.Provider>
+            </DatacoreContextProvider>,
+            this.container
+        );
+    }
+
     public onunload(): void {
         if (this.loaded) unmountComponentAtNode(this.container);
         this.loaded = false;
@@ -82,6 +98,21 @@ export class ReactRenderer extends MarkdownRenderChild {
     }
 
     public onload(): void {
+        this.renderElement();
+
+        // If the path ever changes, update the context provider and re-render.
+        this.registerEvent(
+            this.datacore.on("rename", (newPath, oldPath) => {
+                if (oldPath === this.sourcePath) {
+                    this.sourcePath = newPath;
+                    this.renderElement();
+                }
+            })
+        );
+    }
+
+    /** Render the given element. */
+    private renderElement(): void {
         render(
             <DatacoreContextProvider
                 app={this.app}

src/ui/loading-boundary.tsx

@@ -67,7 +67,7 @@ export function ScriptContainer({
         executor()
             .then((result) => setElement(makeRenderableElement(result, sourcePath)))
             .catch((error) => setError(error));
-    }, [executor]);
+    }, [executor, sourcePath]);
 
     // Propogate error upwards.
     if (error) {