Skip to content

Latest commit

 

History

History

svelte

README.md

@gb-nx/svelte

This library was generated with Nx.

CI npm version

See the NX Discussion of first class support for Sveltekit. You may not need this plugin.

Nx Plugin for managing svelte-kit applications in your Nx workspace

Features

Here is a list of some of the coolest features of the plugin:

  • ✅ You work with the routes and components and the plugin manages boilerplate
  • ✅ Building, testing, linting your projects

Prerequisite

If you have not already, create an Nx workspace with the following:

# npm
npx create-nx-workspace@latest

# yarn
yarn create nx-workspace@latest

Getting Started

Then you need to install the plugin in order to work with svelte applications later on.

Installing Plugin

nx add @gb-nx/svelte

Generating Project

The plugin will create an Nx project for an existing svelte-kit application. Do so with commands similar to the following

npx create-nx-workspace@latest sample-workspace --preset apps
cd sample-workspace/apps
npm create svelte@latest web
cd web
npm install
cd ..\..
nx g @gb-nx/svelte:application web
nx build web
nx lint web
nx test web

Add a route

nx g @gb-nx/svelte:route admin/[area] --project web
Option Type Description
name string The name of the route.
project string The Svelte project to target.
directory string Directory where the generated files are placed.
skipFormat boolean Skip formatting files.
skipTests boolean Do not create 'spec' test file for the route.
language string Route script language (ts/js).
style string Route style language (css/scss).
load string Source of data for your load function
runes boolean Use svelte runes (requires svelte >=5)

Add a component

nx g @gb-nx/svelte:component SocialMedia --project web
Option Type Description
name string The name of the component.
project string The Svelte project to target.
directory string Directory where the component is placed, relative to your Svelte project lib folder.
skipFormat boolean Skip formatting files.
language string Component script language (ts/js).
style string Component style language (css/scss).
runes boolean Use svelte runes (requires svelte >=5)

Add a lib dependency

The generator will

  • add an alias to your svelte.config.js for importing a workspace library in your SvelteKit application
  • add an implicit dependency to the SvelteKit project
nx g @gb-nx/svelte:dependency --project web --dependency my-lib
Option Type Description
project string The project to add the dependency src to
dependency string The dependent project to add
scope string The scope to prepend to the dependency name for the alias name (without the @)
skipFormat boolean Skip formatting files.

Migrations

This plugin supports Nx migrations and provides necessary version and code updates. So instead of bumping plugin version manually in package.json it's recommended to run nx migrate @gb-nx/svelte command, that includes bumping the version of the @gb-nx/svelte plugin, related dependencies and running code migrations.

@gb-nx/svelte & Nx Compatibility Chart

@gb-nx/svelte version Nx version
^8.0.0 >=17.0.0
^6.0.0 ^17.0.0
^5.0.0 ^16.0.0
<5.0.0 ^15.0.0

License

MIT