@package-verse/esmpack 1.0.11 → 1.0.13

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.11",
+  "version": "1.0.13",
   "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,5 +1,6 @@
 import path from "path";
 import { Babel } from "../parser/babel.js";
+import packageMap, { IPackageMap } from "./packageMap.js";
 
 /**
  * File Packer must do following tasks...
@@ -20,15 +21,13 @@ import { Babel } from "../parser/babel.js";
  *      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 {
 
     readonly absoluteSrc: string;
 
+    modules: IPackageMap;
+
     readonly cssImports = [];
 
     readonly jsonImports = [];
@@ -50,6 +49,9 @@ export default class FilePacker {
 
     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
@@ -82,6 +84,9 @@ export default class FilePacker {
     }
 
     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/serve/send/packageInfo.ts

@@ -17,14 +17,18 @@ for (const [key] of Object.entries(packageInfo.dependencies)) {
         continue;
     }
 
-    const modulePath = "/node_modules/" + key + "/";
+    let 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"));
 
+    if (modulePackageJson.esm) {
+        modulePath += modulePackageJson.esm + "/";
+    }
     imports[key + "/"] = modulePath;
 
 }