create-vitrify 0.3.5 → 0.4.0

package/dist/cli.js

@@ -1,17 +1,14 @@
-import { renderTemplate } from './index.js';
+import { renderDirectory, renderPackageJson, renderTsconfigJson } from '@vitrify/tools/render';
 import parseArgs from 'minimist';
 import inquirer from 'inquirer';
+import { promises } from 'fs';
 import { templates } from './templates.js';
 const escape = (val) => JSON.stringify(val).slice(1, -1);
-// const templates = (await promises.readdir(new URL('../templates/', import.meta.url), { withFileTypes: true }))
-//   .filter((file) => file.isDirectory())
-//   .map((file) => file.name)
 const argv = parseArgs(process.argv.slice(2), {
     string: ['template']
 });
 let questions = [];
 if (!argv.template) {
-    // throw new Error('Please provide a template argument: --template')
     questions = [
         ...questions,
         {
@@ -64,11 +61,19 @@ questions = [
 const answers = await inquirer.prompt(questions);
 const cwdUrl = new URL('', `file://${process.cwd()}/`);
 const templateVariables = answers;
-const templateUrl = 
 // @ts-ignore
-templates[answers.template].url || templates[argv.template].url;
-renderTemplate({
-    templateUrl,
+const template = templates[answers.template] || templates[argv.template];
+const directoryUrl = template.url;
+const outputDir = new URL(`./${answers.name}/`, cwdUrl);
+await renderDirectory({
+    directoryUrl,
     templateVariables,
-    outputDir: new URL(`./${answers.name}/`, cwdUrl)
+    outputDir
 });
+promises.writeFile(new URL('./package.json', outputDir), renderPackageJson({
+    ...templateVariables,
+    version: '0.1.0',
+    license: 'UNLICENSED',
+    ...template.pkgJson
+}));
+promises.writeFile(new URL('./tsconfig.json', outputDir), renderTsconfigJson(template.tsconfigJson));

package/dist/templates.js

@@ -1,20 +1,135 @@
+import latestVersion from 'latest-version';
+const getLatestVersions = async (dependencies) => {
+    console.log('Fetching latest package versions...');
+    const deps = {};
+    for (const dep of dependencies) {
+        deps[dep] = await latestVersion(dep);
+    }
+    return deps;
+};
 export const templates = {
     quasar: {
         name: 'quasar',
         fullName: 'Quasar Project',
         description: 'Quasar Framework project',
-        url: new URL('../templates/quasar/', import.meta.url)
-    },
-    plugin: {
-        name: 'quasar-plugin',
-        fullName: 'Quasar Plugin',
-        description: 'Quasar Framework plugin',
-        url: new URL('../templates/quasar-plugin/', import.meta.url)
+        url: new URL('../templates/quasar/', import.meta.url),
+        pkgJson: {
+            scripts: {
+                dev: 'vitrify dev',
+                'dev:ssr': 'vitrify dev -m ssr',
+                build: 'vitrify build',
+                'build:ssr': 'vitrify build -m ssr',
+                'build:ssg': 'vitrify build -m ssg',
+                test: 'vitrify test',
+                lint: 'eslint --ext .vue --ext .ts src',
+                'lint:fix': 'eslint --ext .vue --ext .ts src --fix',
+                'format:check': 'prettier --check .',
+                'format:write': 'prettier --write .'
+            },
+            dependencies: await getLatestVersions([
+                '@fastify/middie',
+                '@fastify/static',
+                '@quasar/extras',
+                'quasar',
+                'vue',
+                'vue-router'
+            ]),
+            devDependencies: await getLatestVersions([
+                '@vitejs/plugin-vue',
+                '@typescript-eslint/eslint-plugin',
+                '@typescript-eslint/parser',
+                'eslint',
+                'eslint-config-prettier',
+                'eslint-plugin-prettier-vue',
+                'eslint-plugin-vue',
+                'devcert',
+                'fastify',
+                'typescript',
+                'vite',
+                'vitrify'
+            ])
+        },
+        tsconfigJson: {
+            paths: {
+                src: ['./src']
+            },
+            types: ['vite/client', 'vitrify/client'],
+            include: [
+                'vitrify.config.ts',
+                'src/**/*.ts',
+                'src/**/*.d.ts',
+                'src/**/*.tsx',
+                'src/**/*.vue'
+            ]
+        }
     },
-    quasarMonorepo: {
-        name: 'quasar-monorepo',
-        fullName: 'Quasar monorepo (project + plugin)',
-        description: 'Quasar Framework monorepo',
-        url: new URL('../templates/quasar-monorepo/', import.meta.url)
+    uiPlugin: {
+        name: 'vite-ui-plugin',
+        fullName: 'Vite UI plugin',
+        description: 'A Vite plugin for UI components',
+        url: new URL('../templates/vite-ui-plugin/', import.meta.url),
+        pkgJson: {
+            exports: {
+                '.': {
+                    types: './dist/types/index.d.ts',
+                    import: './dist/index.js',
+                    src: './src/ui/index.ts'
+                },
+                './vite-plugin': {
+                    types: './dist/vite-plugin.d.ts',
+                    import: './dist/vite-plugin.js',
+                    src: './src/vite-plugin.ts'
+                }
+            },
+            scripts: {
+                'build:plugin': 'vite build',
+                'build:vite-plugin': 'tsc -p tsconfig.build.plugin.json',
+                'generate:types': 'vue-tsc -p tsconfig.types.json',
+                'clean:buildinfo': 'rimraf tsconfig.build.plugin.tsbuildinfo',
+                clean: 'run-s clean:buildinfo',
+                build: 'run-s clean build:plugin build:vite-plugin generate:types',
+                lint: 'eslint --ext .vue --ext .ts src',
+                'lint:fix': 'eslint --ext .vue --ext .ts src --fix',
+                'format:check': 'prettier --check .',
+                'format:write': 'prettier --write .'
+            },
+            dependencies: await getLatestVersions(['unplugin-vue-components']),
+            devDependencies: await getLatestVersions([
+                '@types/node',
+                '@types/ws',
+                '@vitejs/plugin-vue',
+                '@vue/server-renderer',
+                '@typescript-eslint/eslint-plugin',
+                '@typescript-eslint/parser',
+                'eslint',
+                'eslint-config-prettier',
+                'eslint-plugin-prettier-vue',
+                'eslint-plugin-vue',
+                'npm-run-all',
+                'quasar',
+                'typescript',
+                'rimraf',
+                'vite',
+                'vitrify',
+                'vue',
+                'vue-router',
+                'vue-tsc'
+            ])
+        },
+        tsconfigJson: {
+            types: ['vite/client']
+        }
     }
+    // plugin: {
+    //   name: 'quasar-plugin',
+    //   fullName: 'Quasar Plugin',
+    //   description: 'Quasar Framework plugin',
+    //   url: new URL('../templates/quasar-plugin/', import.meta.url)
+    // },
+    // quasarMonorepo: {
+    //   name: 'quasar-monorepo',
+    //   fullName: 'Quasar monorepo (project + plugin)',
+    //   description: 'Quasar Framework monorepo',
+    //   url: new URL('../templates/quasar-monorepo/', import.meta.url)
+    // }
 };

package/dist/types/templates.d.ts

@@ -1,20 +1,26 @@
-export declare const templates: {
-    quasar: {
+interface Templates {
+    [key: string]: {
         name: string;
         fullName: string;
         description: string;
         url: URL;
+        pkgJson: {
+            scripts: Record<string, string>;
+            exports?: Record<string, {
+                types?: string;
+                import: string;
+                src?: string;
+            }>;
+            dependencies?: Record<string, string>;
+            devDependencies?: Record<string, string>;
+            peerDependencies?: Record<string, string>;
+        };
+        tsconfigJson: {
+            paths?: Record<string, string[]>;
+            types?: string[];
+            include?: string[];
+        };
     };
-    plugin: {
-        name: string;
-        fullName: string;
-        description: string;
-        url: URL;
-    };
-    quasarMonorepo: {
-        name: string;
-        fullName: string;
-        description: string;
-        url: URL;
-    };
-};
+}
+export declare const templates: Templates;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vitrify",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "type": "module",
@@ -27,12 +27,14 @@
   "dependencies": {
     "handlebars": "^4.7.7",
     "inquirer": "^8.2.2",
+    "latest-version": "^7.0.0",
     "minimist": "^1.2.6"
   },
   "devDependencies": {
     "@types/inquirer": "^8.2.1",
     "@types/minimist": "^1.2.2",
     "@types/node": "^17.0.23",
+    "@vitrify/tools": "^0.1.0",
     "typescript": "^4.7.3",
     "vite": "^3.0.0-beta.0",
     "vue": "^3.2.37"

package/templates/quasar/.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-  "recommendations": ["johnsoncodehk.volar"]
+  "recommendations": ["vue.volar", "dbaeumer.vscode-eslint"]
 }

package/templates/quasar/_eslintignore

@@ -0,0 +1,2 @@
+.eslintrc.cjs
+node_modules/

package/templates/quasar/_eslintrc.cjs

@@ -0,0 +1,19 @@
+module.exports = {
+  ignorePatterns: ['.eslintrc.cjs'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:prettier-vue/recommended'
+  ],
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module'
+  },
+  rules: {
+    '@typescript-eslint/ban-ts-comment': 0
+  },
+  plugins: ['@typescript-eslint'],
+  root: true
+}

package/templates/quasar/_prettierignore

@@ -0,0 +1,3 @@
+dist/
+node_modules/
+pnpm-lock.yaml

package/templates/quasar/_prettierrc.json

@@ -0,0 +1,22 @@
+{
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 80,
+  "trailingComma": "none",
+  "overrides": [
+    {
+      "files": ["*.json5"],
+      "options": {
+        "singleQuote": false,
+        "quoteProps": "preserve"
+      }
+    },
+    {
+      "files": ["*.yml"],
+      "options": {
+        "singleQuote": false
+      }
+    }
+  ]
+}

package/templates/quasar/index.html

@@ -3,15 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title><!--product-name--></title>
-    <!--preload-links-->
+    <title></title>
   </head>
 
   <body>
-    <!-- Do not add whitespace or newlines to #app, this will cause hydration errors -->
-    <div id="app"><!--app-html--></div>
-    <!--dev-ssr-css-->
-    <!--entry-script-->
-    <!--initial-state-->
+    <!-- A body opening and closing tag is sufficient for Vitrify -->
+    <div id="app"></div>
   </body>
 </html>

package/templates/quasar/src/App.vue

@@ -1,9 +1,20 @@
 <template>
-  <router-view></router-view>
+  <router-view v-slot="{ Component }">
+    <Suspense>
+      <template #default>
+        <component :is="Component" />
+      </template>
+      <template #fallback>
+        <div>Loading...</div>
+      </template>
+    </Suspense>
+  </router-view>
 </template>
 
-<script setup lang="ts"></script>
+<script lang="ts">
+export default {
+  name: 'App'
+}
+</script>
 
-<style lang="sass">
-// do not remove, required for additionalData import
-</style>
+<script setup lang="ts"></script>

package/templates/quasar/src/components/HelloWorld.vue

@@ -10,7 +10,12 @@
   </q-card>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'HelloWorldComponent'
+}
+</script>
+
 <script lang="ts" setup>
 import logo from 'src/assets/quasar-logo-vertical.svg'
-const name = 'HelloWorld'
 </script>

package/templates/quasar/src/layouts/MainLayout.vue

@@ -2,14 +2,9 @@
   <q-layout view="lHh Lpr lFf">
     <q-header elevated>
       <q-toolbar>
-        <q-btn
-          flat
-          dense
-          round
-          icon="menu"
-          aria-label="Menu"
-          @click="toggleLeftDrawer"
-        />
+        <q-btn flat dense round aria-label="Menu" @click="toggleLeftDrawer">
+          <q-icon :name="matMenu" />
+        </q-btn>
 
         <q-toolbar-title> Quasar App </q-toolbar-title>
 
@@ -32,6 +27,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useQuasar } from 'quasar'
+import { matMenu } from '@quasar/extras/material-icons'
 
 const $q = useQuasar()
 const leftDrawerOpen = ref(false)

package/templates/quasar/src/pages/{Error404.vue → Error404Page.vue}

@@ -20,6 +20,10 @@
   </div>
 </template>
 
-<script setup lang="ts">
-const name = 'Error404'
-</script>
+<scirpt lang="ts">
+export default {
+  name: 'Error404Page'
+}
+</scirpt>
+
+<script setup lang="ts"></script>

package/templates/quasar/src/pages/{Index.vue → IndexPage.vue}

@@ -4,6 +4,12 @@
   </q-page>
 </template>
 
+<scirpt lang="ts">
+export default {
+  name: 'IndexPage'
+}
+</scirpt>
+
 <script setup lang="ts">
 import HelloWorld from 'src/components/HelloWorld.vue'
 </script>

package/templates/quasar/src/router/routes.ts

@@ -4,14 +4,14 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/',
     component: () => import('src/layouts/MainLayout.vue'),
-    children: [{ path: '', component: () => import('src/pages/Index.vue') }]
+    children: [{ path: '', component: () => import('src/pages/IndexPage.vue') }]
   },
 
   // Always leave this as last one,
   // but you can also remove it
   {
     path: '/:catchAll(.*)*',
-    component: () => import('src/pages/Error404.vue')
+    component: () => import('src/pages/Error404Page.vue')
   }
 ]
 

package/templates/quasar/src/setup.ts

@@ -0,0 +1,8 @@
+import type { FastifyInstance } from 'fastify'
+
+/**
+ * Only used in SSR/SSG
+ */
+export default async function (fastify: FastifyInstance) {
+  console.log('Running setup function....')
+}

package/templates/quasar/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+// Mocks all files ending in `.vue` showing them as plain Vue instances
+declare module '*.vue' {
+  import type { ComponentOptions } from 'vue'
+  const component: ComponentOptions
+  export default component
+}

package/templates/quasar/vitrify.config.ts

@@ -0,0 +1,36 @@
+import type { VitrifyConfig } from 'vitrify'
+import { certificateFor } from 'devcert'
+
+export default async function ({ mode, command }): Promise<VitrifyConfig> {
+  const config: VitrifyConfig = {
+    vitrify: {
+      hooks: {
+        onSetup: [new URL('src/setup.ts', import.meta.url)]
+      },
+      sass: {
+        variables: {
+          $primary: '#000000'
+        }
+      },
+      ssr: {
+        serverModules: []
+      }
+    },
+    quasar: {
+      // extras: ['material-icons'],
+      framework: {
+        components: [
+          // Deprecated
+        ],
+        iconSet: 'svg-material-icons',
+        plugins: ['Dialog', 'Notify']
+      }
+    }
+  }
+  if (mode === 'development') {
+    config.server = {
+      https: await certificateFor('vitrify.test')
+    }
+  }
+  return config
+}

package/templates/quasar-monorepo/packages/quasar/package.json.hbs

@@ -23,7 +23,8 @@
   },
   "devDependencies": {
     "@vue/server-renderer": "^3.2.37",
-    "vitrify": "^0.5.0",
+    "critters": "^0.0.16",
+    "vitrify": "^0.6.0",
     "typescript": "^4.6.2"
   }
 }

package/templates/quasar-monorepo/packages/quasar-plugin/package.json.hbs

@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@vue/server-renderer": "^3.2.37",
-    "vitrify": "^0.5.0",
+    "vitrify": "^0.6.0",
     "@types/node": "^16.11.11",
     "@types/ws": "^8.5.3",
     "@vitejs/plugin-vue": "^3.0.0-alpha.1",

package/templates/quasar-plugin/package.json.hbs

@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@vue/server-renderer": "^3.2.37",
-    "vitrify": "^0.5.0",
+    "vitrify": "^0.6.0",
     "@types/node": "^16.11.11",
     "@types/ws": "^8.5.3",
     "@vitejs/plugin-vue": "^3.0.0-alpha.1",

package/templates/vite-ui-plugin/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["vue.volar", "dbaeumer.vscode-eslint"]
+}

