popup-button-plugin 0.1.1 → 0.1.3

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-plugin.global.js

@@ -0,0 +1,169 @@
+"use strict";
+var PopupButtonPlugin = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+  // src/index.ts
+  var index_exports = {};
+  __export(index_exports, {
+    PopupButton: () => PopupButton,
+    getButtonContent: () => getButtonContent,
+    registerButtonContent: () => registerButtonContent,
+    unregisterButtonContent: () => unregisterButtonContent
+  });
+
+  // src/popup-registry.ts
+  var registry = /* @__PURE__ */ new Map();
+  function registerButtonContent(name, content) {
+    registry.set(name, content);
+  }
+  function getButtonContent(name) {
+    return registry.get(name);
+  }
+  function unregisterButtonContent(name) {
+    registry.delete(name);
+  }
+
+  // src/popup-button.ts
+  var PopupButton = class extends HTMLElement {
+    constructor() {
+      super();
+      // Tracks whether the popup is currently visible.
+      this.isOpen = false;
+      /** Runs when the visible <button> inside our shadow DOM is clicked. */
+      this.handleButtonClick = () => {
+        const found = getButtonContent(this.buttonName);
+        if (!found) {
+          this.dispatchEvent(
+            new CustomEvent("popup-content-missing", {
+              detail: { name: this.buttonName },
+              bubbles: true
+            })
+          );
+          return;
+        }
+        this.content = found;
+        this.isOpen = true;
+        this.render();
+      };
+      /** Runs when the popup's close button or backdrop is clicked. */
+      this.handleClose = () => {
+        this.isOpen = false;
+        this.render();
+      };
+      this.attachShadow({ mode: "open" });
+    }
+    /**
+     * Runs once, the first time this tag is attached to the page.
+     * (Equivalent to a component's "mount"/"componentDidMount".)
+     */
+    connectedCallback() {
+      this.render();
+    }
+    /** Reads the `name` HTML attribute, e.g. <popup-button name="save-info">. */
+    get buttonName() {
+      return this.getAttribute("name") ?? "";
+    }
+    /**
+     * 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() {
+      return this.getAttribute("label") ?? "Click me";
+    }
+    /**
+     * Rebuilds this element's shadow DOM to match current state
+     * (isOpen / content). There's no automatic re-render like Stencil —
+     * we call this ourselves every time state changes.
+     */
+    render() {
+      const shadow = this.shadowRoot;
+      shadow.innerHTML = `
+      <style>${STYLES}</style>
+      <button class="btn">${escapeHtml(this.buttonLabel)}</button>
+      ${this.isOpen ? this.renderPopupMarkup() : ""}
+    `;
+      shadow.querySelector(".btn").addEventListener("click", this.handleButtonClick);
+      if (this.isOpen) {
+        shadow.querySelector(".backdrop").addEventListener("click", this.handleClose);
+        shadow.querySelector(".close").addEventListener("click", this.handleClose);
+        shadow.querySelector(".popup").addEventListener("click", (e) => e.stopPropagation());
+      }
+    }
+    renderPopupMarkup() {
+      const title = this.content?.title ?? "";
+      const body = this.content?.body ?? "";
+      return `
+      <div class="backdrop">
+        <div class="popup">
+          <div class="popup__header">
+            <span class="popup__title">${escapeHtml(title)}</span>
+            <button class="close" aria-label="Close">&times;</button>
+          </div>
+          <div class="popup__body">${escapeHtml(body)}</div>
+        </div>
+      </div>
+    `;
+    }
+  };
+  function escapeHtml(value) {
+    const div = document.createElement("div");
+    div.textContent = value;
+    return div.innerHTML;
+  }
+  var STYLES = `
+  :host { display: inline-block; font-family: inherit; }
+  .btn {
+    padding: 8px 16px;
+    border-radius: 6px;
+    border: none;
+    background: #2563eb;
+    color: #fff;
+    font-size: 14px;
+    cursor: pointer;
+  }
+  .btn:hover { background: #1d4ed8; }
+  .backdrop {
+    position: fixed; inset: 0;
+    background: rgba(0,0,0,0.5);
+    display: flex; align-items: center; justify-content: center;
+    z-index: 1000;
+  }
+  .popup {
+    background: #fff; border-radius: 10px;
+    min-width: 320px; max-width: 90vw;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+  }
+  .popup__header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 16px; border-bottom: 1px solid #e5e7eb;
+  }
+  .popup__title { font-size: 16px; font-weight: 700; color: #111827; }
+  .close { background: none; border: none; font-size: 20px; cursor: pointer; color: #6b7280; }
+  .popup__body { padding: 16px; color: #374151; }
+`;
+  customElements.define("popup-button", PopupButton);
+  return __toCommonJS(index_exports);
+})();

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.3",
   "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",
@@ -9,13 +9,24 @@
     "dist/"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "build": "tsc -p tsconfig.json && npm run build:global",
+    "build:global": "esbuild src/index.ts --bundle --format=iife --global-name=PopupButtonPlugin --outfile=dist/popup-button-plugin.global.js",
     "start": "tsc -p tsconfig.json --watch",
     "prepublishOnly": "npm run build"
   },
-  "keywords": ["web-components", "custom-elements", "popup", "modal", "button"],
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "popup",
+    "modal",
+    "button"
+  ],
   "license": "MIT",
   "devDependencies": {
+    "esbuild": "^0.28.2",
     "typescript": "^5.6.0"
+  },
+  "allowScripts": {
+    "esbuild@0.28.2": true
   }
 }