Add npm: Separate html and js, taking lit-* from npm
authorMartin Pitt <martin@piware.de>
Fri, 1 Nov 2019 17:49:26 +0000 (18:49 +0100)
committerMartin Pitt <martin@piware.de>
Fri, 1 Nov 2019 18:14:42 +0000 (19:14 +0100)
This does not work yet, due to lit-element's bare import of lit-html:

    TypeError: Error resolving module specifier: lit-html

.gitignore [new file with mode: 0644]
npm/hello-world.js [new file with mode: 0644]
npm/index.html [new file with mode: 0644]
npm/package.json [new file with mode: 0644]

diff --git a/.gitignore b/.gitignore
new file mode 100644 (file)
index 0000000..d5f19d8
--- /dev/null
@@ -0,0 +1,2 @@
+node_modules
+package-lock.json
diff --git a/npm/hello-world.js b/npm/hello-world.js
new file mode 100644 (file)
index 0000000..b3e3b9a
--- /dev/null
@@ -0,0 +1,9 @@
+import { LitElement, html, css } from './node_modules/lit-element/lit-element.js';
+
+class HelloWorld extends LitElement {
+  render() {
+    return html`<p>Hello world! Came here from ${document.referrer || 'unset-referrer' }</p>`;
+  }
+}
+
+customElements.define('hello-world', HelloWorld);
diff --git a/npm/index.html b/npm/index.html
new file mode 100644 (file)
index 0000000..b3b0e39
--- /dev/null
@@ -0,0 +1,15 @@
+<head>
+    <title>lit-html npm example</title>
+    <meta charset="utf-8">
+    <script type="module" src="./hello-world.js"></script>
+</head>
+
+<body>
+
+<h1>Hello world with lit-html from npm</h1>
+
+<p>If you don't see hello world below, you need to run <code>npm install</code>.</p>
+
+<hello-world></hello-world>
+</body>
+
diff --git a/npm/package.json b/npm/package.json
new file mode 100644 (file)
index 0000000..9e8ff49
--- /dev/null
@@ -0,0 +1,17 @@
+{
+  "name": "webcomponents-npm-test",
+  "version": "0.0.1",
+  "private": "true",
+  "description": "test",
+  "main": "index.js",
+  "dependencies": {
+    "lit-element": "^2.2.1"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "run": "python -m http.server -b localhost"
+  },
+  "author": "",
+  "license": "ISC"
+}