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

panther7 · 2019-01-29T10:17:49Z

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: Paper Elements can't be natively imported Polymer/polymer#5238
i don't need Polymer-CLI/any other "server" [docs] best practices #37

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

The text was updated successfully, but these errors were encountered:

panther7 · 2019-01-29T10:28:43Z

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 · 2019-01-29T23:35:55Z

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 · 2019-01-30T12:44:26Z

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 · 2019-01-31T01:17:55Z

@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 · 2019-04-08T17:12:05Z

@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/[email protected]/custom-elements-es5-adapter.js';
import 'https://unpkg.com/@webcomponents/[email protected]/webcomponents-bundle.js';
import {
  LitElement,
  html
} from 'https://unpkg.com/[email protected]/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 · 2019-04-08T17:26:27Z

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

https://unpkg.com/[email protected]/lit-element.js?module

jsejcksn · 2019-04-09T09:09:34Z

@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 · 2019-04-09T21:41:45Z

@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 · 2019-04-09T21:47:58Z

@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 · 2019-04-10T00:23:04Z

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 · 2019-04-10T00:40:46Z

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 · 2019-04-10T12:26:07Z

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 · 2019-04-10T13:46:34Z

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 · 2019-05-21T23:24:49Z

@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 (#680).

sorvell added the Area: docs label Jan 30, 2019

ghost changed the title ~~Using in nodejs without Polymer CLI / server~~ [docs] Using in nodejs without Polymer CLI / server Feb 3, 2019

arthurevans closed this as completed May 21, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

panther7 commented Jan 29, 2019 •

edited

Loading

panther7 commented Jan 29, 2019

ghost commented Jan 29, 2019

panther7 commented Jan 30, 2019

ghost commented Jan 31, 2019

jsejcksn commented Apr 8, 2019 •

edited

Loading

logicalphase commented Apr 8, 2019 •

edited

Loading

jsejcksn commented Apr 9, 2019

ghost commented Apr 9, 2019

ghost commented Apr 9, 2019 •

edited by ghost

Loading

jsejcksn commented Apr 10, 2019

logicalphase commented Apr 10, 2019 via email

jsejcksn commented Apr 10, 2019

logicalphase commented Apr 10, 2019 via email

arthurevans commented May 21, 2019

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

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

Comments

panther7 commented Jan 29, 2019 • edited Loading

panther7 commented Jan 29, 2019

ghost commented Jan 29, 2019

panther7 commented Jan 30, 2019

ghost commented Jan 31, 2019

jsejcksn commented Apr 8, 2019 • edited Loading

logicalphase commented Apr 8, 2019 • edited Loading

jsejcksn commented Apr 9, 2019

ghost commented Apr 9, 2019

ghost commented Apr 9, 2019 • edited by ghost Loading

jsejcksn commented Apr 10, 2019

logicalphase commented Apr 10, 2019 via email

jsejcksn commented Apr 10, 2019

logicalphase commented Apr 10, 2019 via email

arthurevans commented May 21, 2019

panther7 commented Jan 29, 2019 •

edited

Loading

jsejcksn commented Apr 8, 2019 •

edited

Loading

logicalphase commented Apr 8, 2019 •

edited

Loading

ghost commented Apr 9, 2019 •

edited by ghost

Loading