Fixed Typescript build

2020-05-25 23:10:21 +02:00 · 2020-05-25 23:10:21 +02:00 · 354c530610
parent 517dd91119
commit 354c530610
17 changed files with 131 additions and 152 deletions
--- a/.drone.yml
+++ b/.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
--- a/babel.config.js
+++ b/babel.config.js
@ -1,5 +1,6 @@
 module.exports = {
  presets: [
+    'vca-jsx',
    '@vue/cli-plugin-babel/preset',
  ],
 };
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/App.tsx
+++ b/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>
    );
  },
--- a/src/components/Schlechtenburg.tsx
+++ b/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),
          },
        }}
      />
--- a/src/components/TreeElement.ts
+++ b/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 = () => {
--- a/src/components/internal/Block.tsx
+++ b/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();
          },
        },
      }}
--- a/src/components/internal/BlockPicker.tsx
+++ b/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(),
                }),
              },
--- a/src/components/internal/BlockPlaceholder.tsx
+++ b/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),
            },
          }}
        />
--- a/src/components/internal/Toolbar.tsx
+++ b/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>
    );
  },
--- a/src/components/user/Heading/edit.tsx
+++ b/src/components/user/Heading/edit.tsx
@ -0,0 +1 @@
+export default {};
--- a/src/components/user/Image/edit.tsx
+++ b/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>
--- a/src/components/user/Layout/edit.tsx
+++ b/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,
            },
          }}
        />
--- a/src/components/user/Layout/util.ts
+++ b/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 {
--- a/src/components/user/Paragraph/edit.tsx
+++ b/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>
--- a/src/components/user/Paragraph/style.scss
+++ b/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; } }
  }
 }