Vite and lerna are not friends

lerna-debug.log

@@ -1,6 +0,0 @@
-0 silly argv { _: [ 'bootstrap' ], lernaVersion: '3.22.1', '$0': 'lerna' }
-1 notice cli v3.22.1
-2 verbose rootPath /home/ben/Workspace/schlechtenburg
-3 error JSONError: Unexpected string in JSON at position 503 while parsing '{  "name": "@schlechtenburg/core",  "v' in core/package.json
-3 error     at module.exports (/home/ben/.local/share/nvm/versions/node/v14.5.0/lib/node_modules/lerna/node_modules/parse-json/index.js:26:19)
-3 error     at parse (/home/ben/.local/share/nvm/versions/node/v14.5.0/lib/node_modules/lerna/node_modules/load-json-file/index.js:15:9)

package-lock.json

@@ -6163,6 +6163,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
       "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
     },
+    "lodash-es": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.20.tgz",
+      "integrity": "sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA=="
+    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",

package.json

@@ -7,6 +7,7 @@
     "build": "vuedx-typecheck . && vite build"
   },
   "dependencies": {
+    "lodash-es": "^4.17.20",
     "vue": "^3.0.4"
   },
   "devDependencies": {

packages/core/lib/components/Block.tsx

@@ -13,6 +13,7 @@ import { useActivation } from '../use-activation';
 import { useDynamicBlocks } from '../use-dynamic-blocks';
 
 import { SbBlockOrdering } from './BlockOrdering';
+import SbMissingBlock from './BlockMissing/index';
 
 import './Block.scss';
 
@@ -56,17 +57,6 @@ export const SbBlock = defineComponent({
       'sb-block_active': isActive.value,
     }));
 
-    const BlockComponent = getBlock(props.block.name) as any;
-
-    if (mode.value === SbMode.Display) {
-      return () => (
-        <BlockComponent
-          data={props.block.data}
-          block-id={props.block.blockId}
-        />
-      );
-    }
-
     const { triggerSizeCalculation } = useResizeObserver(el, BlockDimensions);
     watch(() => props.block.data, triggerSizeCalculation);
 
@@ -80,25 +70,46 @@ export const SbBlock = defineComponent({
       });
     };
 
-    return () => <div
+    return () => {
-      ref={el}
+      const BlockComponent = getBlock(props.block.name) as any;
-      class={classes.value}
+
-    >
+      if (!BlockComponent) {
-      <div class="sb-block__edit-cover"></div>
+        const MissingBlock = SbMissingBlock[mode.value];
-      {context.slots['context-toolbar'] ? context.slots['context-toolbar']() : null}
+        return <MissingBlock
-      <BlockComponent
+          name={props.block.name}
-        data={props.block.data}
+          blockId={props.block.blockId}
-        blockId={props.block.blockId}
+        />;
-        eventUpdate={onChildUpdate}
+      }
-        eventPrependBlock={props.eventPrependBlock}
+
-        eventAppendBlock={props.eventAppendBlock}
+      if (mode.value === SbMode.Display) {
-        eventRemoveBlock={props.eventRemoveBlock}
+        return () => (
-        onClick={($event: MouseEvent) => {
+          <BlockComponent
-          $event.stopPropagation();
+            data={props.block.data}
-          activate();
+            blockId={props.block.blockId}
-        }}
+          />
-        {...context.attrs}
+        );
-      />
+      }
-    </div>;
+
+      return <div
+        ref={el}
+        class={classes.value}
+      >
+        <div class="sb-block__edit-cover"></div>
+        {context.slots['context-toolbar'] ? context.slots['context-toolbar']() : null}
+        <BlockComponent
+          data={props.block.data}
+          blockId={props.block.blockId}
+          eventUpdate={onChildUpdate}
+          eventPrependBlock={props.eventPrependBlock}
+          eventAppendBlock={props.eventAppendBlock}
+          eventRemoveBlock={props.eventRemoveBlock}
+          onClick={($event: MouseEvent) => {
+            $event.stopPropagation();
+            activate();
+          }}
+          {...context.attrs}
+        />
+      </div>;
+    };
   },
 });

