fix(docs): make explicit import of example components

Author: MichaelGitArt

docs/src/components/Components/VueFile.vue

@@ -8,6 +8,7 @@
 <script lang="ts">
 import { defineComponent, Component } from 'vue'
 import { useAsyncState } from '@vueuse/core'
+import { imports } from '@/imports'
 
 export default defineComponent({
   name: 'VueFile',
@@ -21,8 +22,14 @@ export default defineComponent({
 
   setup(props) {
     const { state: component } = useAsyncState(async () => {
-      const res = await import(`../Examples/${props.file}.vue`)
-      return res.default as Component
+      try {
+        const { component } = (await imports[props.file]()) as { component: Component }
+
+        return component
+      } catch (error) {
+        console.warn(`Example component "${props.file}" not found`)
+        return null
+      }
     }, null)
 
     return {

docs/src/composable/pen.ts

@@ -4,6 +4,7 @@
 
 import { Ref } from 'vue'
 import { useAsyncState } from '@vueuse/core'
+import { imports } from '@/imports'
 
 export interface IPen {
   template: string
@@ -21,16 +22,21 @@ const parseTemplate = (target: string, template: string): string => {
 
 export const usePen = (file: string): Ref<IPen | null> => {
   const { state } = useAsyncState(async () => {
-    const { default: res } = await import(`../components/Examples/${file}.vue?raw`)
-
-    const template = parseTemplate('template', res)
-    const script = parseTemplate('script', res)
-    const style = parseTemplate('style', res)
-
-    return {
-      template,
-      script,
-      style,
+    try {
+      const { raw } = (await imports[file]()) as { raw: string }
+
+      const template = parseTemplate('template', raw)
+      const script = parseTemplate('script', raw)
+      const style = parseTemplate('style', raw)
+
+      return {
+        template,
+        script,
+        style,
+      }
+    } catch (error) {
+      console.warn(`Example component "${file}" not found`)
+      return null
     }
   }, null)
 

docs/src/imports.ts

@@ -0,0 +1,15 @@
+export const imports = {
+  async 'Introduction/GettingStartedExample'() {
+    return {
+      component: (await import('./components/Examples/Introduction/GettingStartedExample.vue')).default,
+      raw: (await import('./components/Examples/Introduction/GettingStartedExample.vue?raw')).default,
+    }
+  },
+
+  async 'Introduction/GettingStartedExampleStyled'() {
+    return {
+      component: (await import('./components/Examples/Introduction/GettingStartedExampleStyled.vue')).default,
+      raw: (await import('./components/Examples/Introduction/GettingStartedExampleStyled.vue?raw')).default,
+    }
+  },
+} as any