# @paulandrewc/stencil-components

> Stencil Components

Latest version **1.0.8** (published 2018-04-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install @paulandrewc/stencil-components
pnpm add @paulandrewc/stencil-components
yarn add @paulandrewc/stencil-components
bun add @paulandrewc/stencil-components
```

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2018-04-29 |
| First published | 2018-04-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 130.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | paulandrewc |

## Links

- npm: https://www.npmjs.com/package/@paulandrewc/stencil-components
- Repository: https://github.com/paulandrewc/StencilJS-Components
- Homepage: https://github.com/paulandrewc/StencilJS-Components#readme
- Issues: https://github.com/paulandrewc/StencilJS-Components/issues
- npm.io page: https://npm.io/package/@paulandrewc/stencil-components

## Dependencies (1)

- [@stencil/core](https://npm.io/package/@stencil/core.md) 0.7.7

## Recent versions

- 1.0.8 (latest) — 2018-04-29
- 1.0.7 — 2018-04-20
- 1.0.6 — 2018-04-11
- 1.0.5 — 2018-04-10
- 1.0.4 — 2018-04-10
- 1.0.3 — 2018-04-10
- 1.0.2 — 2018-04-10
- 1.0.1 — 2018-04-10
- 1.0.0 — 2018-04-09

## README

# Stencil Components

These components are built using [StencilJS](https://stenciljs.com).

StencilJS is a compiler that generates Web Components that don't need any frameworks to run as they are just Custom Elements.

You can see an example here in a [JSFiddle](https://jsfiddle.net/c1qf9en8/4/).

You can also see an example which modifies the data and corners of the triangle with angular. Example here in [JSFiddle](https://jsfiddle.net/c1qf9en8/20/).

I have also created a simple component called dashboard-element-container which is a collapsible box and added a "slot" in it.

This slot allows for me to transclude other items into it, including other components.

Here is an example where the two components are being used together. [JSFiddle](https://jsfiddle.net/c1qf9en8/22/).

## Getting Started
To install this to an existing web project you can use NPM.

To install with NPM please use the following command 
```
npm install @paulandrewc/stencil-components --save
```
Then include the following files in any web output:
> node_modules/@paulandrewc/stencil-components/dist/stencil-components.js

And any files in the following folder 

> node_modules/@paulandrewc/stencil-components/dist/stencil-components/*.js 

**NOTE:- this folder must be in the same location as the js file and have the same name.**

You can now just add the stenci-component.js to your html with a script tag similar to below:
```
<script src="..\js\stencil-components.js"></script>
```

Once the Javascript is included all you need to do is add the component tag to the body and it will add the component.
```
<ternary-graph></ternary-graph>
```

You should now be able to see a triangle on the page.

## Creating A Test Site From Scratch
To create a very simple test website follow these steps.(you will need to have node and npm installed)
* Create a new folder to hold your project.
* Now open powershell in this folder.
* Create default package.json
```
npm init --yes
```

* Install the package. (The save parameter will add it to your dependencies.)
  * Serve and copyfiles will be used for this example but are not dependencies of the package.
```
npm install @paulandrewc/stencil-components --save
npm install serve -g --save
npm install copyfiles --save
```

* Create a simple HTML page called index.html in a www folder.
```
mkdir www
new-item www\index.html
```

* Change the package.json to make the "scripts" object the same as below.
  * This adds a copyjs command which will copy in the javascript files from the npm package.
  * This also adds a "start" command that will run the copy and serve the website on port 5001.
```
  "name": "Stencil-Components-TestPage",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start" : "npm run copyjs && serve www -p 5001",
    "copyjs" : "copyfiles -f node_modules/@paulandrewc/stencil-components/dist/stencil-components.js www/js && copyfiles -f node_modules/@paulandrewc/stencil-components/dist/stencil-components/*.js www/js/stencil-components",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@paulandrewc/stencil-components": "^1.0.0"
  }
}
```

* Change the index.html to be the following.
  * The script tag points to where the copyjs task will put the javascript file.
  * The tag "ternary-graph" will add the component to the page.
```
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Demo</title>
 <script src="..\js\stencil-components.js"></script>
</head>
<body>
 <ternary-graph></ternary-graph>
</body>
</html>
```


**Congrats!!** The website should now be running on port 5001.

Browse to localhost:5001 and you should see the ternary-graph component which is a red blue and green triangle.

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