UI Editor

[iantrich]

• Figure out how best to approach replicating fireEvent
• Figure out how to bundle multiple files

Fixes #5

[ljmerza]

I assume the commented out import is what's wrong? We could change the rollup.config output.file to output.dir but then you'd loose the file names. I can get build to to work with output: {dir: './', format: 'es'} but then the output files are chunk[hash].js. Doesn't look like rollup is adhering to webpack magic comments. I bet not code splitting would work so there's only one output file

[iantrich]

Correct on everything. Code splitting would probably be best

[ljmerza]

Ok looks like we'd have to use the rollup api directly for this one. I got it to create two files just need a way to ignore the editor import manually somehow....

const rollup = require('rollup');
const typescript = require('rollup-plugin-typescript2');
const resolve = require('rollup-plugin-node-resolve');


const cardOptions = {
  input: {
    input: 'src/index.ts',
    plugins: [resolve(), typescript()],
    inlineDynamicImports: true
  },
  output: {
    file: './boilerplate-card.js',
    format: 'es',
  },
};


const editorOptions = {
  input: {
    input: 'src/editor.ts',
    plugins: [resolve(), typescript()],
    inlineDynamicImports: true
  },
  output: {
    file: './boilerplate-card-editor.js',
    format: 'es',
  },
};

async function build() {
  const bundle = await rollup.rollup(cardOptions.input);
  await bundle.write(cardOptions.output);

  const bundleEditor = await rollup.rollup(editorOptions.input);
  await bundleEditor.write(editorOptions.output)
}

build();

then you'd just run node rollup.config.js Might be able to condense the litElement into it's own chunk by removing inlineDynamicImports but I don't see any way to leave the file names we want AND get a lit element chunk

[ljmerza]

This way seems a little closer

import resolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';

export default {
  input: ['src/editor.ts', 'src/index.ts'],
  output: {
    dir: './dist',
    format: 'es',
  },
  plugins: [resolve(), typescript()],
}

then npm run build. It makes three files, editor.js, index.js, and a chunk file (I assume lit element). The code isn't duplicated like the api config above.

[ljmerza]

this is a circular dependency. maybe we can move BoilerplateConfig to its own file?