svelte-qrcode-image
Advanced tools
svelte-qrcode-image - npm Package Compare versions
Comparing version 1.0.0-rc.1 to 1.0.0-rc.2
| # Svelte-QRCode-Image changelog | ||
| ## 1.0.0-rc.2 | ||
| Update README.md: more examples and adjusted some wording | ||
| ## 1.0.0-rc.1 | ||
@@ -4,0 +7,0 @@ Remove the `<div>` wrapping the `<img>` tag since it shouldn't be necessary. |
| { | ||
| "name": "svelte-qrcode-image", | ||
| "version": "1.0.0-rc.1", | ||
| "version": "1.0.0-rc.2", | ||
| "devDependencies": { | ||
@@ -30,2 +30,3 @@ "@sveltejs/adapter-auto": "next", | ||
| "qrcode", | ||
| "qr-code", | ||
| "qr", | ||
@@ -32,0 +33,0 @@ "svelte", |
| # Svelte-QRCode-Image | ||
| QR-Code generated using [node-qrcode](https://github.com/soldair/node-qrcode) | ||
| and display via `<img>` or `<canvas>` element, with TypeScript support, works on SvelteKit. | ||
| and display via `<img>` or `<canvas>` element, with TypeScript support and exported as ESM, works on SvelteKit. | ||
| <br> | ||
| Visit [this page](https://svelte-qrcode-image.itoldyou.dev/) for live demo. | ||
| <br> | ||
| **Under development, breaking change could occur before 1.0.0** | ||
| **1.0.0 coming very soon** | ||
| <br> | ||
@@ -38,3 +38,7 @@ [](https://www.npmjs.com/package/svelte-qrcode-image) | ||
| ``` | ||
| for real example you can reference the [source code](https://github.com/1toldyou/svelte-qrcode-image/blob/main/src/routes/%2Bpage.svelte) of the [demo page](https://svelte-qrcode-image.itoldyou.dev/). | ||
| You can also bind the `text` props to a variable, and will automatically refresh when the variable changes (reactivity) | ||
| ```html | ||
| <QRCodeImage text={eee} /> | ||
| ``` | ||
| for more real example you can reference the [source code](https://github.com/1toldyou/svelte-qrcode-image/blob/main/src/routes/%2Bpage.svelte) of the [demo page](https://svelte-qrcode-image.itoldyou.dev/). | ||
@@ -67,7 +71,8 @@ ## Parameters | ||
| The minimum version required of SvelteKit is `1.0.0-next.373` which use Vite 3. | ||
| And only works with [modern browsers](https://vitejs.dev/guide/migration.html#modern-browser-baseline-change) by default. | ||
| And not works with [ancient browsers](https://vitejs.dev/guide/migration.html#modern-browser-baseline-change) by default. | ||
| ### Limitation | ||
| The QR Code might not be generated during SSR, will only have the `<img>` or `<canvas>` tag created, | ||
| as the actual work is done in [onMount](https://svelte.dev/docs#run-time-svelte-onmount) to prevent the undefined behavior of [bind:this](https://svelte.dev/docs#template-syntax-element-directives-bind-this) | ||
| The QR Code is being generated (A.K.A. the actual work) when [onMount](https://svelte.dev/docs#run-time-svelte-onmount) being called | ||
| to prevent the undefined behavior of [bind:this](https://svelte.dev/docs#template-syntax-element-directives-bind-this). | ||
| Might only have the `<img>` or `<canvas>` tag created during SSR. | ||
@@ -85,9 +90,5 @@ | ||
| - [ ] Automatic Testing | ||
| - [ ] Reactivity on other options change | ||
| - [ ] Reactivity on other options change (especially the `size`) | ||
| ### Not Planned | ||
| - Complex/Fancy QR-Code styling to the image: I created this package for simplicity; in that case it will need different "backend" to generate the image and the size will be larger | ||
| ## Dependencies | ||
@@ -107,3 +108,5 @@ - [qrcode](https://www.npmjs.com/package/qrcode) | ||
| ``` | ||
| You can change the port in `vite.config.ts`. | ||
| You can change the port in `vite.config.ts`, | ||
| the default port is 3001 | ||
| and can be opened in `localhost:3001` or `127.0.0.1:3001` | ||
@@ -140,6 +143,10 @@ Since this being setup as SvelteKit project, so you should create your component in `src/lib` directory. | ||
| Instead of 'npm run build` | ||
| Since it's calling in the background | ||
| Since it's being internally linked to | ||
| ```bash | ||
| svelte-kit sync && svelte-package | ||
| ``` | ||
| Which will npt create the `public` directory, which is needed for the website to work. | ||
| Which will npt create the `public` directory, which is needed for the website to work. | ||
| ## Footnote | ||
| - [node-qrcode](https://github.com/soldair/node-qrcode) and [qrcode](https://www.npmjs.com/package/qrcode) is the same thing |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.77%
17401
- Number of lines in readme file
- increased by5%
147