@servicetitan/startup 36.3.1 → 36.4.0

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/core/__tests__/get-cdn-path.test.ts

@@ -0,0 +1,27 @@
+import { getCdnPath } from '../get-cdn-path';
+import { BuildContext } from '../types';
+
+describe(`[startup] ${getCdnPath.name}`, () => {
+    let context: Partial<BuildContext>;
+
+    beforeAll(() => (process.env.CLIENT_CDN_PATH = 'foo'));
+    afterAll(() => delete process.env.CLIENT_CDN_PATH);
+
+    beforeEach(() => {
+        context = { build: { name: '', isProduction: true } };
+    });
+
+    const subject = () => getCdnPath(context as any);
+
+    test('returns process.env.CLIENT_CDN_PATH', () => {
+        expect(subject()).toEqual(process.env.CLIENT_CDN_PATH);
+    });
+
+    describe('when not production', () => {
+        beforeEach(() => (context.build!.isProduction = false));
+
+        test('returns undefined', () => {
+            expect(subject()).toBeUndefined();
+        });
+    });
+});

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

@@ -0,0 +1,64 @@
+import path from 'path';
+import { getBundleType } from '../get-bundle-type';
+import { getOutputPath } from '../get-output-path';
+import { BuildContext } from '../types';
+
+jest.mock('../get-bundle-type', () => ({
+    getBundleType: jest.fn(),
+}));
+
+describe(`[startup] ${getOutputPath.name}`, () => {
+    const destination = 'dist';
+    let context: BuildContext;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        context = {
+            build: {},
+            package: { destination },
+        } as BuildContext;
+        jest.mocked(getBundleType).mockReturnValue(undefined);
+    });
+
+    const subject = () => getOutputPath(context);
+
+    test('returns default path under cwd', () => {
+        expect(subject()).toBe(path.join(process.cwd(), destination, 'bundle'));
+    });
+
+    describe('when getBundleType returns a subdir', () => {
+        const subdir = 'full';
+
+        beforeEach(() => {
+            jest.mocked(getBundleType).mockReturnValue(subdir);
+        });
+
+        test('appends subdir to default path', () => {
+            expect(subject()).toBe(path.join(process.cwd(), destination, 'bundle', subdir));
+        });
+    });
+
+    describe('when outputBasePath is set', () => {
+        const outputBasePath = '/custom/out';
+
+        beforeEach(() => {
+            context.build.outputBasePath = outputBasePath;
+        });
+
+        test('uses outputBasePath as base', () => {
+            expect(subject()).toBe(path.normalize(outputBasePath));
+        });
+
+        describe('with a subdir from getBundleType', () => {
+            const subdir = 'shared';
+
+            beforeEach(() => {
+                jest.mocked(getBundleType).mockReturnValue(subdir);
+            });
+
+            test('appends subdir to outputBasePath', () => {
+                expect(subject()).toBe(path.join(outputBasePath, subdir));
+            });
+        });
+    });
+});

package/src/core/check-resource/__tests__/check-resource.test.ts

@@ -0,0 +1,58 @@
+import { BuildContext } from '../../types';
+import { checkResource } from '../check-resource';
+import { getPeerDependencyMeta } from '../get-peer-dependency-meta';
+import { isManagedReactDomClientDependency } from '../is-managed-react-dom-client-dependency';
+
+jest.mock('../is-managed-react-dom-client-dependency');
+jest.mock('../get-peer-dependency-meta');
+
+describe(`${checkResource.name}`, () => {
+    const importer = 'node_modules/web-components/dist';
+    let context: BuildContext;
+    let resource: string;
+    let peerDependenciesMeta: ReturnType<typeof getPeerDependencyMeta>;
+
+    beforeEach(() => {
+        jest.resetAllMocks();
+        jest.mocked(getPeerDependencyMeta).mockImplementation(() => peerDependenciesMeta);
+        peerDependenciesMeta = undefined;
+        resource = '@servicetitan/foo';
+        context = { package: { dependencies: {} } } as BuildContext;
+    });
+
+    const subject = () => checkResource(context)({ resource, importer });
+
+    function itReturns(value: boolean) {
+        test(`returns ${JSON.stringify(value)}`, () => expect(subject()).toBe(value));
+    }
+
+    itReturns(false);
+
+    describe('when resource is optional peer dependency', () => {
+        beforeEach(() => (peerDependenciesMeta = { optional: true }));
+
+        itReturns(true);
+
+        describe('when resource is package dependency', () => {
+            beforeEach(() => (context.package.dependencies[resource] = '*'));
+
+            itReturns(false);
+        });
+    });
+
+    describe('when resource is managed react-dom client dependency', () => {
+        beforeEach(() => jest.mocked(isManagedReactDomClientDependency).mockReturnValue(true));
+
+        describe('when resource is present', () => {
+            beforeEach(() => (resource = 'fs'));
+
+            itReturns(false);
+        });
+
+        describe('when resource is not present', () => {
+            beforeEach(() => (resource = 'foo'));
+
+            itReturns(true);
+        });
+    });
+});

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

