@dympydev/nx-sveltekit v1.1.1

@dympydev/nx-sveltekit

Using these generators/executors you can easily add a Svelte-kit application to your NX monorepo. Based on the create-svelte package, you can choose between a number of different templates, as well als adapters.

Generators:

application

The application-generator allows you to add SvelteKit application, based on the provided tempalte, to your NX-monorepo. During the setup you can also pick which adapter it should use (though the default options are somehwat limited).

route

The route-generator allows you to add a route to your application using a +page.svelte file, along with any data-loading code if required. When adding a route with arguments, please wrap the route in double-quotes as the brackets aren't understood by the NX-cli.

layout

The layout-generator adds a +layout.svelte file with a default slot at the path you've provided, along with any data-loading code if required. When adding a layout to a route with arguments, please wrap the route in double-quotes as the brackets aren't understood by the NX-cli.

Executors:

build

The build-executor uses the "nx:run-commands"-executor to run the vite build-command to build the application. After a build, it copies over the output to the provided "distPath"-option (which, when using the application-generator, defaults to the dist folder in the root of the monorepo).

serve

The serve-executor uses the "nx:run-commands"-executor to run the vite dev-command to serve the application.

preview

The preview-executor uses the "nx:run-commands"-executor to run the vite preview-command to preview the previously build application. This executor depends on the build target, something that is configured automatically when using the application-generator.

This executor does not have any options (yet).

test

The test-executor uses the "nx:run-commands"-executor to run the vitest-command to run the unit-tests for the application. By default it will just run the tests once and then finish, but there is an option to run it in watch-mode.

e2e

The e2e-executor uses the "nx:run-commands"-executor to run the playwright test-command to run the E2E tests. Before running the tests it will always execute a npx playwright install-command, just to make sure everything is in place for the playwright tests.

This executor does not have any options (yet).

check

The check-executor uses the "nx:run-commands"-executor to run the svelte-check-command, as well as the svelte-kit sync-command. The sync command will update the generated files (such as the types and whatnot) and the check command will provide different diagnostics for your svelte app (not a replacement for the linter!). By default it will just run these commands once and then finish, but there is an option to run the check-command in watch-mode.

A little bit of black magic:

While most of the generated application is straight out off the create-svelte-package, I did add a little bit of black magic to make things work nicely with NX. It mainly comes down to:

• Allowing imports from the root of the monorepo, so we can access shared libraries and such.
• Generating SvelteKit aliases based on the tsconfig.base.json from the root of the monorepo.

The first part is rather easy, when generating the application, I take the project-path we're generating (relative to the root of the monorepo) and convert that to a "projectDepth" constant. This constant basically consists of the number of ../ we have to do to reach the root of the monorepo from the application-folder. Then, while generating the vite.config.ts, we add this "projectDepth" to the server.fs.allow-property, so the vite dev server is allowed to load files from the complete monorepo and not just the application itself.

The second piece of black magic, is a little more magical than the first. Because SvelteKit uses Vite under the hood, we have access to aliases. SvelteKit uses this out-of-the-box for stuff like $lib, but we can extend this to add the compilerOptions.paths from our tsconfig.base.json from the root of the monorepo. This way, you can simply import from @your-repo-scope/your-library in your .ts/.js/.svelte files (in case of the .svelte files there's a known limitation regarding the dependency-graph, see below). We achieve this by requiring the tsconfig file, grabbing the compilerOptions.paths and converting them to aliases with a little help from Object.entries and Array.reduce.

Known limitations:

Sadly, there are a few things that are not quite going the way I would like them to go. I will document these limitations here, but also as issues on the GitHub-issues tab so we have a place to track progress!

The current known limitations are:

• No library generator: Right now we only support applications, routes and layouts, but the create-svelte package also has a preset for libraries. I want to add this as well, along with options to distinguish between workspace and publishable libraries.
• .svelte-files in the dep-graph: When you import a workspace-library in a ts or js file inside the SvelteKit application source, it correctly shows up in the dependency-graph. However, when importing one of these libraries in a ".svelte"-file, it is missing. The great folks over at Nrwl have documented how to extend the dependency-graph, but I haven't had the time to add it as of now.
• A nice NX-starting page as application template option: Both React and Angular get this nice NX getting-started page when you generate a new application. I want to recreate that for the SvelteKit applications, just because it's fun!