packages/core/lib/components/BlockMissing/display.tsx

@@ -0,0 +1,41 @@
+import { defineComponent, PropType } from 'vue';
+import {
+  model,
+  blockProps,
+  BlockProps,
+} from '../../blocks';
+
+import './style.scss';
+
+interface MissingBlockProps extends BlockProps<any> {
+  eventUpdate: (b?: any) => void;
+  eventAppendBlock: (b?: any) => void;
+  eventRemoveBlock: () => void;
+}
+
+export default defineComponent({
+  name: 'sb-missing-block',
+
+  model,
+
+  props: {
+    name: String,
+    ...blockProps,
+    data: {
+      type: (null as unknown) as PropType<any>,
+      default: null,
+    },
+    eventUpdate: { type: Function, default: () => {} },
+    eventAppendBlock: { type: Function, default: () => {} },
+    eventRemoveBlock: { type: Function, default: () => {} },
+  },
+
+  setup(props: MissingBlockProps) {
+    console.log(props, props.name, props.data, props.blockId);
+    return () => (
+      <div class="sb-missing-block">
+        Missing block: {props.name}
+      </div>
+    );
+  },
+});

packages/core/lib/components/BlockMissing/index.ts

@@ -0,0 +1,7 @@
+import { defineAsyncComponent } from 'vue';
+
+export default {
+  name: 'sb-missing-block',
+  edit: defineAsyncComponent(() => import('./display')),
+  display: defineAsyncComponent(() => import('./display')),
+};

packages/core/lib/components/BlockMissing/style.scss

@@ -0,0 +1,3 @@
+.sb-missing-block {
+  flex-basis: 100%;
+}

packages/core/lib/components/BlockOrdering.tsx

