sveature
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.
Getting Started
Install the package globally
$ yarn global add sveature
or
$ npm i -g sveature
Initialize Sveature
In an empty directory or an existing Sapper application:
$ sveature init
What it Does
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
Starting Sveature
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.
Creating components
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.
Building the Component Library
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.
How it Works
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.
Usage
$ 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
...
Commands
sveature build
build feature library
USAGE
$ sveature build
EXAMPLE
$ sveature build
building feature library
See code: src/commands/build.ts
sveature component
create a new component & related files
USAGE
$ sveature component
EXAMPLE
$ sveature component
creating new component
See code: src/commands/component.ts
sveature dev
start feature library in development mode
USAGE
$ sveature dev
EXAMPLE
$ sveature dev
Starting Sveature in development mode
See code: src/commands/dev.ts
sveature help [COMMAND]
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
sveature init
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
