From b2625da20bf428c54ba31764c92fe5bc9a0721e6 Mon Sep 17 00:00:00 2001 From: Keillion-Dynamsoft Date: Tue, 28 Jul 2026 16:25:20 +0800 Subject: [PATCH 1/7] add sample for Using TypeScript in UI Definition --- programming/features/ui-customization-js.md | 60 +++++++++++---------- 1 file changed, 33 insertions(+), 27 deletions(-) diff --git a/programming/features/ui-customization-js.md b/programming/features/ui-customization-js.md index d3ca20b1..ceffac84 100644 --- a/programming/features/ui-customization-js.md +++ b/programming/features/ui-customization-js.md @@ -347,7 +347,7 @@ elTakePhoto.addEventListener('pointerdown', async()=>{ The UI definition accepts external scripts and styles, so you can easily write code in TypeScript and reference the generated JavaScript after running `tsc`. ```ts -// in myui.ts +// in dce.ui.ts // You must use `import type`; otherwise, // the entire 'dynamsoft-barcode-reader-bundle' package @@ -359,7 +359,7 @@ The UI definition accepts external scripts and styles, so you can easily write c // // Some types have been renamed to versions with underscores // to avoid conflicts with variables imported from `exportToUI`. -// You can also change the names of the variables imported from `exportToUI`. +// You can also choose to change the names of the variables imported from `exportToUI` instead. import type { CameraEnhancer, CaptureVisionRouter, @@ -380,45 +380,51 @@ const { cvRouter, beep, vibrate, handleBarcodeText } = (camera as any).exportToU ``` ```cmd -.\node_modules\.bin\tsc myui.ts --outDir myui --module umd --moduleResolution node --skipLibCheck +npx tsc dce.ui.ts --outDir some/where --module umd --moduleResolution node --skipLibCheck ``` +You need to manually add the code to `some/where/dce.ui.js`: + +```diff + function (factory) { + if (typeof module === "object" && typeof module.exports === "object") { + var v = factory(require, exports); + if (v !== undefined) module.exports = v; + } + else if (typeof define === "function" && define.amd) { + define(["require", "exports"], factory); + } ++ else { ++ factory(null, {}); ++ } + } +``` + +> When TypeScript compiles to UMD format, the default wrapper only handles CommonJS and AMD module environments. If your script needs to be loaded directly in the browser via a ` + ``` +Since some steps require extensive rewriting of JavaScript to TypeScript, we provide a sample [React with Customized Camera UI](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/customize-ui) for your reference. You can copy [the pre-modified TypeScript version](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/customize-ui/dce.ui.ts); we've also [automated the manual addition steps](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/customize-ui/build-dce-ui.mjs). + Relative URLs are resolved using the base URI of the document, not the location of the UI definition file. Therefore, if you want to use this UI definition file in multiple locations, you can import the JS and CSS using absolute paths, or simply inline them. ```html +
- - -``` - -Manually add: - -```diff -function (factory) { - if (typeof module === "object" && typeof module.exports === "object") { - var v = factory(require, exports); - if (v !== undefined) module.exports = v; - } - else if (typeof define === "function" && define.amd) { - define(["require", "exports"], factory); -+ }else{ -+ factory(null, {}); -+ } -} + + + + ``` - > When TypeScript compiles to UMD format, the default wrapper only handles CommonJS and AMD module environments. If your script needs to be loaded directly in the browser via a ` + ``` From dfb31f32a9b0b2f87fbb8f3852472e95c3b6e8f2 Mon Sep 17 00:00:00 2001 From: Keillion-Dynamsoft Date: Wed, 29 Jul 2026 11:13:50 +0800 Subject: [PATCH 2/7] Hot Module Replacement --- programming/features/ui-customization-js.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/programming/features/ui-customization-js.md b/programming/features/ui-customization-js.md index ceffac84..e0076e26 100644 --- a/programming/features/ui-customization-js.md +++ b/programming/features/ui-customization-js.md @@ -10,7 +10,7 @@ noTitleIndex: true # Customize the UI -The official UI uses the `.xml` extension to prevent build tools or hot-reload mechanisms (such as Live Server, Five Server, or bundlers) from processing or overwriting these files. **Despite the extension, the content is HTML**, not XML. +The official UI uses the `.xml` extension to prevent build tools or hot-reload mechanisms (such as Live Server, Five Server, or Hot Module Replacement) from processing or overwriting these files. **Despite the extension, the content is HTML**, not XML. You can choose from [legacy UI definition format](#legacy-ui-definition-format) or [new UI definition format](#new-ui-definition-format). From 61deb2929ad80611cd63f81ad92560a3265454d6 Mon Sep 17 00:00:00 2001 From: Keillion-Dynamsoft Date: Wed, 29 Jul 2026 13:43:48 +0800 Subject: [PATCH 3/7] Update ui-customization-js.md --- programming/features/ui-customization-js.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/programming/features/ui-customization-js.md b/programming/features/ui-customization-js.md index e0076e26..a10c1e56 100644 --- a/programming/features/ui-customization-js.md +++ b/programming/features/ui-customization-js.md @@ -10,7 +10,7 @@ noTitleIndex: true # Customize the UI -The official UI uses the `.xml` extension to prevent build tools or hot-reload mechanisms (such as Live Server, Five Server, or Hot Module Replacement) from processing or overwriting these files. **Despite the extension, the content is HTML**, not XML. +The official UI uses the `.xml` extension to prevent build tools or hot-reload mechanisms (such as Live Server, Five Server, or Hot Module Replacement) from processing or overwriting these files. **Despite the extension, the content is HTML**, not XML. In reality, you can use any file extension, provided the browser can correctly retrieve the file's text content. You can choose from [legacy UI definition format](#legacy-ui-definition-format) or [new UI definition format](#new-ui-definition-format). From 5e658d329515dd2fb654c9b0107b12d610d5af7b Mon Sep 17 00:00:00 2001 From: Keillion-Dynamsoft Date: Wed, 29 Jul 2026 14:09:49 +0800 Subject: [PATCH 4/7] update sample link --- programming/features/ui-customization-js.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/programming/features/ui-customization-js.md b/programming/features/ui-customization-js.md index 58da4445..7702b26a 100644 --- a/programming/features/ui-customization-js.md +++ b/programming/features/ui-customization-js.md @@ -412,7 +412,7 @@ You need to manually add the code to `some/where/dce.ui.js`: ``` -Since some steps require extensive rewriting of JavaScript to TypeScript, we provide a sample [React with Customized Camera UI](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/customize-ui) for your reference. You can copy [the pre-modified TypeScript version](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/customize-ui/dce.ui.ts); we've also [automated the manual addition steps](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/customize-ui/build-dce-ui.mjs). +Since some steps require extensive rewriting of JavaScript to TypeScript, we provide [a sample](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/use-typescript-in-ui-definition) for your reference. You can copy [the pre-modified TypeScript version](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/use-typescript-in-ui-definition/dce.ui.ts); we've also [automated the manual addition steps](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/use-typescript-in-ui-definition/build-dce-ui.mjs). Relative URLs are resolved using the base URI of the document, not the location of the UI definition file. Therefore, if you want to use this UI definition file in multiple locations, you can import the JS and CSS using absolute paths, or simply inline them. From 54244098af63e8a1a25524077004e224d48fd15b Mon Sep 17 00:00:00 2001 From: Keillion-Dynamsoft Date: Wed, 29 Jul 2026 15:59:53 +0800 Subject: [PATCH 5/7] explain script.currentDMCamera; explain why ts --- programming/features/ui-customization-js.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/programming/features/ui-customization-js.md b/programming/features/ui-customization-js.md index 7702b26a..341c92ba 100644 --- a/programming/features/ui-customization-js.md +++ b/programming/features/ui-customization-js.md @@ -10,7 +10,8 @@ noTitleIndex: true # Customize the UI -The official UI uses the `.xml` extension to prevent build tools or hot-reload mechanisms (such as Live Server, Five Server, or Hot Module Replacement) from processing or overwriting these files. **Despite the extension, the content is HTML**, not XML. In reality, you can use any file extension, provided the browser can correctly retrieve the file's text content. +The official UI uses the `.xml` extension to prevent build tools or hot-reload mechanisms (such as Live Server, Five Server, or Hot Module Replacement) from processing or overwriting these files. **Despite the extension, the content is HTML**, not XML. +In reality, you can use any file extension, provided the browser can correctly retrieve the file's text content. You can choose from [legacy UI definition format](#legacy-ui-definition-format) or [new UI definition format](#new-ui-definition-format). @@ -136,7 +137,7 @@ Please take a look at the ` ``` -The first line, `const camera = document.currentScript.currentDMCamera;`, allows you to access the `camera` object (an instance of `CameraEnhancer`). If you wish to access other objects—such as an instance of `CaptureVisionRouter`—you can assign `camera.exportToUI.cvRouter` within your business logic, then get it back in UI definition. +The first line, `const camera = document.currentScript.currentDMCamera;`, allows you to access the `camera` object. When the camera is bound to the UI definition file, it will automatically assign the value `script.currentDMCamera = camera` to all script tags in the UI definition. If you wish to access other objects—such as `cvRouter`—you can assign `camera.exportToUI.cvRouter` within your business logic, then get it back in UI definition. ```diff // in business logic @@ -348,8 +349,11 @@ elTakePhoto.addEventListener('pointerdown', async()=>{ ### Using TypeScript in UI Definition +When writing large amounts of code, you'll likely want the capabilities of TypeScript to provide intelligent code suggestions and catch errors promptly at compile time. The UI definition accepts external scripts and styles, so you can easily write code in TypeScript and reference the generated JavaScript after running `tsc`. +> Since the following steps require extensive rewriting of JavaScript to TypeScript, we provide [a sample](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/use-typescript-in-ui-definition) for your reference. You can copy the pre-modified [dce.ui.ts](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/use-typescript-in-ui-definition/dce.ui.ts); we've also [automated](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/use-typescript-in-ui-definition/build-dce-ui.mjs) the `manually add the code` step. + ```ts // in dce.ui.ts @@ -412,8 +416,6 @@ You need to manually add the code to `some/where/dce.ui.js`: ``` -Since some steps require extensive rewriting of JavaScript to TypeScript, we provide [a sample](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/use-typescript-in-ui-definition) for your reference. You can copy [the pre-modified TypeScript version](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/use-typescript-in-ui-definition/dce.ui.ts); we've also [automated the manual addition steps](https://github.com/Dynamsoft/barcode-reader-javascript-samples/tree/main/scenarios/use-typescript-in-ui-definition/build-dce-ui.mjs). - Relative URLs are resolved using the base URI of the document, not the location of the UI definition file. Therefore, if you want to use this UI definition file in multiple locations, you can import the JS and CSS using absolute paths, or simply inline them. ```html From 4b7e0e5916a023661bcf28fe7212a67c47e9b1a6 Mon Sep 17 00:00:00 2001 From: Mark Date: Wed, 19 Aug 2026 22:58:36 +0800 Subject: [PATCH 6/7] v11.6.3000 release --- release-notes/dbr-rn-11.md | 1 + 1 file changed, 1 insertion(+) diff --git a/release-notes/dbr-rn-11.md b/release-notes/dbr-rn-11.md index 63a51096..cbb19b7e 100644 --- a/release-notes/dbr-rn-11.md +++ b/release-notes/dbr-rn-11.md @@ -37,6 +37,7 @@ noTitleIndex: true | Versions | Available Editions | | -------- | ------------------ | +| 11.6.3000 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1163000-08202026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1163000-08202026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1163000-08202026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1163000-08202026){:target="_blank"} | | 11.6.1000 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1161000-07232026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1161000-07232026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1161000-07232026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1161000-07232026){:target="_blank"} | ## 11.4 (02/05/2026) From 1c1d20b22804a6e48cc7285dc7b9dd6efd30d999 Mon Sep 17 00:00:00 2001 From: Justin Date: Thu, 20 Aug 2026 14:34:42 +0800 Subject: [PATCH 7/7] update release notes to include JavaScript editions for versions 11.6.2100 and 11.6.2000 --- release-notes/dbr-rn-11.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/release-notes/dbr-rn-11.md b/release-notes/dbr-rn-11.md index cbb19b7e..689d0819 100644 --- a/release-notes/dbr-rn-11.md +++ b/release-notes/dbr-rn-11.md @@ -38,6 +38,8 @@ noTitleIndex: true | Versions | Available Editions | | -------- | ------------------ | | 11.6.3000 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1163000-08202026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1163000-08202026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1163000-08202026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1163000-08202026){:target="_blank"} | +| 11.6.2100 | [JavaScript]({{ site.js_release_notes}}js-11.html#1162100-08182026){:target="_blank"} | +| 11.6.2000 | [JavaScript]({{ site.js_release_notes}}js-11.html#1162000-08132026){:target="_blank"} / [Android]({{ site.android_release_notes}}android-11.html#1162000-08142026){:target="_blank"} / [iOS]({{ site.oc_release_notes }}ios-11.html#1162000-08142026){:target="_blank"} | | 11.6.1000 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1161000-07232026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1161000-07232026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1161000-07232026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1161000-07232026){:target="_blank"} | ## 11.4 (02/05/2026) @@ -70,9 +72,9 @@ noTitleIndex: true | Versions | Available Editions | | -------- | ------------------ | -| 11.4.3000 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1143000-06302026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1143000-06302026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1143000-06302026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1143000-06302026){:target="_blank"} | -| 11.4.2001 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1142001-04172026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1142001-04172026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1142001-04172026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1142001-04172026){:target="_blank"} | -| 11.4.2000 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1142000-03182026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1142000-03182026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1142000-03182026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1142000-03182026){:target="_blank"} | +| 11.4.3000 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1143000-06302026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1143000-06302026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1143000-06302026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1143000-06302026){:target="_blank"} / [Android]({{ site.android_release_notes}}android-11.html#1143000-07072026){:target="_blank"} / [iOS]({{ site.oc_release_notes }}ios-11.html#1143000-07072026){:target="_blank"} / [JavaScript]({{ site.js_release_notes}}js-11.html#1143000-07022026){:target="_blank"}| +| 11.4.2001 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1142001-04172026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1142001-04172026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1142001-04172026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1142001-04172026){:target="_blank"} / [JavaScript]({{ site.js_release_notes}}js-11.html#1142001-04242026){:target="_blank"} | +| 11.4.2000 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1142000-03182026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1142000-03182026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1142000-03182026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1142000-03182026){:target="_blank"} / [JavaScript]({{ site.js_release_notes}}js-11.html#1142000-04212026){:target="_blank"} | | 11.4.1000 | [C++]({{ site.cpp_release_notes}}cpp-11.html#1141000-02052026){:target="_blank"} / [.NET]({{ site.dotnet_release_notes }}dotnet-11.html#1141000-02052026){:target="_blank"} / [Python]({{ site.python_release_notes}}python-11.html#1141000-02052026){:target="_blank"} / [Java]({{ site.java_release_notes}}java-11.html#1141000-02052026){:target="_blank"} / [Android]({{ site.android_release_notes}}android-11.html#1141000-02052026){:target="_blank"} / [iOS]({{ site.oc_release_notes }}ios-11.html#1141000-02052026){:target="_blank"} | ## 11.2 (10/14/2025)