From 953c221b5171a65605d073e28be59924705260a5 Mon Sep 17 00:00:00 2001 From: Sabertaz Date: Thu, 24 Mar 2022 20:09:46 +0800 Subject: [PATCH] feat(react-renderer): setup custom React renderer (#295) --- README.md | 2 +- package.json | 4 +- .../{react-sandbox => react-renderer}/.env | 0 .../.gitignore | 0 .../CHANGELOG.md | 0 .../README.md | 2 +- .../package.json | 8 +- .../public/favicon.ico | Bin .../public/index.html | 4 +- .../public/logo192.png | Bin .../public/logo512.png | Bin .../public/manifest.json | 4 +- .../public/robots.txt | 0 .../src/App.css | 18 +-- .../src/App.test.tsx | 0 packages/react-renderer/src/App.tsx | 32 +++++ .../src/index.css | 3 + .../src/index.tsx | 4 +- .../src/logo.svg | 0 .../src/react-app-env.d.ts | 0 packages/react-renderer/src/renderer/index.ts | 18 +++ .../react-renderer/src/renderer/reconciler.ts | 124 ++++++++++++++++++ .../src/reportWebVitals.ts | 0 .../src/setupTests.ts | 0 .../tailwind.config.js | 0 .../tsconfig.json | 0 packages/react-sandbox/src/App.tsx | 34 ----- yarn.lock | 28 +++- 28 files changed, 221 insertions(+), 64 deletions(-) rename packages/{react-sandbox => react-renderer}/.env (100%) rename packages/{react-sandbox => react-renderer}/.gitignore (100%) rename packages/{react-sandbox => react-renderer}/CHANGELOG.md (100%) rename packages/{react-sandbox => react-renderer}/README.md (98%) rename packages/{react-sandbox => react-renderer}/package.json (85%) rename packages/{react-sandbox => react-renderer}/public/favicon.ico (100%) rename packages/{react-sandbox => react-renderer}/public/index.html (96%) rename packages/{react-sandbox => react-renderer}/public/logo192.png (100%) rename packages/{react-sandbox => react-renderer}/public/logo512.png (100%) rename packages/{react-sandbox => react-renderer}/public/manifest.json (87%) rename packages/{react-sandbox => react-renderer}/public/robots.txt (100%) rename packages/{react-sandbox => react-renderer}/src/App.css (61%) rename packages/{react-sandbox => react-renderer}/src/App.test.tsx (100%) create mode 100644 packages/react-renderer/src/App.tsx rename packages/{react-sandbox => react-renderer}/src/index.css (86%) rename packages/{react-sandbox => react-renderer}/src/index.tsx (89%) rename packages/{react-sandbox => react-renderer}/src/logo.svg (100%) rename packages/{react-sandbox => react-renderer}/src/react-app-env.d.ts (100%) create mode 100644 packages/react-renderer/src/renderer/index.ts create mode 100644 packages/react-renderer/src/renderer/reconciler.ts rename packages/{react-sandbox => react-renderer}/src/reportWebVitals.ts (100%) rename packages/{react-sandbox => react-renderer}/src/setupTests.ts (100%) rename packages/{react-sandbox => react-renderer}/tailwind.config.js (100%) rename packages/{react-sandbox => react-renderer}/tsconfig.json (100%) delete mode 100644 packages/react-sandbox/src/App.tsx diff --git a/README.md b/README.md index b354dd11..bdbcbaa7 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ A brand new repository for web development prototypes. ## React Collection -- [React SandBox](https://sabertazimi.github.io/awesome-web/react-sandbox) +- [React Renderer](https://sabertazimi.github.io/awesome-web/react-renderer) ## Vue Collection diff --git a/package.json b/package.json index d3cc1629..cfbaea2b 100644 --- a/package.json +++ b/package.json @@ -7,8 +7,8 @@ "build:prepare": "rm -fr ./build && mkdir -p ./build", "lint": "lerna run lint", "release": "lerna version --force-publish --sign-git-commit --sign-git-tag", - "start": "yarn start:vue-design", - "start:react-sandbox": "yarn workspace @sabertazimi/react-sandbox start", + "start": "yarn start:react-renderer", + "start:react-renderer": "yarn workspace @sabertazimi/react-renderer start", "start:vue-basis": "yarn workspace @sabertazimi/vue-basis serve", "start:vue-design": "yarn workspace @sabertazimi/vue-design dev", "start:vue-trello": "yarn workspace @sabertazimi/vue-trello dev", diff --git a/packages/react-sandbox/.env b/packages/react-renderer/.env similarity index 100% rename from packages/react-sandbox/.env rename to packages/react-renderer/.env diff --git a/packages/react-sandbox/.gitignore b/packages/react-renderer/.gitignore similarity index 100% rename from packages/react-sandbox/.gitignore rename to packages/react-renderer/.gitignore diff --git a/packages/react-sandbox/CHANGELOG.md b/packages/react-renderer/CHANGELOG.md similarity index 100% rename from packages/react-sandbox/CHANGELOG.md rename to packages/react-renderer/CHANGELOG.md diff --git a/packages/react-sandbox/README.md b/packages/react-renderer/README.md similarity index 98% rename from packages/react-sandbox/README.md rename to packages/react-renderer/README.md index d62acc7a..ce63597d 100644 --- a/packages/react-sandbox/README.md +++ b/packages/react-renderer/README.md @@ -1,4 +1,4 @@ -# @sabertazimi/react-sandbox +# @sabertazimi/react-renderer [![Author](https://img.shields.io/badge/author-sabertaz-lightgrey?style=for-the-badge)](https://github.com/sabertazimi) [![LICENSE](https://img.shields.io/github/license/sabertazimi/bod?style=for-the-badge)](https://raw.githubusercontent.com/sabertazimi/bod/main/LICENSE) diff --git a/packages/react-sandbox/package.json b/packages/react-renderer/package.json similarity index 85% rename from packages/react-sandbox/package.json rename to packages/react-renderer/package.json index 217c8874..f6e849a4 100644 --- a/packages/react-sandbox/package.json +++ b/packages/react-renderer/package.json @@ -1,11 +1,11 @@ { - "name": "@sabertazimi/react-sandbox", + "name": "@sabertazimi/react-renderer", "version": "1.6.1", "private": true, - "homepage": "https://sabertazimi.github.io/awesome-web/react-sandbox", + "homepage": "https://sabertazimi.github.io/awesome-web/react-renderer", "scripts": { "build": "react-scripts build && yarn build:post", - "build:post": "mkdir -p ../../build/react-sandbox && cp -fr ./build/* ../../build/react-sandbox", + "build:post": "mkdir -p ../../build/react-renderer && cp -fr ./build/* ../../build/react-renderer", "build:profile": "react-scripts build --profile", "start": "react-scripts start", "start:https": "HTTPS=true react-scripts start", @@ -16,6 +16,7 @@ "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2", + "react-reconciler": "^0.26.2", "web-vitals": "^2.1.4" }, "devDependencies": { @@ -28,6 +29,7 @@ "@types/node": "^16.11.26", "@types/react": "^17.0.41", "@types/react-dom": "^17.0.14", + "@types/react-reconciler": "^0.26.4", "typescript": "^4.6.2" }, "eslintConfig": { diff --git a/packages/react-sandbox/public/favicon.ico b/packages/react-renderer/public/favicon.ico similarity index 100% rename from packages/react-sandbox/public/favicon.ico rename to packages/react-renderer/public/favicon.ico diff --git a/packages/react-sandbox/public/index.html b/packages/react-renderer/public/index.html similarity index 96% rename from packages/react-sandbox/public/index.html rename to packages/react-renderer/public/index.html index d47e84d6..191f198a 100644 --- a/packages/react-sandbox/public/index.html +++ b/packages/react-renderer/public/index.html @@ -7,7 +7,7 @@ - Sandbox App + React Renderer diff --git a/packages/react-sandbox/public/logo192.png b/packages/react-renderer/public/logo192.png similarity index 100% rename from packages/react-sandbox/public/logo192.png rename to packages/react-renderer/public/logo192.png diff --git a/packages/react-sandbox/public/logo512.png b/packages/react-renderer/public/logo512.png similarity index 100% rename from packages/react-sandbox/public/logo512.png rename to packages/react-renderer/public/logo512.png diff --git a/packages/react-sandbox/public/manifest.json b/packages/react-renderer/public/manifest.json similarity index 87% rename from packages/react-sandbox/public/manifest.json rename to packages/react-renderer/public/manifest.json index bd15c558..74b2c982 100644 --- a/packages/react-sandbox/public/manifest.json +++ b/packages/react-renderer/public/manifest.json @@ -1,6 +1,6 @@ { - "short_name": "Sandbox App", - "name": "Sandbox App", + "short_name": "React Renderer", + "name": "React Renderer", "icons": [ { "src": "favicon.ico", diff --git a/packages/react-sandbox/public/robots.txt b/packages/react-renderer/public/robots.txt similarity index 100% rename from packages/react-sandbox/public/robots.txt rename to packages/react-renderer/public/robots.txt diff --git a/packages/react-sandbox/src/App.css b/packages/react-renderer/src/App.css similarity index 61% rename from packages/react-sandbox/src/App.css rename to packages/react-renderer/src/App.css index a4e6a1a1..073d81bc 100644 --- a/packages/react-sandbox/src/App.css +++ b/packages/react-renderer/src/App.css @@ -1,7 +1,3 @@ -.app { - text-align: center; -} - .app-logo { height: 40vmin; pointer-events: none; @@ -14,19 +10,11 @@ } .app-header { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + @apply flex flex-col items-center justify-center; + @apply bg-gray-900; + min-height: 100vh; font-size: calc(10px + 2vmin); - color: white; - background-color: #282c34; -} - -.app-link { - margin-bottom: 1rem; - color: #61dafb; } @keyframes app-logo-spin { diff --git a/packages/react-sandbox/src/App.test.tsx b/packages/react-renderer/src/App.test.tsx similarity index 100% rename from packages/react-sandbox/src/App.test.tsx rename to packages/react-renderer/src/App.test.tsx diff --git a/packages/react-renderer/src/App.tsx b/packages/react-renderer/src/App.tsx new file mode 100644 index 00000000..9192fb43 --- /dev/null +++ b/packages/react-renderer/src/App.tsx @@ -0,0 +1,32 @@ +import { useCallback, useState } from 'react'; +import Logo from './logo.svg'; +import './App.css'; + +function App() { + const [count, setCount] = useState(0); + const inc = useCallback(() => { + setCount(count => count + 1); + }, []); + const dec = useCallback(() => { + setCount(count => count - 1); + }, []); + + return ( +
+
+ +
+ +
{count}
+ +
+
+
+ ); +} + +export default App; diff --git a/packages/react-sandbox/src/index.css b/packages/react-renderer/src/index.css similarity index 86% rename from packages/react-sandbox/src/index.css rename to packages/react-renderer/src/index.css index a529646e..4833dd1a 100644 --- a/packages/react-sandbox/src/index.css +++ b/packages/react-renderer/src/index.css @@ -1,4 +1,7 @@ @import-normalize; +@tailwind base; +@tailwind components; +@tailwind utilities; body { margin: 0; diff --git a/packages/react-sandbox/src/index.tsx b/packages/react-renderer/src/index.tsx similarity index 89% rename from packages/react-sandbox/src/index.tsx rename to packages/react-renderer/src/index.tsx index ef2edf8e..00fbb56b 100644 --- a/packages/react-sandbox/src/index.tsx +++ b/packages/react-renderer/src/index.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import ReactDOM from 'react-dom'; +import Renderer from './renderer'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; -ReactDOM.render( +Renderer.render( , diff --git a/packages/react-sandbox/src/logo.svg b/packages/react-renderer/src/logo.svg similarity index 100% rename from packages/react-sandbox/src/logo.svg rename to packages/react-renderer/src/logo.svg diff --git a/packages/react-sandbox/src/react-app-env.d.ts b/packages/react-renderer/src/react-app-env.d.ts similarity index 100% rename from packages/react-sandbox/src/react-app-env.d.ts rename to packages/react-renderer/src/react-app-env.d.ts diff --git a/packages/react-renderer/src/renderer/index.ts b/packages/react-renderer/src/renderer/index.ts new file mode 100644 index 00000000..4ce207c8 --- /dev/null +++ b/packages/react-renderer/src/renderer/index.ts @@ -0,0 +1,18 @@ +import type { ReactElement } from 'react'; +import type { Container } from './reconciler'; +import Reconciler from './reconciler'; + +const Renderer = { + render: ( + element: ReactElement, + container: Container | null, + callback?: Function + ) => { + if (container) { + const root = Reconciler.createContainer(container, 0, false, null); + Reconciler.updateContainer(element, root, null); + } + }, +}; + +export default Renderer; diff --git a/packages/react-renderer/src/renderer/reconciler.ts b/packages/react-renderer/src/renderer/reconciler.ts new file mode 100644 index 00000000..ecb3e695 --- /dev/null +++ b/packages/react-renderer/src/renderer/reconciler.ts @@ -0,0 +1,124 @@ +import type { HostConfig } from 'react-reconciler'; +import ReactReconciler from 'react-reconciler'; + +type Type = string; +type Props = { [key: string]: any }; +export type Container = Document | DocumentFragment | Element; +type Instance = Element; +type TextInstance = Text; + +type SuspenseInstance = any; +type HydratableInstance = any; +type PublicInstance = any; +type HostContext = any; +type UpdatePayload = any; +type _ChildSet = any; +type TimeoutHandle = any; +type NoTimeout = number; + +const hostConfig: HostConfig< + Type, + Props, + Container, + Instance, + TextInstance, + SuspenseInstance, + HydratableInstance, + PublicInstance, + HostContext, + UpdatePayload, + _ChildSet, + TimeoutHandle, + NoTimeout +> = { + supportsMutation: false, + supportsPersistence: false, + createInstance: function ( + type: string, + props: Props, + rootContainer: Container, + hostContext: any, + internalHandle: any + ): Element { + throw new Error('Function not implemented.'); + }, + createTextInstance: function ( + text: string, + rootContainer: Container, + hostContext: any, + internalHandle: any + ): Text { + throw new Error('Function not implemented.'); + }, + appendInitialChild: function ( + parentInstance: Element, + child: Element | Text + ): void { + throw new Error('Function not implemented.'); + }, + finalizeInitialChildren: function ( + instance: Element, + type: string, + props: Props, + rootContainer: Container, + hostContext: any + ): boolean { + throw new Error('Function not implemented.'); + }, + prepareUpdate: function ( + instance: Element, + type: string, + oldProps: Props, + newProps: Props, + rootContainer: Container, + hostContext: any + ) { + throw new Error('Function not implemented.'); + }, + shouldSetTextContent: function (type: string, props: Props): boolean { + throw new Error('Function not implemented.'); + }, + getRootHostContext: function (rootContainer: Container) { + throw new Error('Function not implemented.'); + }, + getChildHostContext: function ( + parentHostContext: any, + type: string, + rootContainer: Container + ) { + throw new Error('Function not implemented.'); + }, + getPublicInstance: function (instance: Element | Text) { + throw new Error('Function not implemented.'); + }, + prepareForCommit: function ( + containerInfo: Container + ): Record | null { + throw new Error('Function not implemented.'); + }, + resetAfterCommit: function (containerInfo: Container): void { + throw new Error('Function not implemented.'); + }, + preparePortalMount: function (containerInfo: Container): void { + throw new Error('Function not implemented.'); + }, + now: function (): number { + throw new Error('Function not implemented.'); + }, + scheduleTimeout: function ( + fn: (...args: unknown[]) => unknown, + delay?: number + ) { + throw new Error('Function not implemented.'); + }, + cancelTimeout: function (id: any): void { + throw new Error('Function not implemented.'); + }, + noTimeout: 0, + isPrimaryRenderer: false, + supportsHydration: false, +}; + +const reconciler = ReactReconciler(hostConfig); + +export default reconciler; diff --git a/packages/react-sandbox/src/reportWebVitals.ts b/packages/react-renderer/src/reportWebVitals.ts similarity index 100% rename from packages/react-sandbox/src/reportWebVitals.ts rename to packages/react-renderer/src/reportWebVitals.ts diff --git a/packages/react-sandbox/src/setupTests.ts b/packages/react-renderer/src/setupTests.ts similarity index 100% rename from packages/react-sandbox/src/setupTests.ts rename to packages/react-renderer/src/setupTests.ts diff --git a/packages/react-sandbox/tailwind.config.js b/packages/react-renderer/tailwind.config.js similarity index 100% rename from packages/react-sandbox/tailwind.config.js rename to packages/react-renderer/tailwind.config.js diff --git a/packages/react-sandbox/tsconfig.json b/packages/react-renderer/tsconfig.json similarity index 100% rename from packages/react-sandbox/tsconfig.json rename to packages/react-renderer/tsconfig.json diff --git a/packages/react-sandbox/src/App.tsx b/packages/react-sandbox/src/App.tsx deleted file mode 100644 index 1e87b92f..00000000 --- a/packages/react-sandbox/src/App.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import Logo from './logo.svg'; -import './App.css'; - -function App() { - return ( -
-
- -

- Edit src/App.tsx and save to reload. -

- - Learn React - - - Learn Bod CLI - -
-
- ); -} - -export default App; diff --git a/yarn.lock b/yarn.lock index 094bfd10..89b20502 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3251,9 +3251,9 @@ __metadata: languageName: node linkType: hard -"@sabertazimi/react-sandbox@workspace:packages/react-sandbox": +"@sabertazimi/react-renderer@workspace:packages/react-renderer": version: 0.0.0-use.local - resolution: "@sabertazimi/react-sandbox@workspace:packages/react-sandbox" + resolution: "@sabertazimi/react-renderer@workspace:packages/react-renderer" dependencies: "@sabertazimi/react-scripts": ^5.8.0 "@testing-library/dom": ^8.11.3 @@ -3264,8 +3264,10 @@ __metadata: "@types/node": ^16.11.26 "@types/react": ^17.0.41 "@types/react-dom": ^17.0.14 + "@types/react-reconciler": ^0.26.4 react: ^17.0.2 react-dom: ^17.0.2 + react-reconciler: ^0.26.2 typescript: ^4.6.2 web-vitals: ^2.1.4 languageName: unknown @@ -4047,6 +4049,15 @@ __metadata: languageName: node linkType: hard +"@types/react-reconciler@npm:^0.26.4": + version: 0.26.4 + resolution: "@types/react-reconciler@npm:0.26.4" + dependencies: + "@types/react": "*" + checksum: 5ebb72f8aa70824b69030ae7f4c21828c0fb5c1cc5873a606eb7f7ac50cf5dd52502edcd32bf1eead2f149d076ee1798c86f1ffaebfa8b31d523343368d351e0 + languageName: node + linkType: hard + "@types/react@npm:*, @types/react@npm:^17.0.41": version: 17.0.41 resolution: "@types/react@npm:17.0.41" @@ -15949,6 +15960,19 @@ __metadata: languageName: node linkType: hard +"react-reconciler@npm:^0.26.2": + version: 0.26.2 + resolution: "react-reconciler@npm:0.26.2" + dependencies: + loose-envify: ^1.1.0 + object-assign: ^4.1.1 + scheduler: ^0.20.2 + peerDependencies: + react: ^17.0.2 + checksum: 2ebceace56f547f51eaf142becefef9cca980eae4f42d90ee5a966f54a375f5082d78b71b00c40bbd9bca69e0e0f698c7d4e81cc7373437caa19831fddc1d01b + languageName: node + linkType: hard + "react-refresh@npm:^0.11.0": version: 0.11.0 resolution: "react-refresh@npm:0.11.0"