trucks-plugin-load

Reads HTML imports into the component tree

Usage no npm install needed!

<script type="module">
  import trucksPluginLoad from 'https://cdn.skypack.dev/trucks-plugin-load';
</script>

README

Load

Reads the web component import tree

Reads HTML imports into the component tree resolving files using the registered protocol plugins.

<link rel="import" href="components.html">

When protocol plugins are defined as strings and do not resolve to an absolute path they are deemed to be modules to require and are prefixed with trucks-resolver- such that http will require the trucks-resolver-http package.

See the core, file, http and npm protocol resolver plugins.

Install

npm i trucks-plugin-load --save-dev


Usage

This plugin is bundled with the core trucks-compiler library.

If a protocols array is declared on the options it is used:

const options = {
  protocols: ['file']
}

Configure this plugin using the load field:

const options {
  conf: {
    plugins: {
      load: {
        /* plugin configuration */
      }
    }
  }
}

Or as a convenient shortcut use the top-level load field:

const options {
  load: {
    /* plugin configuration */
  }
}

Resolvers

Resolver plugins are mapped to URL protocols and allow the file load mechanism to be extended so that users can distribute and install web components from remote resources or implement custom protocols.

By default a protocol handler for the file: scheme is registered by the load plugin so HTML imports can be loaded from the local file system.

To enable a resolver first install the package (npm i trucks-resolver-http --save-dev) and then enable the plugin in the protocols list:

const options = {
  files: ['components.html'],
  protocols: ['http']
}

You can now use HTTP and HTTPS imports:

<link rel="import" href="https://domain.com/components.html">

Plugin functions are invoked synchronously before the load plugin executes; they allow HTML imports to be mapped to different protocols.

The signature for resolver plugins is:

function ftp(state, conf) {
  return (registry) => {
    registry.register('ftp:', FtpResolver); 
  }
}

Plugins must register a subclass of the core resolver.

See the file resolver and http resolver for example classes and plugin functions.

API

load

public load(state, conf)

Load HTML import files and create entries in the compiler state tree.

When a list of protocol plugins is given they are invoked when this plugin is initialized passing the compiler state registry so that the resolver plugins may register protocol scheme handlers.

If no protocols list is given the default file: protocol is enabled.

If a protocols list is given and does not contain the default file: protocol it is prepended to the list.

Returns plugin closure.

  • state Object compiler state.
  • conf Object plugin configuration.

Options

  • protocols Array list of protocol resolver plugins.

License

MIT


Created by mkdoc on August 5, 2016