Fix Vite build (#55)

* Fix build output

* 0.7.37

* Fix type export

* 0.7.38

* Adjust build

* 0.7.39

* Add css to package declaration

* 0.7.40

* ESM style named export

* 0.7.41

* Fix style export for unit test

* 0.7.42

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "litegraph.js",
-    "version": "0.7.36",
+    "version": "0.7.42",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "litegraph.js",
-            "version": "0.7.36",
+            "version": "0.7.42",
             "license": "MIT",
             "devDependencies": {
                 "@types/jest": "^28.1.3",

package.json

@@ -1,10 +1,20 @@
 {
   "name": "@comfyorg/litegraph",
-  "version": "0.7.36",
+  "version": "0.7.42",
   "type": "module",
   "description": "A graph node editor similar to PD or UDK Blueprints. It works in an HTML5 Canvas and allows to export graphs to be included in applications.",
-  "main": "src/litegraph.js",
-  "types": "src/litegraph.d.ts",
+  "main": "./dist/litegraph.umd.js",
+  "module": "./dist/litegraph.es.js",
+  "types": "./dist/litegraph.d.ts",
+  "style": "./dist/css/litegraph.css",
+  "exports": {
+    ".": {
+      "import": "./dist/litegraph.es.js",
+      "require": "./dist/litegraph.umd.js",
+      "types": "./dist/litegraph.d.ts"
+    },
+    "./style.css": "./dist/css/litegraph.css"
+  },
   "directories": {
     "doc": "doc"
   },

src/litegraph.js

@@ -1,4 +1,6 @@
+const globalExport = {};
 
+(function (globalThis) {
     // *************************************************************
     //   LiteGraph CLASS                                     *******
     // *************************************************************
@@ -14513,14 +14515,13 @@ LGraphNode.prototype.executeAction = function(action)
                 window.setTimeout(callback, 1000 / 60);
             };
     }
+})(globalExport)
 
-if (typeof exports != "undefined") {
-    exports.LiteGraph = globalThis.LiteGraph;
-    exports.LGraph = globalThis.LGraph;
-    exports.LLink = globalThis.LLink;
-    exports.LGraphNode = globalThis.LGraphNode;
-    exports.LGraphGroup = globalThis.LGraphGroup;
-    exports.DragAndScale = globalThis.DragAndScale;
-    exports.LGraphCanvas = globalThis.LGraphCanvas;
-    exports.ContextMenu = globalThis.ContextMenu;
-}
+export const LiteGraph = globalExport.LiteGraph;
+export const LGraph = globalExport.LGraph;
+export const LLink = globalExport.LLink;
+export const LGraphNode = globalExport.LGraphNode;
+export const LGraphGroup = globalExport.LGraphGroup;
+export const DragAndScale = globalExport.DragAndScale;
+export const LGraphCanvas = globalExport.LGraphCanvas;
+export const ContextMenu = globalExport.ContextMenu;

vite.config.mts

@@ -6,16 +6,10 @@ export default defineConfig({
     lib: {
       entry: path.resolve(__dirname, 'src/litegraph.js'),
       name: 'litegraph.js',
-      // TODO: Below workaround ensures output matches pre-vite format.  Should be removed.
-      fileName: (moduleFormat, entryAlias) => 'src/litegraph.js',
-      formats: ['iife']
+      fileName: (format) => `litegraph.${format}.js`,
+      formats: ['es', 'umd']
     },
     minify: false,
     sourcemap: true,
-    rollupOptions: {
-      // Disabling tree-shaking
-      // Prevent vite remove unused exports
-      treeshake: false
-    }
   },
 })