not found");
10 | }
11 |
12 | hydrate(tree, root);
13 |
--------------------------------------------------------------------------------
/examples/website/src/jsx.ts:
--------------------------------------------------------------------------------
1 | declare namespace JSX {
2 | interface IntrinsicElements {
3 | [elemName: string]: any;
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/examples/website/src/server.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs");
2 | const path = require("path");
3 | const express = require("express");
4 | const { createServer: createViteServer } = require("vite");
5 |
6 | async function createServer() {
7 | const app = express();
8 |
9 | // Create vite server in middleware mode. This disables Vite's own HTML
10 | // serving logic and let the parent server take control.
11 | //
12 | // If you want to use Vite's own HTML serving logic (using Vite as
13 | // a development middleware), using 'html' instead.
14 | const vite = await createViteServer({
15 | server: { middlewareMode: "ssr" },
16 | });
17 | // use vite's connect instance as middleware
18 | app.use(vite.middlewares);
19 |
20 | app.use("*", async (req, res) => {
21 | const url = req.originalUrl;
22 |
23 | try {
24 | // 1. Read index.html
25 | let template = fs.readFileSync(
26 | path.resolve(__dirname, "..", "index.html"),
27 | "utf-8"
28 | );
29 |
30 | // 2. Apply vite HTML transforms. This injects the vite HMR client, and
31 | // also applies HTML transforms from Vite plugins, e.g. global preambles
32 | // from @vitejs/plugin-react-refresh
33 | template = await vite.transformIndexHtml(url, template);
34 |
35 | // 3. Load the server entry. vite.ssrLoadModule automatically transforms
36 | // your ESM source code to be usable in Node.js! There is no bundling
37 | // required, and provides efficient invalidation similar to HMR.
38 | const { render } = await vite.ssrLoadModule(
39 | path.resolve("/src/entry-server.js")
40 | );
41 |
42 | // 4. render the app HTML. This assumes entry-server.js's exported `render`
43 | // function calls appropriate framework SSR APIs,
44 | // e.g. ReactDOMServer.renderToString()
45 | const appHtml = render(url);
46 |
47 | // 5. Inject the app-rendered HTML into the template.
48 | const html = template.replace(``, appHtml);
49 |
50 | // 6. Send the rendered HTML back.
51 | res.status(200).set({ "Content-Type": "text/html" }).end(html);
52 | } catch (e) {
53 | // If an error is caught, let vite fix the stracktrace so it maps back to
54 | // your actual source code.
55 | vite.ssrFixStacktrace(e);
56 | console.error(e);
57 | res.status(500).end(e.message);
58 | }
59 | });
60 |
61 | app.listen(3000);
62 | }
63 |
64 | createServer();
65 |
--------------------------------------------------------------------------------
/examples/website/src/ui/AutoScale.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | createElement as c,
3 | RElement,
4 | useEffect,
5 | useRef,
6 | } from "../../../../packages/remini/lib";
7 |
8 | const AutoScale = (props: any): RElement => {
9 | const ref = useRef
();
10 |
11 | const resize = () => {
12 | if (ref.current === null) {
13 | return;
14 | }
15 |
16 | ref.current.style.height = "auto";
17 | ref.current.style.height = `${ref.current.scrollHeight}px`;
18 | };
19 |
20 | useEffect(() => {
21 | resize();
22 | }, []);
23 |
24 | return (
25 |
35 | );
36 | };
37 |
38 | export default AutoScale;
39 |
--------------------------------------------------------------------------------
/examples/website/src/ui/Button.tsx:
--------------------------------------------------------------------------------
1 | import { createElement as c, RElement } from "../../../../packages/remini/lib";
2 |
3 | const Button = ({ children, loading, ...props }: any): RElement => {
4 | return (
5 |
13 | );
14 | };
15 |
16 | export default Button;
17 |
--------------------------------------------------------------------------------
/examples/website/src/ui/Input.tsx:
--------------------------------------------------------------------------------
1 | import { createElement as c, RElement } from "../../../../packages/remini/lib";
2 | import { TEXT_PRIMARY } from "../constants";
3 |
4 | const Input = ({ loading, ...props }: any): RElement => {
5 | return (
6 |
7 |
12 |
13 | );
14 | };
15 |
16 | export default Input;
17 |
--------------------------------------------------------------------------------
/examples/website/src/ui/Label.tsx:
--------------------------------------------------------------------------------
1 | import { createElement as c, RElement } from "../../../../packages/remini/lib";
2 | import { TEXT_PRIMARY } from "../constants";
3 |
4 | const Label = ({ children, ...props }: any): RElement => {
5 | return (
6 |
9 | );
10 | };
11 |
12 | export default Label;
13 |
--------------------------------------------------------------------------------
/examples/website/src/ui/Spinner.tsx:
--------------------------------------------------------------------------------
1 | import { createElement as c, RElement } from "../../../../packages/remini/lib";
2 |
3 | const Spinner = (): RElement => {
4 | return (
5 |
25 | );
26 | };
27 |
28 | export default Spinner;
29 |
--------------------------------------------------------------------------------
/examples/website/src/utils/date.ts:
--------------------------------------------------------------------------------
1 | const SECOND = 1000;
2 | const MINUTE = 60 * SECOND;
3 | const HOUR = 60 * MINUTE;
4 | const DAY = 24 * HOUR;
5 | const MONTH = 30 * DAY;
6 | const YEAR = 12 * MONTH;
7 |
8 | const format = (ms: number, abbreviation: string, unit: number) => {
9 | const amount = Math.floor(ms / unit);
10 |
11 | return `${amount}${abbreviation}`;
12 | };
13 |
14 | export const getFriendlyTime = (date: Date): string => {
15 | const ms = Date.now() - date.getTime();
16 | if (isNaN(ms) || !isFinite(ms)) {
17 | throw new Error(`Wrong value provided: ${ms}`);
18 | }
19 |
20 | if (ms < SECOND) {
21 | return "second ago";
22 | } else if (ms < MINUTE) {
23 | const amount = Math.floor(ms / SECOND);
24 | if (amount < 2) {
25 | return `second ago`;
26 | }
27 | return `few seconds ago`;
28 | } else if (ms < HOUR) {
29 | return format(ms, "m", MINUTE);
30 | } else if (ms < DAY) {
31 | return format(ms, "h", HOUR);
32 | } else if (ms < MONTH) {
33 | return format(ms, "d", DAY);
34 | } else if (ms < YEAR) {
35 | return format(ms, "m", MONTH);
36 | } else {
37 | return format(ms, "y", YEAR);
38 | }
39 | };
40 |
--------------------------------------------------------------------------------
/examples/website/style.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
--------------------------------------------------------------------------------
/examples/website/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | purge: ["./src/**/*.ts"],
3 | darkMode: false, // or 'media' or 'class'
4 | theme: {
5 | extend: {},
6 | },
7 | variants: {},
8 | plugins: [],
9 | };
10 |
--------------------------------------------------------------------------------
/examples/website/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "ES2020",
4 | "noImplicitAny": true,
5 | "removeComments": true,
6 | "preserveConstEnums": true,
7 | "sourceMap": true,
8 | "strictNullChecks": true,
9 | "jsx": "react",
10 | "jsxFactory": "c",
11 | "jsxFragmentFactory": "Fragment"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/examples/website/vite.config.js:
--------------------------------------------------------------------------------
1 | import remini from "../../packages/remini-plugin";
2 | import refresh from "../../packages/vite-plugin";
3 |
4 | export default {
5 | plugins: [remini(), refresh()],
6 | };
7 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "workspaces": [
4 | "packages/*"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/packages/babel-plugin/babel.config.js:
--------------------------------------------------------------------------------
1 | const importMetaPreset = require("../import-meta-preset");
2 |
3 | module.exports = {
4 | presets: [
5 | importMetaPreset,
6 | ["@babel/preset-env", { targets: { node: "current" } }],
7 | "@babel/preset-typescript",
8 | ],
9 | };
10 |
--------------------------------------------------------------------------------
/packages/babel-plugin/index.js:
--------------------------------------------------------------------------------
1 | function isComponentLikeName(name) {
2 | return typeof name === "string" && /^[A-Z]/.test(name);
3 | }
4 |
5 | export default function babelPlugin(babel) {
6 | const { types: t } = babel;
7 |
8 | const refreshReg = t.identifier("$RefreshReg$");
9 |
10 | const hookCalls = new Map();
11 |
12 | function getHookCallsSignature(functionNode) {
13 | const fnHookCalls = hookCalls.get(functionNode);
14 |
15 | if (fnHookCalls === undefined) {
16 | return null;
17 | }
18 |
19 | return {
20 | key: fnHookCalls.map((call) => call.key).join(";"),
21 | };
22 | }
23 |
24 | const HookSearcher = {
25 | CallExpression(path) {
26 | const node = path.node;
27 | const callee = node.callee;
28 |
29 | let name = null;
30 | switch (callee.type) {
31 | case "Identifier":
32 | name = callee.name;
33 | break;
34 | case "MemberExpression":
35 | name = callee.property.name;
36 | break;
37 | }
38 |
39 | if (name === null || !/^use[A-Z]/.test(name)) {
40 | return;
41 | }
42 |
43 | const fnScope = path.scope.getFunctionParent();
44 | const fnNode = fnScope.block;
45 |
46 | if (!hookCalls.has(fnNode)) {
47 | hookCalls.set(fnNode, []);
48 | }
49 | const hookCallsForFn = hookCalls.get(fnNode);
50 |
51 | let key = "";
52 | if (path.parent.type === "VariableDeclarator") {
53 | // TODO: if there is no LHS, consider some other heuristic.
54 | key = path.parentPath.get("id").getSource();
55 | }
56 |
57 | const args = path.get("arguments");
58 |
59 | if (name === "useState" && args.length > 0) {
60 | // useState first argument is initial state.
61 | key += " = useState(" + args[0].getSource() + ")";
62 | }
63 |
64 | // TODO
65 | // if (name === 'useReducer' && args.length > 1) {
66 | // // useReducer second argument is initial state.
67 | // key += '(' + args[1].getSource() + ')';
68 | // }
69 |
70 | hookCallsForFn.push({
71 | callee: path.node.callee,
72 | name,
73 | key,
74 | });
75 | },
76 | };
77 |
78 | const analyzeBody = (path, name, insertPath) => {
79 | const fnNode = path.node;
80 | const hooks = getHookCallsSignature(fnNode);
81 |
82 | // $RefreshReg$(A, $id$(), "A", "[counter, setCounter] = useState(0)");
83 | insertPath.insertAfter(
84 | t.callExpression(
85 | refreshReg,
86 | [
87 | t.identifier(name),
88 | t.callExpression(t.identifier("$id$"), []),
89 | t.stringLiteral(name),
90 | hooks && t.stringLiteral(hooks.key),
91 | ].filter(Boolean)
92 | )
93 | );
94 | };
95 |
96 | return {
97 | visitor: {
98 | ExportDefaultDeclaration(path) {
99 | //
100 | },
101 | FunctionDeclaration: {
102 | exit(path) {
103 | const name = path.node.id.name;
104 |
105 | if (!isComponentLikeName(name)) {
106 | return;
107 | }
108 |
109 | analyzeBody(path, name, path);
110 | },
111 | },
112 | ExportNamedDeclaration(path) {
113 | //
114 | },
115 | VariableDeclaration(path) {
116 | const name = path.node.declarations[0].id.name;
117 |
118 | if (!isComponentLikeName(name)) {
119 | return;
120 | }
121 |
122 | // switch (path.parent.type) {
123 | // case "Program":
124 | // console.log("Program");
125 | // break;
126 | // case "ExportNamedDeclaration":
127 | // console.log("ExportNamedDeclaration");
128 | // break;
129 | // case "ExportDefaultDeclaration":
130 | // console.log("ExportDefaultDeclaration");
131 | // break;
132 | // }
133 |
134 | const declarations = path.get("declarations")[0];
135 | const init = declarations.get("init");
136 |
137 | if (
138 | init.type !== "ArrowFunctionExpression" &&
139 | init.type !== "FunctionExpression"
140 | ) {
141 | return;
142 | }
143 |
144 | analyzeBody(init, name, path);
145 | },
146 | Program: {
147 | enter(path) {
148 | path.traverse(HookSearcher);
149 | },
150 | exit() {
151 | hookCalls.clear();
152 | },
153 | },
154 | },
155 | };
156 | }
157 |
--------------------------------------------------------------------------------
/packages/babel-plugin/index.test.js:
--------------------------------------------------------------------------------
1 | import { transformSync } from "@babel/core";
2 | import babelPlugin from ".";
3 |
4 | const transform = (code) => {
5 | return transformSync(code, {
6 | babelrc: false,
7 | configFile: false,
8 | parserOpts: {
9 | sourceType: "module",
10 | allowAwaitOutsideFunction: true,
11 | plugins: [],
12 | },
13 | plugins: [babelPlugin],
14 | ast: true,
15 | });
16 | };
17 |
18 | const source = `
19 | import { createElement as c, useState } from "../../packages/remini/lib";
20 |
21 | const trap = () => {
22 | return "test";
23 | };
24 |
25 | const local = "a";
26 |
27 | const A = () => {
28 | const [counter, setCounter] = useState(0);
29 | const onClick = () => setCounter(counter + 1);
30 |
31 | return c(
32 | "div",
33 | {},
34 | c("button", { onClick }, \`Clicked \${counter} times! \${secondState}\`)
35 | );
36 | };
37 |
38 | function B() {
39 | return c("div", {}, "B");
40 | }
41 |
42 | const C = function () {
43 | return c("div", "C");
44 | };
45 |
46 | export const D = () => {
47 | return c("div", "D");
48 | };
49 |
50 | export const E = function () {
51 | return c("div", "E");
52 | };
53 |
54 | export default A;
55 | `;
56 |
57 | const expected = `
58 | import { createElement as c, useState } from "../../packages/remini/lib";
59 |
60 | const trap = () => {
61 | return "test";
62 | };
63 |
64 | const local = "a";
65 |
66 | const A = () => {
67 | const [counter, setCounter] = useState(0);
68 |
69 | const onClick = () => setCounter(counter + 1);
70 |
71 | return c("div", {}, c("button", {
72 | onClick
73 | }, \`Clicked \${counter} times! \${secondState}\`));
74 | };
75 |
76 | $RefreshReg$(A, $id$(), "A", "[counter, setCounter] = useState(0)")
77 |
78 | function B() {
79 | return c("div", {}, "B");
80 | }
81 |
82 | $RefreshReg$(B, $id$(), "B")
83 |
84 | const C = function () {
85 | return c("div", "C");
86 | };
87 |
88 | $RefreshReg$(C, $id$(), "C")
89 | export const D = () => {
90 | return c("div", "D");
91 | };
92 | $RefreshReg$(D, $id$(), "D");
93 | export const E = function () {
94 | return c("div", "E");
95 | };
96 | $RefreshReg$(E, $id$(), "E");
97 | export default A;
98 | `.trim();
99 |
100 | describe("Babel plugin", () => {
101 | it("works with various function declaration methods", () => {
102 | const result = transform(source);
103 | expect(result.code).toBe(expected);
104 | });
105 | });
106 |
--------------------------------------------------------------------------------
/packages/babel-plugin/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "babel-plugin",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "test": "jest --watch --env=jsdom"
6 | },
7 | "devDependencies": {
8 | "@babel/core": "^7.14.8",
9 | "@babel/preset-env": "^7.14.8",
10 | "@babel/preset-typescript": "^7.15.0",
11 | "jest": "^27.0.6"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/babel-plugin/runtime.js:
--------------------------------------------------------------------------------
1 | // TODO
2 | // Make sure all steps from https://overreacted.io/my-wishlist-for-hot-reloading/#correctness
3 | // and later paragraphs are covered.
4 | // (for example error recovery is not done for sure).
5 |
6 | let pendingUpdates = [];
7 | let isPerformingRefresh = false;
8 |
9 | function injectIntoGlobalHook() {
10 | if (!window.__UPDATE__ || !window.__COMPONENT_TO_NODE__) {
11 | throw new Error("Cannot use fast refresh. Missing global hooks.");
12 | }
13 | }
14 |
15 | // Also known as $RefreshReg$.
16 | function register(render, id, name, hooks) {
17 | if (render === null) {
18 | return;
19 | }
20 |
21 | render.$id$ = `${id}-${name}`;
22 | render.$hooks$ = hooks;
23 | pendingUpdates.push([render.$id$, render, hooks]);
24 | }
25 |
26 | function performRefresh() {
27 | if (pendingUpdates.length === 0) {
28 | return;
29 | }
30 |
31 | if (isPerformingRefresh) {
32 | return;
33 | }
34 |
35 | isPerformingRefresh = true;
36 | pendingUpdates.forEach(([id, render, hooks]) => {
37 | const nodes = __COMPONENT_TO_NODE__.get(id);
38 |
39 | if (!nodes) {
40 | return;
41 | }
42 |
43 | nodes.forEach((node) => {
44 | if (node.hooks) {
45 | for (let i = 0; i < node.hooks.length; i++) {
46 | if (node.hooks[i].type === 0) {
47 | // 1 means HookType.STATE
48 | // Reset state.
49 | if (node.render.$hooks$ !== hooks) {
50 | node.hooks[i] = undefined;
51 | }
52 | } else if (node.hooks[i].type === 1) {
53 | // 2 means HookType.EFFECT
54 | const callback = node.hooks[i].cleanup;
55 | if (typeof callback === "function") {
56 | callback();
57 | }
58 | node.hooks[i] = undefined;
59 | } else if (node.hooks[i].type === 2) {
60 | // 3 means HookType.REF
61 | // createElement(...) structure could be changed. Better regenerate.
62 | node.hooks[i] = undefined;
63 | } else if (node.hooks[i].type === 3) {
64 | // 4 means HookType.CONTEXT
65 | // Probably no action needed.
66 | } else if (node.hooks[i].type === 4) {
67 | // 5 means HookType.MEMO
68 | // Run memos with deps again.
69 | node.hooks[i] = undefined;
70 | }
71 | }
72 | }
73 |
74 | node.render = render;
75 | window.__UPDATE__(node, null);
76 | });
77 | });
78 | pendingUpdates = [];
79 | isPerformingRefresh = false;
80 | }
81 |
82 | export default {
83 | injectIntoGlobalHook,
84 | register,
85 | performRefresh,
86 | };
87 |
--------------------------------------------------------------------------------
/packages/babel-plugin/runtime.test.js:
--------------------------------------------------------------------------------
1 | import RefreshRuntime from "./runtime";
2 | import {
3 | createElement as c,
4 | render,
5 | useEffect,
6 | useMemo,
7 | useRef,
8 | useState,
9 | } from "../remini/lib";
10 |
11 | beforeEach(() => {
12 | document.body.innerHTML = "";
13 | });
14 |
15 | describe("Fast refresh runtime", () => {
16 | it("works with simple component", () => {
17 | const App = () => {
18 | return c("div", {}, "abc");
19 | };
20 | RefreshRuntime.register(App, "/User/test/Desktop/App.js", "App");
21 | RefreshRuntime.performRefresh();
22 |
23 | render(c(App), document.body);
24 |
25 | expect(document.body.innerHTML).toBe("abc
");
26 |
27 | const AppUpdated = () => {
28 | return c("div", {}, "abcde");
29 | };
30 |
31 | RefreshRuntime.register(AppUpdated, "/User/test/Desktop/App.js", "App");
32 | RefreshRuntime.performRefresh();
33 |
34 | expect(document.body.innerHTML).toBe("abcde
");
35 | });
36 |
37 | it("works with useState hook", () => {
38 | const App = () => {
39 | const [counter, setCounter] = useState(0);
40 | const onClick = () => setCounter(counter + 1);
41 | return c(
42 | "button",
43 | { onClick, id: "button" },
44 | `Clicked ${counter} times!`
45 | );
46 | };
47 | RefreshRuntime.register(
48 | App,
49 | "/User/test/Desktop/App.js",
50 | "App",
51 | "[counter, setCounter] = useState(0)"
52 | );
53 |
54 | render(c(App), document.body);
55 | RefreshRuntime.performRefresh();
56 |
57 | expect(document.body.innerHTML).toBe(
58 | ''
59 | );
60 |
61 | const button = document.getElementById("button");
62 | button.click();
63 | button.click();
64 |
65 | expect(document.body.innerHTML).toBe(
66 | ''
67 | );
68 |
69 | const AppUpdated = () => {
70 | const [counter, setCounter] = useState(10);
71 | const onClick = () => setCounter(counter + 1);
72 | return c(
73 | "button",
74 | { onClick, id: "button" },
75 | `Clicked ${counter} times!`
76 | );
77 | };
78 |
79 | RefreshRuntime.register(
80 | AppUpdated,
81 | "/User/test/Desktop/App.js",
82 | "App",
83 | "[counter, setCounter] = useState(10)"
84 | );
85 | RefreshRuntime.performRefresh();
86 |
87 | expect(document.body.innerHTML).toBe(
88 | ''
89 | );
90 | });
91 |
92 | it("cleans up and re-runs useEffects properly", () => {
93 | // TODO
94 | // Finish it and implement missing parts.
95 |
96 | const runOnEffect = jest.fn();
97 | const runOnCleanUp = jest.fn();
98 |
99 | const App = () => {
100 | useEffect(() => {
101 | runOnEffect();
102 | return () => {
103 | runOnCleanUp();
104 | };
105 | }, []);
106 |
107 | return c("div", {}, "abc");
108 | };
109 | RefreshRuntime.register(App, "/User/test/Desktop/App.js", "App");
110 |
111 | render(c(App), document.body);
112 | RefreshRuntime.performRefresh();
113 |
114 | expect(document.body.innerHTML).toBe("abc
");
115 | expect(runOnEffect).toHaveBeenCalledTimes(2);
116 |
117 | const UpdatedApp = () => {
118 | useEffect(() => {
119 | runOnEffect();
120 | return () => {
121 | runOnCleanUp();
122 | };
123 | }, []);
124 |
125 | return c("div", {}, "abcde");
126 | };
127 | RefreshRuntime.register(UpdatedApp, "/User/test/Desktop/App.js", "App");
128 | RefreshRuntime.performRefresh();
129 |
130 | expect(document.body.innerHTML).toBe("abcde
");
131 | expect(runOnEffect).toHaveBeenCalledTimes(3);
132 | expect(runOnCleanUp).toHaveBeenCalledTimes(2);
133 | });
134 |
135 | it("handles memo and ref hooks", () => {
136 | //
137 | });
138 |
139 | it("doesn't destroy state of siblings or parent", () => {
140 | const Parent = ({ children }) => {
141 | const [counter, setCounter] = useState(0);
142 | const onClick = () => setCounter(counter + 1);
143 | return c(
144 | "div",
145 | {},
146 | c("button", { id: "parent", onClick }, `Parent clicked: ${counter}`),
147 | children
148 | );
149 | };
150 |
151 | const Sibling = () => {
152 | const [counter, setCounter] = useState(0);
153 | const onClick = () => setCounter(counter + 1);
154 | return c(
155 | "button",
156 | { id: "sibling", onClick },
157 | `Sibling clicked: ${counter}`
158 | );
159 | };
160 |
161 | const Current = () => {
162 | return c("div", {}, "abc");
163 | };
164 |
165 | RefreshRuntime.register(Current, "/User/test/Desktop/index.js", "Current");
166 | render(c(Parent, {}, c(Current), c(Sibling)), document.body);
167 | RefreshRuntime.performRefresh();
168 |
169 | const parentButton = document.getElementById("parent");
170 | const siblingButton = document.getElementById("sibling");
171 |
172 | parentButton.click();
173 | parentButton.click();
174 | siblingButton.click();
175 | siblingButton.click();
176 | siblingButton.click();
177 |
178 | expect(document.body.innerHTML).toBe(
179 | 'abc
abcde
a
'
225 | );
226 |
227 | const UpdatedApp = () => {
228 | const [state, setState] = useState("b");
229 | return c("div", {}, c("span", {}, state), c(Child));
230 | };
231 | RefreshRuntime.register(
232 | UpdatedApp,
233 | "/User/test/Desktop/App.js",
234 | "App",
235 | "[state, setState] = useState('b')"
236 | );
237 | RefreshRuntime.performRefresh();
238 |
239 | expect(document.body.innerHTML).toBe(
240 | 'b
'
241 | );
242 | });
243 |
244 | // TODO
245 | // Find a way to test recovering from syntax errors.
246 | });
247 |
--------------------------------------------------------------------------------
/packages/devtools/README.md:
--------------------------------------------------------------------------------
1 | # devtools
2 |
3 | WIP
4 |
5 | ## Installing dev version
6 |
7 | 1. Visit `chrome://extensions`.
8 | 2. Check `Developer mode`.
9 | 3. Click `Load unpacked`.
10 | 4. Select _directory_ with `manifest.json`.
11 |
12 | https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html
13 | https://twitter.com/taneliang/status/1293936745201860609
14 | https://blog.eliangtan.com/view-framework-1/
15 | https://blog.eliangtan.com/view-framework-2/
16 |
--------------------------------------------------------------------------------
/packages/devtools/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tchayen/remini/83d26828c17316a2b0436b1fea6118957b628902/packages/devtools/icon.png
--------------------------------------------------------------------------------
/packages/devtools/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 | Popup
11 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/devtools/index.js:
--------------------------------------------------------------------------------
1 | import { createElement as c, render } from "./remini.js";
2 |
3 | chrome.devtools.panels.create("Remini", "", "/panel.html", (panel) => {
4 | const root = document.getElementById("root");
5 |
6 | const App = () => {
7 | return c(
8 | "div",
9 | {
10 | style: {
11 | background: "white",
12 | width: "100vw",
13 | height: "100vh",
14 | },
15 | class: "text-xl",
16 | },
17 | "abcd123"
18 | );
19 | };
20 |
21 | render(c(App), root);
22 | });
23 |
--------------------------------------------------------------------------------
/packages/devtools/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Hello Extensions",
3 | "description": "Base Level Extension",
4 | "version": "0.0.0",
5 | "manifest_version": 3,
6 | "devtools_page": "panel.html",
7 | "action": {
8 | "default_popup": "index.html",
9 | "default_icon": "icon.png"
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/packages/devtools/panel.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/packages/devtools/remini.js:
--------------------------------------------------------------------------------
1 | var e,t,n,o,r=Object.defineProperty,s=Object.defineProperties,i=Object.getOwnPropertyDescriptors,d=Object.getOwnPropertySymbols,p=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable,l=(e,t,n)=>t in e?r(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,c=(e,t)=>{for(var n in t||(t={}))p.call(t,n)&&l(e,n,t[n]);if(d)for(var n of d(t))a.call(t,n)&&l(e,n,t[n]);return e},f=(e,t)=>s(e,i(t));(t=e||(e={}))[t.COMPONENT=1]="COMPONENT",t[t.HOST=2]="HOST",t[t.TEXT=3]="TEXT",t[t.PROVIDER=4]="PROVIDER",t[t.NULL=5]="NULL",t[t.FRAGMENT=6]="FRAGMENT",(o=n||(n={}))[o.STATE=1]="STATE",o[o.EFFECT=2]="EFFECT",o[o.REF=3]="REF",o[o.CONTEXT=4]="CONTEXT",o[o.MEMO=5]="MEMO";const E=e=>!!e.match(new RegExp("on[A-Z].*")),h=e=>e.replace("on","").toLowerCase(),u=e=>"viewBox"===e?e:T(e),T=e=>e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),O=e=>Object.keys(e).map((t=>{const n=e[t];return`${T(t)}:${n}`})).join(";"),k=t=>{let n=t;for(;n.kind!==e.COMPONENT&&n.parent;)n=n.parent;return n.kind!==e.COMPONENT?null:n},N=t=>{let n=t;for(;n.kind!==e.HOST&&n.parent;)n=n.parent;if(n.kind!==e.HOST)throw new Error("Couldn't find node.");return n},v=t=>{var n;t.kind===e.HOST||t.kind===e.TEXT?null==(n=t.native.parentNode)||n.removeChild(t.native):t.descendants.forEach((e=>{v(e)}))},C={findClosestComponent:k,findClosestHostNode:N,createHostNode:e=>{const t="svg"===(n=e.tag)||"circle"===n||"path"===n?document.createElementNS("http://www.w3.org/2000/svg",n):document.createElement(n);var n;return Object.entries(e.props).forEach((([e,n])=>{if("children"===e||"ref"===e);else if("style"===e){const o="string"==typeof n?n:O(n);t.setAttribute(e,o)}else E(e)?t.addEventListener(h(e),n):t.setAttribute(u(e),n)})),t},updateHostNode:(e,t)=>{const n=e.native;Object.keys(e.props).forEach((o=>{if("children"===o||"ref"===o);else if(E(o))n.removeEventListener(h(o),e.props[o]);else if(t.props[o]||n.removeAttribute(o),t.props[o])if("style"===o){const e="string"==typeof t.props[o]?t.props[o]:O(t.props[o]);n.setAttribute(o,e)}else n.setAttribute(u(o),t.props[o])})),Object.keys(t.props).forEach((o=>{if("children"===o||"ref"===o);else if(E(o))n.addEventListener(h(o),t.props[o]);else if(!e.props[o])if("style"===o){const e="string"==typeof t.props[o]?t.props[o]:O(t.props[o]);n.setAttribute(o,e)}else n.setAttribute(u(o),t.props[o])}))},removeHostNode:v,appendChild:(e,t)=>{e.appendChild(t)},createTextNode:e=>document.createTextNode(e),updateTextNode:(e,t)=>{e.native.nodeValue=t}},w=t=>{if(t.kind===e.HOST||t.kind===e.TEXT){const{children:e}=t.native.parent;e.splice(e.indexOf(t.native),1)}else t.descendants.forEach((e=>{w(e)}))},g={findClosestComponent:k,createHostNode:e=>{const t={tag:e.tag,children:[],attributes:{}};return Object.entries(e.props).forEach((([e,n])=>{if("children"===e||"ref"===e);else if("style"===e){const o="string"==typeof n?n:O(n);t.attributes[e]=o}else E(e)||(t.attributes[u(e)]=n)})),t},findClosestHostNode:N,removeHostNode:w,updateHostNode:(e,t)=>{const n=e.native;Object.keys(e.props).forEach((e=>{if("children"===e||"ref"===e);else if(E(e));else if(t.props[e]||delete n.attributes[e],t.props[e])if("style"===e){const o="string"==typeof t.props[e]?t.props[e]:O(t.props[e]);n.attributes[e]=o}else n.attributes[u(e)]=t.props[e]})),Object.keys(t.props).forEach((o=>{if("children"===o||"ref"===o);else if(E(o));else if(!e.props[o])if("style"===o){const t="string"==typeof e.props[o]?e.props[o]:O(e.props[o]);n.attributes[o]=t}else n.attributes[u(o)]=t.props[o]}))},appendChild:(e,t)=>{e.children.push(t)},createTextNode:e=>e,updateTextNode:(e,t)=>{e.native=t}};let m=null,y=null,M=0,H=null;const b=new Map,x=new Map;let S=!1;const P=[],R=[];function F(t,n,...o){const r=f(c({},n||{}),{children:o.flat().map((t=>"string"==typeof t?{kind:e.TEXT,content:t}:"number"==typeof t?{kind:e.TEXT,content:t.toString()}:t)).filter(Boolean)});if("function"==typeof t)return t.context?{kind:e.PROVIDER,props:f(c({},r),{$$context:t.context})}:{kind:e.COMPONENT,render:t,props:r};if("string"==typeof t)return""===t?{kind:e.FRAGMENT,props:r}:{kind:e.HOST,tag:t,props:r};throw new Error("Something went wrong.")}const A=(t,o,r)=>{const{host:s,isHydrating:i}=r;H=s;const d=y,p=M;let a=null;if(o&&o.kind===e.TEXT||t.kind===e.TEXT)return;let l=[];if(t.kind===e.COMPONENT)y=t,M=0,l=[t.render(t.props)].filter(Boolean),M=0;else if(o&&"props"in o&&(t.kind===e.HOST||t.kind===e.PROVIDER||t.kind===e.FRAGMENT)){if(t.kind===e.PROVIDER){const e=b.get(t.context);e&&(a={context:t.context,value:e}),b.set(t.context,{value:t.props.value})}l=o.props.children}i&&t.kind===e.HOST&&o&&o.kind===e.HOST&&s.updateHostNode(t,o);const E=Math.max(t.descendants.length,l.length),h=[];for(let e=0;e{if(o&&d&&(o.kind===e.COMPONENT&&d.kind===e.COMPONENT&&o.render===d.render||o.kind===e.HOST&&d.kind===e.HOST&&o.tag===d.tag||o.kind===e.FRAGMENT&&d.kind===e.FRAGMENT||o.kind===e.PROVIDER&&d.kind===e.PROVIDER||o.kind===e.TEXT&&d.kind===e.TEXT))o.kind===e.HOST&&d.kind===e.HOST?s.updateHostNode(o,d):o.kind===e.TEXT&&d.kind===e.TEXT&&o.content!==d.content&&(o.content=d.content,s.updateTextNode(o,d.content)),"props"in o&&"props"in d&&(o.props=d.props),A(o,d,r);else if(o&&d){let i;if(d.kind===e.COMPONENT)i=f(c({},d),{parent:t,descendants:[],hooks:[]}),s.removeHostNode(o);else if(d.kind===e.HOST){const n=s.findClosestHostNode(t),r=f(c({},d),{parent:t,descendants:[]}),p=s.createHostNode(d);o.kind===e.HOST||o.kind===e.TEXT?n.native.replaceChild(p,o.native):(s.removeHostNode(o),s.appendChild(n.native,p)),r.native=p,i=r}else if(d.kind===e.TEXT){const n=s.findClosestHostNode(t),r=f(c({},d),{parent:t}),p=s.createTextNode(d.content);if(o.kind===e.TEXT)throw new Error("Update should have happened on this node.");o.kind===e.HOST?(n.native.replaceChild(p,o.native),r.native=p):(s.removeHostNode(o),s.appendChild(n.native,p),r.native=p),i=r}else if(d.kind===e.PROVIDER)i=f(c({},d),{context:d.props.$$context,parent:t,descendants:[]}),s.removeHostNode(o);else{if(d.kind!==e.FRAGMENT)throw new Error("Couldn't resolve node kind.");i=f(c({},d),{parent:t,descendants:[]}),s.removeHostNode(o)}o.kind===e.COMPONENT&&o.hooks.forEach((e=>{e.type===n.EFFECT&&e.cleanup&&e.cleanup()})),t.descendants[t.descendants.indexOf(o)]=i,A(i,d,r)}else if(o||void 0===d){if(void 0!==o&&!d){const r=t.descendants.indexOf(o);o.kind===e.COMPONENT?o.hooks.forEach((e=>{e.type===n.EFFECT&&e.cleanup&&e.cleanup()})):o.kind===e.PROVIDER&&b.delete(o.context),s.removeHostNode(o),t.descendants.splice(r,1)}}else{let o;if(d.kind===e.COMPONENT)o=f(c({},d),{parent:t,descendants:[],hooks:[]}),d.kind,e.COMPONENT;else if(d.kind===e.HOST){const r=f(c({},d),{parent:t,descendants:[]}),p=s.findClosestHostNode(t);i?(r.native=z,q()):(r.native=s.createHostNode(d),s.appendChild(p.native,r.native)),o=r;const a=s.findClosestComponent(t);if(a&&a.kind===e.COMPONENT)for(const e of a.hooks)e.type===n.REF&&d.props.ref===e&&(e.current=o.native)}else if(d.kind===e.TEXT){const e=f(c({},d),{parent:t}),n=s.findClosestHostNode(t);if(i)e.native=z,q();else{const t=s.createTextNode(d.content);s.appendChild(n.native,t),e.native=t}o=e}else if(d.kind===e.PROVIDER)o=f(c({},d),{parent:t,descendants:[],context:d.props.$$context});else{if(d.kind!==e.FRAGMENT)throw new Error("Couldn't resolve node kind.");o=f(c({},d),{parent:t,descendants:[]})}t.descendants.push(o),A(o,d,r)}})),t.kind===e.PROVIDER&&null!==a&&b.set(a.context,{value:a.value}),y=d,M=p,H=null},X=(e,t,n)=>{if(P.push({node:e,element:t}),S)return;let o;for(S=!0;o=P.shift();){let e;for(A(o.node,o.element,n);e=R.shift();)e()}b.clear(),S=!1},j=(t,o)=>{const r=y,s=M;if(!r||r.kind!==e.COMPONENT)throw new Error("Executing useEffect for non-function element.");R.push((()=>{if(!r||r.kind!==e.COMPONENT)throw new Error("Executing useEffect for non-function element.");if(void 0===r.hooks[s]){const e={type:n.EFFECT,cleanup:void 0,dependencies:o};r.hooks[s]=e;const i=t();e.cleanup=i||void 0}else if(o){const e=r.hooks[s];if(e.type!==n.EFFECT||void 0===e.dependencies)throw new Error("Something went wrong.");let i=!1;for(let t=0;t{const o=y,r=M,s=H;if(!o||o.kind!==e.COMPONENT)throw new Error("Executing useState for non-function element.");if(!s)throw new Error("Missing host context.");void 0===o.hooks[r]&&(o.hooks[r]={type:n.STATE,state:t});const i=o.hooks[r];if(i.type!==n.STATE)throw new Error("Something went wrong.");return M+=1,[i.state,t=>{if(!o||o.kind!==e.COMPONENT)throw new Error("Executing useState for non-function element.");i.state=t instanceof Function?t(i.state):t,X(o,null,{host:s})}]},D=()=>{if(!y||y.kind!==e.COMPONENT)throw new Error("Can't use useRef on this node.");let t=y.hooks[M];if(void 0===t&&(t={type:n.REF,current:null},y.hooks[M]=t),t.type!==n.REF)throw new Error("Something went wrong.");return M+=1,t},I=(t,o)=>{if(!y||y.kind!==e.COMPONENT)throw new Error("Can't call useMemo on this node.");if(void 0===y.hooks[M])y.hooks[M]={type:n.MEMO,memo:t(),dependencies:o};else{const e=y.hooks[M];if(e.type!==n.MEMO||!e.dependencies)throw new Error("Something went wrong.");let r=!1;for(let t=0;t{const e={},t=({value:e})=>F("a",{});return t.context=e,e.Provider=t,e},L=t=>{if(!y||y.kind!==e.COMPONENT)throw new Error("Can't call useContext on this node.");const o=b.get(t);(void 0===y.hooks[M]||o)&&(y.hooks[M]={type:n.CONTEXT,context:o.value});const r=y.hooks[M];if(r.type!==n.CONTEXT)throw new Error("Something went wrong.");return M+=1,r.context},G=(t,n)=>{m={kind:e.HOST,props:{children:[t]},tag:n.tagName.toLowerCase(),native:n,parent:null,descendants:[]},x.clear(),X(m,F("div",{},t),{host:C})},B=e=>{if("string"==typeof e)return e;const t=Object.keys(e.attributes).length>0?" ":"",n=Object.keys(e.attributes).map((t=>`${t}="${e.attributes[t]}"`)).join(" "),o=e.children.map((e=>B(e))).join("");return`<${e.tag}${t}${n}>${o}`},U=t=>(m={kind:e.HOST,props:{children:[t],id:"root"},tag:"div",native:{tag:"div",attributes:{id:"root"},children:[]},parent:null,descendants:[]},X(m,F("div",{},t),{host:g}),B(m.native)),Z=(t,n)=>{m={kind:e.HOST,props:{children:[t]},tag:n.tagName.toLowerCase(),native:n,parent:null,descendants:[]},z=n.firstChild,X(m,F("div",{},t),{host:C,isHydrating:!0}),z=null};let z=null;const q=()=>{if(null!==z)if(z.firstChild)z=z.firstChild;else if(z.nextSibling)z=z.nextSibling;else{for(;!z.nextSibling;)if(z=z.parentNode,null===z)return;z=z.nextSibling}};export{m as _rootNode,V as createContext,F as createElement,Z as hydrate,G as render,U as renderToString,L as useContext,j as useEffect,I as useMemo,D as useRef,$ as useState};
2 |
--------------------------------------------------------------------------------
/packages/devtools/tailwind.css:
--------------------------------------------------------------------------------
1 | /*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com*/
2 |
3 | /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-webkit-text-size-adjust:100%;line-height:1.15;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;margin:0}hr{color:inherit;height:0}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{border:0 solid;box-sizing:border-box}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{color:inherit;line-height:inherit;padding:0}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.absolute{position:absolute}.relative{position:relative}.inset-0{bottom:0;left:0;right:0;top:0}.top-6{top:1.5rem}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-bottom:.5rem;margin-top:.5rem}.mt-1{margin-top:.25rem}.mt-4{margin-top:1rem}.mt-10{margin-top:2.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.ml-3{margin-left:.75rem}.-ml-1{margin-left:-.25rem}.flex{display:flex}.table{display:table}.hidden{display:none}.h-3{height:.75rem}.h-6{height:1.5rem}.h-9{height:2.25rem}.h-12{height:3rem}.h-full{height:100%}.h-screen{height:100vh}.w-6{width:1.5rem}.w-12{width:3rem}.w-96{width:24rem}.w-3\/4{width:75%}.w-1\/5{width:20%}.w-1\/6{width:16.666667%}.w-full{width:100%}.w-screen{width:100vw}.flex-1{flex:1 1 0%}@-webkit-keyframes spin{to{transform:rotate(1turn)}}@keyframes spin{to{transform:rotate(1turn)}}@-webkit-keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}@-webkit-keyframes bounce{0%,to{-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}@keyframes bounce{0%,to{-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}.animate-spin{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.resize{resize:both}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.75rem*var(--tw-space-x-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-r{border-right-width:1px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-gray-200{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgba(59,130,246,var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgba(229,231,235,var(--tw-bg-opacity))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgba(156,163,175,var(--tw-bg-opacity))}.bg-red-400{--tw-bg-opacity:1;background-color:rgba(248,113,113,var(--tw-bg-opacity))}.bg-yellow-300{--tw-bg-opacity:1;background-color:rgba(252,211,77,var(--tw-bg-opacity))}.bg-yellow-500{--tw-bg-opacity:1;background-color:rgba(245,158,11,var(--tw-bg-opacity))}.bg-green-400{--tw-bg-opacity:1;background-color:rgba(52,211,153,var(--tw-bg-opacity))}.bg-blue-400{--tw-bg-opacity:1;background-color:rgba(96,165,250,var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgba(59,130,246,var(--tw-bg-opacity))}.bg-purple-400{--tw-bg-opacity:1;background-color:rgba(167,139,250,var(--tw-bg-opacity))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgba(37,99,235,var(--tw-bg-opacity))}.p-2{padding:.5rem}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.leading-tight{line-height:1.25}.text-black{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgba(255,255,255,var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgba(156,163,175,var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgba(107,114,128,var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgba(55,65,81,var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgba(59,130,246,var(--tw-text-opacity))}.hover\:underline:hover{text-decoration:underline}.opacity-25{opacity:.25}.opacity-60{opacity:.6}.opacity-75{opacity:.75}*,:after,:before{--tw-shadow:0 0 #0000}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}*,:after,:before{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgba(59,130,246,var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}
--------------------------------------------------------------------------------
/packages/fetch-todo/index.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs");
2 | const path = require("path");
3 | const chalk = require("chalk");
4 |
5 | const lookForFiles = (directory, runOnFile) => {
6 | fs.readdir(directory, (error, files) => {
7 | if (error) {
8 | console.log(error);
9 | return;
10 | }
11 |
12 | files.forEach((file) => {
13 | const path = directory + "/" + file;
14 | const stat = fs.statSync(path);
15 |
16 | if (stat.isDirectory()) {
17 | if (file === "node_modules") {
18 | return;
19 | }
20 |
21 | lookForFiles(path, runOnFile);
22 | } else if (stat.isFile() && file.match(/(j|t)sx?$/)) {
23 | runOnFile(path);
24 | }
25 | });
26 | });
27 | };
28 |
29 | const processFile = (file) => {
30 | fs.readFile(file, { encoding: "utf-8" }, (error, data) => {
31 | if (error) {
32 | console.log(error);
33 | return;
34 | }
35 |
36 | const lines = data.split("\n");
37 | const todos = lines
38 | .map((line, index) => ({ line, index }))
39 | .filter((line) => line.line.match(/^\s*\/\/ TODO/))
40 | .map(({ index }) => {
41 | const comment = [];
42 | let i = index + 1;
43 | while (lines[i].match(/^\s*\/\/ /)) {
44 | comment.push(lines[i].trim().replace("// ", ""));
45 | i++;
46 | }
47 |
48 | const absolutePath = path.resolve(file);
49 |
50 | if (comment.length > 0) {
51 | const header = chalk.bold(
52 | chalk.green(`${absolutePath}:${index + 1}`)
53 | );
54 | console.log(`${header}\n${comment.join("\n")}\n`);
55 | }
56 |
57 | return {
58 | start: index,
59 | end: i,
60 | comment: comment.join("\n"),
61 | };
62 | });
63 | });
64 | };
65 |
66 | lookForFiles("..", processFile);
67 |
--------------------------------------------------------------------------------
/packages/fetch-todo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "fetch-todo",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "start": "node ./index.js"
6 | },
7 | "devDependencies": {
8 | "chalk": "^4.1.2"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/packages/import-meta-preset/index.js:
--------------------------------------------------------------------------------
1 | // This plugin replaces calls to import.meta with call to NAME, which is an
2 | // object injected to the top of the file.
3 | function plugin({ types: t }) {
4 | const NAME = "$meta$";
5 |
6 | return {
7 | visitor: {
8 | MetaProperty(path) {
9 | path.replaceWith(t.identifier(NAME));
10 | },
11 | Program(path) {
12 | const metaProperties = [
13 | t.objectProperty(
14 | t.identifier("env"),
15 | t.objectExpression([
16 | t.objectProperty(t.identifier("DEV"), t.booleanLiteral(true)),
17 | ])
18 | ),
19 | ];
20 |
21 | path.unshiftContainer(
22 | "body",
23 | t.variableDeclaration("const", [
24 | t.variableDeclarator(
25 | t.identifier(NAME),
26 | t.objectExpression(metaProperties)
27 | ),
28 | ])
29 | );
30 | },
31 | },
32 | };
33 | }
34 |
35 | module.exports = function preset() {
36 | return {
37 | plugins: [plugin],
38 | };
39 | };
40 |
--------------------------------------------------------------------------------
/packages/remini-plugin/index.js:
--------------------------------------------------------------------------------
1 | function remini() {
2 | return {
3 | name: "remini",
4 | config() {
5 | return {
6 | esbuild: {
7 | jsxFactory: "c",
8 | jsxFragment: "Fragment",
9 | },
10 | };
11 | },
12 | };
13 | }
14 |
15 | module.exports = remini;
16 |
--------------------------------------------------------------------------------
/packages/remini/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: {
3 | browser: true,
4 | es2021: true,
5 | node: true,
6 | },
7 | extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
8 | parser: "@typescript-eslint/parser",
9 | parserOptions: {
10 | sourceType: "module",
11 | },
12 | plugins: ["@typescript-eslint"],
13 | rules: {
14 | "@typescript-eslint/no-empty-function": "off",
15 | },
16 | };
17 |
--------------------------------------------------------------------------------
/packages/remini/babel.config.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | const importMetaPreset = require("../import-meta-preset");
3 |
4 | module.exports = {
5 | presets: [
6 | importMetaPreset,
7 | ["@babel/preset-env", { targets: { node: "current" } }],
8 | "@babel/preset-typescript",
9 | ],
10 | };
11 |
--------------------------------------------------------------------------------
/packages/remini/dom.ts:
--------------------------------------------------------------------------------
1 | import { HostElement, HostNode, NodeType, RNode, TextNode } from "./types";
2 | import {
3 | eventToKeyword,
4 | isEvent,
5 | keyToAttribute,
6 | styleObjectToString,
7 | findClosestComponent,
8 | findClosestHostNode,
9 | } from "./utils";
10 |
11 | function createElement(type: string): Element {
12 | if (
13 | type === "svg" ||
14 | type === "circle" ||
15 | type === "path" ||
16 | type === "rect" ||
17 | type === "foreignObject" ||
18 | type === "g"
19 | ) {
20 | return document.createElementNS("http://www.w3.org/2000/svg", type);
21 | } else {
22 | return document.createElement(type);
23 | }
24 | }
25 |
26 | export function createDom(element: HostElement): Element {
27 | const html = createElement(element.tag);
28 |
29 | const props = Object.entries(element.props);
30 | for (let i = 0; i < props.length; i++) {
31 | const [key, value] = props[i];
32 | if (key === "children" || key === "ref") {
33 | // Skip.
34 | } else if (key === "style") {
35 | const style =
36 | typeof value === "string" ? value : styleObjectToString(value);
37 | html.setAttribute(key, style);
38 | } else if (isEvent(key)) {
39 | html.addEventListener(eventToKeyword(key), value);
40 | } else {
41 | html.setAttribute(keyToAttribute(key), value);
42 | }
43 | }
44 |
45 | return html;
46 | }
47 |
48 | // Update two DOM nodes of the same HTML tag.
49 | export function updateDom(current: HostNode, expected: HostElement): void {
50 | const html = current.native as HTMLElement;
51 |
52 | const currentKeys = Object.keys(current.props);
53 | for (let i = 0; i < currentKeys.length; i++) {
54 | const key = currentKeys[i];
55 | if (key === "children" || key === "ref") {
56 | // Skip.
57 | } else if (isEvent(key)) {
58 | html.removeEventListener(eventToKeyword(key), current.props[key]);
59 | } else {
60 | // Prop will be removed.
61 | if (!expected.props[key]) {
62 | html.removeAttribute(key);
63 | }
64 | }
65 | }
66 |
67 | const expectedKeys = Object.keys(expected.props);
68 | for (let i = 0; i < expectedKeys.length; i++) {
69 | const key = expectedKeys[i];
70 | if (key === "children" || key === "ref") {
71 | // Skip.
72 | } else if (isEvent(key)) {
73 | html.addEventListener(eventToKeyword(key), expected.props[key]);
74 | } else {
75 | // Prop will be added/updated.
76 | if (expected.props[key] !== current.props[key]) {
77 | if (key === "style") {
78 | const style =
79 | typeof expected.props[key] === "string"
80 | ? expected.props[key]
81 | : styleObjectToString(expected.props[key]);
82 | html.setAttribute(key, style);
83 | } else {
84 | html.setAttribute(keyToAttribute(key), expected.props[key] as string);
85 | }
86 | }
87 | }
88 | }
89 | }
90 |
91 | export function removeDom(node: RNode): void {
92 | if (node.kind === NodeType.HOST || node.kind === NodeType.TEXT) {
93 | node.native.parentNode?.removeChild(node.native);
94 | } else {
95 | for (let i = 0; i < node.descendants.length; i++) {
96 | removeDom(node.descendants[i]);
97 | }
98 | }
99 | }
100 |
101 | export function appendChild(parent: Node, child: Node): void {
102 | parent.appendChild(child);
103 | }
104 |
105 | export function createTextNode(text: string): Text {
106 | return document.createTextNode(text);
107 | }
108 |
109 | export function updateTextNode(current: TextNode, text: string): void {
110 | current.native.nodeValue = text;
111 | }
112 |
113 | export const host = {
114 | findClosestComponent,
115 | findClosestHostNode,
116 | createHostNode: createDom,
117 | updateHostNode: updateDom,
118 | removeHostNode: removeDom,
119 | appendChild,
120 | createTextNode,
121 | updateTextNode,
122 | };
123 |
--------------------------------------------------------------------------------
/packages/remini/env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/packages/remini/index.test.ts:
--------------------------------------------------------------------------------
1 | import {
2 | createContext,
3 | createElement as c,
4 | hydrate,
5 | render,
6 | renderToString,
7 | useContext,
8 | useEffect,
9 | useMemo,
10 | useRef,
11 | useState,
12 | } from "./lib";
13 | import { NodeType, RElement } from "./types";
14 |
15 | jest.useFakeTimers();
16 |
17 | beforeEach(() => {
18 | document.body.innerHTML = "";
19 | });
20 |
21 | describe("createElement", () => {
22 | it("works for simple HTML", () => {
23 | const result = c("button", {}, c("strong", {}, "Hello world"));
24 |
25 | const expected: RElement = {
26 | tag: "button",
27 | kind: NodeType.HOST,
28 | props: {
29 | children: [
30 | {
31 | kind: NodeType.HOST,
32 | tag: "strong",
33 | props: {
34 | children: [
35 | {
36 | kind: NodeType.TEXT,
37 | content: "Hello world",
38 | },
39 | ],
40 | },
41 | },
42 | ],
43 | },
44 | };
45 |
46 | expect(result).toStrictEqual(expected);
47 | });
48 |
49 | it("works with props", () => {
50 | const tree = c("a", { href: "https://google.com" }, "Google");
51 |
52 | const expected: RElement = {
53 | kind: NodeType.HOST,
54 | tag: "a",
55 | props: {
56 | href: "https://google.com",
57 | children: [
58 | {
59 | kind: NodeType.TEXT,
60 | content: "Google",
61 | },
62 | ],
63 | },
64 | };
65 |
66 | expect(tree).toStrictEqual(expected);
67 | });
68 |
69 | it("works with components", () => {
70 | const Title = ({ children }: { children: string }) => {
71 | return c("h1", {}, children);
72 | };
73 |
74 | const result = c(
75 | "div",
76 | {},
77 | c(Title, {}, "Hello world"),
78 | c("span", {}, "Text")
79 | );
80 |
81 | const expected: RElement = {
82 | kind: NodeType.HOST,
83 | tag: "div",
84 | props: {
85 | children: [
86 | {
87 | kind: NodeType.COMPONENT,
88 | render: Title,
89 | props: {
90 | children: [
91 | {
92 | kind: NodeType.TEXT,
93 | content: "Hello world",
94 | },
95 | ],
96 | },
97 | },
98 | {
99 | kind: NodeType.HOST,
100 | tag: "span",
101 | props: {
102 | children: [
103 | {
104 | kind: NodeType.TEXT,
105 | content: "Text",
106 | },
107 | ],
108 | },
109 | },
110 | ],
111 | },
112 | };
113 |
114 | expect(result).toStrictEqual(expected);
115 | });
116 |
117 | it("works with multiple children", () => {
118 | const Title = ({ children }: { children: string }) => {
119 | return c("h1", {}, children);
120 | };
121 |
122 | const result = c("div", {}, [
123 | c(Title, {}, "Hello world"),
124 | c("span", {}, "Text"),
125 | ]);
126 |
127 | const expected: RElement = {
128 | kind: NodeType.HOST,
129 | tag: "div",
130 | props: {
131 | children: [
132 | {
133 | kind: NodeType.COMPONENT,
134 | render: Title,
135 | props: {
136 | children: [
137 | {
138 | kind: NodeType.TEXT,
139 | content: "Hello world",
140 | },
141 | ],
142 | },
143 | },
144 | {
145 | kind: NodeType.HOST,
146 | tag: "span",
147 | props: {
148 | children: [
149 | {
150 | kind: NodeType.TEXT,
151 | content: "Text",
152 | },
153 | ],
154 | },
155 | },
156 | ],
157 | },
158 | };
159 |
160 | expect(result).toStrictEqual(expected);
161 | });
162 |
163 | it("works with text node as a sibling of host node", () => {
164 | // Contact: mail
165 | const result = c("div", {}, "Contact: ", c("span", {}, "mail"));
166 | const expected: RElement = {
167 | kind: NodeType.HOST,
168 | tag: "div",
169 | props: {
170 | children: [
171 | {
172 | kind: NodeType.TEXT,
173 | content: "Contact: ",
174 | },
175 | {
176 | kind: NodeType.HOST,
177 | tag: "span",
178 | props: {
179 | children: [
180 | {
181 | kind: NodeType.TEXT,
182 | content: "mail",
183 | },
184 | ],
185 | },
186 | },
187 | ],
188 | },
189 | };
190 | expect(result).toStrictEqual(expected);
191 | });
192 |
193 | it("works for array of items", () => {
194 | // {items.map(item => {item})
195 | const items = ["orange", "apple"];
196 | const result = c(
197 | "div",
198 | {},
199 | items.map((item) => c("span", {}, item))
200 | );
201 | const expected: RElement = {
202 | kind: NodeType.HOST,
203 | tag: "div",
204 | props: {
205 | children: [
206 | {
207 | kind: NodeType.HOST,
208 | tag: "span",
209 | props: {
210 | children: [
211 | {
212 | kind: NodeType.TEXT,
213 | content: "orange",
214 | },
215 | ],
216 | },
217 | },
218 | {
219 | kind: NodeType.HOST,
220 | tag: "span",
221 | props: {
222 | children: [
223 | {
224 | kind: NodeType.TEXT,
225 | content: "apple",
226 | },
227 | ],
228 | },
229 | },
230 | ],
231 | },
232 | };
233 | expect(result).toStrictEqual(expected);
234 | });
235 |
236 | it("works with empty children", () => {
237 | const result = c("input", {});
238 | const expected: RElement = {
239 | kind: NodeType.HOST,
240 | tag: "input",
241 | props: {
242 | children: [],
243 | },
244 | };
245 | expect(result).toStrictEqual(expected);
246 | });
247 |
248 | it("works with fragments", () => {
249 | const root = document.createElement("div");
250 | document.body.appendChild(root);
251 |
252 | // // <>a
b
253 | const tree = c("", {}, c("div", {}, "a"), c("div", {}, "b"));
254 |
255 | render(tree, root);
256 |
257 | expect(document.body.innerHTML).toBe("");
258 | });
259 | });
260 |
261 | describe("render", () => {
262 | it("works", () => {
263 | const root = document.createElement("div");
264 | document.body.appendChild(root);
265 |
266 | const Counter = ({ children }: { children: string }) => {
267 | return c(
268 | "div",
269 | {},
270 | c("span", {}, children),
271 | c("span", { style: "color: #ff0000" }, "0")
272 | );
273 | };
274 |
275 | const tree = c("div", {}, c(Counter, {}, "Counter: "), c("h1", {}, "Test"));
276 |
277 | render(tree, root);
278 |
279 | expect(document.body.innerHTML).toBe(
280 | ''
281 | );
282 | });
283 |
284 | it("works with state", () => {
285 | let update = () => {};
286 |
287 | const root = document.createElement("div");
288 | document.body.appendChild(root);
289 |
290 | const Counter = ({ children }: { children: string }) => {
291 | const [value, setValue] = useState(0);
292 |
293 | update = () => setValue(value + 1);
294 |
295 | return c("div", {}, c("span", {}, children), c("span", {}, `${value}`));
296 | };
297 |
298 | const tree = c("div", {}, c(Counter, {}, "Counter: "), c("h1", {}, "Test"));
299 |
300 | render(tree, root);
301 |
302 | expect(document.body.innerHTML).toBe(
303 | ""
304 | );
305 |
306 | update();
307 |
308 | expect(document.body.innerHTML).toBe(
309 | ""
310 | );
311 | });
312 |
313 | it("works with replacing nodes", () => {
314 | let update = () => {};
315 |
316 | const root = document.createElement("div");
317 | document.body.appendChild(root);
318 |
319 | const Alter = () => {
320 | const [show, setShow] = useState(false);
321 |
322 | update = () => {
323 | setShow(!show);
324 | };
325 |
326 | return c(
327 | "div",
328 | {},
329 | show ? c("span", {}, "Show") : null,
330 | c("div", {}, "This is always here")
331 | );
332 | };
333 |
334 | const tree = c(Alter);
335 |
336 | render(tree, root);
337 | expect(document.body.innerHTML).toBe(
338 | ""
339 | );
340 |
341 | update();
342 | expect(document.body.innerHTML).toBe(
343 | ""
344 | );
345 |
346 | update();
347 | expect(document.body.innerHTML).toBe(
348 | ""
349 | );
350 | });
351 | });
352 |
353 | describe("useState", () => {
354 | it("doesn't take immediate effect on state value", () => {
355 | const root = document.createElement("div");
356 | document.body.appendChild(root);
357 |
358 | let update = () => {};
359 | let nextValue;
360 |
361 | const App = () => {
362 | const [value, setValue] = useState(0);
363 |
364 | update = () => {
365 | setValue(value + 1);
366 | nextValue = value;
367 | };
368 |
369 | return c("span", {}, `${value}`);
370 | };
371 |
372 | render(c(App), root);
373 |
374 | expect(document.body.innerHTML).toBe("0
");
375 |
376 | update();
377 |
378 | expect(nextValue).toBe(0);
379 | expect(document.body.innerHTML).toBe("1
");
380 | });
381 |
382 | it("can be called more than once", () => {
383 | const root = document.createElement("div");
384 | document.body.appendChild(root);
385 |
386 | let updateA = () => {};
387 | let updateB = () => {};
388 |
389 | const App = () => {
390 | const [a, setA] = useState("a");
391 | const [b, setB] = useState(0);
392 |
393 | updateA = () => {
394 | setA("b");
395 | };
396 |
397 | updateB = () => {
398 | setB(1);
399 | };
400 |
401 | return c("div", {}, c("span", {}, a), c("span", {}, b.toString()));
402 | };
403 |
404 | render(c(App), root);
405 |
406 | expect(document.body.innerHTML).toBe(
407 | ""
408 | );
409 |
410 | updateA();
411 |
412 | expect(document.body.innerHTML).toBe(
413 | ""
414 | );
415 |
416 | updateB();
417 |
418 | expect(document.body.innerHTML).toBe(
419 | ""
420 | );
421 | });
422 |
423 | it("provides updater form", () => {
424 | const root = document.createElement("div");
425 | document.body.appendChild(root);
426 |
427 | const Counter = () => {
428 | const [count, setCount] = useState(0);
429 |
430 | useEffect(() => {
431 | const id = setInterval(() => {
432 | setCount((c) => c + 1);
433 | }, 1000);
434 | return () => clearInterval(id);
435 | }, []);
436 |
437 | return c("div", {}, `${count}`);
438 | };
439 |
440 | render(c(Counter), root);
441 | expect(document.body.innerHTML).toBe("");
442 |
443 | jest.runOnlyPendingTimers();
444 | expect(document.body.innerHTML).toBe("");
445 |
446 | jest.runOnlyPendingTimers();
447 | expect(document.body.innerHTML).toBe("");
448 | });
449 |
450 | it("does not work outside component", () => {
451 | expect(() => {
452 | const [state, setState] = useState(0);
453 | }).toThrowError("Executing useState for non-function element.");
454 | });
455 | });
456 |
457 | describe("useEffect", () => {
458 | it("works with empty deps array", () => {
459 | let update = () => {};
460 | const mock = jest.fn();
461 |
462 | const root = document.createElement("div");
463 | document.body.appendChild(root);
464 |
465 | const App = () => {
466 | const [, setData] = useState("");
467 |
468 | update = () => setData("123");
469 |
470 | useEffect(() => {
471 | mock();
472 | }, []);
473 |
474 | return c("span", {}, "Hello");
475 | };
476 |
477 | const tree = c(App);
478 |
479 | render(tree, root);
480 |
481 | update();
482 |
483 | expect(mock).toHaveBeenCalledTimes(1);
484 | });
485 |
486 | it("works with no deps array", () => {
487 | let update = () => {};
488 | const mock = jest.fn();
489 |
490 | const root = document.createElement("div");
491 | document.body.appendChild(root);
492 |
493 | const App = () => {
494 | const [, setData] = useState("");
495 |
496 | update = () => setData("123");
497 |
498 | useEffect(() => {
499 | mock();
500 | });
501 |
502 | return c("span", {}, "Hello");
503 | };
504 |
505 | const tree = c(App);
506 |
507 | render(tree, root);
508 |
509 | update();
510 |
511 | expect(mock).toHaveBeenCalledTimes(2);
512 | });
513 |
514 | it("works with deps array", () => {
515 | const root = document.createElement("div");
516 | document.body.appendChild(root);
517 |
518 | const Profile = ({ username }: { username: string }) => {
519 | const [user, setUser] = useState<{ username: string } | null>(null);
520 |
521 | useEffect(() => {
522 | setUser({ username });
523 | }, [username]);
524 |
525 | return c("div", {}, c("span", {}, user ? user.username : "Anonymous"));
526 | };
527 |
528 | const tree = c(Profile, { username: "John" });
529 |
530 | render(tree, root);
531 |
532 | expect(document.body.innerHTML).toBe(
533 | ""
534 | );
535 | });
536 |
537 | xit("works with comparing deps array", () => {
538 | // TODO
539 | // trigger a change and make sure it doesn't trigger useEffect if should not be changed.
540 | });
541 |
542 | it("works with callback", () => {
543 | const root = document.createElement("div");
544 | document.body.appendChild(root);
545 |
546 | const mock = jest.fn();
547 |
548 | const Goodbye = () => {
549 | useEffect(() => {
550 | return () => mock();
551 | }, []);
552 |
553 | return c("span", {}, "Hello");
554 | };
555 |
556 | const App = () => {
557 | const [show, setShow] = useState(true);
558 | useEffect(() => {
559 | setShow(false);
560 | }, []);
561 |
562 | return c("div", {}, show ? c(Goodbye) : null);
563 | };
564 |
565 | render(c(App), root);
566 |
567 | expect(mock).toHaveBeenCalledTimes(1);
568 | expect(document.body.innerHTML).toBe("");
569 | });
570 |
571 | xit("works with calling callback in a deeply nested component", () => {
572 | // TODO
573 | });
574 |
575 | it("works with two different effects in a component", () => {
576 | const root = document.createElement("div");
577 | document.body.appendChild(root);
578 |
579 | const Advanced = ({ enforceCount }: { enforceCount: number }) => {
580 | const [count, setCount] = useState(0);
581 | useEffect(() => {
582 | setCount(10);
583 | }, []);
584 |
585 | useEffect(() => {
586 | setCount(enforceCount);
587 | }, [enforceCount]);
588 |
589 | return c("div", {}, `${count}`);
590 | };
591 |
592 | const App = () => {
593 | const [enforceCount, setCount] = useState(5);
594 | useEffect(() => {
595 | setTimeout(() => {
596 | setCount(7);
597 | }, 1000);
598 | }, []);
599 |
600 | return c("div", {}, c(Advanced, { enforceCount }));
601 | };
602 |
603 | const tree = c(App);
604 | render(tree, root);
605 |
606 | expect(document.body.innerHTML).toBe("");
607 |
608 | jest.runOnlyPendingTimers();
609 | expect(document.body.innerHTML).toBe("");
610 | });
611 |
612 | it("does not work outside component", () => {
613 | expect(() => {
614 | useEffect(() => {}, []);
615 | }).toThrowError("Executing useEffect for non-function element.");
616 | });
617 | });
618 |
619 | describe("useRef", () => {
620 | it("works", () => {
621 | const root = document.createElement("div");
622 | document.body.appendChild(root);
623 |
624 | let availableInEffect: any = null;
625 |
626 | const App = () => {
627 | const ref = useRef();
628 |
629 | useEffect(() => {
630 | availableInEffect = ref.current;
631 | }, []);
632 |
633 | return c("div", {}, c("span", { ref }, "test"));
634 | };
635 |
636 | const tree = c(App);
637 | render(tree, root);
638 |
639 | expect(availableInEffect).not.toBeNull();
640 | expect(availableInEffect.tagName).toBe("SPAN");
641 | });
642 |
643 | it("works with two refs in one component", () => {
644 | const root = document.createElement("div");
645 | document.body.appendChild(root);
646 |
647 | let availableInEffect1: any = null;
648 | let availableInEffect2: any = null;
649 |
650 | const App = () => {
651 | const ref1 = useRef();
652 | const ref2 = useRef();
653 |
654 | useEffect(() => {
655 | availableInEffect1 = ref1.current;
656 | availableInEffect2 = ref2.current;
657 | }, []);
658 |
659 | return c(
660 | "div",
661 | {},
662 | c("span", { ref: ref1 }, "test"),
663 | c("button", { ref: ref2 }, "test")
664 | );
665 | };
666 |
667 | const tree = c(App);
668 | render(tree, root);
669 |
670 | expect(availableInEffect1).not.toBeNull();
671 | expect(availableInEffect1.tagName).toBe("SPAN");
672 |
673 | expect(availableInEffect2).not.toBeNull();
674 | expect(availableInEffect2.tagName).toBe("BUTTON");
675 | });
676 | });
677 |
678 | describe("useMemo", () => {
679 | it("works", () => {
680 | const root = document.createElement("div");
681 | document.body.appendChild(root);
682 | const mock = jest.fn();
683 |
684 | const App = () => {
685 | const _ = useMemo(mock, []);
686 | const [, setState] = useState(0);
687 |
688 | useEffect(() => {
689 | setTimeout(() => setState(1), 1000);
690 | }, []);
691 |
692 | return c("div", {}, "Test");
693 | };
694 |
695 | const tree = c(App);
696 | render(tree, root);
697 |
698 | expect(mock).toHaveBeenCalledTimes(1);
699 |
700 | jest.runOnlyPendingTimers();
701 |
702 | expect(mock).toHaveBeenCalledTimes(1);
703 | });
704 |
705 | it("works with deps", () => {
706 | const root = document.createElement("div");
707 | document.body.appendChild(root);
708 | const mock = jest.fn();
709 |
710 | const User = ({ username }: { username: string }) => {
711 | const uppercase = useMemo(() => {
712 | mock();
713 | return username.toUpperCase();
714 | }, [username]);
715 |
716 | return c("span", {}, uppercase);
717 | };
718 |
719 | const App = () => {
720 | const [username, setUsername] = useState("Alice");
721 | const [, setCounter] = useState(0);
722 |
723 | useEffect(() => {
724 | setTimeout(() => {
725 | setCounter(1);
726 | }, 500);
727 |
728 | setTimeout(() => {
729 | setUsername("Bob");
730 | }, 1000);
731 | }, []);
732 |
733 | return c(User, { username });
734 | };
735 |
736 | const tree = c(App);
737 | render(tree, root);
738 |
739 | expect(mock).toHaveBeenCalledTimes(1);
740 |
741 | jest.advanceTimersByTime(501);
742 | expect(mock).toHaveBeenCalledTimes(1);
743 |
744 | jest.advanceTimersByTime(501);
745 | expect(mock).toHaveBeenCalledTimes(2);
746 | });
747 | });
748 |
749 | describe("Context API", () => {
750 | it("works", () => {
751 | const root = document.createElement("div");
752 | document.body.appendChild(root);
753 |
754 | type Session = { username: string } | null;
755 | const SessionContext = createContext();
756 |
757 | const User = () => {
758 | const session = useContext(SessionContext);
759 |
760 | return c("div", {}, session ? session.username : "Anonymous");
761 | };
762 |
763 | const Sidebar = () => {
764 | return c(User);
765 | };
766 |
767 | const App = () => {
768 | const [session, setSession] = useState(null);
769 |
770 | useEffect(() => {
771 | setTimeout(() => {
772 | setSession({ username: "John" });
773 | }, 1000);
774 | }, []);
775 |
776 | return c(SessionContext.Provider, { value: session }, c(Sidebar));
777 | };
778 |
779 | const tree = c(App);
780 | render(tree, root);
781 |
782 | expect(document.body.innerHTML).toBe("");
783 |
784 | jest.runOnlyPendingTimers();
785 | expect(document.body.innerHTML).toBe("");
786 | });
787 |
788 | it("works with different contexts", () => {
789 | const root = document.createElement("div");
790 | document.body.appendChild(root);
791 |
792 | type Theme = "light" | "dark";
793 | const ThemeContext = createContext();
794 |
795 | type Session = { username: string } | null;
796 | const SessionContext = createContext();
797 |
798 | const User = () => {
799 | const theme = useContext(ThemeContext);
800 | const session = useContext(SessionContext);
801 |
802 | return c(
803 | "div",
804 | { style: { backgroundColor: theme === "light" ? "#fff" : "#000" } },
805 | session ? session.username : "Anonymous"
806 | );
807 | };
808 |
809 | const Sidebar = () => {
810 | return c(User);
811 | };
812 |
813 | const App = () => {
814 | const [session] = useState({ username: "Alice" });
815 |
816 | return c(
817 | ThemeContext.Provider,
818 | { value: "light" },
819 | c(SessionContext.Provider, { value: session }, c(Sidebar))
820 | );
821 | };
822 |
823 | const tree = c(App);
824 | render(tree, root);
825 |
826 | expect(document.body.innerHTML).toBe(
827 | ''
828 | );
829 | });
830 |
831 | it("works with nested providers with different values", () => {
832 | const root = document.createElement("div");
833 | document.body.appendChild(root);
834 |
835 | // P(1)
836 | // |
837 | // A
838 | // |\
839 | // B P(2)
840 | // |
841 | // B
842 | //
843 | // P(x) - provider with x as the value.
844 |
845 | const Context = createContext();
846 |
847 | const B = () => {
848 | const context = useContext(Context);
849 | return c("div", {}, `${context}`);
850 | };
851 |
852 | const A = () => {
853 | return c("div", {}, c(B), c(Context.Provider, { value: 2 }, c(B)));
854 | };
855 |
856 | const App = () => {
857 | return c("div", {}, c(Context.Provider, { value: 1 }, c(A)));
858 | };
859 |
860 | const tree = c(App);
861 | render(tree, root);
862 |
863 | expect(document.body.innerHTML).toBe(
864 | ""
865 | );
866 | });
867 | });
868 |
869 | describe("DOM", () => {
870 | it("works with basic elements", () => {
871 | const root = document.createElement("div");
872 | document.body.appendChild(root);
873 |
874 | const tree = c(
875 | "div",
876 | { id: "root" },
877 | c("a", { href: "https://google.com" }, "Google")
878 | );
879 |
880 | render(tree, root);
881 |
882 | expect(document.body.innerHTML).toBe(
883 | ''
884 | );
885 | });
886 |
887 | it("works with components", () => {
888 | const root = document.createElement("div");
889 | document.body.appendChild(root);
890 |
891 | const Title = ({ children }: { children: string }) => {
892 | return c("h1", {}, children);
893 | };
894 |
895 | const tree = c(
896 | "div",
897 | {},
898 | c(Title, {}, "Hello world"),
899 | c("span", {}, "Text")
900 | );
901 |
902 | render(tree, root);
903 |
904 | expect(document.body.innerHTML).toBe(
905 | ""
906 | );
907 | });
908 |
909 | it("works with event listeners", () => {
910 | const root = document.createElement("div");
911 | document.body.appendChild(root);
912 |
913 | const onClick = jest.fn();
914 |
915 | const Click = () => {
916 | return c("button", { id: "button", onClick }, "Click");
917 | };
918 |
919 | const tree = c(Click);
920 |
921 | render(tree, root);
922 |
923 | const button = document.getElementById("button");
924 |
925 | if (button === null) {
926 | throw new Error("Unexpected null.");
927 | }
928 |
929 | button.click();
930 |
931 | expect(onClick).toHaveBeenCalled();
932 | });
933 |
934 | it("works with updates", () => {
935 | const root = document.createElement("div");
936 | document.body.appendChild(root);
937 |
938 | const Counter = () => {
939 | const [value, setValue] = useState(0);
940 |
941 | const onClick = () => {
942 | setValue(value + 1);
943 | };
944 |
945 | return c(
946 | "div",
947 | {},
948 | c("span", { id: "value" }, `${value}`),
949 | c("button", { id: "button", onClick }, "Click")
950 | );
951 | };
952 |
953 | const tree = c(Counter);
954 |
955 | render(tree, root);
956 |
957 | const value = document.getElementById("value");
958 | const button = document.getElementById("button");
959 |
960 | if (value == null || button === null) {
961 | throw new Error("Unexpected null.");
962 | }
963 |
964 | expect(value.innerHTML).toBe("0");
965 |
966 | button.click();
967 |
968 | expect(value.innerHTML).toBe("1");
969 | });
970 |
971 | it("works with replacing list of nodes with another list", () => {
972 | const root = document.createElement("div");
973 | document.body.appendChild(root);
974 |
975 | const PlaceholderPost = ({ number }: { number: number }) =>
976 | c("div", {}, `placeholder-${number}`);
977 |
978 | type User = {
979 | name: string;
980 | };
981 |
982 | const Post = ({ name }: User) => c("div", {}, `u-${name}`);
983 |
984 | const App = () => {
985 | const [loading, setLoading] = useState(true);
986 | const [data, setData] = useState([]);
987 |
988 | useEffect(() => {
989 | setTimeout(() => {
990 | setData([{ name: "Alice" }, { name: "Bob" }]);
991 | setLoading(false);
992 | }, 500);
993 | }, []);
994 |
995 | return c(
996 | "div",
997 | {},
998 | loading
999 | ? c(
1000 | "div",
1001 | {},
1002 | c(PlaceholderPost, { number: 1 }),
1003 | c(PlaceholderPost, { number: 2 }),
1004 | c(PlaceholderPost, { number: 3 })
1005 | )
1006 | : c(
1007 | "div",
1008 | {},
1009 | data.map((post) => c(Post, post))
1010 | )
1011 | );
1012 | };
1013 |
1014 | const tree = c(App);
1015 | render(tree, root);
1016 |
1017 | expect(document.body.innerHTML).toBe(
1018 | "placeholder-1
placeholder-2
placeholder-3