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

Merge pull request #143 from webzard-io/feat/editor-module

Browse Source 
Support edit module in editor
This commit is contained in:
yz-yu 2021-11-30 12:55:38 +08:00 committed by GitHub
commit 51c33c24fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
43 changed files with 795 additions and 885 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,85 +1,49 @@
import { Type } from '@sinclair/typebox';
import { createComponent } from '../src/component';
describe('component', () => {
it('can create runtime component', () => {
expect(
createComponent({
version: 'core/v1',
metadata: {
name: 'test_component',
},
spec: {
properties: [
{
name: 'x',
type: 'string',
},
],
acceptTraits: [
{
name: 't1',
},
],
state: {
type: 'string',
const c = createComponent({
version: 'core/v1',
metadata: {
isDraggable: true,
isResizable: true,
displayName: 'test_component',
name: 'test_component',
exampleProperties: {},
exampleSize: [1, 1],
},
spec: {
properties: Type.Object({
name: Type.String(),
type: Type.String(),
}),
state: Type.Object({
type: Type.String(),
}),
methods: [
{
name: 'reset',
},
methods: [
{
name: 'reset',
{
name: 'add',
parameters: {
type: 'number',
},
{
name: 'add',
parameters: {
type: 'number',
},
},
],
},
})
).toMatchInlineSnapshot(`
Object {
"kind": "Component",
"metadata": Object {
"name": "test_component",
},
"parsedVersion": Object {
"category": "core",
"value": "v1",
},
"spec": Object {
"acceptTraits": Array [
Object {
"name": "t1",
},
],
"methods": Array [
Object {
"name": "reset",
},
Object {
"name": "add",
"parameters": Object {
"type": "number",
},
},
],
"properties": Array [
Object {
"name": "x",
"type": "string",
},
],
"state": Object {
"type": "string",
},
},
"version": "core/v1",
}
`);
],
styleSlots: ['content'],
slots: [],
events: [],
},
});
expect(c).toMatchObject({
...c,
kind: 'Component',
parsedVersion: {
category: 'core',
value: 'v1',
},
});
});
});

51
packages/editor/__tests__/operation/adjustComponentOrder.spec.ts
View File

@ -1,6 +1,7 @@
import { Application } from '@sunmao-ui/core';
import { Application, ApplicationComponent } from '@sunmao-ui/core';
import { ApplicationFixture } from '../../__fixture__/application';
import { AdjustComponentOrderLeafOperation } from '../../src/operations/leaf/component/adjustComponentOrderLeafOperation';
describe('adjust component order operation', () => {
let app: Application;
let operation: AdjustComponentOrderLeafOperation;
@ -11,10 +12,10 @@ describe('adjust component order operation', () => {
});
describe('move up top level component', () => {
const stack: Application[] = [];
const stack: ApplicationComponent[][] = [];
beforeAll(() => {
app = ApplicationFixture['adjustOrderOperation'];
stack[0] = app;
stack[0] = app.spec.components;
operation = new AdjustComponentOrderLeafOperation({
componentId: 'grid_layout2',
orientation: 'up',
@ -22,15 +23,15 @@ describe('adjust component order operation', () => {
});
it('should do operation', () => {
stack[1] = operation.do(stack[0]);
expect(stack[1].spec.components).toMatchSnapshot();
expect(stack[1]).toMatchSnapshot();
});
it('should undo operation', () => {
stack[2] = operation.undo(stack[1]);
expect(stack[2].spec.components).toEqual(stack[0].spec.components);
expect(stack[2]).toEqual(stack[0]);
});
it('should redo operation', () => {
stack[3] = operation.redo(stack[2]);
expect(stack[3].spec.components).toEqual(stack[1].spec.components);
expect(stack[3]).toEqual(stack[1]);
});
afterAll(() => {
app = undefined;
@ -39,10 +40,10 @@ describe('adjust component order operation', () => {
});
describe('move down top level component', () => {
const stack: Application[] = [];
const stack: ApplicationComponent[][] = [];
beforeAll(() => {
app = ApplicationFixture['adjustOrderOperation'];
stack[0] = app;
stack[0] = app.spec.components;
operation = new AdjustComponentOrderLeafOperation({
componentId: 'grid_layout1',
orientation: 'down',
@ -50,15 +51,15 @@ describe('adjust component order operation', () => {
});
it('should do operation', () => {
stack[1] = operation.do(stack[0]);
expect(stack[1].spec.components).toMatchSnapshot();
expect(stack[1]).toMatchSnapshot();
});
it('should undo operation', () => {
stack[2] = operation.undo(stack[1]);
expect(stack[2].spec.components).toEqual(stack[0].spec.components);
expect(stack[2]).toEqual(stack[0]);
});
it('should redo operation', () => {
stack[3] = operation.redo(stack[2]);
expect(stack[3].spec.components).toEqual(stack[1].spec.components);
expect(stack[3]).toEqual(stack[1]);
});
afterAll(() => {
app = undefined;
@ -72,7 +73,7 @@ describe('adjust component order operation', () => {
componentId: 'grid_layout1',
orientation: 'up',
});
expect(operation.do(app)).toEqual(app);
expect(operation.do(app.spec.components)).toEqual(app.spec.components);
expect(warnSpy).toHaveBeenCalledWith('the element cannot move up');
});
@ -82,15 +83,15 @@ describe('adjust component order operation', () => {
componentId: 'grid_layout2',
orientation: 'down',
});
expect(operation.do(app)).toEqual(app);
expect(operation.do(app.spec.components)).toEqual(app.spec.components);
expect(warnSpy).toHaveBeenCalledWith('the element cannot move down');
});
describe('move up child component', () => {
const stack: Application[] = [];
const stack: ApplicationComponent[][] = [];
beforeAll(() => {
app = ApplicationFixture['adjustOrderOperation'];
stack[0] = app;
stack[0] = app.spec.components;
operation = new AdjustComponentOrderLeafOperation({
componentId: 'userInfoContainer',
orientation: 'up',
@ -98,15 +99,15 @@ describe('adjust component order operation', () => {
});
it('should do operation', () => {
stack[1] = operation.do(stack[0]);
expect(stack[1].spec.components).toMatchSnapshot();
expect(stack[1]).toMatchSnapshot();
});
it('should undo operation', () => {
stack[2] = operation.undo(stack[1]);
expect(stack[2].spec.components).toEqual(stack[0].spec.components);
expect(stack[2]).toEqual(stack[0]);
});
it('should redo operation', () => {
stack[3] = operation.redo(stack[2]);
expect(stack[3].spec.components).toEqual(stack[1].spec.components);
expect(stack[3]).toEqual(stack[1]);
});
afterAll(() => {
app = undefined;
@ -115,10 +116,10 @@ describe('adjust component order operation', () => {
});
describe('move down child component', () => {
const stack: Application[] = [];
const stack: ApplicationComponent[][] = [];
beforeAll(() => {
app = ApplicationFixture['adjustOrderOperation'];
stack[0] = app;
stack[0] = app.spec.components;
operation = new AdjustComponentOrderLeafOperation({
componentId: 'usersTable',
orientation: 'down',
@ -126,15 +127,15 @@ describe('adjust component order operation', () => {
});
it('should do operation', () => {
stack[1] = operation.do(stack[0]);
expect(stack[1].spec.components).toMatchSnapshot();
expect(stack[1]).toMatchSnapshot();
});
it('should undo operation', () => {
stack[2] = operation.undo(stack[1]);
expect(stack[2].spec.components).toEqual(stack[0].spec.components);
expect(stack[2]).toEqual(stack[0]);
});
it('should redo operation', () => {
stack[3] = operation.redo(stack[2]);
expect(stack[3].spec.components).toEqual(stack[1].spec.components);
expect(stack[3]).toEqual(stack[1]);
});
afterAll(() => {
app = undefined;
@ -148,7 +149,7 @@ describe('adjust component order operation', () => {
componentId: 'usersTable',
orientation: 'up',
});
expect(operation.do(app)).toEqual(app);
expect(operation.do(app.spec.components)).toEqual(app.spec.components);
expect(warnSpy).toHaveBeenCalledWith('the element cannot move up');
});
@ -158,7 +159,7 @@ describe('adjust component order operation', () => {
componentId: 'userInfoContainer',
orientation: 'down',
});
expect(operation.do(app)).toEqual(app);
expect(operation.do(app.spec.components)).toEqual(app.spec.components);
expect(warnSpy).toHaveBeenCalledWith('the element cannot move down');
});

2
packages/editor/index.html
View File

@ -15,7 +15,7 @@
<div id="root"></div>
<script type="module">
import renderApp from './src/main.tsx';
renderApp(JSON.parse(localStorage.getItem('schema')) || undefined);
renderApp();
</script>
</body>
</html>

136
packages/editor/src/AppStorage.ts Normal file
View File

@ -0,0 +1,136 @@
import { Application, ApplicationComponent } from '@sunmao-ui/core';
import { ImplementedRuntimeModule, Registry } from '@sunmao-ui/runtime';
import { produce } from 'immer';
import { eventBus } from './eventBus';
import { DefaultNewModule, EmptyAppSchema } from './constants';
export class AppStorage {
components: ApplicationComponent[] = [];
app: Application;
modules: ImplementedRuntimeModule[];
// this is current editing Model
private currentEditingName: string | undefined;
private currentEditingType: 'app' | 'module' = 'app';
static AppLSKey = 'schema';
static ModulesLSKey = 'modules';
constructor(private registry: Registry) {
this.app = this.getDefaultAppFromLS();
this.setApp(this.app)
this.modules = this.getModulesFromLS();
this.setModules(this.modules)
this.updateCurrentId('app', this.app.metadata.name);
this.refreshComponents();
eventBus.on('componentsChange', (components: ApplicationComponent[]) => {
this.components = components;
this.saveComponentsInLS();
});
}
getDefaultAppFromLS(): Application {
try {
const appFromLS = localStorage.getItem(AppStorage.AppLSKey);
if (appFromLS) {
return JSON.parse(appFromLS);
}
return EmptyAppSchema;
} catch (error) {
return EmptyAppSchema;
}
}
getModulesFromLS(): ImplementedRuntimeModule[] {
try {
const modulesFromLS = localStorage.getItem(AppStorage.ModulesLSKey);
if (modulesFromLS) {
return JSON.parse(modulesFromLS);
}
return [];
} catch (error) {
return [];
}
}
updateCurrentId(type: 'app' | 'module', name: string) {
this.currentEditingType = type;
this.currentEditingName = name;
this.refreshComponents();
}
createModule() {
this.setModules([...this.modules, DefaultNewModule]);
this.saveModulesInLS();
}
removeModule(module: ImplementedRuntimeModule) {
this.setModules(this.modules.filter(m => m !== module));
this.saveModulesInLS();
}
saveComponentsInLS() {
switch (this.currentEditingType) {
case 'app':
const newApp = produce(this.app, draft => {
draft.spec.components = this.components;
});
this.setApp(newApp);
this.saveAppInLS();
break;
case 'module':
const i = this.modules.findIndex(
m => m.metadata.name === this.currentEditingName
);
const newModules = produce(this.modules, draft => {
draft[i].components = this.components;
});
this.setModules(newModules);
this.saveModulesInLS();
break;
}
}
private setApp(app: Application) {
this.app = app;
eventBus.send('appChange', app);
}
private setModules(modules: ImplementedRuntimeModule[]) {
this.modules = modules;
eventBus.send('modulesChange', modules);
}
private saveAppInLS() {
localStorage.setItem(AppStorage.AppLSKey, JSON.stringify(this.app));
}
private saveModulesInLS() {
localStorage.setItem(AppStorage.ModulesLSKey, JSON.stringify(this.modules));
// reregister modules to activate immediately
this.modules.forEach(m => this.registry.registerModule(m, true));
}
// update components by currentEditingType & cache
private refreshComponents() {
switch (this.currentEditingType) {
case 'module':
const module = this.modules.find(
m => m.metadata.name === this.currentEditingName
);
const componentsOfModule = module?.components || [];
this.components = componentsOfModule;
break;
case 'app':
const componentsOfApp = this.app.spec.components;
this.components = componentsOfApp;
break;
}
this.emitComponentsChange();
}
private emitComponentsChange() {
eventBus.send('componentsReload', this.components);
}
}

16
packages/editor/src/components/ComponentForm/ComponentForm.tsx
View File

@ -11,6 +11,7 @@ import { GeneralTraitFormList } from './GeneralTraitFormList';
import { FetchTraitForm } from './FetchTraitForm';
import { Registry } from '@sunmao-ui/runtime/lib/services/registry';
import SchemaField from './JsonSchemaForm/SchemaField';
import { AppModelManager } from '../../operations/AppModelManager';
import {
ModifyComponentPropertiesLeafOperation,
ModifyTraitPropertiesLeafOperation,
@ -21,6 +22,7 @@ type Props = {
registry: Registry;
selectedId: string;
app: Application;
appModelManager: AppModelManager;
};
export const renderField = (properties: {
@ -76,7 +78,7 @@ export const renderField = (properties: {
};
export const ComponentForm: React.FC<Props> = props => {
const { selectedId, app, registry } = props;
const { selectedId, app, registry, appModelManager } = props;
const selectedComponent = useMemo(
() => app.spec.components.find(c => c.id === selectedId),
@ -141,8 +143,16 @@ export const ComponentForm: React.FC<Props> = props => {
/>
</VStack>
</VStack>
<EventTraitForm component={selectedComponent} registry={registry} />
<FetchTraitForm component={selectedComponent} registry={registry} />
<EventTraitForm
component={selectedComponent}
registry={registry}
appModelManager={appModelManager}
/>
<FetchTraitForm
component={selectedComponent}
registry={registry}
appModelManager={appModelManager}
/>
<GeneralTraitFormList component={selectedComponent} registry={registry} />
</VStack>
);

10
packages/editor/src/components/ComponentForm/EventTraitForm/EventHandlerForm.tsx
View File

@ -17,6 +17,7 @@ import { useAppModel } from '../../../operations/useAppModel';
import { formWrapperCSS } from '../style';
import { KeyValueEditor } from '../../KeyValueEditor';
import { Registry } from '@sunmao-ui/runtime/lib/services/registry';
import { AppModelManager } from '../../../operations/AppModelManager';
type Props = {
registry: Registry;
@ -25,15 +26,16 @@ type Props = {
onChange: (hanlder: Static<typeof EventHandlerSchema>) => void;
onRemove: () => void;
hideEventType?: boolean;
appModelManager: AppModelManager
};
export const EventHandlerForm: React.FC<Props> = props => {
const { handler, eventTypes, onChange, onRemove, hideEventType, registry } = props;
const { app } = useAppModel();
const { handler, eventTypes, onChange, onRemove, hideEventType, registry, appModelManager } = props;
const { components } = useAppModel(appModelManager);
const [methods, setMethods] = useState<string[]>([]);
function updateMethods(componentId: string) {
const type = app.spec.components.find(c => c.id === componentId)?.type;
const type = components.find(c => c.id === componentId)?.type;
if (type) {
const componentSpec = registry.getComponentByType(type).spec;
setMethods(componentSpec.methods.map(m => m.name));
@ -87,7 +89,7 @@ export const EventHandlerForm: React.FC<Props> = props => {
onBlur={() => formik.submitForm()}
value={formik.values.componentId}
>
{app.spec.components.map(c => (
{components.map(c => (
<option key={c.id} value={c.id}>
{c.id}
</option>

5
packages/editor/src/components/ComponentForm/EventTraitForm/EventTraitForm.tsx
View File

@ -8,6 +8,7 @@ import { EventHandlerSchema } from '@sunmao-ui/runtime';
import { eventBus } from '../../../eventBus';
import { EventHandlerForm } from './EventHandlerForm';
import { Registry } from '@sunmao-ui/runtime/lib/services/registry';
import { AppModelManager } from '../../../operations/AppModelManager';
import {
CreateTraitLeafOperation,
ModifyTraitPropertiesLeafOperation,
@ -18,10 +19,11 @@ type EventHandler = Static<typeof EventHandlerSchema>;
type Props = {
registry: Registry;
component: ApplicationComponent;
appModelManager: AppModelManager
};
export const EventTraitForm: React.FC<Props> = props => {
const { component, registry } = props;
const { component, registry, appModelManager } = props;
const handlers: EventHandler[] = useMemo(() => {
return component.traits.find(t => t.type === 'core/v1/event')?.properties
@ -114,6 +116,7 @@ export const EventTraitForm: React.FC<Props> = props => {
onChange={onChange}
onRemove={onRemove}
registry={registry}
appModelManager={appModelManager}
/>
);
});

5
packages/editor/src/components/ComponentForm/FetchTraitForm/FetchTraitForm.tsx
View File

@ -19,6 +19,7 @@ import { KeyValueEditor } from '../../KeyValueEditor';
import { EventHandlerForm } from '../EventTraitForm/EventHandlerForm';
import { eventBus } from '../../../eventBus';
import { Registry } from '@sunmao-ui/runtime/lib/services/registry';
import { AppModelManager } from '../../../operations/AppModelManager';
import {
ModifyTraitPropertiesLeafOperation,
RemoveTraitLeafOperation,
@ -29,12 +30,13 @@ type EventHandler = Static<typeof EventHandlerSchema>;
type Props = {
component: ApplicationComponent;
registry: Registry;
appModelManager: AppModelManager;
};
const httpMethods = ['get', 'post', 'put', 'delete', 'patch'];
export const FetchTraitForm: React.FC<Props> = props => {
const { component, registry } = props;
const { component, registry, appModelManager } = props;
const fetchTrait = component.traits.find(t => t.type === 'core/v1/fetch')
?.properties as Static<typeof FetchTraitPropertiesSchema>;
@ -170,6 +172,7 @@ export const FetchTraitForm: React.FC<Props> = props => {
onChange={onChange}
onRemove={onRemove}
registry={registry}
appModelManager={appModelManager}
/>
);
})}

39
packages/editor/src/components/Editor.tsx
View File

@ -1,4 +1,5 @@
import { useEffect, useMemo, useState } from 'react';
import { Application } from '@sunmao-ui/core';
import { GridCallbacks, DIALOG_CONTAINER_ID, initSunmaoUI } from '@sunmao-ui/runtime';
import { Box, Tabs, TabList, Tab, TabPanels, TabPanel, Flex } from '@chakra-ui/react';
import { StructureTree } from './StructureTree';
@ -11,6 +12,9 @@ import { PreviewModal } from './PreviewModal';
import { KeyboardEventWrapper } from './KeyboardEventWrapper';
import { ComponentWrapper } from './ComponentWrapper';
import { StateEditor, SchemaEditor } from './CodeEditor';
import { AppModelManager } from '../operations/AppModelManager';
import { Explorer } from './Explorer';
import { AppStorage } from '../AppStorage';
import {
ModifyComponentPropertiesLeafOperation,
ReplaceAppLeafOperation,
@ -24,12 +28,21 @@ type Props = {
registry: ReturnOfInit['registry'];
stateStore: ReturnOfInit['stateManager']['store'];
apiService: ReturnOfInit['apiService'];
appModelManager: AppModelManager;
appStorage: AppStorage;
};
export const Editor: React.FC<Props> = ({ App, registry, stateStore }) => {
const { app } = useAppModel();
export const Editor: React.FC<Props> = ({
App,
registry,
stateStore,
appModelManager,
appStorage,
}) => {
const { components } = useAppModel(appModelManager);
const [selectedComponentId, setSelectedComponentId] = useState(
app.spec.components[0]?.id || ''
components?.[0]?.id || ''
);
const [scale, setScale] = useState(100);
const [preview, setPreview] = useState(false);
@ -70,6 +83,19 @@ export const Editor: React.FC<Props> = ({ App, registry, stateStore }) => {
};
}, []);
const app = useMemo<Application>(() => {
return {
version: 'sunmao/v1',
kind: 'Application',
metadata: {
name: 'some App',
},
spec: {
components,
},
};
}, [components]);
const appComponent = useMemo(() => {
return (
<App
@ -119,13 +145,17 @@ export const Editor: React.FC<Props> = ({ App, registry, stateStore }) => {
isLazy
>
<TabList background="gray.50">
<Tab>Explorer</Tab>
<Tab>UI Tree</Tab>
<Tab>State</Tab>
</TabList>
<TabPanels flex="1" overflow="auto">
<TabPanel>
<Explorer appStorage={appStorage} />
</TabPanel>
<TabPanel p={0}>
<StructureTree
app={app}
components={components}
selectedComponentId={selectedComponentId}
onSelectComponent={id => setSelectedComponentId(id)}
registry={registry}
@ -156,6 +186,7 @@ export const Editor: React.FC<Props> = ({ App, registry, stateStore }) => {
app={app}
selectedId={selectedComponentId}
registry={registry}
appModelManager={appModelManager}
/>
</TabPanel>
<TabPanel p={0}>

129
packages/editor/src/components/Explorer/Explorer.tsx Normal file
View File

@ -0,0 +1,129 @@
import { Divider, HStack, IconButton, Text, VStack } from '@chakra-ui/react';
import React from 'react';
import { AppStorage } from '../../AppStorage';
import { AddIcon, DeleteIcon } from '@chakra-ui/icons';
import { eventBus } from '../../eventBus';
import { ImplementedRuntimeModule } from '@sunmao-ui/runtime';
type ExplorerProps = {
appStorage: AppStorage;
};
const useAppStorage = (appStorage: AppStorage) => {
const [modules, setModules] = React.useState<ImplementedRuntimeModule[]>(
appStorage.modules
);
eventBus.on('modulesChange', newModules => {
setModules(newModules);
});
return {
modules,
};
};
export const Explorer: React.FC<ExplorerProps> = ({ appStorage }) => {
const app = appStorage.app;
const appItemId = `app_${app.metadata.name}`;
const [selectedItem, setSelectedItem] = React.useState<string | undefined>(appItemId);
const onClickApp = (id: string) => {
setSelectedItem(id);
appStorage.updateCurrentId('app', app.metadata.name);
};
const appItem = (
<ExplorerItem
key={app.metadata.name}
id={appItemId}
title={app.metadata.name}
onClick={onClickApp}
isActive={selectedItem === appItemId}
/>
);
const { modules } = useAppStorage(appStorage);
const moduleItems = modules.map((module: ImplementedRuntimeModule) => {
const moduleItemId = `module_${module.metadata.name}`;
const onClickModule = (id: string) => {
setSelectedItem(id);
appStorage.updateCurrentId('module', module.metadata.name);
};
const onRemove = () => {
appStorage.removeModule(module);
};
return (
<ExplorerItem
key={module.metadata.name}
id={moduleItemId}
title={`${module.version}/${module.metadata.name}`}
onClick={onClickModule}
onRemove={onRemove}
isActive={selectedItem === moduleItemId}
/>
);
});
return (
<VStack alignItems="start">
<Text fontSize="lg" fontWeight="bold">
Applications
</Text>
{appItem}
<Divider />
<HStack width="full" justifyContent="space-between">
<Text fontSize="lg" fontWeight="bold">
Modules
</Text>
<IconButton
aria-label="create module"
size="xs"
icon={<AddIcon />}
onClick={() => appStorage.createModule()}
/>
</HStack>
{moduleItems}
</VStack>
);
};
type ExplorerItemProps = {
id: string;
title: string;
isActive: boolean;
onClick: (id: string) => void;
onRemove?: () => void;
};
const ExplorerItem: React.FC<ExplorerItemProps> = ({
id,
title,
isActive,
onClick,
onRemove,
}) => {
return (
<HStack
width="full"
justify="space-between"
cursor="pointer"
borderRadius="5"
padding="2"
backgroundColor={isActive ? 'gray.100' : 'white'}
>
<Text fontSize="lg" onClick={() => onClick(id)}>
{title}
</Text>
{onRemove ? (
<IconButton
variant="ghost"
size="smx"
aria-label="remove"
icon={<DeleteIcon />}
onClick={() => onRemove()}
/>
) : null}
</HStack>
);
};

1
packages/editor/src/components/Explorer/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './Explorer';

104
packages/editor/src/components/StructureTree/StructureTree.tsx
View File

@ -1,13 +1,11 @@
import React, { useEffect, useState } from 'react';
import { Application, ApplicationComponent } from '@sunmao-ui/core';
import React, { useMemo } from 'react';
import { ApplicationComponent } from '@sunmao-ui/core';
import { Box, Text, VStack } from '@chakra-ui/react';
import { eventBus } from '../../eventBus';
import { ComponentItemView } from './ComponentItemView';
import { ComponentTree } from './ComponentTree';
import { DropComponentWrapper } from './DropComponentWrapper';
import { Registry } from '@sunmao-ui/runtime/lib/services/registry';
import { EmotionJSX } from '@emotion/react/types/jsx-namespace';
import { ApplicationInstance } from '../../setup';
import {
RemoveComponentBranchOperation,
CreateComponentBranchOperation,
@ -18,27 +16,18 @@ type SlotsMap = Map<string, ApplicationComponent[]>;
type Props = {
registry: Registry;
app: Application;
components: ApplicationComponent[];
selectedComponentId: string;
onSelectComponent: (id: string) => void;
};
export const StructureTree: React.FC<Props> = props => {
const { app, selectedComponentId, onSelectComponent, registry } = props;
const [topEles, setTopEles] = useState(new Array<EmotionJSX.Element>());
const [dataSourcesEles, setDataSourcesEles] = useState(new Array<EmotionJSX.Element>());
//FIXME: it is not the proper place to initialize and detect change of the schema data, move it to a higher layer
useEffect(() => {
const { components, selectedComponentId, onSelectComponent, registry } = props;
const componentEles = useMemo(() => {
const topLevelComponents: ApplicationComponent[] = [];
const childrenMap: ChildrenMap = new Map();
ApplicationInstance.components = app.spec.components.filter(
c => c.type !== 'core/v1/dummy'
);
ApplicationInstance.dataSources = app.spec.components.filter(
c => c.type === 'core/v1/dummy'
);
ApplicationInstance.components.forEach(c => {
components.forEach(c => {
const slotTrait = c.traits.find(t => t.type === 'core/v1/slot');
if (slotTrait) {
const { id: parentId, slot } = slotTrait.properties.container as any;
@ -54,47 +43,44 @@ export const StructureTree: React.FC<Props> = props => {
topLevelComponents.push(c);
}
});
ApplicationInstance.childrenMap = childrenMap;
setTopEles(
topLevelComponents.map(c => (
<ComponentTree
key={c.id}
component={c}
childrenMap={childrenMap}
selectedComponentId={selectedComponentId}
onSelectComponent={onSelectComponent}
registry={registry}
/>
))
);
setDataSourcesEles(
ApplicationInstance.dataSources.map(dummy => {
const onClickRemove = () => {
eventBus.send(
'operation',
new RemoveComponentBranchOperation({
componentId: dummy.id,
})
);
};
return (
<ComponentItemView
key={dummy.id}
title={dummy.id}
isSelected={dummy.id === selectedComponentId}
onClick={() => {
onSelectComponent(dummy.id);
}}
onClickRemove={onClickRemove}
noChevron={true}
/>
return topLevelComponents.map(c => (
<ComponentTree
key={c.id}
component={c}
childrenMap={childrenMap}
selectedComponentId={selectedComponentId}
onSelectComponent={onSelectComponent}
registry={registry}
/>
));
}, [components, selectedComponentId, onSelectComponent, registry]);
const dataSourceEles = useMemo(() => {
const dataSources = components.filter(c => c.type === 'core/v1/dummy');
return dataSources.map(dummy => {
const onClickRemove = () => {
eventBus.send(
'operation',
new RemoveComponentBranchOperation({
componentId: dummy.id,
})
);
})
);
}, [app.spec.components]);
// parse components array to slotsMap
};
return (
<ComponentItemView
key={dummy.id}
title={dummy.id}
isSelected={dummy.id === selectedComponentId}
onClick={() => {
onSelectComponent(dummy.id);
}}
onClickRemove={onClickRemove}
noChevron={true}
/>
);
});
}, [components, selectedComponentId, onSelectComponent, registry]);
return (
<VStack spacing="2" padding="5" alignItems="start">
@ -102,11 +88,11 @@ export const StructureTree: React.FC<Props> = props => {
Components
</Text>
<RootItem />
{topEles}
{componentEles}
<Text fontSize="lg" fontWeight="bold">
DataSources
</Text>
{dataSourcesEles}
{dataSourceEles}
</VStack>
);
};

442
packages/editor/src/constants.ts
View File

@ -1,8 +1,9 @@
import { Application } from '@sunmao-ui/core';
import { ImplementedRuntimeModule } from '@sunmao-ui/runtime';
export const ignoreTraitsList = ['core/v1/slot', 'core/v1/event', 'core/v1/fetch'];
export const DefaultAppSchema: Application = {
export const EmptyAppSchema: Application = {
kind: 'Application',
version: 'example/v1',
metadata: {
@ -12,428 +13,33 @@ export const DefaultAppSchema: Application = {
spec: {
components: [
{
id: 'grid_layout1',
id: 'gridLayout1',
type: 'core/v1/grid_layout',
properties: {
layout: [
{
w: 10,
h: 15,
x: 0,
y: 0,
i: 'tabs1',
moved: false,
static: false,
isDraggable: true,
},
],
layout: [],
},
traits: [],
},
{
id: 'fetchUsers',
type: 'core/v1/dummy',
properties: {},
traits: [
{
type: 'core/v1/fetch',
properties: {
url: 'https://6177d4919c328300175f5b99.mockapi.io/users',
method: 'get',
lazy: false,
headers: {},
body: {},
onComplete: [],
},
},
],
},
{
id: 'usersTable',
type: 'chakra_ui/v1/table',
properties: {
data: '{{fetchUsers.fetch.data}}',
columns: [
{ key: 'username', title: '用户名', type: 'link' },
{ key: 'job', title: '职位', type: 'text' },
{ key: 'area', title: '地区', type: 'text' },
{
key: 'createdTime',
title: '创建时间',
displayValue: "{{dayjs($listItem.createdTime).format('LL')}}",
},
],
majorKey: 'id',
rowsPerPage: '3',
isMultiSelect: 'false',
},
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'tabContentVStack', slot: 'content' },
},
},
],
},
{
id: 'userInfoContainer',
type: 'chakra_ui/v1/vstack',
properties: { spacing: '2', align: 'stretch' },
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'tabContentVStack', slot: 'content' },
},
},
{
type: 'core/v1/style',
properties: {
styleSlot: 'content',
style: "{{!usersTable.selectedItem ? 'display: none' : ''}}",
},
},
],
},
{
id: 'userInfoTitle',
type: 'core/v1/text',
properties: { value: { raw: '**基本信息**', format: 'md' } },
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'userInfoContainer', slot: 'content' },
},
},
],
},
{
id: 'hstack1',
type: 'chakra_ui/v1/hstack',
properties: { spacing: '24px', hideBorder: '' },
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'userInfoContainer', slot: 'content' },
},
},
{
type: 'core/v1/style',
properties: {
styleSlot: 'content',
style: 'padding: 0; border: none',
},
},
],
},
{
id: 'usernameLabel',
type: 'core/v1/text',
properties: { value: { raw: '**用户名**', format: 'md' } },
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'hstack1', slot: 'content' },
},
},
],
},
{
id: 'usernameValue',
type: 'core/v1/text',
properties: {
value: {
raw: "{{usersTable.selectedItem ? usersTable.selectedItem.username : ''}}",
format: 'plain',
},
},
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'hstack1', slot: 'content' },
},
},
],
},
{
id: 'divider1',
type: 'chakra_ui/v1/divider',
properties: {},
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'userInfoContainer', slot: 'content' },
},
},
],
},
{
id: 'jobLabel',
type: 'core/v1/text',
properties: { value: { raw: '**职位**', format: 'md' } },
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'hstack2', slot: 'content' },
},
},
],
},
{
id: 'hstack2',
type: 'chakra_ui/v1/hstack',
properties: { spacing: '24px', hideBorder: '' },
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'userInfoContainer', slot: 'content' },
},
},
{
type: 'core/v1/style',
properties: {
styleSlot: 'content',
style: 'padding: 0; border: none',
},
},
],
},
{
id: 'areaLabel',
type: 'core/v1/text',
properties: { value: { raw: '**地区**', format: 'md' } },
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'hstack3', slot: 'content' },
},
},
],
},
{
id: 'areaValue',
type: 'core/v1/text',
properties: {
value: {
raw: "{{usersTable.selectedItem ? usersTable.selectedItem.area : ''}}",
format: 'plain',
},
},
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'hstack3', slot: 'content' },
},
},
],
},
{
id: 'divider2',
type: 'chakra_ui/v1/divider',
properties: {},
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'userInfoContainer', slot: 'content' },
},
},
],
},
{
id: 'createdTimeLabel',
type: 'core/v1/text',
properties: { value: { raw: '**创建时间**', format: 'md' } },
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'hstack4', slot: 'content' },
},
},
],
},
{
id: 'createdTimeValue',
type: 'core/v1/text',
properties: {
value: {
raw: "{{usersTable.selectedItem ? dayjs(usersTable.selectedItem.createdTime).format('LL') : ''}}",
format: 'plain',
},
},
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'hstack4', slot: 'content' },
},
},
{
type: 'core/v1/style',
properties: { string: { kind: {}, type: {} } },
},
],
},
{
id: 'hstack3',
type: 'chakra_ui/v1/hstack',
properties: { spacing: '24px', hideBorder: '' },
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'userInfoContainer', slot: 'content' },
},
},
{
type: 'core/v1/style',
properties: {
styleSlot: 'content',
style: 'padding: 0; border: none',
},
},
],
},
{
id: 'divider3',
type: 'chakra_ui/v1/divider',
properties: {},
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'userInfoContainer', slot: 'content' },
},
},
],
},
{
id: 'hstack4',
type: 'chakra_ui/v1/hstack',
properties: { spacing: '24px', hideBorder: '' },
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'userInfoContainer', slot: 'content' },
},
},
{
type: 'core/v1/style',
properties: {
styleSlot: 'content',
style: 'padding: 0; border: none',
},
},
],
},
{
id: 'tabs1',
type: 'chakra_ui/v1/tabs',
properties: {
tabNames: ['用户信息', '角色'],
initialSelectedTabIndex: 0,
},
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'grid_layout1', slot: 'content' },
},
},
],
},
{
id: 'tabContentVStack',
type: 'chakra_ui/v1/vstack',
properties: { spacing: '24px' },
traits: [
{
type: 'core/v1/slot',
properties: { container: { id: 'tabs1', slot: 'content' } },
},
],
},
{
id: 'testtext',
type: 'core/v1/text',
properties: { value: { raw: '**测试角色**', format: 'md' } },
traits: [
{
type: 'core/v1/slot',
properties: { container: { id: 'tabs1', slot: 'content' } },
},
],
},
{
id: 'jobValue',
type: 'chakra_ui/v1/vstack',
properties: { spacing: '1', align: 'stretch' },
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'hstack2', slot: 'content' },
},
},
{
type: 'core/v1/style',
properties: {
styleSlot: 'content',
style: 'padding: 0; border: none',
},
},
],
},
{
id: 'link1',
type: 'chakra_ui/v1/link',
properties: {
text: {
raw: "{{usersTable.selectedItem ? usersTable.selectedItem.job : ''}}",
format: 'plain',
},
href: 'https://www.google.com',
},
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'jobValue', slot: 'content' },
},
},
],
},
{
id: 'link2',
type: 'chakra_ui/v1/link',
properties: {
text: {
raw: "{{usersTable.selectedItem ? usersTable.selectedItem.job : ''}}",
format: 'plain',
},
href: 'https://www.google.com',
},
traits: [
{
type: 'core/v1/slot',
properties: {
container: { id: 'jobValue', slot: 'content' },
},
},
],
},
],
},
};
export const DefaultNewModule: ImplementedRuntimeModule = {
kind: 'Module',
parsedVersion: { category: 'custom/v1', value: 'myModule' },
version: 'custom/v1',
metadata: { name: 'myModule', description: 'my module' },
spec: {
stateMap: {},
events: [],
properties: {},
},
components: [
{
id: 'text1',
type: 'core/v1/text',
properties: { value: { raw: 'Hello, world!', format: 'plain' } },
traits: [],
},
],
};

