Fork samples so Lit 3 docs samples use Lit 3 pre-release (#1127)

Lit 3 pre-release docs now include samples that are using the Lit 3 pre-release, forked from v2 samples.

Author: AndrewJakubowicz

packages/lit-dev-content/samples/base.json

@@ -1,8 +1,3 @@
 {
-  "files": {
-    "package.json": {
-      "content": "{\n  \"dependencies\": {\n    \"lit\": \"^2.0.0\",\n    \"@lit/reactive-element\": \"^1.0.0\",\n    \"lit-element\": \"^3.0.0\",\n    \"lit-html\": \"^2.0.0\"\n  }\n}",
-      "hidden": true
-    }
-  }
+  "extends": "/samples/v2-base.json"
 }

packages/lit-dev-content/samples/tsconfig.json

@@ -19,10 +19,13 @@
     "examples/hello-world/simple-greeting.ts",
     // Comments in some locations get lost by TypeScript. See
     // https://github.com/lit/lit/issues/2158.
-    "docs/templates/lists-arrays/my-element.ts",
-    "docs/templates/lists-map/my-element.ts",
+    "v2-docs/templates/lists-arrays/my-element.ts",
+    "v2-docs/templates/lists-map/my-element.ts",
+    "v3-docs/templates/lists-arrays/my-element.ts",
+    "v3-docs/templates/lists-map/my-element.ts",
     // Mixin sample does not compile: https://github.com/lit/lit/issues/3865
-    "docs/mixins/highlightable/**",
+    "v2-docs/mixins/highlightable/**",
+    "v3-docs/mixins/highlightable/**",
     // Intentionally doesn't compile for tutorial part.
     "tutorials/word-viewer/02/before/word-viewer.ts"
   ]

packages/lit-dev-content/samples/v2-base.json

@@ -0,0 +1,8 @@
+{
+  "files": {
+    "package.json": {
+      "content": "{\n  \"dependencies\": {\n    \"lit\": \"^2.0.0\",\n    \"@lit/reactive-element\": \"^1.0.0\",\n    \"lit-element\": \"^3.0.0\",\n    \"lit-html\": \"^2.0.0\"\n  }\n}",
+      "hidden": true
+    }
+  }
+}

packages/lit-dev-content/samples/docs/components/events/child/index.html renamed to packages/lit-dev-content/samples/v2-docs/components/events/child/index.html

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-element.ts": {},
     "index.html": {}

packages/lit-dev-content/samples/docs/components/events/child/my-element.ts renamed to packages/lit-dev-content/samples/v2-docs/components/events/child/my-element.ts

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-dispatcher.ts": {},
     "my-listener.ts": {},

packages/lit-dev-content/samples/docs/components/events/child/project.json renamed to packages/lit-dev-content/samples/v2-docs/components/events/child/project.json

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-element.ts": {},
     "index.html": {}

packages/lit-dev-content/samples/docs/components/events/comm/index.html renamed to packages/lit-dev-content/samples/v2-docs/components/events/comm/index.html

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-dispatcher.ts": {},
     "my-listener.ts": {},

packages/lit-dev-content/samples/docs/components/events/comm/my-dispatcher.ts renamed to packages/lit-dev-content/samples/v2-docs/components/events/comm/my-dispatcher.ts

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-element.ts": {},
     "index.html": {}

packages/lit-dev-content/samples/docs/components/events/comm/my-listener.ts renamed to packages/lit-dev-content/samples/v2-docs/components/events/comm/my-listener.ts

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-element.ts": {},
     "index.html": {}

packages/lit-dev-content/samples/docs/components/events/comm/project.json renamed to packages/lit-dev-content/samples/v2-docs/components/events/comm/project.json

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-dispatcher.ts": {},
     "my-listener.ts": {},

packages/lit-dev-content/samples/docs/components/events/delegation/index.html renamed to packages/lit-dev-content/samples/v2-docs/components/events/delegation/index.html

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "simple-greeting.ts": {},
     "index.html": {}

