Upgrade to Vue 3

.eslintrc.js

@@ -1,10 +1,10 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
   parserOptions: {
-    parser: "babel-eslint"
+    parser: 'babel-eslint',
   },
   rules: {
     semi: [
@@ -22,8 +22,8 @@ module.exports = {
         'objects': 'always-multiline',
         'imports': 'always-multiline',
         'exports': 'always-multiline',
-        'functions': 'never'
+        'functions': 'never',
-      }
+      },
     ],
     'space-before-function-paren': [
       'error',
@@ -34,7 +34,7 @@ module.exports = {
     'max-len': ['warn', {
       'code': 100,
       'ignoreStrings': true,
-    }]
+    }],
   },
 
   extends: [

.gitignore

@@ -1,6 +1,6 @@
 .DS_Store
 node_modules
-
+dist
 
 # local env files
 .env.local

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
+  presets: ['@vue/cli-plugin-babel/preset'],
 };

dist/demo.html

@@ -1,10 +0,0 @@
-<meta charset="utf-8">
-<title>block-renderer demo</title>
-<script src="./block-renderer.umd.js"></script>
-
-<link rel="stylesheet" href="./block-renderer.css">
-
-
-<script>
-console.log(block-renderer)
-</script>

package.json

@@ -1,35 +1,46 @@
 {
   "name": "block-renderer",
   "description": "Content renderer for JSON blocks from Editor.js",
-  "version": "0.6.2",
+  "version": "0.7.7",
   "author": "KingOfDog <info@kingofdog.de>",
   "repository": {
     "type": "git",
     "url": "https://git.kingofdog.de/KingOfDog/block-renderer"
   },
   "homepage": "https://git.kingofdog.de/KingOfDog/block-renderer",
-  "scripts": {
+  "type": "module",
-    "serve": "vue-cli-service serve",
+  "files": [
-    "build": "vue-cli-service build",
+    "dist"
-    "build-package": "vue-cli-service build --target lib --name block-renderer ./src/main.js",
+  ],
-    "lint": "vue-cli-service lint"
+  "main": "./dist/block-renderer.umd.js",
+  "module": "./dist/block-renderer.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/block-renderer.es.js",
+      "require": "./dist/block-renderer.umd.js"
+    },
+    "./dist/block-renderer.css": {
+      "import": "./dist/block-renderer.css",
+      "require": "./dist/block-renderer.css"
+    }
+  },
+  "types": "./dist/main.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
   },
-  "main": "./dist/block-renderer.common.js",
   "dependencies": {
-    "core-js": "^3.6.5",
+    "katex": "^0.16.8",
-    "katex": "^0.12.0",
+    "vue": "^3.3.4"
-    "vue": "^2.6.11"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vitejs/plugin-vue": "^4.0.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
+    "path": "^0.12.7",
-    "@vue/cli-service": "~4.5.0",
+    "rollup-plugin-typescript2": "^0.34.1",
-    "@vue/eslint-config-prettier": "^6.0.0",
+    "typescript": "^4.9.3",
-    "babel-eslint": "^10.1.0",
+    "vite": "^4.0.0",
-    "eslint": "^6.7.2",
+    "vite-plugin-dts": "^1.7.1",
-    "eslint-plugin-prettier": "^3.1.3",
+    "vue-tsc": "^1.0.11"
-    "eslint-plugin-vue": "^6.2.2",
-    "prettier": "^1.19.1",
-    "vue-template-compiler": "^2.6.11"
   }
 }

src/components/AttachesBlock.vue

@@ -1,112 +1,84 @@
 <template>
   <div class="attaches-block">
