@pie-players/pie-players-shared 0.3.56 → 0.3.58

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.
@@ -0,0 +1,120 @@
1
+ # Vendored: `nds-icon-button`
2
+
3
+ Pre-built bundle of the Renaissance Next Design System (NDS)
4
+ `<nds-icon-button>` custom element. This is the **single source of truth** for
5
+ the button across `@pie-players/*`; consumers import it via the package export
6
+ `@pie-players/pie-players-shared/nds-icon-button` rather than vendoring their
7
+ own copy.
8
+
9
+ Known consumers:
10
+
11
+ - `@pie-players/pie-assessment-toolkit` — `ItemToolBar.svelte` calculator shell
12
+ header (chevrons, zoom, close).
13
+ - `@pie-players/pie-tool-tts-inline` — the Text-to-Speech play/pause trigger
14
+ and the "more" overflow control.
15
+
16
+ It ships as a pre-built single-file bundle (Lit inlined) so consumers get the
17
+ button without taking a runtime dependency on Lit or the rest of NDS: the Lit
18
+ runtime lives inside this bundle and is inlined/resolved wherever the module
19
+ lands, so it never leaks into a consumer's own dependency set.
20
+
21
+ ## Provenance
22
+
23
+ | Field | Value |
24
+ | --- | --- |
25
+ | Upstream repo | `git@github.com:RenaissancePlace/nextComponentLibrary.git` |
26
+ | Source file | `web-components/src/components/icon-button/nds-icon-button.ts` |
27
+ | Last sync commit | `1c728d3` (`feat(UX-2319): add new components…`) |
28
+ | Bundler | Vite 7 in lib mode, ES output, single-file (Lit inlined) |
29
+
30
+ ## Why a vendored bundle, not an npm dep
31
+
32
+ NDS is not currently published to a registry the `@pie-players/*` chain can
33
+ consume. Copying the `.ts` source directly (the path the NDS docs suggest)
34
+ would force a `lit` dependency plus a chunk of foundations CSS onto every
35
+ downstream consumer on lockstep release. A pre-built single-file bundle
36
+ sidesteps both: zero new package deps, the bundle inlines what it needs.
37
+
38
+ ## Idempotent registration (built-in define guard)
39
+
40
+ A host page can load more than one `nds-icon-button` consumer (e.g. the toolkit
41
+ and the inline TTS tool), and each would otherwise register `nds-icon-button` a
42
+ second time and throw `NotSupportedError`. To make registration idempotent
43
+ regardless of load order, the Lit `@customElement` decorator helper (`Pt`) in
44
+ this bundle is patched to guard the define:
45
+
46
+ ```js
47
+ const Pt = (o) => (t, e) => {
48
+ e !== void 0 ? e.addInitializer((() => {
49
+ customElements.get(o) || customElements.define(o, t);
50
+ })) : (customElements.get(o) || customElements.define(o, t));
51
+ };
52
+ ```
53
+
54
+ Re-apply this guard after any refresh from upstream. Because the guard still
55
+ contains the literal `customElements.define(` token, this file is allow-listed
56
+ in `scripts/check-ce-define-safety.mjs` (which would otherwise flag it).
57
+
58
+ ## How this is built and shipped
59
+
60
+ `players-shared` builds with `tsc`, which does not emit static `.js`/`.d.ts`
61
+ vendor files. The package's `build` script copies `src/components/vendor` →
62
+ `dist/components/vendor` so the `./nds-icon-button` export resolves. The folder
63
+ also sits under `src/components/**`, which `tsconfig.json` excludes from the
64
+ TypeScript program, and is covered by the `!**/src/components/vendor` ignore in
65
+ `biome.json`.
66
+
67
+ Consuming bundlers treat this module per their own externals config:
68
+
69
+ - `tool-tts-inline` (Vite lib build) does **not** externalize `players-shared`,
70
+ so this bundle is inlined into its published output.
71
+ - `assessment-toolkit` builds its CE artifacts with `--external=@pie-players/*`,
72
+ so this module stays a bare external import in those artifacts — resolved by
73
+ the host/loader exactly like every other `@pie-players/*` specifier the
74
+ artifacts already emit.
75
+
76
+ ## How to refresh
77
+
78
+ When a newer `nds-icon-button` is needed:
79
+
80
+ 1. Pull the latest `nextComponentLibrary` next to this repo (sibling checkout:
81
+ `../../nextComponentLibrary`).
82
+ 2. From `nextComponentLibrary/web-components/`, `bun install`.
83
+ 3. Build a self-contained ESM bundle (no shared chunks) — the upstream
84
+ `vite.bundle.config.js` splits Lit into a `property.js` chunk, which would
85
+ break the single-file copy here. Use this one-shot config instead:
86
+
87
+ ```js
88
+ // vite.self-contained.config.js
89
+ import { defineConfig } from 'vite';
90
+ import { resolve } from 'path';
91
+ export default defineConfig({
92
+ publicDir: false,
93
+ build: {
94
+ outDir: resolve(__dirname, 'NDS-Prototypes/dist-bundles-self-contained'),
95
+ emptyOutDir: true,
96
+ minify: true,
97
+ lib: {
98
+ entry: resolve(__dirname, 'src/components/icon-button/nds-icon-button.ts'),
99
+ name: 'NdsIconButton',
100
+ fileName: () => 'nds-icon-button.bundled.js',
101
+ formats: ['es'],
102
+ },
103
+ rollupOptions: { output: { inlineDynamicImports: true } },
104
+ },
105
+ });
106
+ ```
107
+
108
+ Then: `bunx vite build --config vite.self-contained.config.js`.
109
+ 4. Copy the output over this file, re-apply the define guard above, and update
110
+ the `Last sync commit` row.
111
+ 5. Rebuild the consumers (`assessment-toolkit`, `tool-tts-inline`) and verify
112
+ the calculator shell and the TTS trigger still mount and register.
113
+
114
+ ## Runtime dependencies
115
+
116
+ The bundle's `connectedCallback` injects a `<link>` for the Renaissance Roboto
117
+ stylesheet, and `render()` emits `fa-light fa-${iconName}` FontAwesome classes.
118
+ Each consumer is responsible for providing Roboto and FontAwesome (see the
119
+ consuming component for how it wires those assets); this bundle only assumes
120
+ they are present.
@@ -0,0 +1,19 @@
1
+ /**
2
+ * Type surface for the vendored `<nds-icon-button>` bundle.
3
+ *
4
+ * Consumers import this module for its side effect (it registers the
5
+ * `nds-icon-button` custom element on evaluation). The named export is
6
+ * provided only so tooling can reference the constructor; the tag is what
7
+ * consumers actually use, via markup or `document.createElement`.
8
+ */
9
+ export declare class NdsIconButton extends HTMLElement {
10
+ variant: string;
11
+ size: string;
12
+ /** Shape of the button; also mirrored by the `shape` accessor. */
13
+ type: string;
14
+ shape: string;
15
+ state: string;
16
+ iconName: string;
17
+ disabled: boolean;
18
+ buttonAriaLabel: string;
19
+ }