packages/lit-dev-content/samples/docs/components/events/delegation/my-element.ts renamed to packages/lit-dev-content/samples/v2-docs/components/events/delegation/my-element.ts

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "index.html": {},
     "my-element.ts": {}

packages/lit-dev-content/samples/docs/components/style/basic/project.json renamed to packages/lit-dev-content/samples/v2-docs/components/events/delegation/project.json

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "default-root.ts": {},
     "light-dom.ts": {},

packages/lit-dev-content/samples/docs/components/events/dispatch/index.html renamed to packages/lit-dev-content/samples/v2-docs/components/events/dispatch/index.html

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "index.html": {},
     "my-element.ts": {}

packages/lit-dev-content/samples/docs/components/events/dispatch/my-dispatcher.ts renamed to packages/lit-dev-content/samples/v2-docs/components/events/dispatch/my-dispatcher.ts

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-element.ts": {},
     "index.html": {}

packages/lit-dev-content/samples/docs/components/events/dispatch/my-listener.ts renamed to packages/lit-dev-content/samples/v2-docs/components/events/dispatch/my-listener.ts

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-element.ts": {},
     "index.html": {}

packages/lit-dev-content/samples/docs/components/events/update/project.json renamed to packages/lit-dev-content/samples/v2-docs/components/events/dispatch/project.json

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-element.ts": {},
     "index.html": {}

packages/lit-dev-content/samples/docs/components/events/host/index.html renamed to packages/lit-dev-content/samples/v2-docs/components/events/host/index.html

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-element.ts": {},
     "index.html": {}

packages/lit-dev-content/samples/docs/components/events/host/my-element.ts renamed to packages/lit-dev-content/samples/v2-docs/components/events/host/my-element.ts

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-element.ts": {},
     "super-element.ts": {},

packages/lit-dev-content/samples/docs/components/events/host/project.json renamed to packages/lit-dev-content/samples/v2-docs/components/events/host/project.json

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-element.ts": {},
     "index.html": {}

packages/lit-dev-content/samples/docs/components/events/list/index.html renamed to packages/lit-dev-content/samples/v2-docs/components/events/list/index.html

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "mediator-element.ts": {},
     "index.html": {}

packages/lit-dev-content/samples/docs/components/events/list/my-element.ts renamed to packages/lit-dev-content/samples/v2-docs/components/events/list/my-element.ts

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-element.ts": {},
     "mouse-controller.ts": {},

packages/lit-dev-content/samples/docs/components/events/list/project.json renamed to packages/lit-dev-content/samples/v2-docs/components/events/list/project.json

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "names-controller.ts": {},
     "my-element.ts": {},

packages/lit-dev-content/samples/docs/components/events/update/index.html renamed to packages/lit-dev-content/samples/v2-docs/components/events/update/index.html

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "clock-controller.ts": {},
     "my-element.ts": {},

packages/lit-dev-content/samples/docs/components/events/update/my-dispatcher.ts renamed to packages/lit-dev-content/samples/v2-docs/components/events/update/my-dispatcher.ts

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "x-greeter.ts": {},
     "locale-picker.ts": {},

packages/lit-dev-content/samples/docs/components/events/update/my-listener.ts renamed to packages/lit-dev-content/samples/v2-docs/components/events/update/my-listener.ts

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "highlightable.ts": {},
     "element-one.ts": {},

packages/lit-dev-content/samples/docs/components/events/dispatch/project.json renamed to packages/lit-dev-content/samples/v2-docs/components/events/update/project.json

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-page.ts": {},
     "index.html": {}

packages/lit-dev-content/samples/docs/components/overview/simple-greeting/index.html renamed to packages/lit-dev-content/samples/v2-docs/components/overview/simple-greeting/index.html

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-page.ts": {},
     "my-header.ts": {},

