Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Editor #6

Closed
wants to merge 5 commits into from
Closed

UI Editor #6

wants to merge 5 commits into from

Conversation

iantrich
Copy link
Member

@iantrich iantrich commented Mar 2, 2019

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

Fixes #5

rollup.js still doesn't like the releative import of the editor file
@iantrich iantrich mentioned this pull request Mar 5, 2019
@ljmerza
Copy link
Collaborator

ljmerza commented Mar 5, 2019

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
Copy link
Member Author

iantrich commented Mar 5, 2019

Correct on everything. Code splitting would probably be best

@ljmerza
Copy link
Collaborator

ljmerza commented Mar 5, 2019

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
Copy link
Collaborator

ljmerza commented Mar 5, 2019

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.

src/editor.ts Outdated
import '@polymer/paper-toggle-button/paper-toggle-button';
import { superstruct } from 'superstruct';

import { BoilerplateConfig } from './index';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Need to figure out how to exclude Polymer app from build
@iantrich iantrich closed this May 12, 2019
@iantrich iantrich deleted the editor branch November 8, 2019 14:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

UI Editor
2 participants