-    <a
+    <a :href="url" target="blank">
-      :href="url"
+      <div :data-extension="data.file.extension" class="attaches-block-file-icon" :style="{ color: color }">
-      target="blank"
+        <svg width="32" height="40">
-    >
+          <path v-if="color"
-      <div
+            d="M17 0l15 14V3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h20-6zm0 2H3a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V14H17V2zm2 10h7.926L19 4.602V12z" />
-        :data-extension="data.file.extension"
+          <g v-else fill="#A8ACB8" fill-rule="evenodd">
-        class="attaches-block-file-icon"
+            <path fill-rule="nonzero"
-        :style="{ color: color }"
+              d="M17 0l15 14V3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h20-6zm0 2H3a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V14H17V2zm2 10h7.926L19 4.602V12z" />
-      >
-        <svg
-          width="32"
-          height="40"
-        >
-          <path
-            v-if="color"
-            d="M17 0l15 14V3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h20-6zm0 2H3a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V14H17V2zm2 10h7.926L19 4.602V12z"
-          />
-          <g
-            v-else
-            fill="#A8ACB8"
-            fill-rule="evenodd"
-          >
-            <path
-              fill-rule="nonzero"
-              d="M17 0l15 14V3v34a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h20-6zm0 2H3a1 1 0 0 0-1 1v34a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1V14H17V2zm2 10h7.926L19 4.602V12z"
-            />
             <path d="M7 22h18v2H7zm0 4h18v2H7zm0 4h18v2H7z" />
           </g>
         </svg>
       </div>
     </a>
     <div class="attaches-block-file-info">
-      <a
+      <a :href="url" target="blank">
-        :href="url"
-        target="blank"
-      >
         <p class="attaches-block-title">{{ data.title }}</p>
       </a>
-      <p class="attaches-block-size">{{ data.file.size | byteFormatter }}</p>
+      <p class="attaches-block-size">
+        {{ fileSize }}
+      </p>
     </div>
-    <a
+    <a :href="url" target="_blank" class="attaches-block-file-download-button">
-      :href="url"
+      <svg xmlns="http://www.w3.org/2000/svg" width="17pt" height="17pt" viewBox="0 0 17 17">
-      target="_blank"
-      class="attaches-block-file-download-button"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="17pt"
-        height="17pt"
-        viewBox="0 0 17 17"
-      >
         <path
           d="M9.457 8.945V2.848A.959.959 0 0 0 8.5 1.89a.959.959 0 0 0-.957.957v6.097L4.488 5.891a.952.952 0 0 0-1.351 0 .952.952 0 0 0 0 1.351l4.687 4.688a.955.955 0 0 0 1.352 0l4.687-4.688a.952.952 0 0 0 0-1.351.952.952 0 0 0-1.351 0zM3.59 14.937h9.82a.953.953 0 0 0 .953-.957.952.952 0 0 0-.953-.953H3.59a.952.952 0 0 0-.953.953c0 .532.425.957.953.957zm0 0"
-          fill-rule="evenodd"
+          fill-rule="evenodd" />
-        />
       </svg>
     </a>
   </div>
 </template>
 
 <script>
-import byteFormatter from "../filters/byteFormatter";
+import byteFormatter from '../filters/byteFormatter';
 
 const extensions = {
-  doc: "#3e74da",
+  doc: '#3e74da',
-  docx: "#3e74da",
+  docx: '#3e74da',
-  odt: "#3e74da",
+  odt: '#3e74da',
-  pdf: "#d47373",
+  pdf: '#d47373',
-  rtf: "#656ecd",
+  rtf: '#656ecd',
-  tex: "#5a5a5b",
+  tex: '#5a5a5b',
-  txt: "#5a5a5b",
+  txt: '#5a5a5b',
-  pptx: "#e07066",
+  pptx: '#e07066',
-  ppt: "#e07066",
+  ppt: '#e07066',
-  mp3: "#eab456",
+  mp3: '#eab456',
-  mp4: "#f676a6",
+  mp4: '#f676a6',
-  xls: "#3f9e64",
+  xls: '#3f9e64',
-  html: "#2988f0",
+  html: '#2988f0',
-  htm: "#2988f0",
+  htm: '#2988f0',
-  png: "#f676a6",
+  png: '#f676a6',
-  jpg: "#f67676",
+  jpg: '#f67676',
-  jpeg: "#f67676",
+  jpeg: '#f67676',
-  gif: "#f6af76",
+  gif: '#f6af76',
-  zip: "#4f566f",
+  zip: '#4f566f',
-  rar: "#4f566f",
+  rar: '#4f566f',
-  exe: "#e26f6f",
+  exe: '#e26f6f',
-  svg: "#bf5252",
+  svg: '#bf5252',
-  key: "#e07066",
+  key: '#e07066',
-  sketch: "#df821c",
+  sketch: '#df821c',
-  ai: "#df821c",
+  ai: '#df821c',
-  psd: "#388ae5",
+  psd: '#388ae5',
-  dmg: "#e26f6f",
+  dmg: '#e26f6f',
-  json: "#2988f0",
+  json: '#2988f0',
-  csv: "#3f9e64"
+  csv: '#3f9e64',
 };
 
 export default {
-  filters: {
+  props: ['data'],
-    byteFormatter
+  inject: ['$baseFileUrl'],
-  },
-  props: ["data"],
   computed: {
     color() {
       return extensions[this.data.file.extension.toLowerCase()];
     },
     url() {
       return `${this.$baseFileUrl}/${this.data.file.id}?name=${this.data.file.name}`;
+    },
+    fileSize() {
+      return byteFormatter(this.data.file.size)
     }
-  }
+  },
 };
 </script>

