Sveature is an opinionated component feature testing and library utility for Sapper and Svelte projects.
The goal of this project is to offer an alternative to Storybook that enables developers to easily demonstrate and test features of their Svelte components.
Currently this is accomplished with a wrapper around Rollup and livereload, but the intent is to leverage Snowpack and the upcoming svelte kit and adapters.
$ yarn global add sveature
or
$ npm i -g sveature
In an empty directory or an existing Sapper application:
$ sveature init
sveature init
does a few things to configure your project for you:
- If the directory is empty:
- Uses degit to copy the Sapper Rollup template
- Configures Sapper for TypeScript
- Installs Sapper dependencies
- Updates/Installs Testing Dependencies:
- yarn upgrade
- installs latest versions of testing packages
- installs sveature locally
- Copies project files:
- creates the docs folder as configured
- populates the docs folder with default configuration
Now that your project is configured, you're ready to start Sveature!
$ sveature dev
Starting Sveature in development mode
⌚ Bundling
LiveReload enabled
http://localhost:10001 -> /home/example/projects/sveature-test/docs/dist
✔ Bundled
This will start Rollup in watch mode and serve the bundle with livereload.
The URL for the application will be printed in the console.
Now that you have your Sveature development server listening, you can start creating components.
sveature component
allows you to quickly scaffold new components with example unit test and feature files.
$ sveature component
What do you want to call this component?: Dropdown
Creating component at /home/example/projects/sveature-test/src/components/Dropdown
✔ Component created
As you make changes to the component and feature files, livereload will automatically refresh the page and reflect your changes.
Feature files can be imported in unit tests to assert that specific features deliver the intended results.
In a default configuration, tests can be executed by running yarn jest
in the project directory.
Once your component library is ready to be published, you can bundle the component library into the configured docs directory:
$ sveature build
⌚ Building Sveature
✔ Build completed
Your component library can now be served using static pages or from within your Sapper application. Future builds of Sveature will enable you to generate true static bundles including HTML.
Sveature is essentially a wrapper around rollup-plugin-glob-files.
A glob of your choosing is imported as @features
within the code, presenting metadata that is exported within the .svelte
or .svx
files.
This metadata is used within a simple Svelte layout to present a SPA within which they can be viewed.
This layout can be replaced within the App.svelte that is included in docs/src
directory after init
.
$ npm install -g sveature
$ sveature COMMAND
running command...
$ sveature (-v|--version|version)
sveature/0.0.9 linux-x64 node-v14.9.0
$ sveature --help [COMMAND]
USAGE
$ sveature COMMAND
...
build feature library
USAGE
$ sveature build
EXAMPLE
$ sveature build
building feature library
See code: src/commands/build.ts
create a new component & related files
USAGE
$ sveature component
EXAMPLE
$ sveature component
creating new component
See code: src/commands/component.ts
start feature library in development mode
USAGE
$ sveature dev
EXAMPLE
$ sveature dev
Starting Sveature in development mode
See code: src/commands/dev.ts
display help for sveature
USAGE
$ sveature help [COMMAND]
ARGUMENTS
COMMAND command to show help for
OPTIONS
--all see all commands in CLI
See code: @oclif/plugin-help
initialize sveature in a new or existing project
USAGE
$ sveature init
OPTIONS
-d, --dir=dir directory of sveature project
-p, --pattern=pattern pattern for feature file matching
EXAMPLE
$ sveature init
See code: src/commands/init.ts