feat(superdoc): ship IIFE CDN bundle with working vanilla example

Switch the CDN-facing build from UMD to IIFE, minify it, expose
`window.SuperDoc` as the class directly, and verify end-to-end with a
real DOCX rendering in the existing CDN example.

- Rename vite.config.umd.js to vite.config.cdn.js; format=iife,
  name=SuperDoc, esbuild minify. Bundle drops from 8.8 MB unminified to
  4.9 MB minified (1.46 MB gzipped).
- Add src/cdn-entry.js so `window.SuperDoc` is the constructor and named
  exports attach as static properties (Quill pattern).
- Inline yjs + hocuspocus into the IIFE (ESM-only — can't be loaded as
  script-tag globals). pdfjs-dist stays external; PDF viewing is
  documented as ESM + import-map only.
- Flip package.json "main" from the fat UMD to the proper CJS build,
  add ./global subpath export plus unpkg/jsdelivr fields. Keep
  superdoc.umd.js for one minor cycle as a deprecation-warning shim via
  scripts/emit-umd-alias.cjs; removal scheduled for 2.0.
- Extend scripts/audit-bundle.cjs with size budgets (global.js 5/6 MB,
  es.js 3/4 MB, style.css 150/200 KB).
- Rework examples/getting-started/cdn/ to load the locally built bundle
  via a prepare step, auto-mount a bundled test_file.docx, and include
  jsdelivr snippets in the README.
- Rename tests/umd-smoke -> tests/cdn-smoke; add a second HTML page +
  Playwright test asserting the deprecation warning fires on the old
  filename. Extend examples/__tests__/smoke.spec.ts with cdn-specific
  assertions (window.SuperDoc shape, real DOCX renders content).
- Add CDN quickstart to packages/superdoc/AGENTS.md with script-tag and
  ESM + import-map copy-paste blocks and SRI guidance.

Author: caio-pizzol

.github/workflows/ci-superdoc.yml

@@ -171,13 +171,13 @@ jobs:
         if: matrix.name == 'other-packages'
         run: pnpm test:slow
 
-      - name: Install Playwright for UMD smoke test
+      - name: Install Playwright for CDN smoke test
         if: matrix.name == 'other-packages'
-        run: pnpm --filter @superdoc/umd-smoke-test exec playwright install --with-deps chromium
+        run: pnpm --filter @superdoc/cdn-smoke-test exec playwright install --with-deps chromium
 
-      - name: Run UMD smoke test
+      - name: Run CDN smoke test
         if: matrix.name == 'other-packages'
-        working-directory: packages/superdoc/tests/umd-smoke
+        working-directory: packages/superdoc/tests/cdn-smoke
         run: pnpm test
 
   cli-tests:

examples/__tests__/playwright.config.ts

@@ -46,7 +46,7 @@ const isLaravel = example === 'laravel';
 // Start command
 const isCdn = example === 'cdn';
 const command = isCdn
-  ? `npx serve ${examplePath} -l ${port}`
+  ? `pnpm --dir ${examplePath} run prepare && npx serve ${examplePath} -l ${port}`
   : isLaravel
     ? `${run} start`
     : useConcurrently.includes(example)

examples/__tests__/smoke.spec.ts

@@ -1,5 +1,7 @@
 import { test, expect } from '@playwright/test';
 
