Sveltekit support ?

[Vexkiddy]

@kozakdenys Would love to use this in my SvelteKit project, any suggestions on how I can do that ? :D

[Konstantin Buza]

@vexkiddy Svelte is not a different programming language or something. Just instantiate the class. https://github.com/kozakdenys/qr-code-styling#usage

[Vexkiddy]

@buza-me yep, but i'd like to use this as an NPM package in my svelte project not by linking off to a cdn in my script tag. Currently I can't get it to work when using it as an NPM package, due to the way Sveltekit works. Do let me know if there is a way to get it working via NPM.

[Konstantin Buza]

I see. Looks like author of this library got a bit tired of supporting it atm, so most likely you will have to figure it out yourself. You probably have problems because this lib is used in Node, but should only be used on client. I don't use Svelte (kit) personally and never did. If you want to ensure that this library is only imported on client then you need to use lazy import. Something like this:

const generateQrCode = async (qrOptions) => {
  const QRCodeStyling = (await import('qr-code-styling')).default;
  // the rest of the code
}

But, once again, you can use it on client only, so probably call "generateQrCode" inside onMount calls or event listeners or actions triggered in response to user interactions.
I suggest that if you provide an error(s) that you get it would be easier to identify the problem, because I am sure that the problem is not in Svelte itself. If you need to make it work on Node then you will have to fork the library and make a PR. Maybe publish your own version of this library to NPM, because author did not review pull requests in a while.
It is actually very easy to make it node compatible, but maybe you don't need to.

[Vexkiddy]

yeah.. i'm a newbie to front-end dev so a lot of this is over my head.. i've tried the below but i get errors in the console. It does seem to be importing it though, i'm just not sure how to display it in svelte

<script>
    import QRCodeStyling from "qr-code-styling";
    import { onMount } from 'svelte';
    onMount(async () => {
        const qrCode = new QRCodeStyling({
            width: 300,
            height: 300,
            image:
            "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
                dotsOptions: {
                color: "#4267b2",
                type: "rounded"
            },
            imageOptions: {
                crossOrigin: "anonymous",
                margin: 20
            }
        });
        qrCode.append(document.getElementById("canvas"));
        qrCode.download({ name: "qr", extension: "svg" });
    });
</script>

<div id="canvas"></div>

[Konstantin Buza]

You are using a blocking script. When you try to get element (canvas) by id, that element does not exist yet. It will be added into the document object model after all of the elements above it, and it means after all of the blocking scripts are completed as well. You need to make that script non-blocking by adding "async" or "defer" attributes OR you can leave it as it is, but you need to move that "div" with id "canvas" above the script in which you are trying to access it.

[Konstantin Buza]

<script async>
    // code
</script>

<div id="canvas"></div>

or

<script defer>
    // code
</script>

<div id="canvas"></div>

or

<div id="canvas"></div>
<script>
    // code
</script>

[Konstantin Buza]

Actually only third option is valid:

<div id="canvas"></div>
<script>
    // code
</script>

I forgot that async/defer do not work for scripts with no "src" attribute.

[Vexkiddy]

@buza-me thanks for all this but i still can' get it work. It's most likely something to do with Sveltekit. I've committed the code if you felt like taking a look. No worries if not though! Thanks for all the help!

https://github.com/vexkiddy/qrcode

Just do a npm install then npm run dev

[Konstantin Buza]

Turns out Svelte compiles things and it doesn't matter if script is blocking inside a .svelte file, so that is not the case. Svelte kit uses server side rendering so it runs on Node.
The answer was right in console, where you run "npm run dev", not in browser one. It throws an error because you import "qr-code-styling" into Node (server side) script. You can just google that error and read a couple of search results. Then I've used a dynamic import as I have advised you before. And it worked. (after adding "data" field to config object). You need to use advices given to you before claiming that they don't work, and you can't expect that some bored jobless atm dev will actually download your repo and edit your code. I wish you success and patience in learning :)

<script>
	import { onMount } from 'svelte';

	onMount(async () => {
		const QRCodeStyling = (await import('qr-code-styling')).default;
		const canvasContainer = document.getElementById('canvas');

		const qrCode = new QRCodeStyling({
			data: ' ',
			width: 300,
			height: 300,
			image: 'https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg',
			dotsOptions: {
				color: '#4267b2',
				type: 'rounded'
			},
			imageOptions: {
				crossOrigin: 'anonymous',
				margin: 20
			}
		});
		qrCode.append(canvasContainer);
		qrCode.download({ name: 'qr', extension: 'svg' });
	});
</script>

<div id="canvas" />
I cant get this QR CODE to work

[Vexkiddy]

@buza-me wow, thank you so much! this is brilliant :D Yeah unfortunately i'm not a proper frontend dev at all, so i'm just trying to cobble things together. When something like this happens I get totally stuck and can't really work out what the problem is. I'll endeavour to do better next time! Thanks again!