Migrate to vue 3 + vite / vitest / vitepress for building

.gitignore

@@ -22,6 +22,7 @@ coverage
 
 # genereated file
 docs/components
+docs/.vitepress
 
 # Docs compiled build
 styleguide/*

docs/.vitepress/config.mjs

@@ -2,8 +2,7 @@ import * as path from "path";
 import * as fs from 'fs'
 import { fileURLToPath } from "url";
 import { defineConfig } from "vitepress";
-// Not supported with vite4, wait for next release "vitepress-plugin-search": "^1.0.4-alpha.16",
-// import { SearchPlugin } from 'vitepress-plugin-search'
+import { SearchPlugin } from 'vitepress-plugin-search'
 import PackageJSON from '../../package.json'
 import vueLiveMd from './vue-live-md-it.mjs'
 
@@ -100,7 +99,7 @@ export default defineConfig({
 
 	outDir: '../styleguide',
 	vite: {
-		plugins: [vueDocsPlugin /*, SearchPlugin()*/],
+		plugins: [vueDocsPlugin, SearchPlugin()],
 	},
 
 	markdown: {

docs/.vitepress/theme/components/vue-live-with-layout.js

@@ -1,4 +1,4 @@
-import { h, onMounted, ref, defineComponent } from "vue"
+import { h, onMounted, ref, defineComponent, markRaw } from "vue"
 import { VueLive } from "vue-live";
 import layout from "./vue-live-layout.vue";
 
@@ -9,13 +9,13 @@ export default defineComponent({
 		const props = {...attrs}
 		onMounted(async () => {
 			const NcComponents = (await import('../../../../dist/index.esm.js')).NcComponents
+			props.components = markRaw({...NcComponents})
 			if ("requires" in props) {
-				props.requires = {}
+				props.requires = markRaw({})
 				await Promise.allSettled(Object.keys(attrs.requires).map(async (key) => {
 					props.requires[key] = (await attrs.requires[key]).default
 				}))
 			}
-			props.components = {...NcComponents}
 			ready.value = true
 		})
 		// return the render function

docs/.vitepress/vue-live-md-it.mjs

@@ -25,7 +25,7 @@ function addVueLive(md, opts) {
 		// put all requires into a "requires" object
 		// add this as a prop
 		const imports = getImports(code)
-		const requires = imports.map(mod => `'${mod[1]}': import('../../node_modules/${mod[1]}${mod[1].startsWith('vue-material-design') ? '.vue' : ''}')`)
+		const requires = imports.map(mod => `"${mod[1]}": import("../../node_modules/${mod[1]}${mod[1].startsWith('vue-material-design') ? '.vue' : ''}")`)
 		const langArray = lang.split(' ')
 		const langClean = langArray[0]
 		const codeClean = md.utils.escapeHtml(code).replace(/\`/g, '\\`').replace(/\$/g, '\\$')
@@ -34,7 +34,7 @@ function addVueLive(md, opts) {
 		const markdownGenerated = `<vue-live ${jsx}
       :layoutProps="{lang:'${langClean}'}" 
       :code="\`${codeClean}\`"
-	  :requires="{${requires.join(',')}}"
+	  :requires='{${requires.join(',')}}'
       ${editorProps ? ` :editorProps="${editorProps}"` : ''}
        />`
 		return markdownGenerated