diff options
Diffstat (limited to 'demos/react-fast-refresh-test/src')
6 files changed, 74 insertions, 213 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>; -}; diff --git a/demos/react-fast-refresh-test/src/index.css b/demos/react-fast-refresh-test/src/index.css index 0917f6c7a..c4514199c 100644 --- a/demos/react-fast-refresh-test/src/index.css +++ b/demos/react-fast-refresh-test/src/index.css @@ -42,18 +42,6 @@ body { height: 100%; } -.Subtitle { - text-align: center; - font-size: 4em; - margin: 0; - padding: 0; - margin-bottom: 0.25em; - - align-items: center; - display: flex; - flex-direction: row; -} - #reactroot, #__next, body, @@ -61,176 +49,50 @@ html { height: 100%; } -.Title { - color: var(--color-brand); - font-family: var(--heading-font); - font-weight: 700; - margin-top: 48px; - font-size: 48px; - text-transform: capitalize; - text-align: center; -} - -.Description { - text-align: center; -} - -.main { - display: flex; - flex-direction: column; - height: 100%; -} - -header, -.main { - width: 650px; - margin: 0 auto; -} - -section { - width: 650px; -} - -header { - margin-bottom: 48px; -} - -footer { - flex-shrink: 0; -} - -#reactroot, -#__next { - display: flex; - flex-direction: column; - justify-content: center; +.RenderCounter { + border: 10px solid var(--snippets_container-background-focused); + margin: 10px; + padding: 10px; + animation: flash 0.2s linear; + animation-fill-mode: forwards; } -section { - height: 300px; +.RenderCounter-meta { display: flex; - flex-direction: column; + flex-direction: row; + justify-content: space-between; + margin: -10px; + padding: 10px; + background-color: #111; } -.timer { - font-weight: normal; +.RenderCounter-lastRender, +.RenderCounter-title { + white-space: nowrap; + color: rgb(153, 153, 153); } -.ProgressBar-container { - width: 100%; - display: block; - position: relative; - border: 1px solid var(--color-brand-muted); - border-radius: 4px; +@keyframes flash { + from { + border-color: var(--snippets_container-background-focused); + } - height: 92px; + to { + border-color: var(--snippets_container-background-unfocused); + } } -.ProgressBar { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - width: 100%; - height: 100%; +.Button { display: block; - background-color: var(--color-brand); - transform-origin: top left; - border-radius: 4px; - transform: scaleX(var(--progress-bar, 0%)); -} - -.Bundler-container { - background-color: var(--snippets_container-background-focused); - font-size: 64px; - font-weight: bold; - color: white; - left: 0; - right: 0; - padding: 0.8em 0.8em; -} - -.Bundler-updateRate { - font-size: 0.8em; - font-weight: normal; - display: flex; - color: var(--result__muted-color); -} -.interval:before { - content: var(--interval, "16"); -} - -.highlight { + border: 1px solid rgb(20, 180, 0); + background-color: rgb(2, 150, 0); color: white; -} - -.timer:after { - content: var(--timestamp); - font-variant-numeric: tabular-nums; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, - Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; - display: inline; font-weight: 500; - color: white; - width: 100%; -} - -.SectionLabel { - font-weight: 300; - font-family: var(--heading-font); + padding: 10px 12px; + border-radius: 4px; + text-transform: uppercase; text-align: center; - width: 100%; - font-weight: 700; - margin-top: 24px; -} - -.FooterLabel { - margin-top: 0; - margin-bottom: 12px; -} - -.Spinner-container { - --spinner-muted: rgb(0, 255, 0); - --spinner-primary: rgb(0, 60, 255); - - width: 96px; - height: 96px; - border-radius: 50%; - background-color: var(--page-background); - border-top: 1.1em solid var(--spinner-muted); - border-right: 1.1em solid var(--spinner-muted); - border-bottom: 1.1em solid var(--spinner-muted); - border-left: 1.1em solid var(--spinner-primary); - - transform: rotate(var(--spinner-rotate, 12deg)); -} - -.Spinners { - display: grid; - grid-auto-flow: column; - justify-content: space-between; - - width: 100%; -} - -.Spinner-1.Spinner-container { - --spinner-muted: var(--spinner-1-muted); - --spinner-primary: var(--spinner-1-primary); -} - -.Spinner-2.Spinner-container { - --spinner-muted: var(--spinner-2-muted); - --spinner-primary: var(--spinner-2-primary); -} - -.Spinner-3.Spinner-container { - --spinner-muted: var(--spinner-3-muted); - --spinner-primary: var(--spinner-3-primary); -} - -.Spinner-4.Spinner-container { - --spinner-muted: var(--spinner-4-muted); - --spinner-primary: var(--spinner-4-primary); + width: fit-content; + cursor: pointer; } diff --git a/demos/react-fast-refresh-test/src/index.tsx b/demos/react-fast-refresh-test/src/index.tsx index 3db53a67f..348bd80f2 100644 --- a/demos/react-fast-refresh-test/src/index.tsx +++ b/demos/react-fast-refresh-test/src/index.tsx @@ -1,15 +1,10 @@ import ReactDOM from "react-dom"; import React from "react"; -import { Main } from "./main"; +import { App } from "./components/app"; import classNames from "classnames"; -const Base = ({}) => { - const name = decodeURIComponent(location.search.substring(1)); - return <Main productName={name || "Bundler"} />; -}; - function startReact() { - ReactDOM.render(<Base />, document.querySelector("#reactroot")); + ReactDOM.render(<App />, document.querySelector("#reactroot")); } globalThis.addEventListener("DOMContentLoaded", () => { @@ -17,4 +12,4 @@ globalThis.addEventListener("DOMContentLoaded", () => { }); startReact(); -export { Base }; +export { App }; |