Svelte Components

A library of Svelte component maintained by Memorable Words.

Usage

Using components

https://github.com/rollup/rollup-plugin-svelte#pkgsvelte

Tip: if you are a developer of the component library, then you can install it once as devDependencies to app with npm i -D <path-to-svelte-components>, all change will appear immediately if you use livereload in app.

Import component library into your app in App.svelte :

<script>
    import { ByeBye, Hello } from "memorablewords-svelte-components";
    export let name
</script>
<Hello {name} ></Hello>
<ByeBye {name} ></ByeBye>

Example

The Memorable Words app was set up to use this library.

Development

Browsing the library

# Install the dependencies
npm install
# Run a local server
npm run dev

The local server:

• builds components on change
• serves from the public/ directory at http://localhost:5000
• handles livereload

Running the test suite

# Install the dependencies
npm install
# Run the local server (required on port 5000)
npm run dev
# Run the test suite
npm test

For changing the view of the test page use public/global.css and public/index.html

Adding components

1. Add your component’s code to src/ as directory, e.g.: src/HelloComponent/ (or add your component directly to src/).

2. Export the new component to apps in src/index.js

3. src/test.js and src/App.svelte are for testing purposes:

• add component to the src/App.svelte
• add component’s properties to src/test.js

1. Create your test cases to your component:

• add tests to test/ directory

References

Do you like what you see? You can make your own using this repository template!

• svelte https://svelte.dev
• nightwatch for testing: https://nightwatchjs.org
• eslint and prettier for formatting and linting
• rollupjs for bundling: https://rollupjs.org