src/components/BlockContentRenderer.vue

@@ -1,26 +1,21 @@
 <template>
   <div>
-    <component
+    <component :is="block.component" v-for="(block, index) in blocks" :key="index" :data="block.data" />
-      :is="block.component"
-      v-for="(block, index) in blocks"
-      :key="index"
-      :data="block.data"
-    />
   </div>
 </template>
 
 <script>
-import AttachesBlock from "./AttachesBlock";
+import AttachesBlock from './AttachesBlock.vue';
-import ButtonBlock from "./ButtonBlock";
+import ButtonBlock from './ButtonBlock.vue';
-import EmbedBlock from "./EmbedBlock";
+import EmbedBlock from './EmbedBlock.vue';
-import HeaderBlock from "./HeaderBlock";
+import HeaderBlock from './HeaderBlock.vue';
-import ImageBlock from "./ImageBlock";
+import ImageBlock from './ImageBlock.vue';
-import LinkBlock from "./LinkBlock";
+import LinkBlock from './LinkBlock.vue';
-import ListBlock from "./ListBlock";
+import ListBlock from './ListBlock.vue';
-import MathBlock from "./MathBlock";
+import MathBlock from './MathBlock.vue';
-import ParagraphBlock from "./ParagraphBlock";
+import ParagraphBlock from './ParagraphBlock.vue';
-import QuoteBlock from "./QuoteBlock";
+import QuoteBlock from './QuoteBlock.vue';
-import WarningBlock from "./WarningBlock";
+import WarningBlock from './WarningBlock.vue';
 
 const componentTypes = {
   attaches: AttachesBlock,
@@ -33,11 +28,11 @@ const componentTypes = {
   math: MathBlock,
   paragraph: ParagraphBlock,
   quote: QuoteBlock,
-  warning: WarningBlock
+  warning: WarningBlock,
 };
 
 export default {
-  props: ["content"],
+  props: ['content'],
   computed: {
     blocks() {
       if (!this.content.blocks) {
@@ -47,9 +42,9 @@ export default {
       return this.content.blocks.map(block => ({
         component: componentTypes[block.type],
         type: block.type,
-        data: block.data
+        data: block.data,
       }));
-    }
+    },
-  }
+  },
 };
 </script>

src/components/ButtonBlock.vue

@@ -4,12 +4,12 @@
       :href="data.url"
       target="_blank"
       v-html="data.label"
-    ></a>
+    />
   </div>
 </template>
 
 <script>
 export default {
-  props: ["data"]
+  props: ['data'],
 };
 </script>

src/components/HeaderBlock.vue

@@ -1,11 +1,11 @@
+<template>
+  <component :is="`h${data.level}`" :id="data.anchor">
+    <span v-html="data.text" />
+  </component>
+</template>
+
 <script>
 export default {
-  props: ["data"],
+  props: ['data'],
-  render(createElement) {
-    return createElement("h" + this.data.level, {
-      attrs: { id: this.data.anchor },
-      domProps: { innerHTML: this.data.text }
-    });
-  }
 };
 </script>

src/components/ImageBlock.vue

@@ -1,33 +1,27 @@
 <template>
   <figure>
-    <img
+    <img v-lazyload :src="lowQualityUrl" :data-src="highQualityUrl">
-      v-lazyload
-      :src="lowQualityUrl"
-      :data-src="highQualityUrl"
-    />
 
-    <figcaption v-html="data.caption"></figcaption>
+    <figcaption v-html="data.caption" />
   </figure>
 </template>
 
 <script>
-import LazyLoadImage from "@/directives/lazy-load-image";
+import LazyLoadImage from '../directives/lazy-load-image';
 
 export default {
   directives: {
-    lazyload: LazyLoadImage
+    lazyload: LazyLoadImage,
   },
-  props: ["data"],
+  props: ['data'],
+  inject: ['$baseFileUrl'],
   computed: {
     lowQualityUrl() {
       return `${this.$baseFileUrl}/${this.data.file.id}?type=jpg&w=100&b=50`;
     },
     highQualityUrl() {
       return `${this.$baseFileUrl}/${this.data.file.id}?w=1200`;
-    }
     },
-  mounted() {
+  },
-    console.log("Hallo", this.$baseFileUrl);
-  }
 };
 </script>

