Started updating stuff

src/App.tsx

@@ -11,25 +11,25 @@ export default defineComponent({
   name: 'App',
 
   setup() {
-    const tree = reactive({
+    const block = reactive({
-      component: 'sb-layout',
+      block: 'sb-layout',
       orientation: 'vertical',
       children: [],
     });
 
     watchEffect(() => {
-      console.log(tree);
+      console.log(block);
     });
 
-    return { tree };
+    return { block };
   },
 
   render() {
     return (
       <div id="app">
-        <Schlechtenburg vModel={this.tree} />
+        <Schlechtenburg vModel={this.block} />
 
-        <pre><code>{JSON.stringify(this.tree, null, 2)}</code></pre>
+        <pre><code>{JSON.stringify(this.block, null, 2)}</code></pre>
       </div>
     );
   },

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: () => ({}) },
+    block: { type: Object, required: true },
-    tree: { type: Object, required: true },
   },
 
-  setup(props) {
+  setup(props, context) {
-    const userComponents = computed(() => ({
+    const { getBlock } = useDynamicBlocks(context);
-      ...props.components,
-    }));
-
-    const { getComponent } = useDynamicComponents(userComponents);
-
-    const state = reactive({
-      activeBlockId: null,
-    });
-    const activate = (id) => {
-      this.state.activeBlockId = id;
-    };
 
     return {
-      getComponent,
+      getBlock,
-      userComponents,
-      activate,
-      state,
     };
   },
 
   render() {
-    const Component = this.getComponent(this.tree.component);
+    const Block = this.getBlock(this.block.name);
-    console.log(this.tree, Component);
+    console.log(this.name, Block);
     return (
       <Component
         class="sb-main"
         user-components={this.components}
-        tree={this.tree}
+        data={this.block.data}
-        active-block-id={this.state.activeBlockId}
+        id={this.block.id}
         {...{
           on: {
-            tree: (tree) => this.$emit('tree', { ...tree }),
+            blockUpdate: (block) => this.$emit('block-update', block),
-            activate: this.activate,
           },
         }}
       />

src/components/TreeElement.ts

@@ -1,42 +1,34 @@
 import {
-  reactive,
+  Context,
-  watchEffect,
-  PropType,
 } from '@vue/composition-api';
 
 type IComponentDefinition = { [name: string]: () => Promise<any> };
 
-type ITreeElement = {
+type IBlockData = {
-  component: string;
+  name: string;
   id: string;
   data: { [name: string]: any };
 }
 
 type ITreeElementProps = {
-  userComponents: IComponentDefinition;
   id: string;
   data: { [key: string]: any};
 };
 
 export const model = {
-  prop: 'tree',
+  prop: 'block',
-  event: 'tree-update',
+  event: 'block-update',
 };
 
-export const treeElementProps = {
+export const blockProps = {
-  userComponents: {
-    type: (Object as unknown) as PropType<IComponentDefinition>,
-    required: true,
-  },
-  component: { type: Object, required: true },
   id: { type: String, required: true },
   data: { type: Object, default: () => ({}) },
 };
 
 // export function useActivation
 
-export function useDynamicComponents(components: IComponentDefinition) {
+export function useDynamicBlocks(context: Context) {
-  const getComponent = (name: string) => components[name];
+  const getBlock = (name: string) => context.root.$sb.blocks[name];
 
-  return { getComponent };
+  return { getBlock };
 }

src/components/user/Paragraph.tsx

@@ -7,7 +7,7 @@ import {
 import {
   model,
   treeElementProps,
-  useTree,
+  useDynamicComponents,
 } from '@components/TreeElement';
 
 import SbBlock from '@internal/Block';

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<any>;
+  display: () => Promise<any>;
+}
+
+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'));
+    addUserBlock(Vue, {
-    Vue.component('sb-image', () => import('@user/Image'));
+      name: 'sb-image',
-    Vue.component('sb-paragraph', () => import('@user/Paragraph'));
+      edit: () => import('@user/Image'),
-    Vue.component('sb-heading', () => import('@user/Heading'));
+      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));
   },
 };

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');

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,