package/templates/vite-ui-plugin/_eslintignore

@@ -0,0 +1,2 @@
+.eslintrc.cjs
+node_modules/

package/templates/vite-ui-plugin/_eslintrc.cjs

@@ -0,0 +1,19 @@
+module.exports = {
+  ignorePatterns: ['.eslintrc.cjs'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:prettier-vue/recommended'
+  ],
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module'
+  },
+  rules: {
+    '@typescript-eslint/ban-ts-comment': 0
+  },
+  plugins: ['@typescript-eslint'],
+  root: true
+}

package/templates/vite-ui-plugin/_gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+*.local

package/templates/vite-ui-plugin/_prettierignore

@@ -0,0 +1,3 @@
+dist/
+node_modules/
+pnpm-lock.yaml

package/templates/vite-ui-plugin/_prettierrc.json

@@ -0,0 +1,22 @@
+{
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 80,
+  "trailingComma": "none",
+  "overrides": [
+    {
+      "files": ["*.json5"],
+      "options": {
+        "singleQuote": false,
+        "quoteProps": "preserve"
+      }
+    },
+    {
+      "files": ["*.yml"],
+      "options": {
+        "singleQuote": false
+      }
+    }
+  ]
+}

package/templates/vite-ui-plugin/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+// Mocks all files ending in `.vue` showing them as plain Vue instances
+declare module '*.vue' {
+  import type { ComponentOptions } from 'vue'
+  const component: ComponentOptions
+  export default component
+}

