@package-verse/esmpack 1.0.10 → 1.0.12

package/README.md

@@ -2,22 +2,19 @@
 ESM Pack Packer and Web Server with PostCSS and ESM Loader
 
 # Why?
-Because, there is no simple packer that just rewrites module paths. After ES6 and HTTP2, there is no need to bundle all JavaScripts into a single file. Parsing and loading entire bundle is a single threaded operation, which blocks UI rendering and also consumes very high memory.
+Because, there is no simple packer that just generates module paths. After ES6 and HTTP2, there is no need to bundle all JavaScripts into a single file. Parsing and loading entire bundle is a single threaded operation, which blocks UI rendering and also consumes very high memory.
 
 # So what does this do?
 1. Creates a single pack JS file which only has import definition of all the imports.
-2. Packed file strips css and delivers separate css as combined CSS.
-3. Retains ESM source code as it is except import path, import path is rewritten to fully qualified CDN url. So caching is preserved over different main module versions but same dependencies.
+2. Import map contains inline JavaScript module via data url to inject CSS link into document.
 
 
 ## Dev Packer
 
-1. Development time packer will generate HTML file along with the pack that will generate import maps along with the loading of control and hosting it.
+1. Development time packer will generate HTML file along with the import map and inline script to host the module.
 2. Dev Packer will generate `let cs = document.currentScript;import("imported-path").then((r) => ESMPack.render(r, cs))` script inside html for every JS's corresponding html.
 3. Library author must implement `ESMPack.render` method which will accept exports from imported method and `currentScript`.
-4. Every `js` file's imports will be changed to fully qualified references for external imports.
 
 ## Release Packer
 
-1. A single script with `.pack.js` will be generated that will import every nested imports along with fully qualified path for every nested imported external references.
-2. Every `js` file's imports will be changed to fully qualified references for external imports.
+1. `pack.js` will generate a single JS file that will inject import map into document and it will call `ESMPack.render` method with import. 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@package-verse/esmpack",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "ESM Pack Packer and Web Server with PostCSS and ESM Loader",
   "homepage": "https://github.com/package-verse/esmpack#readme",
   "bugs": {

package/src/pack/FilePacker.ts

@@ -1,3 +1,7 @@
+import path from "path";
+import { Babel } from "../parser/babel.js";
+import packageMap, { IPackageMap } from "./packageMap.js";
+
 /**
  * File Packer must do following tasks...
  * 1. Visit every JavaScript file
@@ -17,15 +21,18 @@
  *      Imports all nested dependencies of App.js that should not contain fully qualified path
  *      Import dynamically loaded modules as well
  *      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 {
 
-    globalCss = [];
-    localCss = [];
+    readonly absoluteSrc: string;
+
+    modules: IPackageMap;
+
+    readonly cssImports = [];
+
+    readonly jsonImports = [];
+
+    readonly pathImports = [];
 
     constructor(
         public readonly root: string,
@@ -33,10 +40,53 @@ 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() {
 
+        // resolve package.json
+        this.modules = await packageMap(this.root);
+
+        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/pack/JSModule.ts

@@ -0,0 +1,27 @@
+import { IPackageInfo, IPackageMap } from "./packageMap.js";
+
+/**
+ * This class holds a path of single module along
+ * with it's own package info
+ */
+export default class JSModule {
+
+    public imports: IPackageMap;
+
+    public owner: IPackageInfo;
+    public main: IPackageInfo;
+
+    public mainFolder: string;
+    public ownerFolder: string;
+
+    public src: string;
+
+    constructor(
+        p: Partial<JSModule>
+    ) {
+        // do nothing
+        Object.setPrototypeOf(p, JSModule.prototype);
+        return p as any;
+    }
+
+}

package/src/pack/packageMap.ts

@@ -0,0 +1,64 @@
+import { readFile } from "fs/promises";
+import { join } from "path";
+
+const resolvedImports = new Map<string, Promise<IPackageMap>>();
+
+export interface IPackageInfo {
+    name: string;
+    version: string;
+    main: string;
+}
+
+export interface IPackageMap {
+    [key: string]: IPackageInfo
+}
+
+async function populatePackageInfo(root, imports: IPackageMap, packageJsonPath) {
+    const {
+        name,
+        version,
+        dependencies,
+        type,
+        module: moduleMain,
+        main
+    } = JSON.parse(await readFile(packageJsonPath, "utf-8"));
+
+    if (imports[name]) {
+        return;
+    }
+
+    /**
+     * Dependency must specify module or main, we will not assume it.
+     * We want to keep import map small.
+     *
+     * Otherwise, caller must explicitly specify the fully qualified module path to load
+     */
+    imports[name] = {
+        name,
+        version,
+        main: moduleMain
+            || (type === "module" ? main : void 0)
+            || void 0
+    }
+
+    for(const key of Object.keys(dependencies)) {
+        if (imports[key]) {
+            continue;
+        }
+        await populatePackageInfo(root, imports, join(root, "node_modules", key, "package.json"));
+    }
+}
+
+export default function packageMap(root: string) {
+    let value = resolvedImports.get(root);
+    if(value) {
+        return value;
+    }
+    value = (async ()=> {
+        const moduleImports = {} as IPackageMap;
+        await populatePackageInfo(root, moduleImports, join(root, "package.json"));
+        return moduleImports;
+    })();
+    resolvedImports.set(root, value);
+    return value;
+}

package/src/parser/babel.ts

@@ -3,6 +3,7 @@ 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 {
@@ -17,14 +18,37 @@ export class Babel {
         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);
 
-        function CallExpression (node: NodePath<CallExpression>) {
+        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;
+            const [arg1] = node.node.arguments;
             if (!arg1) {
                 return node;
             }
@@ -65,7 +89,7 @@ export class Babel {
             getModuleId: () => "v",
             "plugins": [
                 [
-                    function(babel) {
+                    function (babel) {
                         return {
                             name: "Import Transformer",
                             visitor: {
@@ -80,19 +104,13 @@ export class Babel {
                                     e.source.value = source;
                                     return node;
                                 },
-                                ... (dynamicResolve ? { CallExpression, ImportExpression } : {}),
+                                ...(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,62 +1,38 @@
 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) => {
 
+        if (url.endsWith(".js")) {
+            return url;
+        }
+
         if(!sourceFile) {
             sourceFile = filePath;
         }
 
-        const originalUrl = url;
-
-        // 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 (tokens.length) {
+                if (!url.endsWith(".js")) {
+                    return url + ".js";
+                }
             }
 
-        }
-
-
-        if (!url.startsWith(".")) {
-
-            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;
-        }
 
         // is it referenced from source...
         const dir = path.dirname(filePath);
@@ -69,8 +45,9 @@ export default function sendJS(filePath: string, req: IncomingMessage, res: Serv
             }
             return relative;
         }
-        return originalUrl;
 
+
+        return url + ".js";
     };
 
 

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;
 }