Feature Sliced Svelte

Useful utilities for maintaining a project on Svelte according to the Feature Sliced Design architecture.

Usage

First, install the package.

npm install --save-dev feature-sliced-svelte

Then wrap the root (App) element of your application in a FeatureSlicedDebug component.

<script>
  import { FeatureSlicedDebug } from 'feature-sliced-svelte'
</script>

<FeatureSlicedDebug />
<div>
  <!-- your app code -->
</div>

Layers

Now when creating a new component, use action to set the FSD layer. The allowed layer names can be found in the FSD documentation.

<script>
  import { fsd } from 'feature-sliced-svelte'
</script>

<div use:fsd={'widgets/UserList'}>
  <!-- your widget code -->
</div>

Debugging

To start or disable Feature Sliced Design debugging mode, press the key combination: Ctrl + Shift + F

Developing

Once you've installed dependencies withpnpm install, start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Everything inside src/lib is part of library, everything inside src/routes used as a showcase.

Building

To build library:

npm run package

To create a production version of showcase app:

npm run build

You can preview the production build with npm run preview.