npm - @hotosm/ui - Versions diffs - 2.1.0 → 2.1.2 - Mend

@hotosm/ui 2.1.0 → 2.1.2

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 (9) hide show

package/README.md +55 -12
package/dist/chunks/chunk.HJTJO26W.js +1 -0
package/dist/components/tool-menu/tool-menu.d.ts +2 -0
package/dist/components/tool-menu/tool-menu.js +1 -1
package/dist/hotosm-ui.js +1 -1
package/dist/vite.d.ts +34 -0
package/dist/vite.js +71 -0
package/package.json +5 -1
package/dist/chunks/chunk.GQ4LISAU.js +0 -1

package/README.md CHANGED Viewed

@@ -153,26 +153,69 @@ import "@hotosm/ui/dist/components/header/header.js"; // hot-* components you us
 <hot-header title="My App"></hot-header>
 ```
-Put WebAwesome in its own long-lived chunk so app deploys don't invalidate
-the browser-cached copy:
+#### Build setup
+`@hotosm/ui/vite` provides build helpers for Vite 5, 7, and 8.
+Add the circular chunk guard to catch chunk cycles that can cause a blank page
+at runtime:
+```js
+// vite.config.ts
+import { circularChunkGuard } from "@hotosm/ui/vite";
+import { defineConfig } from "vite";
+export default defineConfig({
+  plugins: [circularChunkGuard()],
+});
+```
+Keep the guard enabled even if you do not split chunks manually. Dependency
+updates can also introduce cycles.
+You can also place WebAwesome in its own chunk. This lets browsers keep it
+cached when the rest of your app changes:
+For Vite 8:
+```js
+// vite.config.ts
+import { WEBAWESOME_CHUNK } from "@hotosm/ui/vite";
+import { defineConfig } from "vite";
+export default defineConfig({
+  build: {
+    rolldownOptions: {
+      output: {
+        codeSplitting: {
+          groups: [WEBAWESOME_CHUNK],
+        },
+      },
+    },
+  },
+});
+```
+For Vite 5-7:
 ```js
 // vite.config.ts