package/templates/vite-ui-plugin/src/ui/components/HelloWorld.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    {{ lang.helloWorld }}
+    {{ iconSet.someIcon }}
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'HelloWorld'
+}
+</script>
+
+<script setup lang="ts">
+import { useIconSet } from '../icon-set'
+import { useLang } from '../lang'
+
+const lang = useLang()
+const iconSet = useIconSet()
+</script>

package/templates/vite-ui-plugin/src/ui/icon-set/index.ts

@@ -0,0 +1,40 @@
+export interface IconSet {
+  name: string
+  someIcon: string
+}
+
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+import material from './material-icons'
+export const iconSet = ref(material)
+
+const iconSets = import.meta.glob<{ default: IconSet }>([
+  './*.ts',
+  '!./index.ts'
+])
+
+export const defineIconSet = (iconSet: IconSet) => {
+  return iconSet
+}
+
+export const useIconSet = () => {
+  return iconSet as Ref<IconSet>
+}
+
+let loadingIconSet = false
+export const loadIconSet = async (name: string) => {
+  if (!loadingIconSet) {
+    loadingIconSet = true
+    try {
+      const data = (await iconSets[`./${name}.ts`]()).default
+
+      if (data) {
+        iconSet.value = data
+      }
+    } catch (e) {
+      if (import.meta.env.DEBUG) console.error(e)
+      throw new Error(`[quasar-components] Failed to load ${name} icon set.`)
+    }
+    loadingIconSet = false
+  }
+}

