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.
Find the complete inventory and usage documentation for the library here:
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.
To start building a new web component using Stencil, change into the
libraries/glass-web-components directory and run:
To build the component library for production, run:
rush build or…
To run the unit tests for the components, run:
Need help? Check out Stencil.js docs here.
- CD into the
- Make sure that the package number in
package.jsonhas been updated since the last publish to npm.
rush rebuildto build the package for production.
npm login(and enter credentials).
- Publish the public package to the npm registry using:
- 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
previewbranch. Make sure your in it.
- Update the version number of
apps/rockmtn-platform/package.jsonto match what you just published to NPM.
- In apps/rockmtn-platform, execute
npm run devand do a visual spot-check on everything.
- 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