packages/lit-dev-content/samples/docs/components/overview/simple-greeting/project.json renamed to packages/lit-dev-content/samples/v2-docs/components/overview/simple-greeting/project.json

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-element.ts": {},
     "index.html": {}

packages/lit-dev-content/samples/docs/components/overview/simple-greeting/simple-greeting.ts renamed to packages/lit-dev-content/samples/v2-docs/components/overview/simple-greeting/simple-greeting.ts

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "update-properties.ts": {},
     "index.html": {}

packages/lit-dev-content/samples/docs/components/shadowdom/namedslots/index.html renamed to packages/lit-dev-content/samples/v2-docs/components/shadowdom/namedslots/index.html

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-element.ts": {},
     "index.html": {}

packages/lit-dev-content/samples/docs/components/shadowdom/namedslots/my-element.ts renamed to packages/lit-dev-content/samples/v2-docs/components/shadowdom/namedslots/my-element.ts

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "title": "repeat directive",
   "description": "Demo exploring use of the repeat directive.",
   "section": "Directives",

packages/lit-dev-content/samples/docs/components/shadowdom/namedslots/project.json renamed to packages/lit-dev-content/samples/v2-docs/components/shadowdom/namedslots/project.json

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "title": "repeat directive",
   "description": "Demo exploring use of the repeat directive.",
   "section": "Directives",

packages/lit-dev-content/samples/docs/components/shadowdom/renderroot/default-root.ts renamed to packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/default-root.ts

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "title": "repeat directive",
   "description": "Demo exploring use of the repeat directive.",
   "section": "Directives",

packages/lit-dev-content/samples/docs/components/shadowdom/renderroot/index.html renamed to packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/index.html

