Optimize for server side rendering

dist/block-renderer.common.js

@@ -19659,7 +19659,6 @@ module.exports = function (key) {
 __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
-__webpack_require__.d(__webpack_exports__, "install", function() { return /* reexport */ install; });
 __webpack_require__.d(__webpack_exports__, "BlockContentRenderer", function() { return /* reexport */ BlockContentRenderer; });
 
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
@@ -19686,12 +19685,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0e1ca7e0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/BlockContentRenderer.vue?vue&type=template&id=94edc506&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0e1ca7e0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/BlockContentRenderer.vue?vue&type=template&id=60dfb34a&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.blocks),function(block,index){return _c(block.component,{key:index,tag:"component",attrs:{"data":block.data}})}),1)}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/BlockContentRenderer.vue?vue&type=template&id=94edc506&
+// CONCATENATED MODULE: ./src/components/BlockContentRenderer.vue?vue&type=template&id=60dfb34a&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.map.js
 var es_array_map = __webpack_require__("d81d");
@@ -20465,23 +20464,13 @@ var componentTypes = {
 };
 /* harmony default export */ var BlockContentRenderervue_type_script_lang_js_ = ({
   props: ["content"],
-  data: function data() {
+  computed: {
-    return {
+    blocks: function blocks() {
-      blocks: []
-    };
-  },
-  mounted: function mounted() {
-    if (this.content) {
-      this.prepareBlocks();
-    }
-  },
-  methods: {
-    prepareBlocks: function prepareBlocks() {
       if (!this.content.blocks) {
-        return;
+        return [];
       }
 
-      this.blocks = this.content.blocks.map(function (block) {
+      return this.content.blocks.map(function (block) {
         return {
           component: componentTypes[block.type],
           type: block.type,
@@ -20489,13 +20478,6 @@ var componentTypes = {
         };
       });
     }
-  },
-  watch: {
-    content: function content() {
-      if (this.content) {
-        this.prepareBlocks();
-      }
-    }
   }
 });
 // CONCATENATED MODULE: ./src/components/BlockContentRenderer.vue?vue&type=script&lang=js&
@@ -20522,11 +20504,15 @@ var BlockContentRenderer_component = normalizeComponent(
 /* harmony default export */ var BlockContentRenderer = (BlockContentRenderer_component.exports);
 // CONCATENATED MODULE: ./src/main.js
 
+
 function install(Vue) {
   console.log("Ill be executed hopefully");
-  Vue.protoype.$baseFileUrl = "";
+  Vue.component("block-content-renderer", BlockContentRenderer);
 }
-/* harmony default export */ var main = (BlockContentRenderer);
+
+/* harmony default export */ var main = ({
+  install: install
+});
 
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
 

dist/block-renderer.umd.js

@@ -19668,7 +19668,6 @@ module.exports = function (key) {
 __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
-__webpack_require__.d(__webpack_exports__, "install", function() { return /* reexport */ install; });
 __webpack_require__.d(__webpack_exports__, "BlockContentRenderer", function() { return /* reexport */ BlockContentRenderer; });
 
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
@@ -19695,12 +19694,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0e1ca7e0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/BlockContentRenderer.vue?vue&type=template&id=94edc506&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0e1ca7e0-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/BlockContentRenderer.vue?vue&type=template&id=60dfb34a&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.blocks),function(block,index){return _c(block.component,{key:index,tag:"component",attrs:{"data":block.data}})}),1)}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/BlockContentRenderer.vue?vue&type=template&id=94edc506&
+// CONCATENATED MODULE: ./src/components/BlockContentRenderer.vue?vue&type=template&id=60dfb34a&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.map.js
 var es_array_map = __webpack_require__("d81d");
@@ -20474,23 +20473,13 @@ var componentTypes = {
 };
 /* harmony default export */ var BlockContentRenderervue_type_script_lang_js_ = ({
   props: ["content"],
-  data: function data() {
+  computed: {
-    return {
+    blocks: function blocks() {
-      blocks: []
-    };
-  },
-  mounted: function mounted() {
-    if (this.content) {
-      this.prepareBlocks();
-    }
-  },
-  methods: {
-    prepareBlocks: function prepareBlocks() {
       if (!this.content.blocks) {
-        return;
+        return [];
       }
 
-      this.blocks = this.content.blocks.map(function (block) {
+      return this.content.blocks.map(function (block) {
         return {
           component: componentTypes[block.type],
           type: block.type,
@@ -20498,13 +20487,6 @@ var componentTypes = {
         };
       });
     }
-  },
-  watch: {
-    content: function content() {
-      if (this.content) {
-        this.prepareBlocks();
-      }
-    }
   }
 });
 // CONCATENATED MODULE: ./src/components/BlockContentRenderer.vue?vue&type=script&lang=js&
@@ -20531,11 +20513,15 @@ var BlockContentRenderer_component = normalizeComponent(
 /* harmony default export */ var BlockContentRenderer = (BlockContentRenderer_component.exports);
 // CONCATENATED MODULE: ./src/main.js
 
+
 function install(Vue) {
   console.log("Ill be executed hopefully");
-  Vue.protoype.$baseFileUrl = "";
+  Vue.component("block-content-renderer", BlockContentRenderer);
 }
-/* harmony default export */ var main = (BlockContentRenderer);
+
+/* harmony default export */ var main = ({
+  install: install
+});
 
 // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "block-renderer",
   "description": "Content renderer for JSON blocks from Editor.js",
-  "version": "0.3.6",
+  "version": "0.4.2",
   "author": "KingOfDog <info@kingofdog.de>",
   "repository": {
     "type": "git",

src/components/BlockContentRenderer.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <component
+      :is="block.component"
       v-for="(block, index) in blocks"
       :key="index"
-      :is="block.component"
       :data="block.data"
     />
   </div>
@@ -38,34 +38,18 @@ const componentTypes = {
 
 export default {
   props: ["content"],
-  data() {
+  computed: {
-    return {
+    blocks() {
-      blocks: []
-    };
-  },
-  mounted() {
-    if (this.content) {
-      this.prepareBlocks();
-    }
-  },
-  methods: {
-    prepareBlocks() {
       if (!this.content.blocks) {
-        return;
+        return [];
       }
-      this.blocks = this.content.blocks.map(block => ({
+
+      return this.content.blocks.map(block => ({
         component: componentTypes[block.type],
         type: block.type,
         data: block.data
       }));
     }
-  },
-  watch: {
-    content() {
-      if (this.content) {
-        this.prepareBlocks();
-      }
-    }
   }
 };
 </script>

src/main.js

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