[docs] Using in nodejs without Polymer CLI / server

panther7 commented 5 years ago

Hello,

i have desktop App project in NWjs (Chromium + Nodejs, like Electron). Is some best practise use lit-element in my project?

My probles are:

relative path to node_modules: https://github.com/Polymer/polymer/issues/5238
i don't need Polymer-CLI/any other "server" #37

Solve is relative paths, because project context is chrome-extension://, example chrome-extension://node_modules/lit-element/lit-element.js

panther7 commented 5 years ago

import("/node_modules/lit-element/lit-element.js");

or

import("chrome-extension://hpoajfdeaoclodpipchameaccpjhccci/node_modules/lit-element/lit-element.js");

Uncaught (in promise) TypeError: Failed to resolve module specifier "lit-html". Relative references must start with either "/", "./", or "../".

ghost commented 5 years ago

LitElement imports all dependencies with bare module specifiers, is this is the issue you're running into? If you look at lit-element.js you will see it tries to import 'lit-html' instead of '../path/to/lit-html'. I think whatever you're using to serve the files would need to do a transform to resolve that specifier as a path (this is what polymer-cli does).

AFAIK we don't have any experience with or recommendations for LitElement in NWjs :/

panther7 commented 5 years ago

I found this article: https://polytuts.s-saleh.com/2016/05/19/polymer-nwjs-application/ this works with project, if path structure is:

my-app
├── images
|   └── ...
├── src
|   └── ...
├── index.html
├── package.json
├── polymer.json
├── manifest.json
├── ...

But, if project have different structure like, i dont know, how correctly configure polymer.json

my-app
├── tools
|   └── ...
├── src
|   ├─ core
|   |   ├── panel
|   |   |   ├── js
|   |   |   |   └── ... // import lit-element
|   |   |   ├── css
|   |   |   |   └── ...
|   |   |   └── panel.html
|   |   ├── history
|   |   |   ├── js
|   |   |   |   └── ... // import lit-element
|   |   |   ├── css
|   |   |   |   └── ...
|   |   |   └── history.html
|   |   └── ...
|   ├─ win
|   |   ├── js
|   |   |   └── ... // import lit-element
|   |   ├── css
|   |   |   └── ... 
|   |   └── win.html
|   └── ...
├── package.json
├── polymer.json
├── manifest.json
├── ...

For my use, are relative paths natively.

ghost commented 5 years ago

@panther7 I couldn't get that tutorial to work, something about trying to load an extension vs an app.

However if you got the tutorial example working & your project structure is your only issue, you should just be able to configure the "sources" property in polymer.json I think. The docs are here: polymer.json specification but they are out of date (my bad).

For the most up to date info on polymer.json options you might also need to take a look at the Tools repo

For the CLI flags/top-level polymer.json fields, see packages/cli/src/args.ts.
For the "builds" field in polymer.json, see packages/project-config/src/builds.ts.

jsejcksn commented 5 years ago

@katejeffreys I came across this issue via the Try LitElement page at https://lit-element.polymer-project.org/try.

The StackBlitz embed does not render, nor does it render on the StackBlitz website. I multiple console errors:

Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document. ...

So I tried to take the example code to CodePen:

<!-- html: CodePen only allows <body> contents -->

<my-element></my-element>

// js
import 'https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/custom-elements-es5-adapter.js';
import 'https://unpkg.com/@webcomponents/webcomponentsjs@2.2.7/webcomponents-bundle.js';
import {
  LitElement,
  html
} from 'https://unpkg.com/lit-element@2.1.0/lit-element.js';

class MyElement extends LitElement {
  render() {
    return html`
      <p>Hello world! From my-element</p>
    `;
  }
}

customElements.define('my-element', MyElement);

But then I get this error in the console:

Uncaught TypeError: Failed to resolve module specifier "lit-html". Relative references must start with either "/", "./", or "../".

How can I try this in the browser? Is there a hosted version of LitElement that allows for native ES module importing? I'm using Chrome stable (73.0.3683.103) on macOS.

logicalphase commented 5 years ago

lit-element needs to be implicitly imported as a module when using unpkg, correct? As in:

https://unpkg.com/lit-element@2.1.0/lit-element.js?module

jsejcksn commented 5 years ago

@hyperpress Thanks for responding. If I add ?module to that path in the import statement, I no longer get the error I pasted before.

Now I get the following error:

Uncaught TypeError: Cannot read property 'Object' of undefined at wrapper.js:15 at webcomponents-bundle-index.js:52

ghost commented 5 years ago

@jsejcksn Info on the first error and a related issue on the StackBlitz repo. Just need to add an exception in Chrome content settings to permit cookies for [*.]stackblitz.com and all will be well :)

CodePen also needs to do cookies, so if you can't control them because enterprise settings, maybe try one of the other browser options listed in the examples section of the README? The JS Bin one should work.

ghost commented 5 years ago

@jsejcksn For the second error, I suspect this is to do with import-ing the polyfills vs including them via <script> tag. Issue 891 on the WebComponents repo has more detail.

jsejcksn commented 5 years ago

Allowing third-party cookies is not an option for me. It seems that Chrome stable supports all of the features afforded by the webcomponents polyfills, so removing those should be fine, right? Once I remove them, I'm not getting errors any longer. Thanks for the tips, @katejeffreys and @hyperpress.

One more question: are there plans to provide a compiled .js file for LitElement so that it can be downloaded and linked locally without any kind of transforms? I want to use it in a 100% front-end context and not rely on unpkg or another CDN, but I don't see how it's currently possible to do this.

logicalphase commented 5 years ago

I don't believe a pre-transpiled version is in the plans. But you could just use polymer-cli to build an es5 compiled version and use that as a default or use PRPL server. See pwa-starter-kit repo on GitHub for details. I run a similar setup on local network.

jsejcksn commented 5 years ago

I'm hoping that's not the case, so that students and developers who want to get started with LitElement will not need anything more than an evergreen browser.

logicalphase commented 5 years ago

If you just need to support evergreen you can checkout pikapkg. https://github.com/pikapkg/web/blob/master/README.md

It's sounds like a good solution if you focused on the basics of LitELement lit-html.

arthurevans commented 5 years ago

@jsejcksn Unfortunately, it's not currently possible to load directly into the browser without either a build step or a server-side transform. There is a standards effort to close this gap, called "import maps". You can read about them here:

https://github.com/WICG/import-maps

In addition to polymer-cli, you can use build tools like Rollup or Webpack to transform the module specifiers.

There's a Rollup config in this section:

https://lit-element.polymer-project.org/guide/use

The open-wc project also has default Rollup and Webpack configurations that work for LitElement projects:

https://open-wc.org/building/#browser-standards

I'm going to close this issue because we aren't going to add specific docs on running under NWjs. However, I think more detailed coverage of the tooling situation would supply the information you were originally looking for, and I've opened an issue for that work (https://github.com/Polymer/lit-element/issues/680).

lit / lit-element

[docs] Using in nodejs without Polymer CLI / server #492