package/templates/vite-ui-plugin/src/ui/icon-set/material-icons.ts

@@ -0,0 +1,8 @@
+import type { IconSet } from '../icon-set'
+
+const iconSet: IconSet = {
+  name: 'material-icons',
+  someIcon: 'check'
+}
+
+export default iconSet

package/templates/vite-ui-plugin/src/ui/index.ts

@@ -0,0 +1,9 @@
+import * as VuePlugin from './vue-plugin'
+import HelloWorld from './components/HelloWorld.vue'
+
+// export * from './utils/helpers'
+export * from './lang'
+export * from './icon-set'
+export { HelloWorld }
+
+export default VuePlugin

package/templates/vite-ui-plugin/src/ui/lang/en-US.ts

@@ -0,0 +1,8 @@
+import type { Language } from '../lang'
+
+const lang: Language = {
+  isoName: 'en-US',
+  helloWorld: 'Hello world!'
+}
+
+export default lang

package/templates/vite-ui-plugin/src/ui/lang/index.ts

@@ -0,0 +1,42 @@
+export interface Language {
+  isoName: string
+  helloWorld: string
+}
+
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+import en from './en-US'
+export const lang = ref(en)
+
+const locales = import.meta.glob<{ default: Language }>([
+  './*.ts',
+  '!./index.ts'
+])
+
+export const defineLang = (lang: Language) => {
+  return lang
+}
+
+export const useLang = () => {
+  return lang as Ref<Language>
+}
+
+let loadingLanguage = false
+export const loadLang = async (isoName: string) => {
+  if (!loadingLanguage) {
+    loadingLanguage = true
+    try {
+      const data = (await locales[`./${isoName}.ts`]()).default
+
+      if (data) {
+        lang.value = data
+      }
+    } catch (e) {
+      if (import.meta.env.DEBUG) console.error(e)
+      throw new Error(
+        `[quasar-components] Failed to load ${isoName} language file.`
+      )
+    }
+    loadingLanguage = false
+  }
+}

