@servicetitan/startup 36.0.0 → 36.1.1-beta.1

package/src/cli/commands/mfe-generate-metadata.ts

@@ -1,5 +1,6 @@
 import fs from 'node:fs';
 import path from 'node:path';
+import { buildMetadata } from '../../core';
 import {
     getFolders,
     getPackageData,
@@ -9,7 +10,6 @@ import {
     log,
     logErrors,
 } from '../../utils';
-import { buildMetadata } from '../../webpack/configs/utils/build-metadata';
 import type { entry } from './registry/mfe-generate-metadata';
 import { Command } from './types';
 

package/src/cli/commands/mfe-list.ts

@@ -140,7 +140,7 @@ export class MFEList extends Command<typeof entry> {
             return [..._, ...packageNames];
         }
 
-        return getPackages({ ignore: this.args.ignore, type: PackageType.Webpack })
+        return getPackages({ ignore: this.args.ignore, type: PackageType.Bundle })
             .filter(isWebComponent)
             .map(({ name }) => name)
             .sort((a, b) => collator.compare(a, b));

package/src/cli/commands/mfe-package-publish.ts

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import { EntryPoint, EntryPoints, Metadata } from '../../core';
 import {
     getBranchesConfigs,
     getFolders,
@@ -8,7 +9,6 @@ import {
     logErrors,
     readJson,
 } from '../../utils';
-import { EntryPoint, EntryPoints, Metadata } from '../../webpack/configs';
 import {
     DRY_RUN_PREFIX,
     getDefaultBuildVersion,

package/src/cli/commands/mfe-publish.ts

@@ -17,7 +17,7 @@ type MFEPublishOptions = (typeof entry)['options'] &
 export class MFEPublish extends Command<{ options: MFEPublishOptions }> {
     @logErrors
     async execute() {
-        const packages = getPackages({ scope: this.args.scope, type: PackageType.Webpack }).filter(
+        const packages = getPackages({ scope: this.args.scope, type: PackageType.Bundle }).filter(
             ({ location }) => isWebComponent(location)
         );
 

package/src/cli/commands/registry/__tests__/command-registry.test.ts

@@ -1,6 +1,7 @@
 import { commandRegistry } from '../command-registry';
 
 jest.mock('stylelint', () => ({ lint: jest.fn() }));
+jest.mock('../../bundle-vite', () => ({ BundleVite: class {} }));
 
 describe('[startup] commandRegistry', () => {
     test.each(Object.entries(commandRegistry))(

package/src/cli/commands/registry/build.ts

@@ -9,8 +9,10 @@ export const entry = defineEntry({
         codeCoverage: { boolean: true, description: 'Instrument code for coverage analysis?' },
         config: { string: true, hidden: true, description: 'Use specified configuration' },
         ignore: { array: true, string: true, description: 'Packages to skip' },
+        preview: { boolean: true, description: 'Start preview server after build?' },
         scope: { array: true, string: true, description: 'Packages to build' },
         stat: { boolean: true, description: 'Generate bundle report?' },
         useTsc: { boolean: true, description: 'Use tsc to compile packages?' },
+        useVite: { boolean: true, description: 'Use Vite to bundle packages?' },
     },
 } satisfies CommandEntry);

package/src/cli/commands/registry/bundle-vite.ts

@@ -0,0 +1,14 @@
+import type { CommandEntry } from '../types';
+import { defineEntry } from './define-entry';
+
+export const entry = defineEntry({
+    options: {
+        codeCoverage: { boolean: true, hidden: true },
+        exposedDependencies: { boolean: true, hidden: true },
+        preview: { boolean: true, hidden: true },
+        printConfig: { boolean: true, hidden: true },
+        stat: { boolean: true, hidden: true },
+        useWatchConfig: { boolean: true, hidden: true },
+        watch: { boolean: true, hidden: true },
+    },
+} satisfies CommandEntry);

package/src/cli/commands/registry/command-registry.ts

@@ -1,7 +1,8 @@
 import { CommandName } from '../../../utils';
 import { Command, CommandEntry, Newable } from '../types';
 import { entry as build } from './build';
-import { entry as bundlePackage } from './bundle-package';
+import { entry as bundleVite } from './bundle-vite';
+import { entry as bundleWebpack } from './bundle-webpack';
 import { entry as clean } from './clean';
 import { entry as convertEslintConfig } from './convert-eslint-config';
 import { entry as eslint } from './eslint';
@@ -63,7 +64,9 @@ function makeEntry<K extends CommandName, T extends CommandEntry>(
  */
 export const commandRegistry = {
     ...makeEntry(CommandName.build, build),
-    ...makeEntry(CommandName['bundle-package'], bundlePackage),
+    ...makeEntry(CommandName['bundle-package'], bundleWebpack, { path: 'bundle-webpack' }),
+    ...makeEntry(CommandName['bundle-vite'], bundleVite),
+    ...makeEntry(CommandName['bundle-webpack'], bundleWebpack),
     ...makeEntry(CommandName.clean, clean),
     ...makeEntry(CommandName['convert-eslint-config'], convertEslintConfig),
     ...makeEntry(CommandName.eslint, eslint, { className: 'ESLintCommand' }),

package/src/cli/commands/registry/start.ts

@@ -10,5 +10,6 @@ export const entry = defineEntry({
         ignore: { array: true, string: true, description: 'Packages to skip' },
         scope: { array: true, string: true, description: 'Packages to run and watch' },
         useTsc: { boolean: true, description: 'Use tsc to compile packages?' },
+        useVite: { boolean: true, description: 'Use Vite to bundle packages?' },
     },
 } satisfies CommandEntry);

package/src/cli/commands/start.ts

@@ -19,7 +19,7 @@ enum StartProcesses {
     PreparePackageWatch,
     TypeCheck,
     BundleExposedDependencies,
-    BundlePackage,
+    Bundle,
 }
 
 export class Start extends Command<typeof entry> {
@@ -28,19 +28,21 @@ export class Start extends Command<typeof entry> {
         checkArgs(this.args, { obsolete: ['--esbuild', '--experimental-bundlers'] });
 
         const useTsc = this.args.useTsc;
+        const useVite = this.args.useVite;
+        const cmd = useVite ? 'startup bundle-vite' : 'startup bundle-package';
 
         const packages = getPackages({
             scope: this.args.scope,
             ignore: this.args.ignore,
-            type: [PackageType.TSC, PackageType.Webpack],
+            type: [PackageType.TSC, PackageType.Bundle],
         });
         if (packages.length === 0) {
             return;
         }
 
         const scope = packages.map(({ name }) => name);
-        const webpackScope = packages
-            .filter(({ type }) => type === PackageType.Webpack)
+        const bundleScope = packages
+            .filter(({ type }) => type === PackageType.Bundle)
             .map(({ name }) => name);
         const precompileScope = packages
             .filter(({ scripts }) => !!scripts?.precompile)
@@ -136,12 +138,12 @@ export class Start extends Command<typeof entry> {
         processTree.add(
             StartProcesses.BundleExposedDependencies,
             () => {
-                if (webpackScope.length === 0) {
+                if (bundleScope.length === 0) {
                     return Promise.resolve();
                 }
                 return lernaExec({
-                    'cmd': 'startup bundle-package',
-                    'scope': webpackScope,
+                    cmd,
+                    'scope': bundleScope,
                     'parallel': true,
                     'stream': true,
                     '--': ['--exposed-dependencies', '--use-watch-config'],
@@ -150,14 +152,14 @@ export class Start extends Command<typeof entry> {
             { dependsOn: [StartProcesses.Compile, StartProcesses.PreparePackage] }
         );
         processTree.add(
-            StartProcesses.BundlePackage,
+            StartProcesses.Bundle,
             () => {
-                if (webpackScope.length === 0) {
+                if (bundleScope.length === 0) {
                     return Promise.resolve();
                 }
                 return lernaExec({
-                    'cmd': 'startup bundle-package',
-                    'scope': webpackScope,
+                    cmd,
+                    'scope': bundleScope,
                     'parallel': true,
                     'stream': true,
                     '--': [

package/src/cli/index.ts

@@ -4,7 +4,8 @@ import kebabCase from 'lodash.kebabcase';
 import path from 'path';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
-import { CommandName, getStartupVersion, log } from '../utils';
+import { getStartupVersion } from '../core';
+import { CommandName, log } from '../utils';
 import { commandRegistry } from './commands/registry';
 import type { CommandOptions } from './commands/types';
 import { checkStartupLocation, setNodeOptions } from './utils';

package/src/cli/tasks/tsc-compile/tsc-compile.ts

@@ -31,7 +31,7 @@ export class TscCompile extends CliTask {
         const packages = getPackages({
             scope: this.args.scope,
             ignore: this.args.ignore,
-            type: [PackageType.TSC, PackageType.Webpack],
+            type: [PackageType.TSC, PackageType.Bundle],
         });
 
         const tsConfigs = collapsePackages(packages).map(({ location }) => getTsConfig(location));

package/src/cli/utils/copy-files.ts

@@ -7,7 +7,7 @@ import { compileLess } from './compile-less';
 import { compileSass } from './compile-sass';
 
 const assetExtensions = ['eot', 'gif', 'jpg', 'otf', 'png', 'svg', 'ttf', 'woff', 'woff2'];
-const resourceExtensions = ['json'];
+const resourceExtensions = ['html', 'json'];
 export const styleExtensions = ['css', 'less', 'scss'];
 const styleTypeDefinitionExtensions = styleExtensions.map(ext => `${ext}.d.ts`);
 

package/src/cli/utils/index.ts

@@ -1,4 +1,3 @@
-export * from './bundle';
 export * from './check-args';
 export * from './check-startup-location';
 export * from './cli-git';

package/src/{webpack/configs/plugins/ignore-plugin → core/check-resource}/__tests__/check-resource.test.ts

@@ -1,4 +1,4 @@
-import { Context } from '../../../types';
+import { BuildContext } from '../../types';
 import { checkResource } from '../check-resource';
 import { isOptionalPeerDependency } from '../is-optional-peer-dependency';
 import { isOptionalReactDomPeerDependency } from '../is-optional-react-dom-peer-dependency';
@@ -8,7 +8,7 @@ jest.mock('../is-optional-react-dom-peer-dependency');
 
 describe(`${checkResource.name}`, () => {
     const context = 'node_modules/web-components/dist';
-    let packageContext: Partial<Context>;
+    let packageContext: BuildContext;
     let resource: string;
 
     beforeEach(() => {
@@ -16,15 +16,28 @@ describe(`${checkResource.name}`, () => {
 
         resource = '@servicetitan/foo';
         packageContext = {
-            packageData: {
+            build: {
+                name: 'application',
+                isProduction: false,
+            },
+            package: {
                 name: 'application',
                 version: '1.0.0',
+                destination: 'dist',
+                source: 'src',
                 dependencies: {},
+                sharedDependencies: {},
+                isWebComponent: false,
+                isLegacyRoot: false,
+                isExposeSharedDependencies: false,
+            },
+            options: {
+                bundlerConfig: {},
             },
         };
     });
 
-    const subject = () => checkResource(packageContext as any)(resource, context);
+    const subject = () => checkResource(packageContext)(resource, context);
 
     function itReturns(value: boolean) {
         test(`returns ${value}`, () => expect(subject()).toBe(value));
@@ -38,7 +51,7 @@ describe(`${checkResource.name}`, () => {
         itReturns(true);
 
         describe('when resource is package dependency', () => {
-            beforeEach(() => (packageContext.packageData!.dependencies[resource] = '*'));
+            beforeEach(() => (packageContext.package.dependencies[resource] = '*'));
 
             itReturns(false);
         });

package/src/{webpack/configs/plugins/ignore-plugin → core/check-resource}/__tests__/get-package-json.test.ts

@@ -39,7 +39,7 @@ describe(`[startup] ${getPackageJson.name}`, () => {
 
     describe('when context is not in node_modules', () => {
         beforeEach(() => {
-            context = 'foo/dist';
+            context = '/foo/dist';
             vol.fromNestedJSON({
                 foo: { 'package.json': JSON.stringify(packageJson) },
             });

package/src/{webpack/configs/plugins/ignore-plugin → core/check-resource}/check-resource.ts

@@ -1,12 +1,12 @@
-import { log } from '../../../../utils';
-import { Context } from '../../types';
+import { log } from '../../utils';
+import { BuildContext } from '../types';
 import { isOptionalPeerDependency } from './is-optional-peer-dependency';
 import { isOptionalReactDomPeerDependency } from './is-optional-react-dom-peer-dependency';
 
-export function checkResource(packageContext: Context) {
+export function checkResource(packageContext: BuildContext) {
     return function (resource: string, context: string) {
         if (
-            !packageContext.packageData.dependencies[resource] &&
+            !packageContext.package.dependencies[resource] &&
             isOptionalPeerDependency(resource, context)
         ) {
             log.debug('check-resource', `${JSON.stringify({ resource, context })} => true`);

package/src/{webpack/configs/plugins/ignore-plugin → core/check-resource}/get-package-json.ts

@@ -1,10 +1,15 @@
 import fs from 'fs';
 import path from 'path';
-import { log, readJson } from '../../../../utils';
+import { log, readJson } from '../../utils';
 
 const containsNodeModules = /[\\/](node_modules|\.yalc)[\\/]/;
 const isNodeModules = /(node_modules|\.yalc)/;
 
+/**
+ * Find the nearest package.json for a file path by walking up the directory tree.
+ * Only searches paths inside node_modules or .yalc because the ignore plugin only
+ * needs to suppress missing optional peer dependencies from third-party packages.
+ */
 export function getPackageJson(context: string) {
     const fullPath = path.resolve(context);
     if (!containsNodeModules.test(fullPath)) {

package/src/core/check-resource/index.ts

@@ -0,0 +1 @@
+export { checkResource } from './check-resource';

package/src/core/constants.ts

@@ -0,0 +1,16 @@
+export const bundleConstants = {
+    postcss: {
+        classnameTemplate: {
+            production: '[local]__[hash:base64:5]',
+            development: '[local]',
+        },
+        localsConvention: 'camelCaseOnly',
+    },
+    less: {
+        math: 'always',
+    },
+    mode: {
+        production: 'production',
+        development: 'development',
+    },
+} as const;

package/src/core/create-build-context.ts

@@ -0,0 +1,57 @@
+import yargs, { Arguments } from 'yargs';
+import { hideBin } from 'yargs/helpers';
+import {
+    getFolders,
+    getPackageData,
+    isExposeSharedDependencies,
+    isLegacyRoot,
+    isWebComponent,
+    loadSharedDependencies,
+} from '../utils';
+import { BuildContext, BuildIdentity } from './types';
+export type { BuildContext } from './types';
+
+export interface BuildContextOptions {
+    name: string;
+    isProduction: boolean;
+    light?: boolean;
+    headless?: boolean;
+    emitExposedDependencies?: BuildIdentity['emitExposedDependencies'];
+    codeCoverage?: boolean;
+    buildStat?: boolean;
+}
+
+export function createBuildContext(options: BuildContextOptions): BuildContext {
+    const args = yargs(hideBin(process.argv)).argv as Arguments;
+    const { source, destination } = getFolders();
+    const packageData = getPackageData();
+    const sharedDependencies = loadSharedDependencies(
+        packageData.dependencies,
+        packageData.sharedDependencies
+    );
+
+    return {
+        package: {
+            name: packageData.name,
+            version: packageData.version,
+            destination,
+            source,
+            dependencies: packageData.dependencies,
+            sharedDependencies,
+            isWebComponent: isWebComponent(),
+            isLegacyRoot: isLegacyRoot(),
+            isExposeSharedDependencies: isExposeSharedDependencies(),
+        },
+        build: {
+            name: options.name,
+            isProduction: options.isProduction,
+            light: options.light,
+            headless: options.headless,
+            emitExposedDependencies: options.emitExposedDependencies,
+        },
+        options: {
+            codeCoverage: options.codeCoverage ?? !!args['code-coverage'],
+            buildStat: options.buildStat,
+        },
+    };
+}

package/src/core/defines/define-exposed-dependencies.ts

@@ -0,0 +1,21 @@
+import { getPackageDependencyVersion } from '../../utils';
+import { getExposedDependencies } from '../get-exposed-dependencies';
+import { BuildContext } from '../types';
+
+export function defineExposedDependencies(context: BuildContext) {
+    const { isExposeSharedDependencies, sharedDependencies, dependencies } = context.package;
+    const { emitExposedDependencies } = context.build;
+
+    if (!isExposeSharedDependencies || emitExposedDependencies) {
+        return;
+    }
+
+    const exposedDependencies = getExposedDependencies(sharedDependencies, dependency =>
+        getPackageDependencyVersion(dependency, dependencies?.[dependency])
+    );
+
+    return {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        EXPOSED_DEPENDENCIES: JSON.stringify(exposedDependencies),
+    };
+}

package/src/core/defines/define-exposed-instance-dependencies.ts

@@ -0,0 +1,19 @@
+import { getLaunchDarklySdkVersion } from '../get-version';
+import { BuildContext } from '../types';
+
+export function defineExposedInstanceDependencies(context: BuildContext) {
+    const { isExposeSharedDependencies } = context.package;
+    const { emitExposedDependencies } = context.build;
+    if (!isExposeSharedDependencies || emitExposedDependencies) {
+        return;
+    }
+
+    const instanceDependencies = {
+        launchDarkly: { version: getLaunchDarklySdkVersion() },
+    };
+
+    return {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        EXPOSED_INSTANCE_DEPENDENCIES: JSON.stringify(instanceDependencies),
+    };
+}

package/src/core/defines/define-web-component-name.ts

@@ -0,0 +1,15 @@
+import { BuildContext } from '../types';
+
+export function defineWebComponentName(context: BuildContext) {
+    const { isWebComponent } = context.package;
+    const { name } = context.build;
+
+    if (!isWebComponent) {
+        return;
+    }
+
+    return {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        WEB_COMPONENT_NAME: JSON.stringify(name),
+    };
+}

package/src/core/defines/index.ts

@@ -0,0 +1,3 @@
+export { defineExposedDependencies } from './define-exposed-dependencies';
+export { defineExposedInstanceDependencies } from './define-exposed-instance-dependencies';
+export { defineWebComponentName } from './define-web-component-name';

package/src/core/externals.ts

@@ -0,0 +1,22 @@
+import { BuildContext } from './types';
+
+export function getExternals(context: BuildContext): Record<string, string> | undefined {
+    if (!needsExternals(context)) {
+        return;
+    }
+
+    const { sharedDependencies, isWebComponent } = context.package;
+    const name = isWebComponent ? context.build.name : context.package.name;
+    return Object.fromEntries(
+        Object.entries(sharedDependencies).map(([dependency, variable]) => [
+            dependency,
+            `${variable}['${name}']`,
+        ])
+    );
+}
+
+function needsExternals(context: BuildContext) {
+    const { light, emitExposedDependencies } = context.build;
+    const { isExposeSharedDependencies } = context.package;
+    return !!light || (isExposeSharedDependencies && !emitExposedDependencies);
+}

package/src/core/get-build-name.ts

@@ -0,0 +1,11 @@
+import crypto from 'crypto';
+import { getPackageName } from '../utils';
+
+export function getBuildName() {
+    const packageName = getPackageName()
+        .replace(/\//g, '-')
+        .replace(/[^\w-]/g, '');
+    const hash = crypto.randomBytes(4).toString('hex');
+
+    return `${packageName}-${hash}`;
+}

package/src/core/get-bundle-type.ts

@@ -0,0 +1,19 @@
+import { BuildContext } from './types';
+
+export function getBundleType(context: BuildContext) {
+    const { light, headless, emitExposedDependencies } = context.build;
+    const { isExposeSharedDependencies, isWebComponent } = context.package;
+
+    if (isExposeSharedDependencies && emitExposedDependencies) {
+        return 'shared';
+    }
+
+    if (isWebComponent) {
+        if (headless) {
+            return 'headless';
+        }
+        return light ? 'light' : 'full';
+    }
+
+    return undefined;
+}

package/src/core/get-output-path.ts

@@ -0,0 +1,18 @@
+import path from 'path';
+import { getBundleType } from './get-bundle-type';
+import { BuildContext } from './types';
+
+export function getOutputPath(context: BuildContext) {
+    const { destination } = context.package;
+    const { emitExposedDependencies } = context.build;
+
+    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/core/get-shared-entry-points.ts

@@ -0,0 +1,37 @@
+import { readJsonSafe } from '../utils';
+import { getBundleType } from './get-bundle-type';
+import { getExposedDependenciesMetadataPath } from './metadata';
+import { BuildContext } from './types';
+
+export interface ExposedDepsMetadata {
+    entryPointsPath: string;
+}
+
+interface EntryPoints {
+    css: string[];
+    js: string[];
+}
+
+function getExposedDependenciesEntryPoints(context: BuildContext) {
+    const metadataPath = getExposedDependenciesMetadataPath(context.package.destination);
+    const metadata = readJsonSafe<ExposedDepsMetadata>(metadataPath);
+    if (metadata?.entryPointsPath) {
+        return readJsonSafe<EntryPoints>(metadata.entryPointsPath);
+    }
+}
+
+export function getSharedEntryPoints(context: BuildContext): EntryPoints {
+    const dirname = getBundleType({
+        ...context,
+        build: { ...context.build, emitExposedDependencies: true },
+    });
+    if (!dirname) {
+        return { css: [], js: [] };
+    }
+
+    const { css = [], js = [] } = getExposedDependenciesEntryPoints(context) ?? {};
+    return {
+        css: css.map(name => `${dirname}/${name}`),
+        js: js.map(name => `${dirname}/${name}`),
+    };
+}

package/src/{webpack/configs/utils → core/get-version}/get-launchdarkly-sdk-version.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import { readJson } from '../../../utils';
+import { readJson } from '../../utils';
 
 export function getLaunchDarklySdkVersion() {
     try {

package/src/core/get-version/get-startup-version.ts

@@ -0,0 +1,6 @@
+import path from 'path';
+import { readJson } from '../../utils/read-json';
+
+export function getStartupVersion() {
+    return readJson(path.join(__dirname, '../../../package.json')).version;
+}

package/src/{webpack/configs/utils → core/get-version}/get-web-components-version.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import { readJson } from '../../../utils';
+import { readJson } from '../../utils';
 
 export function getWebComponentsVersion() {
     return readJson<{ version: string }>(

package/src/core/get-version/index.ts

@@ -0,0 +1,3 @@
+export * from './get-launchdarkly-sdk-version';
+export * from './get-startup-version';
+export * from './get-web-components-version';

package/src/core/index.ts

@@ -0,0 +1,15 @@
+export * from './check-resource';
+export * from './constants';
+export * from './create-build-context';
+export * from './defines';
+export * from './externals';
+export * from './get-build-name';
+export * from './get-bundle-type';
+export * from './get-exposed-dependencies';
+export * from './get-output-path';
+export * from './get-shared-entry-points';
+export * from './get-version';
+export * from './metadata';
+export * from './stringify-config';
+export type * from './types';
+export * from './virtual-modules';