@@ -1,4 +1,4 @@
-import debounce from 'lodash-es/debounce';
+import { debounce } from 'lodash-es';
 import {
   watch,
   reactive,
@@ -7,7 +7,7 @@ import {
 } from 'vue';
 import { useBlockSizing } from '../use-resize-observer';
 
-import SbButton from './Button';
+import { SbButton } from './Button';
 
 import './BlockOrdering.scss';
 

packages/core/lib/components/BlockPicker.tsx

@@ -8,8 +8,8 @@ import {
   BlockDefinition,
 } from '../use-dynamic-blocks';
 
-import SbButton from './Button';
+import { SbButton } from './Button';
-import SbModal from './Modal';
+import { SbModal } from './Modal';
 
 import './BlockPicker.scss';
 

packages/core/lib/components/BlockPlaceholder.tsx

@@ -1,11 +1,11 @@
 import { defineComponent } from 'vue';
 import { BlockDefinition } from '../blocks';
 
-import SbBlockPicker from './BlockPicker';
+import { SbBlockPicker } from './BlockPicker';
 
 import './BlockPlaceholder.scss';
 
-export const BlockPlaceholder = defineComponent({
+export const SbBlockPlaceholder = defineComponent({
   name: 'sb-block-placeholder',
 
   setup(props, context) {

packages/core/lib/components/Button.tsx

@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue';
+
 import './Button.scss';
 
 export const SbButton = defineComponent({

packages/core/lib/components/Schlechtenburg.tsx

@@ -3,6 +3,7 @@ import {
   provide,
   shallowReactive,
   ref,
+  watch,
   PropType,
   Ref,
 } from 'vue';
@@ -17,7 +18,7 @@ import { BlockLibrary } from '../use-dynamic-blocks';
 import { EditorDimensions, useResizeObserver } from '../use-resize-observer';
 import { ActiveBlock } from '../use-activation';
 
-import SbBlock from './Block';
+import { SbBlock } from './Block';
 
 import './Schlechtenburg.scss';
 
@@ -65,6 +66,10 @@ export const Schlechtenburg = defineComponent({
 
     provide(BlockLibrary, blockLibrary);
 
+    watch(props.block, () => {
+      console.log('Update', props.block);
+    });
+
     return () => (
       <div
         class="sb-main"

packages/core/lib/components/Toolbar.tsx

@@ -1,4 +1,4 @@
-import debounce from 'lodash-es/debounce';
+import { debounce } from 'lodash-es';
 import {
   defineComponent,
   watch,

packages/core/lib/index.ts

@@ -12,3 +12,6 @@ export * from './components/Block';
 export * from './components/BlockPicker';
 export * from './components/BlockOrdering';
 export * from './components/BlockPlaceholder';
+export * from './components/Toolbar';
+export * from './components/Button';
+export * from './components/Select';

packages/core/lib/use-dynamic-blocks.ts

@@ -10,7 +10,7 @@ export const BlockLibrary = Symbol('Schlechtenburg block library');
 export function useDynamicBlocks() {
   const mode = inject(Mode, ref(SbMode.Edit));
   const customBlocks: BlockLibraryDefinition = inject(BlockLibrary, reactive({}));
-  const getBlock = (name: string) => customBlocks[name][mode.value];
+  const getBlock = (name: string) => customBlocks[name]?.[mode.value];
 
   return {
     mode,

packages/core/package.json

@@ -23,8 +23,5 @@
   "dependencies": {
     "vue": "^3.0.4",
     "lodash-es": "^4.17.20"
-  },
-  "peerDependencies": {
-    "vue": "3"
   }
 }

packages/heading/package-lock.json

@@ -4,19 +4,112 @@
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
-		"undefined": {
+		"@babel/helper-validator-identifier": {
-			"version": "file:../blocks",
+			"version": "7.12.11",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+			"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+		},
+		"@babel/parser": {
+			"version": "7.12.11",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
+			"integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg=="
+		},
+		"@babel/types": {
+			"version": "7.12.12",
+			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+			"integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
 			"requires": {
-				"undefined": "file:../blocks"
+				"@babel/helper-validator-identifier": "^7.12.11",
-			},
+				"lodash": "^4.17.19",
-			"dependencies": {
+				"to-fast-properties": "^2.0.0"
-				"undefined": {
+			}
-					"version": "file:../blocks",
+		},
-					"dev": true,
+		"@vue/compiler-core": {
-					"requires": {
+			"version": "3.0.4",
-						"undefined": "file:../blocks"
+			"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.4.tgz",
-					}
+			"integrity": "sha512-snpMICsbWTZqBFnPB03qr4DtiSxVYfDF3DvbDSkN9Z9NTM8Chl8E/lYhKBSsvauq91DAWAh8PU3lr9vrLyQsug==",
-				}
+			"requires": {
+				"@babel/parser": "^7.12.0",
+				"@babel/types": "^7.12.0",
+				"@vue/shared": "3.0.4",
+				"estree-walker": "^2.0.1",
+				"source-map": "^0.6.1"
+			}
+		},
+		"@vue/compiler-dom": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.4.tgz",
+			"integrity": "sha512-FOxbHBIkkGjYQeTz1DlXQjS1Ms8EPXQWsdTdTPeohoS0KzCz6RiOjiAG+jLtMi6Nr5GX2h0TlCvcnI8mcsicFQ==",
+			"requires": {
+				"@vue/compiler-core": "3.0.4",
+				"@vue/shared": "3.0.4"
+			}
+		},
+		"@vue/reactivity": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.4.tgz",
+			"integrity": "sha512-AFTABrLhUYZY2on3ea9FxeXal7w3f6qIp9gT+/oG93H7dFTL5LvVnxygCopv7tvkIl/GSGQb/yK1D1gmXx1Pww==",
+			"requires": {
+				"@vue/shared": "3.0.4"
+			}
+		},
+		"@vue/runtime-core": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.4.tgz",
+			"integrity": "sha512-qH9e4kqU7b3u1JewvLmGmoAGY+mnuBqz7aEKb2mhpEgwa1yFv496BRuUfMXXMCix3+TndUVMJ8jt41FSdNppwg==",
+			"requires": {
+				"@vue/reactivity": "3.0.4",
+				"@vue/shared": "3.0.4"
+			}
+		},
+		"@vue/runtime-dom": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.4.tgz",
+			"integrity": "sha512-BGIoiTSESzWUhN0Ofi2X/q+HN8f6IUFmUEyyBGKbmx7DTAJNZhFfjqsepfXQrM5IGeTfJLB1ZEVyroDQJNXq3g==",
+			"requires": {
+				"@vue/runtime-core": "3.0.4",
+				"@vue/shared": "3.0.4",
+				"csstype": "^2.6.8"
+			}
+		},
+		"@vue/shared": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.4.tgz",
+			"integrity": "sha512-Swfbz31AaMX48CpFl+YmIrqOH9MgJMTrltG9e26A4ZxYx9LjGuMV+41WnxFzS3Bc9nbrc6sDPM37G6nIT8NJSg=="
+		},
+		"csstype": {
+			"version": "2.6.14",
+			"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
+			"integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
+		},
+		"estree-walker": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+		},
+		"lodash": {
+			"version": "4.17.20",
+			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+			"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+		},
+		"source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+		},
+		"to-fast-properties": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+			"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+		},
+		"vue": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.4.tgz",
+			"integrity": "sha512-2o+AiQF8sAupyhbyl3oxVCl3WCwC/n5NI7VMM+gVQ231qvSB8eI7sCBloloqDJK6yA367EEtmRSeSCf4sxCC+A==",
+			"requires": {
+				"@vue/compiler-dom": "3.0.4",
+				"@vue/runtime-dom": "3.0.4",
+				"@vue/shared": "3.0.4"
 			}
 		}
 	}

packages/heading/package.json

@@ -24,9 +24,7 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "@schlechtenburg/core": "^0.0.0"
+    "@schlechtenburg/core": "^0.0.0",
-  },
+    "vue": "^3.0.4"
-  "peerDependencies": {
-    "vue": "3"
   }
 }

packages/image/package-lock.json

@@ -4,10 +4,112 @@
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
-		"undefined": {
+		"@babel/helper-validator-identifier": {
-			"version": "file:../blocks",
+			"version": "7.12.11",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+			"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+		},
+		"@babel/parser": {
+			"version": "7.12.11",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
+			"integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg=="
+		},
+		"@babel/types": {
+			"version": "7.12.12",
+			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+			"integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
 			"requires": {
-				"undefined": "file:../blocks"
+				"@babel/helper-validator-identifier": "^7.12.11",
+				"lodash": "^4.17.19",
+				"to-fast-properties": "^2.0.0"
+			}
+		},
+		"@vue/compiler-core": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.4.tgz",
+			"integrity": "sha512-snpMICsbWTZqBFnPB03qr4DtiSxVYfDF3DvbDSkN9Z9NTM8Chl8E/lYhKBSsvauq91DAWAh8PU3lr9vrLyQsug==",
+			"requires": {
+				"@babel/parser": "^7.12.0",
+				"@babel/types": "^7.12.0",
+				"@vue/shared": "3.0.4",
+				"estree-walker": "^2.0.1",
+				"source-map": "^0.6.1"
+			}
+		},
+		"@vue/compiler-dom": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.4.tgz",
+			"integrity": "sha512-FOxbHBIkkGjYQeTz1DlXQjS1Ms8EPXQWsdTdTPeohoS0KzCz6RiOjiAG+jLtMi6Nr5GX2h0TlCvcnI8mcsicFQ==",
+			"requires": {
+				"@vue/compiler-core": "3.0.4",
+				"@vue/shared": "3.0.4"
+			}
+		},
+		"@vue/reactivity": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.4.tgz",
+			"integrity": "sha512-AFTABrLhUYZY2on3ea9FxeXal7w3f6qIp9gT+/oG93H7dFTL5LvVnxygCopv7tvkIl/GSGQb/yK1D1gmXx1Pww==",
+			"requires": {
+				"@vue/shared": "3.0.4"
+			}
+		},
+		"@vue/runtime-core": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.4.tgz",
+			"integrity": "sha512-qH9e4kqU7b3u1JewvLmGmoAGY+mnuBqz7aEKb2mhpEgwa1yFv496BRuUfMXXMCix3+TndUVMJ8jt41FSdNppwg==",
+			"requires": {
+				"@vue/reactivity": "3.0.4",
+				"@vue/shared": "3.0.4"
+			}
+		},
+		"@vue/runtime-dom": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.4.tgz",
+			"integrity": "sha512-BGIoiTSESzWUhN0Ofi2X/q+HN8f6IUFmUEyyBGKbmx7DTAJNZhFfjqsepfXQrM5IGeTfJLB1ZEVyroDQJNXq3g==",
+			"requires": {
+				"@vue/runtime-core": "3.0.4",
+				"@vue/shared": "3.0.4",
+				"csstype": "^2.6.8"
+			}
+		},
+		"@vue/shared": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.4.tgz",
+			"integrity": "sha512-Swfbz31AaMX48CpFl+YmIrqOH9MgJMTrltG9e26A4ZxYx9LjGuMV+41WnxFzS3Bc9nbrc6sDPM37G6nIT8NJSg=="
+		},
+		"csstype": {
+			"version": "2.6.14",
+			"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
+			"integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
+		},
+		"estree-walker": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+		},
+		"lodash": {
+			"version": "4.17.20",
+			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+			"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+		},
+		"source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+		},
+		"to-fast-properties": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+			"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+		},
+		"vue": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.4.tgz",
+			"integrity": "sha512-2o+AiQF8sAupyhbyl3oxVCl3WCwC/n5NI7VMM+gVQ231qvSB8eI7sCBloloqDJK6yA367EEtmRSeSCf4sxCC+A==",
+			"requires": {
+				"@vue/compiler-dom": "3.0.4",
+				"@vue/runtime-dom": "3.0.4",
+				"@vue/shared": "3.0.4"
 			}
 		}
 	}

