From df49ce75451cbea683b7941a849a4c4e736888f5 Mon Sep 17 00:00:00 2001
From: gsb <gsb@amazon.com>
Date: Wed, 29 Apr 2026 01:39:16 +0000
Subject: [PATCH] Single ribbit namespace instead of window globals

Use esbuild --global-name=ribbit to expose a single namespace.
---
 package.json            |  4 ++--
 src/ts/ribbit-editor.ts | 22 +++++++----------
 test/test_hopdown.js    | 53 +++++++++++++++++++++--------------------
 3 files changed, 38 insertions(+), 41 deletions(-)

diff --git a/package.json b/package.json
index 2195c64..20dce8e 100644
--- a/package.json
+++ b/package.json
@@ -11,8 +11,8 @@
   "scripts": {
     "build": "mkdir -p dist/ribbit && npm run build:check && npm run build:js && npm run build:min && npm run build:css",
     "build:check": "tsc --noEmit",
-    "build:js": "esbuild src/ts/ribbit-editor.ts --bundle --format=iife --sourcemap --outfile=dist/ribbit/ribbit.js",
-    "build:min": "esbuild src/ts/ribbit-editor.ts --bundle --format=iife --minify --outfile=dist/ribbit/ribbit.min.js",
+    "build:js": "esbuild src/ts/ribbit-editor.ts --bundle --format=iife --global-name=ribbit --sourcemap --outfile=dist/ribbit/ribbit.js",
+    "build:min": "esbuild src/ts/ribbit-editor.ts --bundle --format=iife --global-name=ribbit --minify --outfile=dist/ribbit/ribbit.min.js",
     "build:css": "cp src/static/ribbit-core.css dist/ribbit/ && cp -r src/static/themes dist/ribbit/",
     "test": "npm run build && node test/test_hopdown.js"
   },
diff --git a/src/ts/ribbit-editor.ts b/src/ts/ribbit-editor.ts
index 19d4574..1b65381 100644
--- a/src/ts/ribbit-editor.ts
+++ b/src/ts/ribbit-editor.ts
@@ -102,16 +102,12 @@ export class RibbitEditor extends Ribbit {
     }
 }
 
-// Attach public API to window for <script> tag usage.
-(window as any).HopDown = HopDown;
-(window as any).inlineTag = inlineTag;
-(window as any).defaultTags = defaultTags;
-(window as any).defaultBlockTags = defaultBlockTags;
-(window as any).defaultInlineTags = defaultInlineTags;
-(window as any).defaultTheme = defaultTheme;
-(window as any).Ribbit = Ribbit;
-(window as any).RibbitEditor = RibbitEditor;
-(window as any).RibbitPlugin = RibbitPlugin;
-(window as any).camelCase = camelCase;
-(window as any).decodeHtmlEntities = decodeHtmlEntities;
-(window as any).encodeHtmlEntities = encodeHtmlEntities;
+// Public API — accessed as ribbit.Editor, ribbit.HopDown, etc.
+export { RibbitEditor as Editor };
+export { Ribbit as Viewer };
+export { RibbitPlugin as Plugin };
+export { HopDown };
+export { inlineTag };
+export { defaultTags, defaultBlockTags, defaultInlineTags };
+export { defaultTheme };
+export { camelCase, decodeHtmlEntities, encodeHtmlEntities };
diff --git a/test/test_hopdown.js b/test/test_hopdown.js
index 8743000..bb92a8e 100644
--- a/test/test_hopdown.js
+++ b/test/test_hopdown.js
@@ -12,11 +12,12 @@ global.document = dom.window.document;
 global.HTMLElement = dom.window.HTMLElement;
 global.Node = dom.window.Node;
 
-// Load the compiled bundle (attaches globals to window)
+// Load the compiled bundle — esbuild IIFE assigns to var ribbit,
+// but eval in jsdom doesn't attach vars to window, so we patch it.
 const bundle = fs.readFileSync(path.join(__dirname, '..', 'dist', 'ribbit', 'ribbit.js'), 'utf8');
-dom.window.eval(bundle);
+dom.window.eval(bundle.replace('var ribbit =', 'window.ribbit ='));
 
-const hopdown = new dom.window.HopDown();
+const hopdown = new dom.window.ribbit.HopDown();
 const H = hopdown.toHTML.bind(hopdown);
 const M = hopdown.toMarkdown.bind(hopdown);
 function rt(md) { return M(H(md)); }
