Support live-reload and fallback

Former-commit-id: c3f9d77391589b65951616a632af87107fba469f

4 files changed, 40 insertions, 36 deletions

diff --git a/demos/react-fast-refresh-test/src/components/RenderCounter.tsx b/demos/react-fast-refresh-test/src/components/RenderCounter.tsx
new file mode 100644
index 000000000..ed2f00b56
--- /dev/null
+++ b/demos/react-fast-refresh-test/src/components/RenderCounter.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+export function RenderCounter({ name, children }) {
+  const counter = React.useRef(1);
+  return (
+    <div className="RenderCounter">
+      <div className="RenderCounter-meta">
+        <div className="RenderCounter-title">
+          {name} rendered <strong>{counter.current++} times</strong>
+        </div>
+        <div className="RenderCounter-lastRender">
+          LAST RENDER:{" "}
+          {new Intl.DateTimeFormat([], {
+            timeStyle: "long",
+          }).format(new Date())}
+        </div>
+      </div>
+      <div className="RenderCounter-children">{children}</div>
+    </div>
+  );
+}
diff --git a/demos/react-fast-refresh-test/src/components/app.tsx b/demos/react-fast-refresh-test/src/components/app.tsx
new file mode 100644
index 000000000..2edc02545
--- /dev/null
+++ b/demos/react-fast-refresh-test/src/components/app.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Button } from "./Button";
+import { RenderCounter } from "./RenderCounter";
+export function App() {
+  return (
+    <RenderCounter name="App">
+      <div className="AppRoot">
+        <h1>This is the root element</h1>
+
+        <Button>Click</Button>
+      </div>
+    </RenderCounter>
+  );
+}
diff --git a/demos/react-fast-refresh-test/src/components/button.tsx b/demos/react-fast-refresh-test/src/components/button.tsx
index 3f55fae34..4c3388670 100644
--- a/demos/react-fast-refresh-test/src/components/button.tsx
+++ b/demos/react-fast-refresh-test/src/components/button.tsx
@@ -1,37 +1,9 @@
-import React from "react";
-import { NewComponent } from "./new-comp";
-
-const Toast = () => {
-  const [baconyes, baconno] = useBacon();
-  return <div>false</div>;
-};
-const Button = ({ label, label2, onClick }) => {
-  const useCustomHookInsideFunction = (what, arr) => {
-    return [true, false];
-  };
-  const [on, setOn] = React.useState(false);
-
-  React.useEffect(() => {
-    console.log({ on });
-  }, [on]);
-
-  // const [foo1, foo2] = useCustomHookInsideFunction(() => {}, [on]);
+import { RenderCounter } from "./RenderCounter";
 
+export const Button = ({ children }) => {
   return (
-    <div className="Button" onClick={onClick}>
-      <Toast>f</Toast>
-      <div className="Button-label">{label}12</div>
-      <NewComponent />
-    </div>
+    <RenderCounter name="Button">
+      <div className="Button">{children}</div>
+    </RenderCounter>
   );
 };
-
-const Bacon = Button;
-
-export { Bacon, Bacon as Button };
-
-const RefreshLike = () => {};
-
-const useBacon = () => {
-  return [1, 8];
-};
diff --git a/demos/react-fast-refresh-test/src/components/new-comp.tsx b/demos/react-fast-refresh-test/src/components/new-comp.tsx
deleted file mode 100644
index f09c64a54..000000000
--- a/demos/react-fast-refresh-test/src/components/new-comp.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export const NewComponent = () => {
-  return <div>NEW!</div>;
-};