Can I use svench in a Sveltekit project?

[sonya-ninja]

Hi there!
Not really an issue - just a question.
Will Svench work in a Sveltekit project?

[sonya-ninja]

Don't worry - it's up and running. Waaaaaaay cool!

[sonya-ninja]

Oops... spoke too soon. Svench is up and running (beautifully), but Sveltekit can't run dev.

ParseError: Expected valid tag name

[dipscom]

You most certainly can use Svench and Kit... I am not sure what is going wrong on your installation but a bit more detail on the context of your error wouldn't hurt.

[sonya-ninja]

Thanks Dipscom! Didn't I meet you on the GSAP forums?

I'm a newbie at most coding things so I'm sure I did something wrong with the installation. Feel a bit bad asking here - it's not really an issue, but I wan't sure where else to ask for help. I've uninstalled Svench - sometimes I get it right just by doing it over. :)

I will go through the installation again and will post more detail if I run into the problem again. (I think it has something to do with the 'rollup.config'. I saw an example in the legacy docs, but I couldn't find any rollup.config in Sveltekit.)

[sonya-ninja]

Okay, so the installation goes fine.

(EDIT: except for a warning message about @svitejs/vite-plugin-svelte": "^0.11.1 being depreciated.)

pnpmx svench launches as expected. I can add a new index file and a .svench file with a view for a simple button component. All good.

At this point I tested a small update to one of the components to make sure Sveltekit is not compaining - all good.

The problem starts when I create a .svench file with a view for a complex component. The programCard component has two nested child components. I get the following error:

[vite] Internal server error: Failed to resolve import "$lib/programCard/ProgramCardChartDonut.svelte" from "src/lib/programCard/ProgramCard.svelte". Does the file exist?

Does svench understand where the $lib is in sveltekit?

[dipscom]

Hi, yes, it is me again. It just so happens that I like these two projects and try to help them.

Rixo's a bit too busy at the moment from what I know, he's the one who will be able to give you a definitive answer on the question if Svench understands where $lib is. My gut feeling is that it does not at the moment. I don't think Rixo has done any work to accomodate Kit yet as it's still in beta and, unfortunately, Svench moves a little bit slowly as it's a one-dev situation (hence me lurking around trying to help out on these customer-relations situations).

I haven't had a chance to try Kit, I do, it's just finding the time to try it out. For now, all I can offer is a request for a bit of patience and a promise it will eventually work.

[sonya-ninja]

Thank you so much! I work slowly because I'm learning all the time, so I'll check in here every now and then to see if there is any progress integrating with SK. I tried a few documentation type solutions with my SK project and then when I was watching the Svelte Summit video a couple of days ago, Svench got a shout-out from BBUI Design. I was so impressed when I tried it - it works just like svelte - magic. Sad that it's not yet fully working with SK, but totally understand the workload.

Thanks again for the time dipscom.

[macmillen]

I would also love to use svench in a svelte kit project. I get the same error as @sonya-ninja (Failed to resolve import "$lib/...").

[dipscom]

It's on the "roadmap" (as in, there's no such thing as a roadmap, it's in Rixo's list of things to implement).

"Kit hides its config, so Svench can't ride on top of it" - Rixo.

It's one of the core tennets of Svench, being able to "just work" so, it will be done. When, I am unable to say.

[macmillen]

Alright, thanks for the update. 👍

[rixo]

Hey guys!

We're not there yet, but I have started to explore what would be needed for Kit support. Eventually I'd want this to be fully automatic, but for now I'm still working out what is needed. I have had some initial success with a basic Kit app by manually setting up Kit aliases and including the global CSS.

Unfortunately I don't have much time to experiment with this myself currently so, if some of you are interested in trying this in some real Kit apps, I'm very curious to know how well this works for you, and what would be missing next.

So... This will only works with svench >= 0.2.0-24 (svench@next on npm currently), that has better support for Svench config file.

svench.config.js

import path from 'path';
import { fileURLToPath } from 'url';

