Sveltekit app starter template/generator

[kristianmandrup]

Description

I'd love to see a SvelteKit starter template for Bits.

I managed to created a Svelte on Bits demo app based on:

• https://bit.cloud/frontend/svelte

Which I found via #6664

Describe the solution you'd like

A generator for Sveltekit 2. I would think it is not that difficult, as the Svelte app is just a simple Svelte app with a few additional files added for the Bit dev server to use to showcase it.

I wonder if I could manually create a new named Bit scope, run the Sveltekit generator there and then manually insert the Bit dev server files required, hooked up to the app?

I'd also much appreciate a blog post and docs, announcing the availability of the Svelte option with some more in-depth coverage of how to use it and get started. Cheers!

Describe alternatives you've considered

See above

Additional context

[kristianmandrup]

I've since looked more into Bit custom environments. I can see that the current Svelte env uses Svelte 3.x

I recommend updating the env.jsonc to the following. Note that the issue referenced has since been resolved and closed and we're now on 4.x stable and 5.x RC.

      {
        "name": "svelte",
        // THIS ISSUE HAS BEEN RESOLVED
        // waiting with update to svelte 4 until either bit is ready for ESM module testing 
        // or svelte-jester is ready for it https://github.com/svelteness/svelte-jester/issues/121
        "supportedRange": "^4.2.18", 
        "version": "^4.2.18",
        "force": true
      },

[kristianmandrup]

I believe that the Svelte env can mostly be reused with a few changes as follows:

env.jsonc

{
  "policy": {
    "peers": [
      // react packages are required for the env's rendering of component docs, and are not related to 
      // how the env processes your svelte component code
      {
        "name": "@sveltejs/kit",
        "supportedRange": "^2.0.0 || ^2.5.0", 
        "version": "^2.5.0",
        "force": true
      },
      {
        "name": "@sveltejs/adapter-auto",
        "supportedRange": "^3.0.0 || ^3.2.4", 
        "version": "^3.2.4",
        "force": true
      },
      {
        "name": "svelte",
        "supportedRange": "^2.0.0 || ^2.5.0", 
        "version": "^2.5.0",
        "force": true
      },
      {
        "name": "vite",
        "supportedRange": "^4.0.0 || ^4.2.18", 
        "version": "^4.2.18",
        "force": true
      },
      {
        "name": "react",
        "version": "^18.0.0",
        "supportedRange": "^17.0.0 || ^18.0.0",
        "hidden": true
      },
  // more ...
  ]
  }
}  

svelte-kit.vit-env.ts

export class SvelteKitEnv extends SvelteEnv {

  // ideally replace with ViteTester 
  tester(): EnvHandler<Tester> {
    return JestTester.from({
      jest: require.resolve('jest'),
      config: require.resolve('./config/jest/jest.config'),
    });
  }

  starters() {
    // TODO: new starter for sveltekit needed
    return StarterList.from([SvelteKitWorkspaceStarter.from()]);
  }

  generators() {
    return TemplateList.from([
      SvelteComponentTemplate.from(),
      // TODO
      SvelteKitEnvTemplate.from(),
      SvelteKitAppTemplate.from()
      // XTRAS
      SvelteKitPageTemplate.from()
    ]);
  }
}

svelte-kit-env-interface.ts

// TODO reactor to extend HtmlEnvInterface instead, when html env has been ported over to new envs structure
export interface SvelteEnvInterface extends ReactEnvInterface, DependencyEnv {}

Then in the config folder there should be some vite configuration next to the jest config.

[kristianmandrup]

vite.config.js

import { sveltekit } from '@sveltejs/kit/vite'

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit()]
}

export default config

svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),

  kit: {
    adapter: adapter()
  }
};

export default config

[kristianmandrup]

For vitest config with testing-library as per https://testing-library.com/docs/svelte-testing-library/setup/

Configure add the following dev dependencies to the previous list:

@testing-library/svelte
@testing-library/jest-dom
@sveltejs/vite-plugin-svelte
vitest
jsdom

vite.config.js

import {defineConfig} from 'vitest/config'
import {sveltekit} from '@sveltejs/kit/vite'
import {svelteTesting} from '@testing-library/svelte/vite'

export default defineConfig({
  plugins: [sveltekit(), svelteTesting()],
  test: {
    environment: 'jsdom',
    setupFiles: ['./vitest-setup.js'],
  },
})

That should do it? :)

[itaymendel]

hi, thanks for the feedback.
we need to update the svelte-env to be ESM based for new versions of svelte to be supported. as the new version of the svelte compiler is shipped as ESM.
we already have this capability, and need to see when we have time to push for this light refactor.

thanks for your feedbacks, we'll try to use it to speed things up!

[kristianmandrup]

@itaymendel Thanks for the quick response. What is the concrete issue with consuming ESM by Bit?
Haven't most of the other frameworks moved to ESM by now?

I can see that sveltekit was converted to ESM a few years ago

Looking forward to to port later this year. In the meantime, I guess I can just import the svelte components from a regular sveltekit app as part of an Nx or Pnpm monorepo f.ex. I've seen a few articles on Bit/Nx integration.
Cheers!

I've just gone through your getting started youtube playlist.

P.S: Your series seem to be missing some important chapters:

• Forking a component from the Bit cloud
• Environments - How to create one or fork an existing one and make changes
• Wasn't entirely clear how environments are mapped to Bit components (ie. components run in a specific env - local or remote)

Perhaps these are advanced topics?

I'll check out some more videos and docs.

[kristianmandrup]

Turns out I was missing info on the Bitmap file which you quickly skipped over. There you can map components and apps to a specific environment (or via bit CLI).

I was curious how I would fork an env, customize it and export it to cloud for reuse and community.

bit export -h

bit export [component-patterns...]
use `bit pattern --help` to understand patterns
$env:teambit.react/react

So it looks like I can find a Bit env such as https://bit.cloud/frontend/svelte/svelte-env and fork it locally via the component ID, modify it and re-export it to my own Bit cloud account.

[itaymendel]

Bit supports ESM, it's just that the current plugin/env for Svelte with Bit is built in CJS, and this needs to be ported to ESM, as using ESM from CJS is not something we want to do here.

for example, you can see that here we don't have require.resolve - https://bit.cloud/bitdev/react/react-env/~code/react-env.bit-env.ts
but here you do have it - https://bit.cloud/frontend/svelte/svelte-env/~code/svelte.bit-env.ts