create-vitrify 0.1.0 → 0.3.0

package/templates/quasar-monorepo/packages/quasar/src/layouts/MainLayout.vue

@@ -0,0 +1,42 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header elevated>
+      <q-toolbar>
+        <q-btn
+          flat
+          dense
+          round
+          icon="menu"
+          aria-label="Menu"
+          @click="toggleLeftDrawer"
+        />
+
+        <q-toolbar-title> Quasar App </q-toolbar-title>
+
+        <div>Quasar v{{ $q.version }}</div>
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
+      <q-list>
+        <q-item-label header> Essential Links </q-item-label>
+      </q-list>
+    </q-drawer>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useQuasar } from 'quasar'
+
+const $q = useQuasar()
+const leftDrawerOpen = ref(false)
+
+const toggleLeftDrawer = () => {
+  leftDrawerOpen.value = !leftDrawerOpen.value
+}
+</script>

package/templates/quasar-monorepo/packages/quasar/src/pages/Error404.vue

@@ -0,0 +1,25 @@
+<template>
+  <div
+    class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center"
+  >
+    <div>
+      <div style="font-size: 30vh">404</div>
+
+      <div class="text-h2" style="opacity: 0.4">Oops. Nothing here...</div>
+
+      <q-btn
+        class="q-mt-xl"
+        color="white"
+        text-color="blue"
+        unelevated
+        to="/"
+        label="Go Home"
+        no-caps
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const name = 'Error404'
+</script>

package/templates/quasar-monorepo/packages/quasar/src/pages/Index.vue.hbs

@@ -0,0 +1,13 @@
+<template>
+  <q-page class="row items-center justify-evenly">
+    <hello-world>
+    </hello-world>
+    <plugin-hello-world>
+    </plugin-hello-world>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+  import HelloWorld from 'src/components/HelloWorld.vue';
+  import { HelloWorld as PluginHelloWorld } from 'quasar-plugin-{{ name }}'
+</script>

package/templates/quasar-monorepo/packages/quasar/src/router/index.ts

@@ -0,0 +1,17 @@
+import {
+  createMemoryHistory,
+  createRouter as _createRouter,
+  createWebHistory
+} from 'vue-router'
+import routes from './routes'
+
+export default function createRouter() {
+  return _createRouter({
+    // use appropriate history implementation for server/client
+    // import.meta.env.SSR is injected by Vite.
+    history: import.meta.env.SSR
+      ? createMemoryHistory(__BASE_URL__)
+      : createWebHistory(__BASE_URL__),
+    routes
+  })
+}

package/templates/quasar-monorepo/packages/quasar/src/router/routes.ts

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

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

@@ -0,0 +1,15 @@
+{
+  "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-monorepo/packages/quasar/vitrify.config.js.hbs

@@ -0,0 +1,29 @@
+import VitePlugin from 'quasar-plugin-{{ name }}/vite-plugin'
+
+export default function ({ mode, command }) {
+  return {
+    plugins: [
+      VitePlugin()
+    ],
+    vitrify: {
+      hooks: {
+        // Vitrify hooks
+      },
+      sassVariables: {
+        '$primary': '#000000'
+      }
+    },
+    quasar: {
+      extras: [
+        'material-icons'
+      ],
+      framework: {
+        components: [
+          // Deprecated
+        ],
+        plugins: [
+        ]
+      },
+    }
+  }
+}

package/templates/quasar-monorepo/packages/quasar-plugin/_gitignore

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

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

@@ -0,0 +1,47 @@
+{
+  "name": "quasar-plugin-{{ name }}",
+  "description": "{{ description }}",
+  "author": "{{ author }}",
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    ".": "./dist/quasar-plugin-{{ name }}.es.js",
+    "./run/*": "./dist/run/*.js",
+    "./vite-plugin": "./dist/vite-plugin.js"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/types/index.d.ts"
+      ],
+      "vite-plugin": [
+        "./dist/vite-plugin.d.ts"
+      ],
+      "run/*": [
+        "./dist/run/*.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "build:plugin": "vite build",
+    "build:run": "tsc -p tsconfig.build.run.json",
+    "build:vite-plugin": "tsc -p tsconfig.build.plugin.json",
+    "generate:types": "vue-tsc -p tsconfig.types.json",
+    "build": "pnpm run build:plugin && pnpm run build:run && pnpm run build:vite-plugin && pnpm run generate:types",
+    "install:plugin": "./dist/run/install.js",
+    "render": "./dist/run/render.js"
+  },
+  "dependencies": {
+    "unplugin-vue-components": "^0.18.5"
+  },
+  "devDependencies": {
+    "vitrify": "^0.4.0",
+    "@types/node": "^16.11.11",
+    "@types/ws": "^8.5.3",
+    "@vitejs/plugin-vue": "^3.0.0-alpha.1",
+    "typescript": "^4.6.2",
+    "vite": "^3.0.0-alpha.9",
+    "vue": "^3.2.37",
+    "vue-tsc": "^0.33.9"
+  }
+}