@@ -1,5 +1,5 @@
 {
-  "extends": "/samples/base.json",
+  "extends": "/samples/v2-base.json",
   "files": {
     "my-timer.ts": {},
     "index.html": {},

packages/lit-dev-content/samples/docs/components/shadowdom/renderroot/light-dom.ts renamed to packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/light-dom.ts

@@ -0,0 +1,8 @@
+{
+  "files": {
+    "package.json": {
+      "content": "{\n  \"dependencies\": {\n    \"lit\": \"^3.0.0-pre.0\",\n    \"@lit/reactive-element\": \"^2.0.0-pre.0\",\n    \"lit-element\": \"^4.0.0-pre.0\",\n    \"lit-html\": \"^3.0.0-pre.0\"\n  }\n}",
+      "hidden": true
+    }
+  }
+}

packages/lit-dev-content/samples/docs/components/shadowdom/renderroot/project.json renamed to packages/lit-dev-content/samples/v2-docs/components/shadowdom/renderroot/project.json

@@ -0,0 +1,3 @@
+<script type="module" src="./my-element.js"></script>
+
+<my-element></my-element>

packages/lit-dev-content/samples/docs/components/shadowdom/slots/index.html renamed to packages/lit-dev-content/samples/v2-docs/components/shadowdom/slots/index.html

@@ -0,0 +1,16 @@
+import {LitElement, html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('my-element')
+export class MyElement extends LitElement {
+  @property({type: Number}) count = 0;
+  protected render() {
+    return html`
+      <p><button @click="${this._increment}">Click Me!</button></p>
+      <p>Click count: ${this.count}</p>
+    `;
+  }
+  private _increment(e: Event) {
+    this.count++;
+  }
+}

packages/lit-dev-content/samples/docs/components/shadowdom/slots/my-element.ts renamed to packages/lit-dev-content/samples/v2-docs/components/shadowdom/slots/my-element.ts

@@ -0,0 +1,8 @@
+{
+  "extends": "/samples/v3-base.json",
+  "files": {
+    "my-element.ts": {},
+    "index.html": {}
+  },
+  "previewHeight": "100px"
+}

packages/lit-dev-content/samples/docs/components/shadowdom/slots/project.json renamed to packages/lit-dev-content/samples/v2-docs/components/shadowdom/slots/project.json

@@ -0,0 +1,6 @@
+<script type="module" src="./my-listener.js"></script>
+<script type="module" src="./my-dispatcher.js"></script>
+
+<my-listener>
+  <my-dispatcher></my-dispatcher>
+</my-listener>

packages/lit-dev-content/samples/docs/components/style/basic/index.html renamed to packages/lit-dev-content/samples/v2-docs/components/style/basic/index.html

@@ -0,0 +1,30 @@
+import {LitElement, html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('my-dispatcher')
+class MyDispatcher extends LitElement {
+  @property() label = 'Check me!';
+  defaultMessage = '🙂';
+  @property() message = this.defaultMessage;
+  private _resetMessage?: ReturnType<typeof setTimeout>;
+  protected render() {
+    return html`
+      <label><input type="checkbox" @click=${this._tryChange}>${this.label}</label>
+      <div>${this.message}</div>
+    `;
+  }
+  private _tryChange(e: Event) {
+    const detail = {message: this.message};
+    const event = new CustomEvent('checked', {detail, bubbles: true, composed: true, cancelable: true});
+    this.dispatchEvent(event);
+    if (event.defaultPrevented) {
+      e.preventDefault();
+    }
+    this.message = detail.message;
+  }
+  protected updated() {
+    clearTimeout(this._resetMessage);
+    this._resetMessage =
+      setTimeout(() => this.message = this.defaultMessage, 1000);
+  }
+}

packages/lit-dev-content/samples/docs/components/style/basic/my-element.ts renamed to packages/lit-dev-content/samples/v2-docs/components/style/basic/my-element.ts

@@ -0,0 +1,23 @@
+import {LitElement, html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('my-listener')
+class MyListener extends LitElement {
+  @property() canCheck = false;
+  protected render() {
+    return html`
+      <p @checked=${this._checkedHandler}><slot></slot></p>
+      <hr>
+      <p>${this.canCheck ? 'Allowing' : 'Preventing'} check</p>
+      <p><button @click=${this._clickHandler}>Toggle</button></p>`;
+  }
+  private _checkedHandler(e: CustomEvent) {
+    if (!this.canCheck) {
+      e.preventDefault();
+      e.detail.message = '✅ Prevented!!';
+    }
+  }
+  private _clickHandler() {
+    this.canCheck = !this.canCheck;
+  }
+}

packages/lit-dev-content/samples/docs/components/style/maps/project.json renamed to packages/lit-dev-content/samples/v2-docs/components/style/basic/project.json

@@ -0,0 +1,9 @@
+{
+  "extends": "/samples/v3-base.json",
+  "files": {
+    "my-dispatcher.ts": {},
+    "my-listener.ts": {},
+    "index.html": {}
+  },
+  "previewHeight": "180px"
+}

packages/lit-dev-content/samples/docs/components/style/host/index.html renamed to packages/lit-dev-content/samples/v2-docs/components/style/host/index.html

@@ -0,0 +1,3 @@
+<script type="module" src="./my-element.js"></script>
+
+<my-element></my-element>

packages/lit-dev-content/samples/docs/components/style/host/my-element.ts renamed to packages/lit-dev-content/samples/v2-docs/components/style/host/my-element.ts

@@ -0,0 +1,21 @@
+import {LitElement, html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('my-element')
+class MyElement extends LitElement {
+  @property() clicked = '';
+  protected render() {
+    return html`
+      <div @click="${this._clickHandler}">
+        <button>Item 1</button>
+        <button>Item 2</button>
+        <button>Item 3</button>
+      </div>
+      <p>Clicked: ${this.clicked}</p>
+    `;
+  }
+  private _clickHandler(e: Event) {
+    this.clicked = e.target === e.currentTarget ?
+      'container' : (e.target as HTMLDivElement).textContent!;
+  }
+}