From 97568810881d2e00e14833fb6d37b08fa8a42167 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Fri, 11 Nov 2022 05:18:55 +0800
Subject: [PATCH] remove fragment-for-vue dependencies

---
 package.json                   |   2 -
 src/blocks/column.vue          |  29 +++++-----
 src/blocks/helpers/fragment.ts | 102 ---------------------------------
 yarn.lock                      |   5 --
 4 files changed, 13 insertions(+), 125 deletions(-)
 delete mode 100644 src/blocks/helpers/fragment.ts

diff --git a/package.json b/package.json
index b521295..0cc5997 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,6 @@
   "dependencies": {
     "@nuxt/kit": "^3.0.0-rc.1",
     "@vueuse/core": "^8.7.5",
-    "fragment-for-vue": "^1.0.1",
     "katex": "^0.15.1",
     "pathe": "^0.2.0",
     "prismjs": "^1.25.0",
@@ -78,7 +77,6 @@
     "vue-tsc": "^0.34.11"
   },
   "peerDependencies": {
-    "fragment-for-vue": "^1.0.1",
     "katex": "^0.15.1",
     "prismjs": "^1.25.0",
     "vue": "^3.2.20"
diff --git a/src/blocks/column.vue b/src/blocks/column.vue
index 5ddd515..610084a 100644
--- a/src/blocks/column.vue
+++ b/src/blocks/column.vue
@@ -1,35 +1,32 @@
 <script setup lang="ts">
-import { computed } from "vue"
-import { Fragment } from "fragment-for-vue/vue3"
+import { computed } from "vue";
 
-const baseWidth = 46 // todo: add magic numbers to a config json
+const baseWidth = 46; // todo: add magic numbers to a config json
 
 const props = defineProps({
   format: { type: Object, required: true },
-})
+});
 
 const columnStyle = computed(() => {
-  const columns = Number((1 / props.format.column_ratio).toFixed(0))
-  const totalWidth = (columns - 1) * baseWidth
+  const columns = Number((1 / props.format.column_ratio).toFixed(0));
+  const totalWidth = (columns - 1) * baseWidth;
   return {
     width: `calc((100% - ${totalWidth}px) * ${props.format.column_ratio})`,
-  }
-})
+  };
+});
 
-const spacerStyle = computed(() => ({ width: `${baseWidth}px` }))
+const spacerStyle = computed(() => ({ width: `${baseWidth}px` }));
 </script>
 
 <script lang="ts">
 export default {
   name: "NotionColumn",
-}
+};
 </script>
 
 <template>
-  <Fragment>
-    <div class="notion-column" :style="columnStyle">
-      <slot />
-    </div>
-    <div class="notion-spacer" :style="spacerStyle" />
-  </Fragment>
+  <div class="notion-column" :style="columnStyle">
+    <slot />
+  </div>
+  <div class="notion-spacer" :style="spacerStyle" />
 </template>
diff --git a/src/blocks/helpers/fragment.ts b/src/blocks/helpers/fragment.ts
deleted file mode 100644
index d0cdf91..0000000
--- a/src/blocks/helpers/fragment.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-const freeze = (object: any, property: any, value: any) => {
-  Object.defineProperty(object, property, {
-    configurable: true,
-    get() {
-      return value
-    },
-    set(v) {
-      console.warn(`tried to set frozen property ${property} with ${v}`)
-    },
-  })
-}
-
-const unfreeze = (object: any, property: any, value = null) => {
-  Object.defineProperty(object, property, {
-    configurable: true,
-    writable: true,
-    value: value,
-  })
-}
-
-export default {
-  abstract: true,
-  name: "Fragment",
-
-  props: {
-    name: {
-      type: String,
-      default: () => Math.floor(Date.now() * Math.random()).toString(16),
-    },
-    html: {
-      type: String,
-      default: null,
-    },
-  },
-
-  mounted() {
-    //@ts-ignore
-    const container = this.$el
-    const parent = container.parentNode
-
-    container.__isFragment = true
-    container.__isMounted = false
-
-    const head = document.createComment(`fragment#${this.name}#head`)
-    const tail = document.createComment(`fragment#${this.name}#tail`)
-
-    container.__head = head
-    container.__tail = tail
-
-    // use document fragment to improve efficiency
-    let tpl = document.createDocumentFragment()
-    tpl.appendChild(head)
-
-    Array.from(container.childNodes).forEach((node: any) => {
-      // container.appendChild(node, true)
-      let notFrChild = !node.hasOwnProperty("__isFragmentChild__")
-      tpl.appendChild(node)
-      if (notFrChild) {
-        freeze(node, "parentNode", container)
-        freeze(node, "__isFragmentChild__", true)
-      }
-    })
-
-    tpl.appendChild(tail)
-
-    // embed html
-    //@ts-ignore
-    if (this.html) {
-      let template = document.createElement("template")
-      //@ts-ignore
-      template.innerHTML = this.html
-      // copy elements over
-      Array.from(template.content.childNodes).forEach((node) => {
-        tpl.appendChild(node)
-      })
-    }
-
-    let next = container.nextSibling
-    parent.insertBefore(tpl, container, true)
-    parent.removeChild(container)
-    freeze(container, "parentNode", parent)
-    freeze(container, "nextSibling", next)
-    if (next) freeze(next, "previousSibling", container)
-
-    container.__isMounted = true
-  },
-
-  //@ts-ignore
-  render(h) {
-    //@ts-ignore
-    const children = this.$slots.default
-
-    // add fragment attribute on the children
-    if (children && children.length)
-      children.forEach(
-        //@ts-ignore
-        (child) => (child.data = { ...child.data, attrs: { fragment: this.name, ...(child.data || {}).attrs } })
-      )
-
-    return h("div", { attrs: { fragment: this.name } }, children)
-  },
-}
diff --git a/yarn.lock b/yarn.lock
index 368328c..20a8706 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1232,11 +1232,6 @@ flat@^5.0.0:
   resolved "https://registry.yarnpkg.com/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241"
   integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
 
-fragment-for-vue@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/fragment-for-vue/-/fragment-for-vue-1.0.1.tgz#669c9779bd89a986ad3c8dfaf26af25237629a45"
-  integrity sha512-LTjux+UjhTL5tyGAA64GfUsJLLBnth0OwU3XZgzm0Z7lsbf7oObwGpBYUpgL4BMmUJaFmBo8ubsBVNMMUtMERA==
-
 fs-extra@^10.0.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"