-build: {
-  rollupOptions: {
-    output: {
-      manualChunks(id) {
-        if (id.includes("@awesome.me/webawesome")) return "webawesome";
+import { matchWebawesome } from "@hotosm/ui/vite";
+import { defineConfig } from "vite";
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: (id) => matchWebawesome(id),
       },
     },
   },
-},
+});
 ```
-Byte-critical app? Skip `webawesome-all.js` and cherry-pick individual
-WebAwesome components instead - then add the `wa-cloak` class to `<html>`
-as a FOUCE backstop (pure CSS, ships in WebAwesome's `utilities.css`,
-already included in `style.css`).
+This cache is per origin, so it is reused across deployments of the same app,
+not across different HOT tools.
 ### Via CDN / Plain HTML / HTMX

package/dist/chunks/chunk.HJTJO26W.js ADDED Viewed

@@ -0,0 +1 @@

+ import{b as o}from"./chunk.LH3TTPVQ.js";var l=o;customElements.get("hot-tool-menu")||customElements.define("hot-tool-menu",o);var e=class e extends o{connectedCallback(){super.connectedCallback(),e.warned||(e.warned=!0,console.warn("<hotosm-tool-menu> is deprecated and will be removed in the next major release of @hotosm/ui. Use <hot-tool-menu> instead."))}};e.warned=!1;var t=e;customElements.get("hotosm-tool-menu")||customElements.define("hotosm-tool-menu",t);export{l as a};

package/dist/components/tool-menu/tool-menu.d.ts CHANGED Viewed

@@ -2,6 +2,8 @@ import HotToolMenu from "./tool-menu.component.js";
 export default HotToolMenu;
 declare global {
     interface HTMLElementTagNameMap {
+        "hot-tool-menu": HotToolMenu;
+        /** @deprecated Use `hot-tool-menu` - this alias is removed in the next major release. */
         "hotosm-tool-menu": HotToolMenu;
     }
 }

package/dist/components/tool-menu/tool-menu.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{a}from"../../chunks/chunk.~~GQ4LISAU~~.js";import"../../chunks/chunk.LH3TTPVQ.js";import"../../chunks/chunk.IVW6CBE7.js";import"../../chunks/chunk.HOF672RD.js";import"../../chunks/chunk.N2W26RCT.js";export{a as default};
1	+ import{a}from"../../chunks/chunk.HJTJO26W.js";import"../../chunks/chunk.LH3TTPVQ.js";import"../../chunks/chunk.IVW6CBE7.js";import"../../chunks/chunk.HOF672RD.js";import"../../chunks/chunk.N2W26RCT.js";export{a as default};

package/dist/hotosm-ui.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{a as p}from"./chunks/chunk.TMPPHKMO.js";import"./chunks/chunk.LJ4XIP4K.js";import"./chunks/chunk.LIASDRWH.js";import{a as y}from"./chunks/chunk.~~GQ4LISAU~~.js";import"./chunks/chunk.LH3TTPVQ.js";import"./chunks/chunk.IVW6CBE7.js";import{a as u}from"./chunks/chunk.D2QPKXC3.js";import"./chunks/chunk.RPCVLKA4.js";import{a as S}from"./chunks/chunk.GP3AB7RO.js";import{a as m}from"./chunks/chunk.G7OBK7EE.js";import"./chunks/chunk.JCAWUWEO.js";import"./chunks/chunk.7X5TBZPD.js";import{a as f}from"./chunks/chunk.HY6LFZQK.js";import"./chunks/chunk.HPW4YC7W.js";import{a as d}from"./chunks/chunk.R7BKNF25.js";import"./chunks/chunk.DY7CT6FN.js";import"./chunks/chunk.KO4EOD3I.js";import"./chunks/chunk.VSRVTIBV.js";import"./chunks/chunk.45EZ2EC2.js";import"./chunks/chunk.AYSFL7J5.js";import{a as h}from"./chunks/chunk.347QGSW2.js";import"./chunks/chunk.B77WIT2F.js";import"./chunks/chunk.TJOQKPXN.js";import"./chunks/chunk.DVVFVLNQ.js";import"./chunks/chunk.HOF672RD.js";import"./chunks/chunk.N2W26RCT.js";function a(t,e=document){let o=[],r=e.querySelectorAll(t);return o.push(...Array.from(r)),e.querySelectorAll("*").forEach(i=>{i.shadowRoot&&o.push(...a(t,i.shadowRoot))}),o}function g(t){let{css:e,selector:o="wa-button",all:r=!0,styleId:s="hot-theme-injection"}=t;(r?a(o):[a(o)[0]].filter(Boolean)).forEach(n=>{if(!n)return;let c=()=>{if(!n.shadowRoot){setTimeout(c,10);return}if(n.shadowRoot.getElementById(s))return;let l=document.createElement("style");l.id=s,l.textContent=e,n.shadowRoot.appendChild(l)};c()})}export{f as Announcement,d as Consent,S as FileInputDropzone,m as Header,h as ListCard,p as Logo,y as ToolMenu,u as Tracking,g as injectCSSIntoShadowDOM};
1	+ import{a as p}from"./chunks/chunk.TMPPHKMO.js";import"./chunks/chunk.LJ4XIP4K.js";import"./chunks/chunk.LIASDRWH.js";import{a as y}from"./chunks/chunk.HJTJO26W.js";import"./chunks/chunk.LH3TTPVQ.js";import"./chunks/chunk.IVW6CBE7.js";import{a as u}from"./chunks/chunk.D2QPKXC3.js";import"./chunks/chunk.RPCVLKA4.js";import{a as S}from"./chunks/chunk.GP3AB7RO.js";import{a as m}from"./chunks/chunk.G7OBK7EE.js";import"./chunks/chunk.JCAWUWEO.js";import"./chunks/chunk.7X5TBZPD.js";import{a as f}from"./chunks/chunk.HY6LFZQK.js";import"./chunks/chunk.HPW4YC7W.js";import{a as d}from"./chunks/chunk.R7BKNF25.js";import"./chunks/chunk.DY7CT6FN.js";import"./chunks/chunk.KO4EOD3I.js";import"./chunks/chunk.VSRVTIBV.js";import"./chunks/chunk.45EZ2EC2.js";import"./chunks/chunk.AYSFL7J5.js";import{a as h}from"./chunks/chunk.347QGSW2.js";import"./chunks/chunk.B77WIT2F.js";import"./chunks/chunk.TJOQKPXN.js";import"./chunks/chunk.DVVFVLNQ.js";import"./chunks/chunk.HOF672RD.js";import"./chunks/chunk.N2W26RCT.js";function a(t,e=document){let o=[],r=e.querySelectorAll(t);return o.push(...Array.from(r)),e.querySelectorAll("*").forEach(i=>{i.shadowRoot&&o.push(...a(t,i.shadowRoot))}),o}function g(t){let{css:e,selector:o="wa-button",all:r=!0,styleId:s="hot-theme-injection"}=t;(r?a(o):[a(o)[0]].filter(Boolean)).forEach(n=>{if(!n)return;let c=()=>{if(!n.shadowRoot){setTimeout(c,10);return}if(n.shadowRoot.getElementById(s))return;let l=document.createElement("style");l.id=s,l.textContent=e,n.shadowRoot.appendChild(l)};c()})}export{f as Announcement,d as Consent,S as FileInputDropzone,m as Header,h as ListCard,p as Logo,y as ToolMenu,u as Tracking,g as injectCSSIntoShadowDOM};

package/dist/vite.d.ts ADDED Viewed

@@ -0,0 +1,34 @@
+/** Build helpers for apps that use `@hotosm/ui`. */
+/** Minimal chunk type that avoids depending on a specific bundler version. */
+export interface EmittedChunk {
+    type: "chunk";
+    name: string;
+    fileName: string;
+    imports: readonly string[];
+    dynamicImports?: readonly string[];
+}
+export type EmittedBundle = Record<string, {
+    type: string;
+} | EmittedChunk>;
+/** Find cycles in static chunk imports. Dynamic imports are ignored. */
+export declare function findChunkCycles(bundle: EmittedBundle): string[][];
+export interface CircularChunkGuardOptions {
+    /** Warn instead of failing the build. */
+    warnOnly?: boolean;
+}
+/** Minimal plugin type that avoids depending on a specific bundler version. */
+export interface ChunkGuardPlugin {
+    name: string;
+    apply: "build";
+    enforce: "post";
+    generateBundle(this: unknown, options: unknown, bundle: EmittedBundle): void;
+}
+/** Fail the build when output chunks import each other in a cycle. */
+export declare function circularChunkGuard(options?: CircularChunkGuardOptions): ChunkGuardPlugin;
+/** WebAwesome modules as a Rolldown code-splitting group. */
+export declare const WEBAWESOME_CHUNK: {
+    test: RegExp;
+    name: string;
+};
+/** Match WebAwesome modules in a Rollup `manualChunks` callback. */
+export declare function matchWebawesome(id: string): string | undefined;

package/dist/vite.js ADDED Viewed

@@ -0,0 +1,71 @@
+// src/vite.ts
+function findChunkCycles(bundle) {
+  const imports = /* @__PURE__ */ new Map();
+  const name = /* @__PURE__ */ new Map();
+  for (const [file, output] of Object.entries(bundle)) {
+    if (output.type !== "chunk") continue;
+    const chunk = output;
+    name.set(file, chunk.name || file);
+    imports.set(
+      file,
+      chunk.imports.filter((id) => bundle[id]?.type === "chunk")
+    );
+  }
+  const onStack = /* @__PURE__ */ new Set();
+  const done = /* @__PURE__ */ new Set();
+  const stack = [];
+  const cycles = /* @__PURE__ */ new Map();
+  const visit = (file) => {
+    onStack.add(file);
+    stack.push(file);
+    for (const next of imports.get(file) ?? []) {
+      if (onStack.has(next)) {
+        const cycle = [...stack.slice(stack.indexOf(next)), next].map((f) => name.get(f) ?? f);
+        cycles.set(cycle.join(" -> "), cycle);
+      } else if (!done.has(next)) {
+        visit(next);
+      }
+    }
+    stack.pop();
+    onStack.delete(file);
+    done.add(file);
+  };
+  for (const file of imports.keys()) if (!done.has(file)) visit(file);
+  return [...cycles.values()];
+}
+function circularChunkGuard(options = {}) {
+  return {
+    name: "hotosm-circular-chunk-guard",
+    apply: "build",
+    enforce: "post",
+    generateBundle(_options, bundle) {
+      const cycles = findChunkCycles(bundle);
+      if (cycles.length === 0) return;
+      const message = [
+        `Circular chunk import${cycles.length > 1 ? "s" : ""} in the build output:`,
+        ...cycles.map((cycle) => `  ${cycle.join(" -> ")}`),
+        "",
+        "This can cause a blank page or an 'x is undefined' error at runtime.",
+        "Check your manual chunk rules or remove them."
+      ].join("\n");
+      if (options.warnOnly) {
+        console.warn(`[hotosm-circular-chunk-guard] ${message}`);
+        return;
+      }
+      throw new Error(message);
+    }
+  };
+}
+var WEBAWESOME_CHUNK = {
+  test: /[\\/]@awesome\.me[\\/]webawesome[\\/]/,
+  name: "webawesome"
+};
+function matchWebawesome(id) {
+  return WEBAWESOME_CHUNK.test.test(id) ? WEBAWESOME_CHUNK.name : void 0;
+}
+export {
+  WEBAWESOME_CHUNK,
+  circularChunkGuard,
+  findChunkCycles,
+  matchWebawesome
+};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hotosm/ui",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "Shared UI components with HOT theming.",
   "homepage": "https://github.com/hotosm/ui#readme",
   "license": "GPL-3.0-only",
@@ -44,6 +44,10 @@
       "types": "./dist/hotosm-ui.d.ts",
       "import": "./dist/hotosm-ui.js"
     },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "import": "./dist/vite.js"
+    },
     "./dist/hotosm-ui.js": "./dist/hotosm-ui.js",
     "./dist/webawesome-all.js": {
       "types": "./dist/webawesome-all.d.ts",

package/dist/chunks/chunk.GQ4LISAU.js DELETED Viewed

	@@ -1 +0,0 @@
1	- import{b as o}from"./chunk.LH3TTPVQ.js";var t=o;customElements.get("hotosm-tool-menu")\|\|customElements.define("hotosm-tool-menu",o);export{t as a};