@greenwood/plugin-polyfills

0.29.2 • Public • Published

@greenwood/plugin-polyfills

Overview

A Greenwood plugin adding support for Web Component related polyfills for browsers that need support for part of the Web Component spec like Custom Elements and Shadow DOM. It uses feature detection to determine what polyfills are actually needed based on the user's browser, to ensure only the minimum extra code is loaded. If you are using Lit@2, it also loads the needed polyfill-support.js file.

As of right now, you will likely need this plugin to load additional polyfills if you want to support these browser(s):

  • Internet Explorer <= 11
  • Mobile Browsers
  • Declarative Shadow DOM

See Greenwood's browser support and evergreen build docs for more information on how Greenwood handles browser support out of the box. Or visit caniuse.com to look up specific support for specific browsers.

For more information and complete docs about Greenwood, please visit the Greenwood website.

Installation

You can use your favorite JavaScript package manager to install this package. This package assumes you already have @greenwood/cli installed.

examples:

# npm
npm install @greenwood/plugin-polyfills --save-dev

# yarn
yarn add @greenwood/plugin-polyfills --dev

Usage

Use this plugin in your greenwood.config.js.

import { greenwoodPluginPolyfills } from '@greenwood/plugin-polyfills';

export default {
  ...

  plugins: [
    greenwoodPluginPolyfills()
  ]
}

Now when your project builds for production, you will see a bundles/ directory in your output directory, as well as a file called webcomponents-loader.js, as well as a <script> tag for that file in the <head> of your index.html files. When a page is loaded, the feature detection capabilities will then load the necessary polyfills to have your project work for a user's given browser.

Note: we would like to add support for differential loading to avoid the cost of this for newer browsers.

Options

This plugin supports the following polyfills and configuration options:

  1. Web Components Loader - wc
  2. Declarative Shadow DOM - dsd
  3. Lit - lit (Use this in conjunction with Web Components Loader)

You can adjust either of these default behaviors by providing true or false for each polyfill type.

import { greenwoodPluginPolyfills } from '@greenwood/plugin-polyfills';

export default {
  ...

  // default values shown here
  plugins: [
    ...greenwoodPluginPolyfills({
      wc: true,
      dsd: false,
      lit: false
    })
  ]
}

Package Sidebar

Install

npm i @greenwood/plugin-polyfills

Weekly Downloads

1

Version

0.29.2

License

MIT

Unpacked Size

8.71 kB

Total Files

4

Last publish

Collaborators

  • thescientist13