Qrvey AnalytiQ Widgets

This is a custom project made with StencilJS for creating AnalytiQ widgets.

Getting Started

For the first time you must run:

npm install

Serve in local

To start a dev local server, run:

npm start

Build all

To build all the components in a bundle for production, run:

npm run build

To build all the components in a bundle for production, using a custom S3 bucket, run:

npm run build.prod S3_BUCKET_URL

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

Script tag

• Publish to NPM
• Put a script tag similar to this <script src='https://unpkg.com/[email protected]/dist/mycomponent.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 src='node_modules/my-component/dist/mycomponent.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

Need more help?

Check out the official StencilJS Docs.

Husky and lint-stage

This dependencies help us to validate code in git pre-commit hook. Additionaly, you can create actions in any git hook.

• Husky: Documentation
• lint-stage: Documentation