[labs/react] add react wrapper examples to the playground (lit#875)

* basic working example

* remove jsx from tsconfig, missing semicolon

* react hello world example with simple-greeting

* counter example with mwc button

* use count instead of state as varname

* react click counter renamed to react counter

* react custom event

* packages/lit-dev-content/samples

* better formatting

* better title

* custom event examples

* pause, three examples: hello world, react events, custom events

* different message

* consistent deps ordering with react vars

* describe deps exports

* rename react-hello-world to react-basics

* remove unnecessary span

* remove slots example, unfinished

* add slot example

* address some feedback

* format examples, indent with spaces 2

* better function syntax

* add app.tsx for first three examples

* add react to demo imports'

* remove callback deps

* slot example

* split react into own module, same for component

* add new lines

* wrong module for events example

* slots app can be implicitly returned

* remove stale comments

* refs has a visual pause play reference

* less code

* update styles

* wanderboids plural

* more defined triangle shape

* update slots to be more direct and flat example

* more explicit wording on custome event example

* remove faux-react for react

* add react module bug to react modules

* added integrated timestep to control fps

* add slider for fixed timestep

* cheap integration

* faux react on slots

* correct timestep integral tick

* use event to announce state to react

* use event state as app state

* better hooks, more comments

* too many right turns, bad maths

* separate boid canvas from logic, make it easy

* bad return syntax

* only carry ctx when needed

* associate slots with color

* format

* use grid, column layout follows code

* better comments

* public props before private props

* update wording on refs

* react at top of page

* bring back null checks

* use ref and effect, focus on refs not adding event listeners

* better name for callback

* better comment wording in useEffect

* better comment wording in useEffect

* ref is ready for review, original demo more concise

* end of file add return

* spelling mistakes, ordering

* combine shared properties in ref example

* add content-type

* content-type

* adjust jsx structures

* consistent import syntax

* add example of wrapping react component with slot

* react components can be a string

* sync corrections

* remove trailing semicolon

* hello react

* export react immediately

* target div with id rather than semantic section

* feedback comments

* forgot id in basic example

* reduce number of files in examples

* prioritize life-cycle method order

* add eof return

* simple-greeting line at end of file

* no fragment needed on slot example

* use useEffect over bad component patterns

* syntax adjustments, use update in refs example

* use willupdate to broadcast state

* no use effect, willUpdate

* use demo-greeting over simple-greeting

* wording, spacing

* reduce ref example complexity

* smaller functions

* update event name in description

Author: taylor-vann

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

@@ -0,0 +1,14 @@
+import {React, ReactDOM} from './react.js';
+import {createComponent} from '@lit-labs/react';
+import {DemoGreeting as DemoGreetingWC} from './demo-greeting.js';
+
+const DemoGreeting = createComponent(
+  React,
+  'demo-greeting',
+  DemoGreetingWC
+);
+
+const node = document.querySelector('#app');
+const root = ReactDOM.createRoot(node!);
+
+root.render(<DemoGreeting name={'React'}></DemoGreeting>);

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

@@ -0,0 +1,11 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('demo-greeting')
+export class DemoGreeting extends LitElement {
+  @property() name = 'Somebody';
+
+  render() {
+    return html`Hello, ${this.name}!`;
+  }
+}

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

@@ -0,0 +1,9 @@
+<!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>
+</body>

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

@@ -0,0 +1,13 @@
+{
+  "extends": "/samples/base.json",
+  "order": 0,
+  "title": "Basics",
+  "description": "Render web components in React apps.",
+  "section": "React",
+  "files": {
+    "app.tsx": {"contentType": "text/typescript-jsx"},
+    "demo-greeting.ts": {},
+    "react.ts": {},
+    "index.html": {}
+  }
+}

Diff for: packages/lit-dev-content/samples/examples/react-basics/react.ts

@@ -0,0 +1,3 @@
+// https://github.com/facebook/react/issues/10021
+export const React = (window as any).React;
+export const ReactDOM = (window as any).ReactDOM;

Diff for: packages/lit-dev-content/samples/examples/react-custom-event/app.tsx

@@ -0,0 +1,38 @@
+import type {EventName} from '@lit-labs/react';
+
+import {React, ReactDOM} from './react.js';
+import {createComponent} from '@lit-labs/react';
+import {SecretButton as SecretButtonWC} from './secret-button.js';
+
+const {useCallback, useState} = React;
+
+const SecretButton = createComponent(
+  React,
+  'secret-button',
+  SecretButtonWC,
+  {onSecretMessage: 'secret-message' as EventName<CustomEvent<string>>}
+);
+
+export const App = () => {
+  const [message, setMessage] = useState(
+    `Click the button to recieve a custom event
+      dispatched by the SecretButton component.`
+  );
+
+  const onSecretMessage = useCallback(
+    (e: CustomEvent<string>) => setMessage(e.detail),
+    []
+  );
+
+  return (
+    <>
+      <SecretButton onSecretMessage={onSecretMessage}></SecretButton>
+      <div>{message}</div>
+    </>
+  );
+};
+
+const node = document.querySelector('#app');
+const root = ReactDOM.createRoot(node!);
+
+root.render(<App></App>);

Diff for: packages/lit-dev-content/samples/examples/react-custom-event/index.html

@@ -0,0 +1,9 @@
+<!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>
+</body>

Diff for: packages/lit-dev-content/samples/examples/react-custom-event/project.json

@@ -0,0 +1,13 @@
+{
+  "extends": "/samples/base.json",
+  "order": 2,
+  "title": "Custom events",
+  "description": "Listen to custom events from web components.",
+  "section": "React",
+  "files": {
+    "app.tsx": {"contentType": "text/typescript-jsx"},
+    "secret-button.ts": {},
+    "react.ts": {},
+    "index.html": {}
+  }
+}

Diff for: packages/lit-dev-content/samples/examples/react-custom-event/react.ts

@@ -0,0 +1,3 @@
+// https://github.com/facebook/react/issues/10021
+export const React = (window as any).React;
+export const ReactDOM = (window as any).ReactDOM;

Diff for: packages/lit-dev-content/samples/examples/react-custom-event/secret-button.ts

@@ -0,0 +1,39 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+const messages: string[] = [
+  "everything is going to be okay!",
+  "you're amazing!",
+  "when you ask for help, everyone wins!",
+  "there is always sunshine somewhere!",
+];
+
+function randomBucket<T>(messages: T[]): T {
+  const last = messages.length - 1;
+  const prev = messages[last];
+
+  const target = Math.floor(Math.random() * (messages.length - 1));
+
+  messages[last] = messages[target];
+  messages[target] = prev;
+
+  return messages[last];
+}
+
+@customElement('secret-button')
+export class SecretButton extends LitElement {
+  render() {
+    return html`
+      <button @click="${this.onClick}">dispatch secret message event</button>
+    `;
+  }
+
+  onClick = () => {
+    this.dispatchEvent(
+      new CustomEvent(
+        'secret-message',
+        { detail: randomBucket(messages) },
+      ),
+    );
+  }
+}

Diff for: packages/lit-dev-content/samples/examples/react-events/app.tsx

@@ -0,0 +1,24 @@
+import {React, ReactDOM} from './react.js';
+import {createComponent} from '@lit-labs/react';
+import {CounterButton as CounterButtonWC} from './counter-button.js';
+
+const CounterButton = createComponent(
+  React,
+  'counter-button',
+  CounterButtonWC,
+);
+
+const {useCallback, useState} = React;
+
+export const App = () => {
+  const [count, setCount] = useState(0);
+
+  const onClick = useCallback(() => setCount(count + 1), [count]);
+
+  return <CounterButton onClick={onClick} count={count}></CounterButton>;
+};
+
+const node = document.querySelector('#app');
+const root = ReactDOM.createRoot(node!);
+
+root.render(<App></App>);

Diff for: packages/lit-dev-content/samples/examples/react-events/counter-button.ts

@@ -0,0 +1,13 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('counter-button')
+export class CounterButton extends LitElement {
+  @property({ type: Number }) count = 0;
+
+  render() {
+    return html`
+      <button>click count: ${this.count}</button>
+    `;
+  }
+}

Diff for: packages/lit-dev-content/samples/examples/react-events/index.html

@@ -0,0 +1,9 @@
+<!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>
+</body>

Diff for: packages/lit-dev-content/samples/examples/react-events/project.json

@@ -0,0 +1,13 @@
+{
+  "extends": "/samples/base.json",
+  "order": 1,
+  "title": "React events",
+  "description": "Listen to react events from web components.",
+  "section": "React",
+  "files": {
+    "app.tsx": {"contentType": "text/typescript-jsx"},
+    "counter-button.ts": {},
+    "react.ts": {},
+    "index.html": {}
+  }
+}

Diff for: packages/lit-dev-content/samples/examples/react-events/react.ts

@@ -0,0 +1,3 @@
+// https://github.com/facebook/react/issues/10021
+export const React = (window as any).React;
+export const ReactDOM = (window as any).ReactDOM;

Diff for: packages/lit-dev-content/samples/examples/react-refs/app.tsx

@@ -0,0 +1,61 @@
+import {React, ReactDOM} from './react.js';
+import {createComponent} from '@lit-labs/react';
+import {FlyingTriangles as FlyingTrianglesWC} from './flying-triangles.js';
+
+/*
+  The <flying-triangles> component is stateful and uncontrolled.
+
+  A stateful component maintains state independent of React.
+  Meaning component state must be reconciled with React state.
+  This is usually accomplished through refs and callbacks.
+  
+  <flying-triangles> will dispatch a 'playing-change' event when
+  component state changes.
+  
+  The 'playing-change' provides React an opportunity to update
+  UI data based on the properties and attributes of
+  a <flying-triangles> component.
+*/
+
+const { useRef, useState, useCallback } = React;
+
+const FlyingTriangles = createComponent(
+  React,
+  'flying-triangles',
+  FlyingTrianglesWC,
+  {onPlayingChange: 'playing-change'},
+);
+
+export const App = () => {
+  const ref = useRef(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  // Listen for playing-change events
+  const onPlayingChange = useCallback(() => {
+    setIsPlaying(ref.current?.isPlaying);
+  }, []);
+
+  // UI callbacks
+  const onPlay = useCallback(() => ref.current?.play(), []);
+  const onPause = useCallback(() => ref.current?.pause(), []);
+
+  return (
+    <>
+      <FlyingTriangles
+        ref={ref}
+        onPlayingChange={onPlayingChange}>
+      </FlyingTriangles>
+      <button disabled={isPlaying} onClick={onPlay}>
+        play
+      </button>
+      <button disabled={!isPlaying} onClick={onPause}>
+        pause
+      </button>
+    </>
+  );
+};
+
+const node = document.querySelector('#app');
+const root = ReactDOM.createRoot(node!);
+
+root.render(<App></App>);