From 7ef978a677b1059e82e34b2731072df0d8f861bf Mon Sep 17 00:00:00 2001 From: Bowen Tan Date: Thu, 4 Nov 2021 17:31:27 +0800 Subject: [PATCH] modify module spec --- packages/core/src/module.ts | 2 - packages/runtime/example/list/listModule.html | 174 +++++++++--------- packages/runtime/example/module/index.html | 128 ++++++------- packages/runtime/example/table/dynamic.html | 42 ++--- .../components/_internal/ModuleRenderer.tsx | 7 +- .../runtime/src/components/chakra-ui/List.tsx | 15 +- .../src/components/chakra-ui/Table/Table.tsx | 2 - .../components/chakra-ui/Table/TableTd.tsx | 5 +- .../src/components/core/ModuleContainer.tsx | 1 - packages/runtime/src/services/registry.tsx | 19 +- .../runtime/src/utils/parseTypeComponent.ts | 0 11 files changed, 194 insertions(+), 201 deletions(-) delete mode 100644 packages/runtime/src/utils/parseTypeComponent.ts diff --git a/packages/core/src/module.ts b/packages/core/src/module.ts index 125771b2..304b3bed 100644 --- a/packages/core/src/module.ts +++ b/packages/core/src/module.ts @@ -2,7 +2,6 @@ import { JSONSchema7Object } from 'json-schema'; import { parseVersion } from './version'; import { Metadata } from './metadata'; import { Version } from './version'; -import { ApplicationComponent } from './application'; // spec @@ -14,7 +13,6 @@ export type Module = { }; type ModuleSpec = { - components: ApplicationComponent[]; properties: JSONSchema7Object; events: string[]; stateMap: Record; diff --git a/packages/runtime/example/list/listModule.html b/packages/runtime/example/list/listModule.html index 7ce5e45e..9ddb54d5 100644 --- a/packages/runtime/example/list/listModule.html +++ b/packages/runtime/example/list/listModule.html @@ -20,97 +20,97 @@ name: 'littleItem', }, spec: { - components: [ - { - id: '{{$moduleId}}hstack', - type: 'chakra_ui/v1/hstack', - properties: {}, - traits: [], - }, - { - id: '{{$moduleId}}1', - type: 'core/v1/text', - properties: { - value: { - raw: '**{{value}}**', - format: 'md', - }, - }, - traits: [ - { - type: 'core/v1/slot', - properties: { - container: { - id: '{{$moduleId}}hstack', - slot: 'content', - }, - }, - }, - ], - }, - { - id: '{{$moduleId}}input', - type: 'chakra_ui/v1/input', - properties: {}, - traits: [ - { - type: 'core/v1/slot', - properties: { - container: { - id: '{{$moduleId}}hstack', - slot: 'content', - }, - }, - }, - ], - }, - { - id: '{{$moduleId}}button', - type: 'chakra_ui/v1/button', - properties: { - text: { - raw: 'click', - format: 'md', - }, - }, - traits: [ - { - type: 'core/v1/event', - properties: { - handlers: [ - { - type: 'onClick', - componentId: '$module', - method: { - name: 'onEdit', - parameters: { - moduleId: '{{$moduleId}}', - }, - }, - wait: {}, - disabled: false, - }, - ], - }, - }, - { - type: 'core/v1/slot', - properties: { - container: { - id: '{{$moduleId}}hstack', - slot: 'content', - }, - }, - }, - ], - }, - ], properties: {}, events: ['onEdit'], stateMap: { value: '{{$moduleId}}input.value', }, }, + components: [ + { + id: '{{$moduleId}}hstack', + type: 'chakra_ui/v1/hstack', + properties: {}, + traits: [], + }, + { + id: '{{$moduleId}}1', + type: 'core/v1/text', + properties: { + value: { + raw: '**{{value}}**', + format: 'md', + }, + }, + traits: [ + { + type: 'core/v1/slot', + properties: { + container: { + id: '{{$moduleId}}hstack', + slot: 'content', + }, + }, + }, + ], + }, + { + id: '{{$moduleId}}input', + type: 'chakra_ui/v1/input', + properties: {}, + traits: [ + { + type: 'core/v1/slot', + properties: { + container: { + id: '{{$moduleId}}hstack', + slot: 'content', + }, + }, + }, + ], + }, + { + id: '{{$moduleId}}button', + type: 'chakra_ui/v1/button', + properties: { + text: { + raw: 'click{{value}}', + format: 'md', + }, + }, + traits: [ + { + type: 'core/v1/event', + properties: { + handlers: [ + { + type: 'onClick', + componentId: '$module', + method: { + name: 'onEdit', + parameters: { + moduleId: '{{$moduleId}}', + }, + }, + wait: {}, + disabled: false, + }, + ], + }, + }, + { + type: 'core/v1/slot', + properties: { + container: { + id: '{{$moduleId}}hstack', + slot: 'content', + }, + }, + }, + ], + }, + ], }; registry.registerModule(exampleModule); @@ -177,9 +177,9 @@ properties: { listData: '{{ root.listData }}', template: { + id: 'littleItem{{$listItem.id}}', type: 'core/v1/littleItem', properties: { - $moduleId: '{{$listItem.id}}{{$i}}', value: '{{$listItem.name}}', }, handlers: [ @@ -188,7 +188,7 @@ componentId: '$utils', method: { name: 'alert', - parameters: '监听到模块事件了：{{ $listItem.name }}！', + parameters: 'listen module vent：{{ littleItem1.value }}！', }, wait: {}, disabled: false, diff --git a/packages/runtime/example/module/index.html b/packages/runtime/example/module/index.html index 581deee0..9a71703b 100644 --- a/packages/runtime/example/module/index.html +++ b/packages/runtime/example/module/index.html @@ -21,70 +21,6 @@ name: 'littleForm', }, spec: { - components: [ - { - id: '{{$moduleId}}__hstack', - type: 'chakra_ui/v1/hstack', - properties: {}, - traits: [], - }, - { - id: '{{$moduleId}}__input', - type: 'chakra_ui/v1/input', - properties: {}, - traits: [ - { - type: 'core/v1/slot', - properties: { - container: { - id: '{{$moduleId}}__hstack', - slot: 'content', - }, - }, - }, - ], - }, - { - id: '{{$moduleId}}__button', - type: 'chakra_ui/v1/button', - properties: { - text: { - raw: '{{littleFormModule__input.value}}', - format: 'md', - }, - }, - traits: [ - { - type: 'core/v1/event', - properties: { - handlers: [ - { - type: 'onClick', - componentId: '$module', - method: { - name: 'onSubmit', - parameters: { - moduleId: '{{$moduleId}}', - }, - }, - wait: {}, - disabled: false, - }, - ], - }, - }, - { - type: 'core/v1/slot', - properties: { - container: { - id: '{{$moduleId}}__hstack', - slot: 'content', - }, - }, - }, - ], - }, - ], properties: { btnText: Type.String(), }, @@ -93,6 +29,70 @@ value: '{{$moduleId}}__input.value', }, }, + components: [ + { + id: '{{$moduleId}}__hstack', + type: 'chakra_ui/v1/hstack', + properties: {}, + traits: [], + }, + { + id: '{{$moduleId}}__input', + type: 'chakra_ui/v1/input', + properties: {}, + traits: [ + { + type: 'core/v1/slot', + properties: { + container: { + id: '{{$moduleId}}__hstack', + slot: 'content', + }, + }, + }, + ], + }, + { + id: '{{$moduleId}}__button', + type: 'chakra_ui/v1/button', + properties: { + text: { + raw: '{{littleFormModule__input.value}}', + format: 'md', + }, + }, + traits: [ + { + type: 'core/v1/event', + properties: { + handlers: [ + { + type: 'onClick', + componentId: '$module', + method: { + name: 'onSubmit', + parameters: { + moduleId: '{{$moduleId}}', + }, + }, + wait: {}, + disabled: false, + }, + ], + }, + }, + { + type: 'core/v1/slot', + properties: { + container: { + id: '{{$moduleId}}__hstack', + slot: 'content', + }, + }, + }, + ], + }, + ], }; registry.registerModule(exampleModule); diff --git a/packages/runtime/example/table/dynamic.html b/packages/runtime/example/table/dynamic.html index f13f293e..922fe03d 100644 --- a/packages/runtime/example/table/dynamic.html +++ b/packages/runtime/example/table/dynamic.html @@ -27,29 +27,29 @@ }, events: [], stateMap: {}, - components: [ - // list item - { - id: '{{$moduleId}}name', - type: 'core/v1/text', - properties: { - value: { - raw: '{{ isActive ? "yes" : "no" }}', - format: 'plain', + }, + components: [ + // list item + { + id: '{{$moduleId}}name', + type: 'core/v1/text', + properties: { + value: { + raw: '{{ isActive ? "yes" : "no" }}', + format: 'plain', + }, + }, + traits: [ + { + type: 'core/v1/style', + properties: { + styleSlot: 'content', + style: 'color: {{isActive ? "green" : "red"}}', }, }, - traits: [ - { - type: 'core/v1/style', - properties: { - styleSlot: 'content', - style: 'color: {{isActive ? "green" : "red"}}', - }, - }, - ], - }, - ], - }, + ], + }, + ], }; registry.registerModule(tdModule); diff --git a/packages/runtime/src/components/_internal/ModuleRenderer.tsx b/packages/runtime/src/components/_internal/ModuleRenderer.tsx index e8b0a843..806dd225 100644 --- a/packages/runtime/src/components/_internal/ModuleRenderer.tsx +++ b/packages/runtime/src/components/_internal/ModuleRenderer.tsx @@ -50,12 +50,12 @@ export const ModuleRenderer: React.FC = props => { const moduleSpec = useMemo(() => services.registry.getModuleByType(type), [type]); const parsedtemplete = useMemo( - () => moduleSpec.spec.components.map(parseTypeComponents), + () => moduleSpec.components.map(parseTypeComponents), [moduleSpec] ); // then eval the template and stateMap of module - const evaledStateMap = useDeepCompareMemo(() => { + const evaledStateMap = useMemo(() => { // stateMap only use state i return evalWithScope(moduleSpec.spec.stateMap, { $moduleId: moduleId }); }, [moduleSpec, moduleId]); @@ -75,6 +75,9 @@ export const ModuleRenderer: React.FC = props => { const stops: ReturnType[] = []; + if (!services.stateManager.store[moduleId]) { + services.stateManager.store[moduleId] = {}; + } for (const stateKey in evaledStateMap) { // init state services.stateManager.store[moduleId][stateKey] = get( diff --git a/packages/runtime/src/components/chakra-ui/List.tsx b/packages/runtime/src/components/chakra-ui/List.tsx index 9afd9ad6..1349782f 100644 --- a/packages/runtime/src/components/chakra-ui/List.tsx +++ b/packages/runtime/src/components/chakra-ui/List.tsx @@ -1,4 +1,3 @@ -import { useRef } from 'react'; import { createComponent } from '@meta-ui/core'; import { Static, Type } from '@sinclair/typebox'; import { List as BaseList, ListItem as BaseListItem } from '@chakra-ui/react'; @@ -8,7 +7,6 @@ import { RuntimeModuleSchema } from '../../types/RuntimeSchema'; import { ModuleRenderer } from '../_internal/ModuleRenderer'; const List: ComponentImplementation> = ({ - component, listData, template, app, @@ -17,15 +15,8 @@ const List: ComponentImplementation> = ({ if (!listData) { return null; } - const itemElementMemo = useRef(new Map()); const listItems = listData.map((listItem, i) => { - // this memo only diff listItem, dosen't compare expressions - if (itemElementMemo.current.has(listItem.id)) { - if (itemElementMemo.current.get(listItem.id).value === listItem) { - return itemElementMemo.current.get(listItem.id).ele; - } - } const evalScope = { [LIST_ITEM_EXP]: listItem, [LIST_ITEM_INDEX_EXP]: i, @@ -33,7 +24,7 @@ const List: ComponentImplementation> = ({ const listItemEle = ( > = ({ ); - itemElementMemo.current.set(listItem.id, { - value: listItem, - ele: listItemEle, - }); return listItemEle; }); diff --git a/packages/runtime/src/components/chakra-ui/Table/Table.tsx b/packages/runtime/src/components/chakra-ui/Table/Table.tsx index 40d5e726..d09756ac 100644 --- a/packages/runtime/src/components/chakra-ui/Table/Table.tsx +++ b/packages/runtime/src/components/chakra-ui/Table/Table.tsx @@ -37,7 +37,6 @@ export const TableImpl: ComponentImplementation<{ columns: Static; isMultiSelect: Static; }> = ({ - component, data, majorKey, rowsPerPage, @@ -194,7 +193,6 @@ export const TableImpl: ComponentImplementation<{ {isMultiSelect ? checkbox : undefined} {columns.map(column => ( ; @@ -15,7 +14,7 @@ export const TableTd: React.FC<{ services: MetaUIServices; app?: RuntimeApplication; }> = props => { - const { tableId, item, index, column, onClickItem, services, app } = props; + const { item, index, column, onClickItem, services, app } = props; let value = item[column.key]; if (column.displayValue) { @@ -56,7 +55,7 @@ export const TableTd: React.FC<{ }; content = ( = ({ services, app, }) => { - console.log('render'); return ( > = new Map(); traits: Map> = new Map(); - modules: Map> = new Map(); + modules: Map> = new Map(); registerComponent(c: ImplementedRuntimeComponent) { if (this.components.get(c.version)?.has(c.metadata.name)) { @@ -122,7 +131,7 @@ export class Registry { return res; } - registerModule(c: RuntimeModuleSpec) { + registerModule(c: ImplementedRuntimeModule) { if (this.modules.get(c.version)?.has(c.metadata.name)) { throw new Error( `Already has module ${c.version}/${c.metadata.name} in this registry.` @@ -134,7 +143,7 @@ export class Registry { this.modules.get(c.version)?.set(c.metadata.name, c); } - getModule(version: string, name: string): RuntimeModuleSpec { + getModule(version: string, name: string): ImplementedRuntimeModule { const m = this.modules.get(version)?.get(name); if (!m) { throw new Error(`Module ${version}/${name} has not registered yet.`); @@ -142,7 +151,7 @@ export class Registry { return m; } - getModuleByType(type: string): RuntimeModuleSpec { + getModuleByType(type: string): ImplementedRuntimeModule { const { version, name } = parseType(type); return this.getModule(version, name); } diff --git a/packages/runtime/src/utils/parseTypeComponent.ts b/packages/runtime/src/utils/parseTypeComponent.ts deleted file mode 100644 index e69de29b..00000000