importing svelte/store doesn't work

[felixsanz]

As #4 said, importing svelte/store causes an error.

stores.js:

import { writable } from 'svelte/store'

export const store = writable(0)

When you add import { store } from '$/stores.js' to any .svelte file... the app crash and gives "NotFound"

By the way, importing from https://cdn.skypack.dev/svelte/store doesn't work. Same result.

Basically importing doesn't work in a .js file. And this must be stores.js not stores.svelte! it's not a component

[michael-spengler]

@felixsanz: I'm relatively new as a snel contributor. It seems you explored the details on that pretty thoroughly already. Would it be possible for you to raise a pull request suggesting a solution?

one spontaneous thought from my side was that it might be interesting how what you describe fits together with: https://github.com/crewdevio/Snel/blob/main/install.ts#L15

[felixsanz]

sorry i don't know how to fix it

[omar-azmi]

I was having issues with svelte/store in addition to typescript transpilation. After migrating to node based svelte, the problem persisted and I discovered that the issue lied in my windows project directory path containing a single apostrophe/quote (ie: C:/some-dir/client's website/proj/). Changing the directory to a apostrophe/quotation-free path fixed the issue with both snel and regular node svelte. So I guess the problem lies more or less with sveltejs or the preprocessors, not snel. Give it a shot with the test project below: If the output site functions correctly, you should see a random 9-digit id that turns into **A SECRET** after 3 seconds

C:/temp> snel create proj
C:/temp> cd proj

// <!-- "C:/temp/proj/src/sitestore.ts" -->
import { writable } from "svelte/store"
export const uuid: string = writable(Math.random().toString().replace("0.", "").slice(0, 9))

<!-- "C:/temp/proj/src/components/Home.svelte" -->
<script lang="ts">
import { uuid } from "~/sitestore.ts"
export let name: string;
// keep in mind that whenever reading a store value, you must prefix the variable name with a $ dollar symbol
// in the console log below, it would be incorrect to use "uuid" to acquire the value. you must use "$uuid" instead
console.log(`this session\'s id is ${$uuid}`)
</script>

<h1>Hello {name}!</h1>
<h1>Your unique id is: {$uuid}</h1>

<style>
h1 {
	color: #ff3e00;
	text-transform: uppercase;
	font-size: 4em;
	font-weight: 100;
}
</style>

<!-- ""C:/temp/proj/src/App.svelte"" -->
<script>
import Home from "~/components/Home.svelte";
import { fade } from "svelte/transition";
import { uuid } from "~/sitestore.ts"

let name = "World";
setTimeout(() => {uuid.set("**A SECRET**")}, 3000)
</script>

<main transition:fade>
	<Home {name} />
</main>

<style>
main {
	text-align: center;
}
</style>

C:/temp/proj> snel serve