Add back .js suffix on extension imports (#25)

babel.config.json

@@ -1,4 +1,15 @@
 {
-	"presets": ["@babel/preset-env"],
-	"plugins": ["babel-plugin-transform-import-meta"]
+	"presets": [
+		"@babel/preset-env"
+	],
+	"plugins": [
+		"babel-plugin-transform-import-meta",
+		[
+			"transform-rename-import",
+			{
+				"original": "^(.+?)\\.js$",
+				"replacement": "$1"
+			}
+		]
+	]
 }

package-lock.json

@@ -16,6 +16,7 @@
         "@babel/preset-env": "^7.22.20",
         "@types/jest": "^29.5.12",
         "babel-plugin-transform-import-meta": "^2.2.1",
+        "babel-plugin-transform-rename-import": "^2.3.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "ts-jest": "^29.1.4",
@@ -3607,6 +3608,12 @@
         "@babel/core": "^7.10.0"
       }
     },
+    "node_modules/babel-plugin-transform-rename-import": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-rename-import/-/babel-plugin-transform-rename-import-2.3.0.tgz",
+      "integrity": "sha512-dPgJoT57XC0PqSnLgl2FwNvxFrWlspatX2dkk7yjKQj5HHGw071vAcOf+hqW8ClqcBDMvEbm6mevn5yHAD8mlQ==",
+      "dev": true
+    },
     "node_modules/babel-preset-current-node-syntax": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
