vite.config.ts

/* eslint-disable no-console */
import path from 'path'
import fs from 'fs-extra'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'
import Layouts from 'vite-plugin-vue-layouts'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import Markdown from 'vite-plugin-md'
import WindiCSS from 'vite-plugin-windicss'
import { VitePWA } from 'vite-plugin-pwa'
import VueI18n from '@intlify/vite-plugin-vue-i18n'
import Inspect from 'vite-plugin-inspect'
import Prism from 'markdown-it-prism'
import LinkAttributes from 'markdown-it-link-attributes'
import vuetify from '@vuetify/vite-plugin'
import { BevyWasm, getCrates } from 'vite-plugin-vue-bevy-wasm';

const markdownWrapperClasses = 'prose prose-sm m-auto text-left'

export default defineConfig(async ({ command, mode }) => {

    let src_dir = `${path.resolve(__dirname, 'src')}`;
    let crates_paths = ["./crates/**/Cargo.toml"];
    
    // generate a page for each crate
    let crates = await getCrates(crates_paths);
    crates.forEach(async (crate) => {
        const readme_file = path.resolve(crate.path, 'readme.md');
        if (!fs.existsSync(readme_file)) {
            console.warn(`No readme found in ${crate.name}`);
        }
        const file = path.resolve('src/pages', `${crate.name}.vue`);
        fs.writeFile(file,
`<script setup lang="ts">
// Generated by 'vue-bevy'
import ${crate.name}Readme from '../.${crate.path}/readme.md'
import init  from '~/wasm/${crate.name}.js'
import WebgpuNotes from '~/components/webgpu-notes.vue';
const gpu = (navigator as any).gpu;

tryOnMounted(async () => {
if (gpu) {
const wasm = await init();
wasm.run();
}
});

const router = useRouter()
const { t } = useI18n()
</script>

<template>
<${crate.name}Readme />
<WebgpuNotes />
<template v-if="gpu">
Make sure canvas has focus <br />
Hit F12 for editor<br />
<canvas class="wasm" />
</template>

<button class="btn m-3 text-sm mt-6" @click="router.back()">
{{ t("button.back") }}
</button>

</template>

<style scoped>
.wasm {
margin-left: auto;
margin-right: auto;
}
</style>

<route lang="yaml">
meta:
    layout: wasm
</route>`);
    });

    return {
        //root: frontend,
        // build: {
        //     //outDir: '../dist',
        //     emptyOutDir: true,
        // },
        resolve: {
            alias: {
                '~/': `${src_dir}/`,
            },
        },
        plugins: [

            // our plugin - idea is to make this reusable for other
            // people, its not there yet
            BevyWasm({
                crates: crates_paths,
                // I want to seperate the build and serve generated files so we dont have to rebuild everything unless its changes
                // dont currently do that check though, will add back once I get everything working
                // Will also be easy compare sizes
                out_dir: `${src_dir}/wasm/`, // serve
                out_dir_dist: `${src_dir}/wasm_dist/`, // build
                wasm_opt: false, // has only been reducing file size by 2-3mb, nice but not worth the build time at the moment right now
            }),

            Vue({
                include: [/\.vue$/, /\.md$/],
            }),

            vuetify({
                autoImport: true,
              }),

            // https://github.com/hannoeru/vite-plugin-pages
            Pages({
                extensions: ['vue', 'md'],
            }),

            // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
            Layouts(),

            // https://github.com/antfu/unplugin-auto-import
            AutoImport({
                imports: [
                    'vue',
                    'vue-router',
                    'vue-i18n',
                    '@vueuse/head',
                    '@vueuse/core',
                ],
                dts: `${src_dir}/auto-imports.d.ts`,
            }),

            // https://github.com/antfu/unplugin-vue-components
            Components({
                // allow auto load markdown components under `./src/components/`
                extensions: ['vue', 'md'],

                // allow auto import and register components used in markdown
                include: [/\.vue$/, /\.vue\?vue/, /\.md$/],

                // custom resolvers
                resolvers: [
                    // auto import icons
                    // https://github.com/antfu/unplugin-icons
                    IconsResolver({
                        componentPrefix: '',
                        // enabledCollections: ['carbon']
                    }),
                ],

                dts: `${src_dir}/components.d.ts`,
            }),

            // https://github.com/antfu/unplugin-icons
            Icons({
                autoInstall: true,
            }),

            // https://github.com/antfu/vite-plugin-windicss
            WindiCSS({
                safelist: markdownWrapperClasses,
            }),

            // https://github.com/antfu/vite-plugin-md
            // Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
            Markdown({
                wrapperClasses: markdownWrapperClasses,
                headEnabled: true,
                markdownItSetup(md) {
                    // https://prismjs.com/
                    md.use(Prism)
                    md.use(LinkAttributes, {
                        pattern: /^https?:\/\//,
                        attrs: {
                            target: '_blank',
                            rel: 'noopener',
                        },
                    })
                },
            }),

            // https://github.com/antfu/vite-plugin-pwa
            VitePWA({
                registerType: 'autoUpdate',
                includeAssets: ['favicon.svg', 'robots.txt', 'safari-pinned-tab.svg'],
                manifest: {
                    name: 'Vitesse',
                    short_name: 'Vitesse',
                    theme_color: '#ffffff',
                    icons: [
                        {
                            src: '/pwa-192x192.png',
                            sizes: '192x192',
                            type: 'image/png',
                        },
                        {
                            src: '/pwa-512x512.png',
                            sizes: '512x512',
                            type: 'image/png',
                        },
                        {
                            src: '/pwa-512x512.png',
                            sizes: '512x512',
                            type: 'image/png',
                            purpose: 'any maskable',
                        },
                    ],
                },
            }),

            // https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
            VueI18n({
                runtimeOnly: true,
                compositionOnly: true,
                include: [`locales/**`],
            }),

            // https://github.com/antfu/vite-plugin-inspect
            Inspect({
                // change this to enable inspect for debugging
                enabled: false,
            }),
        ],

        server: {
            fs: {
                strict: true,
            },
        },

        // https://github.com/antfu/vite-ssg
        ssgOptions: {
            script: 'async',
            formatting: 'minify',
        },

        optimizeDeps: {
            include: [
                'vue',
                'vue-router',
                '@vueuse/core',
                '@vueuse/head',
            ],
            exclude: [
                'vue-demi',
            ],
        },
    }
})