@servicetitan/startup 31.0.0 → 31.1.0

package/src/cli/utils/__tests__/bundle.test.ts

@@ -7,6 +7,7 @@ import {
     getConfiguration,
     getFolders,
     getPackageData,
+    hasHeadlessBundle,
     loadSharedDependencies,
 } from '../../../utils';
 import { createWebpackConfig } from '../../../webpack';
@@ -27,6 +28,7 @@ jest.mock('../../../utils', () => ({
     ...jest.requireActual('../../../utils'),
     getFolders: jest.fn(),
     getPackageData: jest.fn(),
+    hasHeadlessBundle: jest.fn(),
     loadSharedDependencies: jest.fn(),
     log: { info: jest.fn() }, // suppress test output
 }));
@@ -174,6 +176,8 @@ describe('[startup] Cli Utils', () => {
             const destination = 'dist';
             const dependencies = { foo: '1.0.1' };
             const sharedDependencies = { react: 'SharedDependencies.React' };
+            let defaultCreateOverrides: Parameters<typeof createWebpackConfig>[0];
+            let defaultCreateOptions: Parameters<typeof createWebpackConfig>[1];
 
             beforeEach(() => {
                 vol.fromJSON(webComponentFS());
@@ -184,22 +188,42 @@ describe('[startup] Cli Utils', () => {
                     dependencies,
                 });
                 jest.mocked(loadSharedDependencies).mockReturnValue(sharedDependencies);
+                defaultCreateOverrides = { configuration: { mode: 'production' } };
+                defaultCreateOptions = {
+                    buildStat: options?.buildStat,
+                    name: expectPackageName(),
+                };
             });
 
             test('builds full and "embed" packages', async () => {
-                const createOptions = { buildStat: options?.buildStat, name: expectPackageName() };
-                const overrides = { configuration: { mode: 'production' } };
-
                 await subject();
 
-                expect(createWebpackConfig).toHaveBeenCalledWith(overrides, createOptions);
-                expect(createWebpackConfig).toHaveBeenCalledWith(overrides, {
-                    ...createOptions,
+                expect(createWebpackConfig).toHaveBeenCalledWith(
+                    defaultCreateOverrides,
+                    defaultCreateOptions
+                );
+                expect(createWebpackConfig).toHaveBeenCalledWith(defaultCreateOverrides, {
+                    ...defaultCreateOptions,
                     embed: true,
                 });
                 expect(compiler.run).toHaveBeenCalledTimes(2);
             });
 
+            describe('when headless file exists', () => {
+                beforeEach(() => {
+                    jest.mocked(hasHeadlessBundle).mockReturnValue(true);
+                });
+
+                test('builds headless package', async () => {
+                    await subject();
+
+                    expect(createWebpackConfig).toHaveBeenCalledWith(defaultCreateOverrides, {
+                        ...defaultCreateOptions,
+                        headless: true,
+                    });
+                });
+            });
+
             function itUsesConfig(params: { config: () => Record<string, any>; name: string }) {
                 test(`uses ${params.name}`, async () => {
                     const { configuration, plugins } = params.config();
@@ -384,13 +408,30 @@ describe('[startup] Cli Utils', () => {
                 });
                 expect(webpack).toHaveBeenNthCalledWith(1, createWebpackResult);
                 expect(webpack).toHaveBeenNthCalledWith(2, createWebpackResult);
-                expect(compiler.watch).toHaveBeenCalled();
+                expect(compiler.watch).toHaveBeenCalledTimes(1);
                 expect(WebpackDevServer).toHaveBeenCalledWith(
                     { host: 'localhost', port: 8080 },
                     compiler
                 );
             });
 
+            describe('when headless file exists', () => {
+                beforeEach(() => {
+                    jest.mocked(hasHeadlessBundle).mockReturnValue(true);
+                });
+
+                test('runs watch on headless bundle', async () => {
+                    await subject();
+
+                    expect(createWebpackConfig).toHaveBeenCalledWith(
+                        expect.any(Object),
+                        expect.objectContaining({ headless: true })
+                    );
+                    expect(webpack).toHaveBeenNthCalledWith(3, createWebpackResult);
+                    expect(compiler.watch).toHaveBeenCalledTimes(2);
+                });
+            });
+
             describe('when webpack.devServer is set to false in package.json', () => {
                 beforeEach(() => {
                     vol.fromJSON(webComponentFS({ webpack: { devServer: false } } as any));

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

@@ -6,10 +6,10 @@ import fs from 'fs';
 import { getFolders, log } from '../../../utils';
 import * as compileSassModule from '../compile-sass';
 
-import { assetExtensions, copyFiles, styleExtensions } from '../copy-files';
+import { copyFiles, styleExtensions, supportedExtensions } from '../copy-files';
 
 jest.mock('cpx2', () => ({
-    copy: jest.fn(),
+    copySync: jest.fn(),
     watch: jest.fn(),
 }));
 jest.mock('../../../utils', () => ({
@@ -27,7 +27,7 @@ jest.mock('../../../utils', () => ({
 describe(`[startup] cli utils (${copyFiles.name})`, () => {
     const source = fs.mkdtempSync('src');
     const destination = 'dist';
-    const files = `${source}/**/*.{${[...assetExtensions, ...styleExtensions].join(',')}}`;
+    const files = `${source}/**/*.{${supportedExtensions.join()}}`;
     let options: Parameters<typeof copyFiles>[0];
 
     beforeEach(() => {
@@ -72,7 +72,7 @@ describe(`[startup] cli utils (${copyFiles.name})`, () => {
     test('copies assets and styles from source to destination', async () => {
         await subject();
 
-        expect(cpx.copy).toHaveBeenCalledWith(files, destination);
+        expect(cpx.copySync).toHaveBeenCalledWith(files, destination);
     });
 
     describe.each(styleExtensions)('with %s module', extension => {
@@ -151,7 +151,7 @@ describe(`[startup] cli utils (${copyFiles.name})`, () => {
         test('does not copy files', async () => {
             await subject();
 
-            expect(cpx.copy).not.toHaveBeenCalledWith();
+            expect(cpx.copySync).not.toHaveBeenCalledWith();
         });
     });
 });

package/src/cli/utils/bundle.ts

@@ -6,7 +6,13 @@ import { getPortPromise } from 'portfinder';
 import webpack, { Configuration } from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 
-import { getPackageName, isDevServerDisabled, isWebComponent, log } from '../../utils';
+import {
+    getPackageName,
+    hasHeadlessBundle,
+    isDevServerDisabled,
+    isWebComponent,
+    log,
+} from '../../utils';
 import { Overrides, createWebpackConfig } from '../../webpack';
 
 interface Options {
@@ -43,10 +49,18 @@ export async function bundle(options: Options = {}) {
             plugins: config?.plugins,
         };
 
-        return Promise.all([
+        const bundles = [
             run(createWebpackConfig(webpackConfig, { embed: true, ...webpackOptions })),
             run(createWebpackConfig(webpackConfig, webpackOptions)),
-        ]);
+        ];
+
+        if (hasHeadlessBundle()) {
+            bundles.push(
+                run(createWebpackConfig(webpackConfig, { ...webpackOptions, headless: true }))
+            );
+        }
+
+        return Promise.all(bundles);
     }
 
     return run(config ?? createWebpackConfig({ configuration: { mode } }, webpackOptions));
@@ -66,12 +80,20 @@ export async function bundleWatch(options: Options = {}) {
             plugins: config?.plugins,
         };
 
-        return Promise.all([
+        const bundles = [
             runWatch(createWebpackConfig(webpackConfig, { embed: true, ...configOverrides })),
             isDevServerDisabled()
                 ? runWatch(createWebpackConfig(webpackConfig, configOverrides))
                 : runServe(createWebpackConfig(webpackConfig, configOverrides)),
-        ]);
+        ];
+
+        if (hasHeadlessBundle()) {
+            bundles.push(
+                runWatch(createWebpackConfig(webpackConfig, { ...configOverrides, headless: true }))
+            );
+        }
+
+        return Promise.all(bundles);
     }
 
     const webpackConfig =

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

@@ -7,8 +7,17 @@ import { getFolders, log } from '../../utils';
 import { compileLess } from './compile-less';
 import { compileSass } from './compile-sass';
 
-export const assetExtensions = ['eot', 'gif', 'jpg', 'otf', 'png', 'svg', 'ttf', 'woff', 'woff2'];
+const assetExtensions = ['eot', 'gif', 'jpg', 'otf', 'png', 'svg', 'ttf', 'woff', 'woff2'];
+const resourceExtensions = ['json'];
 export const styleExtensions = ['css', 'less', 'scss'];
+const styleTypeDefinitionExtensions = styleExtensions.map(ext => `${ext}.d.ts`);
+
+export const supportedExtensions = [
+    assetExtensions,
+    resourceExtensions,
+    styleExtensions,
+    styleTypeDefinitionExtensions,
+].flat();
 
 const styleModuleRegex = new RegExp(`\\.module\\.(${styleExtensions.join('|')})$`);
 
@@ -22,7 +31,7 @@ export async function copyFiles({ watch }: CopyFilesOptions) {
         return;
     }
 
-    const filesPattern = `${source}/**/*.{${[...assetExtensions, ...styleExtensions].join()}}`;
+    const filesPattern = `${source}/**/*.{${supportedExtensions.join()}}`;
     const creator = new DtsCreator({ camelCase: true, namedExports: true });
     const generateDefinitions = async (file: string) => {
         try {
@@ -35,13 +44,14 @@ export async function copyFiles({ watch }: CopyFilesOptions) {
     };
 
     if (!watch) {
-        log.info(`Copying ${filesPattern} -> ${destination}`);
-        cpx.copy(filesPattern, destination);
-
         const modulesPattern = `${source}/**/*.module.{${styleExtensions.join()}}`;
         log.info(`Generating types for ${modulesPattern}`);
         const modules = await glob(modulesPattern);
         await Promise.all(modules.map(generateDefinitions));
+
+        log.info(`Copying ${filesPattern} -> ${destination}`);
+        cpx.copySync(filesPattern, destination);
+
         return;
     }
 
@@ -49,7 +59,7 @@ export async function copyFiles({ watch }: CopyFilesOptions) {
     cpx.watch(filesPattern, destination, {
         initialCopy: false,
         // Optimization so cpx2 doesn't waste resources watching irrelevant files
-        ignore: ['__tests__', '__mocks__', '**/*.ts', '**/*.tsx'],
+        ignore: ['__tests__', '__mocks__', '*.*', ...supportedExtensions.map(ext => `!*.${ext}`)],
     })
         .on('copy', async ({ srcPath, dstPath }: { srcPath: string; dstPath: string }) => {
             log.info(`Copied ${srcPath} -> ${dstPath}`);

package/src/cli/utils/get-module-type.ts

@@ -1,21 +1,5 @@
-import path from 'path';
-
-import { readJson } from '../../utils';
+import { TSConfig } from './ts-config';
 
 export function getModuleType(configPath: string): string {
-    const config = readJson<{ compilerOptions?: { module: string }; extends?: string }>(configPath);
-
-    if (config.compilerOptions?.module) {
-        return config.compilerOptions.module.toLowerCase();
-    }
-
-    if (config.extends) {
-        return getModuleType(
-            /^\.?\.\//.test(config.extends)
-                ? path.join(path.dirname(configPath), config.extends)
-                : require.resolve(config.extends)
-        );
-    }
-
-    return 'commonjs';
+    return new TSConfig(configPath).getValue('compilerOptions.module', 'commonjs');
 }

package/src/cli/utils/index.ts

@@ -11,6 +11,6 @@ export * from './lerna-exec';
 export * from './pipe-stdout';
 export * from './process-tree';
 export * from './set-node-options';
-export * from './tcm';
+export * from './ts-config';
 export * from './type-check';
 export * from './watch-stdout';

package/src/cli/utils/ts-config.ts

@@ -0,0 +1,64 @@
+import fs from 'fs';
+import path from 'path';
+import { readJson } from '../../utils';
+
+export class TSConfig {
+    private readonly json: Map<string, any>;
+
+    constructor(private readonly configPath: string) {
+        this.json = new Map();
+    }
+
+    // Overload signatures
+    getValue<T>(key: string, defaultValue: T): NoInfer<T>;
+    getValue<T>(key: string, defaultValue?: T): T | undefined;
+
+    // Implementation signature
+    getValue<T>(key: string, defaultValue?: T) {
+        return this.getValueInternal<T>(this.configPath, key.split('.'), defaultValue);
+    }
+
+    private getValueInternal<T>(configPath: string, key: string[], defaultValue?: T): T {
+        const config = this.getJson<{ extends?: string }>(configPath);
+        const value = key.reduce<any>((result, el) => {
+            return result && typeof result === 'object' ? result[el] : undefined;
+        }, config);
+
+        if (value !== undefined) {
+            return value;
+        }
+
+        const extendsPath = this.getExtendsPath(configPath, config);
+        if (extendsPath) {
+            return this.getValueInternal(extendsPath, key, defaultValue);
+        }
+
+        return defaultValue as T;
+    }
+
+    private getExtendsPath(configPath: string, config: { extends?: string }) {
+        if (!config.extends) {
+            return;
+        }
+
+        if (!/^\.?\.\//.test(config.extends)) {
+            return require.resolve(config.extends);
+        }
+
+        const dir = path.dirname(configPath);
+        return [config.extends, `${config.extends}.json`]
+            .map(name => path.join(dir, name))
+            .find(fs.existsSync);
+    }
+
+    private getJson<T>(configPath: string): T {
+        let result: T = this.json.get(configPath);
+
+        if (!result) {
+            result = readJson<T>(configPath);
+            this.json.set(configPath, result);
+        }
+
+        return result;
+    }
+}

package/src/utils/__tests__/get-configuration.test.ts

@@ -10,6 +10,7 @@ import {
     getStylelintConfiguration,
     getWebComponentBranchConfigs,
     getWebComponentConfiguration,
+    hasHeadlessBundle,
     isBundle,
     isCustomStyleRules,
     isDevServerDisabled,
@@ -332,6 +333,25 @@ describe('[startup] Utils', () => {
         });
     });
 
+    describe(`${hasHeadlessBundle.name}`, () => {
+        const subject = () => hasHeadlessBundle();
+
+        itReturns(subject, false);
+
+        describe('when src/headless.ts exists', () => {
+            beforeEach(() =>
+                vol.fromJSON({
+                    'src/headless.ts': '',
+                    'tsconfig.json': JSON.stringify({
+                        compilerOptions: { rootDir: 'src', outDir: 'path' },
+                    }),
+                })
+            );
+
+            itReturns(subject, true);
+        });
+    });
+
     describe.each([
         {
             fn: isBundle,

package/src/utils/get-configuration.ts

@@ -8,6 +8,7 @@ import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-serv
 
 import { ReviewConfiguration } from '../cli/commands/review';
 import { log } from './log';
+import { getFolders } from './get-folders';
 import { readJson, readJsonSafe } from './read-json';
 
 export const allowedWebpackDevServerOptions = ['headers', 'port', 'proxy', 'static'] as const;
@@ -175,6 +176,17 @@ export function getWebComponentBranchConfigs(locationOrJson: LocationOrJson = '.
     return config?.branches;
 }
 
+export function hasHeadlessBundle() {
+    let source: string;
+    try {
+        source = getFolders().source;
+    } catch {
+        return false;
+    }
+    const headlessPath = path.join(source, 'headless.ts');
+    return fs.existsSync(headlessPath);
+}
+
 export function getSwcCompilePackageConfiguration() {
     return getConfiguration()['swc-compile-package'] ?? {};
 }

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

@@ -38,7 +38,6 @@ jest.mock('../../utils', () => ({
 jest.mock('../configs/utils/get-launchdarkly-sdk-version');
 jest.mock('../utils', () => ({
     ...jest.requireActual('../utils'),
-    featureCohort: jest.fn(),
     getCallerFile: jest.fn(),
     getModuleEntryPath: jest.fn(),
 }));

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

@@ -17,7 +17,7 @@ import {
 } from '../../utils';
 import { webComponentStyleRules } from '../__mocks__';
 import { generateMetadata } from '../configs/utils';
-import { featureCohort, getCallerFile, splitByEntry } from '../utils';
+import { getCallerFile, splitByEntry } from '../utils';
 
 import { createWebpackConfig } from '../index';
 
@@ -45,7 +45,6 @@ jest.mock('../../utils', () => ({
 jest.mock('../configs/utils/generate-metadata');
 jest.mock('../utils', () => ({
     ...jest.requireActual('../utils'),
-    featureCohort: jest.fn(),
     getCallerFile: jest.fn(),
 }));
 
@@ -322,6 +321,22 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             });
         });
 
+        describe('when headless option is set to true', () => {
+            beforeEach(() => (options.headless = true));
+
+            test(`omits design system and registers headless`, () => {
+                expect(subject().plugins).toContainEqual(
+                    new VirtualModulesPlugin({
+                        [indexPath()]: [
+                            "import { registerHeadless } from '@servicetitan/web-components';",
+                            "import { connectedCallback, disconnectedCallback } from './headless';",
+                            'registerHeadless(connectedCallback, disconnectedCallback);',
+                        ].join('\n'),
+                    })
+                );
+            });
+        });
+
         describe.each([webpackDevConfigFileName, webpackProdConfigFileName])(
             'when invoked from "%s"',
             configFileName => {
@@ -333,32 +348,6 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             }
         );
 
-        describe('when featureCohort is active', () => {
-            beforeEach(() => {
-                jest.mocked(featureCohort).mockImplementation((_: number[], fn: Function) => fn());
-            });
-
-            test('configures "cache"', () => {
-                expect(subject().cache).toEqual({
-                    type: 'filesystem',
-                    name: `${packageName}__full`,
-                    profile: true,
-                });
-            });
-
-            describe('when embed option is set to true', () => {
-                beforeEach(() => (options.embed = true));
-
-                test('changes "cache.name" suffix to "__light"', () => {
-                    expect(subject().cache).toEqual(
-                        expect.objectContaining({
-                            name: `${packageName}__light`,
-                        })
-                    );
-                });
-            });
-        });
-
         describe('when mode is production', () => {
             beforeEach(() =>
                 Object.assign((overrides.configuration ??= {}), { mode: 'production' })

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

@@ -29,7 +29,7 @@ import {
     log,
 } from '../../utils';
 import { fileRules, productionStyleRules, styleRules } from '../__mocks__';
-import { featureCohort, splitByEntry } from '../utils';
+import { splitByEntry } from '../utils';
 
 import { createWebpackConfig } from '../index';
 
@@ -67,10 +67,6 @@ jest.mock('../../utils', () => ({
     loadSharedDependencies: jest.fn(),
     log: { debug: jest.fn(), info: jest.fn(), warning: jest.fn() },
 }));
-jest.mock('../utils', () => ({
-    ...jest.requireActual('../utils'),
-    featureCohort: jest.fn(),
-}));
 
 describe(`[startup] ${createWebpackConfig.name}`, () => {
     const source = 'src';
@@ -172,9 +168,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
     });
 
     test('configures "output.path"', () => {
-        expect(subject().output!.path).toEqual(
-            expect.stringContaining(path.join(destination, 'bundle'))
-        );
+        expect(subject().output!.path).toEqual(path.join(process.cwd(), destination, 'bundle'));
     });
 
     test('configures "optimization"', () => {
@@ -471,6 +465,27 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                     );
                 });
             });
+
+            describe('headless option is true', () => {
+                beforeEach(() => setOptions({ headless: true }));
+
+                test('configures "output.path"', () => {
+                    expect(subject().output!.path).toEqual(
+                        path.join(process.cwd(), destination, 'bundle', 'headless')
+                    );
+                });
+
+                describe('when mode is "production"', () => {
+                    beforeEach(() => {
+                        overrides.configuration ??= {};
+                        Object.assign(overrides.configuration, { mode: 'production' });
+                    });
+
+                    test('omits optimization.runtimeChunk', () => {
+                        expect(subject().optimization?.runtimeChunk).toBeUndefined();
+                    });
+                });
+            });
         });
     });
 
@@ -487,40 +502,14 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                 )
             );
         });
-    });
-
-    describe('when featureCohort is active', () => {
-        beforeEach(() => {
-            jest.mocked(featureCohort).mockImplementation((_: number[], fn: Function) => fn());
-        });
-
-        test('configures "cache"', () => {
-            expect(subject().cache).toEqual({
-                type: 'filesystem',
-                name: packageName,
-                profile: true,
-            });
-        });
 
         describe('when package is web component', () => {
             beforeEach(() => jest.mocked(isWebComponent).mockReturnValue(true));
 
-            function itAppendsSuffixToPackageName(suffix: string) {
-                test(`appends "${suffix}" to package name`, () => {
-                    expect(subject().cache).toEqual(
-                        expect.objectContaining({
-                            name: `${packageName}${suffix}`,
-                        })
-                    );
-                });
-            }
-
-            itAppendsSuffixToPackageName('__full');
-
-            describe('when embed option is set to true', () => {
-                beforeEach(() => setOptions({ embed: true }));
-
-                itAppendsSuffixToPackageName('__light');
+            test('configures "output.path"', () => {
+                expect(subject().output!.path).toEqual(
+                    path.join(process.cwd(), destination, 'bundle', 'light')
+                );
             });
         });
     });

package/src/webpack/configs/index.ts

@@ -1,5 +1,4 @@
 export * from './amd-config';
-export * from './cache-config';
 export * from './dev-server-config';
 export * from './devtool-config';
 export * from './entry.config';

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

@@ -8,7 +8,7 @@ type ConfigWithCacheGroups = Config & { splitChunks: { cacheGroups: Record<strin
 type Result = Pick<Configuration, 'optimization'>;
 
 export function optimizationConfig(context: Context, _: Overrides): Result {
-    const { isProduction } = context;
+    const { headless, isProduction } = context;
 
     const optimization: ConfigWithCacheGroups = {
         chunkIds: isProduction ? 'deterministic' : 'named',
@@ -17,7 +17,7 @@ export function optimizationConfig(context: Context, _: Overrides): Result {
         splitChunks: { cacheGroups: {} },
     };
 
-    if (isProduction) {
+    if (!headless && isProduction) {
         optimization.runtimeChunk = 'single';
     }
 
@@ -58,8 +58,8 @@ function minimizeConfig(optimization: ConfigWithCacheGroups, context: Context) {
 }
 
 function sharedDependenciesConfig(optimization: ConfigWithCacheGroups, context: Context) {
-    const { isExposeSharedDependencies } = context;
-    if (!isExposeSharedDependencies) {
+    const { headless, isExposeSharedDependencies } = context;
+    if (!isExposeSharedDependencies || headless) {
         return;
     }
 
@@ -80,8 +80,8 @@ function sharedDependenciesConfig(optimization: ConfigWithCacheGroups, context:
 }
 
 function webComponentConfig(optimization: ConfigWithCacheGroups, context: Context) {
-    const { isWebComponent, isProduction } = context;
-    if (!isWebComponent) {
+    const { headless, isWebComponent, isProduction } = context;
+    if (!isWebComponent || headless) {
         return;
     }
 

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

@@ -6,12 +6,14 @@ type Config = Configuration['output'];
 type Result = Pick<Configuration, 'output'>;
 
 export function outputConfig(context: Context, _: Overrides): Result {
-    const { destination, embed, isProduction, isWebComponent, name } = context;
+    const { destination, embed, headless, isProduction, isWebComponent, name } = context;
+
+    const bundleDir = headless ? 'headless' : embed ? 'light' : 'full';
 
     const output: Config = {
         filename: '[name].bundle.js',
         path: isWebComponent
-            ? path.join(process.cwd(), `${destination}/bundle/${embed ? 'light' : 'full'}`)
+            ? path.join(process.cwd(), `${destination}/bundle/${bundleDir}`)
             : path.join(process.cwd(), `${destination}/bundle`),
     };