loom.config.ts

import {
  createPackage,
  createWorkspacePlugin,
  createProjectPlugin,
  DiagnosticError,
} from '@shopify/loom';
import {
  buildLibrary,
  buildLibraryWorkspace,
  rollupPlugins,
} from '@shopify/loom-plugin-build-library';
import {eslint} from '@shopify/loom-plugin-eslint';
import {stylelint} from '@shopify/loom-plugin-stylelint';
import {prettier} from '@shopify/loom-plugin-prettier';
import replace from '@rollup/plugin-replace';
import image from '@rollup/plugin-image';
import json from '@rollup/plugin-json';
import alias from '@rollup/plugin-alias';

import packageJSON from './package.json';
import {styles} from './config/rollup/plugin-styles';
import {generateScopedName} from './config/rollup/namespaced-classname';
import postcssPlugins from './config/postcss-plugins';

// Needed so TS realises what configuration hooks are provided by Jest
import type {} from '@shopify/loom-plugin-jest';
import _ from 'lodash';
import path from 'path';

const projectRootDir = path.resolve(__dirname);

// eslint-disable-next-line import/no-default-export
export default createPackage((pkg) => {
  pkg.entry({root: './src/index.ts'});
  pkg.use(
    buildLibrary({
      rootEntrypoints: false,
      jestTestEnvironment: 'jsdom',
      targets: 'extends @shopify/browserslist-config, node 12.20',
      commonjs: true,
      esmodules: true,
      esnext: true,
    }),
    rollupAliasPlugin(),
    buildLibraryWorkspace(),
    eslint(),
    stylelint({files: '**/*.scss'}),
    prettier({files: '**/*.{md,json,yaml,yml}'}),
    rollupAdjustPluginsPlugin(),
    rollupAdjustOutputPlugin(),
    jestAdjustmentsPlugin(),
    preAndPostBuildPlugin(),
    rollupDynamicLocaleImportPlugin(),
  );
});

function jestAdjustmentsPlugin() {
  return createProjectPlugin('DiscountAppComponents.Jest', ({tasks: {test}}) => {
    process.env.TZ = 'UTC';

    test.hook(({hooks}) => {
      hooks.configure.hook((configuration) => {
        // Aliases for root-level imports, which are used in test files
        // `tests/*` as an alias for test-only utilities is acceptable, but
        // avoid others as paths working in jest but not in rollup is confusing
        configuration.jestModuleNameMapper?.hook((moduleNameMapper) => ({
          ...moduleNameMapper,
          '^tests/(.*)': '<rootDir>/tests/$1',
          '\\.s?css$': require.resolve('./config/jest-transform-style'),
          "^@locales(.*)$": "<rootDir>/locales$1",
        }));

        configuration.jestConfig?.hook((config) => ({
          ...config,
          testPathIgnorePatterns: ['/node_modules/'],
        }));

        configuration.jestConfig?.hook((config) => ({
          ...config,
          globalSetup: './config/global-setup',
        }));

        // Novel file types - scss and images
        configuration.jestTransform?.hook((transforms) => ({
          ...transforms,
          '\\.svg$': require.resolve('./config/jest-transform-image'),
        }));

      });
    });
  });
}

function preAndPostBuildPlugin() {
  return createWorkspacePlugin(
    'DiscountAppComponents.PrePost',
    ({api, tasks: {build}}) => {
      build.hook(({hooks}) => {
        hooks.post.hook((steps) => [
          ...steps,
          api.createStep(
            {
              id: 'DiscountAppComponentsBuild.Post',
              label: 'discount-app-components post-build',
            },
            async (step) => {
              try {
                await step.exec(
                  'node_modules/.bin/downlevel-dts',
                  ['build/ts/latest', 'build/ts/3.4'],
                  {all: true},
                );

                await step.exec(
                  'node_modules/.bin/copyfiles',
                  ['./src/**/*.md', './build/docs', '--up=1'],
                  {all: true},
                );
              } catch (error) {
                throw new DiagnosticError({
                  title: 'Error runing postbuild steps',
                  content: error.all,
                });
              }
            },
          ),
        ]);
      });
    },
  );
}

function rollupAliasPlugin() {
  return rollupPlugins(() => [
      alias({
        entries: [
          { find: '@locales', replacement: './locales' },
        ],
      })
    ]
  );
}

function rollupDynamicLocaleImportPlugin() {
  return rollupPlugins((target) => {
    return [
      replace({
        include: ['src/**/*.tsx'],
        values: {
          'locales_dynamic': '../../../../../../locales',
        },
      }),
    ];
  }
  );
}


function rollupAdjustPluginsPlugin() {
  return rollupPlugins((target) => {
    const stylesConfig = target.options.rollupEsnext
      ? {
          mode: 'esnext',
          modules: {
            generateScopedName: generateScopedName({includeHash: true}),
          },
          plugins: postcssPlugins,
        }
      : {
          mode: 'standalone',
          output: 'styles.css',
          modules: {
            generateScopedName: generateScopedName({includeHash: false}),
          },
          plugins: postcssPlugins,
        };

    return [
      replace({
        '{{DISCOUNT_APP_COMPONENTS_VERSION}}': packageJSON.version,
        delimiters: ['', ''],
      }),
      image(),
      json({
        compact: true,
      }),
      styles(stylesConfig),
    ];
  });
}

/**
 * Output .js files for the esm build instead of .mjs files
 *
 * By default webpack 4 handles imports within js and mjs files differently.
 * mjs files are subject to a stricter set of rules when importing from commonjs
 * files such as react.
 * Some apps (including sewing-kit based apps) work around this by adding
 * `config.module.rules.push({test: /\.mjs$/, type: 'javascript/auto'});`
 * to their webpack config, which tells webpack to treat .mjs files the same
 * as .js files. However we should not rely on this behaviour being present.
 *
 * Thus publish our esm files with a .js file extension.
 */
function rollupAdjustOutputPlugin() {
  return createProjectPlugin(
    'DiscountAppComponents.RollupOutput',
    ({tasks: {build}}) => {
      build.hook(({hooks}) => {
        hooks.target.hook(({hooks, target}) => {
          const isDefaultBuild = Object.keys(target.options).length === 0;
          if (!isDefaultBuild) {
            return;
          }

          hooks.configure.hook(async (configuration) => {
            configuration.rollupOutputs?.hook((outputs) => {
              for (const output of outputs) {
                if (typeof output.entryFileNames === 'string') {
                  output.entryFileNames = output.entryFileNames.replace(
                    /\.mjs$/,
                    '.js',
                  );
                }
              }

              return outputs;
            });
          });
        });
      });
    },
  );
}