Developing Glass Web Components

Glass Web Components are a library of Web Components designed for use with Rock Mountain Platform, but since they are just Web Components, they work in any major framework or with no framework at all.

Built With Stencil

Find the complete inventory and usage documentation for the library here:

Glass Web Components (Library Documentation)

About 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.

Developer Getting Started (with this project)

To start building a new web component using Stencil, change into the libraries/glass-web-components directory and run:

npm start

To build the component library for production, run:

rush build or...

rush rebuild

To run the unit tests for the components, run:

npm test

Need help? Check out Stencil.js docs here.

Publishing to npm

• CD into the libraries/glass-web-components directory.

• Make sure that the package number in package.json has been updated since the last publish to npm.

• Run rush build or rush rebuild to build the package for production.

• Execute npm login (and enter credentials).

• Publish the public package to the npm registry using: npm publish

  • To see your public package page, visit https://www.npmjs.com/package/glass-web-components

  • For more information on the publish command, see the CLI documentation.

• Next, you need to test in the preview branch. Make sure your in it.

• Update the version number of glass-web-components in apps/rockmtn-platform/package.json to match what you just published to NPM.

• Execute rush build or rush rebuild

• In apps/rockmtn-platform, execute npm run dev and do a visual spot-check on everything.

Useful Developer References

• Ionic Forums - Forums for Ionic Framework, Capacitor, Appflow, Stencil, Portals

• Passing an Object or Array to Stencil through markup

• Stencil Style Guide

• Quick Tip — Using Prop() Context in Stencil

• Quick Tip — Dynamic Stencil Component Names with JSX

• Using Refs in Stencil

• Render Props in Stencil

• Consuming a Stencil Component in React App

• Creating Shared State in Stencil

• Using Objects/Arrays as Props in Stencil Components

• Creating a Simple Login Form Using Stencil

• Getting to Know Stencil Decorators

• User Interface Design patterns

• Welie.com - Patterns in Interaction Design