Rock Mountain
  • Home
  • User Guide
    • Glass Web Components
    • Using reCAPTCHA
    • Publishing Source Code with Syntax Highlighting
  • Developer Guide
    • Getting Started
    • Adding NPM Packages
    • Database
      • Backing Up and Restoring Data
      • Database Schema
      • MongoDB Tips and Snippets
      • VS Code and the MongoDB Playground
    • Common Errors and Their Solutions
    • Developing Glass Web Components
    • DevOps
      • Build and Deployment Procedure
      • GitHub Conventions and Workflow
      • Merging Preview Into Main
    • File Structure
    • React Components
      • SiteLayout Component
      • Toggle Lazy Load Image Component
    • Update or Change the Fav Icon
    • References and Learning Resources
  • Icons
Powered by GitBook
On this page
  • About Stencil
  • Developer Getting Started (with this project)
  • Publishing to npm
  • Useful Developer References
  1. Developer Guide

Developing Glass Web Components

PreviousCommon Errors and Their SolutionsNextDevOps

Last updated 3 years ago

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:

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

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

  • 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

Need help? Check out Stencil.js docs .

For more information on the publish command, see the .

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

here
CLI documentation
Ionic Forums
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
Glass Web Components (Library Documentation)