@servicetitan/startup 36.3.1 → 37.0.0

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, packageManager } = context.package;
+    const { emitExposedDependencies } = context.build;
+    if (!isExposeSharedDependencies || emitExposedDependencies) {
+        return;
+    }
+
+    const instanceDependencies = {
+        launchDarkly: { version: getLaunchDarklySdkVersion(packageManager) },
+    };
+
+    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-cdn-path.ts

@@ -0,0 +1,5 @@
+import { BuildContext } from './types';
+
+export function getCdnPath(context: BuildContext) {
+    return context.build.isProduction ? process.env.CLIENT_CDN_PATH : undefined;
+}

package/src/core/get-process-env.ts

@@ -0,0 +1,17 @@
+import { BuildContext } from './types';
+
+/*
+ * Maps each configured variable name to a `process.env.NAME` key holding its JSON-encoded
+ * build-time value. An unset variable maps to `undefined`. Returns undefined when none are
+ * configured.
+ */
+export function getProcessEnv(context: BuildContext): Record<string, string> | undefined {
+    const names = context.package.exposeProcessEnv;
+    if (!names?.length) {
+        return;
+    }
+
+    return Object.fromEntries(
+        names.map(name => [`process.env.${name}`, JSON.stringify(process.env[name]) ?? 'undefined'])
+    );
+}

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/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/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,23 @@
+export * from './bundle-report';
+export * from './check-resource';
+export * from './chunk-patterns';
+export * from './constants';
+export * from './create-build-context';
+export * from './create-extension-regexp';
+export * from './defines';
+export * from './externals';
+export * from './get-build-name';
+export * from './get-bundle-type';
+export * from './get-cdn-path';
+export * from './get-exposed-dependencies';
+export * from './get-process-env';
+export * from './get-shared-entry-points';
+export * from './get-version';
+export * from './metadata';
+export * from './moment-locales';
+export * from './resolve-output-path';
+export * from './resolve-output-root';
+export * from './sort-shared-css';
+export * from './stringify-config';
+export type * from './types';
+export * from './virtual-modules';

package/src/{webpack/configs/utils → core/metadata}/__tests__/build-metadata.test.ts

@@ -1,13 +1,17 @@
 import { fs, vol } from 'memfs';
-import { getStartupVersion } from '../../../../utils/get-startup-version';
+import {
+    getLaunchDarklySdkVersion,
+    getStartupVersion,
+    getWebComponentsVersion,
+} from '../../get-version';
 import { buildMetadata, BuildMetadataParams } from '../build-metadata';
-import { getLaunchDarklySdkVersion } from '../get-launchdarkly-sdk-version';
-import { getWebComponentsVersion } from '../get-web-components-version';
 
 jest.mock('fs', () => fs);
