MVSICA-FICTA commented 5 years ago

❔ Question

Does Parcel support lit-element? I've been been running a few lit-html demos with Parcel and am now thinking of embracing lit-element. Presently, there are some nice lit-element related demos out there all done within HTML pages and then there is the Polymer CLI tool suggested here: https://lit-element.polymer-project.org/guide/start

What I'm trying to do is bootup a SPA where I can start working with nested lit-element components. It is not entirely clear to me how this works with Parcel. Searching the web there are a lot of lit-html projects but no Parcel related lit-element samples that show how the essential connection between a lit-element component and the index.js/ts Parcel bundles is made.

🔦 Context

To date I have avoided all the frameworks so there was no need for Parcel. Now that there is a decent Web Component standard and a robust implementation in lit-element I'm ready to get moving again.

I'm committed to using Parcel as my only bundler so to answer the question this issue is certainly effecting me by putting a huge distance between all the joy of working with lit-element and Parcel in the way I would like to.

💻 Code Sample

Simple code examples that do not run with Parcel can be found almost everywhere, for example these: https://github.com/open-wc/lit-demos

🌍 Your Environment

Software	Version(s)
Parcel	1.12.3
Node	11.3.0
npm/Yarn	6.8.0
Operating System	Windows 10

I do love Parcel and I think this is the right place to leave this note about the missing recipe :)

mischnic commented 5 years ago

package.json:

{
    "scripts": {
        "start": "parcel index.html",
        "build": "parcel build index.html"
    },
    "dependencies": {
        "lit-element": "^2.1.0"
    },
    "devDependencies": {
        "parcel-bundler": "^1.12.3"
    }
}

<!doctype html>
<html>
  <head>
    <script src="./index.js"></script>
  </head>

  <body>
    <basic-setup></basic-setup>
  </body>
</html>

index.js:

import { LitElement, html, css} from 'lit-element';

class BasicSetup extends LitElement {
  render() {
    return html`
      <div>Hello world!</div>
    `;
  }
}

customElements.define('basic-setup', BasicSetup);

And very important: .browserslistrc:

Chrome 50

This is to tell Babel not to transpile classes, otherwise custom components won't work (this might be a better way to do this, Chrome 50 was chosen arbitrarily).

MVSICA-FICTA commented 5 years ago

Thanks, when I try that I still get the following in the console:

updating-element.ts:216 Uncaught TypeError: Class constructor LitElement cannot be invoked without 'new'
    at new BasicSetup (updating-element.ts:216)

In my package.json I've tried both "browserslist" and "browserslistrc"

{
  "name": "lit-alpha",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "parcel build src/index.html",
    "start": "parcel src/index.html",
    "dev": "parcel watch src/index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^3.4.3"
  },
  "dependencies": {
    "lit-element": "^2.1.0",
    "lit-html": "^1.0.0"
  },
  "browerslist": [
    "Chrome > 50"
  ]
}

Will Parcel still be able to compile other code to ES5 with these settings, because lit-element is not the only lib I'm using?

mischnic commented 5 years ago

In the package.json you posted, you've spelled it wrong: browserslist is correct.

Will Parcel still be able to compile other code to ES5 with these settings, because lit-element is not the only lib I'm using?

There is some workaround (and I think a babel plugin) to be able to use transpiled class and custom elements.

mischnic commented 5 years ago

You might have to tell typescript no not transpile classes as well (target: "ES6" ?)

MVSICA-FICTA commented 5 years ago

Works and thanks for spotting that! This is great after a night at the 24/7 coffee shop 👍

Any info on how to setup for a mix of ES6 and ES5 with both JS and TS is appreciated.

MVSICA-FICTA commented 5 years ago

Been testing this in vscode locally, so I also tried the BasicSetup test at CodeSandbox using their Vanilla-JS Parcel template. It worked fine for the 1st minute or so then bombed out with the following error:

NotSupportedError
Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
evaluate
/src/index.js:11:15
   8 |   }
   9 | }
  10 | 
> 11 | customElements.define("basic-setup", BasicSetup);
     |               ^
  12 | 
View compiled
â–¼ 16 stack frames were expanded.

mischnic commented 5 years ago

this name has already been used with this registry

This happens when the hot-module-reloading merely reexeutes the Javascript (without actually reloading the page). If you get that error, reloading the page (clicking that reload icon inside Codesandbox) make it work again (until the next hot reload).

This was recently fixed in Parcel: https://github.com/parcel-bundler/parcel/issues/2675

MVSICA-FICTA commented 5 years ago

Thank you, this has all been very informative and helpful.

adisreyaj commented 5 years ago

I faced the same issue, this thread helped me solve it.

Added the browserslist attribute in the package.json
Changed the tsconfig target to es6.

yevmel commented 5 years ago

I faced the same issue, this thread helped me solve it.

Added the browserslist attribute in the package.json

Changed the tsconfig target to es6.

is my assumption correct: should work in every current browser except IE11 it is based on the info from here.

thx, Yevgeniy

adisreyaj commented 5 years ago

I faced the same issue, this thread helped me solve it.

Added the browserslist attribute in the package.json

Changed the tsconfig target to es6.

is my assumption correct: should work in every current browser except IE11 it is based on the info from here.

thx, Yevgeniy

I guess you're right.

scherler commented 2 years ago

@mischnic awesome instructions! BTW I had to add type="module" to the script element

parcel-bundler / parcel

How does lit-element work with Parcel? #2919

❔ Question

🔦 Context

💻 Code Sample

🌍 Your Environment