@navita/vite-plugin 1.0.0 → 2.0.0

package/index.cjs

@@ -4,94 +4,72 @@ var fs = require('node:fs');
 var createRenderer = require('@navita/core/createRenderer');
 var css = require('@navita/css');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var fs__namespace = /*#__PURE__*/_interopNamespaceDefault(fs);
-
-let renderer;
-/*
-Some information for anyone wondering why we have duplicate css for the initial load
-during development in remix.
-https://github.com/remix-run/remix/discussions/8070#discussioncomment-7625870
-*/ const VIRTUAL_CSS_NAME = '\0virtual:navita.css';
+const VIRTUAL_MODULE_ID = 'virtual:navita.css';
+const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID.replace(/.css$/, '');
 function navita(options) {
     const importMap = [
         ...css.importMap,
         ...options?.importMap || []
     ];
     let server;
-    let lastCssContent;
-    let context;
-    let isSSR = false;
+    let config;
+    let updateTimer = null;
+    let cssEmitted = false;
+    let isProduction = false;
     return {
-        name: "navita",
-        enforce: "pre",
-        config () {
-            return {
-                ssr: {
-                    external: [
-                        '@navita/css',
-                        '@navita/adapter'
-                    ]
-                }
-            };
-        },
-        configResolved (config) {
-            context = config.root;
-            isSSR = !!config.build.ssr;
+        enforce: 'pre',
+        name: 'navita',
+        configResolved (_resolvedConfig) {
+            config = _resolvedConfig;
+            isProduction = config.mode === 'production';
         },
         configureServer (_server) {
-            lastCssContent = undefined;
             server = _server;
         },
-        async buildStart () {
-            const defaultEngineOptions = {
-                enableSourceMaps: !!server,
-                enableDebugIdentifiers: !!server,
-                ...options?.engineOptions || {}
-            };
-            renderer = createRenderer.createRenderer({
-                context,
+        buildStart () {
+            if (getRenderer()) {
+                return;
+            }
+            setRenderer(createRenderer.createRenderer({
+                context: config.root,
+                engineOptions: {
+                    enableSourceMaps: !isProduction,
+                    enableDebugIdentifiers: !isProduction,
+                    ...options?.engineOptions || {}
+                },
                 importMap,
-                engineOptions: defaultEngineOptions,
                 resolver: async (filepath, request)=>{
                     const resolved = await this.resolve(request, filepath);
                     return resolved?.id || null;
                 },
                 readFile: (path)=>{
-                    return fs__namespace.promises.readFile(path, 'utf-8');
+                    return fs.promises.readFile(path, 'utf-8');
                 }
-            });
+            }));
         },
-        async resolveId (id) {
-            if (id === VIRTUAL_CSS_NAME) {
-                return VIRTUAL_CSS_NAME;
+        resolveId (source) {
+            const [id] = source.split('?');
+            if (id.endsWith(VIRTUAL_MODULE_ID)) {
+                return RESOLVED_VIRTUAL_MODULE_ID;
             }
-            return;
         },
-        async load (id) {
-            if (id === VIRTUAL_CSS_NAME) {
-                return lastCssContent;
+        async load (source) {
+            const [id] = source.split('?');
+            if (id === RESOLVED_VIRTUAL_MODULE_ID) {
+                const css = getRenderer()?.engine.renderCssToString() || '';
+                return {
+                    code: css,
+                    map: {
+                        mappings: ''
+                    }
+                };
             }
-            return;
         },
         async transform (code, id) {
-            // Bail as early as we can
+            const renderer = getRenderer();
+            if (!renderer || id.includes('node_modules')) {
+                return null;
+            }
             if (!importMap.map((x)=>x.source).some((value)=>code.indexOf(value) !== -1)) {
                 renderer.clearCache(id);
                 return null;
@@ -100,53 +78,81 @@ function navita(options) {
                 content: code,
                 filePath: id
             });
-            const newCssContent = renderer.engine.renderCssToString();
-            if (lastCssContent !== newCssContent) {
-                invalidateModule(VIRTUAL_CSS_NAME);
-                this.addWatchFile(VIRTUAL_CSS_NAME);
-                lastCssContent = newCssContent;
-                for (const file of dependencies){
-                    if (!file.includes('node_modules')) {
-                        this.addWatchFile(file);
-                    }
-                    invalidateModule(file);
+            if (!isProduction) {
+                for (const dependency of dependencies){
+                    this.addWatchFile(dependency);
                 }
+                updateNavitaCSS();
             }
             return {
-                code: `${result} import "${VIRTUAL_CSS_NAME}";`,
+                code: result,
                 map: sourceMap
             };
         },
-        renderChunk (_, chunk, third) {
-            if (isSSR) {
-                return;
-            }
-            for (const id of Object.keys(chunk.modules)){
-                if (id.startsWith(VIRTUAL_CSS_NAME)) {
-                    delete chunk.modules[id];
+        transformIndexHtml: {
+            handler: async ()=>{
+                // If we're building, we don't want to inject the CSS into the HTML.
+                // We'll do this in the `renderChunk` hook instead.
+                if (isProduction) {
+                    return [];
                 }
+                return [
+                    {
+                        tag: 'link',
+                        injectTo: 'head',
+                        attrs: {
+                            rel: 'stylesheet',
+                            href: `/${VIRTUAL_MODULE_ID}`
+                        }
+                    }
+                ];
+            }
+        },
+        renderChunk (_, chunk) {
+            if (cssEmitted) {
+                return;
             }
             chunk.viteMetadata.importedCss.add(this.getFileName(this.emitFile({
-                name: "navita.css",
-                type: "asset",
-                source: renderer.engine.renderCssToString()
+                name: 'navita.css',
+                type: 'asset',
+                source: getRenderer()?.engine.renderCssToString()
             })));
+            cssEmitted = true;
         }
     };
-    function invalidateModule(absoluteId) {
+    function updateNavitaCSS() {
         if (!server) {
             return;
         }
-        const { moduleGraph  } = server;
-        const modules = moduleGraph.getModulesByFile(absoluteId);
-        if (modules) {
-            for (const module of modules){
-                moduleGraph.invalidateModule(module);
-                // Vite uses this timestamp to add `?t=` query string automatically for HMR.
-                module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
+        clearTimeout(updateTimer);
+        updateTimer = setTimeout(()=>{
+            const { moduleGraph , ws  } = server;
+            const mod = moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID);
+            if (mod) {
+                moduleGraph.invalidateModule(mod);
+                ws.send({
+                    type: 'update',
+                    updates: [
+                        {
+                            type: 'css-update',
+                            path: `/${VIRTUAL_MODULE_ID}`,
+                            acceptedPath: `/${VIRTUAL_MODULE_ID}`,
+                            timestamp: Date.now()
+                        }
+                    ]
+                });
             }
-        }
+        }, 20);
     }
 }
+const globalNavitaRendererKey = '__navita_renderer';
+function setRenderer(renderer) {
+    globalThis[globalNavitaRendererKey] = renderer;
+}
+function getRenderer() {
+    return globalThis[globalNavitaRendererKey];
+}
 
+exports.VIRTUAL_MODULE_ID = VIRTUAL_MODULE_ID;
+exports.getRenderer = getRenderer;
 exports.navita = navita;

package/index.d.ts

@@ -1,10 +1,12 @@
-import { ImportMap, EngineOptions } from '@navita/core/createRenderer';
+import { ImportMap, EngineOptions, Renderer } from '@navita/core/createRenderer';
 import { Plugin } from 'vite';
 
+declare const VIRTUAL_MODULE_ID = "virtual:navita.css";
 interface Options {
     importMap?: ImportMap;
     engineOptions?: EngineOptions;
 }
 declare function navita(options?: Options): Plugin;
+declare function getRenderer(): Renderer | undefined;
 
-export { navita };
+export { Options, VIRTUAL_MODULE_ID, getRenderer, navita };

package/index.mjs

@@ -1,53 +1,41 @@
-import * as fs from 'node:fs';
+import fs from 'node:fs';
 import { createRenderer } from '@navita/core/createRenderer';
 import { importMap } from '@navita/css';
 
-let renderer;
-/*
-Some information for anyone wondering why we have duplicate css for the initial load
-during development in remix.
-https://github.com/remix-run/remix/discussions/8070#discussioncomment-7625870
-*/ const VIRTUAL_CSS_NAME = '\0virtual:navita.css';
+const VIRTUAL_MODULE_ID = 'virtual:navita.css';
+const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID.replace(/.css$/, '');
 function navita(options) {
     const importMap$1 = [
         ...importMap,
         ...options?.importMap || []
     ];
     let server;
-    let lastCssContent;
-    let context;
-    let isSSR = false;
+    let config;
+    let updateTimer = null;
+    let cssEmitted = false;
+    let isProduction = false;
     return {
-        name: "navita",
-        enforce: "pre",
-        config () {
-            return {
-                ssr: {
-                    external: [
-                        '@navita/css',
-                        '@navita/adapter'
-                    ]
-                }
-            };
-        },
-        configResolved (config) {
-            context = config.root;
-            isSSR = !!config.build.ssr;
+        enforce: 'pre',
+        name: 'navita',
+        configResolved (_resolvedConfig) {
+            config = _resolvedConfig;
+            isProduction = config.mode === 'production';
         },
         configureServer (_server) {
-            lastCssContent = undefined;
             server = _server;
         },
-        async buildStart () {
-            const defaultEngineOptions = {
-                enableSourceMaps: !!server,
-                enableDebugIdentifiers: !!server,
-                ...options?.engineOptions || {}
-            };
-            renderer = createRenderer({
-                context,
+        buildStart () {
+            if (getRenderer()) {
+                return;
+            }
+            setRenderer(createRenderer({
+                context: config.root,
+                engineOptions: {
+                    enableSourceMaps: !isProduction,
+                    enableDebugIdentifiers: !isProduction,
+                    ...options?.engineOptions || {}
+                },
                 importMap: importMap$1,
-                engineOptions: defaultEngineOptions,
                 resolver: async (filepath, request)=>{
                     const resolved = await this.resolve(request, filepath);
                     return resolved?.id || null;
@@ -55,22 +43,31 @@ function navita(options) {
                 readFile: (path)=>{
                     return fs.promises.readFile(path, 'utf-8');
                 }
-            });
+            }));
         },
-        async resolveId (id) {
-            if (id === VIRTUAL_CSS_NAME) {
-                return VIRTUAL_CSS_NAME;
+        resolveId (source) {
+            const [id] = source.split('?');
+            if (id.endsWith(VIRTUAL_MODULE_ID)) {
+                return RESOLVED_VIRTUAL_MODULE_ID;
             }
-            return;
         },
-        async load (id) {
-            if (id === VIRTUAL_CSS_NAME) {
-                return lastCssContent;
+        async load (source) {
+            const [id] = source.split('?');
+            if (id === RESOLVED_VIRTUAL_MODULE_ID) {
+                const css = getRenderer()?.engine.renderCssToString() || '';
+                return {
+                    code: css,
+                    map: {
+                        mappings: ''
+                    }
+                };
             }
-            return;
         },
         async transform (code, id) {
-            // Bail as early as we can
+            const renderer = getRenderer();
+            if (!renderer || id.includes('node_modules')) {
+                return null;
+            }
             if (!importMap$1.map((x)=>x.source).some((value)=>code.indexOf(value) !== -1)) {
                 renderer.clearCache(id);
                 return null;
@@ -79,53 +76,79 @@ function navita(options) {
                 content: code,
                 filePath: id
             });
-            const newCssContent = renderer.engine.renderCssToString();
-            if (lastCssContent !== newCssContent) {
-                invalidateModule(VIRTUAL_CSS_NAME);
-                this.addWatchFile(VIRTUAL_CSS_NAME);
-                lastCssContent = newCssContent;
-                for (const file of dependencies){
-                    if (!file.includes('node_modules')) {
-                        this.addWatchFile(file);
-                    }
-                    invalidateModule(file);
+            if (!isProduction) {
+                for (const dependency of dependencies){
+                    this.addWatchFile(dependency);
                 }
+                updateNavitaCSS();
             }
             return {
-                code: `${result} import "${VIRTUAL_CSS_NAME}";`,
+                code: result,
                 map: sourceMap
             };
         },
-        renderChunk (_, chunk, third) {
-            if (isSSR) {
-                return;
-            }
-            for (const id of Object.keys(chunk.modules)){
-                if (id.startsWith(VIRTUAL_CSS_NAME)) {
-                    delete chunk.modules[id];
+        transformIndexHtml: {
+            handler: async ()=>{
+                // If we're building, we don't want to inject the CSS into the HTML.
+                // We'll do this in the `renderChunk` hook instead.
+                if (isProduction) {
+                    return [];
                 }
+                return [
+                    {
+                        tag: 'link',
+                        injectTo: 'head',
+                        attrs: {
+                            rel: 'stylesheet',
+                            href: `/${VIRTUAL_MODULE_ID}`
+                        }
+                    }
+                ];
+            }
+        },
+        renderChunk (_, chunk) {
+            if (cssEmitted) {
+                return;
             }
             chunk.viteMetadata.importedCss.add(this.getFileName(this.emitFile({
-                name: "navita.css",
-                type: "asset",
-                source: renderer.engine.renderCssToString()
+                name: 'navita.css',
+                type: 'asset',
+                source: getRenderer()?.engine.renderCssToString()
             })));
+            cssEmitted = true;
         }
     };
-    function invalidateModule(absoluteId) {
+    function updateNavitaCSS() {
         if (!server) {
             return;
         }
-        const { moduleGraph  } = server;
-        const modules = moduleGraph.getModulesByFile(absoluteId);
-        if (modules) {
-            for (const module of modules){
-                moduleGraph.invalidateModule(module);
-                // Vite uses this timestamp to add `?t=` query string automatically for HMR.
-                module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
+        clearTimeout(updateTimer);
+        updateTimer = setTimeout(()=>{
+            const { moduleGraph , ws  } = server;
+            const mod = moduleGraph.getModuleById(RESOLVED_VIRTUAL_MODULE_ID);
+            if (mod) {
+                moduleGraph.invalidateModule(mod);
+                ws.send({
+                    type: 'update',
+                    updates: [
+                        {
+                            type: 'css-update',
+                            path: `/${VIRTUAL_MODULE_ID}`,
+                            acceptedPath: `/${VIRTUAL_MODULE_ID}`,
+                            timestamp: Date.now()
+                        }
+                    ]
+                });
             }
-        }
+        }, 20);
     }
 }
+const globalNavitaRendererKey = '__navita_renderer';
+function setRenderer(renderer) {
+    globalThis[globalNavitaRendererKey] = renderer;
+}
+function getRenderer() {
+    return globalThis[globalNavitaRendererKey];
+}
 
-export { navita };
+export { VIRTUAL_MODULE_ID, getRenderer, navita };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navita/vite-plugin",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Navita Vite Plugin",
   "keywords": [
     "vite",
@@ -14,11 +14,16 @@
       "import": "./index.mjs",
       "require": "./index.cjs",
       "types": "./index.d.ts"
+    },
+    "./remix": {
+      "import": "./remix.mjs",
+      "require": "./remix.cjs",
+      "types": "./remix.d.ts"
     }
   },
   "dependencies": {
-    "@navita/css": "0.2.0",
-    "@navita/core": "1.0.0"
+    "@navita/core": "1.0.0",
+    "@navita/css": "0.2.0"
   },
   "license": "MIT",
   "author": "Eagerpatch",

package/remix.cjs

@@ -0,0 +1,84 @@
+'use strict';
+
+var crypto = require('node:crypto');
+var index = require('./index.cjs');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var crypto__namespace = /*#__PURE__*/_interopNamespaceDefault(crypto);
+
+let cssFileName;
+function navitaRemix(options) {
+    let server;
+    const { renderChunk , ...navitaVite } = index.navita(options);
+    return [
+        navitaVite,
+        {
+            name: 'navita-remix',
+            configureServer (_server) {
+                server = _server;
+                server.middlewares.use(async function middleware(_req, _res, next) {
+                    try {
+                        const build = await server.ssrLoadModule('virtual:remix/server-build');
+                        const { module  } = build.routes.root;
+                        // We modify the root module, to automatically include the CSS
+                        // when running the dev server.
+                        build.routes.root.module = {
+                            ...module,
+                            links: ()=>[
+                                    ...module.links(),
+                                    {
+                                        rel: 'stylesheet',
+                                        href: `/${index.VIRTUAL_MODULE_ID}`
+                                    }
+                                ]
+                        };
+                    } catch (e) {
+                        console.error(e);
+                    }
+                    next();
+                });
+            },
+            renderChunk (_, chunk) {
+                if (chunk.name === "root") {
+                    // Generate a random name for the CSS file.
+                    // Vite uses a file hash as the name, but since the client build will finish before
+                    // the server build, we need to generate a random name for the CSS file.
+                    // Ideally we could use a hash, but since the server might contain more styles than the client, we need to do it like this.
+                    const random = crypto__namespace.randomBytes(30).toString("base64").replace(/[^a-zA-Z0-9]/g, "").slice(0, 8);
+                    cssFileName = `assets/navita-${random}.css`;
+                    // Attach the file to the root chunk so that it's included in the client build.
+                    chunk.viteMetadata?.importedCss.add(cssFileName);
+                    return;
+                }
+                if (chunk.name === 'server-build') {
+                    // In the server-build, we'll generate the CSS and emit it as an asset.
+                    // Remix will then move it to the client assets.
+                    this.emitFile({
+                        fileName: cssFileName,
+                        name: 'navita.css',
+                        type: 'asset',
+                        source: index.getRenderer()?.engine.renderCssToString()
+                    });
+                }
+            }
+        }
+    ];
+}
+
+exports.navitaRemix = navitaRemix;

package/remix.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from 'vite';
+import { Options } from './index.js';
+import '@navita/core/createRenderer';
+
+declare function navitaRemix(options?: Options): Plugin[];
+
+export { navitaRemix };

package/remix.mjs

@@ -0,0 +1,63 @@
+import * as crypto from 'node:crypto';
+import { navita, VIRTUAL_MODULE_ID, getRenderer } from './index.mjs';
+
+let cssFileName;
+function navitaRemix(options) {
+    let server;
+    const { renderChunk , ...navitaVite } = navita(options);
+    return [
+        navitaVite,
+        {
+            name: 'navita-remix',
+            configureServer (_server) {
+                server = _server;
+                server.middlewares.use(async function middleware(_req, _res, next) {
+                    try {
+                        const build = await server.ssrLoadModule('virtual:remix/server-build');
+                        const { module  } = build.routes.root;
+                        // We modify the root module, to automatically include the CSS
+                        // when running the dev server.
+                        build.routes.root.module = {
+                            ...module,
+                            links: ()=>[
+                                    ...module.links(),
+                                    {
+                                        rel: 'stylesheet',
+                                        href: `/${VIRTUAL_MODULE_ID}`
+                                    }
+                                ]
+                        };
+                    } catch (e) {
+                        console.error(e);
+                    }
+                    next();
+                });
+            },
+            renderChunk (_, chunk) {
+                if (chunk.name === "root") {
+                    // Generate a random name for the CSS file.
+                    // Vite uses a file hash as the name, but since the client build will finish before
+                    // the server build, we need to generate a random name for the CSS file.
+                    // Ideally we could use a hash, but since the server might contain more styles than the client, we need to do it like this.
+                    const random = crypto.randomBytes(30).toString("base64").replace(/[^a-zA-Z0-9]/g, "").slice(0, 8);
+                    cssFileName = `assets/navita-${random}.css`;
+                    // Attach the file to the root chunk so that it's included in the client build.
+                    chunk.viteMetadata?.importedCss.add(cssFileName);
+                    return;
+                }
+                if (chunk.name === 'server-build') {
+                    // In the server-build, we'll generate the CSS and emit it as an asset.
+                    // Remix will then move it to the client assets.
+                    this.emitFile({
+                        fileName: cssFileName,
+                        name: 'navita.css',
+                        type: 'asset',
+                        source: getRenderer()?.engine.renderCssToString()
+                    });
+                }
+            }
+        }
+    ];
+}
+
+export { navitaRemix };