Lit-html: Please provide a browser-friendly version of lit-html, or a babel config/command to make one

Created on 26 May 2018  路  4Comments  路  Source: Polymer/lit-html

I have a project where I'd like to use VanillaJS as much as possible. Templates are the one piece that's missing and I'd really like to use lit-html (especially instead of React/JSX). I would strongly prefer to avoid the need for a package.json or any type of build system to keep the project as minimal as possible.

When I was looking into using lit-html, I noticed that I cannot use it directly in the browser (the use of <script type=module> is a non-starter). The README refers to using babili (now deprecated/renamed to babel-minify0 and there are several closed Issues from other folks asking for something similar -- all were hand-waved away to figure it out on their own.

Here's the problem: I don't want to have to also learn how to use Babel just to use lit-html. Believe me, I've tried. The docs are a mess, the developers assume you've already been using it for years in order to understand the terminology, it requires crazy configs, lots of dependencies (plugins) -- it's a mess and a rabbit hole.

All I and others are requesting is a browser-compatible version of lit-html that we can just start using. I don't want to shave yaks, I just want templating.

Similar requests:

  • #60
  • #70
  • #141
  • #216

Most helpful comment

I don't think it would be too much to ask to provide a working demo for us to see how that's supposed to work. At least updating the snippet in the README to be useable like the following would go a long way since modules are new enough that they aren't common-knowledge yet.

<script type="module">
  import {html, render} from 'https://unpkg.com/[email protected]/lit-html.js';
</script>

All 4 comments

modules work in the current version of all major browsers. There's no other format that loads in browsers and doesn't involve unsafe writing to globals to emulate exports.

You don't have to use Babel to use lit-html. Babili s just what we used for minification for that measurement.

I don't think it would be too much to ask to provide a working demo for us to see how that's supposed to work. At least updating the snippet in the README to be useable like the following would go a long way since modules are new enough that they aren't common-knowledge yet.

<script type="module">
  import {html, render} from 'https://unpkg.com/[email protected]/lit-html.js';
</script>

I'm new with script type="module and unpkg.com. How could I use a local version of lit-html?
Is it a single file (https://unpkg.com/lit-html) to download or a package / directory (src)?

Was this page helpful?
0 / 5 - 0 ratings