// note: Kit apps are type:module, so Node's __dirname is not available
const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default {
  vite: {
    resolve: {
      alias: {
        // automatically extracting the paths that are hardcoded here from Kit's config will
        // probably be one of the main hassle to be able to offer automatic support :-/
        $app: path.resolve(__dirname, '.svelte-kit/dev/runtime/app'),
        $lib: path.resolve(__dirname, 'src/lib')
      }
    }
  }
};

To add some custom global CSS, you can use a .svench.js file: when present, it is added to your Svench app's entrypoint.

src/.svench.js

import './app.css'

[jacob-8]

@rixo I had to add 'app' to make it work: '​'.svelte-kit/dev/runtime/app”

[rixo]

@JWRunner Yes indeed, thanks. I fixed my example above.

Digging this a little more, I see that nicely mocking a Kit app's context will also be one of the challenges to address.

In the current state of things, we can make the Header component of the Kit's example template with something like this:

<script>
  import { View } from 'svench'
  import Header from './index.svelte'

  import { setContext } from 'svelte'
  import { writable } from 'svelte/store'

  const page = writable({ path: '' })

  setContext('__svelte__', {
    page,
    navigating: writable(),
  })
</script>

<View name="default">
  <Header />
</View>

<View name="home" init={() => {$page.path = '/'}}>
  <Header />
</View>

<View name="about" init={() => {$page.path = '/about'}}>
  <Header />
</View>

<View name="todos" init={() => {$page.path = '/todos'}}>
  <Header />
</View>

<!--
Or, with dynamic views... But this prevents extraction of view by
names by static analysis of the code, which comes with pretty severe 
limitations on what Svench can do with them, so I'm still not too sure 
how much this feature is going to make it to the final cut.
-->
{#each ['/', '/about', '/todos'] as path}
  <View name="page: {path}" init={() => {$page.path = path}}>
    <Header />
  </View>
{/each}

I wonder how Svench could help with supporting this use case (and maybe Svelte context in general). What kind of lean syntax / helpers would work best and be the most useful? Ideas and suggestions welcome!

[jacob-8]

As an fyi, npm init svelte@next (v146), npm i -D svench@next (v29), add svench.config.js as mentioned above and npx svench results in the error:
[vite-plugin-svelte] failed to import config /workspace/template-sveltekit/svelte.config.js TypeError [ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING]: A dynamic import callback was not specified

[rixo]

@JWRunner This is fixed in latest (which was more recent than next currently... I remove the next tag from npm to avoid confusion):

pnpm add -D svench vite @sveltejs/vite-plugin-svelte
pnpx svench

Does this work for you?

[jacob-8]

Works on Linux now (when I try in GitPod) but throws this error on Windows: Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:' at resolve (C:\dev\sveltekit-svench\node_modules\svench\lib\import-relative.cjs:38:17) - When I log the inputs to that resolve function I get target as @sveltejs/vite-plugin-svelte and opts as { basedir: 'C:\\dev\\sveltekit-svench', packageFilter: [Function: packageFilter], paths: [] }

Edit: I figured it out as the same problem as in #30 and submitted #38

[tomatrow]

Here's what I did to get the same session I would have in production.

<!-- Mock.svelte -->
<script lang="ts" context="module">
    import { writable } from 'svelte/store'
    import { handle, getSession } from "../../hooks"
    import { noop } from "svelte/internal"
    
    export const stores = {
        page: writable({ path: '/' }),
        navigating: writable(),
        session: writable()
    }
    
    export async function getMockSession() {
        const request = { locals: {} }
        const resolve = noop
        // @ts-ignore
        await handle({ request, resolve })
        // @ts-ignore
        return await getSession(request)
    }
</script>

<script lang="ts">
    import { setContext } from 'svelte'

    const { session } = stores
    setContext('__svelte__', stores)

    getMockSession().then(result => $session = result)
</script>

{#if $session}
    <slot />
{/if}