@webdevandsauages/event-terminal

This is component is intended for use in webdevandsausages.org and is not suitable for other projects. The original boilerplate is from svelte component template.

Table of Contents

1. Getting started
2. Developing
3. Consuming components
4. Backward Compatibility
5. Preprocessors

Getting Started usin the component

npm i @webdevandsauages/event-terminal --save

Include in your project

<script>
  import {Terminal} from '@webdevandsausages/event-terminal'
</script>

<style>
	.terminal-wrapper {
		margin: 20px 10%;
	}

	@media (max-width: 650px) {
		.terminal-wrapper {
			margin: 20px 2%;
		}
	}
</style>

<div class="terminal-wrapper">
 /* it is possible to pass in the event here and the component will not fetch it itself */
	{#if process.browser}
		<Terminal event={null} />
	{/if}
</div>

Developing

1. Start Rollup:

npm run dev

2. Edit a component file in src/components, save it, and reload the page to see your changes.

3. Make sure your component is exported in src/components/components.module.js.

4. Make sure your component is imported and nested in src/App.svelte.

5. Navigate to localhost:3000 to see your components live.

6. In development the express dev server will proxy /api requests tolocalhost:5000

Consuming Components

Your package.json has a "svelte" field pointing to src/components/components.module.js, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like rollup-plugin-svelte or svelte-loader (where resolve.mainFields in your webpack config includes "svelte"). This is recommended.

For everyone else, npm run build will bundle your component's source code into a plain JavaScript module (index.mjs) and a UMD script (index.js), in the dist folder. This will happen automatically when you publish your component to npm, courtesy of the prepublishOnly hook in package.json.

Backward Compatibility

This template uses svelte-preprocess in order to integrate PostCSS auto-prefixing capabilities into the build process.

Browserlist

PostCSS uses browserlist under the hood, in order to "know" what css to prefix.

The browserlist configuration is located inside the package.json.

Preprocessors

This template comes with the svelte-preprocess by default, which simplifies the use of preprocessors in components.

Usage

1. Install the required preprocessors.
2. Enable the preprocessor in the component.