@popeindustries/lit-html

Seamlessly render the same lit-html templates on the server and in the browser. This project is a wrapper around lit-html and @popeindustries/lit-html-server to handle import aliasing.

Until there is a standard technique for establishing environment specific import aliases, this library uses the unoffical package.json#browser field, currently supported by all major bundler tools.

Usage

Install with npm/yarn:

$ npm install --save @popeindustries/lit-html @popeindustries/lit-html-server lit-html

@popeindustries/lit-html-server and lit-html are peer dependencies and must be installed separately

...write your lit-html template:

import { html } from '@popeindustries/lit-html';
import { classMap } from '@popeindustries/lit-html/directives/class-map.js';

export function Body(data) {
  return html`
    <h1>${data.title}</h1>
    <p class="${classMap({ negative: data.invertedText })}">${data.text}</p>
  `;
}

...import the template file on the client:

import { Body } from './body.js';
import { render } from '@popeindustries/lit-html';

render(Body({ title: 'hi!', text: 'some text', invertedText: false }), document.body);

...and import the same template file on the server:

import { Body } from './body.js';
import { html, renderToStream } from '@popeindustries/lit-html';
import http from 'http';

http.createServer((request, response) => {
  const data = { title: 'hi!', text: 'some text', invertedText: false };

  response.writeHead(200);
  renderToStream(html`
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
      </head>
      <body>
        ${Body(data)}
      </body>
    </html>
  `).pipe(response);
});

simenbrekken / lit-html

@popeindustries/lit-html

Usage

About

Languages