From 5ad54c34c277c1c6a1b47c99c2c9ec4bf28e2d95 Mon Sep 17 00:00:00 2001
From: felixindrawan <indrawan.felix123@gmail.com>
Date: Wed, 26 Jun 2024 11:44:27 -0700
Subject: [PATCH 1/3] feat: update svelte sample and docs

---
 hello-world/svelte/README.md                  | 364 +++++++++++++++++-
 hello-world/svelte/index.html                 |  10 +-
 hello-world/svelte/src/App.svelte             |  29 +-
 .../svelte/src/components/ImageCapture.svelte | 110 +++---
 .../svelte/src/components/VideoCapture.svelte | 186 ++++-----
 hello-world/svelte/src/dynamsoft.config.ts    |  32 +-
 hello-world/svelte/src/main.ts                |   8 +-
 7 files changed, 555 insertions(+), 184 deletions(-)

diff --git a/hello-world/svelte/README.md b/hello-world/svelte/README.md
index e6cd94fc..91eb989f 100644
--- a/hello-world/svelte/README.md
+++ b/hello-world/svelte/README.md
@@ -1,18 +1,43 @@
-# Svelte + TS + Vite
+# Hello World for Vite + Svelte + TS - Dynamsoft Barcode Reader Sample
 
-This template should help get you started developing with Svelte and TypeScript in Vite.
+[Svelte](https://svelte.dev/) is a JavaScript library meant explicitly for creating interactive UIs. Svelte compiles components into code that directly manipulates the DOM, unlike other frameworks such as Vue and React that relies on a virtual DOM for updates.  Follow this guide to learn how to implement [Dynamsoft Barcode Reader JavaScript SDK](https://www.dynamsoft.com/barcode-reader/sdk-javascript/) (hereafter called "the library") into a Svelte application using Vite. Note that in this sample we will use TypeScript.
+
+In this guide, we will be using [`dynamsoft-barcode-reader-bundle 10.2.1000`](https://www.npmjs.com/package/dynamsoft-barcode-reader-bundle/v/10.2.1000).
+
+> Note:
+>
+> If you’re looking to integrate DBR-JS into a framework that we don't yet have a sample, don't worry! We have a [comprehensive guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/use-in-framework.html) that provides detailed instruction and best practices for a seamless  integration into any frameworks!
+>
+> Additionally, we're here to help! Please don't hesitate to [contact us](#Support) for any support or questions you might have.
+
+## Official Sample
+
+* <a target = "_blank" href="https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/hello-world/svelte">Hello World for Vite + Svelte + TS - Source Code</a>
+
+## Preparation
+
+Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `svelte 4.2.12` are used in the example below.
 
 ## Recommended IDE Setup
 
-[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+* [VS Code](https://code.visualstudio.com/)
+* [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Quick Start 
 
-## Need an official Svelte framework?
+```cmd
+npm install
+npm run
+```
+Then open http://localhost:5173/ to view the sample app. 
+
+### Need an official Svelte framework?
 
 Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
 
-## Technical considerations
+### Technical considerations
 
-**Why use this over SvelteKit?**
+**Why use this template over SvelteKit?**
 
 - It brings its own routing solution which might not be preferable for some users.
 - It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
@@ -45,3 +70,330 @@ If you have state that's important to retain within a component, consider creati
 import { writable } from 'svelte/store'
 export default writable(0)
 ```
+## Create the sample project
+
+If you're planning to start the project from scratch, in this section, we will be creating a Svelte application with Vite utilizing the Dynamsoft Barcode Reader bundle sdk.
+
+We'll be exploring how you could create a page that not only enables barcode scanning via a webcam or a built-in camera, but also decode barcodes from local images.
+
+By the end of this guide, you'll have a good understanding of the SDK and be ready to discover more ways to use it!
+
+### Create a Bootstrapped Svelte Application with Vite and TypeScript
+
+```cmd
+npm create vite@latest my-app                  
+
+<!-- Configurations -->
+√ Select a framework: » Svelte
+√ Select a variant: » TypeScript
+```
+
+### **CD** to the root directory of the application and install necessary libraries
+
+```cmd
+cd my-app
+npm install dynamsoft-barcode-reader-bundle -E
+```
+
+## Start to implement
+
+### Add file "dynamsoft.config.ts" under "/src/" to configure libraries
+
+```typescript
+/* /src/dynamsoft.config.ts */
+import { CoreModule } from "dynamsoft-core";
+import { LicenseManager } from "dynamsoft-license";
+import "dynamsoft-barcode-reader";
+
+// Configures the paths where the .wasm files and other necessary resources for modules are located.
+CoreModule.engineResourcePaths = {
+  std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
+  dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
+  core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
+  license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
+  cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
+  dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
+  dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/",
+};
+
+/** LICENSE ALERT - README
+ * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
+ */
+
+LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", true);
+
+/**
+ * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.
+ * Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.
+ * For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.2.10&utm_source=github#specify-the-license or contact support@dynamsoft.com.
+ * LICENSE ALERT - THE END
+ */
+
+// Optional. Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
+CoreModule.loadWasm(["DBR"]);
+```
+
+> Note:
+>
+> * `initLicense()` specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days. 
+> * `engineResourcePaths` tells the library where to get the necessary resources at runtime.
+
+### Build directory structure
+
+* Create a directory `components` under `/src/`
+
+### Create and edit the `VideoCapture` component
+
+* Create `VideoCapture.svelte` under `/src/components/`. The `VideoCapture` component helps decode barcodes via camera.
+
+* In `VideoCapture.svelte`, add code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). 
+
+```svelte
+<!-- /src/components/VideoCapture.svelte -->
+<script lang="ts">
+  import { onMount } from "svelte";
+  import "../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on.
+  import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer";
+  import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
+  import { MultiFrameResultCrossFilter } from "dynamsoft-utility";
+
+  const componentDestroyedErrorMsg = "VideoCapture Component Destroyed";
+
+  let cameraViewContainer: HTMLDivElement;
+  let resultsContainer: HTMLDivElement;
+
+  let resolveInit: () => void;
+  const pInit: Promise<void> = new Promise((r) => {
+    resolveInit = r;
+  });
+  let isDestroyed = false;
+
+  let cvRouter: CaptureVisionRouter;
+  let cameraEnhancer: CameraEnhancer;
+
+  onMount(() => {
+    (async () => {
+      try {
+        // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
+        const cameraView = await CameraView.createInstance();
+        if (isDestroyed) {
+          throw Error(componentDestroyedErrorMsg);
+        } // Check if component is destroyed after every async
+        cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
+        if (isDestroyed) {
+          throw Error(componentDestroyedErrorMsg);
+        }
+
+        // Get default UI and append it to DOM.
+        cameraViewContainer.append(cameraView.getUIElement());
+
+        // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
+        cvRouter = await CaptureVisionRouter.createInstance();
+        if (isDestroyed) {
+          throw Error(componentDestroyedErrorMsg);
+        }
+        cvRouter.setInput(cameraEnhancer);
+
+        // Define a callback for results.
+        cvRouter.addResultReceiver({
+          onDecodedBarcodesReceived: (result) => {
+            if (!result.barcodeResultItems.length) return;
+
+            resultsContainer.textContent = "";
+            console.log(result);
+            for (let item of result.barcodeResultItems) {
+              resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
+            }
+          },
+        });
+
+        // Filter out unchecked and duplicate results.
+        const filter = new MultiFrameResultCrossFilter();
+        // Filter out unchecked barcodes.
+        filter.enableResultCrossVerification("barcode", true);
+        // Filter out duplicate barcodes within 3 seconds.
+        filter.enableResultDeduplication("barcode", true);
+        await cvRouter.addResultFilter(filter);
+        if (isDestroyed) {
+          throw Error(componentDestroyedErrorMsg);
+        }
+
+        //  Open camera and start scanning single barcode.
+        await cameraEnhancer.open();
+        if (isDestroyed) {
+          throw Error(componentDestroyedErrorMsg);
+        }
+        await cvRouter.startCapturing("ReadSingleBarcode");
+        if (isDestroyed) {
+          throw Error(componentDestroyedErrorMsg);
+        }
+      } catch (ex: any) {
+        if ((ex as Error)?.message === componentDestroyedErrorMsg) {
+          console.log(componentDestroyedErrorMsg);
+        } else {
+          let errMsg = ex.message || ex;
+          console.error(errMsg);
+          alert(errMsg);
+        }
+      }
+
+      // distroy function will wait pInit
+      resolveInit!();
+    })();
+
+    // onBeforeUnmount
+    return async () => {
+      isDestroyed = true;
+      try {
+        await pInit;
+        cvRouter?.dispose();
+        cameraEnhancer?.dispose();
+      } catch (_) {}
+    };
+  });
+</script>
+
+<div>
+  <div bind:this={cameraViewContainer} class="camera-view-container"></div>
+  <br />
+  Results:
+  <div bind:this={resultsContainer} class="results"></div>
+</div>
+```
+
+> Note:
+> 
+> * If you're looking to customize the UI, the UI customization feature are provided by the auxiliary SDK "Dynamsoft Camera Enhancer". For more details, refer to our [User Guide](https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/index.html#customize-the-ui)
+
+### Create and edit the `ImageCapture` component
+
+* Create `ImageCapture.svelte` under `/src/components/`. The `ImageCapture` component helps decode barcodes in an image.
+
+* In `ImageCapture.svelte`, add code for initializing and destroying some instances. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample). 
+
+```svelte
+<!-- /src/components/ImageCapture.svelte -->
+<script lang="ts">
+  import { onMount } from "svelte";
+  import "../dynamsoft.config";
+  import { EnumCapturedResultItemType } from "dynamsoft-core";
+  import { type BarcodeResultItem } from "dynamsoft-barcode-reader";
+  import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
+
+  let resultsContainer: HTMLDivElement;
+
+  let pCvRouter: Promise<CaptureVisionRouter>;
+  let isDestroyed = false;
+
+  const captureImage = async (e: Event) => {
+    let files = [...(e.target! as HTMLInputElement).files!];
+    (e.target! as HTMLInputElement).value = ""; // reset input
+    resultsContainer.innerText = "";
+
+    try {
+      const cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
+      if (isDestroyed) return;
+
+      for (let file of files) {
+        // Decode selected image with 'ReadBarcodes_SpeedFirst' template.
+        const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
+        if (isDestroyed) return;
+
+        // Print file name if there's multiple files
+        if (files.length > 1) {
+          resultsContainer.innerText += `\n${file.name}:\n`;
+        }
+        for (let _item of result.items) {
+          if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) {
+            continue; // check if captured result item is a barcode
+          }
+          let item = _item as BarcodeResultItem;
+          resultsContainer.innerText += item.text + "\n"; // output the decoded barcode text
+          console.log(item.text);
+        }
+        // If no items are found, display that no barcode was detected
+        if (!result.items.length) resultsContainer.innerText += "No barcode found\n";
+      }
+    } catch (ex: any) {
+      let errMsg = ex.message || ex;
+      console.error(errMsg);
+      alert(errMsg);
+    }
+  };
+
+  onMount(() => {
+    // onBeforeUnmount. dispose cvRouter when it's no longer needed
+    return async () => {
+      isDestroyed = true;
+      if (pCvRouter) {
+        try {
+          (await pCvRouter).dispose();
+        } catch (_) {}
+      }
+    };
+  });
+</script>
+
+<div class="image-capture-container">
+  <div class="input-container">
+    <input type="file" multiple on:change={captureImage} accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" />
+  </div>
+  <div class="result" bind:this={resultsContainer}></div>
+</div>
+```
+
+### Add the `VideoCapture` and `ImageCapture` component to `App.svelte`
+
+* On `/src/App.svelte`, we will edit the component so that it offers buttons to switch components between `VideoCapture` and `ImageCapture`.
+
+* Add following code to `App.svelte`. For our stylesheet (CSS) specification, please refer to our [source code](#Official-Sample).
+  
+```svelte
+<!-- /* src/App.svelte */ -->
+<script lang="ts">
+  import VideoCapture from "./components/VideoCapture.svelte";
+  import ImageCapture from "./components/ImageCapture.svelte";
+
+  let mode = "video";
+</script>
+
+<main>
+  <div class="App">
+    <div class="title">
+      <h2 class="title-text">Hello World for Svelte</h2>
+      <img class="title-logo" src="https://www.svelte.cn/svelte-logo-horizontal.svg" alt="svelte" />
+    </div>
+    <div class="buttons-container">
+      <button
+        style="background-color: {mode === 'video' ? 'rgb(255, 174, 55)' : 'white'}"
+        on:click={() => {
+          mode = "video";
+        }}>Decode Video</button
+      >
+      <button
+        style="background-color: {mode === 'image' ? 'rgb(255, 174, 55)' : 'white'}"
+        on:click={() => {
+          mode = "image";
+        }}>Decode Image</button
+      >
+    </div>
+    {#if mode === "video"}
+      <VideoCapture></VideoCapture>
+    {:else}
+      <ImageCapture></ImageCapture>
+    {/if}
+  </div>
+</main>
+```
+
+* Try running the project.
+
+```cmd
+npm run dev
+```
+
+If you followed all the steps correctly, you will have a working page that turns one of the cameras hooked to or built in your computer or mobile device into a barcode scanner. Also, if you want to decode a local image, just click the `Decode Image` button and select the image you want to decode. Once barcodes are found, the results will show in a dialog. 
+
+## Support
+
+If you have any questions, feel free to [contact Dynamsoft support](https://www.dynamsoft.com/company/contact?utm_source=sampleReadme).
\ No newline at end of file
diff --git a/hello-world/svelte/index.html b/hello-world/svelte/index.html
index 9073fad5..6471fdec 100644
--- a/hello-world/svelte/index.html
+++ b/hello-world/svelte/index.html
@@ -1,9 +1,15 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Svelte + TS</title>
+    <meta name="keywords" content="barcodes, camera, images, vite, svelte" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+      content="Dynamsoft Barcode Reader in a Vite + Svelte Application, helps read barcodes from camera or images."
+    />
+    <title>Hello World for Vite + Svelte + TS - Dynamsoft Barcode Reader Sample</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/hello-world/svelte/src/App.svelte b/hello-world/svelte/src/App.svelte
index 679012ba..78d16127 100644
--- a/hello-world/svelte/src/App.svelte
+++ b/hello-world/svelte/src/App.svelte
@@ -9,24 +9,20 @@
   <div class="App">
     <div class="title">
       <h2 class="title-text">Hello World for Svelte</h2>
-      <img
-        class="title-logo"
-        src="https://www.svelte.cn/svelte-logo-horizontal.svg"
-        alt="svelte"
-      />
+      <img class="title-logo" src="https://www.svelte.cn/svelte-logo-horizontal.svg" alt="svelte" />
     </div>
-    <div class="top-btns">
+    <div class="buttons-container">
       <button
         style="background-color: {mode === 'video' ? 'rgb(255, 174, 55)' : 'white'}"
         on:click={() => {
           mode = "video";
-        }}>Video Capture</button
+        }}>Decode Video</button
       >
       <button
         style="background-color: {mode === 'image' ? 'rgb(255, 174, 55)' : 'white'}"
         on:click={() => {
           mode = "image";
-        }}>Image Capture</button
+        }}>Decode Image</button
       >
     </div>
     {#if mode === "video"}
@@ -51,40 +47,41 @@
     align-items: center;
     margin-top: 20px;
   }
+
   .title .title-logo {
     width: 70px;
     height: 30px;
     margin-left: 10px;
   }
 
-  .top-btns {
+  .buttons-container {
     width: 30%;
     margin: 20px auto;
   }
 
-  .top-btns button {
+  .buttons-container button {
     display: inline-block;
     border: 1px solid black;
     padding: 5px 15px;
     background-color: transparent;
     cursor: pointer;
-    /* TODO */
-    margin-right: -5px; 
+    margin-right: -5px;
   }
 
-  .top-btns button:first-child {
+  .buttons-container button:first-child {
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
     border-right: transparent;
   }
-  .top-btns button:nth-child(2) {
+
+  .buttons-container button:nth-child(2) {
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
     border-left: transparent;
   }
 
-  @media screen and (max-width: 500px) {
-    .top-btns {
+  @media screen and (max-width: 800px) {
+    .buttons-container {
       width: 70%;
     }
   }
diff --git a/hello-world/svelte/src/components/ImageCapture.svelte b/hello-world/svelte/src/components/ImageCapture.svelte
index 75735b91..1fbaf6c1 100644
--- a/hello-world/svelte/src/components/ImageCapture.svelte
+++ b/hello-world/svelte/src/components/ImageCapture.svelte
@@ -1,69 +1,73 @@
 <script lang="ts">
-import { onMount } from "svelte";
-import "../dynamsoft.config";
-import { EnumCapturedResultItemType } from "dynamsoft-core";
-import { type BarcodeResultItem } from "dynamsoft-barcode-reader";
-import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
+  import { onMount } from "svelte";
+  import "../dynamsoft.config";
+  import { EnumCapturedResultItemType } from "dynamsoft-core";
+  import { type BarcodeResultItem } from "dynamsoft-barcode-reader";
+  import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
 
-let resDiv: HTMLDivElement;
+  let resultsContainer: HTMLDivElement;
 
-let pCvRouter: Promise<CaptureVisionRouter>;
-let bDestoried = false;
+  let pCvRouter: Promise<CaptureVisionRouter>;
+  let isDestroyed = false;
 
+  const captureImage = async (e: Event) => {
+    let files = [...(e.target! as HTMLInputElement).files!];
+    (e.target! as HTMLInputElement).value = ""; // reset input
+    resultsContainer.innerText = "";
 
-const captureImage = async (e: Event) => {
-  let files = [...(e.target! as HTMLInputElement).files!];
-  (e.target! as HTMLInputElement).value = '';
-  resDiv.innerText = "";
-  try {
-    const cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
-    if (bDestoried) return;
-    
-    for(let file of files){
-      // Decode selected image with 'ReadBarcodes_SpeedFirst' template.
-      const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
-      if (bDestoried) return;
+    try {
+      const cvRouter = await (pCvRouter = pCvRouter || CaptureVisionRouter.createInstance());
+      if (isDestroyed) return;
 
-      if(files.length > 1){
-        resDiv.innerText += `\n${file.name}:\n`;
-      }
-      for (let _item of result.items) {
-        if(_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) { continue; }
-        let item = _item as BarcodeResultItem;
-        resDiv.innerText += item.text + "\n";
-        console.log(item.text);
-      }
-      if (!result.items.length) resDiv.innerText += 'No barcode found\n';
-    }
-  } catch (ex: any) {
-    let errMsg = ex.message || ex;
-    console.error(errMsg);
-    alert(errMsg);
-  }
-};
+      for (let file of files) {
+        // Decode selected image with 'ReadBarcodes_SpeedFirst' template.
+        const result = await cvRouter.capture(file, "ReadBarcodes_SpeedFirst");
+        if (isDestroyed) return;
 
-onMount(() => {
-  // onBeforeUnmount
-  return async()=>{
-    bDestoried = true;
-    if(pCvRouter){
-      try{
-        (await pCvRouter).dispose();
-      }catch(_){}
+        // Print file name if there's multiple files
+        if (files.length > 1) {
+          resultsContainer.innerText += `\n${file.name}:\n`;
+        }
+        for (let _item of result.items) {
+          if (_item.type !== EnumCapturedResultItemType.CRIT_BARCODE) {
+            continue; // check if captured result item is a barcode
+          }
+          let item = _item as BarcodeResultItem;
+          resultsContainer.innerText += item.text + "\n"; // output the decoded barcode text
+          console.log(item.text);
+        }
+        // If no items are found, display that no barcode was detected
+        if (!result.items.length) resultsContainer.innerText += "No barcode found\n";
+      }
+    } catch (ex: any) {
+      let errMsg = ex.message || ex;
+      console.error(errMsg);
+      alert(errMsg);
     }
   };
-});
+
+  onMount(() => {
+    // onBeforeUnmount. dispose cvRouter when it's no longer needed
+    return async () => {
+      isDestroyed = true;
+      if (pCvRouter) {
+        try {
+          (await pCvRouter).dispose();
+        } catch (_) {}
+      }
+    };
+  });
 </script>
 
-<div class="capture-img">
-  <div class="img-ipt">
-    <input type="file" multiple on:change={captureImage} accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp"/>
+<div class="image-capture-container">
+  <div class="input-container">
+    <input type="file" multiple on:change={captureImage} accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" />
   </div>
-  <div class="result-area" bind:this={resDiv}></div>
+  <div class="result" bind:this={resultsContainer}></div>
 </div>
 
 <style>
-  .capture-img {
+  .image-capture-container {
     width: 100%;
     height: 100%;
     font-family:
@@ -77,7 +81,7 @@ onMount(() => {
       monospace;
   }
 
-  .capture-img .img-ipt {
+  .image-capture-container .input-container {
     width: 80%;
     height: 100%;
     display: flex;
@@ -86,7 +90,7 @@ onMount(() => {
     margin: 0 auto;
   }
 
-  .capture-img .result-area {
+  .image-capture-container .result {
     margin-top: 20px;
   }
 </style>
diff --git a/hello-world/svelte/src/components/VideoCapture.svelte b/hello-world/svelte/src/components/VideoCapture.svelte
index 3e49ea5e..f29aac92 100644
--- a/hello-world/svelte/src/components/VideoCapture.svelte
+++ b/hello-world/svelte/src/components/VideoCapture.svelte
@@ -1,109 +1,119 @@
 <script lang="ts">
-import { onMount } from "svelte";
-import "../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on.
-import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer";
-import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
-import { MultiFrameResultCrossFilter } from "dynamsoft-utility";
-
-const strErrorDistoryed = 'videoCapture component destoryed';
-
-let uiContainer: HTMLDivElement;
-let resultsContainer: HTMLDivElement;
-
-let resolveInit:()=>void;
-const pInit:Promise<void> = new Promise(r=>{resolveInit=r});
-let bDestoryed = false;
-
-let cvRouter:CaptureVisionRouter;
-let cameraEnhancer:CameraEnhancer;
-
-onMount(() => {
-  (async () => {
-    try{
-      // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
-      const cameraView = await CameraView.createInstance();
-      if(bDestoryed){ throw Error(strErrorDistoryed); } // Check if component is destroyed after every async
-      cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
-      if(bDestoryed){ throw Error(strErrorDistoryed); }
-
-      // Get default UI and append it to DOM.
-      uiContainer.append(cameraView.getUIElement());
-
-      // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
-      cvRouter = await CaptureVisionRouter.createInstance();
-      if(bDestoryed){ throw Error(strErrorDistoryed); }
-      cvRouter.setInput(cameraEnhancer);
-
-      // Define a callback for results.
-      cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
-        if (!result.barcodeResultItems.length) return;
-
-        resultsContainer.textContent = '';
-        console.log(result);
-        for (let item of result.barcodeResultItems) {
-          resultsContainer.append(
-            `${item.formatString}: ${item.text}`,
-            document.createElement('br'),
-            document.createElement('hr'),
-          );
+  import { onMount } from "svelte";
+  import "../dynamsoft.config"; // import side effects. The license, engineResourcePath, so on.
+  import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer";
+  import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
+  import { MultiFrameResultCrossFilter } from "dynamsoft-utility";
+
+  const componentDestroyedErrorMsg = "VideoCapture Component Destroyed";
+
+  let cameraViewContainer: HTMLDivElement;
+  let resultsContainer: HTMLDivElement;
+
+  let resolveInit: () => void;
+  const pInit: Promise<void> = new Promise((r) => {
+    resolveInit = r;
+  });
+  let isDestroyed = false;
+
+  let cvRouter: CaptureVisionRouter;
+  let cameraEnhancer: CameraEnhancer;
+
+  onMount(() => {
+    (async () => {
+      try {
+        // Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
+        const cameraView = await CameraView.createInstance();
+        if (isDestroyed) {
+          throw Error(componentDestroyedErrorMsg);
+        } // Check if component is destroyed after every async
+        cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
+        if (isDestroyed) {
+          throw Error(componentDestroyedErrorMsg);
         }
-      }});
 
-      // Filter out unchecked and duplicate results.
-      const filter = new MultiFrameResultCrossFilter();
-      // Filter out unchecked barcodes.
-      filter.enableResultCrossVerification("barcode", true);
-      // Filter out duplicate barcodes within 3 seconds.
-      filter.enableResultDeduplication("barcode", true);
-      await cvRouter.addResultFilter(filter);
-      if(bDestoryed){ throw Error(strErrorDistoryed); }
+        // Get default UI and append it to DOM.
+        cameraViewContainer.append(cameraView.getUIElement());
 
-      // Open camera and start scanning single barcode.
-      await cameraEnhancer.open();
-      if(bDestoryed){ throw Error(strErrorDistoryed); }
-      await cvRouter.startCapturing("ReadSingleBarcode");
-      if(bDestoryed){ throw Error(strErrorDistoryed); }
+        // Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
+        cvRouter = await CaptureVisionRouter.createInstance();
+        if (isDestroyed) {
+          throw Error(componentDestroyedErrorMsg);
+        }
+        cvRouter.setInput(cameraEnhancer);
+
+        // Define a callback for results.
+        cvRouter.addResultReceiver({
+          onDecodedBarcodesReceived: (result) => {
+            if (!result.barcodeResultItems.length) return;
+
+            resultsContainer.textContent = "";
+            console.log(result);
+            for (let item of result.barcodeResultItems) {
+              resultsContainer.textContent += `${item.formatString}: ${item.text}\n\n`;
+            }
+          },
+        });
+
+        // Filter out unchecked and duplicate results.
+        const filter = new MultiFrameResultCrossFilter();
+        // Filter out unchecked barcodes.
+        filter.enableResultCrossVerification("barcode", true);
+        // Filter out duplicate barcodes within 3 seconds.
+        filter.enableResultDeduplication("barcode", true);
+        await cvRouter.addResultFilter(filter);
+        if (isDestroyed) {
+          throw Error(componentDestroyedErrorMsg);
+        }
 
-    }catch(ex:any){
-      
-      if((ex as Error)?.message === strErrorDistoryed){
-        console.log(strErrorDistoryed);
-      }else{
-        let errMsg = ex.message || ex;
-        console.error(errMsg);
-        alert(errMsg);
+        //  Open camera and start scanning single barcode.
+        await cameraEnhancer.open();
+        if (isDestroyed) {
+          throw Error(componentDestroyedErrorMsg);
+        }
+        await cvRouter.startCapturing("ReadSingleBarcode");
+        if (isDestroyed) {
+          throw Error(componentDestroyedErrorMsg);
+        }
+      } catch (ex: any) {
+        if ((ex as Error)?.message === componentDestroyedErrorMsg) {
+          console.log(componentDestroyedErrorMsg);
+        } else {
+          let errMsg = ex.message || ex;
+          console.error(errMsg);
+          alert(errMsg);
+        }
       }
-    }
-
-    // distroy function will wait pInit
-    resolveInit!();
-  })();
 
-  // onBeforeUnmount
-  return async () => {
-    bDestoryed = true;
-    try{
-      await pInit;
-      cvRouter?.dispose();
-      cameraEnhancer?.dispose();
-    }catch(_){}
-  };
-});
+      // distroy function will wait pInit
+      resolveInit!();
+    })();
+
+    // onBeforeUnmount
+    return async () => {
+      isDestroyed = true;
+      try {
+        await pInit;
+        cvRouter?.dispose();
+        cameraEnhancer?.dispose();
+      } catch (_) {}
+    };
+  });
 </script>
 
 <div>
-  <div bind:this={uiContainer} class="div-ui-container"></div>
+  <div bind:this={cameraViewContainer} class="camera-view-container"></div>
   Results:<br />
-  <div bind:this={resultsContainer} class="div-results-container"></div>
+  <div bind:this={resultsContainer} class="results"></div>
 </div>
 
 <style>
-  .div-ui-container {
+  .camera-view-container {
     width: 100%;
     height: 70vh;
     background: #eee;
   }
-  .div-results-container {
+  .results {
     width: 100%;
     height: 10vh;
     overflow: auto;
diff --git a/hello-world/svelte/src/dynamsoft.config.ts b/hello-world/svelte/src/dynamsoft.config.ts
index ac0b2d81..24909a1c 100644
--- a/hello-world/svelte/src/dynamsoft.config.ts
+++ b/hello-world/svelte/src/dynamsoft.config.ts
@@ -1,12 +1,24 @@
-import { CoreModule } from 'dynamsoft-core';
-import { LicenseManager } from 'dynamsoft-license';
-import 'dynamsoft-barcode-reader';
+/* /src/dynamsoft.config.ts */
+import { CoreModule } from "dynamsoft-core";
+import { LicenseManager } from "dynamsoft-license";
+import "dynamsoft-barcode-reader";
+
+// Configures the paths where the .wasm files and other necessary resources for modules are located.
+CoreModule.engineResourcePaths = {
+  std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
+  dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
+  core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
+  license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
+  cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
+  dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
+  dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/",
+};
 
 /** LICENSE ALERT - README
  * To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
  */
 
-LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9');
+LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9", true);
 
 /**
  * You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=github&product=dbr&package=js to get your own trial license good for 30 days.
@@ -15,15 +27,5 @@ LicenseManager.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9');
  * LICENSE ALERT - THE END
  */
 
-CoreModule.engineResourcePaths = {
-  std: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-std@1.2.10/dist/",
-  dip: "https://cdn.jsdelivr.net/npm/dynamsoft-image-processing@2.2.30/dist/",
-  core: "https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.30/dist/",
-  license: "https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.21/dist/",
-  cvr: "https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.30/dist/",
-  dbr: "https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader@10.2.10/dist/",
-  dce: "https://cdn.jsdelivr.net/npm/dynamsoft-camera-enhancer@4.0.3/dist/"
-};
-
 // Optional. Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
-CoreModule.loadWasm(['DBR']);
+CoreModule.loadWasm(["DBR"]);
diff --git a/hello-world/svelte/src/main.ts b/hello-world/svelte/src/main.ts
index d5f003c5..8c4eaed9 100644
--- a/hello-world/svelte/src/main.ts
+++ b/hello-world/svelte/src/main.ts
@@ -1,7 +1,7 @@
-import App from './App.svelte'
+import App from "./App.svelte";
 
 const app = new App({
-  target: document.getElementById('app')!,
-})
+  target: document.getElementById("app")!,
+});
 
-export default app
+export default app;

From 0745103a8691b73c8a353465e3391b4e52e3cffa Mon Sep 17 00:00:00 2001
From: felixindrawan <indrawan.felix123@gmail.com>
Date: Wed, 26 Jun 2024 13:02:52 -0700
Subject: [PATCH 2/3] fix: add white-space prewrap

---
 hello-world/svelte/src/components/VideoCapture.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/hello-world/svelte/src/components/VideoCapture.svelte b/hello-world/svelte/src/components/VideoCapture.svelte
index f29aac92..d7393a7a 100644
--- a/hello-world/svelte/src/components/VideoCapture.svelte
+++ b/hello-world/svelte/src/components/VideoCapture.svelte
@@ -117,5 +117,6 @@
     width: 100%;
     height: 10vh;
     overflow: auto;
+    white-space: pre-wrap;
   }
 </style>

From 1569aee606545d3780da8a6395cf5628413b3989 Mon Sep 17 00:00:00 2001
From: Keillion <keillionv@gmail.com>
Date: Tue, 2 Jul 2024 11:00:06 +0800
Subject: [PATCH 3/3] feat: remove README generated by framework

---
 hello-world/svelte/README.md | 44 ------------------------------------
 1 file changed, 44 deletions(-)

diff --git a/hello-world/svelte/README.md b/hello-world/svelte/README.md
index 91eb989f..ce80768d 100644
--- a/hello-world/svelte/README.md
+++ b/hello-world/svelte/README.md
@@ -18,11 +18,6 @@ In this guide, we will be using [`dynamsoft-barcode-reader-bundle 10.2.1000`](ht
 
 Make sure you have [node](https://nodejs.org/) installed. `node 16.20.1` and `svelte 4.2.12` are used in the example below.
 
-## Recommended IDE Setup
-
-* [VS Code](https://code.visualstudio.com/)
-* [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
-
 ## Quick Start 
 
 ```cmd
@@ -31,45 +26,6 @@ npm run
 ```
 Then open http://localhost:5173/ to view the sample app. 
 
-### Need an official Svelte framework?
-
-Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
-
-### Technical considerations
-
-**Why use this template over SvelteKit?**
-
-- It brings its own routing solution which might not be preferable for some users.
-- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
-
-This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
-
-Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
-
-**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
-
-Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
-
-**Why include `.vscode/extensions.json`?**
-
-Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
-
-**Why enable `allowJs` in the TS template?**
-
-While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
-
-**Why is HMR not preserving my local component state?**
-
-HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
-
-If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
-
-```ts
-// store.ts
-// An extremely simple external store
-import { writable } from 'svelte/store'
-export default writable(0)
-```
 ## Create the sample project
 
 If you're planning to start the project from scratch, in this section, we will be creating a Svelte application with Vite utilizing the Dynamsoft Barcode Reader bundle sdk.