src/components/LinkBlock.vue

@@ -1,24 +1,31 @@
 <template>
   <div class="link-block">
-    <a :href="data.link" target="_blank" class="link-block-href">
+    <a
+      :href="data.link"
+      target="_blank"
+      class="link-block-href"
+    >
       <div class="link-block-meta">
         <div class="link-block-title">{{ data.meta.title }}</div>
         <p class="link-block-description">{{ data.meta.description }}</p>
         <div class="link-block-anchor">{{ domain }}</div>
       </div>
 
-      <div class="link-block-image" :style="{ backgroundImage: `url(${data.meta.image.url}` }"></div>
+      <div
+        class="link-block-image"
+        :style="{ backgroundImage: `url(${data.meta.image.url}` }"
+      />
     </a>
   </div>
 </template>
 
 <script>
 export default {
-  props: ["data"],
+  props: ['data'],
   computed: {
     domain() {
-      return this.data.link.replace(/(https|http):\/\//, "").split(/[/?#]/)[0];
+      return this.data.link.replace(/(https|http):\/\//, '').split(/[/?#]/)[0];
-    }
+    },
-  }
+  },
 };
 </script>

src/components/ListBlock.vue

@@ -1,19 +1,12 @@
+<template>
+  <component :is="data.style === 'ordered' ? 'ol' : 'ul'">
+    <li v-for="item in data.items" :key="item" v-html="item"></li>
+  </component>
+</template>
+
 <script>
 export default {
-  props: ["data"],
+  props: ['data'],
-  render(createElement) {
-    return createElement(
-      this.data.style === "ordered" ? "ol" : "ul",
-      this.data.items.map(item =>
-        createElement("li", {
-          domProps: {
-            innerHTML: item
-          }
-        })
-      )
-    );
-  }
 };
 </script>
 
-<style></style>

src/components/MathBlock.vue

@@ -1,23 +1,23 @@
 <template>
   <figure>
-    <div v-html="content"></div>
+    <div v-html="content" />
   </figure>
 </template>
 
 <script>
-import katex from "katex";
+import katex from 'katex';
 
 export default {
-  props: ["data"],
+  props: ['data'],
   data() {
     return {
-      content: ""
+      content: '',
     };
   },
   mounted() {
     this.content = katex.renderToString(this.data.text, {
-      throwOnError: false
+      throwOnError: false,
     });
-  }
+  },
 };
 </script>

src/components/ParagraphBlock.vue

@@ -1,10 +1,10 @@
 <template>