@@ -287,22 +288,22 @@ eq('td link>bold rt', rt('| h |\n|---|\n| [**t**](u) |'), '| h |\n| --- |\n| [**
 eq('multi-cell rt', rt('| **a** | *b* |\n|---|---|\n| `c` | [d](e) |'), '| **a** | *b* |\n| --- | --- |\n| `c` | [d](e) |');
 
 // ── 18. inlineTag() factory ─────────────────────────────
-const strikethrough = dom.window.inlineTag({
+const strikethrough = dom.window.ribbit.inlineTag({
     name: 'strikethrough',
     delimiter: '~~',
     htmlTag: 'del',
     aliases: 'S,STRIKE',
     precedence: 45,
 });
-const customInline = new dom.window.HopDown({
-    tags: { ...dom.window.defaultTags, 'DEL,S,STRIKE': strikethrough },
+const customInline = new dom.window.ribbit.HopDown({
+    tags: { ...dom.window.ribbit.defaultTags, 'DEL,S,STRIKE': strikethrough },
 });
 eq('factory: md→html', customInline.toHTML('~~struck~~'), '<p><del>struck</del></p>');
 has('factory: html→md', customInline.toMarkdown('<p><del>struck</del></p>'), '~~struck~~');
 eq('factory: round-trip', customInline.toMarkdown(customInline.toHTML('~~struck~~')), '~~struck~~');
 has('factory: mixed with bold', customInline.toHTML('**bold** and ~~struck~~'), '<del>struck</del>');
 has('factory: mixed with bold', customInline.toHTML('**bold** and ~~struck~~'), '<strong>bold</strong>');
-eq('factory: non-recursive', dom.window.inlineTag({
+eq('factory: non-recursive', dom.window.ribbit.inlineTag({
     name: 'test',
     delimiter: '%%',
     htmlTag: 'mark',
@@ -324,8 +325,8 @@ const spoiler = {
     selector: 'DETAILS',
     toMarkdown: (element, convert) => '\n\n|||\n' + convert.children(element).trim() + '\n|||\n\n',
 };
-const customBlock = new dom.window.HopDown({
-    tags: { 'DETAILS': spoiler, ...dom.window.defaultTags },
+const customBlock = new dom.window.ribbit.HopDown({
+    tags: { 'DETAILS': spoiler, ...dom.window.ribbit.defaultTags },
 });
 has('custom block: md→html', customBlock.toHTML('|||\nhidden\n|||'), '<details>');
 has('custom block: content', customBlock.toHTML('|||\nhidden\n|||'), 'hidden');
@@ -333,22 +334,22 @@ has('custom block: html→md', customBlock.toMarkdown('<details><summary>Spoiler
 has('custom block: nested md', customBlock.toHTML('|||\n**bold** inside\n|||'), '<strong>bold</strong>');
 
 // ── 20. HopDown({ exclude }) ────────────────────────────
-const noTables = new dom.window.HopDown({ exclude: ['table'] });
+const noTables = new dom.window.ribbit.HopDown({ exclude: ['table'] });
 // With table excluded, pipe lines fall through to paragraph but isBlockStart
 // still detects table-like patterns, so lines are split across paragraphs.
 has('exclude: table not rendered', noTables.toHTML('| a | b |\n|---|---|\n| 1 | 2 |'), '<p>');
 not('exclude: no table tag', noTables.toHTML('| a | b |\n|---|---|\n| 1 | 2 |'), '<table>');
 has('exclude: bold still works', noTables.toHTML('**bold**'), '<strong>bold</strong>');
 
-const noCode = new dom.window.HopDown({ exclude: ['code'] });
+const noCode = new dom.window.ribbit.HopDown({ exclude: ['code'] });
 eq('exclude: code not processed', noCode.toHTML('`code`'), '<p>`code`</p>');
 has('exclude: bold still works', noCode.toHTML('**bold**'), '<strong>bold</strong>');
 
 // ── 21. Collision detection: delimiter ───────────────────
 let threw = false;
 try {
-    const bad = dom.window.inlineTag({ name: 'bad', delimiter: '*', htmlTag: 'span', precedence: 10 });
-    new dom.window.HopDown({ tags: { ...dom.window.defaultTags, 'SPAN': bad } });
+    const bad = dom.window.ribbit.inlineTag({ name: 'bad', delimiter: '*', htmlTag: 'span', precedence: 10 });
+    new dom.window.ribbit.HopDown({ tags: { ...dom.window.ribbit.defaultTags, 'SPAN': bad } });
 } catch (e) {
     threw = true;
 }
@@ -357,8 +358,8 @@ eq('delimiter collision throws', String(threw), 'true');
 threw = false;
 try {
     // Same delimiter, higher precedence than existing — should throw
-    const bad = dom.window.inlineTag({ name: 'bad', delimiter: '**', htmlTag: 'span', precedence: 60 });
-    new dom.window.HopDown({ tags: { ...dom.window.defaultTags, 'SPAN': bad } });
+    const bad = dom.window.ribbit.inlineTag({ name: 'bad', delimiter: '**', htmlTag: 'span', precedence: 60 });
+    new dom.window.ribbit.HopDown({ tags: { ...dom.window.ribbit.defaultTags, 'SPAN': bad } });
 } catch (e) {
     threw = true;
 }
@@ -368,7 +369,7 @@ eq('duplicate delimiter collision throws', String(threw), 'true');
 threw = false;
 try {
     const dup = { name: 'dup', match: () => null, toHTML: () => '', selector: 'STRONG', toMarkdown: () => '' };
-    new dom.window.HopDown({ tags: { ...dom.window.defaultTags, 'STRONG': dup } });
+    new dom.window.ribbit.HopDown({ tags: { ...dom.window.ribbit.defaultTags, 'STRONG': dup } });
 } catch (e) {
     threw = true;
 }
@@ -376,10 +377,10 @@ eq('selector collision throws', String(threw), 'true');
 
 // ── 23. Precedence ordering ─────────────────────────────
 // Longer delimiter with lower precedence should win
-const tilde = dom.window.inlineTag({ name: 'tilde', delimiter: '~', htmlTag: 's', precedence: 45 });
-const doubleTilde = dom.window.inlineTag({ name: 'doubleTilde', delimiter: '~~', htmlTag: 'del', precedence: 35 });
-const precTest = new dom.window.HopDown({
-    tags: { ...dom.window.defaultTags, 'S': tilde, 'DEL': doubleTilde },
+const tilde = dom.window.ribbit.inlineTag({ name: 'tilde', delimiter: '~', htmlTag: 's', precedence: 45 });
+const doubleTilde = dom.window.ribbit.inlineTag({ name: 'doubleTilde', delimiter: '~~', htmlTag: 'del', precedence: 35 });
+const precTest = new dom.window.ribbit.HopDown({
+    tags: { ...dom.window.ribbit.defaultTags, 'S': tilde, 'DEL': doubleTilde },
 });
 has('precedence: ~~ matches before ~', precTest.toHTML('~~struck~~'), '<del>struck</del>');
 has('precedence: ~ still works', precTest.toHTML('~light~'), '<s>light</s>');
@@ -387,9 +388,9 @@ has('precedence: ~ still works', precTest.toHTML('~light~'), '<s>light</s>');
 // Valid: longer delimiter has lower precedence
 threw = false;
 try {
-    const short = dom.window.inlineTag({ name: 'short', delimiter: '~', htmlTag: 's', precedence: 50 });
-    const long = dom.window.inlineTag({ name: 'long', delimiter: '~~', htmlTag: 'del', precedence: 40 });
-    new dom.window.HopDown({ tags: { ...dom.window.defaultTags, 'S': short, 'DEL': long } });
+    const short = dom.window.ribbit.inlineTag({ name: 'short', delimiter: '~', htmlTag: 's', precedence: 50 });
+    const long = dom.window.ribbit.inlineTag({ name: 'long', delimiter: '~~', htmlTag: 'del', precedence: 40 });
+    new dom.window.ribbit.HopDown({ tags: { ...dom.window.ribbit.defaultTags, 'S': short, 'DEL': long } });
 } catch (e) {
     threw = true;
 }
@@ -398,9 +399,9 @@ eq('valid precedence does not throw', String(threw), 'false');
 // Invalid: longer delimiter has higher precedence
 threw = false;
 try {
-    const short = dom.window.inlineTag({ name: 'short', delimiter: '~', htmlTag: 's', precedence: 30 });
-    const long = dom.window.inlineTag({ name: 'long', delimiter: '~~', htmlTag: 'del', precedence: 50 });
-    new dom.window.HopDown({ tags: { ...dom.window.defaultTags, 'S': short, 'DEL': long } });
+    const short = dom.window.ribbit.inlineTag({ name: 'short', delimiter: '~', htmlTag: 's', precedence: 30 });
+    const long = dom.window.ribbit.inlineTag({ name: 'long', delimiter: '~~', htmlTag: 'del', precedence: 50 });
+    new dom.window.ribbit.HopDown({ tags: { ...dom.window.ribbit.defaultTags, 'S': short, 'DEL': long } });
 } catch (e) {
     threw = true;
 }