@pictogrammers/element-esbuild 0.0.13 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pictogrammers/element-esbuild",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "type": "module",
   "description": "Element esbuild",
   "homepage": "https://github.com/Pictogrammers/Element-esbuild#readme",
@@ -21,7 +21,7 @@
   },
   "scripts": {
     "prepublishOnly": "npm run build",
-    "build": "esbuild scripts/element-start.ts scripts/element-build.ts scripts/element-publish.ts --bundle --outdir=bin --format=esm --target=esnext --platform=node --external:esbuild --banner:js=\"import { createRequire } from 'node:module'; const require = createRequire(import.meta.url);\""
+    "build": "esbuild scripts/element-start.ts scripts/element-build.ts scripts/element-publish.ts --bundle --minify --outdir=bin --format=esm --target=esnext --platform=node --external:esbuild --banner:js=\"import { createRequire } from 'node:module'; const require = createRequire(import.meta.url);\""
   },
   "devDependencies": {
     "@types/node": "^25.0.3",

package/scripts/element-build.ts

@@ -10,13 +10,15 @@ import { copyFile, writeFile } from 'node:fs/promises';
 import { dirname, join } from 'node:path';
 import { playgroundPlugin } from './playgroundPlugin.ts';
 import { createPlaygroundIndex } from './createPlaygroundIndex.ts';
+import { getDirectories } from './getDirectories.ts';
 
-const plugins = [htmlDependentsPlugin, rebuildNotifyPlugin];
+const plugins = [rebuildNotifyPlugin];
 const entryPoints: string[] = [];
 
 const green = (text: string) => `\x1b[32m${text}\x1b[0m`;
 const red = (text: string) => `\x1b[31m${text}\x1b[0m`;
 
+const nodeModulesDir = 'node_modules';
 const playgroundFile = 'playground.html';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -44,11 +46,28 @@ const {
   repo,
   repoComponent,
   navigation,
+  external,
 } = config.default;
 
 if (namespace) {
   console.log(green('Building app...'));
   entryPoints.push(`./${srcDir}/${componentsDir}/${namespace}/app/app.ts`);
+  // Get local namespaces
+  const localNamespaces = await getDirectories(join(rootDir, srcDir, componentsDir));
+  // Get external namespaces; namespace, packageName
+  const externalNamespaces = new Map<string, string>();
+  for (let packageName of (external ?? [])) {
+    const folders = await getDirectories(join(rootDir, nodeModulesDir, ...packageName.split('/')));
+    folders.forEach((namespace) => {
+      if (namespace === nodeModulesDir) { return; }
+      externalNamespaces.set(namespace, packageName);
+    });
+  }
+  // Autoload referenced html elements
+  plugins.push(htmlDependentsPlugin({
+    localNamespaces,
+    externalNamespaces,
+  }));
 } else {
   // dynamically resolve all found components
   entryPoints.push('playground-entry');

package/scripts/element-start.ts

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 
-import { context } from 'esbuild';
+import { build, context } from 'esbuild';
 import chokidar from 'chokidar';
 import { pathToFileURL, fileURLToPath } from 'node:url';
 import { join, sep, dirname } from 'node:path';
-import { copyFile, readFile, writeFile } from 'node:fs/promises';
+import { copyFile, cp, readFile, writeFile } from 'node:fs/promises';
 
 import { fileExists } from '../scripts/fileExists.ts';
 import { folderExists } from '../scripts/folderExists.ts';
@@ -12,10 +12,11 @@ import { playgroundPlugin } from '../scripts/playgroundPlugin.ts';
 import { htmlDependentsPlugin } from '../scripts/htmlDependentsPlugin.ts';
 import { rebuildNotifyPlugin } from '../scripts/rebuildNotifyPlugin.ts';
 import { createPlaygroundIndex } from '../scripts/createPlaygroundIndex.ts';
+import { getDirectories } from './getDirectories.ts';
 
 (async () => {
 
-const plugins = [htmlDependentsPlugin, rebuildNotifyPlugin];
+const plugins = [rebuildNotifyPlugin];
 
 const bold = (text: string) => `\x1b[1m${text}\x1b[0m`;
 const green = (text: string) => `\x1b[32m${text}\x1b[0m`;
@@ -39,11 +40,14 @@ const config = await import(fullConfigPath.href);
 
 const {
   namespace,
+  external,
   title,
   navigation,
   repo,
   repoComponent,
+  copy,
 } = config.default;
+const nodeModulesDir = 'node_modules';
 const distDir = 'dist';
 const srcDir = 'src';
 const componentsDir = 'components';
@@ -52,6 +56,22 @@ const entryPoints: string[] = [];
 if (namespace) {
   console.log(green('Building app...'));
   entryPoints.push(`./${srcDir}/${componentsDir}/${namespace}/app/app.ts`);
+  // Get local namespaces
+  const localNamespaces = await getDirectories(join(rootDir, srcDir, componentsDir));
+  // Get external namespaces; namespace, packageName
+  const externalNamespaces = new Map<string, string>();
+  for (let packageName of (external ?? [])) {
+    const folders = await getDirectories(join(rootDir, nodeModulesDir, ...packageName.split('/')));
+    folders.forEach((namespace) => {
+      if (namespace === nodeModulesDir) { return; }
+      externalNamespaces.set(namespace, packageName);
+    });
+  }
+  // Autoload referenced html elements
+  plugins.push(htmlDependentsPlugin({
+    localNamespaces,
+    externalNamespaces,
+  }));
   // Handle index.html
   const indexFile = 'index.html';
   if (await fileExists(join(rootDir, srcDir, indexFile))) {
@@ -121,6 +141,7 @@ let ctx = await context({
   bundle: true,
   format: 'esm', // Use ES Modules
   target: 'es2024', // Target ES6 syntax
+  sourcemap: true, // needed for debug
   minify: false,
   loader: {
     '.css': 'text'
@@ -130,6 +151,24 @@ let ctx = await context({
 
 // initial rebuild
 await ctx.rebuild();
+// copy folders and files
+(copy ?? []).forEach(async ({ from, to }: { from: string, to: string }) => {
+  const toParts = to.split(sep);
+  const fromParts = from.split(sep);
+  if (fromParts[fromParts.length - 1] === '') {
+    console.log(red('element.config.ts "copy" "from" should not end with a "/". Ex: "assets" not "assets/".'));
+    process.exit();
+  }
+  if (toParts[toParts.length - 1] === '') {
+    console.log(red('element.config.ts "copy" "to" should not end with a "/". Ex: "assets" not "assets/".'));
+    process.exit();
+  }
+  if (await folderExists(join(rootDir, srcDir, ...fromParts))) {
+    await cp(join(rootDir, srcDir, ...fromParts), join(rootDir, distDir, ...toParts), { recursive: true });
+  } else if (await fileExists(join(rootDir, srcDir, ...fromParts))) {
+    await copyFile(join(rootDir, srcDir, ...fromParts), join(rootDir, distDir, ...toParts));
+  }
+});
 
 // any change to src should trigger rebuild
 const watcher = chokidar.watch('src', {
@@ -144,6 +183,23 @@ watcher.on('all', async (event, path) => {
       console.log(`Copy "${parts.slice(2).join('/')}" to publish/*`);
       await copyFile(join(rootDir, ...parts), join(rootDir, publishDir, ...parts.slice(2)));
     }
+    // non destructive
+    if (event === 'change' || event === 'add') {
+      (copy ?? []).array.forEach(async ({ from, to }: { from: string, to: string }) => {
+        const withoutSrc = parts.slice(1).join('/');
+        if (withoutSrc.startsWith(from)) {
+          console.log('copy after', withoutSrc, from, to);
+          /*if (await folderExists(join(rootDir, ...parts))) {
+            await copyFile(join(rootDir, ...parts), join(rootDir, distDir, to, ...parts.slice(1)));
+          } else if (await fileExists(join(rootDir, ...parts))) {
+            await copyFile(join(rootDir, ...parts), join(rootDir, distDir, to, ...parts.slice(1)));
+          }*/
+        }
+      });
+      if (await folderExists(join(rootDir, ...parts))) {
+        
+      }
+    }
   }
   try {
     await ctx.rebuild();

package/scripts/getDirectories.ts

@@ -1,5 +1,4 @@
 import {readdir}  from 'node:fs/promises';
-import { join } from 'node:path';
 
 export async function getDirectories(dirPath: string) {
   const directories: string[] = [];

package/scripts/htmlDependentsPlugin.ts

@@ -3,43 +3,64 @@ import { readFile } from "node:fs/promises";
 
 import { dashToCamel } from "./dashToCamel.ts";
 
+const nodeModulesDir = 'node_modules';
 const root = process.cwd();
 const rootDepth = root.split(sep).length;
+const red = (text: string) => `\x1b[31m${text}\x1b[0m`;
 
-export const htmlDependentsPlugin = {
-  name: 'html-dependents-plugin',
-  setup(build: any) {
-    // Intercept files with the .html extension
-    build.onLoad({ filter: /\.html$/ }, async (args: any) => {
-      const parts = args.path.split(sep).splice(rootDepth);
-      const [src, componentsDir, currentNamspace, currentComponent, ...file] = parts;
-      // Read the file contents as text
-      const contents = await readFile(args.path, 'utf8');
-      const matches = contents.matchAll(/<\/(?<namespace>\w+)-(?<value>[^>]+)/g);
-      const components = new Map<string, string[]>();
-      for (const match of matches) {
-        const { namespace, value } = match.groups as any;
-        const component = dashToCamel(value);
-        components.set(`${namespace}-${component}`, [namespace, component]);
-      }
-      const imports: string[] = [];
-      components.forEach(([namespace, component]) => {
-        const depth = parts.length - 4;
-        const backPaths = (new Array(depth)).fill('..');
-        if (namespace === currentNamspace) {
-          if (component === currentComponent) {
-            return;
-          }
-          imports.push(`import './${backPaths.join('/')}/${component}/${component}';`);
-        } else {
-          imports.push(`import './${backPaths.join('/')}/${namespace}/${component}/${component}';`);
+interface PluginOptions {
+  localNamespaces: string[];
+  externalNamespaces: Map<string, string>
+}
+
+export function htmlDependentsPlugin({
+  localNamespaces,
+  externalNamespaces,
+}: PluginOptions) {
+  return {
+    name: 'html-dependents-plugin',
+    setup(build: any) {
+      // Intercept files with the .html extension
+      build.onLoad({ filter: /\.html$/ }, async (args: any) => {
+        const parts = args.path.split(sep).splice(rootDepth);
+        const [src, componentsDir, currentNamspace, currentComponent, ...file] = parts;
+        // Read the file contents as text
+        const contents = await readFile(args.path, 'utf8');
+        const matches = contents.matchAll(/<\/(?<namespace>\w+)-(?<value>[^>]+)/g);
+        const components = new Map<string, string[]>();
+        for (const match of matches) {
+          const { namespace, value } = match.groups as any;
+          const component = dashToCamel(value);
+          components.set(`${namespace}-${component}`, [namespace, component]);
         }
+        const imports: string[] = [];
+        components.forEach(([namespace, component]) => {
+          const depth = parts.length - 4;
+          const backPaths = (new Array(depth)).fill('..');
+          if (namespace === currentNamspace) {
+            if (component === currentComponent) {
+              return;
+            }
+            imports.push(`import './${backPaths.join('/')}/${component}/${component}';`);
+          } else if (localNamespaces.includes(namespace)) {
+            imports.push(`import './${backPaths.join('/')}/${namespace}/${component}/${component}';`);
+          } else if (externalNamespaces.has(namespace)) {
+            backPaths.push('..'); // src
+            backPaths.push('..'); // components
+            backPaths.push('..'); // node_modules
+            const pkg = externalNamespaces.get(namespace);
+            imports.push(`import './${backPaths.join('/')}/${nodeModulesDir}/${pkg}/${namespace}/${component}/${component}';`);
+          } else {
+            console.log(red(`Unable to find namespace folder "${namespace}". Possibly missing 'external' in element.config.ts`));
+            process.exit();
+          }
+        });
+        imports.push(`export default \`${contents}\`;`);
+        return {
+          contents: imports.join('\n'),
+          loader: 'js',
+        };
       });
-      imports.push(`export default \`${contents}\`;`);
-      return {
-        contents: imports.join('\n'),
-        loader: 'js',
-      };
-    });
-  },
-};
+    },
+  };
+}