@@ -8601,9 +8608,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.17.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
-      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
       "dev": true,
       "engines": {
         "node": ">=10.0.0"

package.json

@@ -16,6 +16,7 @@
     "@babel/preset-env": "^7.22.20",
     "@types/jest": "^29.5.12",
     "babel-plugin-transform-import-meta": "^2.2.1",
+    "babel-plugin-transform-rename-import": "^2.3.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "ts-jest": "^29.1.4",

src/extensions/core/clipspace.js

@@ -1,6 +1,6 @@
-import { app } from "../../scripts/app";
-import { ComfyDialog, $el } from "../../scripts/ui";
-import { ComfyApp } from "../../scripts/app";
+import { app } from "../../scripts/app.js";
+import { ComfyDialog, $el } from "../../scripts/ui.js";
+import { ComfyApp } from "../../scripts/app.js";
 
 export class ClipspaceDialog extends ComfyDialog {
 	static items = [];

src/extensions/core/colorPalette.js

@@ -1,5 +1,5 @@
-import {app} from "../../scripts/app";
-import {$el} from "../../scripts/ui";
+import {app} from "../../scripts/app.js";
+import {$el} from "../../scripts/ui.js";
 
 // Manage color palettes
 

src/extensions/core/contextMenuFilter.js

@@ -1,4 +1,4 @@
-import {app} from "../../scripts/app";
+import {app} from "../../scripts/app.js";
 
 // Adds filtering to combo context menus
 

src/extensions/core/dynamicPrompts.js

@@ -1,4 +1,4 @@
-import { app } from "../../scripts/app";
+import { app } from "../../scripts/app.js";
 
 // Allows for simple dynamic prompt replacement
 // Inputs in the format {a|b} will have a random value of a or b chosen when the prompt is queued.

src/extensions/core/editAttention.js

@@ -1,4 +1,4 @@
-import { app } from "../../scripts/app";
+import { app } from "../../scripts/app.js";
 
 // Allows you to edit the attention weight by holding ctrl (or cmd) and using the up/down arrow keys
 

src/extensions/core/groupNode.js

@@ -1,7 +1,7 @@
-import { app } from "../../scripts/app";
-import { api } from "../../scripts/api";
-import { mergeIfValid } from "./widgetInputs";
-import { ManageGroupDialog } from "./groupNodeManage";
+import { app } from "../../scripts/app.js";
+import { api } from "../../scripts/api.js";
+import { mergeIfValid } from "./widgetInputs.js";
+import { ManageGroupDialog } from "./groupNodeManage.js";
 
 const GROUP = Symbol();
 

src/extensions/core/groupNodeManage.js

@@ -1,7 +1,7 @@
-import { $el, ComfyDialog } from "../../scripts/ui";
-import { DraggableList } from "../../scripts/ui/draggableList";
-import { addStylesheet } from "../../scripts/utils";
-import { GroupNodeConfig, GroupNodeHandler } from "./groupNode";
+import { $el, ComfyDialog } from "../../scripts/ui.js";
+import { DraggableList } from "../../scripts/ui/draggableList.js";
+import { addStylesheet } from "../../scripts/utils.js";
+import { GroupNodeConfig, GroupNodeHandler } from "./groupNode.js";
 
 addStylesheet(import.meta.url);
 

src/extensions/core/groupOptions.js

@@ -1,4 +1,4 @@
-import {app} from "../../scripts/app";
+import {app} from "../../scripts/app.js";
 
 function setNodeMode(node, mode) {
     node.mode = mode;

src/extensions/core/invertMenuScrolling.js

@@ -1,4 +1,4 @@
-import { app } from "../../scripts/app";
+import { app } from "../../scripts/app.js";
 
 // Inverts the scrolling of context menus
 

src/extensions/core/keybinds.js

@@ -1,4 +1,4 @@
-import {app} from "../../scripts/app";
+import {app} from "../../scripts/app.js";
 
 app.registerExtension({
 	name: "Comfy.Keybinds",

src/extensions/core/linkRenderMode.js

@@ -1,4 +1,4 @@
-import { app } from "../../scripts/app";
+import { app } from "../../scripts/app.js";
 
 const id = "Comfy.LinkRenderMode";
 const ext = {

src/extensions/core/maskeditor.js

@@ -1,8 +1,8 @@
-import { app } from "../../scripts/app";
-import { ComfyDialog, $el } from "../../scripts/ui";
-import { ComfyApp } from "../../scripts/app";
-import { api } from "../../scripts/api"
-import { ClipspaceDialog } from "./clipspace";
+import { app } from "../../scripts/app.js";
+import { ComfyDialog, $el } from "../../scripts/ui.js";
+import { ComfyApp } from "../../scripts/app.js";
+import { api } from "../../scripts/api.js"
+import { ClipspaceDialog } from "./clipspace.js";
 
 // Helper function to convert a data URL to a Blob object
 function dataURLToBlob(dataURL) {

src/extensions/core/nodeTemplates.js

@@ -1,7 +1,7 @@
-import { app } from "../../scripts/app";
-import { api } from "../../scripts/api";
-import { ComfyDialog, $el } from "../../scripts/ui";
-import { GroupNodeConfig, GroupNodeHandler } from "./groupNode";
+import { app } from "../../scripts/app.js";
+import { api } from "../../scripts/api.js";
+import { ComfyDialog, $el } from "../../scripts/ui.js";
+import { GroupNodeConfig, GroupNodeHandler } from "./groupNode.js";
 
 // Adds the ability to save and add multiple nodes as a template
 // To save:

src/extensions/core/noteNode.js

@@ -1,5 +1,5 @@
-import {app} from "../../scripts/app";
-import {ComfyWidgets} from "../../scripts/widgets";
+import {app} from "../../scripts/app.js";
+import {ComfyWidgets} from "../../scripts/widgets.js";
 // Node that add notes to your project
 
 app.registerExtension({

src/extensions/core/rerouteNode.js

@@ -1,5 +1,5 @@
-import { app } from "../../scripts/app";
-import { mergeIfValid, getWidgetConfig, setWidgetConfig } from "./widgetInputs";
+import { app } from "../../scripts/app.js";
+import { mergeIfValid, getWidgetConfig, setWidgetConfig } from "./widgetInputs.js";
 
 // Node that allows you to redirect connections for cleaner graphs
 

src/extensions/core/saveImageExtraOutput.js

@@ -1,5 +1,5 @@
-import { app } from "../../scripts/app";
-import { applyTextReplacements } from "../../scripts/utils";
+import { app } from "../../scripts/app.js";
+import { applyTextReplacements } from "../../scripts/utils.js";
 // Use widget values and dates in output filenames
 
 app.registerExtension({

src/extensions/core/simpleTouchSupport.js

@@ -1,4 +1,4 @@
-import { app } from "../../scripts/app";
+import { app } from "../../scripts/app.js";
 
 let touchZooming;
 let touchCount = 0;

src/extensions/core/slotDefaults.js

@@ -1,5 +1,5 @@
-import { app } from "../../scripts/app";
-import { ComfyWidgets } from "../../scripts/widgets";
+import { app } from "../../scripts/app.js";
+import { ComfyWidgets } from "../../scripts/widgets.js";
 // Adds defaults for quickly adding nodes with middle click on the input/output
 
 app.registerExtension({

src/extensions/core/snapToGrid.js

@@ -1,4 +1,4 @@
-import { app } from "../../scripts/app";
+import { app } from "../../scripts/app.js";
 
 // Shift + drag/resize to snap to grid
 

src/extensions/core/undoRedo.js

@@ -1,5 +1,5 @@
-import { app } from "../../scripts/app";
-import { api } from "../../scripts/api"
+import { app } from "../../scripts/app.js";
+import { api } from "../../scripts/api.js"
 
 const MAX_HISTORY = 50;
 

src/extensions/core/uploadImage.js

@@ -1,4 +1,4 @@
-import { app } from "../../scripts/app";
+import { app } from "../../scripts/app.js";
 
 // Adds an upload button to the nodes
 

src/extensions/core/webcamCapture.js

@@ -1,5 +1,5 @@
-import { app } from "../../scripts/app";
-import { api } from "../../scripts/api";
+import { app } from "../../scripts/app.js";
+import { api } from "../../scripts/api.js";
 
 const WEBCAM_READY = Symbol();
 

src/extensions/core/widgetInputs.js

@@ -1,6 +1,6 @@
-import { ComfyWidgets, addValueControlWidgets } from "../../scripts/widgets";
-import { app } from "../../scripts/app";
-import { applyTextReplacements } from "../../scripts/utils";
+import { ComfyWidgets, addValueControlWidgets } from "../../scripts/widgets.js";
+import { app } from "../../scripts/app.js";
+import { applyTextReplacements } from "../../scripts/utils.js";
 
 const CONVERTED_TYPE = "converted-widget";
 const VALID_TYPES = ["STRING", "combo", "number", "BOOLEAN"];