@pictogrammers/element-esbuild 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pictogrammers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,50 @@
+# Element-esbuild
+
+Element [esbuild](https://esbuild.github.io/) tooling for developing Web Components with the [Element](https://github.com/Pictogrammers/Element/) utility.
+
+## Features
+
+- Application - Bundle a single application
+- Components - Bundle a shared component library
+  - `__examples__` components map to the library
+
+Default folder structure for both:
+
+- `src/index.html` - optional
+- `src/favicon.svg` - optional
+- `src/components/*` - required
+  - `namespace/` - required
+    - `app/app.ts` - required for app
+      - `__examples__`
+        - `basic/basic.ts` - for component library
+
+## `element.config.ts`
+
+Example configuration for a app.
+
+```typescript
+export default {
+  // root hello/app/app.ts
+  namespace: 'hello', // for applications
+}
+```
+
+Example configuration for a component library.
+
+```typescript
+export default {
+  repo: 'https://...',
+  navigation: [{
+    label: 'Components',
+    // default group
+  }, {
+    label: 'Overlays',
+    extends: ['MyOverlay'], // group all components extend class
+    include: ['MyOverlay'], // also include MyOverlay component
+    exclude: ['MyExclude'],
+    namespaces: ['my'], // filter to only my-* components
+  }],
+}
+```
+
+Leaving off the `namespace` will treat the repo as a component library. Each component will be built individually instead of a single application. The component's `__examples__` folders will render as demo.

package/bin/element-build.ts

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+// Build
+console.log('build');
+
+// import { build } from 'esbuild';
+/*
+build({
+  entryPoints,
+  bundle: true,
+  platform: 'browser',
+  outfile: './dist/main.js',
+  sourcemap: true,
+  target: 'esnext',
+  loader: {
+    '.html': 'text',
+    '.css': 'text'
+  },
+}).catch((err) => {
+  process.stderr.write(err.stderr);
+  process.exit(1);
+});
+*/

package/bin/element-publish.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+// Publish
+console.log('publish');

package/bin/element-start.ts

@@ -0,0 +1,299 @@
+#!/usr/bin/env node
+
+import { 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 { fileExists } from '../scripts/fileExists.ts';
+import { folderExists } from '../scripts/folderExists.ts';
+import { playgroundPlugin } from '../scripts/playgroundPlugin.ts';
+import { htmlDependentsPlugin } from '../scripts/htmlDependentsPlugin.ts';
+import { rebuildNotifyPlugin } from '../scripts/rebuildNotifyPlugin.ts';
+
+const plugins = [htmlDependentsPlugin, rebuildNotifyPlugin];
+
+const bold = (text: string) => `\x1b[1m${text}\x1b[0m`;
+const green = (text: string) => `\x1b[32m${text}\x1b[0m`;
+const red = (text: string) => `\x1b[31m${text}\x1b[0m`;
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const defaultDir = join(__dirname, '..', 'default');
+const configFile = 'element.config.ts';
+const rootDir = process.cwd();
+const publishDir = 'publish';
+const fullConfigPath = pathToFileURL(configFile);
+if (!(await fileExists(configFile))) {
+  console.log(red('Missing element.config.ts in root.'), 'Add with content:');
+  console.log('export default {');
+  console.log(`  namespace: 'hello',`);
+  console.log('}');
+  process.exit();
+}
+const config = await import(fullConfigPath.href);
+
+const {
+  namespace,
+  title,
+  navigation,
+  repo,
+  repoComponent,
+} = config.default;
+const distDir = 'dist';
+const srcDir = 'src';
+const componentsDir = 'components';
+
+const entryPoints: string[] = [];
+if (namespace) {
+  console.log(green('Building app...'));
+  entryPoints.push(`./${srcDir}/${componentsDir}/${namespace}/app/app.ts`);
+  // Handle index.html
+  const indexFile = 'index.html';
+  if (await fileExists(join(rootDir, srcDir, indexFile))) {
+    await copyFile(
+      join(rootDir, srcDir, indexFile),
+      join(rootDir, distDir, indexFile)
+    );
+  } else {
+    let indexContent = await readFile(join(defaultDir, indexFile), 'utf8');
+    indexContent = indexContent.replace(
+      '<title>Default</title>',
+      `<title>${title ?? 'Default'}</title>`
+    );
+    indexContent = indexContent.replace(
+      '<namespace-app></namespace-app>',
+      `<${namespace}-app></${namespace}-app>`
+    );
+    await writeFile(join(rootDir, distDir, indexFile), indexContent);
+  }
+  // Handle favicon.svg
+  const faviconSvg = 'favicon.svg';
+  if (await fileExists(join(rootDir, srcDir, faviconSvg))) {
+    await copyFile(
+      join(rootDir, srcDir, faviconSvg),
+      join(rootDir, distDir, faviconSvg)
+    );
+  } else {
+    await copyFile(
+      join(defaultDir, faviconSvg),
+      join(rootDir, distDir, faviconSvg)
+    );
+  }
+} else {
+  console.log(green('Building components...'));
+  if (!(await folderExists(join(srcDir, componentsDir)))) {
+    console.log(red('Missing required "src/components" directory.'))
+    process.exit();
+  }
+  const playgroundFile = 'playground.html';
+  const indexFile = 'index.html';
+  entryPoints.push('playground-entry');
+  plugins.push(
+    playgroundPlugin({
+      after: async (namespaces: any[]) => {
+        let indexContent = '';
+        if (await fileExists(join(rootDir, srcDir, indexFile))) {
+          indexContent = await readFile(join(rootDir, srcDir, indexFile), 'utf8');
+        } else {
+          indexContent = await readFile(join(defaultDir, playgroundFile), 'utf8');
+        }
+        indexContent = indexContent.replace(
+          '<title>Default</title>',
+          `<title>${title ?? 'Default'}</title>`
+        );
+        indexContent = indexContent.replace(
+          '<h1>Default</h1>',
+          `<h1>${title ?? 'Default'}</h1>`
+        );
+        const navItems = structuredClone(navigation ?? []);
+        for (let navItem of navItems) {
+            navItem.items = [];
+        }
+        let defaultItem;
+        if (navItems.length === 0) {
+          defaultItem = { label: 'Components', items: [] };
+          navItems.push(defaultItem);
+        } else {
+          defaultItem = navItems.find((x: any) => !x.extends && !x.components && !x.namespaces);
+          if (!defaultItem) {
+            defaultItem = { label: 'Other', items: [] };
+            navItems.push(defaultItem);
+          }
+        }
+        const componentMap = new Map();
+        // Loop and organize into lists
+        namespaces.forEach(({ components }: any) => {
+          components.forEach(({ component, namespace, tag, readme, examples, className, classExtends }: any)  => {
+            // Front end data
+            componentMap.set(className, {
+              className, // MyComponent
+              classExtends, // MyModal
+              component, // component
+              namespace, // my
+              tag, // my-component
+              readme, // # My Component
+              examples: examples.map((example: any) => example.className)
+            });
+            examples.forEach((example: any) => {
+              componentMap.set(example.className, {
+                className: example.className, // XMyComponentBasic
+                classExtends: example.classExtends, // HtmlElement
+                component: example.component, // myComponentBasic
+                namespace: example.namespace, // x
+                tag: example.tag, // x-my-component-basic
+                example: example.example, // Basic
+              });
+            });
+            // Quick insert any direct includes
+            for (let navItem of navItems) {
+              if (navItem.include && navItem.include.includes(className)) {
+                navItem.items.push({
+                  namespace,
+                  component,
+                  className,
+                  tag,
+                });
+                return;
+              }
+            }
+            // Move on to any other nav groups
+            for (let navItem of navItems) {
+              // skip default nav group
+              if (navItem === defaultItem) {
+                continue;
+              }
+              // ignore if excluded
+              if (navItem.exclude && navItem.exclude.includes(className)) {
+                continue;
+              }
+              // ignore if not in namespace
+              if (navItem.namespaces && !navItem.namespaces.includes(namespace)) {
+                continue;
+              }
+              // ignore if not extending the required class
+              if (navItem.extends && !navItem.extends.includes(classExtends)) {
+                continue;
+              }
+              navItem.items.push({
+                namespace,
+                component,
+                className,
+                tag,
+              });
+              return;
+            }
+            defaultItem.items.push({
+              namespace,
+              component,
+              examples,
+              className,
+              tag,
+            });
+          });
+        });
+        // Replace left nav
+        indexContent = indexContent.replace(/([ ]*)<!-- \[Navigation\] -->/, (match: any, indent: any) => {
+          return navItems.map(({ label, items }: any) => {
+            return [
+              indent,
+              `<div>${label}</div>`,
+              '<ul>',
+              items.map(({component, namespace, tag, className}: any) => {
+                return [
+                  `<li data-tag="${tag}" data-class-name="${className}" data-component="${component}"><a href="#${tag}">${component}</a></li>`
+                ].join(`\n${indent}`);
+              }).join(`\n${indent}`),
+              '</ul>'
+            ].join(`\n${indent}`)
+          }).join(`\n${indent}`);
+        });
+        // Repo
+        if (repo) {
+          const github = 'M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z';
+          const generic = 'M6,2H18A2,2 0 0,1 20,4V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2M12.75,13.5C15.5,13.5 16.24,11.47 16.43,10.4C17.34,10.11 18,9.26 18,8.25C18,7 17,6 15.75,6C14.5,6 13.5,7 13.5,8.25C13.5,9.19 14.07,10 14.89,10.33C14.67,11 14,12 12,12C10.62,12 9.66,12.35 9,12.84V8.87C9.87,8.56 10.5,7.73 10.5,6.75C10.5,5.5 9.5,4.5 8.25,4.5C7,4.5 6,5.5 6,6.75C6,7.73 6.63,8.56 7.5,8.87V15.13C6.63,15.44 6,16.27 6,17.25C6,18.5 7,19.5 8.25,19.5C9.5,19.5 10.5,18.5 10.5,17.25C10.5,16.32 9.94,15.5 9.13,15.18C9.41,14.5 10.23,13.5 12.75,13.5M8.25,16.5A0.75,0.75 0 0,1 9,17.25A0.75,0.75 0 0,1 8.25,18A0.75,0.75 0 0,1 7.5,17.25A0.75,0.75 0 0,1 8.25,16.5M8.25,6A0.75,0.75 0 0,1 9,6.75A0.75,0.75 0 0,1 8.25,7.5A0.75,0.75 0 0,1 7.5,6.75A0.75,0.75 0 0,1 8.25,6M15.75,7.5A0.75,0.75 0 0,1 16.5,8.25A0.75,0.75 0 0,1 15.75,9A0.75,0.75 0 0,1 15,8.25A0.75,0.75 0 0,1 15.75,7.5Z';
+          const repoIcon = repo.includes('github.com') ? github : generic;
+          indexContent = indexContent.replace(/([ ]*)<!-- \[Repo\] -->/, (match: any, indent: any) => {
+            return [
+              indent,
+              `<a href="${repo}">`,
+              '  <svg viewBox="0 0 24 24">',
+              `    <path fill="currentColor" d="${repoIcon}" />`,
+              '  </svg>',
+              '  <span>View Repo</span>',
+              '</a>'
+            ].join(`\n${indent}`)
+          });
+          indexContent = indexContent.replace(/const repo = '';/, (match: any) => {
+            return `const repo = '${repo}';`;
+          });
+          indexContent = indexContent.replace(/const repoComponent = '';/, (match: any) => {
+            return `const repoComponent = '${repoComponent.replace(/\$repo/g, repo)}';`;
+          });
+          indexContent = indexContent.replace(/const repoIcon = '';/, (match: any) => {
+            return `const repoIcon = '${repoIcon}';`;
+          });
+        }
+        // Components
+        const classNames = [...componentMap.keys()];
+        indexContent = indexContent.replace(/([ ]*)const componentMap = new Map\(\);/, (match: any, indent: any) => {
+          return [
+            `${indent}const componentMap = new Map();`,
+            ...classNames.map((className: any) => {
+              const data = componentMap.get(className);
+              return `componentMap.set('${className}', ${JSON.stringify(data)});`;
+            })
+          ].join(`${indent}\n`)
+        });
+        // Components
+        indexContent = indexContent.replace(/([ ]*)const navigation = \[\];/, (match: any, indent: any) => {
+          return`${indent}const navigation = ${JSON.stringify(navItems, null, '  ')};`;
+        });
+        await writeFile(join(rootDir, distDir, indexFile), indexContent);
+      }
+    })
+  );
+}
+
+let ctx = await context({
+  entryPoints,
+  outfile: `./${distDir}/main.js`,
+  bundle: true,
+  format: 'esm', // Use ES Modules
+  target: 'es2024', // Target ES6 syntax
+  minify: false,
+  loader: {
+    '.css': 'text'
+  },
+  plugins,
+});
+
+// initial rebuild
+await ctx.rebuild();
+
+// any change to src should trigger rebuild
+const watcher = chokidar.watch('src', {
+  ignoreInitial: true, // Don't trigger on startup
+});
+
+watcher.on('all', async (event, path) => {
+  // Copy to publish folder for component projects
+  if (!namespace) {
+    const parts = path.split(sep);
+    if (parts.length > 4 && parts[0] === srcDir && parts[1] === componentsDir) {
+      console.log(`Copy "${parts.slice(2).join('/')}" to publish/*`);
+      await copyFile(join(rootDir, ...parts), join(rootDir, publishDir, ...parts.slice(2)));
+    }
+  }
+  try {
+    await ctx.rebuild();
+  } catch (e) {
+    console.error('Rebuild failed:', e);
+  }
+});
+
+let { port } = await ctx.serve({
+  servedir: distDir,
+});
+console.log(green('Dev server started at'), `localhost:${port}`);

package/default/favicon.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+    <style>
+    #main {
+        fill: #FFFFFF;
+    }
+    #square {
+        fill: #453C4F;
+    }
+    @media (prefers-color-scheme: dark) {
+        #main {
+            fill: #453C4F;
+        }
+        #square {
+            fill: #FFFFFF;
+        }
+    }
+    </style>
+    <rect id="square" x="2" y="2" width="60" height="60" rx="6" fill-opacity="0.9"/>
+    <path id="main" d="M 8,0L 56,0C 60.4183,0 64,3.58173 64,8L 64,56C 64,60.4183 60.4183,64 56,64L 8,64C 3.58172,64 0,60.4183 0,56L 0,8C 0,3.58173 3.58172,0 8,0 Z M 12,12.0001L 12,52.0001L 32,52.0002L 32,44.0003L 20,44.0001L 20,36.0001L 32,36.0002L 32,28.0003L 20,28.0001L 20,20.0001L 32,20.0002L 32,12.0003L 12,12.0001 Z M 40,12.0001L 40,52.0001L 48,52.0001L 48,12.0001L 40,12.0001 Z "/>
+</svg>