packages/image/package.json

@@ -25,9 +25,7 @@
   },
   "dependencies": {
     "@schlechtenburg/core": "^0.0.0",
-    "@schlechtenburg/paragraph": "^0.0.0"
+    "@schlechtenburg/paragraph": "^0.0.0",
-  },
+    "vue": "^3.0.4"
-  "peerDependencies": {
-    "vue": "3"
   }
 }

packages/layout/package-lock.json

@@ -4,19 +4,112 @@
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
-		"undefined": {
+		"@babel/helper-validator-identifier": {
-			"version": "file:../blocks",
+			"version": "7.12.11",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+			"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+		},
+		"@babel/parser": {
+			"version": "7.12.11",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
+			"integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg=="
+		},
+		"@babel/types": {
+			"version": "7.12.12",
+			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+			"integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
 			"requires": {
-				"undefined": "file:../blocks"
+				"@babel/helper-validator-identifier": "^7.12.11",
-			},
+				"lodash": "^4.17.19",
-			"dependencies": {
+				"to-fast-properties": "^2.0.0"
-				"undefined": {
+			}
-					"version": "file:../blocks",
+		},
-					"dev": true,
+		"@vue/compiler-core": {
-					"requires": {
+			"version": "3.0.4",
-						"undefined": "file:../blocks"
+			"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.4.tgz",
-					}
+			"integrity": "sha512-snpMICsbWTZqBFnPB03qr4DtiSxVYfDF3DvbDSkN9Z9NTM8Chl8E/lYhKBSsvauq91DAWAh8PU3lr9vrLyQsug==",
-				}
+			"requires": {
+				"@babel/parser": "^7.12.0",
+				"@babel/types": "^7.12.0",
+				"@vue/shared": "3.0.4",
+				"estree-walker": "^2.0.1",
+				"source-map": "^0.6.1"
+			}
+		},
+		"@vue/compiler-dom": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.4.tgz",
+			"integrity": "sha512-FOxbHBIkkGjYQeTz1DlXQjS1Ms8EPXQWsdTdTPeohoS0KzCz6RiOjiAG+jLtMi6Nr5GX2h0TlCvcnI8mcsicFQ==",
+			"requires": {
+				"@vue/compiler-core": "3.0.4",
+				"@vue/shared": "3.0.4"
+			}
+		},
+		"@vue/reactivity": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.4.tgz",
+			"integrity": "sha512-AFTABrLhUYZY2on3ea9FxeXal7w3f6qIp9gT+/oG93H7dFTL5LvVnxygCopv7tvkIl/GSGQb/yK1D1gmXx1Pww==",
+			"requires": {
+				"@vue/shared": "3.0.4"
+			}
+		},
+		"@vue/runtime-core": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.4.tgz",
+			"integrity": "sha512-qH9e4kqU7b3u1JewvLmGmoAGY+mnuBqz7aEKb2mhpEgwa1yFv496BRuUfMXXMCix3+TndUVMJ8jt41FSdNppwg==",
+			"requires": {
+				"@vue/reactivity": "3.0.4",
+				"@vue/shared": "3.0.4"
+			}
+		},
+		"@vue/runtime-dom": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.4.tgz",
+			"integrity": "sha512-BGIoiTSESzWUhN0Ofi2X/q+HN8f6IUFmUEyyBGKbmx7DTAJNZhFfjqsepfXQrM5IGeTfJLB1ZEVyroDQJNXq3g==",
+			"requires": {
+				"@vue/runtime-core": "3.0.4",
+				"@vue/shared": "3.0.4",
+				"csstype": "^2.6.8"
+			}
+		},
+		"@vue/shared": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.4.tgz",
+			"integrity": "sha512-Swfbz31AaMX48CpFl+YmIrqOH9MgJMTrltG9e26A4ZxYx9LjGuMV+41WnxFzS3Bc9nbrc6sDPM37G6nIT8NJSg=="
+		},
+		"csstype": {
+			"version": "2.6.14",
+			"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
+			"integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
+		},
+		"estree-walker": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+		},
+		"lodash": {
+			"version": "4.17.20",
+			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+			"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+		},
+		"source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+		},
+		"to-fast-properties": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+			"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+		},
+		"vue": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.4.tgz",
+			"integrity": "sha512-2o+AiQF8sAupyhbyl3oxVCl3WCwC/n5NI7VMM+gVQ231qvSB8eI7sCBloloqDJK6yA367EEtmRSeSCf4sxCC+A==",
+			"requires": {
+				"@vue/compiler-dom": "3.0.4",
+				"@vue/runtime-dom": "3.0.4",
+				"@vue/shared": "3.0.4"
 			}
 		}
 	}

