Skip to content

Commit 3134d3e

Browse files
KeillionKeillion
committed
svelte
1 parent 4f4a647 commit 3134d3e

File tree

14 files changed

+439
-0
lines changed

14 files changed

+439
-0
lines changed

‎hello-world/svelte/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎hello-world/svelte/README.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# Svelte + TS + Vite
2+
3+
This template should help get you started developing with Svelte and TypeScript in Vite.
4+
5+
## Recommended IDE Setup
6+
7+
[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
8+
9+
## Need an official Svelte framework?
10+
11+
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.
12+
13+
## Technical considerations
14+
15+
**Why use this over SvelteKit?**
16+
17+
- It brings its own routing solution which might not be preferable for some users.
18+
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
19+
20+
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.
21+
22+
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.
23+
24+
**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
25+
26+
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.
27+
28+
**Why include `.vscode/extensions.json`?**
29+
30+
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.
31+
32+
**Why enable `allowJs` in the TS template?**
33+
34+
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.
35+
36+
**Why is HMR not preserving my local component state?**
37+
38+
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).
39+
40+
If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
41+
42+
```ts
43+
// store.ts
44+
// An extremely simple external store
45+
import { writable } from 'svelte/store'
46+
export default writable(0)
47+
```

‎hello-world/svelte/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vite + Svelte + TS</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/main.ts"></script>
11+
</body>
12+
</html>

‎hello-world/svelte/package.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "svelte",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview",
10+
"check": "svelte-check --tsconfig ./tsconfig.json"
11+
},
12+
"dependencies": {
13+
"dynamsoft-barcode-reader": "10.0.21",
14+
"dynamsoft-camera-enhancer": "4.0.1",
15+
"dynamsoft-capture-vision-router": "2.0.32",
16+
"dynamsoft-core": "3.0.33",
17+
"dynamsoft-license": "3.0.40",
18+
"dynamsoft-utility": "1.0.21"
19+
},
20+
"devDependencies": {
21+
"@sveltejs/vite-plugin-svelte": "^3.0.2",
22+
"@tsconfig/svelte": "^5.0.2",
23+
"svelte": "^4.2.12",
24+
"svelte-check": "^3.6.6",
25+
"tslib": "^2.6.2",
26+
"typescript": "^5.2.2",
27+
"vite": "^5.1.6"
28+
}
29+
}

