import PrerenderSsgWebpackPlugin from 'prerender-ssg-webpack-plugin';

const webpackConfig = {
    plugins: [
        /**
         * This is the most basic example.
         * Defaults will be used.
         * See "Details, Options & Defaults" for information on configuring this plugin.
         */
        new PrerenderSsgWebpackPlugin()
    ]
};

module.exports = webpackConfig;

/**
 * `PrerenderSsgWebpackPlugin`
 *
 * Prerenders one or more pages based on provided routes using Puppeteer.
 * This will only run for Webpack's production mode, otherwise it will abort.
 * @param options PrerenderSsgWebpackPluginOptions
 *
 * @example waitForSelector `waitFor: '#app'`
 *      This will wait for any selector to exist on the DOM before rendering occurs.
 * @example waitForFunction `waitFor: () => !!window.__APP_READY__`
 *      To manually trigger:
 *      @usage `window.__APP_READY__ = true;`
 * @example `waitForManual: true`
 *      When this is set, `waitFor` will be ignored. This expects a manual trigger of the prerender snapshot from the client code.
 *      This is great for waiting for async resolution & enrichment of content to the page before rendering occurs.
 *      To manually Trigger:
 *      @usage `if (window.__snapshot) window.__snapshot();`
 */

/**
 * `PrerenderSsgWebpackPluginOptions`
 *
 * These are the options which may be passed into `PrerenderSsgWebpackPlugin`.
 * All "options" are optional.
 * All defaults are set as values below, w/ allowable types in the comment following each option-key/value.
 */
const options: PrerenderSsgWebpackPluginOptions = {
    debug: false // boolean
    launchOptions: {
        args: ['--no-sandbox'],
        headless: true
    }, // puppeteer.LaunchOptions & puppeteer.BrowserLaunchArgumentOptions & puppeteer.BrowserConnectOptions & { product?: puppeteer.Product; extraPrefsFirefox?: Record<string, unknown>; }
    port: process.env.PORT || 8080, // number | string
    puppeteer: puppeteer, // PuppeteerNode
    routes: ['/'], // string[]
    setup: undefined, // (page: Page) => Promise<void>
    waitFor: undefined, // number | string | (() => boolean | Promise<boolean>)
    waitForManual: false, // boolean
    waitUntil: 'domcontentloaded' // 'domcontentloaded' | 'load' | 'networkidle0' | 'networkidle2'
};

import HtmlWebpackPlugin from 'html-webpack-plugin';
import * as path from 'path';
import PrerenderSsgWebpackPlugin from 'prerender-ssg-webpack-plugin';
import puppeteer from 'puppeteer';
import { Configuration, ProgressPlugin } from 'webpack';

const template = require('./templates/index.js');
const isProd = process.env.NODE_ENV === 'production';

const webpackConfig: Configuration = {
    entry: './src/index.ts',
    mode: isProd ? 'production' : 'development',
    module: {
        // TS & Styles' configs not shown for brevity.
        rules: [tsRuleSet, stylesRuleSet]
    },
    output: {
        clean: true,
        filename: '[name].[contenthash].bundle.js',
        path: path.resolve(process.cwd(), 'build'),
        publicPath: '/'
    },
    plugins: [
        new ProgressPlugin(),
        new HtmlWebpackPlugin({
            templateContent: template,
            title: 'Super Cool Title'
        }),
        new CopyPlugin({
            patterns: ['./assets/**/*']
        }),
        new PrerenderSsgWebpackPlugin({
            port: 3000,
            // Uses `puppeteer` from "puppeteer-core" by default.
            puppeteer,
            routes: ['/', '/about', '/contact', '/shop/products'],
            setup: async (page) => {
                await page.evaluateOnNewDocument(() => {
                    (window as any).SOME_FLAG = true;
                });
            },
            waitForManual: true
        })
    ]
};

module.exports = webpackConfig;