Windstream Cart Design System / Rebuild

Figma Bugherd

Built With 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.

Learn more about Stencil here.

Getting Started

Just clone 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

Naming Components

All components must have the win prefix, like win-something, win-something-else.

Local Dev

Due to how web components and the shadow dom work, all styles are encapsulated and combined with Tailwind creates a very slow local development refresh. The fix for this locally, is to create components without the shadow dom and building for production with shadow dom turned on.

When creating a new component, you must update two items in the @Component decorator. Update the styleUrl to styleUrls, include the ../tw.css in the styleUrls array and lastly, change shadow: true to shadow: false.

# from
@Component({
  tag: 'win-app',
  styleUrl: 'win-app.css',
  shadow: true,
})

# to
@Component({
  tag: 'win-app',
  styleUrls: [
    '../tw.css',
    'win-app.css'
  ],
  shadow: false,
})

Publishing

The below script will run the following:

• Bump package version
• Commit changes
• Update Shadow DOM
• Run Stencil Build
• Publish to NPM*
• Reset Shadow DOM Changes

node ./scripts/publish --bump=[major,minor,patch]

*You will need to log in via terminal using our Union NPM account. Credentials are in 1pass.