‎hello-world/svelte/src/App.svelte‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<script lang="ts">
2+
import "./lib/cvr"; // import side effects. The license, engineResourcePath, so on.
3+
import VideoCapture from "./components/VideoCapture.svelte";
4+
import ImageCapture from './components/ImageCapture.svelte';
5+
6+
let bShowVideoCapture = true;
7+
let bShowImageCapture = false;
8+
9+
const showVideoCapture = () => {
10+
bShowVideoCapture = true;
11+
bShowImageCapture = false;
12+
};
13+
const showImageCapture = () => {
14+
bShowVideoCapture = false;
15+
bShowImageCapture = true;
16+
}
17+
</script>
18+
19+
<main>
20+
<div class="div-hello-world">
21+
<h1>Hello World for Vue 3</h1>
22+
<div>
23+
<button style={`marginRight:10px;backgroundColor:${bShowVideoCapture?'rgb(255,174,55)':'white'}`}
24+
on:click={showVideoCapture}>Decode Video</button>
25+
<button style={`backgroundColor:${bShowImageCapture?'rgb(255,174,55)':'white'}`} on:click={showImageCapture}>Decode Image</button>
26+
</div>
27+
<div class="container">
28+
{#if bShowVideoCapture}
29+
<VideoCapture></VideoCapture>
30+
{/if}
31+
{#if bShowImageCapture}
32+
<ImageCapture></ImageCapture>
33+
{/if}
34+
</div>
35+
</div>
36+
</main>
37+
38+
<style>
39+
.div-hello-world {
40+
display: flex;
41+
flex-direction: column;
42+
align-items: center;
43+
justify-content: center;
44+
width: 100%;
45+
height: 100%;
46+
color: #455a64;
47+
}
48+
49+
button {
50+
font-size: 1.5rem;
51+
margin-bottom: 2vh;
52+
border: 1px solid black;
53+
}
54+
55+
.container {
56+
margin: 2vmin auto;
57+
text-align: center;
58+
font-size: medium;
59+
width: 100%;
60+
}
61+
62+
h1 {
63+
font-size: 1.5em;
64+
}
65+
</style>

‎hello-world/svelte/src/components/ImageCapture.svelte‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<script lang="ts">
2+
import "../lib/cvr"; // import side effects. The license, engineResourcePath, so on.
3+
import { type BarcodeResultItem } from "dynamsoft-barcode-reader";
4+
import { CaptureVisionRouter } from "dynamsoft-capture-vision-router";
5+
import { onMount } from "svelte";
6+
7+
let pCvr: Promise<CaptureVisionRouter>;
8+
9+
onMount(()=>{
10+
return funcDestroy; // onDestory
11+
});
12+
13+
let bDestoried = false;
14+
const funcDestroy = async()=>{
15+
bDestoried = true;
16+
if(pCvr){
17+
const cvr = await pCvr;
18+
cvr.dispose();
19+
}
20+
};
21+
22+
const decodeImg = async(e: Event)=>{
23+
try{
24+
const file = (e.target! as HTMLInputElement).files![0];
25+
const cvr = await (pCvr = pCvr || CaptureVisionRouter.createInstance());
26+
if(bDestoried){ return; }
27+
28+
const result = await cvr.capture(file, "ReadBarcodes_SpeedFirst");
29+
let texts = "";
30+
for (let item of result.items) {
31+
console.log((item as BarcodeResultItem).text);
32+
texts += (item as BarcodeResultItem).text + "\n";
33+
}
34+
35+
if(texts){
36+
alert(texts);
37+
}else{
38+
alert("No barcode found");
39+
}
40+
}catch(ex:any){
41+
let errMsg = ex.message || ex;
42+
console.error(errMsg);
43+
funcDestroy();
44+
alert(errMsg);
45+
}
46+
};
47+
</script>
48+
49+
<div class="div-image-capture">
50+
<input
51+
type="file"
52+
accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp"
53+
on:change={decodeImg}
54+
/>
55+
</div>
56+
57+
<style>
58+
.div-image-capture {
59+
display: flex;
60+
justify-content: center;
61+
align-items: center;
62+
border: 1px solid black;
63+
}
64+
</style>
65+

‎hello-world/svelte/src/components/VideoCapture.svelte‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<script lang="ts">
2+
import "../lib/cvr"; // import side effects. The license, engineResourcePath, so on.
3+
import { EnumCapturedResultItemType } from "dynamsoft-core";
4+
import { type DecodedBarcodesResult } from "dynamsoft-barcode-reader";
5+
import { CameraEnhancer, CameraView } from "dynamsoft-camera-enhancer";
6+
import { CapturedResultReceiver, CaptureVisionRouter } from "dynamsoft-capture-vision-router";
7+
import { MultiFrameResultCrossFilter } from "dynamsoft-utility";
8+
import { onMount } from "svelte";
9+
10+
let uiContainer:HTMLDivElement;
11+
let resultsContainer:HTMLDivElement;
12+
13+
let cameraView: CameraView|null;
14+
let cameraEnhancer: CameraEnhancer|null;
15+
let cvr: CaptureVisionRouter|null;
16+
17+
onMount(()=>{
18+
(async()=>{try{
19+
console.log(uiContainer,resultsContainer)//debug
20+
// check if need exist after every async statement
21+
const needExist = ()=>{
22+
if(bDestoried){
23+
funcDestroy();
24+
return true;
25+
}else{
26+
return false;
27+
}
28+
};
29+
30+
// Create a `CameraEnhancer` instance for camera control and a `CameraView` instance for UI control.
31+
cameraView = await CameraView.createInstance();
32+
if(needExist()){ return; }
33+
cameraEnhancer = await CameraEnhancer.createInstance(cameraView);
34+
uiContainer.append(cameraView.getUIElement()); // Get default UI and append it to DOM.
35+
if(needExist()){ return; }
36+
37+
38+
// Create a `CaptureVisionRouter` instance and set `CameraEnhancer` instance as its image source.
39+
cvr = await CaptureVisionRouter.createInstance();
40+
if(needExist()){ return; }
41+
cvr.setInput(cameraEnhancer);
42+
43+
// Define a callback for results.
44+
const resultReceiver = new CapturedResultReceiver();
45+
resultReceiver.onDecodedBarcodesReceived = (result: DecodedBarcodesResult) => {
46+
if (!result.barcodeResultItems.length) return;
47+
48+
resultsContainer.textContent = '';
49+
console.log(result);
50+
for (let item of result.barcodeResultItems) {
51+
resultsContainer.append(
52+
`${item.formatString}: ${item.text}`,
53+
document.createElement('br'),
54+
document.createElement('hr'),
55+
);
56+
}
57+
};
58+
cvr.addResultReceiver(resultReceiver);
59+
60+
// Filter out unchecked and duplicate results.
61+
const filter = new MultiFrameResultCrossFilter();
62+
// Filter out unchecked barcodes.
63+
filter.enableResultCrossVerification(EnumCapturedResultItemType.CRIT_BARCODE, true);
64+
// Filter out duplicate barcodes within 3 seconds.
65+
filter.enableResultDeduplication(EnumCapturedResultItemType.CRIT_BARCODE,true);
66+
await cvr.addResultFilter(filter);
67+
if(needExist()){ return; }
68+
69+
// Open camera and start scanning single barcode.
70+
await cameraEnhancer.open();
71+
if(needExist()){ return; }
72+
await cvr.startCapturing("ReadSingleBarcode");
73+
if(needExist()){ return; }
74+
75+
}catch(ex:any){
76+
let errMsg = ex.message || ex;
77+
console.error(errMsg);
78+
funcDestroy();
79+
alert(errMsg);
80+
}})();
81+
82+
return funcDestroy; // onDestory
83+
});
84+
85+
let bDestoried = false;
86+
let funcDestroy = ()=>{
87+
bDestoried = true;
88+
if(cvr){ cvr.dispose(); cvr = null; }
89+
if(cameraEnhancer){ cameraEnhancer.dispose(); cameraEnhancer = null; }
90+
if(cameraView){ cameraView.dispose(); cameraView = null; }
91+
};
92+
</script>
93+
94+
<div>
95+
<div bind:this={uiContainer} class="div-ui-container"></div>
96+
Results: <br />
97+
<div bind:this={resultsContainer} class="div-results-container"></div>
98+
</div>
99+
100+
<style>
101+
.div-ui-container {
102+
width: 100%;
103+
height: 70vh;
104+
background: #eee;
105+
}
106+
.div-results-container {
107+
width: 100%;
108+
height: 10vh;
109+
overflow: auto;
110+
}
111+
</style>
112+

‎hello-world/svelte/src/lib/cvr.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { CoreModule } from 'dynamsoft-core';
2+
import { LicenseManager } from 'dynamsoft-license';
3+
import 'dynamsoft-barcode-reader';
4+
// import 'dynamsoft-camera-enhancer';
5+
6+
/** LICENSE ALERT - README
7+
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
8+
*/
9+
10+
LicenseManager.initLicense(
11+
'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9'
12+
);
13+
14+
/**
15+
* 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.
16+
* 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.
17+
* For more information, see https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=10.0.21&utm_source=github#specify-the-license or contact [email protected].
18+
* LICENSE ALERT - THE END
19+
*/
20+
21+
CoreModule.engineResourcePaths = {
22+
std: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
23+
dip: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
24+
core: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
25+
license: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
26+
cvr: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
27+
dbr: "https://cdn.jsdelivr.net/npm/[email protected]/dist/",
28+
dce: "https://cdn.jsdelivr.net/npm/[email protected]/dist/"
29+
};
30+
31+
// Preload "BarcodeReader" module for reading barcodes. It will save time on the initial decoding by skipping the module loading.
32+
CoreModule.loadWasm(['DBR']);

0 commit comments

Comments
 (0)