package/templates/quasar-monorepo/packages/quasar-plugin/run/install.ts

@@ -0,0 +1,6 @@
+import type { VitrifyContext } from 'vitrify'
+import { render } from './render.js'
+
+export async function run(args: VitrifyContext) {
+  await render()
+}

package/templates/quasar-monorepo/packages/quasar-plugin/run/render.ts

@@ -0,0 +1,9 @@
+import { VitrifyContext } from 'vitrify'
+
+export const render = async () => {
+  console.log('Nothing to be rendered')
+}
+
+export async function run(args: VitrifyContext) {
+  await render()
+}

package/templates/quasar-monorepo/packages/quasar-plugin/src/ui/components/HelloWorld.vue

@@ -0,0 +1,9 @@
+<template>
+  <q-btn :label="lang.myQuasarPlugin.changeMe"></q-btn>
+</template>
+
+<script setup lang="ts">
+import { useLang } from '../lang'
+
+const lang = useLang()
+</script>

package/templates/quasar-monorepo/packages/quasar-plugin/src/ui/index.ts

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

package/templates/quasar-monorepo/packages/quasar-plugin/src/ui/lang/en-us.ts

@@ -0,0 +1,9 @@
+import type { Language } from '../lang'
+
+const lang: Language = {
+  myQuasarPlugin: {
+    changeMe: 'Change me'
+  }
+}
+
+export default lang

package/templates/quasar-monorepo/packages/quasar-plugin/src/ui/lang.ts

@@ -0,0 +1,32 @@
+export interface Language {
+  myQuasarPlugin: {
+    changeMe: string
+  }
+}
+
+import { ref, Ref } from 'vue'
+import en from './lang/en-us'
+export const lang = ref(en)
+// @ts-ignore
+const locales = import.meta.glob('./lang/*.ts')
+
+export const defineLang = (lang: Language) => {
+  return lang
+}
+
+export const useLang = () => {
+  return lang as Ref<Language>
+}
+
+export const loadLang = async (locale: string) => {
+  try {
+    const data = (await locales[`./lang/${locale}.ts`]()).default
+
+    if (data) {
+      lang.value = data
+    }
+  } catch (e) {
+    console.log(e)
+    throw new Error(`Failed to load ${locale} locale.`)
+  }
+}

package/templates/quasar-monorepo/packages/quasar-plugin/src/ui/shims-vue.d.ts

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

package/templates/quasar-monorepo/packages/quasar-plugin/src/ui/utils/helpers.ts

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

package/templates/quasar-monorepo/packages/quasar-plugin/src/ui/vue-plugin.ts

@@ -0,0 +1,10 @@
+import HelloWorld from './components/HelloWorld.vue'
+
+import { loadLang } from './lang.js'
+
+function install(app: any, options: { lang: string }) {
+  loadLang(options?.lang || 'en-us')
+  app.component(HelloWorld.name, HelloWorld)
+}
+
+export { install }

package/templates/quasar-monorepo/packages/quasar-plugin/src/vite-plugin.ts.hbs

@@ -0,0 +1,19 @@
+import type { Plugin } from 'vite'
+
+export default async function QuasarVitePlugin (): Promise<Plugin> {
+  console.log('Running Quasar Vite Plugin')
+  return {
+    name: 'quasar-plugin-{{ name }}',
+    // @ts-ignore
+    config: async (config, { command }) => ({
+      quasar: {
+        // Extend quasar.conf
+      },
+      resolve: {
+        alias: [
+          { find: 'quasar-plugin-{{ name }}', replacement: new URL('../', import.meta.url) }
+        ]
+      }
+    })
+  }
+}

package/templates/quasar-monorepo/packages/quasar-plugin/tsconfig.build.plugin.json

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

package/templates/quasar-monorepo/packages/quasar-plugin/tsconfig.build.run.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.node.json",
+  "include": ["run/**/*.ts"],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

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

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "declaration": true,
+    "lib": ["esnext", "dom"],
+    "types": ["vite/client"],
+    "outDir": "./dist"
+  },
+  "include": [
+    "run/**/*.ts",
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/templates/quasar-monorepo/packages/quasar-plugin/tsconfig.node.json

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

package/templates/quasar-monorepo/packages/quasar-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/quasar-monorepo/packages/quasar-plugin/vite.config.ts

@@ -0,0 +1,32 @@
+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()]
+    })
+  ],
+  css: {
+    preprocessorOptions: {
+      sass: {
+        additionalData: `@import "quasar/src/css/index"`
+      }
+    }
+  },
+  build: {
+    // minify: false,
+    lib: {
+      // UMD not supported for code-splitting builds
+      formats: ['es'],
+      entry: './src/ui/index.ts'
+    },
+    emptyOutDir: true,
+    rollupOptions: {
+      external: ['vue', 'vue-router', 'quasar']
+    }
+  }
+}))

