fix(plugin): transform error

Author: litingyes

package.json

@@ -89,7 +89,6 @@
     "hash-sum": "^2.0.0",
     "inquirer": "8",
     "lint-staged": "^13.1.0",
-    "lodash-es": "^4.17.21",
     "release-it": "^15.6.0",
     "sass": "^1.58.3",
     "simple-git-hooks": "^2.8.1",

pnpm-lock.yaml

@@ -4,26 +4,31 @@
 
 <script lang="ts" setup>
 import { ReplStore, Repl } from './vue-repl'
-import { provide, watch } from 'vue'
+import { provide, watch, computed } from 'vue'
 
 export interface Props {
-  code?: string
+  code?: string,
+  decode?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   code: `
     <template>
       <div>Hi, vite-plugin-vue-preview !</div>  
     </template>
-  `
+  `,
+  decode: false
 })
 
-const store = new ReplStore({ code: props.code });
+const code = computed(() => {
+  if (props.decode) return decodeURIComponent(props.code)
+  return props.code
+})
+
+const store = new ReplStore({ code: code.value });
 provide('store', store)
 
-watch(() => props.code, (val) => {
+watch(code, (val) => {
   store.state.activeFile.code = val
-}, {
-  immediate: true
 })
 </script>

src/components/VuePreview.vue

@@ -1,15 +1,10 @@
-import { escape } from 'lodash-es'
-
 const start = '```vue preview'
 const end = '```'
 
 const getCode = (code: string) => {
   code = code.match(/(?<=(```vue preview))(.)*(?=(```))/gims)![0]
-  const templateContent: string[] = code.match(/(?<=<template>)(.)*(?=<\/template>)/gims) ?? []
-  for (const templateCode of templateContent)
-    code = code.replace(templateCode, escape(templateCode))
-
-  return code.trim() ? `<VuePreview code="${code.trim()}"></VuePreview>\n` : '<VuePreview></VuePreview>\n'
+  const str = encodeURIComponent(code.trim())
+  return code.trim() ? `<VuePreview code="${str}" decode></VuePreview>\n` : '<VuePreview></VuePreview>\n'
 }
 
 export default function VuePreviewPlugin() {