@package-verse/esmpack 1.0.4 → 1.0.5

package/init.js

@@ -1,7 +1,9 @@
 const ESMPack = window.ESMPack ||= {};
 ESMPack.installed ||= new Set();
 
-ESMPack.markAsInstalled ||= (url) => ESMPack.installed.add(url);
+ESMPack.markAsInstalled ||= (urls) => Array.isArray(urls)
+    ? urls.forEach(url => ESMPack.installed.add(url))
+    : ESMPack.installed.add(urls);
 
 ESMPack.installStyleSheet ||= (url) => {
 

package/pack.js

@@ -0,0 +1 @@
+import "./dist/pack/pack.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@package-verse/esmpack",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "ESM Pack Packer and Web Server with PostCSS and ESM Loader",
   "homepage": "https://github.com/package-verse/esmpack#readme",
   "bugs": {
@@ -34,6 +34,7 @@
     "postcss-url": "^10.1.3"
   },
   "dependencies": {
+    "@babel/core": "^7.29.0",
     "@web-atoms/date-time": "^3.0.3",
     "colors": "^1.4.0",
     "http-proxy-middleware": "^3.0.5",

package/src/pack/FilePacker.ts

@@ -3,12 +3,16 @@
  * 1. Visit every JavaScript file
  * 2. Change all imports, redirect CSS imports as css.js file that will include CSS on the page ...
  * 3. Create .pack.js with all nested imports if file imports `@web-atoms/core/dist/Pack`
- * 4. Packed file must set ignore for all imported CSS so dynamically loaded CSS can still be imported
+ * 4. Packed file must set all css as installed.
  */
 export default class FilePacker {
 
+    globalCss = [];
+    localCss = [];
+
     constructor(
-        public readonly root: string
+        public readonly root: string,
+        public readonly src: string
     ) {
         // empty
     }

package/src/parser/babel.ts

@@ -0,0 +1,45 @@
+import { transform } from "@babel/core";
+import { readFileSync } from "fs";
+
+export class Babel {
+
+    static transform({ file, resolve }: { file: string, resolve: (url: string) => string }) {
+
+        const presets = {
+            sourceType: "module",
+            sourceMaps: true,
+            inputSourceMap: true,
+            compact: false,
+            comments: false,
+            getModuleId: () => "v",
+            "plugins": [
+                [
+                    function(babel) {
+                        return {
+                            name: "Import Transformer",
+                            visitor: {
+                                ImportDeclaration(node) {
+                                    const e = node.node;
+                                    let source = e.source?.value;
+                                    if (!source) {
+                                        return node;
+                                    }
+                                    source = resolve(source);
+                                    e.source.value = source;
+                                    return node;
+                                },
+                            }
+                        };
+                    }
+                ]
+
+            ]
+        };
+
+        const p = { ... presets, filename: file };
+        const code = readFileSync(file, "utf8");
+        const result = transform(code, p);
+        return result.code;
+    }
+
+}

package/src/serve/send/sendJS.ts

@@ -1,51 +1,67 @@
-import { readFileSync } from "node:fs";
 import { IncomingMessage, ServerResponse } from "node:http";
-import { RegExpExtra } from "../../core/RegExpExtra.js";
+import { Babel } from "../../parser/babel.js";
+import { parse } from "node:path";
 
 export default function sendJS(path: string, req: IncomingMessage, res: ServerResponse) {
-    let text = readFileSync(path, "utf-8");
 
-    // change references....
-    // text = text.replace(/from\s*\"([^\.][^\"]+)\"/gm, `from "/node_modules/$1"`);
 
-    // remap CSS
-    text = RegExpExtra.replaceAll(text, /from\s*\"([^\"]+)\"/gm, (
-        { text, match }
-    ) => {
-        if (text) {
-            return text;
+    let text = Babel.transform({ file: path, resolve(url) {
+        if (url.endsWith(".css")) {
+            url += ".js";
         }
-        const [matched, g] = match;
-        if (g.endsWith(".css")) {
-            // we need to find source...
-            return `from "/node_modules/${g}.js"`;
+        if (!url.startsWith(".")) {
+            url = "/node_modules/" + url;
         }
-        if (g.startsWith(".")) {
-            return matched;
-        }
-        return `from "/node_modules/${g}"`;
-    });
+        return url;
+    }});
 
-    text = RegExpExtra.replaceAll(text, /import\s*\"([^\"]+)\"/gm, (
-        { text, match }
-    ) => {
-        if (text) {
-            return text;
-        }
-        const [matched, g] = match;
-        if (g.endsWith(".css")) {
-            // we need to find source...
-            let cssPath = g;
-            if (!cssPath.startsWith(".")) {
-                cssPath = "/node_modules/" + cssPath; 
-            }
-            return `import "${cssPath}.js"`;
-        }
-        if (g.startsWith(".")) {
-            return matched;
-        }
-        return `import "/node_modules/${g}"`;
-    });
+    const { base } = parse(path);
+
+    text += `\n//# sourceMappingURL=${base}.map`;
+
+    // let text = readFileSync(path, "utf-8");
+
+    // // change references....
+    // // text = text.replace(/from\s*\"([^\.][^\"]+)\"/gm, `from "/node_modules/$1"`);
+
+    // // remap CSS
+    // text = RegExpExtra.replaceAll(text, /from\s*\"([^\"]+)\"/gm, (
+    //     { text, match }
+    // ) => {
+    //     if (text) {
+    //         return text;
+    //     }
+    //     const [matched, g] = match;
+    //     if (g.endsWith(".css")) {
+    //         // we need to find source...
+    //         return `from "/node_modules/${g}.js"`;
+    //     }
+    //     if (g.startsWith(".")) {
+    //         return matched;
+    //     }
+    //     return `from "/node_modules/${g}"`;
+    // });
+
+    // text = RegExpExtra.replaceAll(text, /import\s*\"([^\"]+)\"/gm, (
+    //     { text, match }
+    // ) => {
+    //     if (text) {
+    //         return text;
+    //     }
+    //     const [matched, g] = match;
+    //     if (g.endsWith(".css")) {
+    //         // we need to find source...
+    //         let cssPath = g;
+    //         if (!cssPath.startsWith(".")) {
+    //             cssPath = "/node_modules/" + cssPath; 
+    //         }
+    //         return `import "${cssPath}.js"`;
+    //     }
+    //     if (g.startsWith(".")) {
+    //         return matched;
+    //     }
+    //     return `import "/node_modules/${g}"`;
+    // });
 
     res.writeHead(200, {
         "content-type": "text/javascript",