Get editor working without bundling all of React

Author: RoyalIcing

apps/components_guide_web/lib/components_guide_web/templates/react_typescript/editor.html.eex

@@ -1,8 +1,23 @@
 <!-- See https://www.sanity.io/guides/server-side-rendering-deno-react -->
 
+<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.profiling.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.profiling.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom-server.browser.production.min.js"></script>
+
 <script src="https://unpkg.com/monaco-editor@latest/min/vs/loader.js"></script>
 
+
+<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
+
 <script type="module">
+//import React, { useReducer, useCallback, useEffect, useState, useMemo } from "https://jspm.dev/react@17.0.2";
+//import ReactDOM from "https://jspm.dev/react-dom@17.0.2/profiling";
+//import ReactDOMServer from "https://jspm.dev/react-dom@17.0.2/server";
+
+console.log("react", window.React);
+//import ReactDOM from "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.profiling.min.js/+esm";
+//import "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom-server.browser.production.min.js";
+
 import * as esbuild from "https://cdn.jsdelivr.net/npm/esbuild-wasm@0.14.1/esm/browser.min.js";
 const esbuildPromise = Promise.resolve(esbuild.initialize({
   wasmURL: 'https://cdn.jsdelivr.net/npm/esbuild-wasm@0.14.1/esbuild.wasm',
@@ -249,7 +264,9 @@ require(["vs/editor/editor.main"], function () {
           bundle: true,
           minify: true,
           stdin: {
-            contents: `${prefix}\n${body ?? ""}\n${suffix}`,
+            //contents: `${prefix}\n${body ?? ""}\n${suffix}`,
+            contents: `${body ?? ""}\n${suffix}`,
+            //contents: body ?? "",
             loader: 'jsx',
             sourcefile: 'main.jsx',
           },
@@ -277,7 +294,11 @@ require(["vs/editor/editor.main"], function () {
       })
       .then(({ code, codeBytes, duration }) => {
         console.log("NEW CODE!");
-        const executor = new Function(`${code}; return exports.Example();`);
+        //window.useReducer = window.React.useReducer;
+        //window.useMemo = window.React.useMemo;
+        const hookNames = Object.keys(window.React).filter(name => name.startsWith('use'));
+        const preamble = hookNames.map(hookName => `const ${hookName} = window.React.${hookName}`).join(';');
+        const executor = new Function(`${preamble}; ${code}; return exports.Example();`);
         const result = executor();
         return new Map()
           .set('result', result)
@@ -326,7 +347,7 @@ require(["vs/editor/editor.main"], function () {
       }, 1000);
     }
 
-    reactRenderEl.textContent = `last ${detail.actualDuration}ms; ${renderCount} times rendered`;
+    reactRenderEl.textContent = `last ${detail.actualDuration.toFixed(1)}ms; ${renderCount} times rendered`;
   });
 });
 </script>

apps/components_guide_web/lib/components_guide_web/templates/react_typescript/logical-clocks.html.md

@@ -10,20 +10,35 @@ However, while React has certainly made the *what* easier with the declarative m
 
 ## What is a logical clock?
 
+A logical clock is a monotonically increasing number. Or in other words, an incremented integer: `i++`.
+
+We can implement once as a React hook using `useReducer()`:
+
 ```ts
-function useTick() {
+function useTicker() {
   return useReducer(n => n + 1, 0);
 }
 ```
 
+We can wire it up to a button like so:
+
+```ts
+const [count, advance] = useTicker();
+
+return <>
+  <p>You have clicked {count} times</p>
+  <button>Click me!</button>
+</>;
+```
+
 ## Debouncing
 
 ```ts
-export function useDebouncedTick(duration: number): readonly [number, EffectCallback] {
-  const [count, tick] = useTick();
+export function useDebouncedTicker(duration: number): readonly [number, EffectCallback] {
+  const [count, advance] = useTicker();
 
   const callback = useMemo(() => {
-    let timeout = null;
+    let timeout: null | ReturnType<typeof setTimeout> = null;
     function clear() {
       if (timeout) {
         clearTimeout(timeout);
@@ -32,19 +47,25 @@ export function useDebouncedTick(duration: number): readonly [number, EffectCall
     }
     return () => {
       clear()
-      timeout = setTimeout(tick, duration);
+      timeout = setTimeout(advance, duration);
       return clear;
     };
-  }, [duration, tick]);
+  }, [duration, advance]);
 
   return [count, callback];
 }
 ```
 
 ```ts
 export function useDebouncedEffect(effect: EffectCallback, duration: number, deps: DependencyList): void {
-  const [count, tick] = useDebouncedTick(duration);
-  useEffect(tick, deps); // When our deps change, notify our debouncer.
+  const [count, receive] = useDebouncedTicker(duration);
+  useEffect(receive, deps); // When our deps change, notify our debouncer.
   useEffect(effect, [count]); // When our debouncer finishes, run our effect.
 }
+
+export function useDebouncedMemo<T>(factory: () => T, duration: number, deps: DependencyList): T {
+  const [tick, scheduleAdvance] = useDebouncedTicker(duration);
+  useEffect(scheduleAdvance, deps); // When our deps change, notify our debouncer.
+  return useMemo(factory, [tick]); // When our debouncer finishes, invalidate our memo.
+}
 ```