@navita/next-plugin 0.1.3 → 0.3.0

package/fromServerLoader.cjs

@@ -7,6 +7,13 @@ function pitch() {
     const dependency = webpackPlugin.getNavitaDependency(this._compiler.webpack);
     const { cssHash , issuerPath  } = Object.fromEntries(new URLSearchParams(this.resourceQuery).entries());
     this._module.addDependency(new dependency(issuerPath, cssHash));
+    // We set the layer to something other than WEBPACK_LAYERS.appPagesBrowser to
+    // not have the modules included in the next pageManifest.
+    // Our modules are empty and aren't used for anything other than for collecting information.
+    // And are not even included in the final bundle.
+    // https://github.com/vercel/next.js/blob/8c6532fa7045879feb13bb21c530bb1517378e29/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts#L404
+    // https://github.com/vercel/next.js/blob/8c6532fa7045879feb13bb21c530bb1517378e29/packages/next/src/lib/constants.ts#L146
+    this._module.layer = 'not-app-pages-browser';
     return '';
 }
 

package/index.cjs

@@ -1,14 +1,37 @@
 'use strict';
 
+var fs = require('node:fs');
+var path = require('node:path');
 var webpackPlugin = require('@navita/webpack-plugin');
-var NextMiniCssExtractPlugin = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');
+var NextMiniCssExtractPluginDefault = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');
 var findPagesDir = require('next/dist/lib/find-pages-dir');
 var optimizeCSSOutput = require('./optimizeCSSOutput.cjs');
 
-const MiniCssExtractPlugin = NextMiniCssExtractPlugin['default'];
+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;
+let lastCache;
+const MiniCssExtractPlugin = NextMiniCssExtractPluginDefault['default'];
 const createNavitaStylePlugin = (navitaConfig = {})=>(nextConfig)=>Object.assign({}, nextConfig, {
             webpack (config, options) {
-                const { dir , config: resolvedNextConfig , dev  } = options;
+                const { dir , dev  } = options;
                 config.plugins?.push({
                     apply (compiler) {
                         // We call the getNavitaModule function here
@@ -38,7 +61,7 @@ const createNavitaStylePlugin = (navitaConfig = {})=>(nextConfig)=>Object.assign
                     ],
                     loader: require.resolve("@navita/next-plugin/fromServerLoader")
                 });
-                const findPagesDirResult = findPagesDir.findPagesDir(dir, !!resolvedNextConfig.experimental.appDir);
+                const findPagesDirResult = findPagesDir.findPagesDir(dir);
                 const hasAppDir = !!(findPagesDirResult && findPagesDirResult.appDir);
                 const isServer = options.isServer && !(options.nextRuntime === 'edge');
                 const outputCss = !isServer || hasAppDir;
@@ -65,7 +88,43 @@ const createNavitaStylePlugin = (navitaConfig = {})=>(nextConfig)=>Object.assign
                         }
                     };
                 }
