@navita/next-plugin 0.0.0-main-20230917201540

package/fromServerLoader.d.ts

@@ -0,0 +1,5 @@
+import { LoaderContext } from 'webpack';
+
+declare function pitch(this: LoaderContext<unknown>): string;
+
+export { pitch };

package/fromServerLoader.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var webpackPlugin = require('@navita/webpack-plugin');
+
+function pitch() {
+    this._module.loaders = [];
+    const dependency = webpackPlugin.getNavitaDependency(this._compiler.webpack);
+    const { cssHash , issuerPath  } = Object.fromEntries(new URLSearchParams(this.resourceQuery).entries());
+    this._module.addDependency(new dependency(issuerPath, cssHash));
+    return '';
+}
+
+exports.pitch = pitch;

package/fromServerLoader.mjs

@@ -0,0 +1,11 @@
+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.d.ts

@@ -0,0 +1,10 @@
+import { Options } from '@navita/webpack-plugin';
+import { NextConfig } from 'next';
+
+type WebpackOptions = Options;
+interface Config extends WebpackOptions {
+    singleCssFile?: boolean;
+}
+declare const createNavitaStylePlugin: (navitaConfig?: Config) => (nextConfig: NextConfig) => NextConfig;
+
+export { createNavitaStylePlugin };

package/index.js

@@ -0,0 +1,174 @@
+'use strict';
+
+var webpackPlugin = require('@navita/webpack-plugin');
+var NextMiniCssExtractPlugin = require('next/dist/build/webpack/plugins/mini-css-extract-plugin');
+var findPagesDir = require('next/dist/lib/find-pages-dir');
+
+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;
+}
+
+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:
+                        webpackPlugin.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.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: webpackPlugin.NAVITA_MODULE_TYPE
+                            }
+                        }
+                    };
+                }
+                config.plugins?.push(new webpackPlugin.NavitaPlugin({
+                    outputCss,
+                    ...navitaConfig,
+                    optimizeCSSOutput
+                }));
+                if (typeof nextConfig.webpack === "function") {
+                    return nextConfig.webpack(config, options);
+                }
+                return config;
+            }
+        });
+
+exports.createNavitaStylePlugin = createNavitaStylePlugin;

package/index.mjs

@@ -0,0 +1,174 @@
+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';
+
+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;
+}
+
+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/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@navita/next-plugin",
+  "version": "0.0.0-main-20230917201540",
+  "license": "MIT",
+  "private": false,
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js",
+      "types": "./index.d.ts"
+    },
+    "./fromServerLoader": {
+      "import": "./fromServerLoader.mjs",
+      "require": "./fromServerLoader.js",
+      "types": "./fromServerLoader.d.ts"
+    }
+  },
+  "dependencies": {
+    "@navita/webpack-plugin": "0.0.0-main-20230917201540",
+    "browserslist": "^4.21.5"
+  },
+  "peerDependencies": {
+    "next": ">=12 || >=13",
+    "webpack": "^5"
+  }
+}