16
packages/editor/src/eventBus.ts
View File

@ -1,18 +1,26 @@
import mitt from 'mitt';
import { Application } from '@sunmao-ui/core';
import { Application, ApplicationComponent } from '@sunmao-ui/core';
import { IOperation } from './operations/type';
import { ImplementedRuntimeModule } from '../../runtime/lib';
export const SelectComponentEvent = 'selectComponent';
export const HoverComponentEvent = 'hoverComponent';
const emitter = mitt<{
export type EventNames = {
operation: IOperation;
redo: undefined;
undo: undefined;
appChange: Application;
componentsReload: ApplicationComponent[];
componentsChange: ApplicationComponent[];
[SelectComponentEvent]: string;
[HoverComponentEvent]: string;
}>();
// for state decorators
appChange: Application;
modulesChange: ImplementedRuntimeModule[];
}
const emitter = mitt<EventNames>();
export const eventBus = {
on: emitter.on,

16
packages/editor/src/main.tsx
View File

@ -1,5 +1,4 @@
import { ChakraProvider } from '@chakra-ui/react';
import { Application } from '@sunmao-ui/core';
import { Registry } from '@sunmao-ui/runtime/lib/services/registry';
import { StrictMode } from 'react';
import ReactDOM from 'react-dom';
@ -7,9 +6,7 @@ import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import { Editor } from './components/Editor';
import { DefaultAppSchema } from './constants';
import { AppModelManager } from './operations/AppModelManager';
import { apiService, App, ApplicationInstance, registry, stateStore } from './setup';
import { apiService, App, appModelManager, appStorage, registry, stateStore } from './setup';
type Options = Partial<{
components: Parameters<Registry['registerComponent']>[0][];
@ -17,17 +14,12 @@ type Options = Partial<{
modules: Parameters<Registry['registerModule']>[0][];
}>;
export default function renderApp(
app: Application = DefaultAppSchema,
options: Options = {}
) {
ApplicationInstance.app = app;
new AppModelManager(app);
export default function renderApp(options: Options = {}) {
const { components = [], traits = [], modules = [] } = options;
components.forEach(c => registry.registerComponent(c));
traits.forEach(t => registry.registerTrait(t));
modules.forEach(m => registry.registerModule(m));
appStorage.modules.forEach(m => registry.registerModule(m));
ReactDOM.render(
<StrictMode>
@ -37,6 +29,8 @@ export default function renderApp(
registry={registry}
stateStore={stateStore}
apiService={apiService}
appStorage={appStorage}
appModelManager={appModelManager}
/>
</ChakraProvider>
</StrictMode>,

44
packages/editor/src/operations/AppModelManager.ts
View File

@ -1,27 +1,33 @@
import { Application } from '@sunmao-ui/core';
import { ApplicationComponent } from '@sunmao-ui/core';
import { eventBus } from '../eventBus';
import { IUndoRedoManager, IOperation, OperationList } from './type';
export class AppModelManager implements IUndoRedoManager {
components: ApplicationComponent[] = [];
operationStack: OperationList<IOperation> = new OperationList();
private _app: Application;
public get app(): Application {
return this._app;
}
constructor(app: Application) {
this._app = app;
this.updateApp(app);
constructor(components: ApplicationComponent[]) {
this.components = components;
this.updateComponents(components);
eventBus.on('undo', () => this.undo());
eventBus.on('redo', () => this.redo());
eventBus.on('operation', o => this.do(o));
eventBus.on('componentsReload', components => {
this.updateComponents(components);
});
}
updateComponents(components: ApplicationComponent[]) {
this.components = components;
eventBus.send('componentsChange', this.components);
}
do(operation: IOperation): void {
// TODO: replace by logger
// console.log('do', operation);
const newApp = operation.do(this._app);
const newComponents = operation.do(this.components);
this.operationStack.insert(operation);
this.updateApp(newApp);
this.updateComponents(newComponents);
}
redo(): void {
@ -34,10 +40,10 @@ export class AppModelManager implements IUndoRedoManager {
console.warn('cannot redo as cannot move to next cursor', this.operationStack);
return;
}
const newApp = this.operationStack.cursor?.val?.redo(this._app);
const newComponents = this.operationStack.cursor?.val?.redo(this.components);
// console.log('redo', this.operationStack.cursor?.val);
if (newApp) {
this.updateApp(newApp);
if (newComponents) {
this.updateComponents(newComponents);
} else {
// rollback move next
this.operationStack.movePrev();
@ -55,20 +61,14 @@ export class AppModelManager implements IUndoRedoManager {
console.warn('cannot undo as cannot move to prev cursor', this.operationStack);
return;
}
const newApp = this.operationStack.cursor.next?.val?.undo(this._app);
const newComponents = this.operationStack.cursor.next?.val?.undo(this.components);
// console.log('undo', this.operationStack.cursor.next?.val);
if (newApp) {
this.updateApp(newApp);
if (newComponents) {
this.updateComponents(newComponents);
} else {
//rollback move prev
this.operationStack.moveNext();
console.warn('cannot undo as cursor has no operation', this.operationStack);
}
}
updateApp(app: Application) {
eventBus.send('appChange', app);
localStorage.setItem('schema', JSON.stringify(app));
this._app = app;
}
}

8
packages/editor/src/operations/branch/createComponentBranchOperation.ts
View File

@ -1,4 +1,4 @@
import { Application } from '@sunmao-ui/core';
import { ApplicationComponent } from '@sunmao-ui/core';
import produce from 'immer';
import {
CreateComponentLeafOperation,
@ -17,12 +17,12 @@ export type CreateComponentBranchOperationContext = {
};
export class CreateComponentBranchOperation extends BaseBranchOperation<CreateComponentBranchOperationContext> {
do(prev: Application): Application {
do(prev: ApplicationComponent[]): ApplicationComponent[] {
// gen component id
if (!this.context.componentId) {
this.context.componentId = genId(this.context.componentType, prev);
}
// insert a new component to spec
// insert a new component to schema
this.operationStack.insert(
new CreateComponentLeafOperation({
componentId: this.context.componentId!,
@ -32,7 +32,7 @@ export class CreateComponentBranchOperation extends BaseBranchOperation<CreateCo
// add a slot trait if it has a parent
if (this.context.parentId && this.context.slot) {
// try to find parent
const parentComponent = prev.spec.components.find(
const parentComponent = prev.find(
c => c.id === this.context.parentId
);

13
packages/editor/src/operations/branch/modifyComponentIdBranchOperation.ts
View File

@ -1,7 +1,6 @@
import { Application } from '@sunmao-ui/core';
import { ApplicationComponent } from '@sunmao-ui/core';
import produce from 'immer';
import { BaseBranchOperation } from '../type';
import { ApplicationInstance } from '../../setup';
import {
ModifyComponentIdLeafOperation,
ModifyComponentPropertiesLeafOperation,
@ -15,8 +14,8 @@ export type ModifyComponentIdBranchOperationContext = {
};
export class ModifyComponentIdBranchOperation extends BaseBranchOperation<ModifyComponentIdBranchOperationContext> {
do(prev: Application): Application {
const toReId = prev.spec.components.find(c => c.id === this.context.componentId);
do(prev: ApplicationComponent[]): ApplicationComponent[] {
const toReId = prev.find(c => c.id === this.context.componentId);
if (!toReId) {
console.warn('component not found');
return prev;
@ -28,7 +27,7 @@ export class ModifyComponentIdBranchOperation extends BaseBranchOperation<Modify
| undefined
)?.id;
prev.spec.components.forEach(component => {
prev.forEach(component => {
if (component.id === parentId && component.type === 'core/v1/grid_layout') {
this.operationStack.insert(
new ModifyComponentPropertiesLeafOperation({
@ -77,7 +76,9 @@ export class ModifyComponentIdBranchOperation extends BaseBranchOperation<Modify
// update selectid
this.operationStack.insert(
new UpdateSelectComponentLeafOperation({
componentId: ApplicationInstance.selectedComponent?.id,
// TODO: need a way to get selectedComponent.id here
// componentId: ApplicationComponent[]Instance.selectedComponent?.id,
componentId: '',
newId: this.context.newId,
})
);

8
packages/editor/src/operations/branch/removeComponentBranchOperation.ts
View File

@ -1,4 +1,4 @@
import { Application } from '@sunmao-ui/core';
import { ApplicationComponent } from '@sunmao-ui/core';
import produce from 'immer';
import {
ModifyComponentPropertiesLeafOperation,
@ -11,9 +11,9 @@ export type RemoveComponentBranchOperationContext = {
};
export class RemoveComponentBranchOperation extends BaseBranchOperation<RemoveComponentBranchOperationContext> {
do(prev: Application): Application {
do(prev: ApplicationComponent[]): ApplicationComponent[] {
// find component to remove
const toRemove = prev.spec.components.find(c => c.id === this.context.componentId);
const toRemove = prev.find(c => c.id === this.context.componentId);
if (!toRemove) {
console.warn('component not found');
return prev;
@ -24,7 +24,7 @@ export class RemoveComponentBranchOperation extends BaseBranchOperation<RemoveCo
| { id: string }
| undefined
)?.id;
prev.spec.components.forEach(component => {
prev.forEach(component => {
if (component.id === parentId && component.type !== 'core/v1/grid_layout') {
// only need to modified layout from grid_layout component
parentId = undefined;

52
packages/editor/src/operations/leaf/component/adjustComponentOrderLeafOperation.ts
View File

@ -1,4 +1,4 @@
import { Application } from '@sunmao-ui/core';
import { ApplicationComponent } from '@sunmao-ui/core';
import produce from 'immer';
import { BaseLeafOperation } from '../../type';
export type AdjustComponentOrderLeafOperationContext = {
@ -9,9 +9,9 @@ export type AdjustComponentOrderLeafOperationContext = {
export class AdjustComponentOrderLeafOperation extends BaseLeafOperation<AdjustComponentOrderLeafOperationContext> {
private dest = -1;
private index = -1;
do(prev: Application): Application {
do(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, draft => {
this.index = draft.spec.components.findIndex(
this.index = draft.findIndex(
c => c.id === this.context.componentId
);
if (this.index === -1) {
@ -19,14 +19,14 @@ export class AdjustComponentOrderLeafOperation extends BaseLeafOperation<AdjustC
return;
}
const movedElement = draft.spec.components[this.index];
const movedElement = draft[this.index];
const slotTrait = movedElement.traits.find(t => t.type === 'core/v1/slot');
if (!slotTrait) {
// for top level element, find the next top level element;
switch (this.context.orientation) {
case 'up':
for (this.dest = this.index - 1; this.dest >= 0; this.dest--) {
const nextComponent = draft.spec.components[this.dest];
const nextComponent = draft[this.dest];
if (
nextComponent.type !== 'core/v1/dummy' &&
!nextComponent.traits.some(t => t.type === 'core/v1/slot')
@ -39,15 +39,15 @@ export class AdjustComponentOrderLeafOperation extends BaseLeafOperation<AdjustC
case 'down':
for (
this.dest = this.index + 1;
this.dest < draft.spec.components.length;
this.dest < draft.length;
this.dest++
) {
const nextComponent = draft.spec.components[this.dest];
const nextComponent = draft[this.dest];
if (!nextComponent.traits.some(t => t.type === 'core/v1/slot')) {
break;
}
}
if (this.dest === draft.spec.components.length) {
if (this.dest === draft.length) {
// mark dest as -1 due to not found element
this.dest = -1;
}
@ -58,7 +58,7 @@ export class AdjustComponentOrderLeafOperation extends BaseLeafOperation<AdjustC
switch (this.context.orientation) {
case 'up':
for (this.dest = this.index - 1; this.dest >= 0; this.dest--) {
const nextComponent = draft.spec.components[this.dest];
const nextComponent = draft[this.dest];
if (
nextComponent.traits.some(
t =>
@ -75,10 +75,10 @@ export class AdjustComponentOrderLeafOperation extends BaseLeafOperation<AdjustC
case 'down':
for (
this.dest = this.index + 1;
this.dest < draft.spec.components.length;
this.dest < draft.length;
this.dest++
) {
const nextComponent = draft.spec.components[this.dest];
const nextComponent = draft[this.dest];
if (
nextComponent.traits.some(
t =>
@ -90,7 +90,7 @@ export class AdjustComponentOrderLeafOperation extends BaseLeafOperation<AdjustC
break;
}
}
if (this.dest === draft.spec.components.length) {
if (this.dest === draft.length) {
// mark dest as -1 due to not found element
this.dest = -1;
}
@ -102,13 +102,13 @@ export class AdjustComponentOrderLeafOperation extends BaseLeafOperation<AdjustC
return;
}
const [highPos, lowPos] = [this.dest, this.index].sort();
const lowComponent = draft.spec.components.splice(lowPos, 1)[0];
const highComponent = draft.spec.components.splice(highPos, 1)[0];
draft.spec.components.splice(lowPos - 1, 0, highComponent);
draft.spec.components.splice(highPos, 0, lowComponent);
const lowComponent = draft.splice(lowPos, 1)[0];
const highComponent = draft.splice(highPos, 1)[0];
draft.splice(lowPos - 1, 0, highComponent);
draft.splice(highPos, 0, lowComponent);
});
}
redo(prev: Application): Application {
redo(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, draft => {
if (this.index === -1) {
console.warn("operation hasn't been executed, cannot redo");
@ -119,14 +119,14 @@ export class AdjustComponentOrderLeafOperation extends BaseLeafOperation<AdjustC
}
const lowPos = Math.max(this.dest, this.index);
const highPos = Math.min(this.dest, this.index);
const lowComponent = draft.spec.components.splice(lowPos, 1)[0];
const highComponent = draft.spec.components.splice(highPos, 1)[0];
draft.spec.components.splice(lowPos - 1, 0, highComponent);
draft.spec.components.splice(highPos, 0, lowComponent);
const lowComponent = draft.splice(lowPos, 1)[0];
const highComponent = draft.splice(highPos, 1)[0];
draft.splice(lowPos - 1, 0, highComponent);
draft.splice(highPos, 0, lowComponent);
});
}
undo(prev: Application): Application {
undo(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, draft => {
if (this.index === -1) {
console.warn("cannot undo operation, the operation hasn't been executed.");
@ -137,10 +137,10 @@ export class AdjustComponentOrderLeafOperation extends BaseLeafOperation<AdjustC
}
const lowPos = Math.max(this.dest, this.index);
const highPos = Math.min(this.dest, this.index);
const lowComponent = draft.spec.components.splice(lowPos, 1)[0];
const highComponent = draft.spec.components.splice(highPos, 1)[0];
draft.spec.components.splice(lowPos - 1, 0, highComponent);
draft.spec.components.splice(highPos, 0, lowComponent);
const lowComponent = draft.splice(lowPos, 1)[0];
const highComponent = draft.splice(highPos, 1)[0];
draft.splice(lowPos - 1, 0, highComponent);
draft.splice(highPos, 0, lowComponent);
});
}
}

14
packages/editor/src/operations/leaf/component/createComponentLeafOperation.ts
View File

@ -1,4 +1,4 @@
import { Application } from '@sunmao-ui/core';
import { ApplicationComponent } from '@sunmao-ui/core';
import produce from 'immer';
import { BaseLeafOperation } from '../../type';
import { genComponent } from '../../util';
@ -9,26 +9,26 @@ export type CreateComponentLeafOperationContext = {
};
export class CreateComponentLeafOperation extends BaseLeafOperation<CreateComponentLeafOperationContext> {
do(prev: Application): Application {
do(prev: ApplicationComponent[]): ApplicationComponent[] {
const newComponent = genComponent(
this.context.componentType,
this.context.componentId
);
this.context.componentId = newComponent.id;
return produce(prev, draft => {
draft.spec.components.push(newComponent);
draft.push(newComponent);
});
}
undo(prev: Application): Application {
undo(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, draft => {
const remains = draft.spec.components.filter(
const remains = draft.filter(
c => c.id !== this.context.componentId
);
if (remains.length === draft.spec.components.length) {
if (remains.length === draft.length) {
console.warn('element not found');
}
draft.spec.components = remains;
draft = remains;
});
}
}

14
packages/editor/src/operations/leaf/component/modifyComponentIdLeafOperation.ts
View File

@ -1,4 +1,4 @@
import { Application } from '@sunmao-ui/core';
import { ApplicationComponent } from '@sunmao-ui/core';
import produce from 'immer';
import { BaseLeafOperation } from '../../type';
@ -8,9 +8,9 @@ export type ModifyComponentIdLeafOperationContext = {
};
export class ModifyComponentIdLeafOperation extends BaseLeafOperation<ModifyComponentIdLeafOperationContext> {
do(prev: Application): Application {
do(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, draft => {
const comp = draft.spec.components.find(c => c.id === this.context.componentId);
const comp = draft.find(c => c.id === this.context.componentId);
if (!comp) {
console.warn('component not found');
return;
@ -18,9 +18,9 @@ export class ModifyComponentIdLeafOperation extends BaseLeafOperation<ModifyComp
comp.id = this.context.newId;
});
}
redo(prev: Application): Application {
redo(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, draft => {
const comp = draft.spec.components.find(c => c.id === this.context.componentId);
const comp = draft.find(c => c.id === this.context.componentId);
if (!comp) {
console.warn('component not found');
return;
@ -28,9 +28,9 @@ export class ModifyComponentIdLeafOperation extends BaseLeafOperation<ModifyComp
comp.id = this.context.newId;
});
}
undo(prev: Application): Application {
undo(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, draft => {
const comp = draft.spec.components.find(c => c.id === this.context.newId);
const comp = draft.find(c => c.id === this.context.newId);
if (!comp) {
console.warn('component not found');
return;

14
packages/editor/src/operations/leaf/component/modifyComponentPropertiesLeafOperation.ts
View File

@ -1,4 +1,4 @@
import { Application } from '@sunmao-ui/core';
import { ApplicationComponent } from '@sunmao-ui/core';
import produce from 'immer';
import { BaseLeafOperation } from '../../type';
import _ from 'lodash-es';
@ -10,9 +10,9 @@ export type ModifyComponentPropertiesLeafOperationContext = {
export class ModifyComponentPropertiesLeafOperation extends BaseLeafOperation<ModifyComponentPropertiesLeafOperationContext> {
private previousState: Record<string, any> = {};
do(prev: Application): Application {
do(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, draft => {
const comp = draft.spec.components.find(c => c.id === this.context.componentId);
const comp = draft.find(c => c.id === this.context.componentId);
if (!comp) {
console.warn('component not found');
return;
@ -30,9 +30,9 @@ export class ModifyComponentPropertiesLeafOperation extends BaseLeafOperation<Mo
}
});
}
redo(prev: Application): Application {
redo(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, draft => {
const comp = draft.spec.components.find(c => c.id === this.context.componentId);
const comp = draft.find(c => c.id === this.context.componentId);
if (!comp) {
console.warn('component not found');
return;
@ -42,9 +42,9 @@ export class ModifyComponentPropertiesLeafOperation extends BaseLeafOperation<Mo
}
});
}
undo(prev: Application): Application {
undo(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, draft => {
const comp = draft.spec.components.find(c => c.id === this.context.componentId);
const comp = draft.find(c => c.id === this.context.componentId);
if (!comp) {
console.warn('component not found');
return;

16
packages/editor/src/operations/leaf/component/removeComponentLeafOperation.ts
View File

@ -1,4 +1,4 @@
import { Application, ApplicationComponent } from '@sunmao-ui/core';
import { ApplicationComponent } from '@sunmao-ui/core';
import produce from 'immer';
import { tryOriginal } from '../../../operations/util';
import { BaseLeafOperation } from '../../type';
@ -12,8 +12,8 @@ export class RemoveComponentLeafOperation extends BaseLeafOperation<RemoveCompon
// FIXME: index is not a good type to remember a deleted resource
private deletedIndex = -1;
do(prev: Application): Application {
this.deletedIndex = prev.spec.components.findIndex(
do(prev: ApplicationComponent[]): ApplicationComponent[] {
this.deletedIndex = prev.findIndex(
c => c.id === this.context.componentId
);
if (this.deletedIndex === -1) {
@ -22,20 +22,20 @@ export class RemoveComponentLeafOperation extends BaseLeafOperation<RemoveCompon
}
return produce(prev, draft => {
this.deletedComponent = tryOriginal(
draft.spec.components.splice(this.deletedIndex, 1)[0]
draft.splice(this.deletedIndex, 1)[0]
);
});
}
redo(prev: Application): Application {
redo(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, draft => {
draft.spec.components.splice(this.deletedIndex, 1);
draft.splice(this.deletedIndex, 1);
});
}
undo(prev: Application): Application {
undo(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, draft => {
draft.spec.components.splice(this.deletedIndex, 0, this.deletedComponent);
draft.splice(this.deletedIndex, 0, this.deletedComponent);
});
}
}

12
packages/editor/src/operations/leaf/replaceAppLeafOperation.ts
View File

@ -1,27 +1,27 @@
import { Application } from '@sunmao-ui/core';
import { ApplicationComponent } from '@sunmao-ui/core';
import produce from 'immer';
import { BaseLeafOperation } from '../type';
export type ReplaceAppLeafOperationContext = {
app: Application;
app: ApplicationComponent[];
};
export class ReplaceAppLeafOperation extends BaseLeafOperation<ReplaceAppLeafOperationContext> {
private previousState!: Application;
do(prev: Application): Application {
private previousState!: ApplicationComponent[];
do(prev: ApplicationComponent[]): ApplicationComponent[] {
this.previousState = prev;
return produce(prev, () => {
return this.context.app;
});
}
redo(prev: Application): Application {
redo(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, () => {
return this.context.app;
});
}
undo(prev: Application): Application {
undo(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, () => {
return this.previousState;
});

14
packages/editor/src/operations/leaf/trait/createTraitLeafOperation.ts
View File

@ -1,4 +1,4 @@
import { Application } from '@sunmao-ui/core';
import { ApplicationComponent } from '@sunmao-ui/core';
import produce from 'immer';
import { BaseLeafOperation } from '../../type';
@ -11,9 +11,9 @@ export type CreateTraitLeafOperationContext = {
export class CreateTraitLeafOperation extends BaseLeafOperation<CreateTraitLeafOperationContext> {
private traitIndex!: number;
do(prev: Application): Application {
do(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, draft => {
for (const component of draft.spec.components) {
for (const component of draft) {
if (component.id === this.context.componentId) {
component.traits.push({
type: this.context.traitType,
@ -26,14 +26,14 @@ export class CreateTraitLeafOperation extends BaseLeafOperation<CreateTraitLeafO
});
}
undo(prev: Application): Application {
undo(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, draft => {
for (let i = 0; i < draft.spec.components.length; i++) {
const component = draft.spec.components[i];
for (let i = 0; i < draft.length; i++) {
const component = draft[i];
if (component.id === this.context.componentId) {
component.traits.splice(this.traitIndex, 1);
return;
} else if (i === draft.spec.components.length - 1) {
} else if (i === draft.length - 1) {
console.warn('trait not found');
return;
}

14
packages/editor/src/operations/leaf/trait/modifyTraitPropertiesLeafOperation.ts
View File

@ -1,4 +1,4 @@
import { Application } from '@sunmao-ui/core';
import { ApplicationComponent } from '@sunmao-ui/core';
import produce from 'immer';
import _ from 'lodash-es';
import { tryOriginal } from '../../util';
@ -12,9 +12,9 @@ export type ModifyTraitPropertiesLeafOperationContext = {
export class ModifyTraitPropertiesLeafOperation extends BaseLeafOperation<ModifyTraitPropertiesLeafOperationContext> {
private previousState: Record<string, any> = {};
do(prev: Application): Application {
do(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, draft => {
const comp = draft.spec.components.find(c => c.id === this.context.componentId);
const comp = draft.find(c => c.id === this.context.componentId);
if (!comp) {
console.warn('component not found');
return;
@ -38,9 +38,9 @@ export class ModifyTraitPropertiesLeafOperation extends BaseLeafOperation<Modify
}
});
}
redo(prev: Application): Application {
redo(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, draft => {
const comp = draft.spec.components.find(c => c.id === this.context.componentId);
const comp = draft.find(c => c.id === this.context.componentId);
if (!comp) {
console.warn('component not found');
return;
@ -57,9 +57,9 @@ export class ModifyTraitPropertiesLeafOperation extends BaseLeafOperation<Modify
});
}
undo(prev: Application): Application {
undo(prev: ApplicationComponent[]): ApplicationComponent[] {
return produce(prev, draft => {
const comp = draft.spec.components.find(c => c.id === this.context.componentId);
const comp = draft.find(c => c.id === this.context.componentId);
if (!comp) {
console.warn('component not found');
return;

26
packages/editor/src/operations/leaf/trait/removeTraitLeafOperation.ts
View File

@ -1,4 +1,4 @@
import { Application, ComponentTrait } from '@sunmao-ui/core';
import { ApplicationComponent, ComponentTrait } from '@sunmao-ui/core';
import produce from 'immer';
import { tryOriginal } from '../../../operations/util';
import { BaseLeafOperation } from '../../type';
@ -10,8 +10,8 @@ export type RemoveTraitLeafOperationContext = {
export class RemoveTraitLeafOperation extends BaseLeafOperation<RemoveTraitLeafOperationContext> {
private deletedTrait!: ComponentTrait;
do(prev: Application): Application {
const componentIndex = prev.spec.components.findIndex(
do(prev: ApplicationComponent[]): ApplicationComponent[] {
const componentIndex = prev.findIndex(
c => c.id === this.context.componentId
);
if (componentIndex === -1) {
@ -19,18 +19,18 @@ export class RemoveTraitLeafOperation extends BaseLeafOperation<RemoveTraitLeafO
return prev;
}
return produce(prev, draft => {
if (!draft.spec.components[componentIndex].traits[this.context.index]) {
if (!draft[componentIndex].traits[this.context.index]) {
console.warn('trait not foudn');
return;
}
this.deletedTrait = tryOriginal(
draft.spec.components[componentIndex].traits.splice(this.context.index, 1)[0]
draft[componentIndex].traits.splice(this.context.index, 1)[0]
);
});
}
redo(prev: Application): Application {
const componentIndex = prev.spec.components.findIndex(
redo(prev: ApplicationComponent[]): ApplicationComponent[] {
const componentIndex = prev.findIndex(
c => c.id === this.context.componentId
);
if (componentIndex === -1) {
@ -38,16 +38,16 @@ export class RemoveTraitLeafOperation extends BaseLeafOperation<RemoveTraitLeafO
return prev;
}
return produce(prev, draft => {
if (!draft.spec.components[componentIndex].traits[this.context.index]) {
if (!draft[componentIndex].traits[this.context.index]) {
console.warn('trait not foudn');
return;
}
draft.spec.components[componentIndex].traits.splice(this.context.index, 1);
draft[componentIndex].traits.splice(this.context.index, 1);
});
}
undo(prev: Application): Application {
const componentIndex = prev.spec.components.findIndex(
undo(prev: ApplicationComponent[]): ApplicationComponent[] {
const componentIndex = prev.findIndex(
c => c.id === this.context.componentId
);
if (componentIndex === -1) {
@ -55,10 +55,10 @@ export class RemoveTraitLeafOperation extends BaseLeafOperation<RemoveTraitLeafO
return prev;
}
return produce(prev, draft => {
if (draft.spec.components[componentIndex].traits.length < this.context.index) {
if (draft[componentIndex].traits.length < this.context.index) {
console.warn('corrupted index');
}
draft.spec.components[componentIndex].traits.splice(
draft[componentIndex].traits.splice(
this.context.index,
0,
this.deletedTrait

10
packages/editor/src/operations/leaf/updateSelectComponentLeafOperation.ts
View File

@ -1,4 +1,4 @@
import { Application } from '@sunmao-ui/core';
import { ApplicationComponent } from '@sunmao-ui/core';
import { eventBus, SelectComponentEvent } from '../../eventBus';
import { BaseLeafOperation } from '../type';
@ -9,22 +9,22 @@ export type UpdateSelectComponentLeafOperationContext = {
export class UpdateSelectComponentLeafOperation extends BaseLeafOperation<UpdateSelectComponentLeafOperationContext> {
private prevId!: string;
do(prev: Application): Application {
this.prevId = this.context.componentId || prev.spec.components[0].id;
do(prev: ApplicationComponent[]): ApplicationComponent[] {
this.prevId = this.context.componentId || prev[0].id;
setTimeout(() => {
eventBus.send(SelectComponentEvent, this.context.newId);
});
return prev;
}
redo(prev: Application): Application {
redo(prev: ApplicationComponent[]): ApplicationComponent[] {
setTimeout(() => {
eventBus.send(SelectComponentEvent, this.context.newId);
});
return prev;
}
undo(prev: Application): Application {
undo(prev: ApplicationComponent[]): ApplicationComponent[] {
setTimeout(() => {
eventBus.send(SelectComponentEvent, this.prevId);
});

22
packages/editor/src/operations/type.ts
View File

@ -1,4 +1,4 @@
import { Application } from '@sunmao-ui/core';
import { ApplicationComponent } from '@sunmao-ui/core';
export const leafSymbol = Symbol('leaf');
export const branchSymbol = Symbol('branch');
@ -130,13 +130,13 @@ export interface IOperation<TContext = any> extends IUndoRedo {
* infer the type of operation, leaf or branch
*/
type: symbol;
do(prev: Application): Application;
redo(prev: Application): Application;
undo(prev: Application): Application;
do(prev: ApplicationComponent[]): ApplicationComponent[];
redo(prev: ApplicationComponent[]): ApplicationComponent[];
undo(prev: ApplicationComponent[]): ApplicationComponent[];
}
/**
* leaf operation is the operation that actually change the spec
* leaf operation is the operation that actually change the schema
*/
export abstract class BaseLeafOperation<TContext> implements IOperation<TContext> {
context: TContext;
@ -150,13 +150,13 @@ export abstract class BaseLeafOperation<TContext> implements IOperation<TContext
* @param prev prev application schema
* @returns changed application schema
*/
abstract do(prev: Application): Application;
abstract do(prev: ApplicationComponent[]): ApplicationComponent[];
/**
* for leaf operation, most time redo is the same as do, override it if not
* @param prev prev application schema
* @returns changed application schema
*/
redo(prev: Application): Application {
redo(prev: ApplicationComponent[]): ApplicationComponent[] {
return this.do(prev);
}
/**
@ -164,7 +164,7 @@ export abstract class BaseLeafOperation<TContext> implements IOperation<TContext
* @param prev prev application schema
* @returns changed application schema
*/
abstract undo(prev: Application): Application;
abstract undo(prev: ApplicationComponent[]): ApplicationComponent[];
static isLeafOperation<T>(op: IOperation<T>): op is BaseLeafOperation<T> {
return op.type === leafSymbol;
@ -191,14 +191,14 @@ export abstract class BaseBranchOperation<TContext>
* @param prev prev application schema
* @returns changed application schema
*/
abstract do(prev: Application): Application;
abstract do(prev: ApplicationComponent[]): ApplicationComponent[];
/**
* for branch operation, redo is the same as do
* @param prev prev application schema
* @returns changed application schema
*/
redo(prev: Application): Application {
redo(prev: ApplicationComponent[]): ApplicationComponent[] {
return this.operationStack.reduce((prev, node) => {
prev = node.redo(prev);
return prev;
@ -211,7 +211,7 @@ export abstract class BaseBranchOperation<TContext>
* @param prev prev application schema
* @returns changed application schema
*/
undo(prev: Application): Application {
undo(prev: ApplicationComponent[]): ApplicationComponent[] {
return this.operationStack.reduceRight((prev, node) => {
prev = node.undo(prev);
return prev;

33
packages/editor/src/operations/useAppModel.ts
View File

@ -1,36 +1,25 @@
import { Application } from '@sunmao-ui/core';
import { ApplicationComponent } from '@sunmao-ui/core';
import { useEffect, useState } from 'react';
import { DefaultAppSchema } from '../constants';
import { eventBus } from '../eventBus';
import { AppModelManager } from './AppModelManager';
function getDefaultAppFromLS() {
try {
const appFromLS = localStorage.getItem('schema');
if (appFromLS) {
return JSON.parse(appFromLS);
}
return DefaultAppSchema;
} catch (error) {
console.warn(error);
return DefaultAppSchema;
}
}
export function useAppModel() {
const [app, setApp] = useState<Application>(getDefaultAppFromLS());
export function useAppModel(appModalManager: AppModelManager) {
const [components, setComponents] = useState<ApplicationComponent[]>(
appModalManager.components
);
useEffect(() => {
const onAppChange = (app: Application) => {
setApp(() => app);
const onComponents = (components: ApplicationComponent[]) => {
setComponents(() => components);
};
eventBus.on('appChange', onAppChange);
eventBus.on('componentsChange', onComponents);
return () => {
eventBus.off('appChange', onAppChange);
eventBus.off('componentsChange', onComponents);
};
}, []);
return {
app,
components,
};
}

13
packages/editor/src/operations/util.ts
View File

@ -1,4 +1,4 @@
import { ApplicationComponent, Application } from '@sunmao-ui/core';
import { ApplicationComponent } from '@sunmao-ui/core';
import { parseType } from '@sunmao-ui/runtime';
import { isDraft, original } from 'immer';
import { registry } from '../setup';
@ -15,21 +15,14 @@ export function genComponent(type: string, id: string): ApplicationComponent {
};
}
export function genId(componentType: string, app: Application): string {
export function genId(componentType: string, components: ApplicationComponent[]): string {
const { name } = parseType(componentType);
const componentsCount = app.spec.components.filter(
const componentsCount = components.filter(
component => component.type === componentType
).length;
return `${name}${componentsCount + 1}`;
}
export function getAllComponents(app: Application): ApplicationComponent[] {
return app.spec.components.reduce((acc, component) => {
acc.push(component);
return acc;
}, [] as ApplicationComponent[]);
}
export function tryOriginal<T>(val: T): T {
return isDraft(val) ? (original(val) as T) : val;
}

7
packages/editor/src/playground.tsx
View File

@ -9,6 +9,7 @@ import 'react-resizable/css/styles.css';
import { Editor } from './components/Editor';
import { AppModelManager } from './operations/AppModelManager';
import { appStorage } from './setup';
type Example = {
name: string;
@ -31,12 +32,12 @@ const Playground: React.FC<{ examples: Example[] }> = ({ examples }) => {
const apiService = ui.apiService;
const stateStore = ui.stateManager.store;
const { app, modules = [] } = example.value;
const { modules = [] } = example.value;
modules.forEach(m => {
registry.registerModule(m);
});
localStorage.removeItem('schema');
const appModelManager = new AppModelManager(app);
const appModelManager = new AppModelManager(appStorage.components);
return {
App,
@ -88,6 +89,8 @@ const Playground: React.FC<{ examples: Example[] }> = ({ examples }) => {
registry={registry!}
stateStore={stateStore!}
apiService={apiService!}
appModelManager={appModelManager}
appStorage={appStorage}
/>
)}
</Box>

48
packages/editor/src/setup.ts
View File

@ -1,6 +1,6 @@
import { Application, ApplicationComponent } from '@sunmao-ui/core';
import { initSunmaoUI } from '@sunmao-ui/runtime';
import { ChildrenMap } from './components/StructureTree';
import { AppStorage } from './AppStorage';
import { AppModelManager } from './operations/AppModelManager';
const ui = initSunmaoUI();
@ -8,39 +8,15 @@ const App = ui.App;
const registry = ui.registry;
const apiService = ui.apiService;
const stateStore = ui.stateManager.store;
const appStorage = new AppStorage(registry);
const appModelManager = new AppModelManager(appStorage.components);
type ApplicationInstanceContext = {
app: Application | undefined;
childrenMap: ChildrenMap | undefined;
components: ApplicationComponent[];
dataSources: ApplicationComponent[];
selectedComponent: ApplicationComponent | undefined;
export {
ui,
App,
registry,
apiService,
stateStore,
appStorage,
appModelManager,
};
const ApplicationInstance = new Proxy<ApplicationInstanceContext>(
{
app: undefined,
childrenMap: undefined,
selectedComponent:undefined,
components: [],
dataSources: [],
},
{
set<T extends keyof ApplicationInstanceContext>(
target: ApplicationInstanceContext,
key: T,
data: ApplicationInstanceContext[T]
) {
Reflect.set(target, key, data);
return true;
},
get<T extends keyof ApplicationInstanceContext>(
target: ApplicationInstanceContext,
key: keyof ApplicationInstanceContext
): ApplicationInstanceContext[T] {
return Reflect.get(target, key);
},
}
);
export { ui, App, registry, apiService, stateStore, ApplicationInstance };

1
packages/runtime/src/components/_internal/ErrorBoundary.tsx
View File

@ -10,7 +10,6 @@ class ErrorBoundary extends React.Component<
}
static getDerivedStateFromError(error: unknown) {
console.log('!!!', { error });
return { error };
}

9
packages/runtime/src/components/_internal/ModuleRenderer.tsx
View File

@ -9,6 +9,7 @@ import { resolveAppComponents } from '../../services/resolveAppComponents';
import { ImplWrapper } from '../../services/ImplWrapper';
import { watch } from '../../utils/watchReactivity';
import { parseTypeComponents } from '../../utils/parseType';
import { ImplementedRuntimeModule } from '../../services/registry';
type Props = Static<typeof RuntimeModuleSchema> & {
evalScope?: Record<string, any>;
@ -47,8 +48,12 @@ export const ModuleRenderer: React.FC<Props> = props => {
// first eval the property, handlers, id of module
const evaledProperties = evalObject(properties);
const evaledHanlders = evalObject(handlers);
const moduleSpec = useMemo(() => services.registry.getModuleByType(type), [type]);
let moduleSpec: ImplementedRuntimeModule
try {
moduleSpec = useMemo(() => services.registry.getModuleByType(type), [type]);
} catch {
return <span>Cannot find Module {type}.</span>
}
const parsedtemplete = useMemo(
() => moduleSpec.components.map(parseTypeComponents),
[moduleSpec]

76
packages/runtime/src/components/chakra-ui/Dialog.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState, useRef } from 'react';
import { useEffect, useState, useRef } from 'react';
import { createComponent } from '@sunmao-ui/core';
import { ComponentImplementation } from '../../services/registry';
import {
@ -36,7 +36,7 @@ const Dialog: ComponentImplementation<Static<typeof PropsSchema>> = ({
text: 'cancel',
colorScheme: 'blue',
},
customStyle
customStyle,
}) => {
const [isOpen, setIsOpen] = useState(false);
const [title, setTitle] = useState(customerTitle || '');
@ -80,43 +80,43 @@ const Dialog: ComponentImplementation<Static<typeof PropsSchema>> = ({
};
return (
<React.Fragment>
<AlertDialog
isOpen={isOpen}
leastDestructiveRef={cancelRef}
onClose={() => setIsOpen(false)}
trapFocus={false}
portalProps={containerRef.current ? portalProps : undefined}
css={`${customStyle?.content}`}
>
<AlertDialogOverlay {...(containerRef.current ? dialogOverlayProps : {})}>
<AlertDialogContent {...(containerRef.current ? dialogContentProps : {})}>
<AlertDialogHeader>{title}</AlertDialogHeader>
<AlertDialogBody>
<Slot slotsMap={slotsMap} slot="content" />
</AlertDialogBody>
<AlertDialog
isOpen={isOpen}
leastDestructiveRef={cancelRef}
onClose={() => setIsOpen(false)}
trapFocus={false}
portalProps={containerRef.current ? portalProps : undefined}
css={`
${customStyle?.content}
`}
>
<AlertDialogOverlay {...(containerRef.current ? dialogOverlayProps : {})}>
<AlertDialogContent {...(containerRef.current ? dialogContentProps : {})}>
<AlertDialogHeader>{title}</AlertDialogHeader>
<AlertDialogBody>
<Slot slotsMap={slotsMap} slot="content" />
</AlertDialogBody>
<AlertDialogFooter>
<Button
ref={cancelRef}
colorScheme={cancelButton.colorScheme}
onClick={callbacks?.cancelDialog}
>
{cancelButton.text}
</Button>
<Button
disabled={disableConfirm}
colorScheme={confirmButton.colorScheme}
onClick={callbacks?.confirmDialog}
ml={3}
>
{confirmButton.text}
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>
</AlertDialog>
</React.Fragment>
<AlertDialogFooter>
<Button
ref={cancelRef}
colorScheme={cancelButton.colorScheme}
onClick={callbacks?.cancelDialog}
>
{cancelButton.text}
</Button>
<Button
disabled={disableConfirm}
colorScheme={confirmButton.colorScheme}
onClick={callbacks?.confirmDialog}
ml={3}
>
{confirmButton.text}
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>
</AlertDialog>
);
};

32
packages/runtime/src/components/chakra-ui/List.tsx
View File

@ -12,7 +12,7 @@ const List: ComponentImplementation<Static<typeof PropsSchema>> = ({
template,
app,
services,
customStyle
customStyle,
}) => {
if (!listData) {
return null;
@ -40,7 +40,15 @@ const List: ComponentImplementation<Static<typeof PropsSchema>> = ({
return listItemEle;
});
return <BaseList css={css`${customStyle?.content}`}>{listItems}</BaseList>;
return (
<BaseList
css={css`
${customStyle?.content}
`}
>
{listItems}
</BaseList>
);
};
const PropsSchema = Type.Object({
@ -55,19 +63,17 @@ const exampleProperties = {
name: 'Bowen Tan',
},
],
template: [
{
id: 'listItemName-{{$listItem.id}}',
type: 'core/v1/text',
properties: {
value: {
raw: 'Name：{{$listItem.name}}',
format: 'plain',
},
template: {
id: 'listItemName-{{$listItem.id}}',
type: 'core/v1/text',
properties: {
value: {
raw: 'Name：{{$listItem.name}}',
format: 'plain',
},
traits: [],
},
],
traits: [],
},
};
export default {

20
packages/runtime/src/components/core/ModuleContainer.tsx
View File

@ -1,5 +1,5 @@
import { createComponent } from '@sunmao-ui/core';
import { Static } from '@sinclair/typebox';
import { Static, Type } from '@sinclair/typebox';
import { ComponentImplementation } from '../../services/registry';
import { RuntimeModuleSchema } from '../../types/RuntimeSchema';
import { ModuleRenderer } from '../_internal/ModuleRenderer';
@ -16,6 +16,13 @@ const ModuleContainer: ComponentImplementation<Props> = ({
app,
customStyle
}) => {
if (!type) {
return <span>Please choose a module to render.</span>
}
if (!id) {
return <span>Please set a id for module.</span>
}
return (
<ModuleRenderer
id={id}
@ -38,11 +45,18 @@ export default {
description: 'ModuleContainer component',
isDraggable: true,
isResizable: true,
exampleProperties: {},
exampleProperties: {
id: 'myModule',
type: 'custom/v1/module',
},
exampleSize: [6, 6],
},
spec: {
properties: {},
properties: Type.Object({
id: Type.String(),
type: Type.String(),
properties: Type.Record(Type.String(), Type.Any()),
}),
state: {},
methods: [],
slots: [],

1
packages/runtime/src/index.ts
View File

@ -27,3 +27,4 @@ export * from './utils/encodeDragDataTransfer';
export * from './types/RuntimeSchema';
export * from './types/TraitPropertiesSchema';
export * from './constants';
export * from './services/registry';

15
packages/runtime/src/services/registry.tsx
View File

@ -53,18 +53,20 @@ import {
TraitImplementation,
} from 'src/types/RuntimeSchema';
import { parseType } from '../utils/parseType';
import { parseModuleSchema } from '../utils/parseModuleSchema';
import { cloneDeep } from 'lodash';
export type ComponentImplementation<T = any> = React.FC<T & ComponentImplementationProps>;
type ImplementedRuntimeComponent = RuntimeComponentSpec & {
export type ImplementedRuntimeComponent = RuntimeComponentSpec & {
impl: ComponentImplementation;
};
type ImplementedRuntimeTrait = RuntimeTraitSpec & {
export type ImplementedRuntimeTrait = RuntimeTraitSpec & {
impl: TraitImplementation;
};
type ImplementedRuntimeModule = RuntimeModuleSpec & {
export type ImplementedRuntimeModule = RuntimeModuleSpec & {
components: ApplicationComponent[];
};
@ -133,8 +135,9 @@ export class Registry {
return res;
}
registerModule(c: ImplementedRuntimeModule) {
if (this.modules.get(c.version)?.has(c.metadata.name)) {
registerModule(c: ImplementedRuntimeModule, overWrite = false) {
const parsedModule = parseModuleSchema(cloneDeep(c))
if (!overWrite && this.modules.get(c.version)?.has(c.metadata.name)) {
throw new Error(
`Already has module ${c.version}/${c.metadata.name} in this registry.`
);
@ -142,7 +145,7 @@ export class Registry {
if (!this.modules.has(c.version)) {
this.modules.set(c.version, new Map());
}
this.modules.get(c.version)?.set(c.metadata.name, c);
this.modules.get(c.version)?.set(c.metadata.name, parsedModule);
}
getModule(version: string, name: string): ImplementedRuntimeModule {

14
packages/runtime/src/utils/initStateAndMethod.ts
View File

@ -26,12 +26,16 @@ export function initStateAndMethod(
if (c.type === 'core/v1/moduleContainer') {
const moduleSchema = c.properties as Static<typeof RuntimeModuleSchema>;
const mSpec = registry.getModuleByType(moduleSchema.type).spec;
const moduleInitState: Record<string, unknown> = {};
for (const key in mSpec) {
moduleInitState[key] = undefined;
try {
const mSpec = registry.getModuleByType(moduleSchema.type).spec;
const moduleInitState: Record<string, unknown> = {};
for (const key in mSpec) {
moduleInitState[key] = undefined;
}
stateManager.store[moduleSchema.id] = moduleInitState;
} catch {
return;
}
stateManager.store[moduleSchema.id] = moduleInitState;
}
});
}

42
packages/runtime/src/utils/parseModuleSchema.ts Normal file
View File

@ -0,0 +1,42 @@
import { ImplementedRuntimeModule } from '../services/registry';
// add {{$moduleId}} in moduleSchema
export function parseModuleSchema(
module: ImplementedRuntimeModule
): ImplementedRuntimeModule {
const ids: string[] = [];
module.components.forEach(c => {
ids.push(c.id);
if (c.type === 'core/v1/moduleContainer') {
ids.push(c.properties.id as string);
}
if (c.type === 'chakra_ui/v1/list') {
ids.push((c.properties.template as any).id);
}
});
function traverse(tree: Record<string, any>) {
for (const key in tree) {
const val = tree[key];
if (typeof val === 'string') {
if (ids.includes(val)) {
tree[key] = `{{ $moduleId }}__${val}`;
} else {
for (const id of ids) {
if (val.includes(`${id}.`)) {
tree[key] = val.replaceAll(`${id}.`, `{{ $moduleId }}__${id}.`);
break;
}
}
}
} else if (typeof val === 'object') {
traverse(val);
}
}
}
traverse(module.components);
return module;
}