-jest.mock('../../../../utils/get-startup-version');
-jest.mock('../get-launchdarkly-sdk-version');
-jest.mock('../get-web-components-version');
+jest.mock('../../get-version', () => ({
+    getLaunchDarklySdkVersion: jest.fn(),
+    getStartupVersion: jest.fn(),
+    getWebComponentsVersion: jest.fn(),
+}));
 
 describe(`[startup] ${buildMetadata.name}`, () => {
     const destination = 'dist';

package/src/{webpack/configs/utils → core/metadata}/__tests__/generate-metadata.test.ts

@@ -1,8 +1,8 @@
 import { fs, vol } from 'memfs';
 
 import * as mockedFs from 'fs';
-import { createPackage } from '../../../../__mocks__';
-import { Context } from '../../types';
+import { createPackage } from '../../../__mocks__';
+import { BuildContext } from '../../types';
 import { buildMetadata } from '../build-metadata';
 import { generateMetadata } from '../generate-metadata';
 
@@ -16,7 +16,7 @@ function generatedMetadata(dest: string) {
 describe(`[startup] ${generateMetadata.name}`, () => {
     const pkg = createPackage({});
     const destination = 'dist';
-    let context: Partial<Context>;
+    let context: BuildContext;
 
     const mockMetadata = {
         name: pkg.name,
@@ -36,16 +36,28 @@ describe(`[startup] ${generateMetadata.name}`, () => {
         jest.mocked(buildMetadata).mockReturnValue(mockMetadata);
 
         context = {
-            destination,
-            name: pkg.name,
-            packageData: { name: pkg.name, version: pkg.version, dependencies: { foo: '1.0.1' } },
-            sharedDependencies: { react: 'SharedDependencies.React' },
+            build: {
+                name: pkg.name,
+                isProduction: false,
+            },
+            package: {
+                name: pkg.name,
+                version: pkg.version,
+                destination,
+                source: 'src',
+                dependencies: { foo: '1.0.1' },
+                sharedDependencies: { react: 'SharedDependencies.React' },
+                isWebComponent: false,
+                isLegacyRoot: false,
+                isExposeSharedDependencies: false,
+            },
+            options: {},
         };
     });
 
     afterEach(() => vol.reset());
 
-    const subject = () => generateMetadata(context as any);
+    const subject = () => generateMetadata(context);
 
     function itWritesMetadataToDestination(destination: string) {
         test('writes metadata to output file', () => {
@@ -60,10 +72,10 @@ describe(`[startup] ${generateMetadata.name}`, () => {
 
         expect(buildMetadata).toHaveBeenCalledWith({
             destination,
-            name: context.name,
-            version: context.packageData!.version,
-            dependencies: context.packageData!.dependencies,
-            sharedDependencies: context.sharedDependencies,
+            name: context.build.name,
+            version: context.package.version,
+            dependencies: context.package.dependencies,
+            sharedDependencies: context.package.sharedDependencies,
         });
     });
 
@@ -72,7 +84,7 @@ describe(`[startup] ${generateMetadata.name}`, () => {
     describe('when destination directory does not exist', () => {
         const nestedDestination = 'nested/path/dist';
 
-        beforeEach(() => (context.destination = nestedDestination));
+        beforeEach(() => (context.package.destination = nestedDestination));
 
         test('creates destination directory', () => {
             subject();

package/src/{webpack/configs/utils → core/metadata}/build-metadata.ts

@@ -1,9 +1,12 @@
 import type { PackageManager } from '@servicetitan/install';
 import path from 'path';
-import { getStartupVersion, readJsonSafe } from '../../../utils';
+import { readJsonSafe } from '../../utils';
+import {
+    getLaunchDarklySdkVersion,
+    getStartupVersion,
+    getWebComponentsVersion,
+} from '../get-version';
 import { EntryPoints, Metadata } from '../types';
-import { getLaunchDarklySdkVersion } from './get-launchdarkly-sdk-version';
-import { getWebComponentsVersion } from './get-web-components-version';
 
 export interface BuildMetadataParams {
     destination: string;

package/src/core/metadata/generate-exposed-dependencies-metadata.ts

@@ -0,0 +1,20 @@
+import fs from 'fs';
+import path from 'path';
+import { ExposedDepsMetadata } from '../get-shared-entry-points';
+
+export function getExposedDependenciesMetadataPath(destination: string) {
+    return path.join(destination, 'exposed-dependencies-metadata.json');
+}
+
+export function generateExposedDependenciesMetadata(
+    destination: string,
+    getOutputPath: () => string
+) {
+    if (!fs.existsSync(destination)) {
+        fs.mkdirSync(destination, { recursive: true });
+    }
+
+    const metadataPath = getExposedDependenciesMetadataPath(destination);
+    const metadata: ExposedDepsMetadata = { entryPointsPath: getOutputPath() };
+    fs.writeFileSync(metadataPath, JSON.stringify(metadata, null, 2), 'utf-8');
+}

package/src/{webpack/configs/utils → core/metadata}/generate-metadata.ts

@@ -1,11 +1,13 @@
 import fs from 'fs';
 import path from 'path';
-import { log } from '../../../utils';
-import { Context } from '../types';
+import { log } from '../../utils';
+import { BuildContext } from '../types';
 import { buildMetadata } from './build-metadata';
 
-export function generateMetadata(context: Context) {
-    const { destination, name, packageData, packageManager, sharedDependencies } = context;
+export function generateMetadata(context: BuildContext) {
+    const { destination, sharedDependencies, version, dependencies, packageManager } =
+        context.package;
+    const { name } = context.build;
 
     if (!fs.existsSync(destination)) {
         fs.mkdirSync(destination, { recursive: true });
@@ -14,8 +16,8 @@ export function generateMetadata(context: Context) {
     const metadata = buildMetadata({
         destination,
         name,
-        version: packageData.version,
-        dependencies: packageData.dependencies,
+        version,
+        dependencies,
         sharedDependencies,
         packageManager,
     });

package/src/core/metadata/index.ts

@@ -0,0 +1,3 @@
+export * from './build-metadata';
+export * from './generate-exposed-dependencies-metadata';
+export * from './generate-metadata';

package/src/core/moment-locales.ts

@@ -0,0 +1,6 @@
+/*
+ * The moment locales the build supports. Under webpack, MomentLocalesPlugin narrows moment's
+ * built-in locales down to this set; under Vite, Rolldown bundles no locales, so the Vite plugin
+ * statically imports these to add them back. Shared so both bundlers agree on the set.
+ */
+export const MOMENT_LOCALES = ['en-au', 'en-ca', 'en-gb'];

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

@@ -0,0 +1,10 @@
+import path from 'path';
+import { getBundleType } from './get-bundle-type';
+import { resolveOutputRoot } from './resolve-output-root';
+import { BuildContext } from './types';
+
+export function resolveOutputPath(context: BuildContext, outputPath: string | undefined): string {
+    const root = resolveOutputRoot(context, outputPath);
+    const subdir = getBundleType(context);
+    return subdir ? path.join(root, subdir) : root;
+}

package/src/core/resolve-output-root.ts

@@ -0,0 +1,8 @@
+import path from 'path';
+import { BuildContext } from './types';
+
+export function resolveOutputRoot(context: BuildContext, outputPath: string | undefined): string {
+    const { destination, isWebComponent } = context.package;
+    const defaultOutputPath = path.join(process.cwd(), destination, 'bundle');
+    return isWebComponent ? defaultOutputPath : (outputPath ?? defaultOutputPath);
+}

package/src/core/sort-shared-css.ts

@@ -0,0 +1,7 @@
+export function sortSharedCss(cssFiles: string[]): string[] {
+    // Put design-system CSS first to give anvil2 CSS higher precedence
+    const offset = cssFiles.findIndex(name => name.startsWith('design-system'));
+    return offset > 0
+        ? [cssFiles[offset], ...cssFiles.filter((_, index) => index !== offset)]
+        : cssFiles;
+}

package/src/core/types.ts

@@ -0,0 +1,54 @@
+import { getPackageManager } from '@servicetitan/install';
+
+export type BuildContext<T = unknown> = {
+    package: PackageContext;
+    build: BuildIdentity;
+    options: BuildOptions;
+} & (unknown extends T ? {} : { bundlerConfig: T });
+
+export interface PackageContext {
+    name: string;
+    version: string;
+    destination: string;
+    source: string;
+    dependencies: Record<string, string>;
+    sharedDependencies: Record<string, string>;
+    isWebComponent: boolean;
+    isLegacyRoot: boolean;
+    isExposeSharedDependencies: boolean;
+    exposeProcessEnv?: string[];
+    packageManager: ReturnType<typeof getPackageManager>;
+}
+
+export interface BuildIdentity {
+    name: string;
+    isProduction: boolean;
+    light?: boolean;
+    headless?: boolean;
+    emitExposedDependencies?: boolean;
+}
+
+export interface BuildOptions {
+    codeCoverage?: boolean;
+    buildStat?: boolean;
+}
+
+export interface EntryPoint {
+    css?: string[];
+    js?: string[];
+}
+
+export interface EntryPoints {
+    full?: EntryPoint;
+    light?: EntryPoint;
+    headless?: EntryPoint;
+}
+
+export interface Metadata {
+    name: string;
+    version: string;
+    bundledWith: Record<string, string | undefined>;
+    sharedDependencies: Record<string, string>;
+    dependencies: Record<string, string>;
+    entrypoints: EntryPoints;
+}

package/src/core/virtual-modules.ts

@@ -0,0 +1,74 @@
+import fs from 'fs';
+import path from 'path';
+import { BuildContext } from './types';
+
+export function virtualModules(context: BuildContext) {
+    const modules: { index?: string; designSystem?: string } = {};
+
+    if (context.package.isWebComponent) {
+        modules.index = indexCode(context);
+    }
+
+    if (needsToIncludeDesignSystem(context)) {
+        const designSystemPath = getDesignSystemPath(context);
+        if (!fs.existsSync(designSystemPath)) {
+            modules.designSystem = designSystemCode();
+        }
+    }
+
+    return modules;
+}
+
+export function getDesignSystemPath(context: BuildContext) {
+    return path.join(process.cwd(), context.package.destination, 'design-system.css');
+}
+
+function designSystemCode() {
+    return [
+        `@import '@servicetitan/tokens/core/tokens.css';`,
+        `@import '@servicetitan/anvil-fonts/dist/css/anvil-fonts.css';`,
+        `@import '@servicetitan/design-system/dist/system.min.css';`,
+    ].join('\n');
+}
+
+function indexCode(context: BuildContext) {
+    const { light = false, headless } = context.build;
+    const { isLegacyRoot, sharedDependencies } = context.package;
+    if (headless) {
+        return headlessIndex();
+    }
+
+    const options = `{ legacyRoot: ${isLegacyRoot}, sharedDependenciesNames: ${JSON.stringify(
+        Object.keys(sharedDependencies)
+    )} }`;
+
+    return [
+        ...(needsToIncludeDesignSystem(context) ? [`import './design-system.css';`] : []),
+        `import { register } from '@servicetitan/web-components';`,
+        `import { App } from './app';`,
+        `register(App, ${light}, ${options});`,
+    ].join('\n');
+}
+
+export function needsToIncludeDesignSystem(context: BuildContext) {
+    const { light, headless, emitExposedDependencies } = context.build;
+    const { isWebComponent, dependencies, sharedDependencies } = context.package;
+
+    return (
+        (!!emitExposedDependencies && !!sharedDependencies['@servicetitan/design-system']) ||
+        (isWebComponent &&
+            !headless &&
+            // Depends on design system
+            !!dependencies['@servicetitan/design-system'] &&
+            // ... and is not light bundle with private copy of design system
+            !(light && !!sharedDependencies['@servicetitan/design-system']))
+    );
+}
+
+function headlessIndex() {
+    return [
+        "import { registerHeadless } from '@servicetitan/web-components/register-headless';",
+        "import { connectedCallback, disconnectedCallback } from './headless';",
+        'registerHeadless(connectedCallback, disconnectedCallback);',
+    ].join('\n');
+}

package/src/cypress/config/__tests__/vite-config.test.ts

@@ -0,0 +1,72 @@
+import type { InlineConfig } from 'vite';
+import { createCssConfig } from '../../../vite/config/create-css-config';
+import { istanbulPlugin, svgrPlugin } from '../../../vite/plugins';
+import { viteConfig } from '../vite-config';
+
+jest.mock('vite', () => ({
+    mergeConfig: (base: object, overrides: object) => ({ ...base, ...overrides }),
+}));
+jest.mock('../../../vite/config/create-css-config');
+jest.mock('../../../vite/plugins');
+
+describe(`[startup/cypress-config] ${viteConfig.name}`, () => {
+    const cssConfig: any = { modules: { localsConvention: 'camelCaseOnly' } };
+    const svgr: any = { name: 'svgr' };
+    const istanbul: any = { name: 'istanbul' };
+
+    let overrides: InlineConfig | undefined;
+
+    const subject = () => viteConfig(overrides);
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        jest.mocked(createCssConfig).mockReturnValue(cssConfig);
+        jest.mocked(svgrPlugin).mockReturnValue(svgr);
+        jest.mocked(istanbulPlugin).mockReturnValue(istanbul);
+        overrides = undefined;
+    });
+
+    test('builds the CSS config for development', () => {
+        subject();
+
+        expect(createCssConfig).toHaveBeenCalledWith(false);
+    });
+
+    test('wires the shared CSS config', () => {
+        expect(subject().css).toBe(cssConfig);
+    });
+
+    test('includes the SVG plugin', () => {
+        expect(subject().plugins).toContain(svgr);
+    });
+
+    test('enables code coverage', () => {
+        subject();
+
+        expect(istanbulPlugin).toHaveBeenCalledWith(
+            expect.objectContaining({ options: { codeCoverage: true } })
+        );
+    });
+
+    test('includes the coverage plugin', () => {
+        expect(subject().plugins).toContain(istanbul);
+    });
+
+    test('dedupes React', () => {
+        expect(subject().resolve?.dedupe).toEqual(['react', 'react-dom']);
+    });
+
+    test('pre-bundles React', () => {
+        expect(subject().optimizeDeps?.include).toContain('react/jsx-runtime');
+    });
+
+    describe('with overrides', () => {
+        beforeEach(() => {
+            overrides = { clearScreen: false };
+        });
+
+        test('merges overrides into the config', () => {
+            expect(subject().clearScreen).toBe(false);
+        });
+    });
+});

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

@@ -2,7 +2,8 @@ import { fs, vol } from 'memfs';
 import { getSwcOptions } from '../../../cli/tasks';
 import { TSConfig } from '../../../cli/utils';
 import { getBaseTsConfig } from '../../../utils';
-import { JS_RULE_EXCLUDE, Overrides, rulesConfig } from '../../../webpack/configs';
+import { JS_RULE_EXCLUDE, rulesConfig } from '../../../webpack/configs';
+import { Overrides } from '../../../webpack/types';
 import { webpackConfig } from '../webpack-config';
 
 jest.mock('@servicetitan/install');
@@ -41,7 +42,7 @@ describe(`[startup/cypress-config] ${webpackConfig.name}`, () => {
         subject();
 
         expect(rulesConfig).toHaveBeenCalledWith(
-            expect.objectContaining({ isProduction: false }),
+            expect.objectContaining({ build: expect.objectContaining({ isProduction: false }) }),
             expect.anything()
         );
     });
@@ -50,7 +51,7 @@ describe(`[startup/cypress-config] ${webpackConfig.name}`, () => {
         subject();
 
         expect(rulesConfig).toHaveBeenCalledWith(
-            expect.objectContaining({ codeCoverage: true }),
+            expect.objectContaining({ options: { codeCoverage: true } }),
             expect.anything()
         );
     });

package/src/cypress/config/index.ts

@@ -1 +1,2 @@
+export * from './vite-config';
 export * from './webpack-config';