starbeamjs · wycats · Dec 22, 2022
diff --git a/src/.vitepress/config/Sidebar.ts b/src/.vitepress/config/Sidebar.ts
@@ -67,6 +67,11 @@ export const SIDEBAR: ThemeConfig["sidebar"] = {
         "Reactive Arrays",
         "/frameworks/react/tutorial/4-reactive-arrays.md"
       ),
+      item(
+        "Custom Reactive Objects",
+        "/frameworks/react/tutorial/6-custom-reactive-objects.md"
+      ),
+      item("Resources", "/frameworks/react/tutorial/7-resources.md"),
     ]),
     group("Tutorial Bonus", [
       item(

diff --git a/src/frameworks/react/$snippets/tutorial-7-resources-reactive-usage.tsx b/src/frameworks/react/$snippets/tutorial-7-resources-reactive-usage.tsx
@@ -0,0 +1,41 @@
+import { Component } from "@starbeam/react";
+import { Cell, Resource } from "@starbeam/universal";
+import "./Counter.css";
+
+// #region usage
+export function Counter() {
+  return Component(({ use }) => {
+    // #highlight:next
+    const date = use(Clock);
+
+    // #highlight:start
+    function display() {
+      const formatter = new Intl.DateTimeFormat("en-US", {
+        hour: "numeric",
+        minute: "numeric",
+        second: "numeric",
+      });
+
+      return formatter.format(date.current);
+    }
+    // #highlight:end
+
+    // #highlight:next
+    return () => <div>{display()}</div>;
+  });
+}
+// #endregion
+
+// #region clock
+export const Clock = Resource(({ on }) => {
+  const now = Cell(new Date());
+
+  const interval = setInterval(() => {
+    now.set(new Date());
+  });
+
+  on.cleanup(() => clearInterval(interval));
+
+  return now;
+});
+// #endregion
diff --git a/src/frameworks/react/$snippets/tutorial-7-resources.tsx b/src/frameworks/react/$snippets/tutorial-7-resources.tsx
@@ -0,0 +1,36 @@
+import { Component } from "@starbeam/react";
+import { Cell, Resource } from "@starbeam/universal";
+import "./Counter.css";
+
+// #region usage
+export function Counter() {
+  return Component(({ use }) => {
+    const date = use(Clock);
+
+    return () => <div>{date.current?.display}</div>;
+  });
+}
+// #endregion
+
+// #region clock
+export const Clock = Resource(({ on }) => {
+  const now = Cell(new Date());
+  const interval = setInterval(() => {
+    now.set(new Date());
+  });
+
+  on.cleanup(() => clearInterval(interval));
+
+  return {
+    get display() {
+      const formatter = new Intl.DateTimeFormat("en-US", {
+        hour: "numeric",
+        minute: "numeric",
+        second: "numeric",
+      });
+
+      return formatter.format(now.current);
+    },
+  };
+});
+// #endregion
diff --git a/src/frameworks/react/demos/tutorial-7/config.ts b/src/frameworks/react/demos/tutorial-7/config.ts
@@ -0,0 +1,16 @@
+export const files = import.meta.glob(["./index.html", "./src/**"], {
+  eager: true,
+  as: "raw",
+});
+
+export const dependencies = [
+  "react",
+  "react-dom",
+  "@starbeam/react",
+  "@starbeam/universal",
+  "@starbeam/timeline",
+];
+
+export const jsx = "react";
+
+export const activeFile = "src/components/Sum.tsx";
diff --git a/src/frameworks/react/demos/tutorial-7/index.html b/src/frameworks/react/demos/tutorial-7/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <link rel="stylesheet" href="./src/styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/frameworks/react/demos/tutorial-7/src/App.css b/src/frameworks/react/demos/tutorial-7/src/App.css
@@ -0,0 +1,64 @@
+#root {
+  max-width: calc(100vw - 6rem);
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+h1,
+div.card {
+  text-align: center;
+}
+
+div.card {
+  display: grid;
+  box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%),
+    0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
+  border-radius: 4px;
+  width: 15rem;
+}
+
+div.card > div.buttons {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 1rem;
+}
+
+div.card > button {
+  width: 45%;
+  justify-self: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/src/frameworks/react/demos/tutorial-7/src/App.tsx b/src/frameworks/react/demos/tutorial-7/src/App.tsx
@@ -0,0 +1,14 @@
+import "./App.css";
+import { Counter } from "./components/Counter";
+
+export function App() {
+  return (
+    <>
+      <div className="card">
+        <Counter />
+      </div>
+    </>
+  );
+}
+
+export default App;
diff --git a/src/frameworks/react/demos/tutorial-7/src/components/Counter.css b/src/frameworks/react/demos/tutorial-7/src/components/Counter.css
@@ -0,0 +1,13 @@
+pre span:nth-child(1),
+h3.count1 {
+  color: hsl(0, 70%, 50%);
+}
+
+pre span:nth-child(2),
+h3.count2 {
+  color: hsl(100, 50%, 40%);
+}
+
+pre span:nth-child(3) {
+  color: hsl(200, 70%, 50%);
+}
diff --git a/src/frameworks/react/demos/tutorial-7/src/components/Counter.tsx b/src/frameworks/react/demos/tutorial-7/src/components/Counter.tsx
@@ -0,0 +1,11 @@
+import { Component } from "@starbeam/react";
+import { Clock } from "../lib/clock";
+import "./Counter.css";
+
+export function Counter(): JSX.Element {
+  return Component(({ use }) => {
+    const date = use(Clock);
+
+    return () => <div>{date.current?.display}</div>;
+  });
+}
diff --git a/src/frameworks/react/demos/tutorial-7/src/index.css b/src/frameworks/react/demos/tutorial-7/src/index.css
@@ -0,0 +1,73 @@
+@import url(https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap);
+@import url(https://fonts.googleapis.com/css2?family=Alegreya&family=Alegreya+Sans&family=Merriweather&family=Merriweather+Sans&family=Nunito+Sans&family=Quattrocento&family=Quattrocento+Sans&family=Roboto&family=Roboto+Mono&family=Roboto+Slab&display=swap);
+
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: grid;
+  place-items: center;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+    border-color: #c6c6c6;
+  }
+}
diff --git a/src/frameworks/react/demos/tutorial-7/src/index.ts b/src/frameworks/react/demos/tutorial-7/src/index.ts
@@ -0,0 +1,9 @@
+import React, { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+import "./prism.css";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  React.createElement(StrictMode, {}, React.createElement(App))
+);
diff --git a/src/frameworks/react/demos/tutorial-7/src/lib/clock.ts b/src/frameworks/react/demos/tutorial-7/src/lib/clock.ts
@@ -0,0 +1,24 @@
+import { Cell, Resource } from "@starbeam/universal";
+
+// #region clock
+export const Clock = Resource(({ on }) => {
+  const now = Cell(new Date());
+  const interval = setInterval(() => {
+    now.set(new Date());
+  });
+
+  on.cleanup(() => clearInterval(interval));
+
+  return {
+    get display() {
+      const formatter = new Intl.DateTimeFormat("en-US", {
+        hour: "numeric",
+        minute: "numeric",
+        second: "numeric",
+      });
+
+      return formatter.format(now.current);
+    },
+  };
+});
+// #endregion