Fixed Typescript build

.drone.yml

@@ -16,14 +16,14 @@ steps:
       branch:
         - master
     image: appleboy/drone-scp
-    repo: b12f/bbcom
     settings:
       host: web5svsvy.wh.hosting.zone
       port: 2244
       username:
-        from_secret: bbcom_ssh_user
+        from_secret: dev_ssh_user
       key:
-        from_secret: bbcom_ssh_key
+        from_secret: dev_ssh_key
       source: ./dist/*
       target: /home/web5svsvy/html/schlechtenburg.b12f.io/
+      strip_components: 1
       rm: true

babel.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   presets: [
+    'vca-jsx',
     '@vue/cli-plugin-babel/preset',
   ],
 };

package-lock.json

@@ -3124,6 +3124,15 @@
         "babel-plugin-jest-hoist": "^24.9.0"
       }
     },
+    "babel-preset-vca-jsx": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/babel-preset-vca-jsx/-/babel-preset-vca-jsx-0.3.5.tgz",
+      "integrity": "sha512-UUsTwaUDn2y/7x32dc2veBj4+mqjNOhcxMlHFA4EHZLLxlVWMEFhSYROStpBkmZBy38iw8qFN8+SB9RVlhQ68w==",
+      "dev": true,
+      "requires": {
+        "@babel/plugin-syntax-jsx": "^7.2.0"
+      }
+    },
     "babel-runtime": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",

package.json

@@ -27,6 +27,7 @@
     "@vue/eslint-config-airbnb": "^5.0.2",
     "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/test-utils": "1.0.0-beta.31",
+    "babel-preset-vca-jsx": "^0.3.5",
     "chromedriver": "^80.0.1",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",

src/App.tsx

@@ -4,6 +4,7 @@ import {
   watchEffect,
 } from '@vue/composition-api';
 import Schlechtenburg from '@components/Schlechtenburg';
+import { BlockData } from './components/TreeElement';
 
 import './App.scss';
 
@@ -18,21 +19,24 @@ export default defineComponent({
         orientation: 'vertical',
         children: [],
       },
-    });
+    }) as BlockData;
 
-    watchEffect(() => {
-      console.log('base block update', block);
-    });
-
-    return { block };
-  },
-
-  render() {
-    return (
+    return () => (
       <div id="app">
-        <Schlechtenburg vModel={this.block} />
+        <Schlechtenburg
+          block={block}
+          {...{
+            on: {
+              update: (newBlock: BlockData) => {
+                block.name = newBlock.name;
+                block.blockId = newBlock.blockId;
+                block.data = newBlock.data;
+              },
+            },
+          }}
+        />
 
-        <pre><code>{JSON.stringify(this.block, null, 2)}</code></pre>
+        <pre><code>{JSON.stringify(block, null, 2)}</code></pre>
       </div>
     );
   },

src/components/Schlechtenburg.tsx

@@ -8,7 +8,7 @@ import {
 import {
   model,
   ActiveBlock,
-  BlockProps,
+  BlockData,
   BlockDefinition,
   BlockLibraryDefinition,
   BlockLibrary,
@@ -21,6 +21,11 @@ import SbParagraph from '@user/Paragraph/index';
 import SbImage from '@user/Image/index';
 import SbHeading from '@user/Heading/index';
 
+export interface SchlechtenburgProps {
+  customBlocks: BlockDefinition[];
+  block: BlockData;
+}
+
 export default defineComponent({
   name: 'schlechtenburg-main',
 
@@ -28,10 +33,10 @@ export default defineComponent({
 
   props: {
     customBlocks: { type: (null as unknown) as PropType<BlockDefinition[]>, default: () => [] },
-    block: { type: Object, required: true },
+    block: { type: (null as unknown) as PropType<BlockData>, required: true },
   },
 
-  setup(props: BlockProps) {
+  setup(props, context) {
     const activeBlock = ref(null);
     provide(ActiveBlock, activeBlock);
 
@@ -42,24 +47,21 @@ export default defineComponent({
       'sb-heading': SbHeading,
       ...props.customBlocks.reduce(
         (
-          blocks: BlockLibraryDefinition,
-          block: BlockLibraryDefinition,
+          blocks,
+          block,
         ) => ({ ...blocks, [block.name]: block }),
         {},
       ),
     });
     provide(BlockLibrary, blockLibrary);
-  },
 
-  render() {
-    console.log('render base');
-    return (
+    return () => (
       <SbBlock
         class="sb-main"
-        block={this.block}
+        block={props.block}
         {...{
           on: {
-            update: (block: BlockDefinition) => this.$emit('update', block),
+            update: (block: BlockDefinition) => context.emit('update', block),
           },
         }}
       />

src/components/TreeElement.ts

@@ -22,12 +22,12 @@ export interface BlockLibraryDefinition {
 
 export interface BlockData {
   name: string;
-  blockId: string|number;
+  blockId: string;
   data: { [name: string]: any };
 }
 
 export interface BlockProps {
-  blockId: string|number;
+  blockId: string;
   data: { [key: string]: any};
 }
 
@@ -37,7 +37,7 @@ export const model = {
 };
 
 export const blockProps = {
-  blockId: { type: [String, Number], required: true },
+  blockId: { type: String, required: true },
   data: { type: Object, default: () => ({}) },
 };
 
@@ -48,10 +48,10 @@ export function useDynamicBlocks() {
   return { customBlocks, getBlock };
 }
 
-export function useActivation(currentBlockId: string|number) {
-  const activeBlockId: Ref<string|number|null> = inject(ActiveBlock, ref(null));
+export function useActivation(currentBlockId: string) {
+  const activeBlockId: Ref<string|null> = inject(ActiveBlock, ref(null));
   const isActive = computed(() => activeBlockId.value === currentBlockId);
-  const activate = (blockId?: string|number|null) => {
+  const activate = (blockId?: string|null) => {
     activeBlockId.value = blockId !== undefined ? blockId : currentBlockId;
   };
   const requestActivation = () => {

src/components/internal/Block.tsx

@@ -16,11 +16,11 @@ export default defineComponent({
   name: 'sb-block',
 
   props: {
-    block: { type: (null as unknown) as PropType<BlockData>, default: false },
+    block: { type: (null as unknown) as PropType<BlockData>, required: true },
   },
 
   setup(props, context) {
-    const { isActive, activate, requestActivation } = useActivation(props.block.blockId);
+    const { isActive, activate } = useActivation(props.block.blockId);
     const { getBlock } = useDynamicBlocks();
     const classes = computed(() => ({
       'sb-block': true,
@@ -28,7 +28,6 @@ export default defineComponent({
     }));
 
     const onChildUpdate = (updated: {[key: string]: any}) => {
-      console.log('child update', updated);
       context.emit('update', {
         ...props.block,
         data: {
@@ -38,33 +37,24 @@ export default defineComponent({
       });
     };
 
-    return {
-      getBlock,
-      classes,
-      onChildUpdate,
-      activate,
-    };
-  },
+    const Block = getBlock(props.block.name).edit as any;
 
-  render() {
-    console.log('render block', this.block);
-    const Block = this.getBlock(this.block.name).edit;
-    return <Block
-      class={this.classes}
-      data={this.block.data}
-      block-id={this.block.blockId}
+    return () => <Block
+      class={classes.value}
+      data={props.block.data}
+      block-id={props.block.blockId}
       {...{
-        attrs: this.$attrs,
+        attrs: context.attrs,
         on: {
-          ...this.$listeners,
-          update: this.onChildUpdate,
-          'insert-block': (block: BlockDefinition) => this.$emit('insert-block', block),
-          'append-block': (block: BlockDefinition) => this.$emit('append-block', block),
+          ...context.listeners,
+          update: onChildUpdate,
+          'insert-block': (block: BlockDefinition) => context.emit('insert-block', block),
+          'append-block': (block: BlockDefinition) => context.emit('append-block', block),
         },
         nativeOn: {
-          click: ($event) => {
+          click: ($event: MouseEvent) => {
             $event.stopPropagation();
-            this.activate();
+            activate();
           },
         },
       }}

src/components/internal/BlockPicker.tsx

@@ -1,31 +1,31 @@
 import { computed, defineComponent } from '@vue/composition-api';
-import { useDynamicBlocks } from '../TreeElement';
+import {
+  useDynamicBlocks,
+  BlockDefinition,
+} from '../TreeElement';
 
 import './BlockPicker.scss';
 
 export default defineComponent({
+  name: 'sb-block-picker',
+
   props: {},
 
-  setup() {
+  setup(props, context) {
     const { customBlocks } = useDynamicBlocks();
 
     const blockList = computed(() => Object.keys(customBlocks).map((key) => customBlocks[key]));
-    console.log(customBlocks, blockList);
 
-    return { blockList };
-  },
-
-  render() {
-    return (
+    return () => (
       <div class="sb-block-picker">
-        {...this.blockList.map((block: BlockDefinition) => (
+        {...blockList.value.map((block: BlockDefinition) => (
           <button
             type="button"
             {...{
               on: {
-                click: ($event) => this.$emit('picked-block', {
+                click: () => context.emit('picked-block', {
                   name: block.name,
-                  blockId: +(new Date()),
+                  blockId: `${+(new Date())}`,
                   data: block.getDefaultData(),
                 }),
               },

src/components/internal/BlockPlaceholder.tsx

@@ -7,13 +7,13 @@ import './BlockPlaceholder.scss';
 export default defineComponent({
   name: 'sb-block-placeholder',
 
-  render() {
-    return (
+  setup(props, context) {
+    return () => (
       <div class="sb-block-placeholder">
         <BlockPicker
           {...{
             on: {
-              'picked-block': (block: BlockDefinition) => this.$emit('insert-block', block),
+              'picked-block': (block: BlockDefinition) => context.emit('insert-block', block),
             },
           }}
         />

src/components/internal/Toolbar.tsx

@@ -5,10 +5,10 @@ import './Toolbar.scss';
 export default defineComponent({
   name: 'sb-toolbar',
 
-  render() {
-    return (
+  setup(props, context) {
+    return () => (
       <div class="sb-toolbar">
-        {this.$slots.default}
+        {context.slots.default()}
       </div>
     );
   },

src/components/user/Heading/edit.tsx

@@ -0,0 +1 @@
+export default {};

src/components/user/Image/edit.tsx

@@ -9,7 +9,6 @@ import {
 import {
   model,
   blockProps,
-  useActivation,
 } from '@components/TreeElement';
 
 import SbToolbar from '@internal/Toolbar';
@@ -61,16 +60,7 @@ export default defineComponent({
       }
     };
 
-    return {
-      localData,
-      fileInput,
-      selectImage,
-      onImageSelect,
-    };
-  },
-
-  render() {
-    return (
+    return () => (
       <div class="sb-image">
         <SbToolbar>
           Image Edit
@@ -80,17 +70,17 @@ export default defineComponent({
             style="display: none;"
             {...{
               on: {
-                input: this.onImageSelect,
+                input: onImageSelect,
               },
             }}
           />
         </SbToolbar>
-        {this.localData.src
-          ? <img src={this.localData.src} alt={this.localData.alt} />
+        {localData.src
+          ? <img src={localData.src} alt={localData.alt} />
           : <button
             {...{
               on: {
-                click: this.selectImage,
+                click: selectImage,
               },
             }}
           >Select Image</button>

src/components/user/Layout/edit.tsx

@@ -8,10 +8,8 @@ import {
 import {
   model,
   blockProps,
-  useDynamicBlocks,
   useActivation,
   BlockData,
-  BlockDefinition,
 } from '@components/TreeElement';
 
 import SbBlock from '@internal/Block';
@@ -40,8 +38,7 @@ export default defineComponent({
   },
 
   setup(props: LayoutProps, context) {
-    const { getBlock } = useDynamicBlocks();
-    const { isActive, activate } = useActivation(props.blockId);
+    const { activate } = useActivation(props.blockId);
 
     const localData: LayoutData = reactive({
       orientation: props.data.orientation,
@@ -64,7 +61,7 @@ export default defineComponent({
       });
     };
 
-    const onChildUpdate = (child, updated) => {
+    const onChildUpdate = (child: BlockData, updated: BlockData) => {
       const index = localData.children.indexOf(child);
       context.emit('update', {
         children: [
@@ -99,44 +96,28 @@ export default defineComponent({
       activate(block.blockId);
     };
 
-    return {
-      isActive,
-      activate,
-
-      classes,
-      onChildUpdate,
-      toggleOrientation,
-      localData,
-      getBlock,
-      appendBlock,
-      insertBlock,
-    };
-  },
-
-  render() {
-    console.log('render layout');
-    return (
-      <div class={this.classes}>
+    return () => (
+      <div class={classes.value}>
         <SbToolbar slot="toolbar">
           <button
             type="button"
             {...{
               on: {
-                click: this.toggleOrientation,
+                click: toggleOrientation,
               },
             }}
-          >{this.localData.orientation}</button>
+          >{localData.orientation}</button>
         </SbToolbar>
 
-        {...this.localData.children.map((child, index) => (
+        {...localData.children.map((child, index) => (
           <SbBlock
-            key={child.id}
+            key={child.blockId}
             block={child}
             {...{
               on: {
-                update: (updated) => this.onChildUpdate(child, updated),
-                'insert-block': (block: BlockDefinition) => this.insertBlock(index, block),
-                'append-block': this.appendBlock,
+                update: (updated: BlockData) => onChildUpdate(child, updated),
+                'insert-block': (block: BlockData) => insertBlock(index, block),
+                'append-block': appendBlock,
               },
             }}
           />
@@ -145,7 +126,7 @@ export default defineComponent({
         <SbBlockPlaceholder
           {...{
             on: {
-              'insert-block': this.appendBlock,
+              'insert-block': appendBlock,
             },
           }}
         />

src/components/user/Layout/util.ts

@@ -1,11 +1,11 @@
 import {
   BlockProps,
-  BlockDefinition,
+  BlockData,
 } from '@components/TreeElement';
 
 export interface LayoutData {
   orientation: string;
-  children: BlockDefinition[];
+  children: BlockData[];
 }
 
 export interface LayoutProps extends BlockProps {

src/components/user/Paragraph/edit.tsx

@@ -38,13 +38,15 @@ export default defineComponent({
   },
 
   setup(props: ParagraphProps, context) {
-    const localData = reactive({
+    const localData = (reactive({
       value: props.data.value,
       align: props.data.align,
       focused: false,
-    });
-
-    console.log(localData);
+    }) as any) as {
+      value: string;
+      align: string;
+      focused: boolean;
+    };
 
     const inputEl: Ref<null|HTMLElement> = ref(null);
 
@@ -61,7 +63,6 @@ export default defineComponent({
     });
 
     watch(() => props.data, () => {
-      console.log('props update paragraph');
       localData.value = props.data.value;
       localData.align = props.data.align;
       if (inputEl.value) {
@@ -70,7 +71,7 @@ export default defineComponent({
     });
 
     const onTextUpdate = ($event: InputEvent) => {
-      localData.value = $event.target.innerHTML;
+      localData.value = ($event.target as HTMLElement).innerHTML;
     };
 
     const classes = computed(() => ({
@@ -79,6 +80,10 @@ export default defineComponent({
       [`sb-paragraph_align-${localData.align}`]: true,
     }));
 
+    const setAlignment = ($event: Event) => {
+      context.emit('update', { align: ($event.target as HTMLSelectElement).value });
+    };
+
     const onFocus = () => {
       localData.focused = true;
     };
@@ -93,7 +98,7 @@ export default defineComponent({
 
     const onKeypress = ($event: KeyboardEvent) => {
       if ($event.key === 'Enter') {
-        const blockId = +(new Date());
+        const blockId = `${+(new Date())}`;
         context.emit('insert-block', {
           blockId,
           name: 'sb-paragraph',
@@ -106,37 +111,32 @@ export default defineComponent({
       }
     };
 
-    return {
-      classes,
-      localData,
-      onTextUpdate,
-      onFocus,
-      onBlur,
-      onKeypress,
-      inputEl,
-    };
-  },
-
-  render() {
-    return (
-      <div class="sb-paragraph">
+    return () => (
+      <div class={classes.value}>
         <SbToolbar>
-          <select vModel={this.localData.align}>
+          <select
+            value={localData.align}
+            {...{
+              on: {
+                change: setAlignment,
+              },
+            }}
+          >
             <option>left</option>
             <option>center</option>
             <option>right</option>
           </select>
         </SbToolbar>
         <p
-          class={this.classes}
-          ref="inputEl"
+          class="sb-paragraph__input"
+          ref={inputEl}
           contenteditable
           {...{
             on: {
-              input: this.onTextUpdate,
-              focus: this.onFocus,
-              blur: this.onBlur,
-              keypress: this.onKeypress,
+              input: onTextUpdate,
+              focus: onFocus,
+              blur: onBlur,
+              keypress: onKeypress,
             },
           }}
         ></p>

src/components/user/Paragraph/style.scss

@@ -3,8 +3,8 @@
   width: 100%;
 
   &_align {
-    &-left { text-align: left; }
-    &-right { text-align: right; }
-    &-center { text-align: center; }
+    &-left { .sb-paragraph__input { text-align: left; } }
+    &-right {  .sb-paragraph__input { text-align: right; } }
+    &-center {  .sb-paragraph__input { text-align: center; } }
   }
 }