webpack.samples.js

const { mergeWithCustomize } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin');
const { execSync } = require('child_process');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const common = require('./webpack.common');
const { sharedRootScripts } = require('./html.assets');

const rdfjsonVersion = execSync('pnpm view @entryscape/rdfjson version')
  .toString()
  .trim();
const examples = [1, 2, 3, 4, 5, 6, 7];
const getHTMLPlugins = () => {
  return [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: __dirname + `/html/index.html`,
      inject: true,
    }),
    ...examples.map(
      (exampleNumber) =>
        new HtmlWebpackPlugin({
          filename: `example${exampleNumber}/index.html`,
          template: __dirname + `/html/example${exampleNumber}/index.html`,
          inject: true,
        })
    ),
    //  append assets for all examples
    new HtmlWebpackTagsPlugin({
      tags: [
        {
          path: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700',
          type: 'css',
          publicPath: false,
        },
        {
          path: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css',
          type: 'css',
          publicPath: false,
        },
        {
          path: `https://unpkg.com/@entryscape/rdfjson@${rdfjsonVersion}/dist/rdfjson.js`,
          type: 'js',
          publicPath: false,
        },
        'styles.css',
      ],
      append: true,
    }), // append styles.css to all examples
    // append examples' respective js for all html
    ...examples.map(
      (number) =>
        new HtmlWebpackTagsPlugin({
          files: [`example${number}/**/*.html`],
          publicPath: '.',
          tags: [
            {
              path: 'init.js',
              attributes: {
                type: 'module',
              },
            },
          ],
          append: true,
        })
    ),
  ];
};

const getCopyPlugins = (type) =>
  new CopyWebpackPlugin({
    patterns: [
      ...examples.map((number) => ({
        from: '**/*.js',
        context: path.resolve(path.join(__dirname, 'html', `example${number}`)),
        to: path.join(__dirname, 'samples', type, `example${number}`),
      })),
      {
        from: path.resolve(path.join(__dirname, 'html', 'chooser')),
        to: 'chooser',
      },
      {
        from: path.resolve(path.join(__dirname, 'html', 'templates')),
        to: 'templates',
      },
      // Shared root-level helpers imported by the example init.js modules
      // (editorFallbackNotice.js) plus rdf.js, minus the dev-only chrome
      // scripts. Globbed via html.assets.js so a future shared helper ships
      // automatically instead of silently 404-ing (RDFORMS-163 regression).
      { ...sharedRootScripts, to: path.join(__dirname, 'samples', type) },
      // {
      //   from: path.resolve(path.join(__dirname, 'html', 'examples.html')),
      //   to: 'index.html',
      // },
      {
        from: path.resolve(path.join(__dirname, 'html', 'styles.css')),
        to: 'styles.css',
      },
    ],
  });

// Samples are built only for the editor-capable flavors. jQuery and vanilla are
// presentation-only (no Editor), so they're exercised via `dev:all` and the
// smoke test rather than the built samples.
const editorCapableFlavors = ['bootstrap', 'react'];

/**
 * Build a webpack configuration for one sample variant.
 *
 * @param {{ type: string }} options - Variant options; `type` is the renderer variant (e.g. 'bootstrap' or 'react').
 * @returns {object} The merged webpack configuration.
 */
function createConfig(options) {
  const devConfig = {
    entry: `./renderers/${options.type}.js`,
    output: {
      path: path.join(__dirname, 'samples', options.type),
      filename: 'rdforms.js',
      clean: true,
    },
    mode: 'production',
    plugins: [...getHTMLPlugins(), getCopyPlugins(options.type)],
    resolve: {
      fallback: {
        fs: false,
      },
    },
  };

  // Customizing object behavior
  return mergeWithCustomize({
    customizeObject(a, b, key) {
      if (key === 'entry') {
        // Custom merging
        return b;
      }

      // Fall back to default merging
      return undefined;
    },
  })(common, devConfig);
}

module.exports = editorCapableFlavors.map((variantType) =>
  createConfig({ type: variantType })
);