@servicetitan/startup 34.3.0-beta.2 → 35.0.0

package/src/webpack/__tests__/create-webpack-config.test.ts

@@ -108,7 +108,6 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         argv = {};
         packages = [];
         overrides = {
-            configuration: { mode: 'development' },
             plugins: {
                 HtmlWebpackPlugin: { favicon: 'foo' },
                 MiniCssExtractPlugin: { attributes: { foo: 'bar' } },
@@ -527,8 +526,8 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                 );
             });
 
-            describe('when light option is set to true', () => {
-                beforeEach(() => setOptions({ light: true }));
+            describe('when embed option is set to true', () => {
+                beforeEach(() => setOptions({ embed: true }));
 
                 test('adds "light" to reportFilename and reportTitle', () => {
                     expect(subject().plugins).toContainEqual(

package/src/webpack/configs/amd-config.ts

@@ -1,9 +1,8 @@
 import { Configuration } from 'webpack';
-import { BuildContext } from '../../core';
-import { Overrides } from '../types';
+import { Context, Overrides } from './types';
 
 type Result = Pick<Configuration, 'amd'>;
 
-export function amdConfig(_context: BuildContext, _: Overrides): Result {
+export function amdConfig(_context: Context, _: Overrides): Result {
     return { amd: false };
 }

package/src/webpack/configs/cache-config.ts

@@ -1,17 +1,16 @@
 import fs from 'fs';
 import path from 'path';
 import { Configuration } from 'webpack';
-import { BuildContext } from '../../core';
 import { findUp } from '../../utils';
-import { Overrides } from '../types';
+import { Context, Overrides } from './types';
 
 type Config = Configuration['cache'];
 type Result = Pick<Configuration, 'cache' | 'infrastructureLogging'> | undefined;
 
 const CACHE_VERSION = '1';
 
-export function cacheConfig(context: BuildContext, _overrides: Overrides): Result {
-    const { emitExposedDependencies } = context.options.bundlerConfig;
+export function cacheConfig(context: Context, _overrides: Overrides): Result {
+    const { emitExposedDependencies } = context;
     if (!emitExposedDependencies) {
         return;
     }

package/src/webpack/configs/dev-server-config.ts

@@ -1,7 +1,6 @@
 import fs from 'fs';
 import path from 'path';
 import { Configuration } from 'webpack';
-import { BuildContext } from '../../core';
 import {
     allowedWebpackDevServerOptions,
     getWebpackConfiguration,
@@ -9,18 +8,14 @@ import {
     log,
     pick,
 } from '../../utils';
-import { Overrides } from '../types';
 import { statsConfig } from './stats-config';
+import { Context, Overrides } from './types';
 
 type DevServerConfig = NonNullable<Configuration['devServer']>;
 type Result = Pick<Configuration, 'devServer'> | undefined;
 
-export function devServerConfig(context: BuildContext, overrides: Overrides): Result {
-    if (
-        context.build.isProduction ||
-        context.options.bundlerConfig.emitExposedDependencies ||
-        isDevServerDisabled()
-    ) {
+export function devServerConfig(context: Context, overrides: Overrides): Result {
+    if (context.isProduction || context.emitExposedDependencies || isDevServerDisabled()) {
         return;
     }
 

package/src/webpack/configs/devtool-config.ts

@@ -1,12 +1,11 @@
 import { Configuration } from 'webpack';
-import { BuildContext } from '../../core';
-import { Overrides } from '../types';
+import { Context, Overrides } from './types';
 
 type Config = Configuration['devtool'];
 type Result = Pick<Configuration, 'devtool'>;
 
-export function devtoolConfig(context: BuildContext, _: Overrides): Result {
-    const { isProduction } = context.build;
+export function devtoolConfig(context: Context, _: Overrides): Result {
+    const { isProduction } = context;
     let devtool: Config;
 
     if (isProduction) {

package/src/webpack/configs/entry.config.ts

@@ -1,30 +1,29 @@
 import fs from 'fs';
 import { Configuration } from 'webpack';
-import { BuildContext, getDesignSystemPath } from '../../core';
-import { Overrides } from '../types';
 import { getModuleEntryPath } from '../utils';
+import { getDesignSystemPath } from './plugins';
+import { Context, Overrides } from './types';
 
 type Config = Configuration['entry'];
 type Result = Pick<Configuration, 'entry'>;
 
-export function entryConfig(context: BuildContext, _: Overrides): Result {
-    const entry: Config = context.options.bundlerConfig.emitExposedDependencies
+export function entryConfig(context: Context, _: Overrides): Result {
+    const entry: Config = context.emitExposedDependencies
         ? getSharedEntryPoints(context)
         : getIndexEntryPoint(context);
 
     return { entry };
 }
 
-function getIndexEntryPoint(context: BuildContext): Config {
-    const { source, destination } = context.package;
+function getIndexEntryPoint({ source, destination }: Context): Config {
     const index = fs.existsSync(`./${source}/index.js`)
         ? `./${source}/index`
         : `./${destination}/index`;
     return { main: [index] };
 }
 
-function getSharedEntryPoints(context: BuildContext): Config {
-    const { sharedDependencies } = context.package;
+function getSharedEntryPoints(context: Context): Config {
+    const { sharedDependencies } = context;
     return {
         shared: Object.keys(sharedDependencies).map(getModuleEntryPath),
         ...(sharedDependencies['@servicetitan/design-system']

package/src/webpack/configs/externals-config.ts

@@ -1,10 +1,26 @@
 import { Configuration } from 'webpack';
-import { BuildContext, getExternalsMapping } from '../../core';
-import { Overrides } from '../types';
+import { Context, Overrides } from './types';
 
+type Config = Configuration['externals'];
 type Result = Pick<Configuration, 'externals'> | undefined;
 
-export function externalsConfig(context: BuildContext, _: Overrides): Result {
-    const externals = getExternalsMapping(context);
-    return externals ? { externals } : undefined;
+export function externalsConfig(context: Context, _: Overrides): Result {
+    if (!needsExternals(context)) {
+        return;
+    }
+
+    const { sharedDependencies } = context;
+    const name = context.name || context.packageData.name;
+    const externals: Config = Object.fromEntries(
+        Object.entries(sharedDependencies).map(([dependency, variable]) => [
+            dependency,
+            `${variable}['${name}']`,
+        ])
+    );
+
+    return { externals };
+}
+
+function needsExternals({ embed, emitExposedDependencies, isExposeSharedDependencies }: Context) {
+    return !!embed || (isExposeSharedDependencies && !emitExposedDependencies);
 }

package/src/webpack/configs/index.ts

@@ -11,4 +11,5 @@ export * from './plugins-config';
 export * from './resolve-config';
 export * from './rules-config';
 export * from './stats-config';
+export type * from './types';
 export * from './watch-options-config';

package/src/webpack/configs/loaders/css-loader.ts

@@ -1,8 +1,7 @@
-import { BuildContext } from '../../../core';
+import { Context } from '../types';
 import { LoaderOptions } from './types';
 
-export function cssLoader(context: BuildContext, { esModule }: LoaderOptions = {}) {
-    const { isProduction } = context.build;
+export function cssLoader({ isProduction }: Context, { esModule }: LoaderOptions = {}) {
     const loader = 'css-loader';
     return esModule
         ? {

package/src/webpack/configs/loaders/style-loader.ts

@@ -1,11 +1,11 @@
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import { BuildContext } from '../../../core';
+import { Context } from '../types';
 import { LoaderOptions } from './types';
 
-export function styleLoader(context: BuildContext, { esModule }: LoaderOptions = {}) {
-    const { isProduction } = context.build;
-    const { isWebComponent } = context.package;
-    const { emitExposedDependencies } = context.options.bundlerConfig;
+export function styleLoader(
+    { isProduction, isWebComponent, emitExposedDependencies }: Context,
+    { esModule }: LoaderOptions = {}
+) {
     const loader =
         isProduction || isWebComponent || emitExposedDependencies
             ? MiniCssExtractPlugin.loader

package/src/webpack/configs/module-config.ts

@@ -1,12 +1,11 @@
 import { Configuration } from 'webpack';
-import { BuildContext } from '../../core';
-import { Overrides } from '../types';
 import { rulesConfig } from './rules-config';
+import { Context, Overrides } from './types';
 
 type Config = Configuration['module'];
 type Result = Pick<Configuration, 'module'>;
 
-export function moduleConfig(context: BuildContext, overrides: Overrides): Result {
+export function moduleConfig(context: Context, overrides: Overrides): Result {
     const module: Config = { ...rulesConfig(context, overrides) };
 
     return { module };

package/src/webpack/configs/optimization-config.ts

@@ -1,16 +1,14 @@
 import CssMinimizerWebpackPlugin from 'css-minimizer-webpack-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import { Configuration } from 'webpack';
-import { BuildContext } from '../../core';
-import { Overrides } from '../types';
+import { Context, Overrides } from './types';
 
 type Config = Configuration['optimization'];
 type ConfigWithCacheGroups = Config & { splitChunks: { cacheGroups: Record<string, any> } };
 type Result = Pick<Configuration, 'optimization'>;
 
-export function optimizationConfig(context: BuildContext, _: Overrides): Result {
-    const { headless, isProduction } = context.build;
-    const { emitExposedDependencies } = context.options.bundlerConfig;
+export function optimizationConfig(context: Context, _: Overrides): Result {
+    const { emitExposedDependencies, headless, isProduction } = context;
 
     const optimization: ConfigWithCacheGroups = {
         chunkIds: isProduction ? 'deterministic' : 'named',
@@ -32,16 +30,14 @@ export function optimizationConfig(context: BuildContext, _: Overrides): Result
     return { optimization };
 }
 
-function minimizeConfig(optimization: ConfigWithCacheGroups, context: BuildContext) {
-    const { isProduction } = context.build;
-    const { codeCoverage } = context.options;
-    const { minify } = context.options.bundlerConfig;
+function minimizeConfig(optimization: ConfigWithCacheGroups, context: Context) {
+    const { isProduction, codeCoverage } = context;
     if (!isProduction) {
         return;
     }
 
-    const minifyJs = minify?.js ?? true;
-    const minifyCss = minify?.css ?? true;
+    const minifyJs = context.minify?.js ?? true;
+    const minifyCss = context.minify?.css ?? true;
     optimization.minimize = !codeCoverage && (!!minifyJs || !!minifyCss);
     if (!optimization.minimize) {
         return;
@@ -63,8 +59,8 @@ function minimizeConfig(optimization: ConfigWithCacheGroups, context: BuildConte
     ];
 }
 
-function sharedDependenciesConfig(optimization: ConfigWithCacheGroups, context: BuildContext) {
-    const { emitExposedDependencies } = context.options.bundlerConfig;
+function sharedDependenciesConfig(optimization: ConfigWithCacheGroups, context: Context) {
+    const { emitExposedDependencies } = context;
     if (!emitExposedDependencies) {
         return;
     }
@@ -79,9 +75,8 @@ function sharedDependenciesConfig(optimization: ConfigWithCacheGroups, context:
     });
 }
 
-function webComponentConfig(optimization: ConfigWithCacheGroups, context: BuildContext) {
-    const { headless, isProduction } = context.build;
-    const { isWebComponent } = context.package;
+function webComponentConfig(optimization: ConfigWithCacheGroups, context: Context) {
+    const { headless, isWebComponent, isProduction } = context;
     if (!isWebComponent || headless) {
         return;
     }

package/src/webpack/configs/output-config.ts

@@ -1,20 +1,18 @@
+import path from 'path';
 import { Configuration } from 'webpack';
-import { BuildContext, getBundleType, getOutputPath } from '../../core';
-import { Overrides } from '../types';
+import { Context, Overrides } from './types';
+import { getBundleType } from './utils';
 
 type Config = Configuration['output'];
 type Result = Pick<Configuration, 'output'>;
 
-export function outputConfig(context: BuildContext, _: Overrides): Result {
-    const { name, isProduction } = context.build;
-    const { isWebComponent } = context.package;
-    const { emitExposedDependencies } = context.options.bundlerConfig;
+export function outputConfig(context: Context, _: Overrides): Result {
+    const { emitExposedDependencies, isProduction, isWebComponent, name } = context;
 
     const output: Config = {
         filename: '[name].bundle.js',
         path: getOutputPath(context),
         clean: getClean(context),
-        // TODO: ask Dexter about chunkLoadingGlobal and whether it's expected that we pass empty name here
         ...(emitExposedDependencies ? { chunkLoadingGlobal: `sharedChunk${name}` } : {}),
     };
 
@@ -30,17 +28,25 @@ export function outputConfig(context: BuildContext, _: Overrides): Result {
     return { output };
 }
 
-function getClean(context: BuildContext): NonNullable<Config>['clean'] {
-    const { emitExposedDependencies } = context.options.bundlerConfig;
+function getClean(context: Context): NonNullable<Config>['clean'] {
+    const { emitExposedDependencies } = context;
     if (emitExposedDependencies) {
         return true;
     }
-    const exposedDependenciesDir = getBundleType({
-        ...context,
-        options: {
-            ...context.options,
-            bundlerConfig: { ...context.options.bundlerConfig, emitExposedDependencies: true },
-        },
-    });
+    const exposedDependenciesDir = getBundleType({ ...context, emitExposedDependencies: true });
     return exposedDependenciesDir ? { keep: new RegExp(exposedDependenciesDir) } : true;
 }
+
+function getOutputPath(context: Context) {
+    const { destination, emitExposedDependencies } = context;
+
+    const subdir = getBundleType(context) ?? '';
+    if (typeof emitExposedDependencies === 'object') {
+        const { output } = emitExposedDependencies;
+        if (output?.path) {
+            return path.join(output.path, subdir);
+        }
+    }
+
+    return path.join(process.cwd(), destination, 'bundle', subdir);
+}

package/src/webpack/configs/plugins/assets-manifest-plugin.ts

@@ -1,17 +1,21 @@
+import fs from 'fs';
+import path from 'path';
 import { WebpackAssetsManifest } from 'webpack-assets-manifest';
-import { BuildContext, generateExposedDependenciesMetadata, generateMetadata } from '../../../core';
-import { Overrides } from '../../types';
+import { readJsonSafe } from '../../../utils';
+import { Context, Overrides } from '../types';
+import { generateMetadata } from '../utils';
+
+interface Metadata {
+    entryPointsPath: string;
+}
 
 interface EntryPoints {
     css: string[];
     js: string[];
 }
 
-export function assetsManifestPlugin(context: BuildContext, _: Overrides) {
-    const { isWebComponent } = context.package;
-    const { emitExposedDependencies } = context.options.bundlerConfig;
-
-    if (!(isWebComponent || emitExposedDependencies)) {
+export function assetsManifestPlugin(context: Context, _: Overrides) {
+    if (!(context.isWebComponent || context.emitExposedDependencies)) {
         return;
     }
 
@@ -34,8 +38,8 @@ export function assetsManifestPlugin(context: BuildContext, _: Overrides) {
         },
         // eslint-disable-next-line @typescript-eslint/require-await
         done: async (manifest: WebpackAssetsManifest) => {
-            if (emitExposedDependencies) {
-                generateExposedDependenciesMetadata(context, () => manifest.getOutputPath());
+            if (context.emitExposedDependencies) {
+                generateExposedDependenciesMetadata(context, manifest);
             } else {
                 generateMetadata(context);
             }
@@ -49,3 +53,26 @@ function ensureDesignSystemCssIsFirst(cssAssets: string[]) {
         ? [cssAssets[offset], ...cssAssets.filter((_, index) => index !== offset)]
         : cssAssets;
 }
+
+export function getExposedDependenciesEntryPoints(context: Context) {
+    const metadataPath = getExposedDependenciesMetadataPath(context);
+    const metadata = readJsonSafe<Metadata>(metadataPath);
+    if (metadata?.entryPointsPath) {
+        return readJsonSafe<EntryPoints>(metadata.entryPointsPath);
+    }
+}
+
+function generateExposedDependenciesMetadata(context: Context, manifest: WebpackAssetsManifest) {
+    const { destination } = context;
+    if (!fs.existsSync(destination)) {
+        fs.mkdirSync(destination, { recursive: true });
+    }
+
+    const metadataPath = getExposedDependenciesMetadataPath(context);
+    const metadata: Metadata = { entryPointsPath: manifest.getOutputPath() };
+    fs.writeFileSync(metadataPath, JSON.stringify(metadata, null, 2), 'utf-8');
+}
+
+function getExposedDependenciesMetadataPath({ destination }: Context) {
+    return path.join(destination, 'exposed-dependencies-metadata.json');
+}

package/src/webpack/configs/plugins/bundle-analyser-plugin.ts

@@ -1,11 +1,11 @@
 import os from 'os';
 import path from 'path';
-import { BuildContext, getBundleType } from '../../../core';
-import { Overrides } from '../../types';
+import { Context, Overrides } from '../types';
+import { getBundleType } from '../utils';
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
-export function bundleAnalyzerPlugin(context: BuildContext, _: Overrides) {
-    if (!context.options.buildStat) {
+export function bundleAnalyzerPlugin(context: Context, _: Overrides) {
+    if (!context.buildStat) {
         return;
     }
 
@@ -16,14 +16,14 @@ export function bundleAnalyzerPlugin(context: BuildContext, _: Overrides) {
     });
 }
 
-function getReportFileName(context: BuildContext) {
+function getReportFileName(context: Context) {
     const type = getBundleType(context);
     const qualifier = type ? `-${type}` : '';
-    return `${context.package.name}${qualifier}-bundle-${Date.now()}.html`;
+    return `${context.packageData.name}${qualifier}-bundle-${Date.now()}.html`;
 }
 
-function getReportTitle(context: BuildContext) {
-    const unscopedName = context.package.name.replace(/^@[^/]+\//, '');
+function getReportTitle(context: Context) {
+    const unscopedName = context.packageData.name.replace(/^@[^/]+\//, '');
     const type = getBundleType(context);
     const qualifier = type ? ` (${type})` : '';
     return `${unscopedName}${qualifier} ${formatDate(new Date())}`;

package/src/webpack/configs/plugins/define-exposed-dependencies-plugin.ts

@@ -1,13 +1,21 @@
 import { DefinePlugin } from 'webpack';
-import { BuildContext, defineExposedDependencies } from '../../../core';
-import { Overrides } from '../../types';
+import { getPackageDependencyVersion } from '../../../utils';
+import { Context, Overrides } from '../types';
+import { getExposedDependencies } from '../utils';
 
-export function defineExposedDependenciesPlugin(context: BuildContext, _: Overrides) {
-    const definition = defineExposedDependencies(context);
-
-    if (!definition) {
+export function defineExposedDependenciesPlugin(context: Context, _: Overrides) {
+    const { emitExposedDependencies, isExposeSharedDependencies } = context;
+    if (!isExposeSharedDependencies || emitExposedDependencies) {
         return;
     }
 
-    return new DefinePlugin(definition);
+    const { packageData, sharedDependencies } = context;
+    const exposedDependencies = getExposedDependencies(sharedDependencies, dependency =>
+        getPackageDependencyVersion(dependency, packageData.dependencies?.[dependency])
+    );
+
+    return new DefinePlugin({
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        EXPOSED_DEPENDENCIES: JSON.stringify(exposedDependencies),
+    });
 }

package/src/webpack/configs/plugins/define-exposed-instance-dependencies-plugin.ts

@@ -1,13 +1,19 @@
 import { DefinePlugin } from 'webpack';
-import { BuildContext, defineExposedInstanceDependencies } from '../../../core';
-import { Overrides } from '../../types';
+import { Context, Overrides } from '../types';
+import { getLaunchDarklySdkVersion } from '../utils/get-launchdarkly-sdk-version';
 
-export function defineExposedInstanceDependenciesPlugin(context: BuildContext, _: Overrides) {
-    const definition = defineExposedInstanceDependencies(context);
-
-    if (!definition) {
+export function defineExposedInstanceDependenciesPlugin(context: Context, _: Overrides) {
+    const { emitExposedDependencies, isExposeSharedDependencies } = context;
+    if (!isExposeSharedDependencies || emitExposedDependencies) {
         return;
     }
 
-    return new DefinePlugin(definition);
+    const instanceDependencies = {
+        launchDarkly: { version: getLaunchDarklySdkVersion() },
+    };
+
+    return new DefinePlugin({
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        EXPOSED_INSTANCE_DEPENDENCIES: JSON.stringify(instanceDependencies),
+    });
 }

package/src/webpack/configs/plugins/define-web-component-name-plugin.ts

@@ -1,13 +1,14 @@
 import { DefinePlugin } from 'webpack';
-import { BuildContext, defineWebComponentName } from '../../../core';
-import { Overrides } from '../../types';
+import { Context, Overrides } from '../types';
 
-export function defineWebComponentNamePlugin(context: BuildContext, _: Overrides) {
-    const definition = defineWebComponentName(context);
-
-    if (!definition) {
+export function defineWebComponentNamePlugin(context: Context, _: Overrides) {
+    const { isWebComponent, name } = context;
+    if (!isWebComponent) {
         return;
     }
 
-    return new DefinePlugin(definition);
+    return new DefinePlugin({
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        WEB_COMPONENT_NAME: JSON.stringify(name),
+    });
 }

package/src/webpack/configs/plugins/filter-warnings-plugin.ts

@@ -1,9 +1,8 @@
 const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
-import { BuildContext } from '../../../core';
-import { Overrides } from '../../types';
+import { Context, Overrides } from '../types';
 
-export function filterWarningsPlugin(context: BuildContext, _: Overrides) {
-    if (context.build.light) {
+export function filterWarningsPlugin({ embed }: Context, _: Overrides) {
+    if (embed) {
         return;
     }
 

package/src/webpack/configs/plugins/html-plugin.ts

@@ -1,16 +1,15 @@
 import deepmerge from 'deepmerge';
 import HtmlWebpackPlugin, { Options as HtmlWebpackPluginOptions } from 'html-webpack-plugin';
-import { BuildContext } from '../../../core';
-import { Overrides } from '../../types';
 import { splitByEntry } from '../../utils';
+import { Context, Overrides } from '../types';
 
-export function htmlPlugin(context: BuildContext, { plugins }: Overrides) {
-    const { light, headless, name } = context.build;
-    const { isWebComponent } = context.package;
-    const { emitExposedDependencies } = context.options.bundlerConfig;
+export function htmlPlugin(
+    { embed, emitExposedDependencies, headless, isWebComponent, name }: Context,
+    { plugins }: Overrides
+) {
     const { HtmlWebpackPlugin: htmlWebpackPluginOptions = {} } = plugins ?? {};
 
-    if (light || headless || emitExposedDependencies) {
+    if (embed || headless || emitExposedDependencies) {
         return;
     }
 

package/src/webpack/configs/plugins/html-tags-plugin.ts

@@ -1,19 +1,28 @@
 import HtmlWebpackTagsPlugin from 'html-webpack-tags-plugin';
-import { BuildContext, getSharedEntryPoints } from '../../../core';
-import { Overrides } from '../../types';
+import { Context, Overrides } from '../types';
+import { getBundleType } from '../utils';
+import { getExposedDependenciesEntryPoints } from './assets-manifest-plugin';
 
-export function htmlTagsPlugin(context: BuildContext, _overrides: Overrides) {
-    const { isExposeSharedDependencies } = context.package;
-    const { emitExposedDependencies } = context.options.bundlerConfig;
+export function htmlTagsPlugin(context: Context, _overrides: Overrides) {
+    const { emitExposedDependencies, isExposeSharedDependencies } = context;
     if (!isExposeSharedDependencies || emitExposedDependencies) {
         return;
     }
 
-    const { css, js } = getSharedEntryPoints(context);
-    const sharedEntryPoints = [...css, ...js];
+    const sharedEntryPoints = getSharedEntryPoints(context);
     if (!sharedEntryPoints.length) {
         return;
     }
 
     return new HtmlWebpackTagsPlugin({ tags: sharedEntryPoints, append: false });
 }
+
+function getSharedEntryPoints(context: Context) {
+    const dirname = getBundleType({ ...context, emitExposedDependencies: true });
+    if (!dirname) {
+        return [];
+    }
+
+    const { css = [], js = [] } = getExposedDependenciesEntryPoints(context) ?? {};
+    return [...css, ...js].map(name => `${dirname}/${name}`);
+}