@@ -8,6 +8,7 @@ describe(`[startup] ${getPackageJson.name}`, () => {
     let context: string;
 
     beforeEach(() => {
+        getPackageJson.cache.clear?.();
         context = 'node_modules/foo/dist';
         vol.fromNestedJSON({
             // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -39,7 +40,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/core/check-resource/__tests__/get-peer-dependency-meta.test.ts

@@ -0,0 +1,51 @@
+import { getPackageJson } from '../get-package-json';
+import { getPeerDependencyMeta } from '../get-peer-dependency-meta';
+
+jest.mock('../get-package-json');
+
+describe(`[startup] ${getPeerDependencyMeta.name}`, () => {
+    const meta = { optional: true };
+    let importer: string;
+    let resource: string;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        importer = 'node_modules/pkg/dist';
+        resource = '@scope/a';
+        jest.mocked(getPackageJson).mockImplementation(() => ({
+            peerDependenciesMeta: { [resource]: meta },
+        }));
+    });
+
+    const subject = () => getPeerDependencyMeta({ resource, importer });
+
+    function itReturnsUndefined() {
+        test('returns undefined', () => {
+            expect(subject()).toBeUndefined();
+        });
+    }
+
+    test('returns peerDependenciesMeta for resource', () => {
+        expect(subject()).toEqual(meta);
+    });
+
+    describe('when resource is not a package name', () => {
+        beforeEach(() => (resource = './local'));
+
+        itReturnsUndefined();
+    });
+
+    describe('when peerDependenciesMeta omits resource', () => {
+        beforeEach(() => {
+            jest.mocked(getPackageJson).mockReturnValue({ peerDependenciesMeta: {} });
+        });
+
+        itReturnsUndefined();
+    });
+
+    describe('when package.json is not found', () => {
+        beforeEach(() => jest.mocked(getPackageJson).mockReturnValue(undefined));
+
+        itReturnsUndefined();
+    });
+});

package/src/core/check-resource/__tests__/is-managed-react-dom-client-dependency.test.ts

@@ -0,0 +1,35 @@
+import { isManagedReactDomClientDependency } from '../is-managed-react-dom-client-dependency';
+
+describe(`[startup] ${isManagedReactDomClientDependency.name}`, () => {
+    const subject = (...args: Parameters<typeof isManagedReactDomClientDependency>) =>
+        isManagedReactDomClientDependency(...args);
+
+    describe.each([
+        {
+            resource: 'react-dom/client',
+            importers: [
+                '@servicetitan/web-components',
+                'uikit/packages/web-components/dist',
+                '@servicetitan/ko-bridge',
+                'uikit/packages/ko-bridge/dist',
+            ],
+        },
+    ])('with dependency "$resource"', ({ resource, importers }) => {
+        importers.forEach(importer => {
+            test(`with importer ${importer}, returns true`, () => {
+                expect(subject({ importer, resource })).toBe(true);
+            });
+        });
+    });
+
+    describe.each([
+        { resource: 'react-dom', importers: ['@servicetitan/web-components'] },
+        { resource: 'react-dom/client', importers: ['@servicetitan/foo'] },
+    ])('with dependency "$resource"', ({ resource, importers }) => {
+        importers.forEach(importer => {
+            test(`with importer ${importer}, returns false`, () => {
+                expect(subject({ importer, resource })).toBe(false);
+            });
+        });
+    });
+});

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

@@ -0,0 +1,30 @@
+import { log } from '../../utils';
+import { BuildContext } from '../types';
+import { getPeerDependencyMeta } from './get-peer-dependency-meta';
+import { isManagedReactDomClientDependency } from './is-managed-react-dom-client-dependency';
+import type { CheckerArgs } from './types';
+
+export function checkResource(context: BuildContext) {
+    return function ({ resource, importer }: CheckerArgs): boolean {
+        if (
+            !context.package.dependencies[resource] &&
+            getPeerDependencyMeta({ resource, importer })?.optional
+        ) {
+            log.debug('check-resource', `${JSON.stringify({ resource, importer })} => true`);
+            return true;
+        }
+
+        /**
+         * react-dom/client isn't an explicit dependency, so the peerDependenciesMeta
+         * path above can't catch it.
+         */
+        if (isManagedReactDomClientDependency({ resource, importer })) {
+            try {
+                require.resolve(resource);
+            } catch {
+                return true;
+            }
+        }
+        return false;
+    };
+}

package/src/core/check-resource/get-package-json.ts

@@ -0,0 +1,33 @@
+import fs from 'fs';
+import memoize from 'lodash.memoize';
+import path from 'path';
+import { log, readJson } from '../../utils';
+
+const containsExternalPackages = /[\\/](node_modules|\.yalc|ignore-plugin-test)([\\/]|$)/;
+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.
+ * ignore-plugin-test is for local integration tests.
+ *
+ * Memoized to avoid re-walking parent directories on every import resolution.
+ */
+export const getPackageJson = memoize(function getPackageJson(context: string) {
+    const fullPath = path.resolve(context);
+    if (!containsExternalPackages.test(fullPath)) {
+        return;
+    }
+
+    for (let dir = path.dirname(fullPath); dir !== path.dirname(dir); dir = path.dirname(dir)) {
+        if (isNodeModules.test(path.basename(dir))) {
+            break;
+        }
+        const packageJsonFile = path.join(dir, 'package.json');
+        if (fs.existsSync(packageJsonFile)) {
+            log.debug('get-package-json', `${context} => ${packageJsonFile}`);
+            return readJson<Record<string, any>>(packageJsonFile);
+        }
+    }
+});

package/src/core/check-resource/get-peer-dependency-meta.ts

@@ -0,0 +1,15 @@
+import { getPackageJson } from './get-package-json';
+import type { CheckerArgs } from './types';
+
+interface PeerDependencyMeta {
+    optional?: boolean;
+}
+
+export function getPeerDependencyMeta({
+    resource,
+    importer,
+}: CheckerArgs): PeerDependencyMeta | undefined {
+    return /^[@a-z]/.test(resource)
+        ? getPackageJson(importer)?.peerDependenciesMeta?.[resource]
+        : undefined;
+}

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

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

package/src/core/check-resource/is-managed-react-dom-client-dependency.ts

@@ -0,0 +1,13 @@
+import type { CheckerArgs } from './types';
+
+/**
+ * Matches both published paths (@servicetitan/ko-bridge, @servicetitan/web-components) and
+ * in-repo paths (packages/ko-bridge, packages/web-components) so the check works whether the
+ * importer is installed from npm/yalc or resolved locally during a uikit-internal build.
+ */
+export function isManagedReactDomClientDependency({ importer, resource }: CheckerArgs) {
+    return (
+        resource === 'react-dom/client' &&
+        /(@servicetitan|packages)\/(ko-bridge|web-components)/.test(importer)
+    );
+}

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

@@ -0,0 +1,4 @@
+export interface CheckerArgs {
+    resource: string;
+    importer: string;
+}

package/src/core/constants.ts

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

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

@@ -0,0 +1,61 @@
+import { getPackageManager } from '@servicetitan/install';
+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'];
+    outputBasePath?: string;
+    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(),
+            packageManager: getPackageManager(),
+        },
+        build: {
+            name: options.name,
+            isProduction: options.isProduction,
+            light: options.light,
+            headless: options.headless,
+            emitExposedDependencies: options.emitExposedDependencies,
+            outputBasePath: options.outputBasePath,
+        },
+        options: {
+            codeCoverage: options.codeCoverage ?? !!args['code-coverage'],
+            buildStat: options.buildStat,
+        },
+    };
+}

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

@@ -0,0 +1,25 @@
+import { getExposedDependencies } from '../get-exposed-dependencies';
+import { BuildContext } from '../types';
+
+export function defineExposedDependencies(context: BuildContext) {
+    const { isExposeSharedDependencies, sharedDependencies, dependencies, packageManager } =
+        context.package;
+    const { emitExposedDependencies } = context.build;
+
+    if (!isExposeSharedDependencies || emitExposedDependencies) {
+        return;
+    }
+
+    const workspacePackage = packageManager.getWorkspacePackage();
+    const exposedDependencies = getExposedDependencies(
+        sharedDependencies,
+        dependency =>
+            packageManager.getResolvedVersion({ workspacePackage, 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, 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-output-path.ts

@@ -0,0 +1,15 @@
+import path from 'path';
+import { getBundleType } from './get-bundle-type';
+import { BuildContext } from './types';
+
+export function getOutputPath(context: BuildContext) {
+    const { destination } = context.package;
+    const { outputBasePath } = context.build;
+    const subdir = getBundleType(context) ?? '';
+
+    if (outputBasePath) {
+        return path.join(outputBasePath, 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/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';