Include DOMPurify in the demo bundle

google · Jul 31, 2024 · 1d4a081 · 1d4a081
1 parent 57f5581
commit 1d4a081
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git 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
@@ -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
@@ -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>