+                // Next.js creates at least three webpack instances. We can't rely on the webpack cache.
+                const { cache , mode  } = config;
+                const cacheDirectory = typeof cache !== "boolean" && cache.type === "filesystem" ? path.resolve(cache.cacheDirectory, `navita-${mode}`) : undefined;
+                const cacheDestination = path.resolve(cacheDirectory, 'data.txt');
+                const onRenderInitialized = async (createdRenderer)=>{
+                    renderer = createdRenderer;
+                    try {
+                        // Ensure the cache directory exists:
+                        await fs__namespace.promises.mkdir(cacheDirectory, {
+                            recursive: true
+                        });
+                        const content = await fs__namespace.promises.readFile(cacheDestination, 'utf-8');
+                        await renderer.engine.deserialize(content);
+                        lastCache = renderer.engine.serialize();
+                    } catch  {
+                    // This will happen if the user doesn't have write access to the cache directory.
+                    // But the same should happen with the webpack cache.
+                    }
+                };
+                config.plugins?.push({
+                    apply (compiler) {
+                        compiler.hooks.afterEmit.tapPromise(`${webpackPlugin.NavitaPlugin.pluginName}-nextjs-custom-cache`, async ()=>{
+                            if (!renderer) {
+                                return;
+                            }
+                            const newCache = renderer.engine.serialize();
+                            if (newCache === lastCache) {
+                                return;
+                            }
+                            lastCache = newCache;
+                            await fs__namespace.promises.writeFile(cacheDestination, newCache);
+                        });
+                    }
+                });
                 config.plugins?.push(new webpackPlugin.NavitaPlugin({
+                    useWebpackCache: false,
+                    onRenderInitialized,
                     outputCss,
                     ...navitaConfig,
                     optimizeCSSOutput: optimizeCSSOutput.optimizeCSSOutput

package/index.d.ts

@@ -1,8 +1,7 @@
 import { Options } from '@navita/webpack-plugin';
 import { NextConfig } from 'next';
 
-type WebpackOptions = Options;
-interface Config extends WebpackOptions {
+interface Config extends Omit<Options, 'useWebpackCache' | 'onRenderInitialized'> {
     singleCssFile?: boolean;
 }
 declare const createNavitaStylePlugin: (navitaConfig?: Config) => (nextConfig: NextConfig) => NextConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navita/next-plugin",
-  "version": "0.1.3",
+  "version": "0.3.0",
   "description": "Next.js integration for Navita",
   "keywords": [
     "next",
@@ -13,19 +13,19 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "import": "./index.mjs",
+      "import": "./index.cjs",
       "require": "./index.cjs",
       "types": "./index.d.ts"
     },
     "./fromServerLoader": {
-      "import": "./fromServerLoader.mjs",
+      "import": "./fromServerLoader.cjs",
       "require": "./fromServerLoader.cjs",
       "types": "./fromServerLoader.d.ts"
     }
   },
   "dependencies": {
     "browserslist": "^4.21.5",
-    "@navita/webpack-plugin": "0.1.3"
+    "@navita/webpack-plugin": "0.3.0"
   },
   "peerDependencies": {
     "next": ">=12 || >=13",

package/fromServerLoader.mjs

@@ -1,11 +0,0 @@
-import { getNavitaDependency } from '@navita/webpack-plugin';
-
-function pitch() {
-    this._module.loaders = [];
-    const dependency = getNavitaDependency(this._compiler.webpack);
-    const { cssHash , issuerPath  } = Object.fromEntries(new URLSearchParams(this.resourceQuery).entries());
-    this._module.addDependency(new dependency(issuerPath, cssHash));
-    return '';
-}
-
-export { pitch };

package/index.mjs

@@ -1,80 +0,0 @@
-import { createRequire as createRequire$1 } from 'module';
-const require = createRequire$1(import.meta.url);
-import { getNavitaModule, NAVITA_MODULE_TYPE, NavitaPlugin } from '@navita/webpack-plugin';
-import NextMiniCssExtractPlugin from 'next/dist/build/webpack/plugins/mini-css-extract-plugin';
-import { findPagesDir } from 'next/dist/lib/find-pages-dir';
-import { optimizeCSSOutput } from './optimizeCSSOutput.mjs';
-
-const MiniCssExtractPlugin = NextMiniCssExtractPlugin['default'];
-const createNavitaStylePlugin = (navitaConfig = {})=>(nextConfig)=>Object.assign({}, nextConfig, {
-            webpack (config, options) {
-                const { dir , config: resolvedNextConfig , dev  } = options;
-                config.plugins?.push({
-                    apply (compiler) {
-                        // We call the getNavitaModule function here
-                        // so that NavitaModule is created with what's required for the next.js rsc to client entry promotion:
-                        getNavitaModule(compiler.webpack, ({ cssHash , issuerPath  })=>({
-                                // The resourceResolveData is used by next.js to promote server and ssr entries to client entries:
-                                // https://github.com/vercel/next.js/blob/f3132354285fb18c290bf9aad7f8dc7e0550105d/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts#L590
-                                resourceResolveData: {
-                                    path: '',
-                                    query: '?' + new URLSearchParams({
-                                        cssHash,
-                                        issuerPath
-                                    }).toString()
-                                },
-                                // We set the resource to ".css"
-                                // to trick next.js into thinking this is a css module:
-                                // https://github.com/vercel/next.js/blob/f3132354285fb18c290bf9aad7f8dc7e0550105d/packages/next/src/build/webpack/loaders/utils.ts#L24
-                                resource: '.css'
-                            }));
-                    }
-                });
-                // This loader promotes the server and ssr entries to client entries:
-                config.module?.rules.unshift({
-                    resourceQuery: [
-                        /cssHash/,
-                        /issuerPath/
-                    ],
-                    loader: require.resolve("@navita/next-plugin/fromServerLoader")
-                });
-                const findPagesDirResult = findPagesDir(dir, !!resolvedNextConfig.experimental.appDir);
-                const hasAppDir = !!(findPagesDirResult && findPagesDirResult.appDir);
-                const isServer = options.isServer && !(options.nextRuntime === 'edge');
-                const outputCss = !isServer || hasAppDir;
-                if (!hasAppDir && !isServer) {
-                    const filename = dev ? 'static/css/[name].css' : 'static/css/[contenthash].css';
-                    // https://github.com/vercel/next.js/blob/930db5c1afbe541a0b2357c26123c2b365b56624/packages/next/src/build/webpack/config/blocks/css/index.ts#L595
-                    config.plugins.push(new MiniCssExtractPlugin({
-                        filename,
-                        chunkFilename: filename,
-                        ignoreOrder: true
-                    }));
-                }
-                if (navitaConfig?.singleCssFile) {
-                    config.optimization.splitChunks = {
-                        ...config.optimization.splitChunks || {},
-                        cacheGroups: {
-                            ...config.optimization.splitChunks['cacheGroups'] || {},
-                            navita: {
-                                chunks: 'all',
-                                enforce: true,
-                                name: 'navita',
-                                type: NAVITA_MODULE_TYPE
-                            }
-                        }
-                    };
-                }
-                config.plugins?.push(new NavitaPlugin({
-                    outputCss,
-                    ...navitaConfig,
-                    optimizeCSSOutput
-                }));
-                if (typeof nextConfig.webpack === "function") {
-                    return nextConfig.webpack(config, options);
-                }
-                return config;
-            }
-        });
-
-export { createNavitaStylePlugin };

package/optimizeCSSOutput.mjs

@@ -1,96 +0,0 @@
-const merge = (...merge)=>{
-    const result = {};
-    for (const usedIds of merge){
-        for(const key in usedIds){
-            result[key] = [
-                ...result[key] || [],
-                ...usedIds[key] || []
-            ];
-        }
-    }
-    for(const key1 in result){
-        result[key1] = [
-            ...new Set(result[key1])
-        ];
-    }
-    return result;
-};
-const intersect = (...intersect)=>{
-    const result = {};
-    for (const usedIds of intersect){
-        for(const key in usedIds){
-            result[key] = result[key] ? result[key].filter((id)=>usedIds[key].includes(id)) : usedIds[key];
-        }
-    }
-    return result;
-};
-// structuredClone would be better, but since Next.js version 13 is at node 16.14.0,
-// we can't use it.
-const copy = (source)=>JSON.parse(JSON.stringify(source));
-const removeParentFromCurrent = (usedIds, parentUsedIds)=>{
-    for(const key in parentUsedIds){
-        if (usedIds[key] && parentUsedIds[key]) {
-            usedIds[key] = usedIds[key].filter((id)=>!parentUsedIds[key].includes(id));
-        }
-    }
-};
-function optimizeCSSOutput(output) {
-    const nameToChunk = Object.fromEntries(Array.from(output.keys()).filter((x)=>x.name).map((x)=>[
-            x.name,
-            x
-        ]));
-    const getAllParentUsedIds = (chunk)=>{
-        const { name: route  } = chunk;
-        if (!route) {
-            // If we don't have a name, it's a dynamic chunk.
-            const value = output.get(chunk);
-            if (value.parents.length === 0) {
-                return [];
-            }
-            return [
-                intersect(...value.parents.map((parent)=>merge(...getAllParentUsedIds(parent), output.get(parent).usedIds)))
-            ];
-        }
-        if (route.startsWith('pages/')) {
-            const routes = [
-                'pages/_document',
-                'pages/_app',
-                route
-            ];
-            const currentRouteIndex = routes.indexOf(route);
-            return routes.filter((_, index)=>currentRouteIndex > index).map((x)=>output.get(nameToChunk[x])).filter(Boolean).map((x)=>copy(x.usedIds));
-        }
-        const parts = route.split('/');
-        const parents = [];
-        let currentPart = '';
-        for (const part of parts){
-            currentPart = [
-                currentPart,
-                part
-            ].filter(Boolean).join('/');
-            const possibleParent = `${currentPart}/layout`;
-            if (route === possibleParent) {
-                continue;
-            }
-            const parentChunk = nameToChunk[possibleParent];
-            if (output.has(parentChunk)) {
-                parents.push(copy(output.get(parentChunk).usedIds));
-            }
-        }
-        return parents;
-    };
-    const newOutput = new Map();
-    for (const chunk of output.keys()){
-        const currentUsedIds = copy(output.get(chunk).usedIds);
-        for (const parent of getAllParentUsedIds(chunk)){
-            removeParentFromCurrent(currentUsedIds, parent);
-        }
-        newOutput.set(chunk, {
-            ...output.get(chunk),
-            usedIds: currentUsedIds
-        });
-    }
-    return newOutput;
-}
-
-export { optimizeCSSOutput };