package/default/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="shortcut icon" type="image/svg" href="favicon.svg"/>
+  <title>Default</title>
+  <style>
+    :root {
+      --app-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    }
+    body {
+      margin: 0;
+      font-family: var(--app-font-family);
+    }
+  </style>
+  <script type="module" src="main.js" defer></script>
+</head>
+<body>
+  <namespace-app></namespace-app>
+</body>
+</html>

package/default/playground.html

@@ -0,0 +1,575 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="favicon.svg" type="image/svg+xml" sizes="any" />
+  <title>Default</title>
+  <style>
+    body {
+      margin: 0;
+      font-family: system-ui, sans-serif;
+    }
+
+    .wrapper {
+      display: grid;
+      grid-template-columns: 12rem calc(100% - 12rem);
+      grid-template-rows: 3rem auto;
+    }
+
+    code {
+      font-family: 'Consolas', 'Courier New', Courier, monospace;
+      border: 1px solid #ddd;
+      padding: 0.15rem 0.25rem;
+      border-radius: 0.25rem;
+    }
+
+    header {
+      display: flex;
+      grid-row: 1;
+      grid-column: 1 / span 2;
+      background: #453C4F;
+      color: #FFF;
+      align-items: center;
+    }
+
+    header>svg {
+      display: inline-flex;
+      width: 1.5rem;
+      height: 1.5rem;
+      margin: 0 0.75rem 0 1rem;
+    }
+
+    header>h1 {
+      display: inline-flex;
+      color: #FFF;
+      font-size: 1.5rem;
+      margin: 0;
+      font-weight: normal;
+    }
+
+    header>span {
+      flex: 1;
+    }
+
+    header>a {
+      display: inline-flex;
+      border: 1px solid #FFF;
+      padding: 0.25rem 0.5rem;
+      flex-direction: row;
+      border-radius: 0.25rem;
+      color: #FFF;
+      float: right;
+      text-decoration: none;
+      margin-right: 1rem;
+      align-items: center;
+    }
+
+    header>a>svg {
+      display: inline-flex;
+      width: 1.5rem;
+      height: 1.5rem;
+      margin: 0 0.5rem 0 0;
+    }
+
+    header>a:hover {
+      background: #FFF;
+      color: #453C4F;
+    }
+
+    header select {
+      padding: 0.375rem 0.25rem;
+      border-radius: 0.25rem;
+      border: 1px solid #FFF;
+      background: transparent;
+      color: #FFF;
+      margin-right: 0.5rem;
+      font-size: 1rem;
+    }
+
+    header select option {
+      color: #222;
+      background: #FFF;
+    }
+
+    aside {
+      grid-row: 2;
+      grid-column: 1;
+      padding: 1.5rem 1rem 1rem 1rem;
+    }
+
+    aside>div {
+      font-weight: bold;
+    }
+
+    aside>ul {
+      list-style: none;
+      padding: 0 0 0 0.5rem;
+      line-height: 1.5rem;
+      margin: 0.25rem 0 0.5rem 0;
+    }
+
+    aside a {
+      position: relative;
+      color: #414F56;
+      text-decoration: none;
+    }
+
+    aside a:hover {
+      text-decoration: underline;
+    }
+
+    main {
+      grid-row: 2;
+      grid-column: 2;
+      padding: 0 1rem 1rem 1rem;
+    }
+
+    main>p {
+      line-height: 1.6rem;
+    }
+
+    main>section {
+      padding: 1.5rem 1rem 1rem 1rem;
+      border-radius: 0.5rem;
+      border: 1px solid #ccc;
+      margin-top: 2rem;
+    }
+
+    main>h2 {
+      position: relative;
+      margin: 1.25rem 0 0.5rem 0;
+      border-bottom: 1px solid #ddd;
+      padding-bottom: 0.5rem;
+      font-size: 1.5rem;
+      font-weight: normal;
+    }
+
+    main>h2.open {
+      border-bottom: none;
+    }
+
+    main>h2>a {
+      text-decoration: none;
+      color: #aaa;
+      margin: 0 0 0 0.5rem;
+    }
+
+    main>h2>a:hover {
+      color: #453C4F;
+    }
+
+    main>h2>a>svg {
+      width: 24px;
+      height: 24px;
+      vertical-align: middle;
+      margin-top: -2px;
+    }
+
+    main>h2>button {
+      margin: 0;
+      border-radius: 0.25rem 0.25rem 0 0;
+      border: 1px solid #ccc;
+      background: #fff;
+      padding: 0.25rem 0.5rem;
+      position: absolute;
+      bottom: -1px;
+      right: 0.5rem;
+      color: #453C4F;
+      outline: none;
+    }
+
+    main>h2>button.active,
+    main>h2>button:focus,
+    main>h2>button:hover {
+      background: #453C4F;
+      border-top-color: #453C4F;
+      border-right-color: #453C4F;
+      border-bottom-color: transparent;
+      border-left-color: #453C4F;
+      color: #fff;
+    }
+
+    main>h2>button:focus::before {
+      pointer-events: none;
+      content: '';
+      position: absolute;
+      top: -1px;
+      right: -1px;
+      bottom: -1px;
+      left: -1px;
+      border-radius: 0.25rem 0.25rem 0 0;
+      box-shadow: 0 0 0 3px var(--pg-focus-color, rgb(79, 143, 249, 0.6));
+    }
+
+    main>h2>button>svg {
+      width: 24px;
+      height: 24px;
+      vertical-align: middle;
+    }
+
+    main>h2>button+span.line {
+      display: none;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: -0.25rem;
+      height: 0.25rem;
+      background: transparent;
+      transition: background-color linear 0.2s;
+    }
+
+    main>h2>button:not(.active):focus+span.line,
+    main>h2>button:not(.active):hover+span.line {
+      display: block;
+      background: #453C4F;
+    }
+
+    main>h2>span.label {
+      padding: 0.75rem 0.5rem 0.5rem 0.25rem;
+      font-size: 1rem;
+      display: inline;
+      color: #aaa;
+      position: absolute;
+      right: 4rem;
+    }
+
+    main>div.markdown {
+      display: none;
+    }
+
+    main>div.markdown.show {
+      display: block;
+      border: 0.25rem solid #453C4F;
+      margin-top: -0.5rem;
+      padding: 0 1rem;
+      border-radius: 0.5rem;
+    }
+
+    main>section>h3 {
+      font-size: 1.25rem;
+      font-weight: normal;
+      padding: 0;
+      display: inline-block;
+      position: absolute;
+      margin: -2.5rem 0 0 1rem;
+    }
+
+    main>section>h3::before {
+      content: ' ';
+      background: #fff;
+      left: -1rem;
+      right: -1rem;
+      position: absolute;
+      border-radius: 0 0 0.5rem 0.5rem;
+      margin: 0;
+      height: 1rem;
+      border-bottom: 1px solid #ccc;
+      border-left: 1px solid #ccc;
+      border-right: 1px solid #ccc;
+      top: calc(1rem - 1px);
+    }
+
+    main>section>h3>span {
+      position: relative;
+    }
+
+    h1 small,
+    h2 small,
+    h3 small {
+      color: #999;
+      font-weight: normal;
+      font-size: 0.875rem;
+    }
+
+    .example {
+      vertical-align: top;
+      background: #F1F1F1;
+      border-radius: 0.25rem;
+      border: 1px dashed #222;
+      padding: 0.5rem;
+      margin-bottom: 0.5rem;
+      margin-right: 1rem;
+      box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1) inset;
+    }
+
+    .example-flex {
+      display: flex;
+    }
+
+    body>button {
+      border: 1px solid #DDD;
+      background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
+      color: #24292e;
+      border: 1px solid rgba(27, 31, 35, .2);
+      border-radius: .25em;
+      padding: 0.25rem 0.4rem 0.2rem 0.4rem;
+    }
+
+    body>button:hover {
+      background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
+      background-position: -.5em;
+      border-color: rgba(27, 31, 35, .35);
+    }
+
+    #search {
+      font-family: system-ui;
+      padding: 0.25rem 0.5rem 0.25rem 2.0rem;
+      border: 2px solid #453C4F;
+      border-radius: 0.25rem;
+      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" fill="rgb(69 60 79)" /></svg>');
+      background-repeat: no-repeat;
+      background-position: 0.25rem 50%;
+      background-size: 1.5rem;
+      margin-bottom: 0.5rem;
+      width: calc(100% - 2.5rem);
+    }
+
+    #search:focus {
+      box-shadow: 0 0 0 3px rgb(79, 143, 249, 0.5);
+    }
+
+    .hide {
+      display: none;
+    }
+  </style>
+  <script type="module" src="main.js" defer></script>
+</head>
+
+<body>
+  <template id="templateInfo">
+    <p>This page is generated from <code>npm start</code>. To render only specific components use
+      <code>npm start c-button</code>.
+    </p>
+  </template>
+  <template id="templateComponent">
+    <h2>
+      <span data-title></span>
+      <a data-title title="" href="">
+        <svg viewBox="0 0 24 24">
+          <path fill="currentColor"
+            d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z">
+        </svg>
+      </a>
+      <a data-repo title="View Code" href="" target="_blank">
+        <svg viewBox="0 0 24 24">
+          <path fill="currentColor"
+            d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z">
+        </svg>
+      </a>
+      <span data-extends class="label"></span>
+      <button data-readme title="Expand Documentation">
+        <svg viewBox="0 0 24 24">
+          <path fill="currentColor"
+            d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z">
+        </svg>
+      </button>
+      <span class="line"></span>
+    </h2>
+    <div data-container class="markdown"></div>
+  </template>
+  <template id="templateExample">
+    <section>
+      <h3><span></span></h3>
+    </section>
+  </template>
+  <script>
+    const repo = '';
+    const repoIcon = '';
+    const repoComponent = '';
+    // Contains all component meta data
+    // [MyComponent, {
+    //   name: 'MyComponent',
+    //   tag: 'my-component',
+    //   examples: [{
+    //     name: 'XMyComponentBasic',
+    //     tag: 'x-my-component-basic',
+    //     label: 'Basic',
+    //   }]
+    // }]
+    const componentMap = new Map();
+    // Navigation
+    const navigation = [];
+    // Stuff
+    function kebabToPascalRegex(kebabString) {
+      return kebabString.replace(/(^|\W+)(\w)/g, (match, sep, char) => {
+        return char.toUpperCase();
+      });
+    }
+    const markdownCache = {};
+    function createComponent({ tag, className, namespace, component, examples, classExtends, readme }) {
+      const template = document.getElementById('templateComponent');
+      const $template = document.importNode(template.content, true);
+      $template.querySelector('h2>span[data-title]').textContent = tag;
+      $template.querySelector('h2>a[data-title]').title = `Link to ${tag}`;
+      $template.querySelector('h2>a[data-title]').href = `#${tag}`;
+      $template.querySelector('h2>a[data-title]').id = tag;
+      $template.querySelector('h2>span[data-extends]').textContent = classExtends;
+      const normalizeRepoComponent = repoComponent.replace(/\$namespace/, namespace)
+        .replace(/\$component/, component);
+      $template.querySelector('h2>a[data-repo]').href = normalizeRepoComponent;
+      const h2 = $template.querySelector('h2');
+      const button = $template.querySelector('button[data-readme]');
+      const container = $template.querySelector('div[data-container]');
+      button.addEventListener('click', () => {
+         // Create
+        if (!(className in markdownCache)) {
+          // todo: embed always!!!
+          var element = document.createElement('pg-markdown');
+          container.appendChild(element);
+          element.text = readme ? readme.replace(/#[^\r\n]+/, '') : 'Missing README.md';
+          markdownCache[className] = false;
+        }
+        // Flip
+        markdownCache[className] = !markdownCache[className];
+        h2.classList.toggle('open', markdownCache[className]);
+        button.classList.toggle('active', markdownCache[className]);
+        button.title = `${markdownCache[className] ? 'Collapse' : 'Expand'} Documentation`;
+        container.classList.toggle('show', markdownCache[className]);
+      });
+      return $template;
+    }
+    function createExample({ tag, example }) {
+      const template = document.getElementById('templateExample');
+      const $template = document.importNode(template.content, true);
+      $template.querySelector('h3>span').textContent = example;
+      const $example = document.createElement(tag);
+      $template.querySelector('section').appendChild($example);
+      return $template;
+    }
+    function init() {
+      // elements and templates
+      const $main = document.querySelector('main');
+      const templateInfo = document.getElementById('templateInfo');
+      const $templateInfo = document.importNode(templateInfo.content, true);
+      // Clear main
+      while ($main.firstChild) {
+        $main.removeChild($main.firstChild);
+      }
+      // If linking to a single component render 1 component
+      const hash = window.location.hash;
+      const className = kebabToPascalRegex(hash);
+      if (hash && componentMap.has(className)) {
+        const componentMeta = componentMap.get(className);
+        $main.appendChild(createComponent(componentMeta));
+        componentMeta.examples.forEach((exampleClassName) => {
+          const exampleComponentMeta = componentMap.get(exampleClassName);
+          $main.appendChild(createExample(exampleComponentMeta));
+        });
+        return;
+      }
+      // Render dev tool info
+      $main.appendChild($templateInfo);
+      // Render all components
+      navigation.forEach(({ items }) => {
+        items.forEach(({ className }) => {
+          const componentMeta = componentMap.get(className);
+          $main.appendChild(createComponent(componentMeta));
+          componentMeta.examples.forEach((exampleClassName) => {
+            const exampleComponentMeta = componentMap.get(exampleClassName);
+            $main.appendChild(createExample(exampleComponentMeta));
+          });
+        });
+      });
+    }
+    function debounce(func, wait) {
+      let timeout; // This variable is maintained using closure
+
+      return function (...args) {
+        const context = this;
+        // Clear the previous timeout if the function is called again
+        clearTimeout(timeout);
+        // Set a new timeout
+        timeout = setTimeout(() => {
+          func.apply(context, args);
+        }, wait);
+      };
+    }
+    window.addEventListener('load', () => {
+      init();
+      window.addEventListener('hashchange', function() {
+        init();
+      });
+      const listItems = [...document.querySelectorAll('aside li')];
+      const links = [...document.querySelectorAll('aside a')];
+      links.forEach((link) => {
+        link.addEventListener('click', (e) => {
+          window.scrollTo({
+            top: 0,
+            behavior: 'instant',
+          });
+        });
+      });
+      /*
+      const themeSelect = document.getElementById('theme');
+      function setTheme(value) {
+        localStorage.setItem('theme', value);
+        if (value !== '') {
+          const s = document.createElement('link');
+          s.setAttribute('rel', 'stylesheet');
+          s.setAttribute('type', 'text/css');
+          s.setAttribute('href', './theme-ui3.css');
+          document.head.appendChild(s);
+        }
+      }
+      themeSelect.addEventListener('change', (e) => {
+        const value = e.target.value;
+        setTheme(value);
+        window.location.reload();
+      });
+      const themeCache = localStorage.getItem('theme');
+      if (themeCache !== null) {
+        setTheme(themeCache);
+        themeSelect.value = themeCache;
+      }*/
+      const debounceSearch = debounce((e) => {
+        const query = e.target.value.toLowerCase();
+        // Hide and show non-matches
+        listItems.forEach((item) => {
+          if (query === '') {
+            item.classList.toggle('hide', false);
+            return;
+          }
+          const { className, tag, component } = item.dataset;
+          let visible = false;
+          if (className.toLowerCase().includes(query)) {
+            visible = true;
+          }
+          if (tag.toLowerCase().includes(query)) {
+            visible = true;
+          }
+          if (component.toLowerCase().includes(query)) {
+            visible = true;
+          }
+          item.classList.toggle('hide', !visible);
+        });
+      }, 300);
+      document.getElementById('search').addEventListener('input', debounceSearch);
+      document.getElementById('search').focus();
+    });
+  </script>
+  <div class="wrapper">
+    <header>
+      <svg viewBox="0 0 64 64">
+        <path fill="currentColor"
+          d="M 8,0L 56,0C 60.4183,0 64,3.58173 64,8L 64,56C 64,60.4183 60.4183,64 56,64L 8,64C 3.58172,64 0,60.4183 0,56L 0,8C 0,3.58173 3.58172,0 8,0 Z M 8,44.0001L 14,44.0001L 14,32.0001L 20,32.0001C 26.6274,32.0001 32,26.6275 32,20.0001C 32,13.3726 26.6274,8.00006 20,8.00006L 8,8.00003L 8,44.0001 Z M 20,26.0003L 14,26.0003L 14,14.0003L 20,14.0003C 23.3137,14.0003 26,16.6866 26,20.0003C 26,23.314 23.3137,26.0003 20,26.0003 Z M 44,44.0001L 45.9999,44.0003C 48.2091,44.0003 49.9999,42.2094 49.9999,40.0003L 50,44.0001C 50,49.5231 45.5228,54.0002 40,54.0002C 36.085,54.0002 32.6955,51.7505 31.0537,48.4732L 25.686,51.1571C 28.3128,56.4006 33.736,60.0002 40,60.0002C 48.8365,60.0002 56,52.8368 56,44.0001L 56,24.0001C 56,21.791 54.2092,20.0001 52,20.0001L 44,20.0001C 37.3726,20.0001 32,25.3727 32,32.0001C 32,38.6275 37.3726,44.0001 44,44.0001 Z M 50,26L 49.9999,38.0001L 44,38C 40.6863,38 38,35.3137 38,32C 38,28.6863 40.6863,26 44,26L 50,26 Z" />
+      </svg>
+      <h1>Default</h1>
+      <span></span>
+      <!--<label>
+        <select id="theme">
+          <option value="">None</option>
+          <option value="ui3">UI3</option>
+        </select>
+      </label>-->
+      <!-- [Repo] -->
+    </header>
+    <aside>
+      <input type="text" id="search" autocomplete="off" autocorrect="off" />
+      <!-- [Navigation] -->
+    </aside>
+    <main></main>
+  </div>
+</body>
+
+</html>

package/default/playgroundLogo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
+    <rect id="square" x="2" y="2" width="60" height="60" rx="6" fill-opacity="0.9"/>
+    <path id="main" d="M 8,0L 56,0C 60.4183,0 64,3.58173 64,8L 64,56C 64,60.4183 60.4183,64 56,64L 8,64C 3.58172,64 0,60.4183 0,56L 0,8C 0,3.58173 3.58172,0 8,0 Z M 12,12.0001L 12,52.0001L 32,52.0002L 32,44.0003L 20,44.0001L 20,36.0001L 32,36.0002L 32,28.0003L 20,28.0001L 20,20.0001L 32,20.0002L 32,12.0003L 12,12.0001 Z M 40,12.0001L 40,52.0001L 48,52.0001L 48,12.0001L 40,12.0001 Z "/>
+</svg>

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@pictogrammers/element-esbuild",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "Element esbuild",
+  "homepage": "https://github.com/Pictogrammers/Element-esbuild#readme",
+  "bugs": {
+    "url": "https://github.com/Pictogrammers/Element-esbuild/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Pictogrammers/Element-esbuild.git"
+  },
+  "license": "MIT",
+  "author": "Austin Andrews",
+  "main": "index.ts",
+  "bin": {
+    "element-start": "./bin/element-start.ts",
+    "element-build": "./bin/element-build.ts",
+    "element-publish": "./bin/element-publish.ts"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "esbuild": "0.27.2",
+    "esbuild-html-plugin": "^1.1.0",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "chokidar": "^5.0.0"
+  }
+}

