4dkankan-components/docs/.vitepress/vitepress/components/demo/vp-example.vue

<script setup lang="ts">
import { computed, unref, watchEffect } from 'vue'
import { File, Repl, ReplStore } from '@vue/repl'
import mainCode from './main.vue?raw'
import deptCode from './dept?raw'
import { loadKanKanThemeChalkStyle } from './dept'
import type { SFCOptions } from '@vue/repl'

const sfcOptions: SFCOptions = {
    script: {
        reactivityTransform: true,
    },
}

const props = defineProps({
    file: {
        type: String,
        required: true,
    },
    raw: {
        type: String,
        required: true,
    },
    demo: {
        type: Object,
        required: true,
    },
    isRepl: {
        type: Boolean,
        required: false,
        default: () => false,
    },
})
const isDev = computed(() => {
    return import.meta.env.MODE === 'development'
})
const serverLink = computed(() => {
    return unref(isDev) ? '/demoServer' : "https://test.4dkankan.com'"
})

const loadSingleData = computed(() => {
    const store = {
        'App.vue': decodeURIComponent(props.raw).replace('#DEMOSEVER#', unref(serverLink)),
    }
    return window.btoa(JSON.stringify(store))
})
const store = new ReplStore({
    // initialize repl with previously serialized state
    serializedState: unref(loadSingleData),

    // starts on the output pane (mobile only) if the URL has a showOutput query
    showOutput: true,
    // starts on a different tab on the output pane if the URL has a outputMode query
    // and default to the "preview" tab
    outputMode: 'preview',

    // specify the default URL to import Vue runtime from in the sandbox
    // default is the CDN link from unpkg.com with version matching Vue's version
    // from peerDependency
    defaultVueRuntimeURL: 'https://cdn.jsdelivr.net/npm/@vue/runtime-dom@latest/dist/runtime-dom.esm-browser.js',
})
store.init()
store.setImportMap({
    imports: {
        vue: 'https://cdn.jsdelivr.net/npm/@vue/runtime-dom@latest/dist/runtime-dom.esm-browser.js',
        '@vue/shared': 'https://cdn.jsdelivr.net/npm/@vue/shared@latest/dist/shared.esm-bundler.js',
        'kankan-components': 'https://4dkk.4dage.com/npm_test/kankan-components/dist/index.full.min.mjs',
    },
})
const PlaygroundMain = new File('PlaygroundMain.vue', mainCode)
const deptFile = new File('dept.js', deptCode)
store.addFile(PlaygroundMain)
store.addFile(deptFile)
store.state.mainFile = 'PlaygroundMain.vue'

watchEffect(async () => {
    if (!unref(props.isRepl)) {
        await loadKanKanThemeChalkStyle()
    }
})
</script>

<template>
    <div class="example-showcase" antialiased>
        <ClientOnly>
            <template v-if="demo">
                <component :is="demo" v-if="!isRepl" v-bind="$attrs" />
                <Repl v-else :store="store" :sfc-options="sfcOptions" :clear-console="false" :show-compile-output="false" auto-resize />
            </template>
        </ClientOnly>
    </div>
</template>

<style lang="scss" scoped>
.example-showcase {
    padding: 1.5rem;
    margin: 0.5px;
    background-color: var(--bg-color);
}
</style>
<style lang="scss">
.vue-repl {
    height: 650px;
    .left {
        display: none;
    }
    .right {
        width: 100% !important;
    }
    // .tab-buttons {
    //     display: none;
    // }
}
</style>