Synbee Webcomponents Library

A library of webcomponents for Synbee project

Install:

First download the repository from git by ssh or https. Then run the commands:

npm install
npm build

To develop just start the webserver with the command:

npm start

it will open a webservice reserved to develop the webcomponents.

here you can use the entire library, compose all webcomponents together and interact directly with them.

What you will find in project:

- stecil.config.ts :

is the configuration file of stencil library

- src directory:

is the main directory in which you can find the src directory of all webcomponents you create, the index.html file that is the first html parsed in webserver started with npm start command, test directory in which there are all end-to-end and unit test of webcomponents, storybook directory in which there are all stories of webcomponent, interfaces.ts that contain all interfaces decalared in library.

- servicebus directory

a directory with 2 file that are used to implment for first time azure service bus

- scripts directory

a directory in which there are all the usefull scripts described later.

tailwind.config.js & tailwind.css

configuration files of tailwind

template directory

a directory in which there are 3 files: package.json, gitlab-ci.yml and stencil.config.ts that are used in publish.isolate.component, publish.isolate.all and gitlab-ci-yml-regenerate commands. to generate in every webcomponent the same files described before to build a standalone stencil library for every webcomponent.

Publish in locale (Reserved to dev phase):

When you are ready to publish a webcomponent there are 2 procedures to do it.

1. Publish the single webcomponent:

Usefull if you just develop a single webcomponent (without integrations with others one) and you want to testing it on webapplication:

Just follow this procedure:

run build
run publish.isolate.component

now it starts the interactive mode where you have to follow what is written in terminal to end the procedure.

if you want to not use the interactive mode just run :

run publish.isolate.component --name nameofcomponent

At the end of this procedure you will find in path:src/components/nameofcomponents 2 new file : package.json and gitlab-ci.yml that are copied in directory .build/nameofcomponent/components/nameofcomponent and the .build directory that is the folder where is the stencil mini-project of your webcomponent

(it will be the single webcomponent you have to publish on npm).

Now go to .build/nameofcomponent and just do the following commands:

npm run build
npm pack

in this way you make a .tgz file that is your webcomponent published in local you can take it with the absolute path and put inside package.json of synbee-webapp. 2) ### Publish all webcomponents

run build
run publish.isolate.all

now it starts the interactive mode where you have to follow what is written in terminal to end the procedure.

if you want to not use the interactive mode just run :

run publish.isolate.all --name noninteractive

At the end of this procedure you make package.json and gitlab-ci.yml files in all webcomponent in src/components/nameofcomponents and a .build directory with all webcomponent ready to be published.

In this way you make a .tgz file that is your webcomponent published in local you can take it with the absolute path and put inside package.json of synbee-webapp.

Publish online (on NPMjs)

All you need to publish online a webcomponent is to be sure it's a working a stable version of it. By following the same procedure of publish in locale, in this way, you have to stop before do the command: npm pack. Now Everything you have to do is to commit and push on gitlab and an automatic procedure will publish for you the webcomponent on .build directory.

List of Scripts:

• In scripts folder there are some usefull scripts to manage our code. Here the list of the scripts:

Stencil General Documentation:

Stencil Component Starter

This is a starter project for building a standalone Web Component using Stencil.

Stencil is also great for building entire apps. For that, use the stencil-app-starter instead.

Stencil

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.

Getting Started

To start building a new web component using Stencil, clone this repo to a new directory:

git clone https://github.com/ionic-team/stencil-component-starter.git my-component
cd my-component
git remote rm origin

and run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Need help? Check out our docs here.

Naming Components

When creating new component tags, we recommend not using stencil in the component name (ex: <stencil-datepicker>). This is because the generated component has little to nothing to do with Stencil; it's just a web component!

Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix ion.

Using this component

There are three strategies we recommend for using web components built with Stencil.

The first step for all three of these strategies is to publish to NPM.

Script tag

• Put a script tag similar to this <script type='module' src='https://unpkg.com/[email protected]/dist/my-component.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install my-component --save
• Put a script tag similar to this <script type='module' src='node_modules/my-component/dist/my-component.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install my-component --save
• Add an import to the npm packages import my-component;
• Then you can use the element anywhere in your template, JSX, html etc