package/scripts/camelToDash.ts

@@ -0,0 +1,3 @@
+export function camelToDash(str: string) {
+  return str.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase();
+}

package/scripts/capitalizeFirstChracter.ts

@@ -0,0 +1,6 @@
+export function capitalizeFirstCharacter(str: string): string {
+  if (!str) {
+    return str; // Handle empty or null strings
+  }
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

package/scripts/dashToCamel.ts

@@ -0,0 +1,3 @@
+export function dashToCamel(str: string) {
+  return str.replace(/-([a-z])/g, m => m[1].toUpperCase());
+}

package/scripts/fileExists.ts

@@ -0,0 +1,11 @@
+import { access } from 'node:fs/promises';
+import { constants } from 'node:fs';
+
+export async function fileExists(filePath: string): Promise<boolean> {
+  try {
+    await access(filePath, constants.F_OK);
+    return true;
+  } catch (error) {
+    return false;
+  }
+}

package/scripts/folderExists.ts

@@ -0,0 +1,14 @@
+import { access } from 'node:fs/promises';
+import { constants } from 'node:fs';
+
+export async function folderExists(folderPath: string): Promise<boolean> {
+  try {
+    // Check if the path exists (F_OK) and Node.js can access it
+    await access(folderPath, constants.F_OK);
+    // If no error is thrown, the folder exists
+    return true; 
+  } catch (error) {
+    // If an error occurs, it generally means the folder does not exist or permissions are insufficient
+    return false;
+  }
+}

package/scripts/getDirectories.ts

@@ -0,0 +1,20 @@
+import {readdir}  from 'node:fs/promises';
+import { join } from 'node:path';
+
+export async function getDirectories(dirPath: string) {
+  const directories: string[] = [];
+  try {
+    // Read the directory and get dirent objects (which include file type information)
+    const entries = await readdir(dirPath, { withFileTypes: true });
+    // Loop through each entry
+    for (const entry of entries) {
+      // Check if the entry is a directory
+      if (entry.isDirectory()) {
+        directories.push(entry.name);
+      }
+    }
+  } catch (err) {
+    console.error('Error reading directory:', err);
+  }
+  return directories;
+}

package/scripts/htmlDependentsPlugin.ts

@@ -0,0 +1,45 @@
+import { sep } from 'node:path';
+import { readFile } from "node:fs/promises";
+
+import { dashToCamel } from "./dashToCamel.ts";
+
+const root = process.cwd();
+const rootDepth = root.split(sep).length;
+
+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}';`);
+        }
+      });
+      imports.push(`export default \`${contents}\`;`);
+      return {
+        contents: imports.join('\n'),
+        loader: 'js',
+      };
+    });
+  },
+};

