@popgrids/embed 0.0.6 → 0.0.8

package/AGENTS.md

@@ -13,11 +13,12 @@ This project contains the embeddable Web Component discussion widget for PopGrid
 - **Build System**: Vite.
   - `vite.config.ts` builds the library version.
   - `vite.embed.config.ts` builds the single self-contained embeddable JS script.
+  - `vite.loader.config.ts` builds `dist/loader.js` from [loader.ts](./src/loader.ts): the tiny classic script served at `https://cdn.popgrids.io/embed.js`, which loads this release's `embed.js`.
 
 ## Core Development Commands
 
 - `pnpm run dev` — Watch-builds both library and embed scripts.
-- `pnpm run build` — Clean and build both targets (`dist/`).
+- `pnpm run build` — Clean and build all three targets (`dist/`).
 - `pnpm run demo:dev` — Launches concurrently the dev watch compiler and a live-reload server (`live-server`) on port 5500.
 
 ## Component Conventions
@@ -124,13 +125,27 @@ This package publishes to npm as [`@popgrids/embed`](https://www.npmjs.com/packa
 through the monorepo's changesets flow; see "Releasing ui and embed" in the root `AGENTS.md`.
 
 - **Every change that affects the published output** needs a changeset (`pnpm changeset` from the
-  root). The changeset only governs npm: web bundles the workspace copy, so production picks up an
-  embed change on the next deploy, released or not.
+  root). web's Composer preview bundles the workspace copy, so it picks up an embed change on the
+  next deploy, released or not; customer sites get it only once it's released.
 - **Auth is npm OIDC trusted publishing** — no `NPM_TOKEN`. The trusted publisher on npmjs.com
   points at repo `popgrids/popgrids`, workflow `release.yml`.
 - `prepublishOnly` runs `check` + `build`. The root `.github/workflows/ci.yml` runs embed's `check`
   and `build` on every PR that touches it.
 - The published package ships both entries: `.` (the library, deps external) and `./embed` /
-  `dist/embed.js` (the self-contained CDN bundle, also the `unpkg`/`jsdelivr` target).
+  `dist/embed.js` (the self-contained CDN bundle, also the `unpkg`/`jsdelivr` target), plus
+  `dist/loader.js`. `pnpm run dev` doesn't rebuild the loader: it always points at the CDN, so
+  local demos load `dist/embed.js` directly.
+- **Customer sites load releases from `cdn.popgrids.io`**, never from `main`. After a release,
+  `.github/workflows/embed-cdn.yml` copies the npm tarball's `embed.js`, its map and `loader.js` to
+  `embed/<version>/` in the `popgrids` R2 bucket (cached for a year), then that `loader.js` to
+  `embed.js` (cached 5 minutes). To roll back, run that workflow by hand with an earlier version
+  (0.0.7 or later; older releases have no loader). It uses the `CLOUDFLARE_R2_API_TOKEN` secret, an
+  R2 token scoped to the `popgrids` bucket. That token can write anywhere in the bucket, which
+  also serves the marketing videos, so the workflow's object keys are fixed: `embed.js` and
+  `embed/<version>/`, nothing else.
+- **CORS:** the loader loads the bundle as a cross-origin module, which browsers refuse without
+  `Access-Control-Allow-Origin`. A Transform Rule in the `popgrids.io` zone (Rules → Transform
+  Rules → Modify Response Header) sets `Access-Control-Allow-Origin: *` on `cdn.popgrids.io`
+  paths starting with `/embed`. Without it, every customer embed fails silently.
 
 Issues, triage labels, domain docs, and Plan Mode are shared across the monorepo; see the root `AGENTS.md`.

package/README.md

@@ -38,15 +38,31 @@ import type { AuthUser, Comment, CommentAuthor, Grid } from "@popgrids/embed";
 
 ### Script tag / CDN
 
-The `./embed` subpath is a single self-contained bundle with every dependency inlined — nothing else
-to load:
+Add one tag where the grid should appear:
 
 ```html
-<script type="module" src="https://unpkg.com/@popgrids/embed/dist/embed.js"></script>
+<script src="https://cdn.popgrids.io/embed.js" data-key="pk_your_public_key" async></script>
+```
+
+The grid renders right after the tag and takes its `data-*` attributes (see below), so
+`data-id="article-hero"` on the tag names the thread. Repeat the tag for more grids; the widget
+loads once.
+
+`https://cdn.popgrids.io/embed.js` always serves the latest release, cached for 5 minutes. It's a
+tiny loader for that release's bundle, which lives at an immutable, versioned URL. To pin a version,
+load its loader instead: `https://cdn.popgrids.io/embed/0.0.7/loader.js`.
+
+To place grids yourself, leave out `data-key` and add `<pop-grid>` elements anywhere on the page:
+
+```html
+<script src="https://cdn.popgrids.io/embed.js" async></script>
 
 <pop-grid data-key="pk_your_public_key"></pop-grid>
 ```
 
+The `./embed` subpath (`dist/embed.js`) is the bundle itself: a self-contained ES module with every
+dependency inlined, also on unpkg and jsDelivr.
+
 ## `<pop-grid>` attributes
 
 | Attribute      | Required | Description                                                                       |

package/dist/loader.js

@@ -0,0 +1 @@
+(function(){var e=document.currentScript;if(e instanceof HTMLScriptElement&&e.dataset.key)if(e.closest(`head`))console.warn(`PopGrids: the embed script is in <head>, so there's nowhere to show the Grid. Move the script to where the Grid should appear, or add a <pop-grid> element there.`);else{let t=document.createElement(`pop-grid`);for(let{name:n,value:r}of Array.from(e.attributes))n.startsWith(`data-`)&&t.setAttribute(n,r);e.after(t)}var t=new URL(`..`,`https://cdn.popgrids.io/embed/0.0.8/embed.js`).href;if(!customElements.get(`pop-grid`)&&!document.querySelector(`script[type="module"][src^="${t}"]`)){let e=document.createElement(`script`);e.type=`module`,e.src=`https://cdn.popgrids.io/embed/0.0.8/embed.js`,document.head.append(e)}})();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@popgrids/embed",
   "description": "PopGrids embeddable discussion widget",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "license": "MIT",
   "author": "PopGrids",
@@ -62,10 +62,11 @@
   "scripts": {
     "build:lib": "vite build",
     "build:embed": "vite build --config vite.embed.config.ts",
-    "build": "rm -rf dist && pnpm run build:lib && pnpm run build:embed",
+    "build:loader": "vite build --config vite.loader.config.ts",
+    "build": "rm -rf dist && pnpm run build:lib && pnpm run build:embed && pnpm run build:loader",
     "dev": "concurrently -k \"vite build --watch\" \"vite build --config vite.embed.config.ts --watch\"",
     "demo": "pnpm run build && npx serve . -p 5500 --cors",
-    "demo:dev": "concurrently -k \"pnpm run dev\" \"live-server --port=5500 --open=demo --watch=dist,demo\"",
+    "demo:dev": "concurrently -k \"pnpm run dev\" \"live-server --host=localhost --port=5500 --open=demo --watch=dist,demo\"",
     "clean": "rm -rf node_modules dist",
     "check": "tsc --noEmit"
   }