popup-button-plugin 0.1.1 → 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/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

@@ -68,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';
     }
@@ -82,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.1",
+  "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",