vitrify 0.1.1 → 0.2.0

package/dist/app-urls.js

@@ -7,17 +7,18 @@ export const getPkgJsonDir = (dir) => {
     }
     return getPkgJsonDir(new URL('..', dir));
 };
-export const appDir = getPkgJsonDir(new URL(`file://${process.cwd()}/`));
-export const cliDir = getPkgJsonDir(new URL('./', import.meta.url));
-export const cliViteDir = new URL('src/vite/', cliDir);
-export const srcDir = new URL('src/', appDir);
+export const getAppDir = () => getPkgJsonDir(new URL(`file://${process.cwd()}/`));
+export const getCliDir = () => getPkgJsonDir(new URL('./', import.meta.url));
+export const getCliViteDir = (cliDir) => new URL('src/vite/', cliDir);
+export const getSrcDir = (appDir) => new URL('src/', appDir);
+export const getCwd = () => new URL(`file://${process.cwd()}/`);
 // export const quasarDir = getPkgJsonDir(new URL('./', await resolve('quasar', appDir.href)))
-export const parsePath = (path) => {
+export const parsePath = (path, basePath) => {
     if (path) {
         if (path.slice(-1) !== '/')
             path += '/';
         if (path.startsWith('.')) {
-            return new URL(path, appDir);
+            return new URL(path, basePath);
         }
         else if (path) {
             return new URL(`file://${path}`);
@@ -25,8 +26,11 @@ export const parsePath = (path) => {
     }
     return;
 };
-export const projectURLs = {
-    src: (path) => new URL(path, srcDir),
-    app: (path) => new URL(path, appDir),
-    cli: (path) => new URL(path, cliDir)
+export const getProjectURLs = (appDir, cliDir) => {
+    const srcDir = getSrcDir(appDir);
+    return {
+        src: (path) => new URL(path, srcDir),
+        app: (path) => new URL(path, appDir),
+        cli: (path) => new URL(path, cliDir)
+    };
 };

package/dist/bin/cli.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import cac from 'cac';
-import { appDir as defaultAppDir, parsePath } from '../app-urls.js';
+import { getAppDir, parsePath } from '../app-urls.js';
 import { printHttpServerUrls } from '../helpers/logger.js';
 const cli = cac('vitrify');
 cli
@@ -21,13 +21,13 @@ cli
         appDir = new URL(`file://${options.appDir}`);
     }
     else {
-        appDir = defaultAppDir;
+        appDir = getAppDir();
     }
-    const baseOutDir = parsePath(options.outDir) || new URL('dist/', appDir);
+    const baseOutDir = parsePath(options.outDir, appDir) || new URL('dist/', appDir);
     const args = {
         base: options.base,
         appDir,
-        publicDir: parsePath(options.publicDir)
+        publicDir: parsePath(options.publicDir, appDir)
     };
     switch (options.mode) {
         case 'csr':
@@ -87,22 +87,23 @@ cli
         options.host = '0.0.0.0';
     }
     const { createServer } = await import('./dev.js');
+    const cwd = (await import('../app-urls.js')).getCwd();
     switch (options.mode) {
         case 'ssr':
             ;
             ({ server, vite } = await createServer({
                 mode: 'ssr',
                 host: options.host,
-                appDir: parsePath(options.appDir),
-                publicDir: parsePath(options.publicDir)
+                appDir: parsePath(options.appDir, cwd),
+                publicDir: parsePath(options.publicDir, cwd)
             }));
             break;
         default:
             ;
             ({ server, vite } = await createServer({
                 host: options.host,
-                appDir: parsePath(options.appDir),
-                publicDir: parsePath(options.publicDir)
+                appDir: parsePath(options.appDir, cwd),
+                publicDir: parsePath(options.publicDir, cwd)
             }));
             break;
     }
@@ -118,7 +119,7 @@ cli.command('test').action(async (options) => {
         appDir = new URL(`file://${options.appDir}`);
     }
     else {
-        appDir = defaultAppDir;
+        appDir = getAppDir();
     }
     await test({
         appDir

package/dist/bin/dev.js

@@ -3,10 +3,11 @@ import { baseConfig } from '../index.js';
 import fastify from 'fastify';
 import { readFileSync } from 'fs';
 export async function createServer({ port = 3000, logLevel = 'info', mode = 'csr', framework = 'vue', host, appDir, publicDir }) {
-    const { appDir: tempAppDir, cliDir } = await import('../app-urls.js');
-    const cwd = appDir || tempAppDir;
+    const { getAppDir, getCliDir, getCwd } = await import('../app-urls.js');
+    const cwd = getCwd();
+    const cliDir = getCliDir();
     if (!appDir)
-        appDir = tempAppDir;
+        appDir = getAppDir();
     const { fastifySsrPlugin } = await import(`../${framework}/fastify-ssr-plugin.js`);
     /**
      * @type {import('vite').ViteDevServer}
@@ -25,6 +26,7 @@ export async function createServer({ port = 3000, logLevel = 'info', mode = 'csr
         fs: {
             allow: [
                 searchForWorkspaceRoot(process.cwd()),
+                searchForWorkspaceRoot(appDir.pathname),
                 searchForWorkspaceRoot(cliDir.pathname)
                 // appDir.pathname,
             ]

package/dist/bin/run.js

@@ -1,13 +1,16 @@
-import { projectURLs } from '../app-urls.js';
 import { promises as fs } from 'fs';
 import readline from 'readline';
-const pkg = JSON.parse((await fs.readFile(projectURLs.cli('package.json'), 'utf-8')).toString());
+import { getAppDir, getCliDir, getProjectURLs } from '../app-urls.js';
 const rl = readline.createInterface({
     input: process.stdin,
     output: process.stdout
 });
 export async function run(filePath) {
     const { run } = await import(filePath);
+    const appDir = getAppDir();
+    const cliDir = getCliDir();
+    const projectURLs = getProjectURLs(appDir, cliDir);
+    const pkg = JSON.parse((await fs.readFile(projectURLs.cli('package.json'), 'utf-8')).toString());
     if (!run)
         throw new Error(`${filePath} does not have an export named run. Aborting...`);
     rl.question(`

package/dist/index.js

@@ -17,11 +17,22 @@ export const VIRTUAL_MODULES = [
     'virtual:static-imports'
 ];
 export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mode = 'production', framework = 'vue', pwa = false }) => {
-    const { appDir: tempAppDir, cliDir, cliViteDir, srcDir } = await import('./app-urls.js');
-    const cwd = appDir || tempAppDir;
+    const { getAppDir, getCliDir, getCliViteDir, getSrcDir, getCwd } = await import('./app-urls.js');
+    if (!appDir) {
+        appDir = getAppDir();
+    }
+    const srcDir = getSrcDir(appDir);
+    const cwd = getCwd();
+    const cliDir = getCliDir();
+    const cliViteDir = getCliViteDir(cliDir);
+    // const {
+    //   appDir: tempAppDir,
+    //   cliDir,
+    //   cliViteDir,
+    //   srcDir
+    // } = await import('./app-urls.js')
+    // const cwd = appDir || tempAppDir
     const frameworkDir = new URL(`${framework}/`, cliViteDir);
-    if (!appDir)
-        appDir = tempAppDir;
     // const localPackages = ['vue', 'vue-router', 'quasar']
     const localPackages = ['vue', 'vue-router'];
     const cliPackages = ['vitest'];
@@ -61,17 +72,10 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
         console.log('No vitrify.config.js file found, using defaults');
         vitrifyConfig = {};
     }
-    const { productName = 'Product name' } = JSON.parse(readFileSync(new URL('package.json', appDir).pathname, {
+    let { productName = 'Product name' } = JSON.parse(readFileSync(new URL('package.json', appDir).pathname, {
         encoding: 'utf-8'
     }));
     const fastifySetup = vitrifyConfig.vitrify?.fastify?.setup || ((fastify) => { });
-    const sass = [];
-    const sassVariables = vitrifyConfig.vitrify?.sassVariables;
-    if (sassVariables) {
-        for (const variable in sassVariables) {
-            sass.push(`${variable}: ${sassVariables[variable]}`);
-        }
-    }
     const ssrTransformCustomDir = () => {
         return {
             props: [],
@@ -93,6 +97,8 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
     let onMountedHooks;
     let globalCss;
     let staticImports;
+    let sassVariables;
+    let additionalData;
     const plugins = [
         vuePlugin({
             template: {
@@ -121,7 +127,7 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
         //   // quasarDir: packageUrls.quasar
         // }),
         {
-            name: 'vitrify-virtual-modules',
+            name: 'vitrify-setup',
             enforce: 'post',
             config: async (config, env) => {
                 bootFunctions = config.vitrify?.bootFunctions || [];
@@ -129,6 +135,27 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
                 onMountedHooks = config.vitrify?.hooks?.onMounted || [];
                 globalCss = config.vitrify?.globalCss || [];
                 staticImports = config.vitrify?.staticImports || {};
+                sassVariables = config.vitrify?.sass?.variables || {};
+                additionalData = config.vitrify?.sass?.additionalData || [];
+                return {
+                    css: {
+                        preprocessorOptions: {
+                            sass: {
+                                additionalData: [
+                                    ...Object.entries(sassVariables).map(([key, value]) => `${key}: ${value}`),
+                                    ...additionalData
+                                    // config.css?.preprocessorOptions?.sass.additionalData
+                                ].join('\n')
+                            }
+                        }
+                    }
+                };
+            },
+            configResolved: (config) => {
+                if (process.env.DEBUG) {
+                    console.log(config.css?.preprocessorOptions?.sass.additionalData);
+                    console.log(config.optimizeDeps);
+                }
             },
             resolveId(id) {
                 if (VIRTUAL_MODULES.includes(id))
@@ -170,6 +197,20 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
         plugins.unshift({
             name: 'html-transform',
             enforce: 'pre',
+            config: (config, env) => {
+                if (config.vitrify?.productName)
+                    productName = config.vitrify?.productName;
+            },
+            transform: (code, id) => {
+                if (id.endsWith('App.vue')) {
+                    code =
+                        code +
+                            `<style lang="sass">
+// do not remove, required for additionalData import
+</style>`;
+                }
+                return code;
+            },
             transformIndexHtml: {
                 enforce: 'pre',
                 transform: (html) => {
@@ -267,13 +308,13 @@ export const baseConfig = async ({ ssr, appDir, publicDir, command = 'build', mo
                     }
                 }
         },
-        css: {
-            preprocessorOptions: {
-                sass: {
-                    additionalData: [...sass].join('\n') + '\n'
-                }
-            }
-        },
+        // css: {
+        //   preprocessorOptions: {
+        //     sass: {
+        //       additionalData: sass ? [...sass].join('\n') : undefined
+        //     }
+        //   }
+        // },
         ssr: {
             // Create a SSR bundle
             noExternal: [

package/dist/plugins/quasar.js

@@ -91,7 +91,7 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
                         // @ts-ignore
                         const quasarPlugins = await import('virtual:quasar-plugins');
                         // @ts-ignore
-                        const directives = await import('quasar/directives');
+                        const directives = await import('quasar/src/directives.js');
                         app.use(staticImports.Quasar, {
                             plugins: quasarPlugins,
                             directives
@@ -109,6 +109,9 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
                         },
                         hooks: {
                             onMounted: onMountedHooks
+                        },
+                        sass: {
+                            additionalData: [`@import 'quasar/src/css/index.sass'`]
                         }
                     }
                 };
@@ -237,18 +240,19 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
                         __QUASAR_SSR_CLIENT__: ssr === 'client',
                         __QUASAR_SSR_PWA__: ssr === 'client' && pwa
                     },
-                    css: {
-                        preprocessorOptions: {
-                            sass: {
-                                additionalData: [
-                                    // ...extras.map(extra => `@import "@quasar/extras/${extra}/${extra}.css"`),
-                                    // ...extras.map(extra => `@import ${new URL(`${extra}/${extra}.css`, urls?.packages?.['@quasar/extras']).pathname}`) || [],
-                                    config.css?.preprocessorOptions?.sass?.additionalData,
-                                    `@import 'quasar/src/css/index.sass'`
-                                ].join('\n') + '\n'
-                            }
-                        }
-                    },
+                    // css: {
+                    //   preprocessorOptions: {
+                    //     sass: {
+                    //       additionalData: `@import 'quasar/src/css/index.sass'`
+                    //       // [
+                    //       //   // ...extras.map(extra => `@import "@quasar/extras/${extra}/${extra}.css"`),
+                    //       //   // ...extras.map(extra => `@import ${new URL(`${extra}/${extra}.css`, urls?.packages?.['@quasar/extras']).pathname}`) || [],
+                    //       //   // config.css?.preprocessorOptions?.sass?.additionalData,
+                    //       //   `@import 'quasar/src/css/index.sass'`
+                    //       // ].join('\n')
+                    //     }
+                    //   }
+                    // },
                     ssr: {
                         noExternal: ['quasar']
                     }
@@ -284,6 +288,7 @@ export const QuasarPlugin = async ({ ssr = false, pwa = false }) => {
           export * from 'quasar/src/components.js';
           export * from 'quasar/src/composables.js';
           export * from 'quasar/src/directives.js';
+          export * from 'quasar/src/utils.js';
           export { default as Quasar } from 'quasar/src/vue-plugin.js'`;
                 }
                 return null;

package/dist/types/app-urls.d.ts

@@ -1,10 +1,11 @@
 export declare const getPkgJsonDir: (dir: URL) => URL;
-export declare const appDir: URL;
-export declare const cliDir: URL;
-export declare const cliViteDir: URL;
-export declare const srcDir: URL;
-export declare const parsePath: (path: string) => URL | undefined;
-export declare const projectURLs: {
+export declare const getAppDir: () => URL;
+export declare const getCliDir: () => URL;
+export declare const getCliViteDir: (cliDir: URL) => URL;
+export declare const getSrcDir: (appDir: URL) => URL;
+export declare const getCwd: () => URL;
+export declare const parsePath: (path: string, basePath: URL) => URL | undefined;
+export declare const getProjectURLs: (appDir: URL, cliDir: URL) => {
     src: (path: string) => URL;
     app: (path: string) => URL;
     cli: (path: string) => URL;

package/dist/types/bin/run.d.ts

@@ -1,8 +1,8 @@
-import { projectURLs } from '../app-urls.js';
+import { getProjectURLs } from '../app-urls.js';
 export interface VitrifyContext {
     vitrify: {
         version: string;
     };
-    projectURLs: typeof projectURLs;
+    projectURLs: ReturnType<typeof getProjectURLs>;
 }
 export declare function run(filePath: string): Promise<void>;

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 import type { InlineConfig } from 'vite';
-import type { VitrifyConfig } from './vitrify-config.js';
+import type { BootFunction, VitrifyConfig } from './vitrify-config.js';
 import type { VitrifyContext } from './bin/run.js';
 import type { VitrifyPlugin } from './plugins/index.js';
 export declare const VIRTUAL_MODULES: string[];
@@ -12,4 +12,4 @@ export declare const baseConfig: ({ ssr, appDir, publicDir, command, mode, frame
     framework?: "vue" | undefined;
     pwa?: boolean | undefined;
 }) => Promise<InlineConfig>;
-export type { VitrifyConfig, VitrifyPlugin, VitrifyContext };
+export type { VitrifyConfig, VitrifyPlugin, VitrifyContext, BootFunction };

package/dist/types/vitrify-config.d.ts

@@ -37,7 +37,10 @@ export interface VitrifyConfig extends UserConfig {
         /**
          * Global SASS variables
          */
-        sassVariables?: Record<string, string>;
+        sass?: {
+            variables?: Record<string, string>;
+            additionalData?: string[];
+        };
         fastify?: {
             /**
              * setup() is called directly after instantiating fastify. Use it to register your own plugins, routes etc.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Pre-configured Vite CLI for your framework",
@@ -25,18 +25,18 @@
         "./dist/types/helpers/*.d.ts"
       ],
       "build": [
-        "./dist/types/node/build.d.ts"
+        "./dist/types/bin/build.d.ts"
       ],
       "dev": [
-        "./dist/types/node/dev.d.ts"
+        "./dist/types/bin/dev.d.ts"
       ],
       "help": [
-        "./dist/types/node/help.d.ts"
+        "./dist/types/bin/help.d.ts"
       ]
     }
   },
   "engines": {
-    "node": ">=12.2.0"
+    "node": ">=16.0.0"
   },
   "repository": {
     "type": "git",
@@ -54,15 +54,15 @@
   "dependencies": {
     "@quasar/extras": "^1.13.5",
     "@vitejs/plugin-vue": "^2.3.1",
-    "@vue/compiler-sfc": "^3.2.31",
-    "@vue/server-renderer": "^3.2.31",
+    "@vue/compiler-sfc": "^3.2.33",
+    "@vue/server-renderer": "^3.2.33",
     "builtin-modules": "^3.2.0",
     "cac": "^6.7.12",
     "chalk": "^5.0.1",
     "cross-env": "^7.0.3",
     "fastify": "^3.28.0",
     "fastify-static": "^4.6.1",
-    "glob": "^7.2.0",
+    "glob": "^8.0.1",
     "happy-dom": "^2.55.0",
     "import-meta-resolve": "^1.1.1",
     "local-pkg": "^0.4.1",
@@ -71,22 +71,21 @@
     "middie": "^6.0.0",
     "readline": "^1.3.0",
     "sass": "1.50.0",
-    "vite": "^2.9.1",
+    "vite": "^2.9.5",
     "vitest": "^0.9.3"
   },
   "devDependencies": {
     "@types/glob": "^7.2.0",
     "@types/merge-deep": "^3.0.0",
-    "@types/node": "^17.0.23",
+    "@types/node": "^17.0.24",
     "@types/ws": "^8.5.3",
-    "@vue/runtime-core": "^3.2.31",
+    "@vue/runtime-core": "^3.2.33",
     "quasar": "^2.6.6",
     "rollup": "^2.70.1",
     "typescript": "^4.6.3",
-    "unplugin-vue-components": "^0.19.2",
-    "vite": "^2.9.1",
-    "vitrify": "^0.1.1",
-    "vue": "^3.2.31",
+    "unplugin-vue-components": "^0.19.3",
+    "vite": "^2.9.5",
+    "vue": "^3.2.33",
     "vue-router": "^4.0.14"
   },
   "peerDependencies": {
@@ -95,7 +94,7 @@
     "fastify-sensible": "^3.1.2",
     "fastify-static": "^4.6.1",
     "quasar": "^2.6.6",
-    "vue": "^3.2.31",
+    "vue": "^3.2.33",
     "vue-router": "^4.0.14"
   },
   "publishConfig": {

package/src/vite/vue/components.d.ts

@@ -1,25 +0,0 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
-// Read more: https://github.com/vuejs/vue-next/pull/3399
-
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    QAvatar: typeof import('quasar')['QAvatar']
-    QBtn: typeof import('quasar')['QBtn']
-    QCard: typeof import('quasar')['QCard']
-    QCardSection: typeof import('quasar')['QCardSection']
-    QDrawer: typeof import('quasar')['QDrawer']
-    QHeader: typeof import('quasar')['QHeader']
-    QItemLabel: typeof import('quasar')['QItemLabel']
-    QLayout: typeof import('quasar')['QLayout']
-    QList: typeof import('quasar')['QList']
-    QPage: typeof import('quasar')['QPage']
-    QPageContainer: typeof import('quasar')['QPageContainer']
-    QToolbar: typeof import('quasar')['QToolbar']
-    QToolbarTitle: typeof import('quasar')['QToolbarTitle']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-  }
-}
-
-export {}