Lit-element: Document how to use render.js instead of shady-render.js

[web-padawan]

Initiative / goal

• there are developers who don't have to support IE11 nowadays
• these developers want to import render.js instead of shady-render.js

Scope

• add a section in the docs describing how to achieve that:
  
  
  
  • via Babel plugin, e.g. babel-plugin-replace-imports
  
  
  • via webpack, e.g. NormalModuleReplacementPlugin seems an option
  
  

Acceptance criteria

• it should be easy to get rid of shady-render.js by copy-pasting few lines of code

[bennypowers]

I'd like to see steps for rollup builds, as well.

[georges-gomes]

via a "MODERN_TARGET" variable replaced by the bundler? so more things can be opt-out at the same time?

[justinfagnani]

We should add this both to the Tools section as well as a link to those instructions from the Styling section.

[CaptainCodeman]

For rollup, using `@plugin/rollup-alias', this shaves off a few bytes:

    alias({
      entries: [{
        find: 'lit-html/lib/shady-render.js',
        replacement: 'node_modules/lit-html/lit-html.js'
      }]
    }),

[georges-gomes]

I just tried it on the little counter here and I have no improvements on lit-html-only or lit-element.

my setup looks like this

import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import { terser } from 'rollup-plugin-terser';
import visualizer from 'rollup-plugin-visualizer';
import alias from '@rollup/plugin-alias';
import * as fs from 'fs';
import * as path from 'path';

function b(src, withdeps) {
  return {
    input: `download/${src}/dist/index.js`,
    output: {
      dir: `dist/${src}/bundle` + (withdeps ? '' : '-nodeps'),
      format: 'esm',
      sourcemap: true,
    },
    plugins: [
      alias({
        entries: [
          {
            find: 'lit-html/lib/shady-render.js',
            replacement: 'node_modules/lit-html/lit-html.js',
          },
        ],
      }),
      replace({
        'process.env.NODE_ENV': JSON.stringify('production'),
      }),
      withdeps ? resolve({ preferBuiltins: true }) : undefined,
...

[hsablonniere]

@CaptainCodeman I just tried it on my project and it works great ;-)

Before:

After:

I haven't tested the output much yet...

[arthurevans]

Based on some experiments with a very trivial webpack setup, it appears that you can just use resolve.alias:

  resolve: {
    alias: {
      'lit-html/lib/shady-render.js': path.resolve(__dirname, './node_modules/lit-html/lit-html.js')
    }
  },

Not sure if I'm abusing "alias" here--webpack experts feel free to chime in :D.