mwilber / gz-badge-web-component

A webpack workflow for Web Components

<gz-badge>

Plain 'ol Web Components That Work Everywhere!

Create standards compliant web components that work in supporting browsers. No frameworks, no proprietary code! Looking forward to the day when all browsers support web components and ES6 syntax.

The webpack configuration generates a single bundle containing all of your components, as well as optional polyfills for non-supporting browsers.

Scripts

• npm start - Use for development. This runs the project in the webpack dev server.
• npm run build - Builds a /dist directory containing everything you need to upload to your server or add to an existing project.
• npm run wc:create - Creates web component boilerplate files.
• npm run wc:delete - Deletes a web component from your project.

Using This Project

The project comes with the sample web component <gz-badge> but let's walk through the steps for creating a web component from scratch:

• Run npm install from the project directory to install Webpack and all other dependencies
• Next, run npm start. This will start up the Webpack development server and open the built project in your default browser. Once the build process is complete you should see a mostly blank page with the <gz-badge> component in the lower right corner.
• Now let's make our first web component. The command npm run wc:create will generate all of the boilerplate code to get you started. Before doing that, it will prompt you for a component name. Let's call it hello-world.
  • Important: A web component name must be composed of only letters and dashes and must include at least one dash.
• At this point, if you look in the project src/components directory you will see a directory hello-world. In it there is a javascript file and a css file which make up your web component.
  • Note that a corresponding import statement has been added to the src/components.js file. If you delete your component manually, be sure to remove its import statement as well.
• After the create command is complete you may notice that Webpack has automatically bundled the new component and refreshed the page. However, it looks exactly the same! Don't worry, there's just one more step, you have to add the component to the page.
• Open up index.ejs, at the project root, in your code editor. Locate the line <div class="container">. Enter your web component markup, <hello-world></hello-world>, anywhere within this div tag.
  • index.ejs is provided as a playground for testing out your web components. The contents of this file will translate to the index.html file generated by the npm run build command.
• When you save, Webpack will automaticlly rebuild the page and reload. At this point you will see the web component's boilerplate messaging "hello-world works" on the page!

Polyfills

This project uses the polyfills library provided by webcomponents.org. Polyfills are added to the project via webpack and are not visible in your project source. The npm build script will add these scripts to its output dist/ directory. If your target is Chrome, you can omit these files completely from your production site. All other browsers require some level of polyfill. The webcomponents-loader.js is a small (9.5k) file which detects the browser's capabilities and loads polyfills from the bundles\ directory as needed. It is recommended that you use these files in most production environments.

IMPORTANT: The webcomponents-loader.js script tag must come before your web components script tag in the html page. Use the provided index.html page generated from npm run build as a guide.

gz-badge-web-component's Issues

Use css modules

Add support for StoryBook

Look into css @import

Fix security alert for braces < 2.3.1

Details Drawer

Clicking on the widget should open up a drawer with a short description of GZ and links to Tweeter, Facebook, LinkedIn? and the website.

Add name input to component generator