# @maxlmore/design-library

> Stencil Component Starter

Latest version **0.0.20** (published 2020-06-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @maxlmore/design-library
pnpm add @maxlmore/design-library
yarn add @maxlmore/design-library
bun add @maxlmore/design-library
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.20 |
| Published | 2020-06-20 |
| First published | 2020-06-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 834.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | maxlmore |

## Links

- npm: https://www.npmjs.com/package/@maxlmore/design-library
- npm.io page: https://npm.io/package/@maxlmore/design-library

## Dependencies (2)

- [stencil](https://npm.io/package/stencil.md) 0.0.5
- [@stencil/sass](https://npm.io/package/@stencil/sass.md) ^1.3.1

## Recent versions

- 0.0.20 (latest) — 2020-06-20
- 0.0.19 — 2020-06-20
- 0.0.18 — 2020-06-20
- 0.0.17 — 2020-06-20
- 0.0.16 — 2020-06-19
- 0.0.15 — 2020-06-19
- 0.0.14 — 2020-06-19
- 0.0.13 — 2020-06-19
- 0.0.12 — 2020-06-18
- 0.0.11 — 2020-06-18
- 0.0.10 — 2020-06-18
- 0.0.9 — 2020-06-18
- 0.0.8 — 2020-06-18
- 0.0.7 — 2020-06-18
- 0.0.6 — 2020-06-18
- … 5 more at https://npm.io/package/@maxlmore/design-library/versions

## README

# Demo Project for hska university

This project contains a demonstration of the StencilJS Compiler.

### Prerequisites
- NodeJS
- npm
- Chrome

### Running the project
Running the dev server will show you an interactive demo of stencil and the way, components
are build using Native Web Components and the stencil compiler. 
To get started, execute in a terminal:
```bash
npm i
npm start
```
This will open the dev server at port 3333 and show you a demonstration of building web components with stencil.

### Framework integrations

### Static Site Generation

Stencil supports SSG by prerendering one or more routes of the website and serving them as
static sites, before additional javascript will be loaded asynchronosly. This is different
from Server Site Rendering, because the pages are compiled at build time, and not at runtime.

You can build a prerenderer version of your site by executing
````bash
stencil build --prerender
````
which will build the app into the ``www`` directory. 

To evaluate performance, the main page of this project (that is used to 
demonstrate all the stencil components) is once called using `http://localhost:3333/` 
and once using the `index.html` that was created using static site generation.

![]( images/render_w_js.png)
![]( images/render_wo_js.png)

Even though the comparison isn't completely fair, because on page is server from a server and one 
from disk, you can see the amount of time that is lost due to scripting. When using stencils
SSG, all necessary javascript will be loaded asynchronisly after the page has successfully renderer its first paint.

---
_Source: https://npm.io/package/@maxlmore/design-library · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._