webpack.config.js

process.traceDeprecation = true;
const path = require("path");
const sveltePreprocess = require("svelte-preprocess");
const package_json = require("./package.json");
const patternslib_package_json = require("@patternslib/patternslib/package.json");
const mf_config = require("@patternslib/dev/webpack/webpack.mf");
const webpack_config = require("@patternslib/dev/webpack/webpack.config").config;

module.exports = () => {
    let config = {
        entry: {
            "bundle.min": path.resolve(__dirname, "src/index.js"),
        },
        optimization: {
            splitChunks: {
                cacheGroups: {
                    // `module.resource` contains the absolute path of the file on disk.
                    // We need to substitute the path separators to make it work on different OSes.
                    tinymce_plugins: {
                        name: "tinymce_plugins",
                        test(module) {
                            const default_plugins = [
                                "fullscreen",
                                "hr",
                                "lists",
                                "media",
                                "nonbreaking",
                                "noneditable",
                                "pagebreak",
                                "paste",
                                "preview",
                                "print",
                                "searchreplace",
                                "tabfocus",
                                "table",
                                "visualchars",
                                "wordcount",
                                "code",
                            ];
                            if (
                                /node_modules.tinymce.plugins/.test(module.resource) ===
                                false
                            ) {
                                return false;
                            }

                            for (const plugin of default_plugins) {
                                if (module.resource.includes(plugin)) {
                                    return true;
                                }
                            }
                            return false;
                        },
                        chunks: "async",
                    },
                    tinymce: {
                        name: "tinymce",
                        test(module) {
                            return (
                                /node_modules.tinymce/.test(module.resource) === true &&
                                !module.resource.includes("tinymce-i18n") &&
                                !module.resource.includes("plugins")
                            );
                        },
                        chunks: "async",
                    },
                    datatables: {
                        name: "datatables",
                        test: /[\\/]node_modules[\\/]datatables.net.*[\\/]/,
                        chunks: "async",
                    },
                    select2: {
                        name: "select2",
                        test: /[\\/]node_modules[\\/]select2.*[\\/]/,
                        chunks: "async",
                    },
                    jquery_plugins: {
                        name: "jquery_plugins",
                        test: /[\\/]node_modules[\\/]jquery\..*[\\/]/,
                        chunks: "async",
                    },
                },
            },
        },
    };

    config = webpack_config({
        config: config,
        package_json: package_json,
    });

    config.output.path = path.resolve(__dirname, "dist/");

    const svelte_onwarn = (warning, handler) => {
        // App.svelte props are intentionally read once at mount time as static config.
        if (warning.code === "state_referenced_locally") return;
        handler(warning);
    };

    // Svelte components (.svelte), with TypeScript support in <script lang="ts">.
    config.module.rules.push({
        test: /\.svelte$/,
        // exclude: /node_modules/,
        use: {
            loader: "svelte-loader",
            options: {
                preprocess: sveltePreprocess(),
                compilerOptions: {
                    dev: process.env.NODE_ENV === "development",
                },
                emitCss: process.env.NODE_ENV !== "development",
                hotReload: process.env.NODE_ENV === "development",
                onwarn: svelte_onwarn,
            },
        },
    });

    // Svelte runes-in-module files (.svelte.js / .svelte.ts). svelte-loader
    // compiles these with `compileModule` and does NOT run `preprocess`, so
    // TypeScript is stripped by a preceding babel pass (type-strip only, no
    // preset-env, to keep the `$state`/`$derived` runes intact for the compiler).
    config.module.rules.push({
        test: /\.svelte\.(js|ts)$/,
        use: [
            {
                loader: "svelte-loader",
                options: {
                    compilerOptions: {
                        dev: process.env.NODE_ENV === "development",
                    },
                    onwarn: svelte_onwarn,
                },
            },
            {
                loader: "babel-loader",
                options: {
                    babelrc: false,
                    configFile: false,
                    presets: ["@babel/preset-typescript"],
                },
            },
        ],
    });

    // Plain TypeScript modules (.ts), excluding the .svelte.ts handled above.
    // Uses the project babel config (preset-env + preset-typescript).
    config.module.rules.push({
        test: /\.ts$/,
        exclude: /(\.svelte\.ts$)|(node_modules)/,
        loader: "babel-loader",
    });

    // NOTE: Use object-literal (colon) syntax here, not `config.resolve.x = ...`
    // assignments. Because this webpack config is exported as a function,
    // svelte-loader cannot read the runtime value and instead regex-scans this
    // file's source for an array assigned with colon syntax. Assignment syntax
    // wouldn't match and svelte-loader would emit a spurious warning telling you
    // to add "svelte" to resolve.conditionNames.
    config.resolve = {
        ...config.resolve,
        extensions: [".js", ".ts", ".json", ".wasm", ".svelte"],
        mainFields: ["browser", "module", "main"],
        conditionNames: ["svelte", "browser", "require"],
        alias: {
            ...config.resolve.alias,
            "@formatjs/intl-datetimeformat/locale-data": path.resolve(
                __dirname,
                "node_modules/@formatjs/intl-datetimeformat/locale-data"
            ),
        },
    };

    // pnpm loader resolution: the attempted resolveLoader configuration below
    // did not resolve the issue. The workaround was "shamefully-hoist=true" in
    // `.npmrc` to create a flat node_modules directory.
    // See this comment for more information:
    // https://github.com/webpack/webpack/issues/5087#issuecomment-3193480986
    //
    // try to fix pnpm node_modules structure.
    // config.resolveLoader = {
    //     modules: [
    //         path.resolve(__dirname, "node_modules"),
    //         path.resolve(__dirname, "src")
    //     ]
    // }

    config.plugins.push(
        mf_config({
            name: package_json.name,
            filename: "remote.min.js",
            remote_entry: config.entry["bundle.min"],
            dependencies: {
                ...patternslib_package_json.dependencies,
                ...package_json.dependencies,
            },
            shared: {
                bootstrap: {
                    singleton: true,
                    requiredVersion: package_json.dependencies["bootstrap"],
                    eager: true,
                },
                jquery: {
                    singleton: true,
                    requiredVersion: package_json.dependencies["jquery"],
                    eager: true,
                },
                // Share the Svelte runtime with remote (add-on) bundles.
                // Svelte keeps its reactivity state (effect tree, etc.) in
                // module-level variables, so host and remotes must use the
                // very same runtime instance — otherwise a Svelte component
                // registered by an add-on (e.g. via @plone/registry for
                // pat-contentbrowser's ``componentRegistryKeys``) cannot be
                // mounted by this bundle.
                svelte: {
                    singleton: true,
                    requiredVersion: package_json.dependencies["svelte"],
                },
                // Prefix share ("svelte/"): compiled Svelte components do not
                // import "svelte" itself but subpaths like
                // "svelte/internal/client", which an exact-match share entry
                // does not cover.
                "svelte/": {
                    singleton: true,
                    requiredVersion: package_json.dependencies["svelte"],
                },
            },
        })
    );

    if (process.env.NODE_ENV === "development") {
        // Note: ``publicPath`` is set to "auto" in Patternslib,
        //        so for the devServer the public path set to "/".
        config.devServer.allowedHosts = ['localhost', 'plone.lan'];
        config.devServer.port = "8000";
        config.devServer.static.directory = path.resolve(__dirname, "./_site/");
    }

    if (process.env.DEPLOYMENT === "docs") {
        config.output.path = path.resolve(
            __dirname,
            "./_site/dist/mockup/"
        );
    }
    if (process.env.DEPLOYMENT === "plone") {
        config.output.path = path.resolve(
            __dirname,
            "../plone.staticresources/src/plone/staticresources/static/bundle-plone/"
        );
    }
    if (process.env.DEPLOYMENT === "tests") {
        config.output.path = path.resolve(
            __dirname,
            "./tests/src/plone.staticresources/src/plone/staticresources/static/bundle-plone/"
        );
    }

    //console.log(JSON.stringify(config, null, 4));

    return config;
};