This repository contains svelte components that can be used in other projects. You should consider creating a svelte components if you need a component that requires a lot of clientside logic. If you want to create a component that can be ESI'd in without a lot of clientside logic, take a look at the esi-components

$3

1. yarn

2. yarn dev:myComponentName to run a single component (faster) or yarn dev to run all components

3. localhost:3000/render/example

$3

This project serves content both through a NPM package and an express server. For your changes to be available everywhere, follow these steps

1. Make your changes or create your component and create a pull request. (make sure to follow the required structure, run yarn new-component -- yourcomponentname to setup a new component with the correct structure)
2. Bump the version in package.json _(optional, only needed if you are going to release the npm package)_
3. If you want to use the component through the NPM package, add your component to the buildPackage component variable in the webpack.config.js file.
4. Merge to master.
5. Clear cache for your component, the cache channel will be svelte-components-yourcomponentname or just svelte-components for all of them. You can do this through the admin panel in janitr (https://github.com/dbmedialab/janitr)

If your component is not used through the NPM package, you do not need to do anything else. If it's used through the package and you need to release a new version, follow these additional steps to release it:

1. git pull from master locally and make sure you do not have any local changes.
2. Run yarn build-package
3. Run npm publish --access public to publish your changes to NPM. (Make sure you are logged in with npm login and that your NPM user is a part of the Aller org)
4. Update the @aller/svelte-components version in the repositories that uses it _(wolverine-frontend-xavier)_.

$3

There is a specific structure and naming convention that needs to be followed for this to work properly right now. Run yarn new-component -- yourcomponentname to automatically setup the correct structure for your new component.

Each svelte component needs to be placed within it's own folder in /src. The component's folder should contain a entry.svelte and entry.js. The entry.js file needs to import your svelte component, and export the return value from generateComponentEntry. The entry.svelte file should be the root of your svelte component. You can also add the optional getInitialProps.js file to run code on the server before the component is rendered. All other files should be within subfolders, and there is no specific structure that is required here.

Example structure:

``
src
|
└───mynewcomponent
│ │ entry.js
│ │ entry.svelte
│ │ getInitialProps.js
│ │
│ └───components
│ │ Button.svelte
│ │ List.svelte
│ │ ...
│ └───stores
│ │ store.js
│ │ ...
`

$3

This project uses svelte-preprocess-cssmodules. Make sure you add module="mixed" to the style tags in all of your svelte files, like so: