perf: the security, remove usePreview from version 1.7.2

Author: NelsonYong

packages/hooks/docs/.vitepress/router.ts

@@ -77,7 +77,7 @@ const Router = [
         text: 'useAsyncOrder',
         link: '/useAsyncOrder/',
       },
-      { text: 'usePreview', link: '/usePreview/' },
+      { text: 'usePreview ⚠️', link: '/usePreview/' },
     ],
   },
   {

packages/hooks/package.json

@@ -36,7 +36,6 @@
 		"@types/js-cookie": "^3.0.1",
 		"js-cookie": "^3.0.1",
 		"lodash": "^4.17.21",
-		"marked": "^4.0.17",
 		"qs": "^6.11.0",
 		"query-string": "^7.1.1",
 		"screenfull": "^5.0.0"

packages/hooks/src/index.ts

@@ -17,7 +17,7 @@ import useFormatResult from './useFormatResult'
 import useFetchs from './useFetchs'
 import useFullscreen from './useFullscreen'
 import useHover from './useHover'
-import usePreview from './usePreview'
+// import usePreview from './usePreview'
 import usePrevious from './usePrevious'
 import useInterval from './useInterval'
 import useInfiniteScroll from './useInfiniteScroll'
@@ -79,7 +79,7 @@ export {
   useMedia,
   useMouse,
   useNetwork,
-  usePreview,
+  // usePreview,
   usePrevious,
   useSessionStorageState,
   useSet,

packages/hooks/src/usePreview/index.en-US.md

@@ -6,14 +6,56 @@ map:
 
 # usePreview
 
+:::warning Remark
+
+Due to low usage frequency and reliance on security, `v1.7.2` has been deprecated. The following provides packaging ideas.
+
+:::
+
 A hook for previewing the md and vue component views
 
-## Code demonstration
+## Source Show
+
+```typescript
+import { marked } from 'marked'
+import { Ref, computed, unref, ref, watchEffect, createApp, VueElement } from 'vue'
+
+export default function usePreview(
+  md: Parameters<typeof createApp> | Ref<string> | string | VueElement,
+) {
+  const container = ref<Element>()
+  const mdCompute = computed(() => unref(md))
+
+  watchEffect(onInvalidate => {
+    if (mdCompute.value && container.value) {
+      try {
+        if (typeof mdCompute.value === 'string') {
+          const html = marked.parse(mdCompute.value)
+          if (html) container.value.innerHTML = html
+        } else {
+          const app = createApp(mdCompute.value)
+          app.mount(container.value)
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    }
+
+    onInvalidate(() => {
+      if (container.value) container.value.innerHTML = ''
+    })
+  })
+
+  return {
+    container,
+  }
+}
+```
 
-<demo src="./demo/demo.vue"
+<!-- <demo src="./demo/demo.vue"
   language="vue"
   title="Basic usage"
-  desc="Preview view"> </demo>
+  desc="Preview view"> </demo> -->
 
 ## API
 

packages/hooks/src/usePreview/index.ts

@@ -1,3 +1,6 @@
+/**
+ * Due to low usage frequency and reliance on security, `v1.7.2` has been deprecated.
+ */
 import { marked } from 'marked'
 import { Ref, computed, unref, ref, watchEffect, createApp, VueElement } from 'vue'
 

packages/hooks/src/usePreview/index.zh-CN.md

@@ -6,14 +6,57 @@ map:
 
 # usePreview
 
+:::warning 注意
+
+由于使用频率低和依赖的安全性，`v1.7.2 已弃用`。以下给予封装思路。
+
+:::
+
 用于预览 md 和 vue 组件视图的 hook
 
-## 代码演示
+## 源码展示
+
+```typescript
+import { marked } from 'marked'
+import { Ref, computed, unref, ref, watchEffect, createApp, VueElement } from 'vue'
+
+export default function usePreview(
+  md: Parameters<typeof createApp> | Ref<string> | string | VueElement,
+) {
+  const container = ref<Element>()
+  const mdCompute = computed(() => unref(md))
+
+  watchEffect(onInvalidate => {
+    if (mdCompute.value && container.value) {
+      try {
+        if (typeof mdCompute.value === 'string') {
+          const html = marked.parse(mdCompute.value)
+          if (html) container.value.innerHTML = html
+        } else {
+          const app = createApp(mdCompute.value)
+          app.mount(container.value)
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    }
+
+    onInvalidate(() => {
+      if (container.value) container.value.innerHTML = ''
+    })
+  })
+
+  return {
+    container,
+  }
+}
+```
 
+<!--
 <demo src="./demo/demo.vue"
   language="vue"
   title="基本用法"
-  desc="预览视图"> </demo>
+  desc="预览视图"> </demo> -->
 
 ## API