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:

1. If the directory is empty:

• Uses degit to copy the Sapper Rollup template
• Configures Sapper for TypeScript
• Installs Sapper dependencies

2. Updates/Installs Testing Dependencies:

• yarn upgrade
• installs latest versions of testing packages
• installs sveature locally

3. 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.

• sveature
• Getting Started
• Usage
• Commands

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
• sveature component
• sveature dev
• sveature help [COMMAND]
• sveature init

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