package/scripts/playgroundPlugin.ts

@@ -0,0 +1,107 @@
+import { join, sep, dirname } from 'node:path';
+
+import { getDirectories } from './getDirectories.ts';
+import { fileExists } from './fileExists.ts';
+import { folderExists } from './folderExists.ts';
+import { readFile, writeFile } from 'node:fs/promises';
+import { capitalizeFirstCharacter } from './capitalizeFirstChracter.ts';
+import { camelToDash } from './camelToDash.ts';
+
+const red = (text: string) => `\x1b[31m${text}\x1b[0m`;
+
+const rootDir = process.cwd();
+const distDir = 'dist';
+const srcDir = 'src';
+const componentsDir = 'components';
+
+export function playgroundPlugin(options: any) {
+  return {
+    name: 'playground-plugin',
+    setup(build: any) {
+      const entryPointName = 'playground-entry';
+      const virtualNamespace = 'playground-module'; // Use a custom namespace
+
+      // 1. Intercept the entry point resolution
+      build.onResolve({ filter: new RegExp(`^${entryPointName}$`) }, (args: any) => {
+        // Return a path with the custom namespace
+        return {
+          path: entryPointName,
+          namespace: virtualNamespace,
+        };
+      });
+
+      // 2. Load the virtual module content
+      build.onLoad({ filter: /.*/, namespace: virtualNamespace }, async (args: any) => {
+        const entryPoints: string[] = [];
+        const namespaces = await getDirectories(join(srcDir, componentsDir));
+        if (namespaces.length === 0) {
+          console.log(red('Missing at least 1 namespace folder under "src/components/"'));
+          process.exit();
+        }
+        const meta = [];
+        for (let namespace of namespaces) {
+          const metaNamespace = {
+            namespace,
+            components: [],
+          } as any;
+          meta.push(metaNamespace);
+          const namespaceDir = join(srcDir, componentsDir, namespace);
+          const components = await getDirectories(namespaceDir);
+          for (let component of components) {
+            if (await fileExists(join(srcDir, componentsDir, namespace, component, `${component}.ts`))) {
+              let readme = '';
+              if (await fileExists(join(srcDir, componentsDir, namespace, component, 'README.md'))) {
+                // todo: memory?
+                readme = await readFile(join(srcDir, componentsDir, namespace, component, 'README.md'), 'utf8');
+              }
+              const metaComponent = {
+                namespace,
+                component,
+                tag: `${namespace}-${camelToDash(component)}`,
+                examples: [] as any[],
+                className: '',
+                classExtends: '',
+                readme,
+              };
+              entryPoints.push(`import '${componentsDir}/${namespace}/${component}/${component}';`);
+              if (await folderExists(join(namespaceDir, component, '__examples__'))) {
+                const examples =  await getDirectories(join(namespaceDir, component, '__examples__'));
+                for (let example of examples) {
+                  if (await fileExists(join(namespaceDir, component, '__examples__', example, `${example}.ts`))) {
+                    entryPoints.push(`import '${componentsDir}/${namespace}/${component}/__examples__/${example}/${example}';`);
+                    metaComponent.examples.push({
+                      namespace,
+                      component,
+                      example,
+                      tag: `x-${namespace}-${camelToDash(component)}-${camelToDash(example)}`,
+                      className: `X${capitalizeFirstCharacter(namespace)}${capitalizeFirstCharacter(component)}${capitalizeFirstCharacter(example)}`,
+                    });
+                  } else {
+                    console.log(red(`Missing ${componentsDir}/${namespace}/${component}/__examples__/${example}/${example}.ts`));
+                  }
+                }
+              }
+              // ToDo: Lazy, probably way better ways to do this in ESBuild!!!
+              const data = await readFile(join(srcDir, componentsDir, namespace, component, `${component}.ts`), 'utf8');
+              const matches = data.match(/class (\w+) extends (\w+)/);
+              if (!matches) {
+                console.log(red(`Component "${namespace}-${component}" must extend HtmlElement or base class`));
+                process.exit();
+              }
+              metaComponent.className = matches[1];
+              metaComponent.classExtends = matches[2];
+              metaNamespace.components.push(metaComponent);
+            }
+          }
+        }
+        // Update index.html in dist
+        options.after(meta);
+        // Define your virtual file content here
+        return {
+          contents: entryPoints.join('\n'),
+          resolveDir: join(process.cwd(), srcDir), 
+        };
+      });
+    },
+  };
+}

package/scripts/rebuildNotifyPlugin.ts

@@ -0,0 +1,15 @@
+const green = (text: string) => `\x1b[32m${text}\x1b[0m`;
+
+export const rebuildNotifyPlugin = {
+  name: 'rebuild-notify',
+  setup(build: any) {
+    build.onEnd((result: any) => {
+      if (result.errors.length > 0) {
+        console.error(`Build ended with ${result.errors.length} errors`);
+      } else {
+        console.log(green('Build succeeded!'));
+      }
+      // You can add logic here to restart a server, send a signal, etc.
+    });
+  },
+};