popup-button-plugin 0.1.0 → 0.1.2

package/README.md

@@ -10,6 +10,18 @@ See the full design write-up and integration steps in
 [popup-button-prd.md](./popup-button-prd.md) and
 [popup-button-integration-guide.md](./popup-button-integration-guide.md).
 
+## Supported languages / frameworks (tested)
+
+| Language / Framework | Supported | Example |
+|---|---|---|
+| Plain HTML | ✅ | `examples/html/` |
+| React | ✅ | `examples/react-app/` |
+| Vue | ✅ | `examples/vue-app/` |
+| Svelte | ✅ | `examples/svelte-app/` |
+| Angular | ✅ | `examples/angular-app/` |
+| Flutter | ❌ not supported | — |
+| React Native | ❌ not supported | — |
+
 ## Quick start
 
 ```bash

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { registerButtonContent, getButtonContent, unregisterButtonContent } from './popup-registry';
-export type { PopupContent } from './popup-registry';
-export { PopupButton } from './popup-button';
+export { registerButtonContent, getButtonContent, unregisterButtonContent } from './popup-registry.js';
+export type { PopupContent } from './popup-registry.js';
+export { PopupButton } from './popup-button.js';

package/dist/index.js

@@ -2,5 +2,6 @@
 //   1. Registers the <popup-button> custom element (side effect of
 //      the import below — customElements.define runs once).
 //   2. Gives the app the registry functions it needs to call.
-export { registerButtonContent, getButtonContent, unregisterButtonContent } from './popup-registry';
-export { PopupButton } from './popup-button';
+// ".js" extensions required here too, same reason as in popup-button.ts.
+export { registerButtonContent, getButtonContent, unregisterButtonContent } from './popup-registry.js';
+export { PopupButton } from './popup-button.js';

package/dist/popup-button.d.ts

@@ -9,8 +9,18 @@ export declare class PopupButton extends HTMLElement {
     connectedCallback(): void;
     /** Reads the `name` HTML attribute, e.g. <popup-button name="save-info">. */
     private get buttonName();
-    /** Reads the `label` HTML attribute (button text), with a default. */
-    private get label();
+    /**
+     * Reads the `label` HTML attribute (button text), with a default.
+     *
+     * NOTE: named `buttonLabel`, NOT `label` — React 19 sets custom
+     * element props as real DOM properties (`el.label = '...'`) when
+     * the property exists on the element. A getter-only `label` here
+     * (no setter) would make that assignment throw
+     * "Cannot set property label ... which has only a getter" and
+     * crash the whole React render. Avoid naming internal accessors
+     * the same as attributes a framework might try to set directly.
+     */
+    private get buttonLabel();
     /** Runs when the visible <button> inside our shadow DOM is clicked. */
     private handleButtonClick;
     /** Runs when the popup's close button or backdrop is clicked. */

package/dist/popup-button.js

@@ -19,7 +19,12 @@
 //   DOM + CSS, so our button/modal styles can't leak out, and page
 //   styles can't accidentally break our popup.
 // =====================================================================
-import { getButtonContent } from './popup-registry';
+// NOTE the explicit ".js" extension: native browser <script type="module">
+// imports require the real file extension (unlike bundlers such as
+// Vite/webpack, which resolve extensionless imports for you). Without
+// this, plain-HTML usage (our main selling point — no build tool
+// needed) breaks with a 404 on this import.
+import { getButtonContent } from './popup-registry.js';
 export class PopupButton extends HTMLElement {
     constructor() {
         super();
@@ -63,8 +68,18 @@ export class PopupButton extends HTMLElement {
         var _a;
         return (_a = this.getAttribute('name')) !== null && _a !== void 0 ? _a : '';
     }
-    /** Reads the `label` HTML attribute (button text), with a default. */
-    get label() {
+    /**
+     * Reads the `label` HTML attribute (button text), with a default.
+     *
+     * NOTE: named `buttonLabel`, NOT `label` — React 19 sets custom
+     * element props as real DOM properties (`el.label = '...'`) when
+     * the property exists on the element. A getter-only `label` here
+     * (no setter) would make that assignment throw
+     * "Cannot set property label ... which has only a getter" and
+     * crash the whole React render. Avoid naming internal accessors
+     * the same as attributes a framework might try to set directly.
+     */
+    get buttonLabel() {
         var _a;
         return (_a = this.getAttribute('label')) !== null && _a !== void 0 ? _a : 'Click me';
     }
@@ -77,7 +92,7 @@ export class PopupButton extends HTMLElement {
         const shadow = this.shadowRoot;
         shadow.innerHTML = `
       <style>${STYLES}</style>
-      <button class="btn">${escapeHtml(this.label)}</button>
+      <button class="btn">${escapeHtml(this.buttonLabel)}</button>
       ${this.isOpen ? this.renderPopupMarkup() : ''}
     `;
         // Re-attach listeners every render, since innerHTML = '...' above

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "popup-button-plugin",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A tiny, standalone, framework-free button-with-popup web component: register content by name, and <popup-button name=\"...\"> automatically shows it when clicked.",
   "main": "dist/index.js",
   "module": "dist/index.js",