packages/layout/package.json

@@ -24,9 +24,7 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "@schlechtenburg/core": "^0.0.0"
+    "@schlechtenburg/core": "^0.0.0",
-  },
+    "vue": "^3.0.4"
-  "peerDependencies": {
-    "vue": "3"
   }
 }

packages/paragraph/lib/index.ts

@@ -1,6 +1,8 @@
 import { defineAsyncComponent } from 'vue';
 import { getDefaultData } from './util';
 
+export * from './util';
+
 export default {
   name: 'sb-paragraph',
   getDefaultData,

packages/paragraph/package-lock.json

@@ -4,19 +4,112 @@
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
-		"undefined": {
+		"@babel/helper-validator-identifier": {
-			"version": "file:../blocks",
+			"version": "7.12.11",
+			"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+			"integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+		},
+		"@babel/parser": {
+			"version": "7.12.11",
+			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
+			"integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg=="
+		},
+		"@babel/types": {
+			"version": "7.12.12",
+			"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+			"integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
 			"requires": {
-				"undefined": "file:../blocks"
+				"@babel/helper-validator-identifier": "^7.12.11",
-			},
+				"lodash": "^4.17.19",
-			"dependencies": {
+				"to-fast-properties": "^2.0.0"
-				"undefined": {
+			}
-					"version": "file:../blocks",
+		},
-					"dev": true,
+		"@vue/compiler-core": {
-					"requires": {
+			"version": "3.0.4",
-						"undefined": "file:../blocks"
+			"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.0.4.tgz",
-					}
+			"integrity": "sha512-snpMICsbWTZqBFnPB03qr4DtiSxVYfDF3DvbDSkN9Z9NTM8Chl8E/lYhKBSsvauq91DAWAh8PU3lr9vrLyQsug==",
-				}
+			"requires": {
+				"@babel/parser": "^7.12.0",
+				"@babel/types": "^7.12.0",
+				"@vue/shared": "3.0.4",
+				"estree-walker": "^2.0.1",
+				"source-map": "^0.6.1"
+			}
+		},
+		"@vue/compiler-dom": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.0.4.tgz",
+			"integrity": "sha512-FOxbHBIkkGjYQeTz1DlXQjS1Ms8EPXQWsdTdTPeohoS0KzCz6RiOjiAG+jLtMi6Nr5GX2h0TlCvcnI8mcsicFQ==",
+			"requires": {
+				"@vue/compiler-core": "3.0.4",
+				"@vue/shared": "3.0.4"
+			}
+		},
+		"@vue/reactivity": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.4.tgz",
+			"integrity": "sha512-AFTABrLhUYZY2on3ea9FxeXal7w3f6qIp9gT+/oG93H7dFTL5LvVnxygCopv7tvkIl/GSGQb/yK1D1gmXx1Pww==",
+			"requires": {
+				"@vue/shared": "3.0.4"
+			}
+		},
+		"@vue/runtime-core": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.0.4.tgz",
+			"integrity": "sha512-qH9e4kqU7b3u1JewvLmGmoAGY+mnuBqz7aEKb2mhpEgwa1yFv496BRuUfMXXMCix3+TndUVMJ8jt41FSdNppwg==",
+			"requires": {
+				"@vue/reactivity": "3.0.4",
+				"@vue/shared": "3.0.4"
+			}
+		},
+		"@vue/runtime-dom": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.0.4.tgz",
+			"integrity": "sha512-BGIoiTSESzWUhN0Ofi2X/q+HN8f6IUFmUEyyBGKbmx7DTAJNZhFfjqsepfXQrM5IGeTfJLB1ZEVyroDQJNXq3g==",
+			"requires": {
+				"@vue/runtime-core": "3.0.4",
+				"@vue/shared": "3.0.4",
+				"csstype": "^2.6.8"
+			}
+		},
+		"@vue/shared": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.4.tgz",
+			"integrity": "sha512-Swfbz31AaMX48CpFl+YmIrqOH9MgJMTrltG9e26A4ZxYx9LjGuMV+41WnxFzS3Bc9nbrc6sDPM37G6nIT8NJSg=="
+		},
+		"csstype": {
+			"version": "2.6.14",
+			"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
+			"integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
+		},
+		"estree-walker": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+		},
+		"lodash": {
+			"version": "4.17.20",
+			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+			"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+		},
+		"source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+		},
+		"to-fast-properties": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+			"integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+		},
+		"vue": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.4.tgz",
+			"integrity": "sha512-2o+AiQF8sAupyhbyl3oxVCl3WCwC/n5NI7VMM+gVQ231qvSB8eI7sCBloloqDJK6yA367EEtmRSeSCf4sxCC+A==",
+			"requires": {
+				"@vue/compiler-dom": "3.0.4",
+				"@vue/runtime-dom": "3.0.4",
+				"@vue/shared": "3.0.4"
 			}
 		}
 	}

