gulp-fuse

Merge separate HTML, CSS, and JavaScript files for a web component into a single web component file.

It's looking like browser's will not be supporting HTML imports, so the alternative it to bundle all of your HTML, CSS, and JavaScript into a single JavaScript file and then to load that JavaScript file using the traditional script tag.

If you would rather not write HTML and CSS within JavaScript files, this module could be for you.

How it Works

1. Put a script.js file, a style.css file, and a template.html file in the same directory.

2. And you run this gulp task:

   const gulp = require('gulp');
   const fuse = require('gulp-fuse');
   
   gulp.task('fuse', function() {
       return gulp.src('./components/**/*')
           .pipe(fuse())
           .pipe(gulp.dest('./components'));
   });

3. A new JavaScript file (with the same name as it's containing directory) will be produced with the HTML, CSS, and JavaScript merged.

Note: If you prefer you can still put your css within your template.html file.

Example

There is a working example within the components directory. Note the following:

1. Each component has it's own folder.
2. Each component's folder contains a template.html file and optionally a script.js and/or style.css file.
3. Each component's folder will have a fused file with the same name as the folder my-component.js after fusing occurs.

script.js

(function (template) {
    'use strict';

    class MyComponent extends HTMLElement {

        constructor() {
            super();
            let shadowRoot = this.attachShadow({mode: 'open'});
            shadowRoot.innerHTML = template;
        }

    }

    window.customElements.define('my-component', MyComponent);

})(/* FUSE */);

style.css

div {
    font-weight: bold;
}

template.html

<template>
  <style>/* FUSE */</style>

  <div>My Custom Web Component</div>
</template>

Options

• fuseScript - The string or regular expression to match in the script file to indicate where to merge in the template file content. Defaults to /* FUSE */.

• fuseTemplate - The string or regular expression to match in the template file to indicate where to merge in the css file content. Defaults to /* FUSE */.

• out - A string or a function that defines the name of the fused file that will be created. If a function is provided then the function will receive the current directory path and the function should return a string that represents the fused file's output name. Defaults to the name of its parent directory.

• script - The name of the file within a directory that will contain the unfused JavaScript. Defaults to script.js.

• style - The name of the file within a directory that will contain the unfused CSS. Defaults to style.css.

• template - The name of the file within a directory that will contain the unfused HTML. Defaults to template.html.

Example

const path = require('path');
const gulp = require('gulp');
    const fuse = require('gulp-fuse');

    gulp.task('fuse', function() {
        return gulp.src('./components/**/*')
            .pipe(fuse({
                fuseScript: '/* FUSE */',
                fuseTemplate: '/* FUSE */',
                out: function(dirpath) {
                    return path.basename(dirpath);
                },
                script: 'script.js',
                style: 'style.css',
                template: 'template.html'
            }))
            .pipe(gulp.dest('./components'));
    });