@package-verse/esmpack 1.0.6 → 1.0.8

package/.vscode/launch.json

@@ -1,13 +1,6 @@
 {
     "version": "0.2.0",
     "configurations": [
-    {
-        "name": "Launch Edge",
-        "request": "launch",
-        "type": "pwa-msedge",
-        "url": "http://127.0.0.1:8080/uiv/$CURRENT$/dist/c8-front-end",
-        "webRoot": "${workspaceFolder}"
-    },
         {
             "type": "node",
             "request": "launch",
@@ -16,6 +9,16 @@
             "outFiles": [
                 "${workspaceRoot}/out/**/*.js"
             ]
+        },
+         {
+            "name": "Attach to Process",
+            "type": "node",
+            "request": "attach",
+            "port": 9229,
+            "localRoot": "${workspaceRoot}",
+            "outFiles": [
+                "${workspaceFolder}/dist/**/*.js",
+            ]
         }
     ]
 }

package/.vscode/settings.json

@@ -49,6 +49,7 @@
 	"endregion",
 	"eqeqeq",
 	"Escrima",
+	"esmpack",
 	"Euohonium",
 	"faid",
 	"Flugel",
@@ -65,6 +66,7 @@
 	"imaim",
 	"IMDB",
 	"immsn",
+	"importmap",
 	"Improv",
 	"Intromercial",
 	"IPTR",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@package-verse/esmpack",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "ESM Pack Packer and Web Server with PostCSS and ESM Loader",
   "homepage": "https://github.com/package-verse/esmpack#readme",
   "bugs": {
@@ -17,7 +17,7 @@
     "test": "exit 0",
     "push": "git add -A && git commit -m \"dep vb\" && npm version patch",
     "build-css-watch": "npx postcss \"./src/**/*.css\" --base src --dir dist --map --verbose -w",
-    "test-server": "node --enable-source-maps ./serve.js",
+    "test-server": "node --enable-source-maps --inspect=0.0.0.0:9229 ./serve.js",
     "postversion": "git push --follow-tags"
   },
   "devDependencies": {

package/src/ProcessArgs.ts

@@ -12,6 +12,9 @@ for(let i=0; i< length;i++) {
 }
 
 const last = argv[argv.length-1];
+
 export const fileArgument = last.startsWith("--") ? void 0 : last;
 
+
+
 ProcessOptions.cwd ||= process.cwd();

package/src/pack/FilePacker.ts

@@ -3,7 +3,18 @@
  * 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 all css as installed.
+ * 4. Packed file must set all css as installed. And other modules will simply return absolute paths.
+ *
+ * For App.js following packed scripts will be generated.
+ * 1. App.pack.js
+ *      Push Import Maps script tag
+ *      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
  */
 export default class FilePacker {
 
@@ -12,7 +23,8 @@ export default class FilePacker {
 
     constructor(
         public readonly root: string,
-        public readonly src: string
+        public readonly src: string,
+        public readonly prefix: string
     ) {
         // empty
     }

package/src/parser/babel.ts

@@ -1,16 +1,26 @@
-import { transform } from "@babel/core";
+import { transformSync  } from "@babel/core";
 import { readFileSync } from "fs";
+import { ProcessOptions } from "../ProcessArgs.js";
+import { parse } from "path";
 
 export class Babel {
 
-    static transform({ file, resolve }: { file: string, resolve: (url: string) => string }) {
+    static transform({ file, resolve }: { file: string, resolve: (url: string, sourceFile: string) => string }) {
+
+        const { base: name } = parse(file);
 
         const presets = {
             sourceType: "module",
             sourceMaps: true,
             inputSourceMap: true,
+            caller: {
+                name,
+                supportsDynamicImport: true,
+                supportsTopLevelAwait: true,
+            },
             compact: false,
             comments: false,
+            root: ProcessOptions.cwd,
             getModuleId: () => "v",
             "plugins": [
                 [
@@ -24,7 +34,8 @@ export class Babel {
                                     if (!source) {
                                         return node;
                                     }
-                                    source = resolve(source);
+                                    const sourceFile = node.hub?.file?.inputMap?.sourcemap?.sources?.[0];
+                                    source = resolve(source, sourceFile);
                                     e.source.value = source;
                                     return node;
                                 },
@@ -38,7 +49,7 @@ export class Babel {
 
         const p = { ... presets, filename: file };
         const code = readFileSync(file, "utf8");
-        const result = transform(code, p);
+        const result = transformSync(code, p);
         return result.code;
     }
 

package/src/serve/WebServer.ts

@@ -6,7 +6,7 @@ import sendLocalFile from "./send/sendLocalFile.js";
 import { createProxyMiddleware, fixRequestBody } from "http-proxy-middleware";
 import colors from "colors";
 import sendJSHost from "./send/sendJSHost.js";
-import sendCSSJS from "./send/sendCSSJS.js";
+import sendNonJSModule from "./send/sendNonJSModule.js";
 
 
 let middleware;
@@ -24,7 +24,7 @@ export default function WebServer(req: IncomingMessage, res: ServerResponse) {
 
     const css = fullPath.replace(/\.js$/, "");
     if (existsSync(css)) {
-        sendCSSJS(pathname.substring(0, pathname.length - 3), req, res);
+        sendNonJSModule(pathname.substring(0, pathname.length - 3), req, res);
         return;
     }
 
@@ -34,6 +34,12 @@ export default function WebServer(req: IncomingMessage, res: ServerResponse) {
         return;
     }
 
+    // if (!fileArgument) {
+    //     res.writeHead(404,{});
+    //     res.end("");
+    //     return;
+    // }
+
     // proxy...
     middleware ??= createProxyMiddleware({
         target: fileArgument,

package/src/serve/send/packageInfo.ts

@@ -5,3 +5,13 @@ import { join } from "path";
 const jsonText = readFileSync(join(ProcessOptions.cwd, "package.json"), "utf-8");
 
 export const packageInfo = JSON.parse(jsonText);
+
+const imports = {
+    [packageInfo.name + "/"]: "/"
+};
+
+for (const [key] of Object.entries(packageInfo.dependencies)) {
+    imports[key + "/"] = "/node_modules/" + key + "/";
+}
+
+export const importMap = { imports }; 

package/src/serve/send/sendJS.ts

@@ -2,33 +2,73 @@ import { IncomingMessage, ServerResponse } from "node:http";
 import { Babel } from "../../parser/babel.js";
 import path, { parse } from "node:path";
 import { ProcessOptions } from "../../ProcessArgs.js";
-import { readFileSync } from "node:fs";
+import { existsSync, readFileSync } from "node:fs";
 
 export default function sendJS(filePath: string, req: IncomingMessage, res: ServerResponse) {
 
 
-    let text = Babel.transform({ file: filePath, resolve(url) {
-        if (url.endsWith(".css")) {
-            url += ".js";
-        }
+    let text = Babel.transform({ file: filePath, resolve(url, sourceFile) {
+
+        const originalUrl = url;
+
         // check if it has no extension...
         const { ext } = parse(url);
         if (!ext) {
+
+            // this is case for tslib, reflect_metadata
+            
             // fetch module...
             const tokens = url.split("/");
-            let [packageName] = tokens;
+            let packageName = tokens.shift();
             if (packageName.startsWith("@")) {
                 packageName += "/" + tokens.shift();
             }
+
             const packageJsonPath = path.resolve(ProcessOptions.cwd, "node_modules", packageName, "package.json");
-            const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
-            const start = packageJson["module"] || packageJson["main"];
-            return "/node_modules/" + url + "/" + start;
+            if (existsSync(packageJsonPath)) {
+                const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+                const start = packageJson["module"] || packageJson["main"];
+                return url + "/" + start;
+            }
+
         }
+
+
         if (!url.startsWith(".")) {
-            url = "/node_modules/" + url;
+
+            if (!url.endsWith(".js")) {
+                url += ".js";
+            }
+
+            return url;
+        }
+
+        const jsFile = path.resolve(path.dirname(filePath), url);
+        if (existsSync(jsFile)) {
+            if (!jsFile.endsWith(".js")) {
+                url += ".js";
+            }
+            return url;
+        }
+
+        if (url.endsWith(".js")) {
+            return url;
         }
-        return url;
+
+        // 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("\\", "/");
+            if(!relative.endsWith(".js")) {
+                return relative + ".js";
+            }
+            return relative;
+        }
+        return originalUrl;
+
     }});
 
     const { base } = parse(filePath);

package/src/serve/send/sendJSHost.ts

@@ -1,6 +1,12 @@
 import { IncomingMessage, ServerResponse } from "node:http";
+import { importMap, packageInfo } from "./packageInfo.js";
 
 export default function sendJSHost(path: string, req: IncomingMessage, res: ServerResponse) {
+
+    // generate import maps
+    // for dynamic scripts
+    // this is to avoid path renaming and support dynamic module loading
+
     const text = `
 <!DOCTYPE html>
 <html lang="en">
@@ -10,9 +16,12 @@ export default function sendJSHost(path: string, req: IncomingMessage, res: Serv
     <title>Index of ${path}</title>
 </head>
 <body>
+    <script type="importmap">
+        ${JSON.stringify(importMap, void 0, 2)}
+    </script>
     <script>
         const cs = document.currentScript;
-        import("/${path}").then((r) => ESMPack.render(r, cs), (error) => cs.replaceWith(document.createTextNode(error.stack || error)));
+        import("${packageInfo.name}/${path}").then((r) => ESMPack.render(r, cs), (error) => cs.replaceWith(document.createTextNode(error.stack || error)));
     </script>
 </body>
 </html>

package/src/serve/send/sendNonJSModule.ts

@@ -0,0 +1,39 @@
+import { readFileSync } from "node:fs";
+import { IncomingMessage, ServerResponse } from "node:http";
+import { fileURLToPath } from "node:url";
+
+export default function sendNonJSModule(path: string, req: IncomingMessage, res: ServerResponse) {
+
+
+    if (path.endsWith(".css")) {
+
+        const init = fileURLToPath(import.meta.resolve("../../../init.js"));
+        const initText = readFileSync(init, "utf-8");
+
+        const text = `
+    (function (link) {
+        ${initText};
+        ESMPack.installStyleSheet(link);
+    }("/${path}"))
+    `;
+
+        res.writeHead(200, {
+            "content-type": "text/javascript",
+            "cache-control": "no-cache"
+        });
+        res.end(text);
+        return;
+    }
+
+
+    // just send a path...
+    res.writeHead(200, {
+        "content-type": "text/javascript",
+        "cache-control": "no-cache"
+    });
+    res.end(`
+    const value = "/${path}";
+    export default value;
+    `);
+    
+}

package/src/tags.d.ts

@@ -0,0 +1,32 @@
+declare module "*.png" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.jpg" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.jpeg" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.gif" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.svg" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.css" {
+    const value: string;
+    export default value;
+}
+
+declare module "*.json" {
+}

package/src/test/Clock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path opacity=".4" d="M96 352C96 402.3 112.6 448.8 140.6 486.2L105.4 521.4C92.9 533.9 92.9 554.2 105.4 566.7C117.9 579.2 138.2 579.2 150.7 566.7L185.9 531.5C223.3 559.5 269.7 576.1 320 576.1C370.3 576.1 416.8 559.5 454.2 531.5L489.4 566.7C501.9 579.2 522.2 579.2 534.7 566.7C547.2 554.2 547.2 533.9 534.7 521.4L499.5 486.2C527.5 448.8 544.1 402.4 544.1 352C544.1 228.3 443.8 128 320.1 128C196.4 128 96 228.3 96 352zM296 248C296 234.7 306.7 224 320 224C333.3 224 344 234.7 344 248L344 342.1L393 391.1C402.4 400.5 402.4 415.7 393 425C383.6 434.3 368.4 434.4 359.1 425L303.1 369C298.6 364.5 296.1 358.4 296.1 352L296.1 248z"/><path d="M543.5 196.9C550 206.3 564 207 568.4 196.5C573.3 185 576 172.4 576 159.2C576 106.6 533.4 64 480.8 64C461.5 64 443.5 69.8 428.5 79.7C418.9 86 422.2 99.6 432.6 104.3C477.4 124.7 515.7 156.9 543.6 196.9zM71.6 196.5C76.1 207 90 206.3 96.5 196.9C124.3 156.9 162.6 124.7 207.5 104.3C217.9 99.6 221.2 86 211.6 79.7C196.6 69.8 178.6 64 159.3 64C106.7 64 64.1 106.6 64.1 159.2C64.1 172.4 66.8 185 71.7 196.5zM344 248C344 234.7 333.3 224 320 224C306.7 224 296 234.7 296 248L296 352C296 358.4 298.5 364.5 303 369L359 425C368.4 434.4 383.6 434.4 392.9 425C402.2 415.6 402.3 400.4 392.9 391.1L343.9 342.1L343.9 248z"/></svg>

package/src/test/Clock2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Pro v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path opacity=".4" d="M96 352C96 402.3 112.6 448.8 140.6 486.2L105.4 521.4C92.9 533.9 92.9 554.2 105.4 566.7C117.9 579.2 138.2 579.2 150.7 566.7L185.9 531.5C223.3 559.5 269.7 576.1 320 576.1C370.3 576.1 416.8 559.5 454.2 531.5L489.4 566.7C501.9 579.2 522.2 579.2 534.7 566.7C547.2 554.2 547.2 533.9 534.7 521.4L499.5 486.2C527.5 448.8 544.1 402.4 544.1 352C544.1 228.3 443.8 128 320.1 128C196.4 128 96 228.3 96 352zM296 248C296 234.7 306.7 224 320 224C333.3 224 344 234.7 344 248L344 342.1L393 391.1C402.4 400.5 402.4 415.7 393 425C383.6 434.3 368.4 434.4 359.1 425L303.1 369C298.6 364.5 296.1 358.4 296.1 352L296.1 248z"/><path d="M543.5 196.9C550 206.3 564 207 568.4 196.5C573.3 185 576 172.4 576 159.2C576 106.6 533.4 64 480.8 64C461.5 64 443.5 69.8 428.5 79.7C418.9 86 422.2 99.6 432.6 104.3C477.4 124.7 515.7 156.9 543.6 196.9zM71.6 196.5C76.1 207 90 206.3 96.5 196.9C124.3 156.9 162.6 124.7 207.5 104.3C217.9 99.6 221.2 86 211.6 79.7C196.6 69.8 178.6 64 159.3 64C106.7 64 64.1 106.6 64.1 159.2C64.1 172.4 66.8 185 71.7 196.5zM344 248C344 234.7 333.3 224 320 224C306.7 224 296 234.7 296 248L296 352C296 358.4 298.5 364.5 303 369L359 425C368.4 434.4 383.6 434.4 392.9 425C402.2 415.6 402.3 400.4 392.9 391.1L343.9 342.1L343.9 248z"/></svg>

package/src/test/TestView.ts

@@ -1,5 +1,7 @@
 import DateTime from "@web-atoms/date-time/dist/DateTime.js";
 
+import clock from "@package-verse/esmpack/src/test/Clock.svg";
+
 // irrespective of loading order
 // global must be loaded first and
 // local must override the global style
@@ -8,13 +10,24 @@ import "./TestView.local.css";
 import "./TestView.global.css";
 import LogDecorator from "./LogDecorator.js";
 
+import Clock2 from "./Clock2.svg";
+
 @LogDecorator
 export default class DateView extends HTMLElement {
 
     connectedCallback() {
+
+        let img = document.createElement("img");
+        img.src = clock;
+        const span = document.createElement("span");
+        this.appendChild(img);
+        this.appendChild(span);
+        img = document.createElement("img");
+        img.src = Clock2;
+        this.appendChild(img);
         setInterval(() => {
             const now = DateTime.now;
-            this.textContent = now.toJSON();
+            span.textContent = now.toJSON();
         }, 1000);
     }
 

package/src/serve/send/sendCSSJS.ts

@@ -1,22 +0,0 @@
-import { readFileSync } from "node:fs";
-import { IncomingMessage, ServerResponse } from "node:http";
-import { fileURLToPath } from "node:url";
-
-export default function sendCSSJS(path: string, req: IncomingMessage, res: ServerResponse) {
-
-    const init = fileURLToPath(import.meta.resolve("../../../init.js"));
-    const initText = readFileSync(init, "utf-8");
-
-    const text = `
-(function (link) {
-    ${initText};
-    ESMPack.installStyleSheet(link);
-}("/${path}"))
-`;
-
-    res.writeHead(200, {
-        "content-type": "text/javascript",
-        "cache-control": "no-cache"
-    });
-    res.end(text);
-}