From 2153b06b2ddd8dbf663721942fd2a54c832c3d7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= Date: Wed, 20 May 2020 19:12:51 +0200 Subject: [PATCH] Started updating stuff --- src/App.tsx | 12 ++++---- src/components/Schlechtenburg.tsx | 36 +++++++--------------- src/components/TreeElement.ts | 26 ++++++---------- src/components/user/Paragraph.tsx | 2 +- src/lib.ts | 50 ++++++++++++++++++++++++++----- src/main.ts | 2 ++ src/store.ts | 3 +- 7 files changed, 72 insertions(+), 59 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index d67321b..153637c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,25 +11,25 @@ export default defineComponent({ name: 'App', setup() { - const tree = reactive({ - component: 'sb-layout', + const block = reactive({ + block: 'sb-layout', orientation: 'vertical', children: [], }); watchEffect(() => { - console.log(tree); + console.log(block); }); - return { tree }; + return { block }; }, render() { return (
- + - 
{JSON.stringify(this.tree, null, 2)}
+ 
{JSON.stringify(this.block, null, 2)}
); }, diff --git a/src/components/Schlechtenburg.tsx b/src/components/Schlechtenburg.tsx index fd2ff16..41a03cf 100644 --- a/src/components/Schlechtenburg.tsx +++ b/src/components/Schlechtenburg.tsx @@ -3,7 +3,7 @@ import { computed, reactive, } from '@vue/composition-api'; -import { model, useDynamicComponents } from '@components/TreeElement'; +import { model, useDynamicBlocks } from '@components/TreeElement'; export default defineComponent({ name: 'schlechtenburg-main', @@ -11,45 +11,29 @@ export default defineComponent({ model, props: { - components: { type: Object, default: () => ({}) }, - tree: { type: Object, required: true }, + block: { type: Object, required: true }, }, - setup(props) { - const userComponents = computed(() => ({ - ...props.components, - })); - - const { getComponent } = useDynamicComponents(userComponents); - - const state = reactive({ - activeBlockId: null, - }); - const activate = (id) => { - this.state.activeBlockId = id; - }; + setup(props, context) { + const { getBlock } = useDynamicBlocks(context); return { - getComponent, - userComponents, - activate, - state, + getBlock, }; }, render() { - const Component = this.getComponent(this.tree.component); - console.log(this.tree, Component); + const Block = this.getBlock(this.block.name); + console.log(this.name, Block); return ( this.$emit('tree', { ...tree }), - activate: this.activate, + blockUpdate: (block) => this.$emit('block-update', block), }, }} /> diff --git a/src/components/TreeElement.ts b/src/components/TreeElement.ts index 564c793..01295b5 100644 --- a/src/components/TreeElement.ts +++ b/src/components/TreeElement.ts @@ -1,42 +1,34 @@ import { - reactive, - watchEffect, - PropType, + Context, } from '@vue/composition-api'; type IComponentDefinition = { [name: string]: () => Promise }; -type ITreeElement = { - component: string; +type IBlockData = { + name: string; id: string; data: { [name: string]: any }; } type ITreeElementProps = { - userComponents: IComponentDefinition; id: string; data: { [key: string]: any}; }; export const model = { - prop: 'tree', - event: 'tree-update', + prop: 'block', + event: 'block-update', }; -export const treeElementProps = { - userComponents: { - type: (Object as unknown) as PropType, - required: true, - }, - component: { type: Object, required: true }, +export const blockProps = { id: { type: String, required: true }, data: { type: Object, default: () => ({}) }, }; // export function useActivation -export function useDynamicComponents(components: IComponentDefinition) { - const getComponent = (name: string) => components[name]; +export function useDynamicBlocks(context: Context) { + const getBlock = (name: string) => context.root.$sb.blocks[name]; - return { getComponent }; + return { getBlock }; } diff --git a/src/components/user/Paragraph.tsx b/src/components/user/Paragraph.tsx index 8879255..b797f68 100644 --- a/src/components/user/Paragraph.tsx +++ b/src/components/user/Paragraph.tsx @@ -7,7 +7,7 @@ import { import { model, treeElementProps, - useTree, + useDynamicComponents, } from '@components/TreeElement'; import SbBlock from '@internal/Block'; diff --git a/src/lib.ts b/src/lib.ts index 6011d7d..2da4afd 100644 --- a/src/lib.ts +++ b/src/lib.ts @@ -1,15 +1,49 @@ -import Vuex from 'vuex'; -import storeModule from './store'; /* eslint no-param-reassign: 0 */ +interface UserBlock { + name: string; + edit: () => Promise; + display: () => Promise; +} + +function addUserBlock(Vue, block) { + if (Vue.prototype.$sb.blocks[block.name]) { + console.warn(`Block ${block.name} is already registered`); + } + Vue.prototype.$sb.blocks[block.name] = block; +} + export default { - install(Vue, { store }: { store: Vuex }) { + install(Vue, { blocks }: { blocks: UserBlock[] } = { blocks: [] }) { + Vue.prototype.$sb = { + blocks: {}, + activeBlockId: null, + }; - store.registerModule('sb', storeModule); + addUserBlock(Vue, { + name: 'sb-layout', + edit: () => import('@user/Layout'), + display: () => import('@user/Layout'), + }); - Vue.component('sb-layout', () => import('@user/Layout')); - Vue.component('sb-image', () => import('@user/Image')); - Vue.component('sb-paragraph', () => import('@user/Paragraph')); - Vue.component('sb-heading', () => import('@user/Heading')); + addUserBlock(Vue, { + name: 'sb-image', + edit: () => import('@user/Image'), + display: () => import('@user/Image'), + }); + + addUserBlock(Vue, { + name: 'sb-paragraph', + edit: () => import('@user/Paragraph'), + display: () => import('@user/Paragraph'), + }); + + addUserBlock(Vue, { + name: 'sb-heading', + edit: () => import('@user/Heading'), + display: () => import('@user/Heading'), + }); + + blocks.forEach((block) => addUserBlock(Vue, block)); }, }; diff --git a/src/main.ts b/src/main.ts index 6e5c820..426692b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -8,10 +8,12 @@ import './main.scss'; Vue.config.productionTip = false; +Vue.use(Vuex); const store = new Vuex.Store({}); Vue.use(VueCompositionApi); Vue.use(VueSchlechtenburg); new Vue({ + store, render: (h) => h(App), }).$mount('#app'); diff --git a/src/store.ts b/src/store.ts index 554180d..60106b2 100644 --- a/src/store.ts +++ b/src/store.ts @@ -1,8 +1,9 @@ +/* eslint no-param-reassign: 0 */ import { GetterTree, MutationTree, ActionTree } from 'vuex'; interface State { activeBlockId: number|null; -}; +} const state: State = { activeBlockId: null,