-  <p v-html="data.text"></p>
+  <p v-html="data.text" />
 </template>
 
 <script>
 export default {
-  props: ["data"],
+  props: ['data'],
 };
 </script>
 

src/components/QuoteBlock.vue

@@ -1,14 +1,14 @@
 <template>
   <blockquote>
-    <p v-html="data.text"></p>
+    <p v-html="data.text" />
 
-    <footer v-html="data.caption"></footer>
+    <footer v-html="data.caption" />
   </blockquote>
 </template>
 
 <script>
 export default {
-  props: ["data"],
+  props: ['data'],
 };
 </script>
 

src/components/WarningBlock.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="warning-block">
-    <b v-html="title"></b>
+    <b v-html="title" />
-    <p v-html="data.message"></p>
+    <p v-html="data.message" />
   </div>
 </template>
 
 <script>
 export default {
-  props: ["data"],
+  props: ['data'],
   computed: {
     title() {
-      return this.data.title ? this.data.title.replace(/<br>/g, "") : "";
+      return this.data.title ? this.data.title.replace(/<br>/g, '') : '';
-    }
+    },
-  }
+  },
 };
 </script>

src/directives/lazy-load-image.js

@@ -1,5 +1,5 @@
 export default {
-  inserted: (el) => {
+  mounted: (el) => {
     function loadImage() {
       const image = new Image();
       image.src = el.dataset.src;
@@ -22,7 +22,7 @@ export default {
     function createObserver() {
       const options = {
         root: null,
-        threshold: '0',
+        threshold: "0",
       };
 
       const observer = new IntersectionObserver(handleIntersect, options);

src/filters/byteFormatter.js

@@ -1,4 +1,4 @@
-module.exports = function(size) {
+export default function (size) {
   var result;
 
   switch (true) {
@@ -27,4 +27,4 @@ module.exports = function(size) {
   }
 
   return result;
-};
+}

src/main.js

@@ -1,10 +0,0 @@
-import BlockContentRenderer from "./components/BlockContentRenderer.vue";
-
-function install(Vue) {
-  console.log("Ill be executed hopefully");
-
-  Vue.component("block-content-renderer", BlockContentRenderer);
-}
-
-export default { install };
-export { BlockContentRenderer };

src/main.ts

@@ -0,0 +1,13 @@
+import type { App } from 'vue';
+import BlockContentRenderer from './components/BlockContentRenderer.vue';
+
+export default {
+  install: (app: App, options: {
+    baseFileUrl?: string
+  }) => {
+    app.provide('$baseFileUrl', options.baseFileUrl);
+    app.component('BlockContentRenderer', BlockContentRenderer);
+  },
+};
+
+export { BlockContentRenderer };

src/vite-env.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "declaration": true,
+    "outDir": "dist",
+    "declarationDir": "dist",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+}

vite.config.ts

@@ -0,0 +1,60 @@
+import * as path from 'path'
+import vue from '@vitejs/plugin-vue'
+import typescript2 from 'rollup-plugin-typescript2';
+import { defineConfig } from 'vite';
+import dts from "vite-plugin-dts";
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    dts({
+      insertTypesEntry: true,
+    }),
+    typescript2({
+      check: false,
+      include: ["src/components/**/*.vue"],
+      tsconfigOverride: {
+        compilerOptions: {
+          outDir: "dist",
+          sourceMap: true,
+          declaration: true,
+          declarationMap: true,
+        },
+      },
+      exclude: ["vite.config.ts"]
+    })
+  ],
+  build: {
+    cssCodeSplit: true,
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: "src/main.ts",
+      name: 'blockRenderer',
+      formats: ["es", "cjs", "umd"],
+      fileName: format => `block-renderer.${format}.js`
+    },
+    rollupOptions: {
+      // make sure to externalize deps that should not be bundled
+      // into your library
+      input: {
+        main: path.resolve(__dirname, "src/main.ts")
+      },
+      external: ['vue'],
+      output: {
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name === 'main.css') return 'block-renderer.css';
+          return assetInfo.name;
+        },
+        exports: "named",
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+})