Merge 43a43ac into 230b29a

.eslintignore

@@ -134,6 +134,11 @@ packages/ts-transformers/*.js.map
 packages/ts-transformers/*.d.ts
 packages/ts-transformers/internal/
 packages/ts-transformers/tests/
+packages/labs/eleventy-plugin-lit/development/
+packages/labs/eleventy-plugin-lit/node_modules/
+packages/labs/eleventy-plugin-lit/demo/_site/
+packages/labs/eleventy-plugin-lit/demo/_js/*.bundle.js
+packages/labs/eleventy-plugin-lit/index.*
 packages/labs/motion/development/
 packages/labs/motion/test/
 packages/labs/motion/node_modules/

.prettierignore

@@ -120,6 +120,11 @@ packages/ts-transformers/*.js.map
 packages/ts-transformers/*.d.ts
 packages/ts-transformers/internal/
 packages/ts-transformers/tests/
+packages/labs/eleventy-plugin-lit/development/
+packages/labs/eleventy-plugin-lit/node_modules/
+packages/labs/eleventy-plugin-lit/demo/_site/
+packages/labs/eleventy-plugin-lit/demo/_js/*.bundle.js
+packages/labs/eleventy-plugin-lit/index.*
 packages/labs/motion/development/
 packages/labs/motion/test/
 packages/labs/motion/node_modules/

.vscode/terminals.json

@@ -57,6 +57,13 @@
       "command": "npm run build:watch",
       "focus": true
     },
+    {
+      "name": "TS: eleventy-plugin-lit",
+      "icon": "checklist",
+      "cwd": "[workspaceFolder]/packages/labs/eleventy-plugin-lit",
+      "command": "npm run build:ts:watch",
+      "focus": true
+    },
     {
       "name": "Rollup: lit-html",
       "icon": "checklist",

packages/labs/eleventy-plugin-lit/.gitignore

@@ -0,0 +1,4 @@
+/development/
+/demo/_site/
+/demo/_js/*.bundle.js
+/index.*

packages/labs/eleventy-plugin-lit/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2021 Google LLC. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

packages/labs/eleventy-plugin-lit/README.md

@@ -0,0 +1,63 @@
+# @lit-labs/eleventy-plugin-lit
+
+A plugin for [Eleventy](www.11ty.dev) for pre-rendering pages that include Lit web components. The components can then be (optionally) hydrated on the client for interactivity.
+
+## Status
+
+🚧 `@lit-labs/eleventy-plugin-lit` is part of the Lit Labs set of packages - it
+is published in order to get feedback on the design and not ready for
+production. Breaking changes are likely to happen frequently. 🚧
+
+## Usage
+
+Call `addPlugin` in your `.eleventy.js` config file to add `eleventy-lit-plugin`.
+
+You will need to tell the plugin where to find the component definitions for the
+components you'll render in your templates by passing a list of one or more
+scripts to load via the `componentModules` option. Because Eleventy does not
+support ESM configuration files, your components will need to be built as
+`commonjs`/`umd`.
+
+```js
+const litPlugin = require('../index.js');
+
+module.exports = function (eleventyConfig) {
+  eleventyConfig.addPlugin(litPlugin, {
+    componentModules: ['./_js/components.bundle.js'],
+  });
+};
+```
+
+## Client-side hydration
+
+For hydrating interactive components on the client, you should include
+`lit/experimental-hydrate-support.js` along with the component definitions used
+(it may be included in the same bundle passed to the eleventy plugin if serving
+bundled sources to the client) _at the bottom of the page_. When server-rendering components, you should load definitions after components have been parsed.
+
+Most browsers (excluding Chrome 90+) will also need to load and invoke the `@webcomponents/template-shadowroot` ponyfill prior to registering component definitions:
+
+```html
+<script type="module">
+  // Hydrate template-shadowroots eagerly after rendering (for browsers without
+  // native declarative shadow roots)
+  import {
+    hasNativeDeclarativeShadowRoots,
+    hydrateShadowRoots,
+  } from './node_modules/@webcomponents/template-shadowroot/template-shadowroot.js';
+  if (!hasNativeDeclarativeShadowRoots) {
+    hydrateShadowRoots(document.body);
+  }
+  // ...
+  // Load and hydrate components lazily
+  import('./_js/components.bundle.js');
+</script>
+```
+
+## Notes
+
+This plugin is primarily focused on rendering standalone widgets which can be configured with attributes in HTML into an 11ty site (there currently no facility for passing 11ty data into components via Javascript).
+
+## Contributing
+
+Please see [CONTRIBUTING.md](../../../CONTRIBUTING.md).

packages/labs/eleventy-plugin-lit/demo/.eleventy.js

@@ -0,0 +1,8 @@
+const litPlugin = require('../index.js');
+
+module.exports = function (eleventyConfig) {
+  eleventyConfig.addPassthroughCopy('./_js');
+  eleventyConfig.addPlugin(litPlugin, {
+    componentModules: ['./_js/components.bundle.js'],
+  });
+};

packages/labs/eleventy-plugin-lit/demo/_includes/default.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{ title }}</title>
+  </head>
+  <body>
+    {{ content | safe }}
+  </body>
+  <script src="./_js/components.bundle.js"></script>
+</html>

packages/labs/eleventy-plugin-lit/demo/_js/components.js

@@ -0,0 +1,155 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import 'lit/experimental-hydrate-support.js';
+import {LitElement, html, css} from 'lit';
+
+export class CalcWC extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-block;
+      margin: 5px;
+      border: 1px solid gray;
+      width: 120px;
+    }
+
+    .row {
+      display: flex;
+    }
+
+    .top {
+      flex-direction: column;
+    }
+
+    .input {
+      flex: 1;
+      max-width: 100%;
+      height: 30px;
+      box-sizing: border-box;
+      border: 0px;
+      text-align: right;
+      font-size: 2em;
+      color: gray;
+    }
+
+    .clear {
+      margin-left: auto;
+      background: transparent;
+      border: 0;
+      color: gray;
+      padding: 5px;
+    }
+
+    .digit,
+    .operation {
+      flex: 1;
+      height: 30px;
+      border: 0;
+      background: gray;
+      color: white;
+      transition: background 0.2s;
+    }
+
+    .digit:active,
+    .operation:active {
+      background: teal;
+    }
+
+    .operation {
+      background: black;
+    }
+  `;
+
+  static properties = {
+    value: {type: Number},
+  };
+
+  constructor() {
+    super();
+    this.value = 0;
+  }
+
+  operations = [];
+
+  render() {
+    const disableClear = this.value == '0';
+    return html`
+      <div @click=${this.handleClick}>
+        <div class="top row">
+          <input value=${this.value} class="input" />
+          <button class="clear" ?disabled=${disableClear}>clear</button>
+        </div>
+        <div class="row">
+          <button class="digit">7</button>
+          <button class="digit">8</button>
+          <button class="digit">9</button>
+          <button class="operation">÷</button>
+        </div>
+        <div class="row">
+          <button class="digit">4</button>
+          <button class="digit">5</button>
+          <button class="digit">6</button>
+          <button class="operation">×</button>
+        </div>
+        <div class="row">
+          <button class="digit">1</button>
+          <button class="digit">2</button>
+          <button class="digit">3</button>
+          <button class="operation">-</button>
+        </div>
+        <div class="row">
+          <button class="digit">.</button>
+          <button class="digit">0</button>
+          <button class="digit">=</button>
+          <button class="operation">+</button>
+        </div>
+      </div>
+    `;
+  }
+
+  handleClick(e) {
+    const value = e.target.textContent || 'error';
+    if (!isNaN(Number(value))) {
+      this.value = `${this.value === '0' ? '' : this.value}${value}`;
+    } else if (value === '.') {
+      if (this.value[this.value.length - 1] !== '.') {
+        this.value = `${this.value}${value}`;
+      }
+    } else if (value === 'clear') {
+      this.value = '0';
+      this.operations = [];
+    } else if (value === '=') {
+      this.operations.push(this.value);
+      this.value = this.equate();
+      this.operations = [];
+    } else {
+      this.operations.push(this.value, value);
+      this.value = '';
+    }
+  }
+
+  equate() {
+    const toSum = [];
+    let value = Number(this.operations.shift());
+    while (this.operations.length) {
+      const op = this.operations.shift();
+      const v = Number(this.operations.shift());
+      if (op === '×') {
+        value *= v;
+      } else if (op === '÷') {
+        value /= v;
+      } else if (op === '+') {
+        toSum.push(value);
+        value = v;
+      } else {
+        toSum.push(value);
+        value = -v;
+      }
+    }
+    return String(toSum.reduce((p, n) => p + n, value));
+  }
+}
+customElements.define('calc-wc', CalcWC);

packages/labs/eleventy-plugin-lit/demo/rollup.config.js

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const resolve = require('@rollup/plugin-node-resolve').default;
+
+module.exports = {
+  input: '_js/components.js',
+  output: {
+    file: '_js/components.bundle.js',
+    format: 'umd',
+    name: 'Components',
+  },
+  plugins: [resolve()],
+};

packages/labs/eleventy-plugin-lit/demo/test.md

@@ -0,0 +1,16 @@
+---
+title: Lit 11ty SSR Demo
+layout: default.html
+---
+
+# Page header
+
+## Section one
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+<calc-wc></calc-wc>
+
+## Section two
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.