@servicetitan/startup 36.3.0 → 36.4.0

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__/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/webpack-config.ts

@@ -5,7 +5,8 @@ import merge from 'webpack-merge';
 import { getSwcOptions } from '../../cli/tasks';
 import { TSConfig } from '../../cli/utils';
 import { getTsConfigWithFallback, log } from '../../utils';
-import { Context, JS_RULE_EXCLUDE, Overrides, rulesConfig } from '../../webpack/configs';
+import { JS_RULE_EXCLUDE, rulesConfig } from '../../webpack/configs';
+import { Overrides, WebpackBuildContext } from '../../webpack/types';
 
 export function webpackConfig(overrides?: Overrides): Configuration {
     const context = getContext();
@@ -26,20 +27,32 @@ export function webpackConfig(overrides?: Overrides): Configuration {
     return merge(config, overrides?.configuration ?? {});
 }
 
-function getContext(): Context {
+function getContext(): WebpackBuildContext {
     return {
-        codeCoverage: true,
-        destination: '',
-        isProduction: false,
-        name: '',
-        packageData: {} as any,
-        packageManager: getPackageManager(),
-        sharedDependencies: {},
-        source: '',
+        package: {
+            name: '',
+            version: '',
+            destination: '',
+            source: '',
+            dependencies: {},
+            sharedDependencies: {},
+            isWebComponent: false,
+            isLegacyRoot: false,
+            isExposeSharedDependencies: false,
+            packageManager: getPackageManager(),
+        },
+        build: {
+            name: '',
+            isProduction: false,
+        },
+        options: {
+            codeCoverage: true,
+        },
+        bundlerConfig: {},
     };
 }
 
-function getRules(context: Context, overrides: Overrides) {
+function getRules(context: WebpackBuildContext, overrides: Overrides) {
     const { rules } = rulesConfig(context, overrides);
 
     return [getSwcLoaderRule(), getSwcIstanbulRule(), ...rules];

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './utils/get-packages';
+
 export * from './webpack';

package/src/storybook-config/__tests__/webpack-final.test.ts

@@ -1,6 +1,7 @@
 import type { Configuration } from 'webpack';
-import { Overrides, rulesConfig } from '../../webpack/configs';
+import { rulesConfig } from '../../webpack/configs';
 import { miniCssExtractPlugin } from '../../webpack/configs/plugins';
+import { Overrides } from '../../webpack/types';
 import { webpackFinal } from '../webpack-final';
 
 jest.mock('@servicetitan/install');
@@ -50,31 +51,6 @@ describe(`[startup/storybook-config] ${webpackFinal.name}`, () => {
         );
     });
 
-    describe('when config has optimization settings', () => {
-        beforeEach(() => {
-            config.optimization = { sideEffects: true, splitChunks: { chunks: 'all' } };
-        });
-
-        describe('when mode is development', () => {
-            beforeEach(() => (config.mode = 'development'));
-
-            test('disables sideEffects to preserve CSS imports from barrel files', () => {
-                expect(subject().optimization).toEqual({
-                    ...config.optimization,
-                    sideEffects: false,
-                });
-            });
-        });
-
-        describe('when mode is production', () => {
-            beforeEach(() => (config.mode = 'production'));
-
-            test('does not change sideEffects', () => {
-                expect(subject().optimization).toEqual(config.optimization);
-            });
-        });
-    });
-
     test('adds MiniCssExtractPlugin to config', () => {
         expect(subject().plugins).toEqual([mockMiniCssExtractPlugin]);
     });
@@ -117,7 +93,9 @@ describe(`[startup/storybook-config] ${webpackFinal.name}`, () => {
             subject();
 
             expect(rulesConfig).toHaveBeenCalledWith(
-                expect.objectContaining({ isProduction: true }),
+                expect.objectContaining({
+                    build: expect.objectContaining({ isProduction: true }),
+                }),
                 expect.anything()
             );
         });

package/src/storybook-config/webpack-final.ts

@@ -2,8 +2,9 @@ import { getPackageManager } from '@servicetitan/install';
 import { inspect } from 'node:util';
 import type { Configuration } from 'webpack';
 import { log } from '../utils';
-import { Context, Overrides, rulesConfig } from '../webpack/configs';
+import { rulesConfig } from '../webpack/configs';
 import { miniCssExtractPlugin } from '../webpack/configs/plugins';
+import { Overrides, WebpackBuildContext } from '../webpack/types';
 
 export function webpackFinal(config: Configuration, overrides: Overrides = {}): Configuration {
     const context = getContext(config);
@@ -15,10 +16,6 @@ export function webpackFinal(config: Configuration, overrides: Overrides = {}):
 
     return {
         ...config,
-        optimization: {
-            ...config.optimization,
-            ...(config.mode !== 'production' ? { sideEffects: false } : {}),
-        },
         module: {
             ...config.module,
             rules: [...transformDefaultRules(config.module?.rules), ...rules],
@@ -27,23 +24,34 @@ export function webpackFinal(config: Configuration, overrides: Overrides = {}):
     };
 }
 
-function getContext(config: Configuration): Context {
+function getContext(config: Configuration): WebpackBuildContext {
     return {
-        destination: '',
-        isProduction: config.mode === 'production',
-        name: '',
-        packageData: {} as any,
-        packageManager: getPackageManager(),
-        sharedDependencies: {},
-        source: '',
+        package: {
+            name: '',
+            version: '',
+            destination: '',
+            source: '',
+            dependencies: {},
+            sharedDependencies: {},
+            isWebComponent: false,
+            isLegacyRoot: false,
+            isExposeSharedDependencies: false,
+            packageManager: getPackageManager(),
+        },
+        build: {
+            name: '',
+            isProduction: config.mode === 'production',
+        },
+        options: {},
+        bundlerConfig: {},
     };
 }
 
-function getPlugins(context: Context, overrides: Overrides) {
+function getPlugins(context: WebpackBuildContext, overrides: Overrides) {
     return [miniCssExtractPlugin(context, overrides)].filter(plugin => !!plugin);
 }
 
-function getRules(context: Context, overrides: Overrides) {
+function getRules(context: WebpackBuildContext, overrides: Overrides) {
     const include = ['.module.css', '.module.less', '.less', '.module.scss', '.scss', '.svg'];
     const exclude = ['.css'];
 

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

@@ -7,12 +7,12 @@ import {
     getJestConfiguration,
     getReviewConfiguration,
     getStylelintConfiguration,
+    getViteConfiguration,
     getVitestConfiguration,
     getWebComponentBranchConfigs,
     getWebComponentConfiguration,
     hasHeadlessBundle,
     isBundle,
-    isCustomStyleRules,
     isDevServerDisabled,
     isExposeSharedDependencies,
     isLegacy,
@@ -225,6 +225,29 @@ describe('[startup] Utils', () => {
         });
     });
 
+    describe(getViteConfiguration.name, () => {
+        const subject = () => getViteConfiguration();
+
+        itReturns(subject, {});
+
+        describe('with "cli.vite"', () => {
+            const content = {
+                cli: {
+                    vite: {
+                        omitDefault: ['plugins.svgr'],
+                        config: { server: { port: 9000 }, build: { minify: false } },
+                    },
+                },
+            };
+
+            beforeEach(() => mockPackageJson(content));
+
+            test('returns "cli.vite"', () => {
+                expect(subject()).toEqual(content.cli.vite);
+            });
+        });
+    });
+
     describe(getVitestConfiguration.name, () => {
         const subject = () => getVitestConfiguration();
 
@@ -394,11 +417,6 @@ describe('[startup] Utils', () => {
             defaultValue: true,
             trigger: { cli: { webpack: false } },
         },
-        {
-            fn: isCustomStyleRules,
-            defaultValue: false,
-            trigger: { cli: { webpack: { 'custom-style-rules': true } } },
-        },
         {
             fn: isDevServerDisabled,
             defaultValue: false,
@@ -407,7 +425,10 @@ describe('[startup] Utils', () => {
         {
             fn: isExposeSharedDependencies,
             defaultValue: false,
-            trigger: { cli: { webpack: { 'expose-shared-dependencies': true } } },
+            trigger: [
+                { cli: { 'expose-shared-dependencies': true } },
+                { cli: { webpack: { 'expose-shared-dependencies': true } } },
+            ],
         },
         {
             fn: isLegacy,

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

@@ -1,4 +1,4 @@
-import { getPackageData, getPackageDependencyVersion } from '../get-package-data';
+import { getPackageData } from '../get-package-data';
 import { readJson } from '../read-json';
 
 jest.mock('../read-json', () => ({ readJson: jest.fn() }));
@@ -32,7 +32,7 @@ describe(`[startup] Utils`, () => {
             });
         });
 
-        describe(`when ${packageJson} contains sharedDependencies`, () => {
+        describe(`when ${packageJson} contains cli.webpack.sharedDependencies`, () => {
             const sharedDependencies = { react: 'SharedDependencies.React' };
 
             beforeEach(() => {
@@ -45,48 +45,38 @@ describe(`[startup] Utils`, () => {
                 expect(subject()).toEqual(expect.objectContaining({ sharedDependencies }));
             });
         });
-    });
-
-    describe(`${getPackageDependencyVersion.name}`, () => {
-        const dependency = 'foo';
-        let defaultVersion: string | undefined;
-
-        beforeEach(() => (defaultVersion = undefined));
 
-        const subject = () => getPackageDependencyVersion(dependency, defaultVersion);
-
-        function itReturnsUndefinedOrDefaultVersion() {
-            test('returns undefined', () => {
-                expect(subject()).toBe(undefined);
-            });
+        describe(`when ${packageJson} contains cli.sharedDependencies`, () => {
+            const sharedDependencies = { mobx: 'SharedDependencies.MobX' };
 
-            describe('with a default version', () => {
-                beforeEach(() => (defaultVersion = '1.2.3'));
-
-                test('returns default version', () => {
-                    expect(subject()).toBe(defaultVersion);
+            beforeEach(() => {
+                Object.assign(packages[packageJson], {
+                    cli: { 'shared-dependencies': sharedDependencies },
                 });
             });
-        }
 
-        itReturnsUndefinedOrDefaultVersion();
+            test('returns sharedDependencies', () => {
+                expect(subject()).toEqual(expect.objectContaining({ sharedDependencies }));
+            });
+        });
 
-        describe('when dependency exists', () => {
-            const module: Record<string, any> = {};
+        describe(`when ${packageJson} contains cli.sharedDependencies and cli.webpack.sharedDependencies`, () => {
+            const topLevel = { react: 'SharedDependencies.React' };
+            const webpack = { mobx: 'SharedDependencies.MobX' };
 
             beforeEach(() => {
-                module.version = '2.3.4';
-                jest.doMock(`${dependency}/package.json`, () => module, { virtual: true });
-            });
-
-            test('returns dependency version', () => {
-                expect(subject()).toBe(module.version);
+                Object.assign(packages[packageJson], {
+                    cli: {
+                        'shared-dependencies': topLevel,
+                        'webpack': { 'shared-dependencies': webpack },
+                    },
+                });
             });
 
-            describe('when dependency has no version', () => {
-                beforeEach(() => delete module.version);
-
-                itReturnsUndefinedOrDefaultVersion();
+            test('returns cli.sharedDependencies', () => {
+                expect(subject()).toEqual(
+                    expect.objectContaining({ sharedDependencies: topLevel })
+                );
             });
         });
     });

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

@@ -65,7 +65,7 @@ describe('[startup] Utils', () => {
                     version: '1.0.0',
                     private: true,
                     location: path.resolve('./packages/foo'),
-                    type: PackageType.Webpack,
+                    type: PackageType.Bundle,
                 },
                 {
                     name: 'bar',
@@ -167,14 +167,14 @@ describe('[startup] Utils', () => {
         });
 
         describe('with "type"', () => {
-            beforeEach(() => (options = { type: PackageType.Webpack }));
+            beforeEach(() => (options = { type: PackageType.Bundle }));
 
             test('returns only the specified packages', () => {
                 expect(subject()).toEqual([expect.objectContaining({ name: 'foo' })]);
             });
 
             describe('when "type" is an array', () => {
-                beforeEach(() => (options = { type: [PackageType.TSC, PackageType.Webpack] }));
+                beforeEach(() => (options = { type: [PackageType.TSC, PackageType.Bundle] }));
 
                 test('returns only the specified packages', () => {
                     expect(subject()).toEqual(
@@ -230,7 +230,7 @@ describe('[startup] Utils', () => {
                 itReturnsPackages();
             });
 
-            describe('with lerna.json contains packages', () => {
+            describe('when lerna.json contains packages', () => {
                 beforeEach(() => {
                     volFromJSON({
                         'lerna.json': JSON.stringify({ packages: ['packages/*'] }),

package/src/utils/__tests__/validate-shared-dependencies.test.ts

@@ -0,0 +1,55 @@
+import { fs, vol } from 'memfs';
+import { validateSharedDependencies } from '../validate-shared-dependencies';
+
+jest.mock('fs', () => fs);
+
+describe('validateSharedDependencies', () => {
+    function mockPackageJson(content: Record<string, any> = {}) {
+        vol.fromJSON({ 'package.json': JSON.stringify(content) });
+    }
+
+    afterEach(() => vol.reset());
+
+    test('passes when neither is set', () => {
+        mockPackageJson();
+        expect(() => validateSharedDependencies()).not.toThrow();
+    });
+
+    test('passes when only cli top level is set', () => {
+        mockPackageJson({ cli: { 'shared-dependencies': { defaults: '' } } });
+        expect(() => validateSharedDependencies()).not.toThrow();
+    });
+
+    test('passes when only cli.webpack is set', () => {
+        mockPackageJson({ cli: { webpack: { 'shared-dependencies': { defaults: '' } } } });
+        expect(() => validateSharedDependencies()).not.toThrow();
+    });
+
+    test('passes when both are set and identical', () => {
+        const deps = { defaults: '', lodash: 'SharedDependencies.Lodash' };
+        mockPackageJson({
+            cli: { 'shared-dependencies': deps, 'webpack': { 'shared-dependencies': deps } },
+        });
+        expect(() => validateSharedDependencies()).not.toThrow();
+    });
+
+    test('throws when shared-dependencies both exist and differ', () => {
+        mockPackageJson({
+            cli: {
+                'shared-dependencies': { defaults: '' },
+                'webpack': { 'shared-dependencies': { defaults: '', extra: 'foo' } },
+            },
+        });
+        expect(() => validateSharedDependencies()).toThrow(/both set but differ/);
+    });
+
+    test('throws when expose-shared-dependencies both exist and differ', () => {
+        mockPackageJson({
+            cli: {
+                'expose-shared-dependencies': true,
+                'webpack': { 'expose-shared-dependencies': false },
+            },
+        });
+        expect(() => validateSharedDependencies()).toThrow(/both set but differ/);
+    });
+});

package/src/utils/find-up.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import path from 'node:path';
 
 export function findUp<T>(callback: (directory: string) => T | undefined) {
     let directory = path.resolve('./');

package/src/utils/get-configuration.ts

@@ -4,6 +4,7 @@ import { ESLint } from 'eslint';
 import fs from 'fs';
 import path from 'path';
 import { LinterOptions } from 'stylelint';
+import svgr from 'vite-plugin-svgr';
 import { ViteUserConfig } from 'vitest/config';
 import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
 import { ReviewConfiguration } from '../cli/commands/review';
@@ -11,10 +12,12 @@ import { getFolders } from './get-folders';
 import { log } from './log';
 import { readJson, readJsonSafe } from './read-json';
 
-export const allowedWebpackDevServerOptions = ['headers', 'port', 'proxy', 'static'] as const;
+type VitePluginSvgrOptions = NonNullable<Parameters<typeof svgr>[0]>;
 
 type ElementType<T> = T extends readonly (infer ElementType)[] ? ElementType : never;
 
+export const allowedWebpackDevServerOptions = ['headers', 'port', 'proxy', 'static'] as const;
+
 export interface MinifyJSOptions {
     compress?: boolean;
     mangle?: boolean;
@@ -38,6 +41,7 @@ export interface WebpackConfiguration extends Omit<
     'disable-style-check'?: boolean;
     'minify'?: MinifyOptions;
     'proxy'?: WebpackDevServerConfiguration['proxy'] | string;
+    'shared-dependencies'?: Record<string, string>;
 }
 
 export interface ESLintConfiguration extends ESLint.Options {
@@ -62,6 +66,8 @@ export interface NodeConfiguration {
 export enum CommandName {
     'build' = 'build',
     'bundle-package' = 'bundle-package',
+    'bundle-vite' = 'bundle-vite',
+    'bundle-webpack' = 'bundle-webpack',
     'clean' = 'clean',
     'convert-eslint-config' = 'convert-eslint-config',
     'eslint' = 'eslint',
@@ -92,6 +98,34 @@ export type VitestConfiguration = ViteUserConfig['test'] & {
     omitDefault?: string[];
 };
 
+export interface HtmlPluginOptions {
+    title?: string;
+    favicon?: string;
+    template?: string;
+}
+
+export interface SvgrPluginOptions {
+    include?: VitePluginSvgrOptions['include'];
+    exclude?: VitePluginSvgrOptions['exclude'];
+    svgrOptions?: VitePluginSvgrOptions['svgrOptions'];
+}
+
+export interface PluginOverrides {
+    html?: HtmlPluginOptions;
+    svgr?: SvgrPluginOptions;
+}
+
+export interface ViteBundlerConfig {
+    port?: number;
+    omitDefault?: string[];
+    minify?: MinifyOptions;
+    pluginOverrides?: PluginOverrides;
+}
+
+export interface VitePackageJsonOverride extends ViteBundlerConfig {
+    config?: Omit<import('vite').UserConfig, 'plugins'>;
+}
+
 export interface WebComponentBranchConfigs {
     publishTag?: string;
     uploadSourcemaps?: boolean;
@@ -114,6 +148,9 @@ type Configuration = {
     'swc-compile-package'?: Parameters<typeof swcDir>[0];
     'test'?: JestConfiguration; // for backward-compatibility
     'testRunner'?: string;
+    'expose-shared-dependencies'?: boolean;
+    'shared-dependencies'?: Record<string, string>;
+    'vite'?: false | VitePackageJsonOverride;
     'vitest'?: VitestConfiguration;
     'web-component'?: boolean | string | WebComponentOptions;
     'webpack'?: false | WebpackConfiguration;
@@ -156,6 +193,11 @@ export function getStylelintConfiguration() {
     return getConfiguration().lint?.stylelint ?? {};
 }
 
+export function getViteConfiguration(): VitePackageJsonOverride {
+    const { vite } = getConfiguration();
+    return typeof vite === 'object' ? vite : {};
+}
+
 export function getVitestConfiguration() {
     return getConfiguration().vitest ?? {};
 }
@@ -213,11 +255,10 @@ export function getSwcCompilePackageConfiguration() {
 }
 
 export function isBundle(locationOrJson?: LocationOrJson) {
-    return getConfiguration(locationOrJson).webpack !== false;
-}
-
-export function isCustomStyleRules() {
-    return getWebpackConfiguration()['custom-style-rules'] === true;
+    return (
+        getConfiguration(locationOrJson).webpack !== false &&
+        getConfiguration(locationOrJson).vite !== false
+    );
 }
 
 export function isDevServerDisabled() {
@@ -226,7 +267,10 @@ export function isDevServerDisabled() {
 }
 
 export function isExposeSharedDependencies() {
-    return getWebpackConfiguration()['expose-shared-dependencies'] === true;
+    return (
+        (getConfiguration()['expose-shared-dependencies'] ??
+            getWebpackConfiguration()['expose-shared-dependencies']) === true
+    );
 }
 
 export function isLegacy(locationOrJson?: LocationOrJson) {