+const example = process.env.EXAMPLE || 'react';
+
 test('example loads without errors', async ({ page }) => {
   const errors: string[] = [];
 
@@ -26,3 +28,35 @@ test('example loads without errors', async ({ page }) => {
 
   expect(errors).toEqual([]);
 });
+
+test.describe('cdn example', () => {
+  test.skip(example !== 'cdn', 'cdn-specific assertions');
+
+  test('window.SuperDoc is a constructor and the bundled sample renders', async ({ page }) => {
+    await page.route('**/ingest.superdoc.dev/**', (route) => route.abort());
+    await page.goto('/');
+
+    const globalShape = await page.evaluate(() => ({
+      isFunction: typeof (window as any).SuperDoc === 'function',
+      hasCreateTheme: typeof (window as any).SuperDoc?.createTheme === 'function',
+      hasDOCX: typeof (window as any).SuperDoc?.DOCX !== 'undefined',
+    }));
+    expect(globalShape).toEqual({ isFunction: true, hasCreateTheme: true, hasDOCX: true });
+
+    await page.waitForFunction(() => (window as any).__SUPERDOC_READY__ === true, null, {
+      timeout: 15_000,
+    });
+
+    const rendered = await page.evaluate(() => {
+      const el = document.querySelector('#editor');
+      return {
+        hasChildren: (el?.children.length || 0) > 0,
+        innerHTMLLength: el?.innerHTML.length || 0,
+        visibleText: (el as HTMLElement)?.innerText?.trim().slice(0, 200) || '',
+      };
+    });
+    expect(rendered.hasChildren).toBe(true);
+    expect(rendered.innerHTMLLength).toBeGreaterThan(1000);
+    expect(rendered.visibleText.length).toBeGreaterThan(0);
+  });
+});

examples/getting-started/cdn/.gitignore

@@ -0,0 +1,3 @@
+superdoc.global.js
+style.css
+test_file.docx

examples/getting-started/cdn/README.md

@@ -1,13 +1,27 @@
 # SuperDoc — CDN
 
-Zero build tools. Open `index.html` in a browser or serve with any static server.
+Zero build tools. A single HTML file plus the SuperDoc global bundle.
 
-## Run
+## Run locally
 
 ```bash
+pnpm prepare
 npx serve .
 ```
 
+`pnpm prepare` copies the built `superdoc.global.js`, `style.css`, and a sample `test_file.docx` into this directory so the example is self-contained.
+
+## Use from the public CDN
+
+Replace the local `<script>` and `<link>` with jsDelivr URLs:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/superdoc@1.27/dist/style.css" />
+<script src="https://cdn.jsdelivr.net/npm/superdoc@1.27/dist/superdoc.global.js"></script>
+```
+
+Pin to a minor (`@1.27`) in production and add [SRI hashes](https://developer.mozilla.org/docs/Web/Security/Subresource_Integrity) for integrity.
+
 ## Learn more
 
 - [Vanilla JS Guide](https://docs.superdoc.dev/getting-started/frameworks/vanilla-js)

examples/getting-started/cdn/index.html

@@ -4,32 +4,42 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SuperDoc — CDN</title>
-    <link
-      href="https://cdn.jsdelivr.net/npm/superdoc/dist/style.css"
-      rel="stylesheet"
-    />
-    <script src="https://cdn.jsdelivr.net/npm/superdoc/dist/superdoc.umd.js"></script>
+    <link href="./style.css" rel="stylesheet" />
+    <script src="./superdoc.global.js"></script>
+    <style>
+      body { margin: 0; font-family: system-ui, sans-serif; }
+      #controls { padding: .5rem 1rem; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; display: flex; gap: .5rem; align-items: center; }
+      #toolbar { border-bottom: 1px solid #e2e8f0; }
+      #editor { height: calc(100vh - 92px); }
+    </style>
   </head>
   <body>
-    <div style="padding: 1rem; background: #f5f5f5">
+    <div id="controls">
       <input type="file" id="file-input" accept=".docx" />
+      <span style="color:#64748b;font-size:.875rem">or open the bundled sample</span>
     </div>
-    <div id="editor" style="height: calc(100vh - 60px)"></div>
+    <div id="toolbar"></div>
+    <div id="editor"></div>
 
     <script>
-      var superdoc = new SuperDocLibrary.SuperDoc({
-        selector: '#editor',
-      });
-
-      document.getElementById('file-input').addEventListener('change', function (e) {
-        var file = e.target.files[0];
-        if (!file) return;
-
-        if (superdoc) superdoc.destroy();
-        superdoc = new SuperDocLibrary.SuperDoc({
+      function mount(source) {
+        if (window.__sd) window.__sd.destroy();
+        window.__sd = new SuperDoc({
           selector: '#editor',
-          document: file,
+          toolbar: '#toolbar',
+          document: source,
+          documentMode: 'editing',
+          user: { name: 'Guest', email: 'guest@example.com' },
+          onReady: () => (window.__SUPERDOC_READY__ = true),
         });
+      }
+
+      // Load the bundled sample on first paint so the page shows a real editor.
+      mount('./test_file.docx');
+
+      document.getElementById('file-input').addEventListener('change', function (e) {
+        const file = e.target.files[0];
+        if (file) mount(file);
       });
     </script>
   </body>

examples/getting-started/cdn/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@superdoc-example/cdn",
+  "private": true,
+  "scripts": {
+    "prepare": "node ./prepare.mjs",
+    "dev": "pnpm run prepare && npx serve . -l 3000",
+    "test": "EXAMPLE=cdn playwright test --config ../../__tests__/playwright.config.ts"
+  }
+}

examples/getting-started/cdn/prepare.mjs

@@ -0,0 +1,33 @@
+// Copies the locally built CDN bundle + a sample DOCX into this example dir
+// so `index.html` is self-contained and can be served with `npx serve .`.
+// Run before `dev` or the Playwright smoke test.
+
+import { copyFileSync, existsSync, mkdirSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const dist = resolve(here, '../../../packages/superdoc/dist');
+const sampleSource = resolve(
+  here,
+  '../../advanced/headless-toolbar/vanilla/public/test_file.docx',
+);
+
+const assets = [
+  [resolve(dist, 'superdoc.global.js'), resolve(here, 'superdoc.global.js')],
+  [resolve(dist, 'style.css'), resolve(here, 'style.css')],
+  [sampleSource, resolve(here, 'test_file.docx')],
+];
+
+const missing = assets.filter(([src]) => !existsSync(src)).map(([src]) => src);
+if (missing.length) {
+  console.error('[cdn-example/prepare] Missing sources:\n  ' + missing.join('\n  '));
+  console.error('Run `pnpm --filter superdoc build` first.');
+  process.exit(1);
+}
+
+if (!existsSync(here)) mkdirSync(here, { recursive: true });
+for (const [src, dst] of assets) {
+  copyFileSync(src, dst);
+  console.log('[cdn-example/prepare] copied', dst.replace(here + '/', ''));
+}

packages/superdoc/AGENTS.md

@@ -29,6 +29,64 @@ npm install @superdoc-dev/react  # React (includes superdoc)
 </script>
 ```
 
+## Embed editor — CDN (no build step)
+
+Drop SuperDoc into any HTML page via `<script>` tag. No bundler, no `npm install`. Served from jsDelivr.
+
+### Script tag (global)
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/superdoc@1.27/dist/style.css"
+/>
+<div id="editor" style="height: 100vh"></div>
+<script src="https://cdn.jsdelivr.net/npm/superdoc@1.27/dist/superdoc.global.js"></script>
+<script>
+  const superdoc = new SuperDoc({
+    selector: '#editor',
+    document: '/path/to/file.docx',
+    documentMode: 'editing',
+  });
+</script>
+```
+
+`window.SuperDoc` is the class directly. Named exports are attached as static properties (`SuperDoc.createTheme`, `SuperDoc.DOCX`, etc.). Collaboration (Yjs) and PDF viewing peers are **not** bundled — use the ESM path below if you need them.
+
+### ES modules + import map
+
+For modern apps that want peer-dep control and smaller payload:
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/superdoc@1.27/dist/style.css"
+/>
+<script type="importmap">
+  {
+    "imports": {
+      "superdoc": "https://cdn.jsdelivr.net/npm/superdoc@1.27/dist/superdoc.es.js",
+      "vue": "https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.prod.js"
+    }
+  }
+</script>
+<div id="editor" style="height: 100vh"></div>
+<script type="module">
+  import { SuperDoc } from 'superdoc';
+  new SuperDoc({ selector: '#editor', document: '/path/to/file.docx' });
+</script>
+```
+
+Add `yjs`, `y-prosemirror`, `@hocuspocus/provider`, or `pdfjs-dist` to the import map if your build needs them.
+
+### Production pinning and integrity
+
+- **Pin to a minor** (`@1.27`) for patch updates, or **exact** (`@1.27.0`) if you're hash-pinning.
+- Add [SRI hashes](https://developer.mozilla.org/docs/Web/Security/Subresource_Integrity) for production: `openssl dgst -sha384 -binary superdoc.global.js | openssl base64 -A`. Include `integrity="sha384-..." crossorigin="anonymous"` on each `<script>` / `<link>`.
+- jsDelivr serves immutable, gzipped responses (~1.4 MB on the wire for `superdoc.global.js`).
+
+Unpkg is mirrored automatically: replace `cdn.jsdelivr.net/npm/` with `unpkg.com/`.
+
 ## Embed editor — React
 
 ```tsx

packages/superdoc/package.json

@@ -60,6 +60,8 @@
     "./file-zipper": {
       "import": "./dist/super-editor/file-zipper.es.js"
     },
+    "./global": "./dist/superdoc.global.js",
+    "./global.js": "./dist/superdoc.global.js",
     "./style.css": "./dist/style.css"
   },
   "types": "./dist/superdoc/src/index.d.ts",
@@ -82,20 +84,22 @@
       ]
     }
   },
-  "main": "./dist/superdoc.umd.js",
+  "main": "./dist/superdoc.cjs",
   "module": "./dist/superdoc.es.js",
+  "unpkg": "./dist/superdoc.global.js",
+  "jsdelivr": "./dist/superdoc.global.js",
   "scripts": {
     "dev": "concurrently -k -n VITE,WORD -c cyan,magenta \"vite\" \"node ../../devtools/word-benchmark-sidecar/server.js --stay-alive-on-reuse\"",
     "dev:collab": "concurrently -k -n VITE,COLLAB,WORD -c cyan,green,magenta \"vite\" \"pnpm run collab-server\" \"node ../../devtools/word-benchmark-sidecar/server.js --stay-alive-on-reuse\"",
     "collab-server": "pnpm --filter @superdoc-dev/superdoc-yjs-collaboration build && tsx src/dev/collab-server.ts",
     "word-benchmark-sidecar": "node ../../devtools/word-benchmark-sidecar/server.js",
-    "build": "vite build && pnpm run build:umd",
+    "build": "vite build && pnpm run build:cdn",
     "build:dev": "SUPERDOC_SKIP_DTS=1 vite build",
     "postbuild": "node ./scripts/ensure-types.cjs && node ./scripts/audit-bundle.cjs",
     "build:es": "vite build && pnpm run postbuild",
     "watch:es": "vite build --watch",
-    "build:umd": "vite build --config vite.config.umd.js",
-    "watch:umd": "vite build --watch --config vite.config.umd.js",
+    "build:cdn": "vite build --config vite.config.cdn.js && node ./scripts/emit-umd-alias.cjs",
+    "watch:cdn": "vite build --watch --config vite.config.cdn.js",
     "clean": "rm -rf dist",
     "pack:local": "pnpm run pack",
     "pack": "pnpm run build:es && pnpm pack && mv $(ls superdoc-*.tgz) ./superdoc.tgz",