feature-sliced-svelte
TypeScript icon, indicating that this package has built-in type declarations

1.4.0 • Public • Published

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.

Package Sidebar

Install

npm i feature-sliced-svelte

Weekly Downloads

1

Version

1.4.0

License

MIT

Unpacked Size

15.8 kB

Total Files

22

Last publish

Collaborators

  • mishamyrt