[examples] Update React examples (#1122)

Author: augustjk

package-lock.json

@@ -172,6 +172,8 @@
     "@lit-labs/ssr": "^3.1.2",
     "@lit-labs/ssr-client": "^1.1.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
     "clean-css": "^5.1.0",
     "codemirror": "^5.58.2",
     "eleventy-plugin-nesting-toc": "^1.3.0",
@@ -203,7 +205,6 @@
     "@material/mwc-formfield": "^0.27.0",
     "@material/mwc-snackbar": "^0.27.0",
     "@material/mwc-textfield": "^0.27.0",
-    "@types/react": "^18.0.17",
     "@webcomponents/template-shadowroot": "^0.2.1",
     "algoliasearch": "^4.14.2",
     "lit": "^2.7.4",

packages/lit-dev-content/package.json

@@ -2,7 +2,7 @@
   "extends": "/samples/base.json",
   "title": "Carousel Transitions",
   "description": "Animated carousel.",
-  "section": "Motion",
+  "section": "@lit-labs/motion",
   "files": {
     "motion-carousel.ts": {},
     "styles.ts": {},

packages/lit-dev-content/samples/examples/motion-carousel/project.json

@@ -2,7 +2,7 @@
   "extends": "/samples/base.json",
   "title": "Grid Layout Transitions",
   "description": "Animate css grid layouts.",
-  "section": "Motion",
+  "section": "@lit-labs/motion",
   "files": {
     "motion-grid.ts": {},
     "styles.ts": {},

packages/lit-dev-content/samples/examples/motion-grid/project.json

@@ -2,7 +2,7 @@
   "extends": "/samples/base.json",
   "title": "List/Detail Hero Transition",
   "description": "Hero animation.",
-  "section": "Motion",
+  "section": "@lit-labs/motion",
   "files": {
     "motion-hero.ts": {},
     "styles.ts": {},

packages/lit-dev-content/samples/examples/motion-hero/project.json

@@ -2,7 +2,7 @@
   "extends": "/samples/base.json",
   "title": "Lit Logo Animation",
   "description": "Animate elements when they go in and out of the page.",
-  "section": "Motion",
+  "section": "@lit-labs/motion",
   "files": {
     "motion-lit.ts": {},
     "styles.ts": {},

packages/lit-dev-content/samples/examples/motion-in-out/project.json

@@ -2,7 +2,7 @@
   "extends": "/samples/base.json",
   "title": "List Item Animation",
   "description": "Animate list items.",
-  "section": "Motion",
+  "section": "@lit-labs/motion",
   "files": {
     "motion-list.ts": {},
     "styles.ts": {},

packages/lit-dev-content/samples/examples/motion-list/project.json

@@ -2,7 +2,7 @@
   "extends": "/samples/base.json",
   "title": "Sliding Circle",
   "description": "Simple `animate()` directive example.",
-  "section": "Motion",
+  "section": "@lit-labs/motion",
   "files": {
     "motion-slide.ts": {},
     "index.html": {},

packages/lit-dev-content/samples/examples/motion-simple/project.json

@@ -2,7 +2,7 @@
   "extends": "/samples/base.json",
   "title": "Todos List Transitions",
   "description": "Animated list of todos.",
-  "section": "Motion",
+  "section": "@lit-labs/motion",
   "files": {
     "motion-todos.ts": {},
     "styles.ts": {},

packages/lit-dev-content/samples/examples/motion-todos/project.json

@@ -1,14 +1,15 @@
-import {React, ReactDOM} from './react.js';
+import React from 'https://esm.sh/react@18';
+import {createRoot} from 'https://esm.sh/react-dom@18/client';
 import {createComponent} from '@lit-labs/react';
 import {DemoGreeting as DemoGreetingWC} from './demo-greeting.js';
 
+// Creates a React component from a Lit component
 const DemoGreeting = createComponent({
   react: React,
   tagName: 'demo-greeting',
-  elementClass: DemoGreetingWC
+  elementClass: DemoGreetingWC,
 });
 
-const node = document.querySelector('#app');
-const root = ReactDOM.createRoot(node!);
+const root = createRoot(document.getElementById('app')!);
 
-root.render(<DemoGreeting name={'React'}></DemoGreeting>);
+root.render(<DemoGreeting name="React" />);

packages/lit-dev-content/samples/examples/react-basics/app.tsx

@@ -1,14 +1,27 @@
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import {html, css, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
+// A plain Lit component which can be used in any framework
 @customElement('demo-greeting')
 export class DemoGreeting extends LitElement {
+  static styles = css`
+    p {
+      display: inline-block;
+      border: solid 1px gray;
+      background: white;
+      padding: 0 1em;
+    }
+  `;
+
   @property() name = 'Somebody';
 
   render() {
-    return html`
-      <p>Hello, ${this.name}!</p>
-      <p>Checkout our <a href="https://lit.dev/docs/frameworks/react/" target="_blank" rel="noopener noreferrer">React framework docs</a>!</p>
-    `;
+    return html`<p>Hello, ${this.name}!</p>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'demo-greeting': DemoGreeting;
   }
 }

packages/lit-dev-content/samples/examples/react-basics/demo-greeting.ts

@@ -1,9 +1,8 @@
 <!doctype html>
 <head>
-  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
   <script type="module" src="./app.js"></script>
 </head>
 <body>
   <div id="app"></div>
+  <p>Checkout our <a href="https://lit.dev/docs/frameworks/react/" target="_blank" rel="noopener noreferrer">React framework docs</a>!</p>
 </body>

packages/lit-dev-content/samples/examples/react-basics/index.html

@@ -3,11 +3,20 @@
   "order": 0,
   "title": "Basics",
   "description": "Render web components in React apps.",
-  "section": "React",
+  "section": "@lit-labs/react",
   "files": {
-    "app.tsx": {"contentType": "text/typescript-jsx"},
+    "app.tsx": {
+      "contentType": "text/typescript-jsx"
+    },
     "demo-greeting.ts": {},
-    "react.ts": {},
-    "index.html": {}
+    "react.d.ts": {
+      "content": "declare module 'https://esm.sh/react@18' {\n  export default React;\n}\n\ndeclare module 'https://esm.sh/react-dom@18/client' {\n  export * from 'react-dom/client';\n}",
+      "hidden": true
+    },
+    "index.html": {},
+    "package.json": {
+      "content": "{\n  \"dependencies\": {\n    \"lit\": \"^2\",\n    \"@types/react\": \"^18\",\n    \"@types/react-dom\": \"^18\",\n    \"@types/react-dom/client\": \"^18\"\n  }\n}",
+      "hidden": true
+    }
   }
 }

packages/lit-dev-content/samples/examples/react-basics/project.json

@@ -0,0 +1,7 @@
+declare module 'https://esm.sh/react@18' {
+  export default React;
+}
+
+declare module 'https://esm.sh/react-dom@18/client' {
+  export * from 'react-dom/client';
+}