From 798a549688e4a5f14092eaa515f24ab23767fc71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= Date: Wed, 30 Dec 2020 21:17:34 +0100 Subject: [PATCH] Vite and lerna are not friends --- lerna-debug.log | 6 - package-lock.json | 5 + package.json | 1 + packages/core/lib/components/Block.tsx | 73 ++++++----- .../lib/components/BlockMissing/display.tsx | 41 ++++++ .../core/lib/components/BlockMissing/index.ts | 7 ++ .../lib/components/BlockMissing/style.scss | 3 + .../core/lib/components/BlockMissing/util.ts | 0 .../core/lib/components/BlockOrdering.tsx | 4 +- packages/core/lib/components/BlockPicker.tsx | 4 +- .../core/lib/components/BlockPlaceholder.tsx | 4 +- packages/core/lib/components/Button.tsx | 1 + .../core/lib/components/Schlechtenburg.tsx | 7 +- packages/core/lib/components/Toolbar.tsx | 2 +- packages/core/lib/index.ts | 3 + packages/core/lib/use-dynamic-blocks.ts | 2 +- packages/core/package.json | 3 - packages/heading/package-lock.json | 117 ++++++++++++++++-- packages/heading/package.json | 6 +- packages/image/package-lock.json | 108 +++++++++++++++- packages/image/package.json | 6 +- packages/layout/package-lock.json | 117 ++++++++++++++++-- packages/layout/package.json | 6 +- packages/paragraph/lib/index.ts | 2 + packages/paragraph/package-lock.json | 117 ++++++++++++++++-- packages/paragraph/package.json | 6 +- public/initial-data.json | 2 +- src/App.tsx | 102 ++++++++------- 28 files changed, 607 insertions(+), 148 deletions(-) delete mode 100644 lerna-debug.log create mode 100644 packages/core/lib/components/BlockMissing/display.tsx create mode 100644 packages/core/lib/components/BlockMissing/index.ts create mode 100644 packages/core/lib/components/BlockMissing/style.scss create mode 100644 packages/core/lib/components/BlockMissing/util.ts diff --git a/lerna-debug.log b/lerna-debug.log deleted file mode 100644 index 4682f40..0000000 --- a/lerna-debug.log +++ /dev/null @@ -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) diff --git a/package-lock.json b/package-lock.json index 7c2715c..0459ef7 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index d933303..88663f3 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "build": "vuedx-typecheck . && vite build" }, "dependencies": { + "lodash-es": "^4.17.20", "vue": "^3.0.4" }, "devDependencies": { diff --git a/packages/core/lib/components/Block.tsx b/packages/core/lib/components/Block.tsx index 9f460c0..71c72c2 100644 --- a/packages/core/lib/components/Block.tsx +++ b/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 () => ( - - ); - } - const { triggerSizeCalculation } = useResizeObserver(el, BlockDimensions); watch(() => props.block.data, triggerSizeCalculation); @@ -80,25 +70,46 @@ export const SbBlock = defineComponent({ }); }; - return () =>
-
- {context.slots['context-toolbar'] ? context.slots['context-toolbar']() : null} - { - $event.stopPropagation(); - activate(); - }} - {...context.attrs} - /> -
; + return () => { + const BlockComponent = getBlock(props.block.name) as any; + + if (!BlockComponent) { + const MissingBlock = SbMissingBlock[mode.value]; + return ; + } + + if (mode.value === SbMode.Display) { + return () => ( + + ); + } + + return
+
+ {context.slots['context-toolbar'] ? context.slots['context-toolbar']() : null} + { + $event.stopPropagation(); + activate(); + }} + {...context.attrs} + /> +
; + }; }, }); diff --git a/packages/core/lib/components/BlockMissing/display.tsx b/packages/core/lib/components/BlockMissing/display.tsx new file mode 100644 index 0000000..c5f1410 --- /dev/null +++ b/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 { + 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, + 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 () => ( +
+ Missing block: {props.name} +
+ ); + }, +}); diff --git a/packages/core/lib/components/BlockMissing/index.ts b/packages/core/lib/components/BlockMissing/index.ts new file mode 100644 index 0000000..f484acb --- /dev/null +++ b/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')), +}; diff --git a/packages/core/lib/components/BlockMissing/style.scss b/packages/core/lib/components/BlockMissing/style.scss new file mode 100644 index 0000000..fc18b81 --- /dev/null +++ b/packages/core/lib/components/BlockMissing/style.scss @@ -0,0 +1,3 @@ +.sb-missing-block { + flex-basis: 100%; +} diff --git a/packages/core/lib/components/BlockMissing/util.ts b/packages/core/lib/components/BlockMissing/util.ts new file mode 100644 index 0000000..e69de29 diff --git a/packages/core/lib/components/BlockOrdering.tsx b/packages/core/lib/components/BlockOrdering.tsx index ce37412..260e561 100644 --- a/packages/core/lib/components/BlockOrdering.tsx +++ b/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'; diff --git a/packages/core/lib/components/BlockPicker.tsx b/packages/core/lib/components/BlockPicker.tsx index 77a5593..ac6cd61 100644 --- a/packages/core/lib/components/BlockPicker.tsx +++ b/packages/core/lib/components/BlockPicker.tsx @@ -8,8 +8,8 @@ import { BlockDefinition, } from '../use-dynamic-blocks'; -import SbButton from './Button'; -import SbModal from './Modal'; +import { SbButton } from './Button'; +import { SbModal } from './Modal'; import './BlockPicker.scss'; diff --git a/packages/core/lib/components/BlockPlaceholder.tsx b/packages/core/lib/components/BlockPlaceholder.tsx index 70bdca1..28262e0 100644 --- a/packages/core/lib/components/BlockPlaceholder.tsx +++ b/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) { diff --git a/packages/core/lib/components/Button.tsx b/packages/core/lib/components/Button.tsx index af58b5d..f87187b 100644 --- a/packages/core/lib/components/Button.tsx +++ b/packages/core/lib/components/Button.tsx @@ -1,4 +1,5 @@ import { defineComponent } from 'vue'; + import './Button.scss'; export const SbButton = defineComponent({ diff --git a/packages/core/lib/components/Schlechtenburg.tsx b/packages/core/lib/components/Schlechtenburg.tsx index 4b107ad..680b90d 100644 --- a/packages/core/lib/components/Schlechtenburg.tsx +++ b/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 () => (
customBlocks[name][mode.value]; + const getBlock = (name: string) => customBlocks[name]?.[mode.value]; return { mode, diff --git a/packages/core/package.json b/packages/core/package.json index 8db1ec7..5cfa4c5 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -23,8 +23,5 @@ "dependencies": { "vue": "^3.0.4", "lodash-es": "^4.17.20" - }, - "peerDependencies": { - "vue": "3" } } diff --git a/packages/heading/package-lock.json b/packages/heading/package-lock.json index eaea5c1..df998fb 100644 --- a/packages/heading/package-lock.json +++ b/packages/heading/package-lock.json @@ -4,19 +4,112 @@ "lockfileVersion": 1, "requires": true, "dependencies": { - "undefined": { - "version": "file:../blocks", + "@babel/helper-validator-identifier": { + "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" - }, - "dependencies": { - "undefined": { - "version": "file:../blocks", - "dev": true, - "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" } } } diff --git a/packages/heading/package.json b/packages/heading/package.json index 7d90724..428ac8c 100644 --- a/packages/heading/package.json +++ b/packages/heading/package.json @@ -24,9 +24,7 @@ "test": "echo \"Error: run tests from root\" && exit 1" }, "dependencies": { - "@schlechtenburg/core": "^0.0.0" - }, - "peerDependencies": { - "vue": "3" + "@schlechtenburg/core": "^0.0.0", + "vue": "^3.0.4" } } diff --git a/packages/image/package-lock.json b/packages/image/package-lock.json index 415285b..46d141a 100644 --- a/packages/image/package-lock.json +++ b/packages/image/package-lock.json @@ -4,10 +4,112 @@ "lockfileVersion": 1, "requires": true, "dependencies": { - "undefined": { - "version": "file:../blocks", + "@babel/helper-validator-identifier": { + "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" } } } diff --git a/packages/image/package.json b/packages/image/package.json index e8331d9..9b2732d 100644 --- a/packages/image/package.json +++ b/packages/image/package.json @@ -25,9 +25,7 @@ }, "dependencies": { "@schlechtenburg/core": "^0.0.0", - "@schlechtenburg/paragraph": "^0.0.0" - }, - "peerDependencies": { - "vue": "3" + "@schlechtenburg/paragraph": "^0.0.0", + "vue": "^3.0.4" } } diff --git a/packages/layout/package-lock.json b/packages/layout/package-lock.json index b16504e..8d8f4e1 100644 --- a/packages/layout/package-lock.json +++ b/packages/layout/package-lock.json @@ -4,19 +4,112 @@ "lockfileVersion": 1, "requires": true, "dependencies": { - "undefined": { - "version": "file:../blocks", + "@babel/helper-validator-identifier": { + "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" - }, - "dependencies": { - "undefined": { - "version": "file:../blocks", - "dev": true, - "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" } } } diff --git a/packages/layout/package.json b/packages/layout/package.json index 005df17..e9f08fe 100644 --- a/packages/layout/package.json +++ b/packages/layout/package.json @@ -24,9 +24,7 @@ "test": "echo \"Error: run tests from root\" && exit 1" }, "dependencies": { - "@schlechtenburg/core": "^0.0.0" - }, - "peerDependencies": { - "vue": "3" + "@schlechtenburg/core": "^0.0.0", + "vue": "^3.0.4" } } diff --git a/packages/paragraph/lib/index.ts b/packages/paragraph/lib/index.ts index c6c7728..6b29c3e 100644 --- a/packages/paragraph/lib/index.ts +++ b/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, diff --git a/packages/paragraph/package-lock.json b/packages/paragraph/package-lock.json index 1f12c13..96e33cf 100644 --- a/packages/paragraph/package-lock.json +++ b/packages/paragraph/package-lock.json @@ -4,19 +4,112 @@ "lockfileVersion": 1, "requires": true, "dependencies": { - "undefined": { - "version": "file:../blocks", + "@babel/helper-validator-identifier": { + "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" - }, - "dependencies": { - "undefined": { - "version": "file:../blocks", - "dev": true, - "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" } } } diff --git a/packages/paragraph/package.json b/packages/paragraph/package.json index fd92f73..f8f14e4 100644 --- a/packages/paragraph/package.json +++ b/packages/paragraph/package.json @@ -24,9 +24,7 @@ "test": "echo \"Error: run tests from root\" && exit 1" }, "dependencies": { - "@schlechtenburg/core": "^0.0.0" - }, - "peerDependencies": { - "vue": "3" + "@schlechtenburg/core": "^0.0.0", + "vue": "^3.0.4" } } diff --git a/public/initial-data.json b/public/initial-data.json index 58e44f2..c9a9281 100644 --- a/public/initial-data.json +++ b/public/initial-data.json @@ -71,4 +71,4 @@ } ] } -}; +} diff --git a/src/App.tsx b/src/App.tsx index 81622c7..0f31c02 100644 --- a/src/App.tsx +++ b/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|{} = reactive({}); + const block: Block = reactive({ + name: 'none', + blockId: '0', + data: null, + }); - fetch('/initial-data.json') - .then(res => res.json()) - .then(data => { - block.name = data.name; - block.blockId = data.blockId; - block.data = data.data; - }); + onBeforeMount(async () => { + const res = await fetch('/initial-data.json'); + const data = await res.json(); + block.name = data.name; + block.blockId = data.blockId; + block.data = data.data; + }); - return () => ( -
+ const Example = computed(() => { + switch (activeTab.value) { + case SbMode.Edit: + return ) => { + block.data = newBlock.data; + }} + customBlocks={[ + SbLayout, + /* + SbHeading, + SbImage, + SbParagraph, + */ + ]} + key="edit" + mode="edit" + />; + case SbMode.Edit: + return ; + case 'data': + return 
{ JSON.stringify(block, null, 2) }
; + } + }); + + return () => { + console.log('render App'); + return
- - {(() => { - switch (activeTab.value) { - case SbMode.Edit: - return ) => { - block.data = newBlock.data; - }} - customBlocks={[ - SbLayout, - SbHeading, - SbImage, - SbParagraph, - ]} - key="edit" - mode="edit" - />; - case SbMode.Edit: - return ; - case 'data': - return 
{ JSON.stringify(block, null, 2) }
; - } - })()} -
- ); + +
; + }; }, });