package/templates/vite-ui-plugin/src/ui/utils/helpers.ts

@@ -0,0 +1 @@
+export default {}

package/templates/vite-ui-plugin/src/ui/vue-plugin.ts

@@ -0,0 +1,15 @@
+const components = import.meta.glob('./components/*.vue')
+
+import { loadLang } from './lang'
+
+function install(app: any, options: { lang: string }) {
+  loadLang(options?.lang || 'en-us')
+  for (const path in components) {
+    components[path]().then((mod) => {
+      // @ts-ignore
+      app.component(mod.name, mod)
+    })
+  }
+}
+
+export { install }

package/templates/vite-ui-plugin/src/vite-plugin.ts

@@ -0,0 +1,53 @@
+import type { Plugin } from 'vite'
+import { promises } from 'fs'
+const { readFile } = promises
+
+export default async function ({
+  buildFromSrc
+}: {
+  buildFromSrc?: boolean
+} = {}): Promise<Plugin> {
+  const pkgJson = JSON.parse(
+    await readFile(
+      new URL('../package.json', import.meta.url).pathname,
+      'utf-8'
+    )
+  )
+  const exports = pkgJson.exports as Record<
+    string,
+    {
+      types: string
+      import: string
+      src: string
+    }
+  >[]
+  const name = pkgJson.name
+
+  return {
+    name: `${name}-plugin`,
+    config(config, { mode }) {
+      if (mode === 'development' || buildFromSrc) {
+        const alias = Object.entries(exports)
+          .map(([key, val]) => {
+            return {
+              find: name + key.slice(1),
+              replacement: new URL('.' + val.src, import.meta.url).pathname
+            }
+          })
+          .sort(
+            (a, b) =>
+              (b.find.match(/\//g) || []).length -
+              (a.find.match(/\//g) || []).length
+          )
+
+        return {
+          resolve: {
+            alias
+          }
+        }
+      }
+
+      return {}
+    }
+  }
+}

package/templates/vite-ui-plugin/tsconfig.build.plugin.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "rootDir": "./src"
+  },
+  "extends": "./tsconfig.node.json",
+  "include": ["./src/vite-plugin.ts"]
+}

package/templates/vite-ui-plugin/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "outDir": "./dist",
+    "declaration": true,
+    "resolveJsonModule": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/vite-ui-plugin/tsconfig.types.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "lib": ["esnext", "DOM"],
+    "strict": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "declaration": true,
+    "outDir": "dist",
+    "emitDeclarationOnly": true,
+    "declarationDir": "./dist/types",
+    "isolatedModules": true,
+    "types": ["vite/client"]
+  },
+  "include": ["./src/ui"]
+}

