Add debuggable urls for dv.view (#2004)

* Refactor to avoid DRY * Add sourceURL * Add source url to css
blacksmithgu · Sep 15, 2023 · bb34c6a · bb34c6a
1 parent c75a53c
commit bb34c6a
Showing 1 changed file with 20 additions and 33 deletions.
diff --git a/src/api/inline-api.ts b/src/api/inline-api.ts
@@ -316,46 +316,28 @@ export class DataviewInlineApi {
      */
     public async view(viewName: string, input: any) {
         // Look for `${viewName}.js` first, then for `${viewName}/view.js`.
-        let simpleViewFile = this.app.metadataCache.getFirstLinkpathDest(viewName + ".js", this.currentFilePath);
-        if (simpleViewFile) {
-            let contents = await this.app.vault.read(simpleViewFile);
-            if (contents.contains("await")) contents = "(async () => { " + contents + " })()";
-            let func = new Function("dv", "input", contents);
-
-            try {
-                // This may directly render, in which case it will likely return undefined or null.
-                let result = await Promise.resolve(func(this, input));
-                if (result)
-                    await renderValue(
-                        result as any,
-                        this.container,
-                        this.currentFilePath,
-                        this.component,
-                        this.settings,
-                        true
-                    );
-            } catch (ex) {
-                renderErrorPre(this.container, `Dataview: Failed to execute view '${simpleViewFile.path}'.\n\n${ex}`);
-            }
-
-            return;
+        const simpleViewPath = `${viewName}.js`;
+        const complexViewPath = `${viewName}/view.js`;
+        let checkForCss = false;
+        let viewFile = this.app.metadataCache.getFirstLinkpathDest(simpleViewPath, this.currentFilePath);
+        if (!viewFile) {
+            viewFile = this.app.metadataCache.getFirstLinkpathDest(complexViewPath, this.currentFilePath);
+            checkForCss = true;
         }
 
-        // No `{viewName}.js`, so look for a folder instead.
-        let viewPath = `${viewName}/view.js`;
-        let viewFile = this.app.metadataCache.getFirstLinkpathDest(viewPath, this.currentFilePath);
-
         if (!viewFile) {
-            renderErrorPre(this.container, `Dataview: custom view not found for '${viewPath}' or '${viewName}.js'.`);
+            renderErrorPre(this.container, `Dataview: custom view not found for '${simpleViewPath}' or '${complexViewPath}'.`);
             return;
         }
 
-        let viewContents = await this.app.vault.read(viewFile);
-        if (viewContents.contains("await")) viewContents = "(async () => { " + viewContents + " })()";
-        let viewFunction = new Function("dv", "input", viewContents);
+        let contents = await this.app.vault.read(viewFile);
+        if (contents.contains("await")) contents = "(async () => { " + contents + " })()";
+        contents += `\n//# sourceURL=${viewFile.path}`;
+        let func = new Function("dv", "input", contents);
 
         try {
-            let result = await Promise.resolve(viewFunction(this, input));
+            // This may directly render, in which case it will likely return undefined or null.
+            let result = await Promise.resolve(func(this, input));
             if (result)
                 await renderValue(
                     result as any,
@@ -366,14 +348,19 @@ export class DataviewInlineApi {
                     true
                 );
         } catch (ex) {
-            renderErrorPre(this.container, `Dataview: Error while executing view '${viewFile.path}'.\n\n${ex}`);
+            renderErrorPre(this.container, `Dataview: Failed to execute view '${viewFile.path}'.\n\n${ex}`);
+        }
+
+        if (!checkForCss) {
+            return;
         }
 
         // Check for optional CSS.
         let cssFile = this.app.metadataCache.getFirstLinkpathDest(`${viewName}/view.css`, this.currentFilePath);
         if (!cssFile) return;
 
         let cssContents = await this.app.vault.read(cssFile);
+        cssContents += `\n/*# sourceURL=${location.origin}/${cssFile.path} */`
         this.container.createEl("style", { text: cssContents, attr: { scope: " " } });
     }