@package-verse/esmpack 1.0.10 → 1.0.11

package/package.json

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

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
@@ -24,8 +27,13 @@
  */
 export default class FilePacker {
 
-    globalCss = [];
-    localCss = [];
+    readonly absoluteSrc: string;
+
+    readonly cssImports = [];
+
+    readonly jsonImports = [];
+
+    readonly pathImports = [];
 
     constructor(
         public readonly root: string,
@@ -33,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

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