refactor blockable

janniks · janniks · commit 096785500cef · 2022-03-20T18:20:15.000+01:00
diff --git a/src/blocks/bookmark.vue b/src/blocks/bookmark.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import Blockable from "@/lib/blockable";
+import { Blockable } from "@/lib/blockable";
 import NotionTextRenderer from "@/blocks/helpers/text-renderer";
 
 export default {
diff --git a/src/blocks/callout.vue b/src/blocks/callout.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import Blockable from "@/lib/blockable";
+import { Blockable } from "@/lib/blockable";
 import NotionPageIcon from "@/blocks/helpers/page-icon";
 import NotionTextRenderer from "@/blocks/helpers/text-renderer";
 
diff --git a/src/blocks/code.vue b/src/blocks/code.vue
@@ -12,7 +12,7 @@
 <script>
 import Prism from "prismjs";
 import PrismComponent from "vue-prism-component";
-import Blockable, { blockComputed, blockProps } from "@/lib/blockable";
+import { Blockable, blockComputed, blockProps } from "@/lib/blockable";
 
 export default {
   extends: Blockable,
diff --git a/src/blocks/decorator.vue b/src/blocks/decorator.vue
@@ -66,7 +66,7 @@
 </template>
 
 <script>
-import Blockable, { blockProps } from "@/lib/blockable";
+import { Blockable, blockProps } from "@/lib/blockable";
 
 export default {
   extends: Blockable,
diff --git a/src/blocks/equation.vue b/src/blocks/equation.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import Blockable, { blockComputed } from "@/lib/blockable";
+import { Blockable, blockComputed } from "@/lib/blockable";
 import NotionCode from "@/blocks/code";
 
 export default {
diff --git a/src/blocks/header.vue b/src/blocks/header.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import Blockable from "@/lib/blockable";
+import { Blockable } from "@/lib/blockable";
 import NotionTextRenderer from "@/blocks/helpers/text-renderer";
 
 export default {
diff --git a/src/blocks/helpers/asset.vue b/src/blocks/helpers/asset.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Blockable, { blockComputed } from "@/lib/blockable";
+import { Blockable, blockComputed } from "@/lib/blockable";
 
 export default {
   extends: Blockable,
diff --git a/src/blocks/helpers/figure.vue b/src/blocks/helpers/figure.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import Blockable from "@/lib/blockable";
+import { Blockable } from "@/lib/blockable";
 import NotionAsset from "@/blocks/helpers/asset";
 import NotionImage from "@/blocks/helpers/image";
 import NotionTextRenderer from "@/blocks/helpers/text-renderer";
diff --git a/src/blocks/helpers/image.vue b/src/blocks/helpers/image.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import Blockable, { blockComputed } from "@/lib/blockable";
+import { Blockable, blockComputed } from "@/lib/blockable";
 
 export default {
   extends: Blockable,
diff --git a/src/blocks/helpers/nested-list.vue b/src/blocks/helpers/nested-list.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import Blockable, { blockComputed } from "@/lib/blockable";
+import { Blockable, blockComputed } from "@/lib/blockable";
 
 import { getListNumber } from "@/lib/utils";
 
diff --git a/src/blocks/helpers/page-header.vue b/src/blocks/helpers/page-header.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import Blockable from "@/lib/blockable";
+import { Blockable } from "@/lib/blockable";
 import Decorator from "@/blocks/decorator";
 
 export default {
diff --git a/src/blocks/helpers/page-icon.vue b/src/blocks/helpers/page-icon.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import Blockable, { blockProps } from "@/lib/blockable";
+import { Blockable, blockProps } from "@/lib/blockable";
 export default {
   extends: Blockable,
   name: "NotionPageIcon",
diff --git a/src/blocks/helpers/text-renderer.vue b/src/blocks/helpers/text-renderer.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import Blockable, { blockProps } from "@/lib/blockable";
+import { Blockable, blockProps } from "@/lib/blockable";
 
 import NotionDecorator from "@/blocks/decorator";
 
diff --git a/src/blocks/list.vue b/src/blocks/list.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script>
-import Blockable, { blockComputed } from "@/lib/blockable";
+import { Blockable, blockComputed } from "@/lib/blockable";
 import NotionNestedList from "@/blocks/helpers/nested-list";
 import NotionTextRenderer from "@/blocks/helpers/text-renderer";
 
diff --git a/src/blocks/page.vue b/src/blocks/page.vue
@@ -55,7 +55,7 @@
 </template>
 
 <script>
-import Blockable, { blockComputed } from "@/lib/blockable";
+import { Blockable, blockComputed } from "@/lib/blockable";
 import NotionPageHeader from "@/blocks/helpers/page-header";
 import NotionPageIcon from "@/blocks/helpers/page-icon";
 import NotionTextRenderer from "@/blocks/helpers/text-renderer";
diff --git a/src/blocks/quote.vue b/src/blocks/quote.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import Blockable from "@/lib/blockable";
+import { Blockable } from "@/lib/blockable";
 import NotionTextRenderer from "@/blocks/helpers/text-renderer";
 
 export default {
diff --git a/src/blocks/table-row.vue b/src/blocks/table-row.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import Blockable, { blockComputed } from "@/lib/blockable";
+import { Blockable, blockComputed } from "@/lib/blockable";
 import NotionTextRenderer from "@/blocks/helpers/text-renderer";
 
 export default {
diff --git a/src/blocks/table.vue b/src/blocks/table.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import Blockable from "@/lib/blockable";
+import { Blockable } from "@/lib/blockable";
 
 export default {
   extends: Blockable,
diff --git a/src/blocks/text.vue b/src/blocks/text.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Blockable from "@/lib/blockable";
+import { Blockable } from "@/lib/blockable";
 import NotionTextRenderer from "@/blocks/helpers/text-renderer";
 
 export default {
diff --git a/src/blocks/todo.vue b/src/blocks/todo.vue
@@ -16,7 +16,7 @@
 // TODO: add notion styling
 // TODO: add strikethrough
 
-import Blockable from "@/lib/blockable";
+import { Blockable } from "@/lib/blockable";
 import NotionTextRenderer from "@/blocks/helpers/text-renderer";
 
 export default {
diff --git a/src/blocks/toggle.vue b/src/blocks/toggle.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Blockable from "@/lib/blockable";
+import { Blockable } from "@/lib/blockable";
 import NotionTextRenderer from "@/blocks/helpers/text-renderer";
 
 export default {
diff --git a/src/components/block.vue b/src/components/block.vue
@@ -1,5 +1,10 @@
 <template>
-  <div v-if="isType('page')">
+  <component
+    v-if="blockOverrides.hasOwnProperty(type)"
+    :is="blockOverrides[type]"
+    v-bind="pass"
+  />
+  <div v-else-if="isType('page')">
     <NotionPage v-bind="pass">
       <slot />
     </NotionPage>
@@ -46,7 +51,8 @@
 </template>
 
 <script>
-import Blockable from "@/lib/blockable";
+import { Blockable } from "@/lib/blockable";
+
 import NotionBookmark from "@/blocks/bookmark";
 import NotionCallout from "@/blocks/callout";
 import NotionCode from "@/blocks/code";
diff --git a/src/components/notion-renderer.vue b/src/components/notion-renderer.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import Blockable from "@/lib/blockable";
+import { Blockable } from "@/lib/blockable";
 import NotionBlock from "@/components/block";
 
 import { defaultMapImageUrl, defaultMapPageUrl } from "@/lib/utils";
diff --git a/src/entry.js b/src/entry.js
@@ -12,7 +12,7 @@ const install = function installVueNotion(Vue) {
 
 // Create module definition for Vue.use()
 const plugin = {
-  install,
+  install
 };
 
 // To auto-install on non-es builds, when vue is found
@@ -29,14 +29,17 @@ if ("false" === process.env.ES_BUILD) {
     GlobalVue.use(plugin);
   }
 }
-// Default export is library as a whole, registered via Vue.use()
-export default plugin;
 
 // To allow individual component use, export components
 // each can be registered via Vue.component()
 export * from "@/components/index";
 
 // export additional js methods
 export * from "@/lib/api";
+export * from "@/lib/blockable";
+export * from "@/lib/utils";
+
+// Default export is library as a whole, registered via Vue.use()
+export default plugin;
 
 // todo: remove .esm from default packaging for cleaner imports
diff --git a/src/lib/blockable.js b/src/lib/blockable.js
@@ -2,6 +2,7 @@ import { getTextContent } from "@/lib/utils";
 
 export const blockProps = {
   blockMap: { type: Object, required: true },
+  blockOverrides: { type: Object, default: () => ({}) },
   contentId: { type: String, required: false },
   contentIndex: { type: Number, default: 0 },
   embedAllow: { type: String, default: "fullscreen" },
@@ -24,6 +25,7 @@ export const blockComputed = {
     // todo: make this more dynamic by iterating over blockProps attributes
     return {
       blockMap: this.blockMap,
+      blockOverrides: this.blockOverrides,
       contentId: this.contentId,
       contentIndex: this.contentIndex,
       embedAllow: this.embedAllow,
@@ -99,7 +101,7 @@ export const blockComputed = {
   }
 };
 
-export default {
+export const Blockable = {
   props: blockProps,
   computed: blockComputed,
   methods: {
