vitrify 0.10.4 → 0.10.6

package/dist/bin/dev.js

@@ -38,7 +38,9 @@ ssr, framework = 'vue', host, appDir, publicDir, base }) {
         __HOST__: `'${host}'`
     };
     const wsPort = await getFirstOpenPort(24678);
-    exitLogs.push(`[warning] HTTPS mode enabled. Visit https://{hostname}:${wsPort} to enable a security exception for HMR.`);
+    if (config.server?.https) {
+        exitLogs.push(`[warning] HTTPS mode enabled. Visit https://{hostname}:${wsPort} to enable a security exception for HMR.`);
+    }
     config.server = {
         https: config.server?.https,
         hmr: {

package/dist/frameworks/vue/fastify-ssr-plugin.js

@@ -1,6 +1,6 @@
 import fastifyStatic from '@fastify/static';
 import { readFileSync } from 'fs';
-import { componentsModules, collectCss } from '../../helpers/collect-css-ssr.js';
+import { appendToHead } from '../../helpers/utils.js';
 const fastifySsrPlugin = async (fastify, options, done) => {
     options.baseUrl = options.baseUrl || '/';
     options.mode = options.mode || process.env.MODE || import.meta.env.MODE;
@@ -83,26 +83,23 @@ const fastifySsrPlugin = async (fastify, options, done) => {
                 catch (e) {
                     manifest = {};
                 }
-                const cssModules = [entryUrl];
-                // // @ts-ignore
-                // if (options.vite?.config.vitrify!.globalCss)
-                //   cssModules.push(...options.vite?.config.vitrify.globalCss)
-                const matchedModules = componentsModules(cssModules, vite);
-                const css = collectCss({
-                    mods: matchedModules
-                });
+                // const cssModules = [entryUrl]
+                // const matchedModules = componentsModules(cssModules, vite!)
+                // const css = collectCss({
+                //   mods: matchedModules
+                // })
                 const [appHtml, preloadLinks] = await render(url, manifest, ssrContext);
                 if (!ssrContext.initialState)
                     ssrContext.initialState = {};
                 ssrContext.initialState.provide = provide;
                 let html = template
-                    .replace(`<!--preload-links-->`, preloadLinks)
                     .replace(`<!--app-html-->`, appHtml)
                     .replace('<!--product-name-->', options.productName || 'Product name')
-                    .replace('<!--dev-ssr-css-->', css)
+                    // .replace('<!--dev-ssr-css-->', css)
                     .replace('<!--initial-state-->', `<script>
             __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
             </script>`);
+                html = appendToHead(preloadLinks, html);
                 if (options.onRendered?.length) {
                     for (const ssrFunction of options.onRendered) {
                         html = ssrFunction(html, ssrContext);
@@ -144,12 +141,10 @@ const fastifySsrPlugin = async (fastify, options, done) => {
             if (!ssrContext.initialState)
                 ssrContext.initialState = {};
             ssrContext.initialState.provide = provide;
-            let html = template
-                .replace(`<!--preload-links-->`, preloadLinks)
-                .replace(`<!--app-html-->`, appHtml)
-                .replace('<!--initial-state-->', `<script>
+            let html = template.replace(`<!--app-html-->`, appHtml).replace('<!--initial-state-->', `<script>
           __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
           </script>`);
+            html = appendToHead(preloadLinks, html);
             if (options.onRendered?.length) {
                 for (const ssrFunction of options.onRendered) {
                     html = ssrFunction(html, ssrContext);

package/dist/frameworks/vue/prerender.js

@@ -1,5 +1,6 @@
 import { promises as fs } from 'fs';
 import { routesToPaths } from '../../helpers/routes.js';
+import { appendToHead } from '../../helpers/utils.js';
 export const prerender = async ({ outDir, templatePath, manifestPath, entryServerPath, onRendered }) => {
     const promises = [];
     const template = (await fs.readFile(templatePath)).toString();
@@ -12,8 +13,7 @@ export const prerender = async ({ outDir, templatePath, manifestPath, entryServe
         logLevel: 'warn',
         external: true,
         inlineFonts: true,
-        preloadFonts: true,
-        preload: 'swap'
+        preloadFonts: true
     });
     for (const url of paths) {
         const filename = (url.endsWith('/') ? 'index' : url.replace(/^\//g, '')) + '.html';
@@ -23,9 +23,9 @@ export const prerender = async ({ outDir, templatePath, manifestPath, entryServe
             res: {}
         };
         const [appHtml, preloadLinks] = await render(url, manifest, ssrContext);
-        let html = template
-            .replace(`<!--preload-links-->`, preloadLinks)
-            .replace(`<!--app-html-->`, appHtml);
+        let html = template.replace(`<!--app-html-->`, appHtml);
+        html = appendToHead(preloadLinks, html);
+        // html = appendToBody(preloadLinks, html)
         if (onRendered?.length) {
             for (const ssrFunction of onRendered) {
                 html = ssrFunction(html, ssrContext);

package/dist/helpers/utils.js

@@ -22,3 +22,5 @@ export function resolveHostname(optionsHost) {
         : host;
     return { host, name };
 }
+export const appendToHead = (preloadLinks, html) => html.replace(/<\/head>/, preloadLinks + '</head>');
+export const appendToBody = (links, html) => html.replace(/<\/body>/, links + '</body>');

package/dist/index.js

@@ -198,6 +198,30 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
             ...vitrifyConfig.vitrify.ssr.serverModules
         ];
     const plugins = [
+        {
+            name: 'vitrify-transforms',
+            enforce: 'pre',
+            transform: (code, id) => {
+                // if (['main.ts', 'vitrify'].every((val) => id.includes(val))) {
+                //   code =
+                //     `${globalCss.map((css) => `import '${css}'`).join('\n')}\n` + code
+                // }
+                if (['RootComponent.vue', 'vitrify'].every((val) => id.includes(val))) {
+                    const css = `${globalCss
+                        .map((css) => `@import '${css}';`)
+                        .join('\n')}\n`;
+                    const sass = [
+                        ...Object.entries(sassVariables).map(([key, value]) => `${key}: ${value}`),
+                        ...globalSass.map((sass) => `@import '${sass}'`)
+                    ].join('\n');
+                    code = code
+                        .replace(/<style>(.*?)<\/style>/, '<style>' + css + '</style>')
+                        .replace(/<style lang="sass">(.*?)<\/style>/, '<style lang="sass">' + sass + '</style>');
+                    // code = code.replace(/<\/style>/, sass + '</style>')
+                }
+                return code;
+            }
+        },
         vuePlugin(),
         envPlugin(),
         ...frameworkPlugins,
@@ -233,13 +257,24 @@ export const baseConfig = async ({ ssr, appDir, publicDir, base = '/', command =
                     return { id };
                 return;
             },
-            transform: (code, id) => {
-                if (id.includes('main.ts') && id.includes('vitrify')) {
-                    code =
-                        `${globalCss.map((css) => `import '${css}'`).join('\n')}\n` + code;
-                }
-                return code;
-            },
+            // transform: (code, id) => {
+            //   if (['main.ts', 'vitrify'].every((val) => id.includes(val))) {
+            //     code =
+            //       `${globalCss.map((css) => `import '${css}'`).join('\n')}\n` + code
+            //   }
+            //   if (['RootComponent.vue', 'vitrify'].every((val) => id.includes(val))) {
+            //     console.log('lksdflkjsdf')
+            //     const sass = [
+            //       ...Object.entries(sassVariables).map(
+            //         ([key, value]) => `${key}: ${value}`
+            //       ),
+            //       ...globalSass.map((sass) => `@import '${sass}'`)
+            //     ].join('\n')
+            //     code = code.replace(/<\/style>/, sass + '</style>')
+            //     console.log(code)
+            //   }
+            //   return code
+            // },
             load(id) {
                 if (id === 'virtual:vitrify-hooks') {
                     return `export const onBoot = [${onBootHooks

package/dist/types/frameworks/vue/fastify-ssr-plugin.d.ts

@@ -1,6 +1,6 @@
 import type { FastifyPluginCallback, FastifyRequest, FastifyReply } from 'fastify';
 import type { ViteDevServer } from 'vite';
-import type { OnRenderedHook } from 'src/node/vitrify-config.js';
+import type { OnRenderedHook } from '../../vitrify-config.js';
 export interface FastifySsrOptions {
     baseUrl?: string;
     provide?: (req: FastifyRequest, res: FastifyReply) => Promise<Record<string, unknown | {

package/dist/types/helpers/utils.d.ts

@@ -3,3 +3,5 @@ export interface Hostname {
     name: string;
 }
 export declare function resolveHostname(optionsHost: string | boolean | undefined): Hostname;
+export declare const appendToHead: (preloadLinks: string, html: string) => string;
+export declare const appendToBody: (links: string, html: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitrify",
-  "version": "0.10.4",
+  "version": "0.10.6",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "Vite as your Full Stack development tool",

package/src/node/bin/dev.ts

@@ -66,10 +66,11 @@ export async function createVitrifyDevServer({
   }
 
   const wsPort = await getFirstOpenPort(24678)
-  exitLogs.push(
-    `[warning] HTTPS mode enabled. Visit https://{hostname}:${wsPort} to enable a security exception for HMR.`
-  )
-
+  if (config.server?.https) {
+    exitLogs.push(
+      `[warning] HTTPS mode enabled. Visit https://{hostname}:${wsPort} to enable a security exception for HMR.`
+    )
+  }
   config.server = {
     https: config.server?.https,
     hmr: {

package/src/node/frameworks/vue/fastify-ssr-plugin.ts

@@ -6,8 +6,9 @@ import type {
 import fastifyStatic from '@fastify/static'
 import { readFileSync } from 'fs'
 import { componentsModules, collectCss } from '../../helpers/collect-css-ssr.js'
+import { appendToHead } from '../../helpers/utils.js'
 import type { ViteDevServer } from 'vite'
-import type { OnRenderedHook } from 'src/node/vitrify-config.js'
+import type { OnRenderedHook } from '../../vitrify-config.js'
 export interface FastifySsrOptions {
   baseUrl?: string
   provide?: (
@@ -124,14 +125,11 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
           manifest = {}
         }
 
-        const cssModules = [entryUrl]
-        // // @ts-ignore
-        // if (options.vite?.config.vitrify!.globalCss)
-        //   cssModules.push(...options.vite?.config.vitrify.globalCss)
-        const matchedModules = componentsModules(cssModules, vite!)
-        const css = collectCss({
-          mods: matchedModules
-        })
+        // const cssModules = [entryUrl]
+        // const matchedModules = componentsModules(cssModules, vite!)
+        // const css = collectCss({
+        //   mods: matchedModules
+        // })
 
         const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
 
@@ -139,10 +137,9 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
         ssrContext.initialState.provide = provide
 
         let html = template
-          .replace(`<!--preload-links-->`, preloadLinks)
           .replace(`<!--app-html-->`, appHtml)
           .replace('<!--product-name-->', options.productName || 'Product name')
-          .replace('<!--dev-ssr-css-->', css)
+          // .replace('<!--dev-ssr-css-->', css)
           .replace(
             '<!--initial-state-->',
             `<script>
@@ -150,6 +147,8 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
             </script>`
           )
 
+        html = appendToHead(preloadLinks, html)
+
         if (options.onRendered?.length) {
           for (const ssrFunction of options.onRendered) {
             html = ssrFunction(html, ssrContext)
@@ -204,15 +203,14 @@ const fastifySsrPlugin: FastifyPluginCallback<FastifySsrOptions> = async (
       if (!ssrContext.initialState) ssrContext.initialState = {}
       ssrContext.initialState.provide = provide
 
-      let html = template
-        .replace(`<!--preload-links-->`, preloadLinks)
-        .replace(`<!--app-html-->`, appHtml)
-        .replace(
-          '<!--initial-state-->',
-          `<script>
+      let html = template.replace(`<!--app-html-->`, appHtml).replace(
+        '<!--initial-state-->',
+        `<script>
           __INITIAL_STATE__ = '${JSON.stringify(ssrContext.initialState)}'
           </script>`
-        )
+      )
+
+      html = appendToHead(preloadLinks, html)
 
       if (options.onRendered?.length) {
         for (const ssrFunction of options.onRendered) {

package/src/node/frameworks/vue/prerender.ts

@@ -1,6 +1,7 @@
 import { promises as fs } from 'fs'
 import type { OnRenderedHook } from 'src/node/vitrify-config.js'
 import { routesToPaths } from '../../helpers/routes.js'
+import { appendToHead, appendToBody } from '../../helpers/utils.js'
 
 export const prerender = async ({
   outDir,
@@ -28,8 +29,7 @@ export const prerender = async ({
     logLevel: 'warn',
     external: true,
     inlineFonts: true,
-    preloadFonts: true,
-    preload: 'swap'
+    preloadFonts: true
   })
   for (const url of paths) {
     const filename =
@@ -41,9 +41,10 @@ export const prerender = async ({
     }
     const [appHtml, preloadLinks] = await render(url, manifest, ssrContext)
 
-    let html = template
-      .replace(`<!--preload-links-->`, preloadLinks)
-      .replace(`<!--app-html-->`, appHtml)
+    let html = template.replace(`<!--app-html-->`, appHtml)
+
+    html = appendToHead(preloadLinks, html)
+    // html = appendToBody(preloadLinks, html)
 
     if (onRendered?.length) {
       for (const ssrFunction of onRendered) {

package/src/node/helpers/utils.ts

@@ -35,3 +35,9 @@ export function resolveHostname(
 
   return { host, name }
 }
+
+export const appendToHead = (preloadLinks: string, html: string) =>
+  html.replace(/<\/head>/, preloadLinks + '</head>')
+
+export const appendToBody = (links: string, html: string) =>
+  html.replace(/<\/body>/, links + '</body>')

package/src/node/index.ts

@@ -270,6 +270,36 @@ export const baseConfig = async ({
     ]
 
   const plugins: UserConfig['plugins'] = [
+    {
+      name: 'vitrify-transforms',
+      enforce: 'pre',
+      transform: (code, id) => {
+        // if (['main.ts', 'vitrify'].every((val) => id.includes(val))) {
+        //   code =
+        //     `${globalCss.map((css) => `import '${css}'`).join('\n')}\n` + code
+        // }
+        if (['RootComponent.vue', 'vitrify'].every((val) => id.includes(val))) {
+          const css = `${globalCss
+            .map((css) => `@import '${css}';`)
+            .join('\n')}\n`
+
+          const sass = [
+            ...Object.entries(sassVariables).map(
+              ([key, value]) => `${key}: ${value}`
+            ),
+            ...globalSass.map((sass) => `@import '${sass}'`)
+          ].join('\n')
+          code = code
+            .replace(/<style>(.*?)<\/style>/, '<style>' + css + '</style>')
+            .replace(
+              /<style lang="sass">(.*?)<\/style>/,
+              '<style lang="sass">' + sass + '</style>'
+            )
+          // code = code.replace(/<\/style>/, sass + '</style>')
+        }
+        return code
+      }
+    },
     vuePlugin(),
     envPlugin(),
     ...frameworkPlugins,
@@ -303,13 +333,24 @@ export const baseConfig = async ({
         if (VIRTUAL_MODULES.includes(id)) return { id }
         return
       },
-      transform: (code, id) => {
-        if (id.includes('main.ts') && id.includes('vitrify')) {
-          code =
-            `${globalCss.map((css) => `import '${css}'`).join('\n')}\n` + code
-        }
-        return code
-      },
+      // transform: (code, id) => {
+      //   if (['main.ts', 'vitrify'].every((val) => id.includes(val))) {
+      //     code =
+      //       `${globalCss.map((css) => `import '${css}'`).join('\n')}\n` + code
+      //   }
+      //   if (['RootComponent.vue', 'vitrify'].every((val) => id.includes(val))) {
+      //     console.log('lksdflkjsdf')
+      //     const sass = [
+      //       ...Object.entries(sassVariables).map(
+      //         ([key, value]) => `${key}: ${value}`
+      //       ),
+      //       ...globalSass.map((sass) => `@import '${sass}'`)
+      //     ].join('\n')
+      //     code = code.replace(/<\/style>/, sass + '</style>')
+      //     console.log(code)
+      //   }
+      //   return code
+      // },
       load(id) {
         if (id === 'virtual:vitrify-hooks') {
           return `export const onBoot = [${onBootHooks

package/src/vite/vue/RootComponent.vue

@@ -0,0 +1,28 @@
+<template>
+  <render></render>
+</template>
+<script setup lang="ts">
+import {
+  defineProps,
+  h,
+  onMounted as onMountedVue,
+  getCurrentInstance
+} from 'vue'
+import { onBoot, onMounted } from 'virtual:vitrify-hooks'
+import * as staticImports from 'virtual:static-imports'
+import App from 'src/App.vue'
+// import 'vitrify.sass'
+const instance = getCurrentInstance()
+const props = defineProps()
+
+onMountedVue(async () => {
+  for (let fn of onMounted) {
+    await fn(instance, staticImports)
+  }
+})
+
+const render = () => h(App, props)
+</script>
+
+<style></style>
+<style lang="sass"></style>

package/src/vite/vue/main.ts

@@ -1,4 +1,4 @@
-import 'vitrify.sass'
+// import 'vitrify.sass'
 import createRouter from 'src/router'
 import {
   createSSRApp,
@@ -12,7 +12,7 @@ import { onBoot, onMounted } from 'virtual:vitrify-hooks'
 import routes from 'src/router/routes'
 import * as staticImports from 'virtual:static-imports'
 import App from 'src/App.vue'
-
+import RootComponent from './RootComponent.vue'
 interface ssrContext {
   ssr: boolean
   provide?: Record<string, unknown>
@@ -28,20 +28,20 @@ export async function createApp(
   ssrContext?: ssrContext
 ) {
   let app
-  const RootComponent = {
-    name: 'AppWrapper',
-    setup(props) {
-      const instance = getCurrentInstance()
+  // const RootComponent = {
+  //   name: 'AppWrapper',
+  //   setup(props) {
+  //     const instance = getCurrentInstance()
 
-      onMountedVue(async () => {
-        for (let fn of onMounted) {
-          await fn(instance, staticImports)
-        }
-      })
+  //     onMountedVue(async () => {
+  //       for (let fn of onMounted) {
+  //         await fn(instance, staticImports)
+  //       }
+  //     })
 
-      return () => h(App, props)
-    }
-  }
+  //     return () => h(App, props)
+  //   }
+  // }
   if (ssr) {
     app = createSSRApp(RootComponent)
   } else {