gdu 4.0.0-next.9 → 4.0.3

package/CHANGELOG.md

@@ -1,5 +1,124 @@
 # gdu
 
+## 4.0.3
+
+### Patch Changes
+
+-   SSR apps: Get changes to their nextjs config defaults
+
+## 4.0.2
+
+### Patch Changes
+
+-   GDU: Fixes spa relay artifact resoluton
+
+## 4.0.1
+
+### Patch Changes
+
+-   GDU: Supports artifact directory for relay generated files
+
+## 4.0.0
+
+### Major Changes
+
+-   Upgrades browserlist
+-   a08a3f9: GDU: Upgrades babel
+-   2486c59: GDU: Applies caching to babel
+-   2486c59: GDU fixed build commads
+
+### Patch Changes
+
+-   cdd95c9: Fixes ssr builds
+-   7c65b2c: GDU: Uses dotenv for env variables
+-   7b7fecc: Upgrades webpack dependencies
+-   c0130be: GDU: Puts prod artifacts in folder when building for multiple envs
+-   2adfc80: Adds AG cdn to next image domains
+-   0185749: GDU: Improves build maniset plugin
+-   7f3b1ac: Add multi env build support for nextJS apps
+-   3acac86: GDU: Fixes build manifest plugin
+-   f7d42ea: Adds fleet
+-   4288672: GDU: Exposes naked nextjs configs
+-   3acac86: GDU Assumed prod env fro build commands
+-   1f93d6c: GDU: Support vanilla extract
+-   33c60da: GDU: Moves build cache to project root level
+-   2750501: GDU: Allows app level configs
+-   33c60da: GDU uses APP_ENV instead of NODE_ENV for environment configs
+-   94bb85b: Fixes for ssr apps
+-   6c1f212: GDU: Fixed config file paths
+-   9a144dc: GDU: Uses next cli dev command to start dev server
+-   2486c59: GDU Updated GuruBuildManifest plugin
+-   7c65b2c: Dev server: Removed invalid options
+-   61f1da4: GDU upgrades webpack dependency to v5
+-   Updated dependencies [undefined]
+    -   browserslist-config-autoguru@2.0.1
+
+## 4.0.0-next.20
+
+### Patch Changes
+
+-   Add multi env build support for nextJS apps
+
+## 4.0.0-next.19
+
+### Patch Changes
+
+-   Fixes ssr builds
+
+## 4.0.0-next.18
+
+### Patch Changes
+
+-   GDU: Puts prod artifacts in folder when building for multiple envs
+
+## 4.0.0-next.17
+
+### Patch Changes
+
+-   GDU: Improves build maniset plugin
+
+## 4.0.0-next.16
+
+### Patch Changes
+
+-   GDU: Fixes build manifest plugin
+
+## 4.0.0-next.15
+
+### Patch Changes
+
+-   GDU Assumed prod env fro build commands
+
+## 4.0.0-next.14
+
+### Patch Changes
+
+-   GDU: Exposes naked nextjs configs
+
+## 4.0.0-next.13
+
+### Patch Changes
+
+-   Adds fleet
+
+## 4.0.0-next.12
+
+### Patch Changes
+
+-   2adfc80: Adds AG cdn to next image domains
+
+## 4.0.0-next.11
+
+### Patch Changes
+
+-   Fixes for ssr apps
+
+## 4.0.0-next.10
+
+### Patch Changes
+
+-   GDU: Uses next cli dev command to start dev server
+
 ## 4.0.0-next.9
 
 ### Patch Changes

package/dist/commands/build/buildSSR.js

@@ -1,16 +1,35 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildSSR = void 0;
 const path_1 = require("path");
-const next_config_1 = require("../../config/next.config");
-const resolve_1 = require("../../lib/resolve");
+const utilities_1 = require("@autoguru/utilities");
+const execa_1 = __importDefault(require("execa"));
+const kleur_1 = require("kleur");
 const roots_1 = require("../../lib/roots");