package/templates/vite-ui-plugin/vite.config.ts

@@ -0,0 +1,41 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite'
+import { QuasarResolver } from 'unplugin-vue-components/resolvers'
+
+export default defineConfig(async ({ command, mode }) => ({
+  plugins: [
+    vue(),
+    Components({
+      resolvers: [QuasarResolver()]
+    })
+  ],
+  build: {
+    // minify: false,
+    lib: {
+      fileName: 'ui',
+      formats: ['es'],
+      entry: './src/ui/index.ts'
+    },
+    minify: false,
+    emptyOutDir: true,
+    rollupOptions: {
+      /**
+       * For building subpath exports
+       */
+      // input: {
+      //   subodule: new URL(
+      //     './src/ui/submodule/index.ts',
+      //     import.meta.url
+      //   ).pathname
+      // },
+      output: {
+        entryFileNames: '[name].js'
+      },
+      /**
+       * Add (UI) frameworks that are used
+       */
+      external: ['vue', 'vue-router', 'quasar']
+    }
+  }
+}))

package/dist/index.js

@@ -1,83 +0,0 @@
-import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'fs';
-import Handlebars from 'handlebars';
-export const renderAll = ({ inputPath, outputPath, templateVariables, exclude }) => {
-    if (!existsSync(outputPath)) {
-        mkdirSync(outputPath);
-    }
-    const content = readdirSync(inputPath, { withFileTypes: true });
-    const files = content
-        .filter((dirent) => !dirent.isDirectory())
-        .map((dirent) => dirent.name);
-    const directories = content
-        .filter((dirent) => dirent.isDirectory())
-        .map((dirent) => dirent.name);
-    for (let file of files) {
-        const fileContent = readFileSync(new URL(`./${file}`, inputPath), 'utf-8');
-        let output;
-        if (file.endsWith('.hbs')) {
-            const template = Handlebars.compile(fileContent);
-            output = template(templateVariables);
-        }
-        else {
-            output = fileContent;
-        }
-        if (file.startsWith('_'))
-            file = file.replace('_', '.');
-        const fileOutputPath = new URL(file.replace('.hbs', ''), outputPath);
-        writeFileSync(fileOutputPath, output, 'utf-8');
-    }
-    for (const directory of directories) {
-        renderAll({
-            inputPath: new URL(`./${directory}/`, inputPath),
-            outputPath: new URL(`./${directory}/`, outputPath),
-            templateVariables
-        });
-    }
-};
-export const render = ({ inputPath, outputPath, templateVariables }) => {
-    const outputFolder = new URL('./', outputPath);
-    if (!existsSync(outputFolder)) {
-        mkdirSync(outputFolder);
-    }
-    const fileContent = readFileSync(new URL(inputPath), 'utf-8');
-    const template = Handlebars.compile(fileContent);
-    const compiled = template(templateVariables);
-    writeFileSync(outputPath, compiled, 'utf-8');
-};
-export const renderTemplate = ({ templateUrl, templateVariables, outputDir }) => {
-    if (outputDir.pathname[outputDir.pathname.length - 1] !== '/') {
-        throw new Error('outputDir is not a directory. Make sure the URL ends with a /');
-    }
-    // const templatesDir = new URL(`../templates/`, import.meta.url)
-    // const templateDir = new URL(`../templates/${template}/`, import.meta.url)
-    /**
-     * General Quasar project files
-     */
-    // render({
-    //   inputPath: new URL('./package.json.hbs', templatesDir),
-    //   outputPath: new URL(`./package.json`, outputDir),
-    //   templateVariables
-    // })
-    // render({
-    //   inputPath: new URL('./quasar.conf.js', templatesDir),
-    //   outputPath: new URL(`./quasar.conf.js`, outputDir),
-    //   templateVariables
-    // })
-    // render({
-    //   inputPath: new URL('_gitignore', templateUrl),
-    //   outputPath: new URL(`.gitignore`, outputDir),
-    //   templateVariables
-    // })
-    /**
-     * Specific template files
-     */
-    renderAll({
-        inputPath: new URL(`./`, templateUrl),
-        outputPath: new URL(`./`, outputDir),
-        templateVariables
-    });
-};
-// renderTemplate({
-//   template: 'quasar-ts',
-//   outputDir: new URL('./generated/', import.meta.url)
-// })