packages/paragraph/package.json

@@ -24,9 +24,7 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "@schlechtenburg/core": "^0.0.0"
+    "@schlechtenburg/core": "^0.0.0",
-  },
+    "vue": "^3.0.4"
-  "peerDependencies": {
-    "vue": "3"
   }
 }

public/initial-data.json

@@ -71,4 +71,4 @@
       }
     ]
   }
-};
+}

src/App.tsx

@@ -1,11 +1,19 @@
-import { defineComponent, reactive, ref } from 'vue';
+import {
+  onBeforeMount,
+  computed,
+  defineComponent,
+  reactive,
+  ref,
+} from 'vue';
 
 import { Schlechtenburg, Block, SbMode } from '../packages/core/lib';
 
-import SbParagraph from '../packages/paragraph/lib';
+/*
 import SbHeading from '../packages/heading/lib';
-import SbLayout from '../packages/layout/lib';
+import SbParagraph from '../packages/paragraph/lib';
 import SbImage from '../packages/image/lib';
+ */
+import SbLayout from '../packages/layout/lib';
 
 import './App.scss';
 
@@ -14,18 +22,53 @@ export default defineComponent({
 
   setup() {
     const activeTab = ref('edit');
-    const block: Block<any>|{} = reactive({});
+    const block: Block<any> = reactive({
+      name: 'none',
+      blockId: '0',
+      data: null,
+    });
 
-    fetch('/initial-data.json')
+    onBeforeMount(async () => {
-      .then(res => res.json())
+      const res = await fetch('/initial-data.json');
-      .then(data => {
+      const data = await res.json();
-        block.name = data.name;
+      block.name = data.name;
-        block.blockId = data.blockId;
+      block.blockId = data.blockId;
-        block.data = data.data;
+      block.data = data.data;
-      });
+    });
 
-    return () => (
+    const Example = computed(() => {
-      <div id="app">
+      switch (activeTab.value) {
+        case SbMode.Edit:
+          return <Schlechtenburg
+            block={block}
+            eventUpdate={(newBlock: Block<any>) => {
+              block.data = newBlock.data;
+            }}
+            customBlocks={[
+              SbLayout,
+              /*
+              SbHeading,
+              SbImage,
+              SbParagraph,
+               */
+            ]}
+            key="edit"
+            mode="edit"
+          />;
+        case SbMode.Edit:
+          return <Schlechtenburg
+            block={block}
+            key="display"
+            mode="display"
+          />;
+        case 'data':
+          return <pre><code>{ JSON.stringify(block, null, 2) }</code></pre>;
+      }
+    });
+
+    return () => {
+      console.log('render App');
+      return <div id="app">
         <select
           value={activeTab.value}
           onChange={($event: Event) => {
@@ -36,35 +79,8 @@ export default defineComponent({
           <option>display</option>
           <option>data</option>
         </select>
-
+        <Example.value />
-        {(() => {
+      </div>;
-          switch (activeTab.value) {
+    };
-            case SbMode.Edit:
-              return <Schlechtenburg
-                block={block}
-                eventUpdate={(newBlock: Block<any>) => {
-                  block.data = newBlock.data;
-                }}
-                customBlocks={[
-                  SbLayout,
-                  SbHeading,
-                  SbImage,
-                  SbParagraph,
-                ]}
-                key="edit"
-                mode="edit"
-              />;
-            case SbMode.Edit:
-              return <Schlechtenburg
-                block={block}
-                key="display"
-                mode="display"
-              />;
-            case 'data':
-              return <pre><code>{ JSON.stringify(block, null, 2) }</code></pre>;
-          }
-        })()}
-      </div>
-    );
   },
 });