npm - @pure-ds/core - Versions diffs - 0.5.24 → 0.5.26 - Mend

@pure-ds/core 0.5.24 → 0.5.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/types/src/js/pds-core/pds-registry.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pds-registry.d.ts","sourceRoot":"","sources":["../../../../../src/js/pds-core/pds-registry.js"],"names":[],"mappings":"~~AA8EA~~,mCAA0C;~~AAzE1C~~;IAEI,cAAqB;IACrB;;;;;;MAMC;IAGH;;OAEG;IACH,oBAEC;IAED;;;OAGG;IACH,~~gCAKC~~;IAED;;;OAGG;IACH,wCAqBC;IAED;;OAEG;IACH,mBAEC;IAED;;OAEG;IACH,sBAEC;CACF"}
1	+ {"version":3,"file":"pds-registry.d.ts","sourceRoot":"","sources":["../../../../../src/js/pds-core/pds-registry.js"],"names":[],"mappings":"AA4EA,mCAA0C;AAvE1C;IAEI,cAAqB;IACrB;;;;;;MAMC;IAGH;;OAEG;IACH,oBAEC;IAED;;;OAGG;IACH,gCAGC;IAED;;;OAGG;IACH,wCAqBC;IAED;;OAEG;IACH,mBAEC;IAED;;OAEG;IACH,sBAEC;CACF"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@pure-ds/core",
   "shortname": "pds",
-  "version": "0.5.24",
+  "version": "0.5.26",
   "description": "Pure Design System - Why develop a Design System when you can generate one?",
   "repository": {
     "type": "git",

package/packages/pds-cli/bin/pds-bootstrap.js CHANGED Viewed

@@ -1,12 +1,14 @@
 #!/usr/bin/env node
-import { readFile, writeFile, mkdir, access, rename, rm } from 'fs/promises';
+import { readFile, writeFile, mkdir, access, rename, rm, copyFile, readdir } from 'fs/promises';
 import { existsSync } from 'fs';
 import path from 'path';
 import { spawn } from 'child_process';
-import { buildStarterPdsConfig } from './templates/starter-templates.js';
+import { fileURLToPath } from 'url';
 const projectRoot = process.cwd();
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const templateRoot = path.join(__dirname, 'templates', 'bootstrap');
 function log(message) {
   console.log(message);
@@ -29,6 +31,19 @@ async function writeFileIfMissing(filePath, content) {
   }
 }
+async function copyFileIfMissing(sourcePath, targetPath) {
+  try {
+    await access(targetPath);
+    log(`↪️  Skipping existing ${path.relative(projectRoot, targetPath)}`);
+    return false;
+  } catch {
+    await ensureDir(path.dirname(targetPath));
+    await copyFile(sourcePath, targetPath);
+    log(`✅ Created ${path.relative(projectRoot, targetPath)}`);
+    return true;
+  }
+}
 function getNpmCommand() {
   return process.platform === 'win32' ? 'npm.cmd' : 'npm';
 }
@@ -54,423 +69,48 @@ async function writePackageJson(pkgPath, pkg) {
   await writeFile(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
 }
-function buildIndexHtml({ version, generatedAt }) {
-  return `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Pure Design System</title>
-    <!-- PDS Styles -->
-    <link rel="stylesheet" href="/assets/css/app.css" />
-    <!-- Import Map for Lit components -->
-    <script type="importmap">
-      {
-        "imports": {
-          "#pds/lit": "/assets/js/lit.js"
-        }
-      }
-    </script>
-    <!-- Dev live-reload (safe in production, no-op without server) -->
-    <script type="module" src="/assets/js/dev-reload.js" defer></script>
-    <!-- App Script -->
-    <script type="module" src="/assets/js/app.js" defer></script>
-  </head>
-  <body class="container">
-    <header class="stack-sm">
-      <p class="auto-gen">Auto-generated by PDS ${version} at ${generatedAt}</p>
-    </header>
-    <main></main>
-    <footer class="text-sm text-muted">
-      <small>&copy; 2026 Pure Design System</small>
-    </footer>
-  </body>
-</html>
-`;
-}
-function buildDevReloadJs() {
-  return `const shouldConnect =
-  location.hostname === 'localhost' || location.hostname === '127.0.0.1';
-if (shouldConnect) {
-  const reloadPort = 4174;
-  const endpoint = 'http://localhost:' + reloadPort + '/events';
-  const source = new EventSource(endpoint);
-  source.onmessage = (event) => {
-    if (event.data === 'reload') {
-      location.reload();
-    }
-  };
-  source.onerror = () => {
-    source.close();
-  };
-}
-`;
-}
-function buildAppCss() {
-  return `html:not(.pds-ready) {
-  opacity: 0;
-}
-main {
-  margin: auto;
-}
-h1 {
-  background: linear-gradient(var(--gradient-angle, 135deg),
-    var(--color-primary-400),
-    var(--color-accent-400)
-  );
-  background-clip: text;
-  -webkit-background-clip: text;
-  color: transparent;
-}
-.container {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  height: 100dvh;
-  padding: 0;
-}
-header, footer {
-  padding: var(--spacing-4);
-}
-footer {
-  text-align: center;
+async function writeIndexFromTemplate(sourcePath, targetPath, { version, generatedAt }) {
+  const raw = await readFile(sourcePath, 'utf8');
+  const content = raw
+    .replaceAll('{{PDS_VERSION}}', version)
+    .replaceAll('{{PDS_GENERATED_AT}}', generatedAt);
+  await writeFileIfMissing(targetPath, content);
 }
-.auto-gen {
-  color: var(--color-text-muted);
-  font-size: var(--font-size-xs);
-}
+async function copyTemplateDirectory(sourceDir, targetDir, options) {
+  const entries = await readdir(sourceDir, { withFileTypes: true });
-#settings-btn {
-  position: fixed;
-  top: var(--spacing-4);
-  right: var(--spacing-4);
-}
-.hero {
-  padding: var(--spacing-8);
-  zoom: 1.15;
-  text-align: center;
-  border: var(--border-width-medium) solid transparent;
-  background: linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
-    linear-gradient(var(--gradient-angle, 135deg), var(--color-primary-400), var(--color-accent-400)) border-box;
-  max-width: var(--max-w-lg);
-  border-radius: var(--radius-lg);
-  border-width: 3px;
-}
+  for (const entry of entries) {
+    const sourcePath = path.join(sourceDir, entry.name);
+    const targetPath = path.join(targetDir, entry.name);
+    const relativePath = path.relative(templateRoot, sourcePath);
-.hero > div {
-  margin: var(--spacing-10) 0;
-}
-`;
-}
-function buildMyHome() {
-  return `/**
- * @file my-home.js
- * @description A simple home component for the app.
- */
-customElements.define(
-  "my-home",
-  class extends HTMLElement {
-    connectedCallback() {
-      this.innerHTML = /*html*/ \`
-        <article class="hero">
-          <h1>Welcome to your new App</h1>
-          <div>
-            <p>
-              This <code>&lt;my-home&gt;</code> Web Component is lazy-loaded and styled with Pure Design System.
-            </p>
-            <p>
-              You can start building your app by editing the files in <code>public/assets/my/</code> and <code>src/js/</code>.
-            </p>
-          </div>
-          <nav>
-            <a target="_blank" href="https://github.com/Pure-Web-Foundation/pure-ds/blob/main/getting-started.md" class="btn btn-primary btn-lg">
-              <pds-icon icon="rocket"></pds-icon> Get Started
-            </a>
-            <a target="_blank" href="https://puredesignsystem.z6.web.core.windows.net/storybook/" class="btn btn-secondary btn-lg">
-              <pds-icon icon="book-open"></pds-icon> Storybook
-            </a>
-          </nav>
-        </article>
-      \`;
+    if (entry.isDirectory()) {
+      await ensureDir(targetPath);
+      await copyTemplateDirectory(sourcePath, targetPath, options);
+      continue;
     }
-  },
-);
-`;
-}
-function buildMyTheme() {
-  return `/**
- * my-theme Web Component - allows users to select the app theme (light, dark, system)
- *
- * Uses Pure Design System (PDS) for styling and theming.
- */
-customElements.define(
-  "my-theme",
-  class extends HTMLElement {
-    constructor() {
-      super();
-      this.attachShadow({ mode: "open" });
+    if (relativePath === path.join('public', 'index.html')) {
+      await writeIndexFromTemplate(sourcePath, targetPath, options);
+      continue;
     }
-    async connectedCallback() {
-      const componentStyles = PDS.createStylesheet(
-        "\n        :host {\n          display: block;\n        }\n      "
-      );
-      await PDS.adoptLayers(
-        this.shadowRoot,
-        ["tokens", "primitives", "components", "utilities"],
-        [componentStyles],
-      );
-      this.shadowRoot.innerHTML +=
-        "\n        <form>\n          <fieldset role=\"radiogroup\" aria-label=\"Theme\" class=\"buttons\">\n            <legend>Theme</legend>\n            <label>\n              <input type=\"radio\" name=\"theme\" value=\"system\">\n              <span>\n                <pds-icon icon=\"moon-stars\"></pds-icon>\n                System\n              </span>\n            </label>\n            <label>\n              <input type=\"radio\" name=\"theme\" value=\"light\">\n              <span>\n                <pds-icon icon=\"sun\"></pds-icon>\n                Light\n              </span>\n            </label>\n            <label>\n              <input type=\"radio\" name=\"theme\" value=\"dark\">\n              <span>\n                <pds-icon icon=\"moon\"></pds-icon>\n                Dark\n              </span>\n            </label>\n          </fieldset>\n        </form>";
-      this.#updateCheckedState();
-      this.shadowRoot.addEventListener("change", (e) => {
-        if (e.target.type === "radio" && e.target.name === "theme") {
-          PDS.theme = e.target.value;
-          PDS.toast("Theme changed to " + e.target.value, { duration: 2000 });
-        }
-      });
-      const observer = new MutationObserver(() => {
-        this.#updateCheckedState();
-      });
-      observer.observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ["data-theme"],
-      });
+    if (relativePath === 'esbuild-dev.cjs' || relativePath === 'esbuild-dev.mjs') {
+      continue;
     }
-    #updateCheckedState() {
-      const currentTheme = PDS.theme || "system";
-      const radios = this.shadowRoot.querySelectorAll('input[type="radio"]');
-      radios.forEach((radio) => {
-        radio.checked = radio.value === currentTheme;
-      });
-    }
-  },
-);
-`;
-}
-function buildAppJs() {
-  return `import { PDS } from "@pure-ds/core";
-import { config } from "../../pds.config.js";
-await PDS.start(config);
-const main = document.querySelector("main");
-if (main && !main.querySelector("my-home")) {
-  main.innerHTML = "<my-home></my-home>";
-}
-/**
- * Generates an HTML NodeList by parsing the given HTML string
- * @param {String} html
- * @returns {NodeListOf<ChildNode>} DOM element
- */
-const parseHTML = (html) => {
-  return new DOMParser().parseFromString(html, "text/html").body.childNodes;
-};
-const settingsBtn = parseHTML(
-  \`<button id="settings-btn" class="icon-only btn-xs btn-outline" aria-label="Settings">
-    <pds-icon icon="gear"></pds-icon>
-  </button>\`,
-)[0];
-document.body.appendChild(settingsBtn);
-const drawer = document.createElement("pds-drawer");
-drawer.setAttribute("position", "right");
-drawer.innerHTML = /*html*/ \`<div slot="drawer-header">Settings</div>\n  <div slot="drawer-content"><my-theme></my-theme></div>\`;
-document.body.appendChild(drawer);
-settingsBtn.addEventListener("click", () => {
-  drawer.open = true;
-});
-`;
-}
-function buildPdsConfig() {
-  return buildStarterPdsConfig();
-}
-function buildEsbuildDevCjs() {
-  return `const esbuild = require('esbuild');
-const http = require('http');
-const reloadPort = 4174;
-const reloadClients = new Set();
-function startReloadServer() {
-  const server = http.createServer((req, res) => {
-    if (req.url !== '/events') {
-      res.writeHead(404);
-      res.end();
-      return;
-    }
-    res.writeHead(200, {
-      'Content-Type': 'text/event-stream',
-      'Cache-Control': 'no-cache',
-      Connection: 'keep-alive',
-      'Access-Control-Allow-Origin': '*'
-    });
-    res.write('retry: 1000\\n\\n');
-    reloadClients.add(res);
-    req.on('close', () => {
-      reloadClients.delete(res);
-    });
-  });
-  server.listen(reloadPort, () => {
-    console.log('Live reload listening on http://localhost:' + reloadPort + '/events');
-  });
-}
-function notifyReload() {
-  for (const client of reloadClients) {
-    client.write('data: reload\\n\\n');
+    await copyFileIfMissing(sourcePath, targetPath);
   }
 }
-function liveReloadPlugin() {
-  return {
-    name: 'live-reload',
-    setup(build) {
-      build.onEnd((result) => {
-        if (!result.errors.length) {
-          notifyReload();
-        }
-      });
-    }
-  };
-}
-async function start() {
-  startReloadServer();
-  const ctx = await esbuild.context({
-    entryPoints: ['src/js/app.js'],
-    outdir: 'public/assets/js',
-    bundle: true,
-    format: 'esm',
-    sourcemap: true,
-    publicPath: '/assets/js',
-    external: ['/assets/my/*'],
-    logLevel: 'info',
-    plugins: [liveReloadPlugin()]
-  });
-  await ctx.watch();
-  const { host, port } = await ctx.serve({ servedir: 'public', port: 4173 });
-  console.log('Dev server running at http://' + host + ':' + port);
-}
-start().catch((err) => {
-  console.error(err);
-  process.exit(1);
-});
-`;
-}
-function buildEsbuildDevEsm() {
-  return `import esbuild from 'esbuild';
-import http from 'http';
-const reloadPort = 4174;
-const reloadClients = new Set();
-function startReloadServer() {
-  const server = http.createServer((req, res) => {
-    if (req.url !== '/events') {
-      res.writeHead(404);
-      res.end();
-      return;
-    }
-    res.writeHead(200, {
-      'Content-Type': 'text/event-stream',
-      'Cache-Control': 'no-cache',
-      Connection: 'keep-alive',
-      'Access-Control-Allow-Origin': '*'
-    });
-    res.write('retry: 1000\\n\\n');
-    reloadClients.add(res);
-    req.on('close', () => {
-      reloadClients.delete(res);
-    });
-  });
-  server.listen(reloadPort, () => {
-    console.log('Live reload listening on http://localhost:' + reloadPort + '/events');
-  });
-}
-function notifyReload() {
-  for (const client of reloadClients) {
-    client.write('data: reload\\n\\n');
-  }
-}
-function liveReloadPlugin() {
-  return {
-    name: 'live-reload',
-    setup(build) {
-      build.onEnd((result) => {
-        if (!result.errors.length) {
-          notifyReload();
-        }
-      });
-    }
-  };
-}
-startReloadServer();
-const ctx = await esbuild.context({
-  entryPoints: ['src/js/app.js'],
-  outdir: 'public/assets/js',
-  bundle: true,
-  format: 'esm',
-  sourcemap: true,
-  publicPath: '/assets/js',
-  external: ['/assets/my/*'],
-  logLevel: 'info',
-  plugins: [liveReloadPlugin()]
-});
+async function copyBootstrapTemplate({ version, generatedAt, isModule }) {
+  await copyTemplateDirectory(templateRoot, projectRoot, { version, generatedAt });
-await ctx.watch();
-const { host, port } = await ctx.serve({ servedir: 'public', port: 4173 });
-`;
+  const esbuildTemplate = isModule ? 'esbuild-dev.mjs' : 'esbuild-dev.cjs';
+  const esbuildSource = path.join(templateRoot, esbuildTemplate);
+  const esbuildTarget = path.join(projectRoot, 'esbuild-dev.js');
+  await copyFileIfMissing(esbuildSource, esbuildTarget);
 }
 async function ensurePackageScripts(pkg, pkgPath) {
@@ -630,29 +270,7 @@ async function main() {
   const version = await getPdsCoreVersion();
   const generatedAt = new Date().toLocaleString();
-  await writeFileIfMissing(
-    path.join(projectRoot, 'public', 'index.html'),
-    buildIndexHtml({ version, generatedAt })
-  );
-  await writeFileIfMissing(path.join(projectRoot, 'public', 'assets', 'css', 'app.css'), buildAppCss());
-  await writeFileIfMissing(path.join(projectRoot, 'src', 'js', 'app.js'), buildAppJs());
-  await writeFileIfMissing(path.join(projectRoot, 'pds.config.js'), buildPdsConfig());
-  await writeFileIfMissing(
-    path.join(projectRoot, 'public', 'assets', 'js', 'dev-reload.js'),
-    buildDevReloadJs()
-  );
-  await writeFileIfMissing(
-    path.join(projectRoot, 'public', 'assets', 'my', 'my-home.js'),
-    buildMyHome()
-  );
-  await writeFileIfMissing(
-    path.join(projectRoot, 'public', 'assets', 'my', 'my-theme.js'),
-    buildMyTheme()
-  );
-  const esbuildDevPath = path.join(projectRoot, 'esbuild-dev.js');
-  const esbuildDevContent = isModule ? buildEsbuildDevEsm() : buildEsbuildDevCjs();
-  await writeFileIfMissing(esbuildDevPath, esbuildDevContent);
+  await copyBootstrapTemplate({ version, generatedAt, isModule });
   await ensurePdsAssets();

package/packages/pds-cli/bin/templates/bootstrap/esbuild-dev.cjs ADDED Viewed

@@ -0,0 +1,76 @@
+const esbuild = require("esbuild");
+const http = require("http");
+const reloadPort = 4174;
+const reloadClients = new Set();
+function startReloadServer() {
+  const server = http.createServer((req, res) => {
+    if (req.url !== "/events") {
+      res.writeHead(404);
+      res.end();
+      return;
+    }
+    res.writeHead(200, {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache",
+      Connection: "keep-alive",
+      "Access-Control-Allow-Origin": "*",
+    });
+    res.write("retry: 1000\n\n");
+    reloadClients.add(res);
+    req.on("close", () => {
+      reloadClients.delete(res);
+    });
+  });
+  server.listen(reloadPort, () => {
+    console.log("Live reload listening on http://localhost:" + reloadPort + "/events");
+  });
+}
+function notifyReload() {
+  for (const client of reloadClients) {
+    client.write("data: reload\n\n");
+  }
+}
+function liveReloadPlugin() {
+  return {
+    name: "live-reload",
+    setup(build) {
+      build.onEnd((result) => {
+        if (!result.errors.length) {
+          notifyReload();
+        }
+      });
+    },
+  };
+}
+async function start() {
+  startReloadServer();
+  const ctx = await esbuild.context({
+    entryPoints: ["src/js/app.js"],
+    outdir: "public/assets/js",
+    bundle: true,
+    format: "esm",
+    sourcemap: true,
+    publicPath: "/assets/js",
+    external: ["/assets/my/*"],
+    logLevel: "info",
+    plugins: [liveReloadPlugin()],
+  });
+  await ctx.watch();
+  const { host, port } = await ctx.serve({ servedir: "public", port: 4173 });
+  console.log("Dev server running at http://" + host + ":" + port);
+}
+start().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/packages/pds-cli/bin/templates/bootstrap/esbuild-dev.mjs ADDED Viewed

@@ -0,0 +1,69 @@
+import esbuild from "esbuild";
+import http from "http";
+const reloadPort = 4174;
+const reloadClients = new Set();
+function startReloadServer() {
+  const server = http.createServer((req, res) => {
+    if (req.url !== "/events") {
+      res.writeHead(404);
+      res.end();
+      return;
+    }
+    res.writeHead(200, {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache",
+      Connection: "keep-alive",
+      "Access-Control-Allow-Origin": "*",
+    });
+    res.write("retry: 1000\n\n");
+    reloadClients.add(res);
+    req.on("close", () => {
+      reloadClients.delete(res);
+    });
+  });
+  server.listen(reloadPort, () => {
+    console.log("Live reload listening on http://localhost:" + reloadPort + "/events");
+  });
+}
+function notifyReload() {
+  for (const client of reloadClients) {
+    client.write("data: reload\n\n");
+  }
+}
+function liveReloadPlugin() {
+  return {
+    name: "live-reload",
+    setup(build) {
+      build.onEnd((result) => {
+        if (!result.errors.length) {
+          notifyReload();
+        }
+      });
+    },
+  };
+}
+startReloadServer();
+const ctx = await esbuild.context({
+  entryPoints: ["src/js/app.js"],
+  outdir: "public/assets/js",
+  bundle: true,
+  format: "esm",
+  sourcemap: true,
+  publicPath: "/assets/js",
+  external: ["/assets/my/*"],
+  logLevel: "info",
+  plugins: [liveReloadPlugin()],
+});
+await ctx.watch();
+const { host, port } = await ctx.serve({ servedir: "public", port: 4173 });