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
.