mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2025-04-06 21:40:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

impl basic state management with zustand

Browse Source
This commit is contained in:
Yanzhen Yu 2021-07-05 16:57:45 +08:00
parent 8b78fc91cd
commit 954fbc06e0
15 changed files with 212 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/core/__tests__/application.spec.ts
View File

@ -14,14 +14,14 @@ describe("application", () => {
components: [
{
id: "input1",
type: "core/v1/test-component",
type: "core/v1/test_component",
properties: {
x: "foo",
},
traits: [
{
type: "core/v1/test-trait",
type: "core/v1/test_trait",
properties: {
width: 2,
},
@ -47,7 +47,7 @@ describe("application", () => {
Object {
"id": "input1",
"parsedType": Object {
"name": "test-component",
"name": "test_component",
"version": "core/v1",
},
"properties": Object {
@ -58,10 +58,10 @@ describe("application", () => {
"properties": Object {
"width": 2,
},
"type": "core/v1/test-trait",
"type": "core/v1/test_trait",
},
],
"type": "core/v1/test-component",
"type": "core/v1/test_component",
},
],
},

5
packages/core/__tests__/component.spec.ts
View File

@ -6,8 +6,9 @@ describe("component", () => {
createComponent({
version: "core/v1",
metadata: {
name: "test-component",
name: "test_component",
},
spec: {
properties: [
{
@ -44,7 +45,7 @@ describe("component", () => {
Object {
"kind": "Component",
"metadata": Object {
"name": "test-component",
"name": "test_component",
},
"parsedVersion": Object {
"category": "core",

4
packages/core/__tests__/scope.spec.ts
View File

@ -6,14 +6,14 @@ describe("scope", () => {
createScope({
version: "core/v1",
metadata: {
name: "test-scope",
name: "test_scope",
},
})
).toMatchInlineSnapshot(`
Object {
"kind": "Scope",
"metadata": Object {
"name": "test-scope",
"name": "test_scope",
},
"parsedVersion": Object {
"category": "core",

4
packages/core/__tests__/trait.spec.ts
View File

@ -6,7 +6,7 @@ describe("trait", () => {
createTrait({
version: "core/v1",
metadata: {
name: "test-trait",
name: "test_trait",
},
spec: {
@ -29,7 +29,7 @@ describe("trait", () => {
Object {
"kind": "Trait",
"metadata": Object {
"name": "test-trait",
"name": "test_trait",
},
"parsedVersion": Object {
"category": "core",

2
packages/core/src/application.ts
View File

@ -48,7 +48,7 @@ export type RuntimeApplication = Omit<Application, "spec"> & {
type A = RuntimeApplication["spec"]["components"];
const TYPE_REG = /^([a-zA-Z-_\d]+\/[a-zA-Z-_\d]+)\/([a-zA-Z-_\d]+)$/;
const TYPE_REG = /^([a-zA-Z0-9_\d]+\/[a-zA-Z0-9_\d]+)\/([a-zA-Z0-9_\d]+)$/;
function isValidType(v: string): boolean {
return TYPE_REG.test(v);
}

2
packages/core/src/version.ts
View File

@ -1,4 +1,4 @@
const VERSION_REG = /^([a-zA-Z-_\d]+)\/([a-zA-Z-_\d]+)$/;
const VERSION_REG = /^([a-zA-Z0-9_\d]+)\/([a-zA-Z0-9_\d]+)$/;
export function isValidVersion(v: string): boolean {
return VERSION_REG.test(v);

15
packages/runtime/example/delete-button/index.html
View File

@ -18,11 +18,22 @@
spec: {
components: [
{
id: "del-btn",
id: "del_btn",
type: "plain/v1/button",
properties: {
text: {
raw: `*Markdown Button*`,
raw: `{{ del_btn.count < 3 ? '*Markdown Button*' : "**I'm** Done!" }}`,
format: "md",
},
},
traits: [],
},
{
id: "debug_text",
type: "core/v1/text",
properties: {
value: {
raw: `{{ del_btn.value + '---' + del_btn.count }}`,
format: "md",
},
},

5
packages/runtime/package.json
View File

@ -6,11 +6,14 @@
},
"dependencies": {
"@meta-ui/core": "^0.1.0",
"lodash": "^4.17.21",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"react-markdown": "^6.0.2"
"react-markdown": "^6.0.2",
"zustand": "^3.5.5"
},
"devDependencies": {
"@types/lodash": "^4.14.170",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@vitejs/plugin-react-refresh": "^1.3.1",

38
packages/runtime/src/App.tsx
View File

@ -1,19 +1,43 @@
import React from "react";
import { Application, createApplication } from "@meta-ui/core";
import {
Application,
createApplication,
RuntimeApplication,
} from "@meta-ui/core";
import { registry } from "./registry";
import { setStore, useStore } from "./store";
const ImplWrapper: React.FC<{
component: RuntimeApplication["spec"]["components"][0];
}> = ({ component: c }) => {
const Impl = registry.getComponent(
c.parsedType.version,
c.parsedType.name
).impl;
return (
<Impl
key={c.id}
{...c.properties}
mergeState={(partial: any) => setStore({ [c.id]: partial })}
/>
);
};
const DebugStore: React.FC = () => {
const store = useStore();
return <pre>{JSON.stringify(store, null, 2)}</pre>;
};
const App: React.FC<{ options: Application }> = ({ options }) => {
const app = createApplication(options);
console.log(app);
return (
<div className="App">
<DebugStore />
{app.spec.components.map((c) => {
const Impl = registry.getComponent(
c.parsedType.version,
c.parsedType.name
).impl;
return <Impl key={c.id} {...c.properties} />;
return <ImplWrapper key={c.id} component={c} />;
})}
</div>
);

18
packages/runtime/src/components/_internal/Text.tsx Normal file
View File

@ -0,0 +1,18 @@
import React from "react";
import ReactMarkdown from "react-markdown";
export type TextProps = {
value: {
raw: string;
format: "plain" | "md";
};
};
const Text: React.FC<TextProps> = ({ value }) => {
if (value.format === "md") {
return <ReactMarkdown>{value.raw}</ReactMarkdown>;
}
return <>{value.raw}</>;
};
export default Text;

37
packages/runtime/src/components/core/Text.tsx
View File

@ -1,21 +1,19 @@
import React from "react";
import React, { useEffect } from "react";
import { createComponent } from "@meta-ui/core";
import ReactMarkdown from "react-markdown";
import { Implementation } from "../../registry";
import _Text, { TextProps } from "../_internal/Text";
import { useExpression } from "../../store";
export type TextProps = {
value?: {
raw: string;
format: "plain" | "md";
};
};
const Text: Implementation<TextProps> = ({ value, mergeState }) => {
const raw = useExpression(value.raw);
const Text: React.FC<TextProps> = ({
value = { raw: "**Hello World**", format: "md" },
}) => {
if (value.format === "md") {
return <ReactMarkdown>{value.raw}</ReactMarkdown>;
}
return <>{value.raw}</>;
useEffect(() => {
mergeState({ value: raw });
}, [raw]);
// console.log("render text");
return <_Text value={{ ...value, raw }} />;
};
export default {
@ -42,7 +40,14 @@ export default {
},
],
acceptTraits: [],
state: {},
state: {
type: "object",
properties: {
value: {
type: "string",
},
},
},
methods: [],
},
}),

30
packages/runtime/src/components/plain/Button.tsx
View File

@ -1,11 +1,22 @@
import React from "react";
import React, { useEffect, useState } from "react";
import { createComponent } from "@meta-ui/core";
import Text, { TextProps } from "../core/Text";
import Text, { TextProps } from "../_internal/Text";
import { Implementation } from "../../registry";
import { useExpression } from "../../store";
const Button: Implementation<{ text: TextProps["value"] }> = ({
text,
mergeState,
}) => {
const [count, add] = useState(0);
const raw = useExpression(text.raw);
useEffect(() => {
mergeState({ value: raw, count });
}, [raw, count]);
const Button: React.FC<{ text?: TextProps["value"] }> = ({ text }) => {
return (
<button>
<Text.impl value={text} />
<button onClick={() => add(count + 1)}>
<Text value={{ ...text, raw }} />
</button>
);
};
@ -34,7 +45,14 @@ export default {
},
],
acceptTraits: [],
state: {},
state: {
type: "object",
properties: {
value: {
type: "string",
},
},
},
methods: [],
},
}),

12
packages/runtime/src/registry.tsx
View File

@ -1,11 +1,20 @@
import React from "react";
import { RuntimeComponent } from "@meta-ui/core";
import { setStore } from "./store";
// components
import PlainButton from "./components/plain/Button";
import CoreText from "./components/core/Text";
type ImplementedRuntimeComponent = RuntimeComponent & {
impl: React.FC;
impl: Implementation;
};
export type Implementation<T = any> = React.FC<
T & {
mergeState: (partialState: Parameters<typeof setStore>[0]) => void;
}
>;
class Registry {
components: Map<string, Map<string, ImplementedRuntimeComponent>> = new Map();
@ -33,3 +42,4 @@ class Registry {
export const registry = new Registry();
registry.registerComponent(PlainButton);
registry.registerComponent(CoreText);

63
packages/runtime/src/store.ts Normal file
View File

@ -0,0 +1,63 @@
import { useMemo, useState } from "react";
import create from "zustand";
import _ from "lodash";
export const useStore = create<Record<string, any>>(() => ({}));
export const setStore = useStore.setState;
// TODO: use web worker
function evalInContext(expression: string, ctx: Record<string, any>) {
try {
Object.keys(ctx).forEach((key) => {
// @ts-ignore
self[key] = ctx[key];
});
return eval(expression);
} catch (error) {
// console.error(error);
return undefined;
} finally {
Object.keys(ctx).forEach((key) => {
// @ts-ignore
delete self[key];
});
}
}
export function useExpression(raw: string) {
const { dynamic, expression } = useMemo(() => {
if (!raw) {
return {
dynamic: false,
expression: raw,
};
}
const matchArr = raw.match(/{{(.+)}}/);
if (!matchArr) {
return {
dynamic: false,
expression: raw,
};
}
return {
dynamic: true,
expression: matchArr[1],
};
}, [raw]);
const [state, setState] = useState<any>(null);
useStore.subscribe(
(value) => {
setState(value);
},
(state) => {
if (!dynamic) {
return expression;
}
return evalInContext(expression, state);
}
);
return state;
}

16
yarn.lock
View File

@ -1496,6 +1496,11 @@
resolved "http://192.168.26.29:7001/@types/json-schema/download/@types/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
integrity sha1-mKmTUWyFnrDVxMjwmDF6nqaNua0=
"@types/lodash@^4.14.170":
version "4.14.170"
resolved "http://192.168.26.29:7001/@types/lodash/download/@types/lodash-4.14.170.tgz#0d67711d4bf7f4ca5147e9091b847479b87925d6"
integrity sha1-DWdxHUv39MpRR+kJG4R0ebh5JdY=
"@types/mdast@^3.0.0":
version "3.0.3"
resolved "http://192.168.26.29:7001/@types/mdast/download/@types/mdast-3.0.3.tgz#2d7d671b1cd1ea3deb306ea75036c2a0407d2deb"
@ -4671,10 +4676,10 @@ lodash.truncate@^4.4.2:
resolved "https://registry.yarnpkg.com/lodash.truncate/download/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
lodash@4.x, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.7.0:
lodash@4.x, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.7.0:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
resolved "http://192.168.26.29:7001/lodash/download/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=
log-symbols@^4.1.0:
version "4.1.0"
@ -7411,3 +7416,8 @@ yargs@^16.0.3, yargs@^16.2.0:
string-width "^4.2.0"
y18n "^5.0.5"
yargs-parser "^20.2.2"
zustand@^3.5.5:
version "3.5.5"
resolved "http://192.168.26.29:7001/zustand/download/zustand-3.5.5.tgz#628458ad70621ddc2a17dbee49be963e5c0dccb5"
integrity sha1-YoRYrXBiHdwqF9vuSb6WPlwNzLU=