From 1d4a0814cced137f5c68d92811b80802f6585f16 Mon Sep 17 00:00:00 2001
From: Shuhei Iitsuka <tushuhei@google.com>
Date: Wed, 31 Jul 2024 15:45:37 +0900
Subject: [PATCH] Include DOMPurify in the demo bundle

---
 demo/package-lock.json | 18 +++++++++++++++---
 demo/package.json      |  3 ++-
 demo/src/app.ts        | 12 +++---------
 demo/static/index.html |  1 -
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/demo/package-lock.json b/demo/package-lock.json
index 679aa19f..4c7f0c8e 100644
--- a/demo/package-lock.json
+++ b/demo/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.1.2",
       "license": "Apache-2.0",
       "dependencies": {
-        "budoux": "file:../javascript"
+        "budoux": "file:../javascript",
+        "dompurify": "^3.1.6"
       },
       "devDependencies": {
         "@types/dompurify": "^3.0.3",
@@ -35,7 +36,7 @@
         "@types/jsdom": "^21.1.1",
         "@types/node": "^20.3.3",
         "@typescript-eslint/eslint-plugin": "^7.0.1",
-        "esbuild": "^0.20.0",
+        "esbuild": "^0.23.0",
         "eslint": "^8.44.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-prettier": "^5.0.0",
@@ -609,6 +610,12 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz",
+      "integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==",
+      "license": "(MPL-2.0 OR Apache-2.0)"
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -1371,7 +1378,7 @@
         "@types/node": "^20.3.3",
         "@typescript-eslint/eslint-plugin": "^7.0.1",
         "commander": "^12.0.0",
-        "esbuild": "^0.20.0",
+        "esbuild": "^0.23.0",
         "eslint": "^8.44.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-prettier": "^5.0.0",
@@ -1482,6 +1489,11 @@
         "ms": "^2.1.1"
       }
     },
+    "dompurify": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.1.6.tgz",
+      "integrity": "sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ=="
+    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
diff --git a/demo/package.json b/demo/package.json
index f75dde1c..3540a404 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -18,7 +18,8 @@
   "author": "Shuhei Iitsuka",
   "license": "Apache-2.0",
   "dependencies": {
-    "budoux": "file:../javascript"
+    "budoux": "file:../javascript",
+    "dompurify": "^3.1.6"
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.3",
diff --git a/demo/src/app.ts b/demo/src/app.ts
index 77dd2f05..5bef435b 100644
--- a/demo/src/app.ts
+++ b/demo/src/app.ts
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import DOMPurify from 'dompurify';
 import { loadDefaultJapaneseParser, loadDefaultSimplifiedChineseParser, loadDefaultTraditionalChineseParser, loadDefaultThaiParser } from 'budoux';
 
 const parsers = new Map([
@@ -39,19 +40,12 @@ worker.onmessage = (e: MessageEvent) => {
   console.log('response from worker:', e);
 };
 
-declare global {
-  interface Window {
-    DOMPurify: {
-      sanitize: (value: string) => string;
-    }
-  }
-}
 
 /**
  * Runs the BudouX model to process the input text and render the processed HTML.
  */
 const run = () => {
-  outputContainerElement.innerHTML = window.DOMPurify.sanitize(inputTextElement.value);
+  outputContainerElement.innerHTML = DOMPurify.sanitize(inputTextElement.value);
   const model = modelSelectElement.value;
   worker.postMessage({'sentence': outputContainerElement.textContent, 'model': model});
   const parser = parsers.get(model);
@@ -60,7 +54,7 @@ const run = () => {
   outputContainerElement.style.fontSize = `${fontSizeElement.value}rem`;
   const renderWithBR = brCheckElement.checked;
   if (renderWithBR) {
-    outputContainerElement.innerHTML = window.DOMPurify.sanitize(
+    outputContainerElement.innerHTML = DOMPurify.sanitize(
       outputContainerElement.innerHTML.replace(/\u200b/g, '<br>'));
   }
 };
diff --git a/demo/static/index.html b/demo/static/index.html
index 198745c0..cdad0cbf 100644
--- a/demo/static/index.html
+++ b/demo/static/index.html
@@ -88,7 +88,6 @@ <h1>BudouX 🍇</h1>
       </div>
       <p id="output"></p>
     </main>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.3/purify.min.js"></script>
     <script src="./app.js"></script>
   </body>
 </html>