@package-verse/esmpack 1.0.8 → 1.0.10

package/empty.js

@@ -0,0 +1 @@
+// this is just an empty module placeholder for CSS modules

package/init.js

@@ -1,12 +1,5 @@
 const ESMPack = window.ESMPack ||= {};
-ESMPack.installed ||= new Set();
-
-ESMPack.markAsInstalled ||= (urls) => Array.isArray(urls)
-    ? urls.forEach(url => ESMPack.installed.add(url))
-    : ESMPack.installed.add(urls);
-
 ESMPack.installStyleSheet ||= (url) => {
-
     const installCss = (url) => {
 
         const link = document.createElement("link");
@@ -17,11 +10,6 @@ ESMPack.installStyleSheet ||= (url) => {
             ? "afterbegin"
             : "beforeend", link);
     };
-
-    if (ESMPack.installed.has(url)) {
-        return;
-    }
-    ESMPack.installed.add(url);
     if(document.readyState === "complete") {
         installCss(url);
     } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@package-verse/esmpack",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "ESM Pack Packer and Web Server with PostCSS and ESM Loader",
   "homepage": "https://github.com/package-verse/esmpack#readme",
   "bugs": {
@@ -21,6 +21,7 @@
     "postversion": "git push --follow-tags"
   },
   "devDependencies": {
+    "@types/babel__core": "^7.20.5",
     "@types/node": "^25.5.0",
     "@types/ws": "^8.18.1",
     "cssnano": "^7.0.6",

package/src/pack/FilePacker.ts

@@ -8,13 +8,19 @@
  * For App.js following packed scripts will be generated.
  * 1. App.pack.js
  *      Push Import Maps script tag
+ *      Add import map for non js modules as well, and for this
+ *         every nested dependency must be inspected.
+ *         Json module should load json via hashed-dependency
+ *         Image module should load path of module via hashed-dependency
+ *         CSS module should inject full path to the browser 
+ *      Push empty module for CSS
  *      Imports all nested dependencies of App.js that should not contain fully qualified path
  *      Import dynamically loaded modules as well
- *      Loads App.pack.global.css
- *      Loads App.pack.local.css
  *      Imports App.js dynamically so CSS can be ready before hosting the User interface
  * 2. App.pack.global.css
  * 3. App.pack.local.css
+ * 4. App.pack.{hash-of-absolute-module-path}.js <-- this will be a dependency for non js module such as image or json etc.
+ *      This will load an absolute path via resolve
  */
 export default class FilePacker {
 

package/src/parser/babel.ts

@@ -1,18 +1,59 @@
-import { transformSync  } from "@babel/core";
+import { NodePath, TransformOptions, transformSync  } from "@babel/core";
 import { readFileSync } from "fs";
 import { ProcessOptions } from "../ProcessArgs.js";
 import { parse } from "path";
+import { CallExpression, ImportDeclaration, ImportExpression } from "@babel/types";
+
 
 export class Babel {
 
-    static transform({ file, resolve }: { file: string, resolve: (url: string, sourceFile: string) => string }) {
+    static transform({
+        file,
+        resolve,
+        dynamicResolve
+    }: {
+        file: string,
+        resolve: (url: string, sourceFile: string) => string,
+        dynamicResolve?: (url: string, sourceFile: string) => string
+    }) {
 
         const { base: name } = parse(file);
 
-        const presets = {
+        function CallExpression (node: NodePath<CallExpression>) {
+            if (node.node.callee.type !== "Import") {
+                return node;
+            }
+            const sourceFile = (node.hub as any)?.file?.inputMap?.sourcemap?.sources?.[0];
+            const [ arg1 ] = node.node.arguments;
+            if (!arg1) {
+                return node;
+            }
+            if (arg1.type !== "StringLiteral") {
+                return node;
+            }
+            const v = dynamicResolve(arg1.value, sourceFile);
+            if (v !== arg1.value) {
+                arg1.value = v || arg1.value;
+            }
+            return node;
+        };
+
+        function ImportExpression(node: NodePath<ImportExpression>) {
+            const sourceFile = (node.hub as any)?.file?.inputMap?.sourcemap?.sources?.[0];
+            const { source } = node.node;
+            if (source.type !== "StringLiteral") {
+                return node;
+            }
+            const v = dynamicResolve(source.value, sourceFile);
+            if (v !== source.value) {
+                source.value = v || source.value;
+            }
+            return node;
+        }
+
+        const presets: TransformOptions = {
             sourceType: "module",
             sourceMaps: true,
-            inputSourceMap: true,
             caller: {
                 name,
                 supportsDynamicImport: true,
@@ -28,17 +69,18 @@ export class Babel {
                         return {
                             name: "Import Transformer",
                             visitor: {
-                                ImportDeclaration(node) {
+                                ImportDeclaration(node: NodePath<ImportDeclaration>) {
                                     const e = node.node;
                                     let source = e.source?.value;
                                     if (!source) {
                                         return node;
                                     }
-                                    const sourceFile = node.hub?.file?.inputMap?.sourcemap?.sources?.[0];
+                                    const sourceFile = (node.hub as any)?.file?.inputMap?.sourcemap?.sources?.[0];
                                     source = resolve(source, sourceFile);
                                     e.source.value = source;
                                     return node;
                                 },
+                                ... (dynamicResolve ? { CallExpression, ImportExpression } : {}),
                             }
                         };
                     }

package/src/serve/send/sendJS.ts

@@ -6,8 +6,11 @@ import { existsSync, readFileSync } from "node:fs";
 
 export default function sendJS(filePath: string, req: IncomingMessage, res: ServerResponse) {
 
+    const resolve = (url: string, sourceFile: string) => {
 
-    let text = Babel.transform({ file: filePath, resolve(url, sourceFile) {
+        if(!sourceFile) {
+            sourceFile = filePath;
+        }
 
         const originalUrl = url;
 
@@ -58,7 +61,6 @@ export default function sendJS(filePath: string, req: IncomingMessage, res: Serv
         // is it referenced from source...
         const dir = path.dirname(filePath);
         const absoluteSourcePath = path.resolve( dir, path.dirname(sourceFile));
-        console.log(`Absolute Path is ${absoluteSourcePath}`);
         const referencedAbsolutePath = path.join(absoluteSourcePath, url);
         if (existsSync(referencedAbsolutePath)) {
             const relative = path.relative(dir, referencedAbsolutePath).replaceAll("\\", "/");
@@ -69,56 +71,15 @@ export default function sendJS(filePath: string, req: IncomingMessage, res: Serv
         }
         return originalUrl;
 
-    }});
+    };
+
+
+    let text = Babel.transform({ file: filePath, resolve, dynamicResolve: resolve});
 
     const { base } = parse(filePath);
 
     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",
         "cache-control": "no-cache"