Separate Lit-Element and lit-html templates.

Lit-Element is a widely used library that facilitates the creation of web components and rendering of HTML templates with optimal performance. Nevertheless, the readability and maintainability of code can deteriorate when dealing with substantial amounts of lit-html within render methods. This predicament raises a couple of concerns.

The forthcoming article will demonstrate a technique to separate lit-html code, typically housed within the render method, into an external .html file.

By doing so, not only does the code’s comprehensibility improve, but for organizations employing dedicated UX engineers proficient in HTML/CSS, this separation of responsibilities can greatly enhance collaboration with JavaScript developers.

To achieve this objective, we will employ a rollup plugin (accessible as an npm package) downloadable from the subsequent link:

https://www.npmjs.com/package/rollup-plugin-import-lithtml

The provided code establishes a plugin named “rollup-plugin-import-lithtml,” which empowers the importing of HTML files (containing lit-html) into JavaScript files.

Install Rollup:

npm install -g rollup

Install Lit-Element:

npm install lit

Install the plugin:

npm install rollup-plugin-import-lithtml --save-dev

Configure Rollup Plugin:

Inside your rollup.config.js file, import and use the rollup-plugin-import-lithtml plugin. Here’s an example of how you might configure the plugin:

// rollup.config.js
import importLitHtml from 'rollup-plugin-import-lithtml';

export default {
  input: 'src/main.js', // Replace with your entry point
  output: {
    file: 'dist/bundle.js', // Replace with your desired output file
    format: 'esm', // Choose the output format (ES module in this case)
  },
  plugins: [
    importLitHtml({
      // All options for this plugin are optional
      include: '**/*.html', // Files to include for transformation
      exclude: 'node_modules/**', // Files to exclude from transformation
      directives: ['when', 'repeat'], // Defaults to all, Specific directives to include
      cache: true, // Defaults to true, Cache the list of directives
    }),
  ],
};

Please note that you should replace placeholders like 'src/main.js', 'dist/bundle.js'with the actual paths and filenames relevant to your project.

Remember that this plugin is designed to work with lit-html and its directives, so ensure that your JavaScript code uses lit-html’s template literals and directives appropriately for the transformations to be effective.

Usage in Lit-Element:

// test.html
<style>
    .color{
        color:red;
    }
</style>
<div class=${classMap(this.classes)}>
    Hello, ${this.name}
</div>

Separate HTML by importing from external file

// hello-world.js
import template from './test.html';
import { LitElement } from 'lit';
import { property, customElement } from 'lit/decorators.js';

@customElement('hello-world')
export class HelloWorld extends LitElement {
    @property()
    classes = { color: true };
    @property()
    name = 'Joe Bloggs';
    
    render() { 
        // Previously this would have contained inline HTML       
        return template.call(this);
    }
}

As you can see, Instead of the render method containing inline HTML, it simply imports the HTML from the external file (test.html). Also Notice, that any directives used in the HTML (like classMap) will automatically be imported by the plugin.