defaultSupportedPackages.ts

import { IPackageGroup } from '../interfaces/index';

const fabricGroup: IPackageGroup = {
  globalName: 'FluentUIReact',
  // Theoretically we could use import() here, but that pulls things into bundles when using
  // commonjs modules due to the way import is transpiled for commonjs
  // https://github.com/webpack/webpack/issues/5703#issuecomment-357512412
  loadGlobal: cb => require.ensure([], require => cb(require('@fluentui/react'))),
  packages: [],
};
const hooksGroup: IPackageGroup = {
  globalName: 'FabricReactHooks',
  loadGlobal: cb => require.ensure([], require => cb(require('@uifabric/react-hooks'))),
  packages: [],
};
const exampleDataGroup: IPackageGroup = {
  globalName: 'FabricExampleData',
  loadGlobal: cb => require.ensure([], require => cb(require('@uifabric/example-data'))),
  packages: [],
};

let typesContext: __WebpackModuleApi.RequireContext | undefined;
try {
  // Other packages' typings are copied into dist/types by a build step.
  // Load all of those typings dynamically (lazy-once puts them in a chunk together).
  typesContext = require.context('!raw-loader!@uifabric/tsx-editor/dist/types', false, /.*\.d\.ts$/, 'lazy-once');
} catch (ex) {
  // We're probably running in jest, which doesn't have webpack's require.context
}
if (typesContext) {
  typesContext.keys().forEach(dtsPath => {
    // The api-extractor .d.ts rollups use the package's unscoped name (such as "utilities")
    // as the filename.
    // (example path: '!raw-loader!@uifabric/tsx-editor/dist/types/utilities.d.ts')
    const unscopedName = dtsPath.match(/\/(.*?)\.d\.ts$/)![1];
    const packageName = `${
      ['react-focus', 'react'].indexOf(unscopedName) > -1 ? '@fluentui' : '@uifabric'
    }/${unscopedName}`;
    const packageGroup =
      packageName === '@uifabric/example-data'
        ? exampleDataGroup
        : packageName === '@uifabric/react-hooks'
        ? hooksGroup
        : fabricGroup;
    packageGroup.packages.push({
      packageName,
      loadTypes: () =>
        // raw-loader 0.x exports a single string, and later versions export a default.
        // The package.json specifies 0.x, but handle either just in case.
        typesContext!(dtsPath).then((result: string | { default: string }) =>
          typeof result === 'string' ? result : result.default,
        ),
    });
  });
} else {
  // Use some defaults for jest tests (real types won't be loaded)
  const loadTypes = () => '';
  fabricGroup.packages.push(
    // TODO: this probably needs to be dynamically generated so it doesn't break every time we
    // add a new component package exported by @fluentui/react
    { packageName: '@fluentui/react', loadTypes },
    { packageName: '@fluentui/foundation-legacy', loadTypes },
    { packageName: '@uifabric/icons', loadTypes },
    { packageName: '@uifabric/merge-styles', loadTypes },
    { packageName: '@fluentui/react-focus', loadTypes },
    { packageName: '@fluentui/style-utilities', loadTypes },
    { packageName: '@uifabric/utilities', loadTypes },
    { packageName: '@fluentui/date-time-utilities', loadTypes },
  );
  hooksGroup.packages.push({ packageName: '@uifabric/react-hooks', loadTypes });
  exampleDataGroup.packages.push({ packageName: '@uifabric/example-data', loadTypes });
}

/**
 * Default supported packages for imports: `@fluentui/react` and everything it exports,
 * plus `@uifabric/example-data`. (React is implicitly supported.)
 */
export const SUPPORTED_PACKAGES: IPackageGroup[] = [fabricGroup, hooksGroup, exampleDataGroup];