+const logger = utilities_1.createLogger('build');
 const buildSSR = async (guruConfig) => {
-    const { default: nextBuild } = resolve_1.requireFromCaller('next/dist/build');
-    await nextBuild(roots_1.PROJECT_ROOT, {
-        dev: false,
-        quiet: true,
-        ...next_config_1.createNextJSConfig(),
+    const start = Date.now();
+    execa_1.default
+        .command(`next build --profile`, {
+        stdio: 'inherit',
+        cwd: roots_1.PROJECT_ROOT,
+        localDir: roots_1.GDU_ROOT,
+        extendEnv: true,
+        env: { NODE_ENV: 'production' },
+    })
+        .then((result) => {
+        console.log(`${kleur_1.dim('SUCCESS!')}`, `${kleur_1.dim('Listening')}: ${kleur_1.blue(result === null || result === void 0 ? void 0 : result.all)}`);
+    }, (error) => {
+        logger.error('response', {
+            processingTime: Date.now() - start,
+            responseHeaders: Object.fromEntries(Object.entries(error.getHeaders())),
+            url: 'incomingPath',
+            statusCode: error.statusCode,
+        });
+        throw error;
     });
     return {
         artifactPath: path_1.join(guruConfig.outputPath, 'BUILD_ID'),

package/dist/commands/start/index.d.ts

@@ -1,4 +1,4 @@
-declare const _default: ({ port: incomingPort, }: {
+declare const _default: ({ port: incomingPort }: {
     port: any;
 }) => Promise<void>;
 export default _default;

package/dist/commands/start/index.js

@@ -25,7 +25,7 @@ const config_1 = require("../../lib/config");
 const misc_1 = require("../../lib/misc");
 const roots_1 = require("../../lib/roots");
 const { debug } = diary_1.diary('gdu:commands:start');
-exports.default = async ({ port: incomingPort, }) => {
+exports.default = async ({ port: incomingPort }) => {
     debug('running action with %O', { port: incomingPort });
     const { port = incomingPort, ...otherConfig } = config_1.getGuruConfig(roots_1.PROJECT_ROOT) || {};
     const resolvedConfig = { port, ...otherConfig };

package/dist/commands/start/runSPA.js

@@ -31,7 +31,9 @@ const hosts = ['localhost', localhost];
 const runSPA = async (guruConfig) => {
     const hooks = hooks_1.getHooks();
     console.log(`${kleur_1.cyan('Starting dev server...')}`);
-    const webpackConfig = hooks.webpackConfig.call(webpack_config_1.default()).find(({ name }) => name === process.env.APP_ENV);
+    const webpackConfig = hooks.webpackConfig
+        .call(webpack_config_1.default())
+        .find(({ name }) => name === process.env.APP_ENV);
     const consumerHtmlTemplate = getConsumerHtmlTemplate(guruConfig);
     webpackConfig.plugins.push(new html_webpack_plugin_1.default({
         template: consumerHtmlTemplate !== null && consumerHtmlTemplate !== void 0 ? consumerHtmlTemplate : 'auto',
@@ -53,7 +55,7 @@ const runSPA = async (guruConfig) => {
                                     src: `${compilation.options.output
                                         .publicPath || ''}${file}`,
                                 },
-                                meta: { 'plugin': 'html-webpack-plugin' }
+                                meta: { plugin: 'html-webpack-plugin' },
                             });
                         }
                     }

package/dist/commands/start/runSSR.js

@@ -1,36 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.runNextJS = void 0;
-const utilities_1 = require("@autoguru/utilities");
 const diary_1 = require("diary");
 const kleur_1 = require("kleur");
 const server_1 = require("../../config/ssr/server");
 const misc_1 = require("../../lib/misc");
-const hooks_1 = require("../../utils/hooks");
 const { debug } = diary_1.diary('gdu:commands:start:ssr');
-const log = utilities_1.createLogger('server');
 const runNextJS = async (guruConfig) => {
     var _a;
     const port = (_a = guruConfig.port) !== null && _a !== void 0 ? _a : 8080;
     debug('next start %o', { port });
-    const hooks = hooks_1.getHooks();
     if (!misc_1.isEnvProduction())
-        hooks.beforeServer.tap('runner', () => {
-            console.log(`${kleur_1.cyan('Starting dev server...')}`);
-        });
-    hooks.afterServer.tap('runner', (server) => {
-        var _a;
-        server.listen((_a = guruConfig.port) !== null && _a !== void 0 ? _a : 8080, (err) => {
-            if (err)
-                throw err;
-            if (misc_1.isEnvProduction()) {
-                log.info('Started accepting requests...');
-            }
-            else {
-                console.log(`${kleur_1.dim('Listening')}: ${kleur_1.blue(`http://localhost:${port}/`)}`);
-            }
-        });
-    });
-    await server_1.run();
+        console.log(`${kleur_1.cyan('Starting dev server...')}`);
+    await server_1.run(port);
 };
 exports.runNextJS = runNextJS;

package/dist/config/babel.config.d.ts

@@ -11,6 +11,7 @@ declare function _exports(guruConfig: any): {
         haste: boolean;
         isDevVariable: string;
         eagerESModules: boolean;
+        artifactDirectory: string;
     })[])[];
 };
 export = _exports;

package/dist/config/babel.config.js

@@ -1,6 +1,7 @@
 "use strict";
 const { join } = require('path');
 const browsers = require('browserslist-config-autoguru');
+const { PROJECT_ROOT } = require('../lib/roots');
 module.exports = (guruConfig) => {
     let hasRelay = false;
     try {
@@ -40,6 +41,7 @@ module.exports = (guruConfig) => {
                     haste: false,
                     isDevVariable: '__DEV__',
                     eagerESModules: true,
+                    artifactDirectory: join(PROJECT_ROOT, '../../', 'packages', 'relay', '__generated__'),
                 },
             ],
             require.resolve('babel-plugin-treat'),

package/dist/config/next.config.d.ts

@@ -1 +1,26 @@
-export declare const createNextJSConfig: () => any;
+export declare const withTM: (nextConfig?: {}) => {};
+export declare const createNextJSConfig: (buildEnv: any) => {
+    distDir: string;
+    reactStrictMode: boolean;
+    swcMinify: boolean;
+    experimental: {
+        concurrentFeatures: boolean;
+        serverComponents: boolean;
+    };
+    i18n: {
+        locales: string[];
+        defaultLocale: string;
+    };
+    typescript: {
+        transpileOnly: boolean;
+        ignoreDevErrors: boolean;
+        ignoreBuildErrors: boolean;
+    };
+    images: {
+        domains: string[];
+        formats: string[];
+        imageSizes: number[];
+    };
+    webpack: (defaultConfig: any) => any;
+};
+export declare const createNextJSTranspiledConfig: () => any;

package/dist/config/next.config.js

@@ -1,92 +1,102 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createNextJSConfig = void 0;
-const path_1 = require("path");
-const browserslist_config_autoguru_1 = __importDefault(require("browserslist-config-autoguru"));
-const client_1 = require("next/dist/build/webpack/config/blocks/css/loaders/client");
-const webpack_plugin_1 = require("treat/webpack-plugin");
-const tsconfig_paths_webpack_plugin_1 = __importDefault(require("tsconfig-paths-webpack-plugin"));
+exports.createNextJSTranspiledConfig = exports.createNextJSConfig = exports.withTM = void 0;
+const path_1 = __importStar(require("path"));
+const next_plugin_1 = require("@vanilla-extract/next-plugin");
+const dotenv_webpack_1 = __importDefault(require("dotenv-webpack"));
+const next_transpile_modules_1 = __importDefault(require("next-transpile-modules"));
 const webpack_1 = require("webpack");
-const config_1 = require("../lib/config");
 const misc_1 = require("../lib/misc");
 const roots_1 = require("../lib/roots");
-const hooks_1 = require("../utils/hooks");
-const createNextJSConfig = () => {
-    var _a;
-    const hooks = hooks_1.getHooks();
+const configs_1 = require("../utils/configs");
+const withVanillaExtract = next_plugin_1.createVanillaExtractPlugin();
+exports.withTM = next_transpile_modules_1.default([
+    '@autoguru/themes',
+    '@autoguru/overdrive',
+    '@autoguru/icons',
+    '@autoguru/components',
+    '@autoguru/fleet',
+    '@autoguru/relay',
+    '@autoguru/auth',
+    '@autoguru/components',
+    '@autoguru/layout',
+    '@popperjs/core',
+]);
+const createNextJSConfig = (buildEnv) => {
     const isDev = !misc_1.isEnvProduction();
-    const nextJsConfig = {
-        poweredByHeader: false,
-        generateEtags: false,
-        pageExtensions: ['tsx', 'ts'],
-        assetPrefix: (_a = config_1.getGuruConfig()) === null || _a === void 0 ? void 0 : _a.publicPath,
-        publicRuntimeConfig: {},
-        webpack(originalConfig, nextConfig) {
-            const guruConfig = config_1.getGuruConfig();
-            const ourCodePaths = [
-                ...guruConfig === null || guruConfig === void 0 ? void 0 : guruConfig.srcPaths.map((item) => path_1.join(roots_1.PROJECT_ROOT, item)),
-                roots_1.CALLING_WORKSPACE_ROOT &&
-                    path_1.join(roots_1.CALLING_WORKSPACE_ROOT, 'packages'),
-                /@autoguru[/\\]/,
-            ].filter(Boolean);
-            originalConfig.resolve.alias['@babel/runtime-corejs2'] =
-                '@babel/runtime-corejs3';
-            originalConfig.resolve.plugins.push(new tsconfig_paths_webpack_plugin_1.default());
-            originalConfig.plugins.push(new (class {
-                apply(compiler) {
-                    compiler.options.plugins.push(new webpack_1.DefinePlugin({
-                        __DEV__: JSON.stringify(isDev),
-                    }), new webpack_plugin_1.TreatPlugin({
-                        outputCSS: !nextConfig.isServer,
-                        outputLoaders: [
-                            !nextConfig.isServer
-                                ? client_1.getClientStyleLoader({
-                                    isDevelopment: isDev,
-                                    assetPrefix: nextConfig.config
-                                        .assetPrefix,
-                                })
-                                : '',
-                        ],
-                        minify: !isDev,
-                        browsers: browserslist_config_autoguru_1.default,
-                    }));
-                    const oldLoader = compiler.options.module.rules[0];
-                    const babelConfig = hooks.babelConfig.call(require('./babel.config')(guruConfig));
-                    let use = oldLoader.use;
-                    if (Array.isArray(use)) {
-                        use = use[1];
-                    }
-                    use.options = {
-                        ...use.options,
-                        hasReactRefresh: false,
-                        overrides: [babelConfig],
-                    };
-                    compiler.options.module.rules[0] = {
-                        ...oldLoader,
-                        include: [...oldLoader.include, ...ourCodePaths],
-                        exclude(path) {
-                            const orig = oldLoader === null || oldLoader === void 0
-                                ? void 0
-                                : oldLoader.exclude(path);
-                            return orig
-                                ? !ourCodePaths.some((r) => {
-                                    if (r instanceof RegExp) {
-                                        return r.test(path);
-                                    }
-                                    return path.includes(r);
-                                })
-                                : false;
-                        },
-                        use,
-                    };
-                }
-            })());
-            return hooks.webpackConfig.call(originalConfig);
+    const env = process.env.APP_ENV || (isDev ? 'dev' : buildEnv);
+    return {
+        distDir: `dist/${env}`,
+        reactStrictMode: true,
+        swcMinify: true,
+        experimental: {
+            concurrentFeatures: false,
+            serverComponents: false,
+        },
+        i18n: {
+            locales: ["en"],
+            defaultLocale: "en",
+        },
+        typescript: {
+            transpileOnly: true,
+            ignoreDevErrors: true,
+            ignoreBuildErrors: true,
+        },
+        images: {
+            domains: [
+                'cdn.autoguru.com.au',
+                'cdn-dev.autoguru.com.au',
+                'cdn-test.autoguru.com.au',
+                'cdn-uat.autoguru.com.au',
+                'cdn-preprod.autoguru.com.au',
+            ],
+            formats: ['image/avif', 'image/webp'],
+            imageSizes: [16, 32, 48, 64, 96, 128, 256, 384, 512],
+        },
+        webpack: (defaultConfig) => {
+            defaultConfig.plugins.push(new webpack_1.DefinePlugin({
+                __DEV__: isDev,
+            }));
+            configs_1.getConfigsDirs()
+                .flatMap((configsDir) => [
+                new dotenv_webpack_1.default({
+                    path: path_1.default.resolve(configsDir, '.env.defaults'),
+                }),
+                new dotenv_webpack_1.default({
+                    path: path_1.default.resolve(configsDir, `.env.${env}`),
+                }),
+            ])
+                .forEach((plugin) => defaultConfig.plugins.push(plugin));
+            defaultConfig.resolve.alias['react'] = path_1.resolve(roots_1.PROJECT_ROOT, '../../', 'node_modules/react/');
+            defaultConfig.resolve.alias['react-dom'] = path_1.resolve(roots_1.PROJECT_ROOT, '../../', 'node_modules/react-dom/');
+            defaultConfig.resolve.alias['@autoguru/icons'] = path_1.resolve(roots_1.PROJECT_ROOT, '../../', 'node_modules/@autoguru/icons/');
+            defaultConfig.resolve.alias['next'] = path_1.resolve(roots_1.PROJECT_ROOT, '../../', 'node_modules/next/');
+            return defaultConfig;
         },
     };
-    return hooks.nextJSConfig.call(nextJsConfig);
 };
 exports.createNextJSConfig = createNextJSConfig;
+const createNextJSTranspiledConfig = () => withVanillaExtract(exports.withTM(exports.createNextJSConfig('uat')));
+exports.createNextJSTranspiledConfig = createNextJSTranspiledConfig;

package/dist/config/ssr/server.d.ts

@@ -1 +1 @@
-export declare const run: () => Promise<void>;
+export declare const run: (port: number) => Promise<void>;

package/dist/config/ssr/server.js

@@ -5,50 +5,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.run = void 0;
 const utilities_1 = require("@autoguru/utilities");
-const polka_1 = __importDefault(require("polka"));
+const execa_1 = __importDefault(require("execa"));
+const kleur_1 = require("kleur");
 const misc_1 = require("../../lib/misc");
-const resolve_1 = require("../../lib/resolve");
 const roots_1 = require("../../lib/roots");
-const hooks_1 = require("../../utils/hooks");
-const next_config_1 = require("../next.config");
 const logger = utilities_1.createLogger('server');
-const hooks = hooks_1.getHooks();
-const run = async () => {
-    var _a;
-    const server = polka_1.default();
-    await hooks.beforeServer.promise(server);
-    const { default: next } = resolve_1.requireFromCaller('next');
-    const nextJsConfig = next_config_1.createNextJSConfig();
-    const app = next({
-        dev: !misc_1.isEnvProduction(),
-        quiet: false,
-        dir: roots_1.PROJECT_ROOT,
-        conf: nextJsConfig,
-    });
-    const handle = app.getRequestHandler();
-    await hooks.nextJSPrepare.promise(app.prepare());
-    const { pageChecker, dynamicRoutes } = app.router;
-    server.use(async (req, res, next) => {
-        const start = Date.now();
-        const incomingPath = req.originalUrl;
-        const isPageWeCareAbout = dynamicRoutes.some(({ match }) => match(incomingPath)) ||
-            (await pageChecker(incomingPath));
-        await next();
-        isPageWeCareAbout &&
-            logger.info('response', {
-                processingTime: Date.now() - start,
-                responseHeaders: Object.fromEntries(Object.entries(res.getHeaders())),
-                url: incomingPath,
-                statusCode: res.statusCode,
-            });
-    });
-    if (((_a = nextJsConfig.assetPrefix) !== null && _a !== void 0 ? _a : '/') !== '/') {
-        server.get(`${nextJsConfig.assetPrefix}*`, async (req, res) => {
-            req.url = req.originalUrl.replace(`${nextJsConfig.assetPrefix}`, '/');
-            return handle(req, res);
+const run = async (port) => {
+    const start = Date.now();
+    execa_1.default
+        .command(`next ${misc_1.isEnvProduction() ? 'start' : 'dev'} -p ${port}`, {
+        stdio: 'inherit',
+        cwd: roots_1.PROJECT_ROOT,
+        localDir: roots_1.GDU_ROOT,
+    })
+        .then(() => {
+        console.log(`${kleur_1.dim('Listening')}: ${kleur_1.blue(`http://localhost:${port}/`)}`);
+    }, (error) => {
+        logger.error('response', {
+            processingTime: Date.now() - start,
+            responseHeaders: Object.fromEntries(Object.entries(error.getHeaders())),
+            url: 'incomingPath',
+            statusCode: error.statusCode,
         });
-    }
-    server.all('*', (req, res) => handle(req, res));
-    await hooks.afterServer.promise(server);
+        throw error;
+    });
 };
 exports.run = run;

package/dist/config/webpack/plugins/GuruBuildManifest.d.ts

@@ -1,4 +1,21 @@
 import { Compiler } from 'webpack';
+declare const defaultOptions: {
+    excludeFile: RegExp;
+    chunkGroupName: (filename: any) => string;
+    outputDir: string;
+    filename: string;
+    objectToString: (result: any) => string;
+    includeChunks: boolean;
+    publicPath: string;
+};
 export declare class GuruBuildManifest {
+    private options;
+    private result;
+    constructor(options: Partial<typeof defaultOptions>);
     apply(compiler: Compiler): void;
+    saveJson(): void;
+    _excludeChunk(excludeCriterium: any, filename: any, chunk: any): any;
+    _shouldFolderBeCreated(outputDir: any): any;
+    _normalizeOutputDir(outputDir: any): any;
 }
+export {};

package/dist/config/webpack/plugins/GuruBuildManifest.js

@@ -1,55 +1,103 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GuruBuildManifest = void 0;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = require("path");
+const emptyResults = {
+    hash: '',
+    assets: {
+        js: [],
+        css: [],
+    },
+    chunks: {
+        js: [],
+        css: [],
+    },
+};
+const pluginName = 'GuruBuildManifestPlugin';
+const defaultOptions = {
+    excludeFile: /\.hot-update\.js$/,
+    chunkGroupName: (filename) => /\.([\da-z]+(\.map)?)(\?.*)?$/.exec(filename)[1],
+    outputDir: process.cwd(),
+    filename: 'build-manifest.json',
+    objectToString: (result) => JSON.stringify(result),
+    includeChunks: true,
+    publicPath: '',
+};
 class GuruBuildManifest {
-    apply(compiler) {
-        const fileMap = {
-            hash: '',
-            env: {},
+    constructor(options) {
+        this.options = {};
+        this.result = emptyResults;
+        this.options = Object.assign({}, defaultOptions, options);
+        this.result = {
+            ...emptyResults,
         };
-        const configChunks = new Map();
-        compiler.hooks.make.tap('BuildManifestPlugin', (compilation) => {
+    }
+    apply(compiler) {
+        compiler.hooks.emit.tap(pluginName, (compilation) => {
+            this.result = { ...emptyResults };
+            this.result.hash = compilation.hash;
+            compilation.chunks.forEach((chunk) => {
+                chunk.files.forEach((filename) => {
+                    if (this._excludeChunk(this.options.excludeFile, filename, chunk) === true) {
+                        return;
+                    }
+                    const ext = this.options.chunkGroupName(filename, chunk);
+                    if (chunk.name)
+                        this.result.assets[ext].push(`${this.options.publicPath}${filename}`);
+                    else if (this.options.includeChunks)
+                        this.result.chunks[ext].push(`${this.options.publicPath}${filename}`);
+                });
+            });
+            if (!this.options.includeChunks)
+                this.result.chunks = void 0;
+            this.saveJson();
         });
-        compiler.hooks.emit.tapAsync('BuildManifestPlugin', (compilation, cb) => {
-            fileMap.hash = compilation.hash;
-            const js = [];
-            const css = [];
-            for (const [, entrypoint,] of compilation.entrypoints.entries()) {
-                for (const file of entrypoint.getFiles()) {
-                    if (file.endsWith('.js'))
-                        js.push(file);
-                    if (file.endsWith('.css'))
-                        css.push(file);
+    }
+    saveJson() {
+        if (this._shouldFolderBeCreated(this.options.outputDir) === true) {
+            let pathStep = process.cwd();
+            const normalizedOutputPath = this._normalizeOutputDir(this.options.outputDir);
+            normalizedOutputPath.split('/').forEach((folder) => {
+                pathStep = path_1.join(pathStep, folder);
+                try {
+                    fs_1.default.mkdirSync(pathStep);
                 }
-            }
-            for (const [name, { chunk, config },] of configChunks.entries()) {
-                const prefixCreator = (path) => {
-                    var _a, _b, _c;
-                    return `${(_b = (_a = config.config) === null || _a === void 0 ? void 0 : _a.publicPathBase) !== null && _b !== void 0 ? _b : ''}${(_c = compiler.options.output.publicPath) !== null && _c !== void 0 ? _c : ''}${path}`;
-                };
-                fileMap.env[name] = {
-                    js: [
-                        ...chunk.files.filter((i) => i.endsWith('.js')),
-                        ...js,
-                    ].map((i) => prefixCreator(i)),
-                    css: [...css].map((i) => prefixCreator(i)),
-                };
-            }
-            compilation.assets['build-manifest.json'] = makeSource(JSON.stringify(fileMap, null, 4));
-            cb();
-        });
+                catch {
+                }
+            });
+        }
+        const file = path_1.resolve(this.options.outputDir, this.options.filename);
+        const blob = this.options.objectToString(this.result);
+        try {
+            fs_1.default.writeFileSync(file, blob, { flag: 'w' });
+            console.log(`File successfully created - ${file}`);
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    _excludeChunk(excludeCriterium, filename, chunk) {
+        if (typeof excludeCriterium === 'function') {
+            return excludeCriterium(filename, chunk);
+        }
+        if (excludeCriterium instanceof RegExp) {
+            return excludeCriterium.test(filename);
+        }
+        return true;
+    }
+    _shouldFolderBeCreated(outputDir) {
+        const isAbsolutePathWithProjectRoot = outputDir.includes(process.cwd());
+        const isPathWithinProjectRoot = !outputDir.startsWith('/');
+        return (isAbsolutePathWithProjectRoot || isPathWithinProjectRoot || false);
+    }
+    _normalizeOutputDir(outputDir) {
+        const removedRelativePrefix = outputDir.replace(/^\.\//, '');
+        const removeAbsolutePrefix = removedRelativePrefix.replace(process.cwd(), '');
+        return removeAbsolutePrefix;
     }
 }
 exports.GuruBuildManifest = GuruBuildManifest;
-const makeSource = (contents) => ({
-    source() {
-        return Buffer.from(contents);
-    },
-    size() {
-        return Buffer.byteLength(contents);
-    },
-    updateHash: null,
-    map: null,
-    sourceAndMap: null,
-    buffer: null,
-});

package/dist/config/webpack/webpack.config.js

@@ -23,23 +23,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const path_1 = __importStar(require("path"));
+const webpack_plugin_1 = require("@vanilla-extract/webpack-plugin");
 const browserslist_config_autoguru_1 = __importDefault(require("browserslist-config-autoguru"));
 const clean_webpack_plugin_1 = require("clean-webpack-plugin");
 const dotenv_webpack_1 = __importDefault(require("dotenv-webpack"));
-const find_up_1 = __importDefault(require("find-up"));
+const env_ci_1 = __importDefault(require("env-ci"));
 const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
 const terser_webpack_plugin_1 = __importDefault(require("terser-webpack-plugin"));
-const webpack_plugin_1 = require("treat/webpack-plugin");
-const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
+const webpack_plugin_2 = require("treat/webpack-plugin");
 const tsconfig_paths_webpack_plugin_1 = require("tsconfig-paths-webpack-plugin");
 const webpack_1 = require("webpack");
 const config_1 = require("../../lib/config");
 const misc_1 = require("../../lib/misc");
 const roots_1 = require("../../lib/roots");
+const configs_1 = require("../../utils/configs");
 const hooks_1 = require("../../utils/hooks");
-const common_1 = require("./blocks/common");
 const GuruBuildManifest_1 = require("./plugins/GuruBuildManifest");
-const { branch = 'null', commit = 'null' } = require('env-ci')();
+const { branch = 'null', commit = 'null' } = env_ci_1.default();
 const terserOptions = {
     ie8: false,
     output: {
@@ -63,10 +63,6 @@ const terserOptions = {
 const frameworkRegex = /(?<!node_modules.*)[/\\]node_modules[/\\](react|react-dom|scheduler|prop-types|use-subscription|relay-runtime|react-relay)[/\\]/;
 const hooks = hooks_1.getHooks();
 const isDev = !misc_1.isEnvProduction();
-const configsDirs = [
-    find_up_1.default.sync('.gdu_config', { type: 'directory' }),
-    find_up_1.default.sync('.gdu_app_config', { type: 'directory' }),
-].filter(Boolean);
 const gduEntryPath = path_1.join(roots_1.GDU_ROOT, 'entry');
 const ourCodePaths = [
     path_1.join(gduEntryPath, '/client/spa'),
@@ -75,7 +71,7 @@ const ourCodePaths = [
     /@autoguru[/\\]/,
 ].filter(Boolean);
 const fileMask = isDev ? '[name]' : '[name]-[contenthash:8]';
-const baseOptions = {
+const baseOptions = (buildEnv, isMultiEnv) => ({
     context: roots_1.PROJECT_ROOT,
     mode: isDev ? 'development' : 'production',
     entry: {
@@ -85,16 +81,18 @@ const baseOptions = {
             path_1.join(gduEntryPath, '/spa/client.js'),
         ].filter(Boolean),
     },
+    experiments: {
+        layers: true,
+    },
     cache: {
         type: 'filesystem',
         cacheLocation: path_1.resolve(roots_1.PROJECT_ROOT, '.build_cache'),
-        allowCollectingMemory: true,
+        allowCollectingMemory: isDev ? true : false,
         buildDependencies: {
             config: [__filename],
         },
     },
     devtool: isDev ? 'eval-cheap-module-source-map' : 'source-map',
-    bail: !isDev || !process.env.APP_ENV,
     resolve: {
         extensions: ['.tsx', '.ts', '.mjs', '.jsx', '.js', '.json'],
         plugins: [
@@ -111,10 +109,13 @@ const baseOptions = {
         minimize: !isDev,
         concatenateModules: !isDev,
         splitChunks: {
-            maxAsyncRequests: Number.POSITIVE_INFINITY,
-            maxInitialRequests: Number.POSITIVE_INFINITY,
+            chunks: 'async',
             minSize: 20000,
-            chunks: 'all',
+            minRemainingSize: 0,
+            minChunks: 1,
+            maxAsyncRequests: 30,
+            maxInitialRequests: 30,
+            enforceSizeThreshold: 50000,
             cacheGroups: {
                 default: false,
                 defaultVendors: false,
@@ -159,7 +160,6 @@ const baseOptions = {
     module: {
         strictExportPresence: true,
         rules: [
-            ...common_1.commonLoaders().before,
             {
                 test: /\.css$/i,
                 oneOf: [
@@ -176,9 +176,10 @@ const baseOptions = {
                         ],
                     },
                     {
-                        use: [mini_css_extract_plugin_1.default.loader, 'css-loader']
-                    }
-                ]
+                        test: /^((?!\.vanilla)[\S\s])*\.css$/i,
+                        use: [mini_css_extract_plugin_1.default.loader, 'css-loader'],
+                    },
+                ],
             },
             {
                 test: /\.(js|mjs|jsx|ts|tsx)$/,
@@ -262,7 +263,7 @@ const baseOptions = {
                 branch,
             }),
         }),
-        new webpack_plugin_1.TreatPlugin({
+        new webpack_plugin_2.TreatPlugin({
             outputLoaders: [
                 {
                     loader: misc_1.isEnvProduction()
@@ -273,30 +274,36 @@ const baseOptions = {
             minify: !isDev,
             browsers: browserslist_config_autoguru_1.default,
         }),
-        new VanillaExtractPlugin(),
+        new webpack_plugin_1.VanillaExtractPlugin(),
         new mini_css_extract_plugin_1.default({
             filename: `${fileMask}.css`,
             chunkFilename: `chunks/${fileMask}.css`,
             ignoreOrder: true,
         }),
-        !isDev && new GuruBuildManifest_1.GuruBuildManifest(),
-        ...configsDirs.flatMap(configsDir => [new dotenv_webpack_1.default({
+        ...configs_1.getConfigsDirs().flatMap((configsDir) => [
+            new dotenv_webpack_1.default({
                 path: path_1.default.resolve(configsDir, '.env.defaults'),
             }),
             new dotenv_webpack_1.default({
-                path: path_1.default.resolve(configsDir, `.env.${process.env.APP_ENV || 'dev'}`),
+                path: path_1.default.resolve(configsDir, `.env.${process.env.APP_ENV || (isDev ? 'dev' : buildEnv)}`),
             }),
         ]),
+        !isDev &&
+            new GuruBuildManifest_1.GuruBuildManifest({
+                outputDir: !isMultiEnv && buildEnv === 'prod'
+                    ? path_1.resolve(roots_1.PROJECT_ROOT, 'dist')
+                    : path_1.resolve(roots_1.PROJECT_ROOT, 'dist', buildEnv),
+                includeChunks: false,
+            }),
     ].filter(Boolean),
-};
-const buildEnvs = process.env.APP_ENV ? [process.env.APP_ENV] : ['dev', 'uat', 'test', 'preprod', 'prod'];
+});
 const { outputPath } = config_1.getGuruConfig();
-const makeWebpackConfig = (buildEnv) => {
+const makeWebpackConfig = (buildEnv, isMultiEnv) => {
     var _a, _b;
     return ({
         name: buildEnv,
         output: {
-            path: `${outputPath}/${buildEnv}`,
+            path: `${outputPath}/${!isMultiEnv && buildEnv === 'prod' ? '' : buildEnv}`,
             publicPath: isDev ? '/' : (_b = (_a = config_1.getGuruConfig()) === null || _a === void 0 ? void 0 : _a.publicPath) !== null && _b !== void 0 ? _b : '/',
             filename: `${fileMask}.js`,
             chunkFilename: `chunks/${fileMask}.js`,
@@ -307,5 +314,11 @@ const makeWebpackConfig = (buildEnv) => {
         },
     });
 };
-const buildConfigs = () => buildEnvs.map(buildEnv => ({ ...baseOptions, ...makeWebpackConfig(buildEnv) }));
+const buildConfigs = () => {
+    const buildEnvs = configs_1.getBuildEnvs();
+    return buildEnvs.map((buildEnv) => ({
+        ...baseOptions(buildEnv, buildEnvs.length > 1),
+        ...makeWebpackConfig(buildEnv, buildEnvs.length > 1),
+    }));
+};
 exports.default = buildConfigs;

package/dist/lib/runWebpack.js

@@ -20,7 +20,13 @@ const done = (resolve, reject) => (err, stats) => {
     }
     resolve();
 };
-const run = async (compiler) => new Promise((resolve, reject) => compiler.run(done(resolve, reject)));
+const run = async (compiler) => new Promise((resolve, reject) => compiler.run((err, stats) => {
+    compiler.close((err2) => {
+        console.log(stats);
+        resolve(err || err2);
+    });
+    done(resolve, reject);
+}));
 exports.run = run;
 const watch = async (compiler) => new Promise((resolve, reject) => compiler.watch({}, done(resolve, reject)));
 exports.watch = watch;

package/dist/utils/configs.d.ts

@@ -0,0 +1,3 @@
+export declare const getBuildEnvs: () => string[];
+export declare const getConfigsDirs: () => string[];
+export declare const getBuildFolder: () => string[];

package/dist/utils/configs.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBuildFolder = exports.getConfigsDirs = exports.getBuildEnvs = void 0;
+const find_up_1 = __importDefault(require("find-up"));
+const getBuildEnvs = () => process.env.APP_ENV
+    ? [process.env.APP_ENV]
+    : ['dev', 'uat', 'test', 'preprod', 'prod'];
+exports.getBuildEnvs = getBuildEnvs;
+const getConfigsDirs = () => [
+    find_up_1.default.sync('.gdu_config', { type: 'directory' }),
+    find_up_1.default.sync('.gdu_app_config', { type: 'directory' }),
+].filter(Boolean);
+exports.getConfigsDirs = getConfigsDirs;
+const getBuildFolder = () => [
+    find_up_1.default.sync('.gdu_config', { type: 'directory' }),
+    find_up_1.default.sync('.gdu_app_config', { type: 'directory' }),
+].filter(Boolean);
+exports.getBuildFolder = getBuildFolder;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "gdu",
-	"version": "4.0.0-next.9",
+	"version": "4.0.3",
 	"private": false,
 	"description": "AutoGuru's development toolkit",
 	"homepage": "https://github.com/autoguru-au/octane/tree/master/packages/gdu#readme",
@@ -35,11 +35,12 @@
 		"@graphql-tools/json-file-loader": "^6.2.6",
 		"@vanilla-extract/babel-plugin": "^1.1.2",
 		"@vanilla-extract/css": "^1.6.3",
+		"@vanilla-extract/next-plugin": "^1.0.1",
 		"@vanilla-extract/webpack-plugin": "^2.1.0",
 		"babel-loader": "^8.2.2",
 		"babel-plugin-relay": "^11.0.2",
 		"babel-plugin-treat": "^1.6.2",
-		"browserslist-config-autoguru": "^2.0.0",
+		"browserslist-config-autoguru": "^2.0.1",
 		"clean-webpack-plugin": "^4.0.0-alpha.0",
 		"core-js": "^3.9.1",
 		"css-loader": "^6.4.0",
@@ -64,10 +65,10 @@
 		"kleur": "^4.1.4",
 		"mini-css-extract-plugin": "^2.4.2",
 		"mkdirp": "^1.0.4",
-		"next": "10.0.3",
+		"next": "^12.0.2",
+		"next-transpile-modules": "^9.0.0",
 		"node-fetch": "^2.6.1",
 		"null-loader": "^4.0.1",
-		"polka": "^0.5.2",
 		"postcss-flexbugs-fixes": "^4.2.1",
 		"postcss-loader": "^3.0.0",
 		"postcss-preset-env": "^6.7.0",
@@ -81,8 +82,8 @@
 		"ts-dedent": "^2.0.0",
 		"tsconfig-paths-webpack-plugin": "^3.5.1",
 		"url-loader": "^4.1.1",
-		"webpack": "^5.50.0",
-		"webpack-dev-server": "^4.0.0-rc.0",
+		"webpack": "^5.64.2",
+		"webpack-dev-server": "^4.5.0",
 		"whatwg-fetch": "^3.6.2"
 	},
 	"devDependencies": {

package/dist/config/webpack/blocks/common.d.ts

@@ -1,4 +0,0 @@
-import { RuleSetRule } from 'webpack';
-export declare const commonLoaders: () => {
-    before: RuleSetRule[];
-};

package/dist/config/webpack/blocks/common.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.commonLoaders = void 0;
-const commonLoaders = () => {
-    return {
-        before: [
-            {
-                test: /\.mjs$/,
-                include: /node_modules/,
-                type: 'javascript/auto',
-            },
-        ],
-    };
-};
-exports.commonLoaders = commonLoaders;

package/dist/config/webpack/blocks/images.d.ts

@@ -1,7 +0,0 @@
-export declare const makeImagesLoader: () => {
-    loader: string;
-    options: {
-        limit: number;
-        name: string;
-    };
-};

package/dist/config/webpack/blocks/images.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeImagesLoader = void 0;
-const misc_1 = require("../../../lib/misc");
-const makeImagesLoader = () => {
-    return {
-        loader: require.resolve('url-loader'),
-        options: {
-            limit: 10000,
-            name: `static/media/${misc_1.isEnvProduction() ? '' : '[name]-'}[contenthash:8].[ext]`,
-        },
-    };
-};
-exports.makeImagesLoader = makeImagesLoader;

package/dist/config/webpack/blocks/styles.d.ts

@@ -1,22 +0,0 @@
-export declare const makeCssLoader: ({ isServer }: {
-    isServer?: boolean;
-}) => ({
-    loader: any;
-    options?: undefined;
-} | {
-    loader: string;
-    options: {
-        importLoaders: number;
-        localsConvention: string;
-        sourceMap: boolean;
-        plugins?: undefined;
-    };
-} | {
-    loader: string;
-    options: {
-        sourceMap: boolean;
-        plugins: any[];
-        importLoaders?: undefined;
-        localsConvention?: undefined;
-    };
-})[];

package/dist/config/webpack/blocks/styles.js

@@ -1,49 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeCssLoader = void 0;
-const browserslist_config_autoguru_1 = __importDefault(require("browserslist-config-autoguru"));
-const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
-const misc_1 = require("../../../lib/misc");
-const makeCssLoader = ({ isServer = false }) => {
-    return [
-        misc_1.isEnvProduction() &&
-            !isServer && {
-            loader: mini_css_extract_plugin_1.default.loader,
-        },
-        !misc_1.isEnvProduction() &&
-            !isServer && {
-            loader: require.resolve('style-loader'),
-        },
-        {
-            loader: require.resolve('css-loader'),
-            options: {
-                importLoaders: 1,
-                localsConvention: 'camelCase',
-                sourceMap: true,
-            },
-        },
-        {
-            loader: require.resolve('postcss-loader'),
-            options: {
-                sourceMap: true,
-                plugins: [
-                    require('postcss-flexbugs-fixes'),
-                    require('postcss-preset-env')({
-                        browsers: browserslist_config_autoguru_1.default,
-                        autoprefixer: {
-                            flexbox: 'no-2009',
-                        },
-                        stage: 3,
-                    }),
-                    require('cssnano')({
-                        browsers: browserslist_config_autoguru_1.default,
-                    }),
-                ],
-            },
-        },
-    ].filter(Boolean);
-};
-exports.makeCssLoader = makeCssLoader;