package/dist/types/index.d.ts

@@ -1,16 +0,0 @@
-export declare const renderAll: ({ inputPath, outputPath, templateVariables, exclude }: {
-    inputPath: URL;
-    outputPath: URL;
-    templateVariables: Record<string, any>;
-    exclude?: string[] | undefined;
-}) => void;
-export declare const render: ({ inputPath, outputPath, templateVariables }: {
-    inputPath: URL;
-    outputPath: URL;
-    templateVariables: Record<string, any>;
-}) => void;
-export declare const renderTemplate: ({ templateUrl, templateVariables, outputDir }: {
-    templateUrl: URL;
-    templateVariables: Record<string, any>;
-    outputDir: URL;
-}) => void;

package/templates/quasar/package.json.hbs

@@ -1,28 +0,0 @@
-{
-  "name": "{{ name }}",
-  "productName": "{{ productName }}",
-  "version": "1.0.0",
-  "type": "module",
-  "description": "{{ description }}",
-  "scripts": {
-    "dev": "vitrify dev",
-    "build": "vitrify build",
-    "build:ssr": "vitrify build -m ssr",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "{{ author }}",
-  "dependencies": {
-    "@fastify/static": "^6.4.0",
-    "fastify": "^4.0.0",
-    "fastify-plugin": "^3.0.1",
-    "vue": "^3.2.37",
-    "vue-router": "^4.0.12",
-    "@quasar/extras": "^1.13.1",
-    "quasar": "^2.6.0"
-  },
-  "devDependencies": {
-    "@vue/server-renderer": "^3.2.37",
-    "vitrify": "^0.5.0",
-    "typescript": "^4.6.2"
-  }
-}

package/templates/quasar/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "useDefineForClassFields": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "strict": true,
-    "jsx": "preserve",
-    "sourceMap": true,
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "lib": ["esnext", "dom"]
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
-}

package/templates/quasar/vitrify.config.js

@@ -1,23 +0,0 @@
-export default function ({ mode, command }) {
-  return {
-    vitrify: {
-      hooks: {
-        // Vitrify hooks
-      },
-      sass: {
-        variables: {
-          $primary: '#000000'
-        }
-      }
-    },
-    quasar: {
-      extras: ['material-icons'],
-      framework: {
-        components: [
-          // Deprecated
-        ],
-        plugins: []
-      }
-    }
-  }
-}