package/templates/quasar-monorepo/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'packages/*'

package/templates/quasar-plugin/_gitignore

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

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

@@ -0,0 +1,47 @@
+{
+  "name": "quasar-plugin-{{ name }}",
+  "description": "{{ description }}",
+  "author": "{{ author }}",
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    ".": "./dist/quasar-plugin-{{ name }}.es.js",
+    "./run/*": "./dist/run/*.js",
+    "./vite-plugin": "./dist/vite-plugin.js"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/types/index.d.ts"
+      ],
+      "vite-plugin": [
+        "./dist/vite-plugin.d.ts"
+      ],
+      "run/*": [
+        "./dist/run/*.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "build:plugin": "vite build",
+    "build:run": "tsc -p tsconfig.build.run.json",
+    "build:vite-plugin": "tsc -p tsconfig.build.plugin.json",
+    "generate:types": "vue-tsc -p tsconfig.types.json",
+    "build": "pnpm run build:plugin && pnpm run build:run && pnpm run build:vite-plugin && pnpm run generate:types",
+    "install:plugin": "./dist/run/install.js",
+    "render": "./dist/run/render.js"
+  },
+  "dependencies": {
+    "unplugin-vue-components": "^0.18.5"
+  },
+  "devDependencies": {
+    "vitrify": "^0.4.0",
+    "@types/node": "^16.11.11",
+    "@types/ws": "^8.5.3",
+    "@vitejs/plugin-vue": "^3.0.0-alpha.1",
+    "typescript": "^4.6.2",
+    "vite": "^3.0.0-alpha.9",
+    "vue": "^3.2.37",
+    "vue-tsc": "^0.33.9"
+  }
+}

package/templates/quasar-plugin/run/install.ts

@@ -0,0 +1,6 @@
+import type { VitrifyContext } from 'vitrify'
+import { render } from './render.js'
+
+export async function run(args: VitrifyContext) {
+  await render()
+}

package/templates/quasar-plugin/run/render.ts

@@ -0,0 +1,9 @@
+import { VitrifyContext } from 'vitrify'
+
+export const render = async () => {
+  console.log('Nothing to be rendered')
+}
+
+export async function run(args: VitrifyContext) {
+  await render()
+}

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

@@ -0,0 +1,9 @@
+<template>
+  <q-btn :label="lang.myQuasarPlugin.changeMe"></q-btn>
+</template>
+
+<script setup lang="ts">
+import { useLang } from '../lang'
+
+const lang = useLang()
+</script>

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

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

package/templates/quasar-plugin/src/ui/lang/en-us.ts

@@ -0,0 +1,9 @@
+import type { Language } from '../lang'
+
+const lang: Language = {
+  myQuasarPlugin: {
+    changeMe: 'Change me'
+  }
+}
+
+export default lang

package/templates/quasar-plugin/src/ui/lang.ts

@@ -0,0 +1,32 @@
+export interface Language {
+  myQuasarPlugin: {
+    changeMe: string
+  }
+}
+
+import { ref, Ref } from 'vue'
+import en from './lang/en-us'
+export const lang = ref(en)
+// @ts-ignore
+const locales = import.meta.glob('./lang/*.ts')
+
+export const defineLang = (lang: Language) => {
+  return lang
+}
+
+export const useLang = () => {
+  return lang as Ref<Language>
+}
+
+export const loadLang = async (locale: string) => {
+  try {
+    const data = (await locales[`./lang/${locale}.ts`]()).default
+
+    if (data) {
+      lang.value = data
+    }
+  } catch (e) {
+    console.log(e)
+    throw new Error(`Failed to load ${locale} locale.`)
+  }
+}

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

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

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

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

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

@@ -0,0 +1,10 @@
+import HelloWorld from './components/HelloWorld.vue'
+
+import { loadLang } from './lang.js'
+
+function install(app: any, options: { lang: string }) {
+  loadLang(options?.lang || 'en-us')
+  app.component(HelloWorld.name, HelloWorld)
+}
+
+export { install }

package/templates/quasar-plugin/src/vite-plugin.ts.hbs

@@ -0,0 +1,19 @@
+import type { Plugin } from 'vite'
+
+export default async function QuasarVitePlugin (): Promise<Plugin> {
+  console.log('Running Quasar Vite Plugin')
+  return {
+    name: 'quasar-plugin-{{ name }}',
+    // @ts-ignore
+    config: async (config, { command }) => ({
+      quasar: {
+        // Extend quasar.conf
+      },
+      resolve: {
+        alias: [
+          { find: 'quasar-plugin-{{ name }}', replacement: new URL('../', import.meta.url) }
+        ]
+      }
+    })
+  }
+}

package/templates/quasar-plugin/tsconfig.build.plugin.json

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