@package-verse/esmpack 1.0.9 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@package-verse/esmpack",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "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

@@ -1,3 +1,6 @@
+import path from "path";
+import { Babel } from "../parser/babel.js";
+
 /**
  * File Packer must do following tasks...
  * 1. Visit every JavaScript file
@@ -10,11 +13,12 @@
  *      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
@@ -23,8 +27,13 @@
  */
 export default class FilePacker {
 
-    globalCss = [];
-    localCss = [];
+    readonly absoluteSrc: string;
+
+    readonly cssImports = [];
+
+    readonly jsonImports = [];
+
+    readonly pathImports = [];
 
     constructor(
         public readonly root: string,
@@ -32,10 +41,47 @@ export default class FilePacker {
         public readonly prefix: string
     ) {
         // empty
+        // let us make src relative to the root if an absolute path was supplied
+        if (path.isAbsolute(this.src)) {
+            this.src = path.relative(this.root, this.src);
+        }
+        this.absoluteSrc = path.resolve(this.root, this.src);
     }
 
     async pack() {
 
+        const resolve = (url, sourceFile) => this.resolve(url, sourceFile);
+
+        // we don't need the code
+        await Babel.transformAsync({
+            file: path.join(this.root, this.src),
+            resolve,
+            dynamicResolve: resolve
+        });
+
+
     }
 
+    resolve(url: string, sourceFile: string) {
+
+        const moduleUrl = this.moduleUrl(url, sourceFile);
+
+        if (url.endsWith(".css")) {
+            this.cssImports.push(moduleUrl);
+            return url;
+        }
+        if (url.endsWith(".json")) {
+            this.jsonImports.push(moduleUrl);
+            return url;
+        }
+
+        if (!url.endsWith(".js")) {
+
+        }
+        return url;
+    }
+
+    moduleUrl(url: string, sourceFile: string) {
+        return url;
+    }
 }

package/src/parser/babel.ts

@@ -1,18 +1,83 @@
-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";
+import { readFile } from "fs/promises";
+
 
 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 presets: TransformOptions = Babel.prepareOptions(file, dynamicResolve, resolve);
+
+        const p = { ... presets, filename: file };
+        const code = readFileSync(file, "utf8");
+        const result = transformSync(code, p);
+        return result.code;
+    }
+
+    static async transformAsync({
+        file,
+        resolve,
+        dynamicResolve
+    }) {
+        const presets: TransformOptions = Babel.prepareOptions(file, dynamicResolve, resolve);
+
+        const p = { ... presets, filename: file };
+        const code = await readFile(file, "utf8");
+        const result = transformSync(code, p);
+        return result.code;
 
+    }
+
+    private static prepareOptions(file: string, dynamicResolve: (url: string, sourceFile: string) => string, resolve: (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,
@@ -24,33 +89,28 @@ export class Babel {
             getModuleId: () => "v",
             "plugins": [
                 [
-                    function(babel) {
+                    function (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 } : {}),
                             }
                         };
                     }
                 ]
-
             ]
         };
-
-        const p = { ... presets, filename: file };
-        const code = readFileSync(file, "utf8");
-        const result = transformSync(code, p);
-        return result.code;
+        return presets;
     }
-
 }

package/src/serve/send/packageInfo.ts

@@ -1,6 +1,6 @@
-import { readFileSync } from "fs";
+import { existsSync, readFileSync } from "fs";
 import { ProcessOptions } from "../../ProcessArgs.js";
-import { join } from "path";
+import path, { join } from "path/posix";
 
 const jsonText = readFileSync(join(ProcessOptions.cwd, "package.json"), "utf-8");
 
@@ -11,7 +11,22 @@ const imports = {
 };
 
 for (const [key] of Object.entries(packageInfo.dependencies)) {
-    imports[key + "/"] = "/node_modules/" + key + "/";
+
+    const modulePackageJsonFilePath = join(ProcessOptions.cwd, "node_modules", key , "package.json");
+    if (!existsSync(modulePackageJsonFilePath)) {
+        continue;
+    }
+
+    const modulePath = "/node_modules/" + key + "/";
+
+    // read package.json
+    const modulePackageJson = JSON.parse(readFileSync(modulePackageJsonFilePath, "utf-8"));
+    imports[key] = path.join(modulePath , modulePackageJson.module
+        || (modulePackageJson.type === "module"
+            ? modulePackageJson.main : "index.js"));
+
+    imports[key + "/"] = modulePath;
+
 }
 
 export const importMap = { imports }; 

package/src/serve/send/sendJS.ts

@@ -1,64 +1,42 @@
 import { IncomingMessage, ServerResponse } from "node:http";
 import { Babel } from "../../parser/babel.js";
 import path, { parse } from "node:path";
-import { ProcessOptions } from "../../ProcessArgs.js";
-import { existsSync, readFileSync } from "node:fs";
+import { existsSync } 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 (url.endsWith(".js")) {
+            return url;
+        }
 
-        const originalUrl = url;
+        if(!sourceFile) {
+            sourceFile = filePath;
+        }
 
-        // check if it has no extension...
-        const { ext } = parse(url);
-        if (!ext) {
+        if (!url.startsWith(".")) {
 
-            // this is case for tslib, reflect_metadata
-            
-            // fetch module...
+            // we need to include .js for every module relative path
             const tokens = url.split("/");
             let packageName = tokens.shift();
             if (packageName.startsWith("@")) {
                 packageName += "/" + tokens.shift();
             }
 
-            const packageJsonPath = path.resolve(ProcessOptions.cwd, "node_modules", packageName, "package.json");
-            if (existsSync(packageJsonPath)) {
-                const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
-                const start = packageJson["module"] || packageJson["main"];
-                return url + "/" + start;
-            }
-
-        }
-
-
-        if (!url.startsWith(".")) {
-
-            if (!url.endsWith(".js")) {
-                url += ".js";
+            if (tokens.length) {
+                if (!url.endsWith(".js")) {
+                    return 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;
-        }
 
         // 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("\\", "/");
@@ -67,58 +45,18 @@ export default function sendJS(filePath: string, req: IncomingMessage, res: Serv
             }
             return relative;
         }
-        return originalUrl;
 
-    }});
+
+        return url + ".js";
+    };
+
+
+    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"

package/src/serve/send/sendLocalFile.ts

@@ -5,7 +5,8 @@ import sendList from "./sendList.js";
 import sendJS from "./sendJS.js";
 export default function sendLocalFile(reqPath: string, path: string, req: IncomingMessage, res: ServerResponse) {
 
-    if (path.endsWith(".js")) {
+    if (path.endsWith(".js")
+        && !path.endsWith(".pack.js")) {
         // send JS
         return sendJS(path, req, res);
     }

package/src/test/TestView.local.css

@@ -1,3 +1,15 @@
 date-view {
     color: red;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-items: center;
+    align-content: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+date-view img {
+    max-height: 50px;
+    max-width: 50px;
 }