Vite and lerna are not friends

vue3
Benjamin Bädorf 2020-12-30 21:17:34 +01:00
parent d11d52160b
commit 798a549688
No known key found for this signature in database
GPG Key ID: 4406E80E13CD656C
28 changed files with 607 additions and 148 deletions

View File

@ -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)

5
package-lock.json generated
View File

@ -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",

View File

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

View File

@ -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
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>;
return () => {
const BlockComponent = getBlock(props.block.name) as any;
if (!BlockComponent) {
const MissingBlock = SbMissingBlock[mode.value];
return <MissingBlock
name={props.block.name}
blockId={props.block.blockId}
/>;
}
if (mode.value === SbMode.Display) {
return () => (
<BlockComponent
data={props.block.data}
blockId={props.block.blockId}
/>
);
}
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>;
};
},
});

View File

@ -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>
);
},
});

View File

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

View File

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

View File

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

View File

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

View File

@ -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) {

View File

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

View File

@ -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"

View File

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

View File

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

View File

@ -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,

View File

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

View File

@ -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"
}
}
}

View File

@ -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"
}
}

View File

@ -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"
}
}
}

View File

@ -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"
}
}

View File

@ -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"
}
}
}

View File

@ -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"
}
}

View File

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

View File

@ -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"
}
}
}

View File

@ -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"
}
}

View File

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

View File

@ -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')
.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 () => (
<div id="app">
const Example = computed(() => {
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>
{(() => {
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>
);
<Example.value />
</div>;
};
},
});