@servicetitan/startup 27.2.1 → 27.4.0-canary.0

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

@@ -6,9 +6,11 @@ import {
 } from 'child_process';
 import { log } from '../../utils';
 
+type RunCommandOptions = SpawnOptionsWithoutStdio & { quiet?: boolean };
+
 export const runCommand = (
     command: string | (string | false)[],
-    opts?: SpawnOptionsWithoutStdio
+    { quiet, ...spawnOptions }: RunCommandOptions = {}
 ): Promise<void> => {
     return new Promise((resolve, reject) => {
         const commandArray: string[] = Array.isArray(command)
@@ -28,15 +30,19 @@ export const runCommand = (
             return;
         }
 
-        log.info(`run command ${fullCommand}`);
+        if (!quiet) {
+            log.info(`run command ${fullCommand}`);
+        }
 
-        const proc = spawn(commandName, commandArray, opts);
+        const proc = spawn(commandName, commandArray, spawnOptions);
 
         proc.stdout.pipe(process.stdout);
         proc.stderr.pipe(process.stderr);
 
         proc.on('exit', function (code: any) {
-            log.info(`command finished with code ${code}`, fullCommand);
+            if (!quiet) {
+                log.info(`command finished with code ${code}`, fullCommand);
+            }
 
             if (code) {
                 reject();
@@ -47,9 +53,11 @@ export const runCommand = (
     });
 };
 
+type RunCommandOutputOptions = ExecSyncOptionsWithBufferEncoding & { quiet?: boolean };
+
 export const runCommandOutput = (
     command: string | (string | false)[],
-    options?: ExecSyncOptionsWithBufferEncoding
+    { quiet, ...execSyncOptions }: RunCommandOutputOptions = {}
 ): string => {
     const commandArray: string[] = Array.isArray(command)
         ? command
@@ -66,11 +74,15 @@ export const runCommandOutput = (
         throw new Error();
     }
 
-    log.info(`run command ${fullCommand}`);
+    if (!quiet) {
+        log.info(`run command ${fullCommand}`);
+    }
 
-    const result = execSync(fullCommand, options).toString();
+    const result = execSync(fullCommand, execSyncOptions).toString();
 
-    log.info('command finished', result);
+    if (!quiet) {
+        log.info('command finished', result);
+    }
 
     return result;
 };

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

@@ -1,15 +1,15 @@
 import cpx from 'cpx2';
-import util from 'util';
 
 import { getFolders, log } from '../../utils';
 import { styleExtensions } from '.';
 
-export async function stylesCopy() {
+export function stylesCopy() {
     const { source, destination } = getFolders();
 
     log.info('Copying style files...');
 
-    await util.promisify(cpx.copy)(`${source}/**/*.{${styleExtensions.join()}}`, destination);
+    cpx.copySync(`${source}/**/*.{${styleExtensions.join()}}`, destination);
+    return Promise.resolve();
 }
 
 export async function stylesCopyWatch() {

package/src/index.ts

@@ -1,3 +1,5 @@
 export * from './webpack';
 export * from './jest';
 export * from './utils/get-packages';
+
+export { ExposedDependency, getExposedDependencies, loadSharedDependencies } from './utils';

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

@@ -8,6 +8,7 @@ import {
     getStylelintConfiguration,
     isBundle,
     isCustomStyleRules,
+    isDevServerDisabled,
     isExposeSharedDependencies,
     isLegacy,
     isLegacyRoot,
@@ -193,6 +194,11 @@ describe('[startup] Utils', () => {
             defaultValue: false,
             trigger: { cli: { webpack: { 'custom-style-rules': true } } },
         },
+        {
+            fn: isDevServerDisabled,
+            defaultValue: false,
+            trigger: { cli: { webpack: { devServer: false } } },
+        },
         {
             fn: isExposeSharedDependencies,
             defaultValue: false,

package/src/utils/get-configuration.ts

@@ -30,7 +30,7 @@ export interface WebpackConfiguration
     'contentBase'?: boolean | string | string[] | number; // deprecated 2024-07
     'custom-style-rules'?: boolean;
     'expose-shared-dependencies'?: boolean;
-    'devServer'?: WebpackDevServerConfiguration;
+    'devServer'?: false | WebpackDevServerConfiguration;
     'disable-style-check'?: boolean;
     'minify'?: MinifyOptions;
     'proxy'?: WebpackDevServerConfiguration['proxy'] | string;
@@ -128,6 +128,11 @@ export function isCustomStyleRules() {
     return getWebpackConfiguration()['custom-style-rules'] === true;
 }
 
+export function isDevServerDisabled() {
+    const webpackConfiguration = getWebpackConfiguration();
+    return webpackConfiguration.devServer === false;
+}
+
 export function isExposeSharedDependencies() {
     return getWebpackConfiguration()['expose-shared-dependencies'] === true;
 }

package/src/utils/get-exposed-dependencies.ts

@@ -0,0 +1,19 @@
+export interface ExposedDependency {
+    version: string;
+    variable: string;
+}
+
+export type ExposedDependencies = Record<string, ExposedDependency>;
+
+export function getExposedDependencies(
+    sharedDependencies: Record<string, string>,
+    getVersion: (dependency: string) => string
+) {
+    return Object.entries(sharedDependencies).reduce(
+        (result, [dependency, variable]) => ({
+            ...result,
+            [dependency]: { version: getVersion(dependency), variable },
+        }),
+        {} as ExposedDependencies
+    );
+}

package/src/utils/get-folders.ts

@@ -1,6 +1,6 @@
 import path from 'path';
 
-import { readJson } from '.';
+import { readJson } from './read-json';
 
 /**
  * Returns folders of sources and compilation target

package/src/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './get-configuration';
 export * from './get-destination-folders';
+export * from './get-exposed-dependencies';
 export * from './get-folders';
 export * from './get-jest-config';
 export * from './get-package-data';

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

@@ -67,16 +67,19 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
     const indexCode = ({
         embed = false,
         legacyRoot = false,
-    }: { embed?: boolean; legacyRoot?: boolean } = {}) =>
+        designSystem,
+    }: { embed?: boolean; legacyRoot?: boolean; designSystem?: boolean } = {}) =>
         [
-            ...(embed ? [] : [`require('./design-system.css');`]),
+            ...(designSystem ? [`require('./design-system.css');`] : []),
             `import { register } from '@servicetitan/web-components';`,
             `import { App } from './app';`,
-            `register(App, ${embed}, { legacyRoot: ${legacyRoot}, sharedDependenciesNames: [] });`,
+            `register(App, ${embed}, { legacyRoot: ${legacyRoot}, sharedDependenciesNames: ${JSON.stringify(Object.keys(sharedDependencies))} });`,
         ].join('\n');
 
     let overrides: Parameters<typeof createWebpackConfig>[0];
     let options: NonNullable<Parameters<typeof createWebpackConfig>[1]>;
+    let dependencies: Record<string, string>;
+    let sharedDependencies: Record<string, string>;
 
     function mockPlugIn(name: string) {
         return (options: Record<string, any>): any => ({ [name]: options });
@@ -85,6 +88,10 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
     beforeEach(() => {
         overrides = { plugins: { HtmlWebpackPlugin: { favicon: 'foo' } } };
         options = { name: packageName };
+        dependencies = { '@servicetitan/design-system': '*' };
+        sharedDependencies = {
+            '@servicetitan/design-system': 'SharedDependencies.ServiceTitan.DesignSystem',
+        };
 
         jest.resetAllMocks();
         jest.mocked(MiniCssExtractPlugin).mockImplementation(mockPlugIn('MiniCssExtractPlugin'));
@@ -95,11 +102,11 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
 
         jest.mocked(getCallerFile).mockReturnValue('');
         jest.mocked(getFolders).mockReturnValue({ source, destination });
-        jest.mocked(getPackageData).mockReturnValue({
+        jest.mocked(getPackageData).mockImplementation(() => ({
             name: packageName,
-            dependencies: {},
-            sharedDependencies: {},
-        });
+            dependencies,
+            sharedDependencies,
+        }));
         jest.mocked(getPackages).mockReturnValue([]);
         jest.mocked(getTsConfig).mockReturnValue(tsConfig);
         jest.mocked(isLegacyRoot).mockReturnValue(false);
@@ -233,7 +240,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             expect(subject().plugins).toContainEqual(
                 new VirtualModulesPlugin({
                     [designSystemPath()]: designSystemCode,
-                    [indexPath()]: indexCode(),
+                    [indexPath()]: indexCode({ designSystem: true }),
                 })
             );
         });
@@ -245,7 +252,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                 expect(subject().plugins).toContainEqual(
                     new VirtualModulesPlugin({
                         [designSystemPath()]: designSystemCode,
-                        [indexPath()]: indexCode({ legacyRoot: true }),
+                        [indexPath()]: indexCode({ designSystem: true, legacyRoot: true }),
                     })
                 );
             });
@@ -262,7 +269,22 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             test('omits design system virtual module', () => {
                 expect(subject().plugins).toContainEqual(
                     new VirtualModulesPlugin({
-                        [indexPath()]: indexCode(),
+                        [indexPath()]: indexCode({ designSystem: true }),
+                    })
+                );
+            });
+        });
+
+        describe('when package does not depend on design system', () => {
+            beforeEach(() => {
+                delete dependencies['@servicetitan/design-system'];
+                delete sharedDependencies['@servicetitan/design-system'];
+            });
+
+            test('omits design system', () => {
+                expect(subject().plugins).toContainEqual(
+                    new VirtualModulesPlugin({
+                        [indexPath()]: indexCode({ designSystem: false }),
                     })
                 );
             });
@@ -271,11 +293,10 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         describe('when embed option is set to true', () => {
             beforeEach(() => (options.embed = true));
 
-            test(`changes virtual index module to omit design system and to register App`, () => {
+            test(`omits design system and registers App with embed set to true`, () => {
                 expect(subject().plugins).toContainEqual(
                     new VirtualModulesPlugin({
-                        [designSystemPath()]: designSystemCode,
-                        [indexPath()]: indexCode({ embed: true }),
+                        [indexPath()]: indexCode({ designSystem: false, embed: true }),
                     })
                 );
             });
@@ -285,6 +306,19 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                     expect.stringContaining(path.join(destination, 'bundle', 'light'))
                 );
             });
+
+            describe('when package does not share design system', () => {
+                beforeEach(() => delete sharedDependencies['@servicetitan/design-system']);
+
+                test('includes design system', () => {
+                    expect(subject().plugins).toContainEqual(
+                        new VirtualModulesPlugin({
+                            [designSystemPath()]: designSystemCode,
+                            [indexPath()]: indexCode({ designSystem: true, embed: true }),
+                        })
+                    );
+                });
+            });
         });
 
         describe.each([webpackDevConfigFileName, webpackProdConfigFileName])(

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

@@ -25,6 +25,7 @@ import {
     getTsConfig,
     getWebpackConfiguration,
     isCustomStyleRules,
+    isDevServerDisabled,
     isWebComponent,
     loadSharedDependencies,
     log,
@@ -64,6 +65,7 @@ jest.mock('../../utils', () => ({
     getTsConfig: jest.fn(),
     getWebpackConfiguration: jest.fn(),
     isCustomStyleRules: jest.fn(),
+    isDevServerDisabled: jest.fn(),
     isExposeSharedDependencies: jest.fn(),
     isWebComponent: jest.fn(),
     loadSharedDependencies: jest.fn(),
@@ -220,6 +222,14 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         expect(subject().devServer).toEqual(defaultDefServerConfig);
     });
 
+    describe('when "devServer" is disabled', () => {
+        beforeEach(() => jest.mocked(isDevServerDisabled).mockReturnValue(true));
+
+        test('omits "devServer" configuration', () => {
+            expect(subject().devServer).toBeUndefined();
+        });
+    });
+
     describe('with custom devServer options', () => {
         const options: WebpackDevServer.Configuration = {
             // allowed options

package/src/webpack/configs/dev-server-config.ts

@@ -4,9 +4,10 @@ import { Configuration } from 'webpack';
 import {
     PackageType,
     allowedWebpackDevServerOptions,
-    getConfiguration,
     getPackageName,
     getPackages,
+    getWebpackConfiguration,
+    isDevServerDisabled,
     log,
     pick,
 } from '../../utils';
@@ -23,6 +24,10 @@ export function devServerConfig(context: Context, overrides: Overrides): Result
     }
 
     const watchOptions = watchOptionsConfig();
+    if (isDevServerDisabled()) {
+        return { watchOptions };
+    }
+
     const devServer = {
         hot: false,
         port: 8080,
@@ -41,7 +46,7 @@ export function devServerConfig(context: Context, overrides: Overrides): Result
 }
 
 function getDevServerConfig() {
-    const webpack = getConfiguration().webpack || {}; // eslint-disable-line @typescript-eslint/prefer-nullish-coalescing
+    const webpack = getWebpackConfiguration();
     /* istanbul ignore next: debug only */
     log.debug('dev-server-config', () => JSON.stringify({ webpack }, null, 2));
 

package/src/webpack/configs/plugins/define-exposed-dependencies-plugin.ts

@@ -1,5 +1,5 @@
 import { DefinePlugin } from 'webpack';
-import { getPackageDependencyVersion } from '../../../utils';
+import { getExposedDependencies, getPackageDependencyVersion } from '../../../utils';
 import { Context, Overrides } from '../types';
 
 export function defineExposedDependenciesPlugin(context: Context, _: Overrides) {
@@ -8,22 +8,12 @@ export function defineExposedDependenciesPlugin(context: Context, _: Overrides)
         return;
     }
 
+    const exposedDependencies = getExposedDependencies(sharedDependencies, dependency =>
+        getPackageDependencyVersion(dependency, packageData.dependencies?.[dependency])
+    );
+
     return new DefinePlugin({
         // eslint-disable-next-line @typescript-eslint/naming-convention
-        EXPOSED_DEPENDENCIES: JSON.stringify(
-            Object.entries(sharedDependencies).reduce(
-                (result, [dependency, variable]) =>
-                    Object.assign(result, {
-                        [dependency]: {
-                            version: getPackageDependencyVersion(
-                                dependency,
-                                packageData.dependencies?.[dependency]
-                            ),
-                            variable,
-                        },
-                    }),
-                {}
-            )
-        ),
+        EXPOSED_DEPENDENCIES: JSON.stringify(exposedDependencies),
     });
 }

package/src/webpack/configs/plugins/virtual-modules-plugin.ts

@@ -15,9 +15,11 @@ export function virtualModulesPlugin(context: Context, _: Overrides) {
         [indexPath]: indexCode(context),
     };
 
-    const designSystemPath = path.join(process.cwd(), `${source}/design-system.css`);
-    if (!fs.existsSync(designSystemPath)) {
-        modules[designSystemPath] = designSystemCode();
+    if (needsToIncludeDesignSystem(context)) {
+        const designSystemPath = path.join(process.cwd(), `${source}/design-system.css`);
+        if (!fs.existsSync(designSystemPath)) {
+            modules[designSystemPath] = designSystemCode();
+        }
     }
 
     return new VirtualModulesPlugin(modules);
@@ -31,14 +33,24 @@ function designSystemCode() {
     ].join('\n');
 }
 
-function indexCode({ embed = false, isLegacyRoot, sharedDependencies }: Context) {
+function indexCode(context: Context) {
+    const { embed = false, isLegacyRoot, sharedDependencies } = context;
     const options = `{ legacyRoot: ${isLegacyRoot}, sharedDependenciesNames: ${JSON.stringify(
         Object.keys(sharedDependencies)
     )} }`;
     return [
-        ...(embed ? [] : [`require('./design-system.css');`]),
+        ...(needsToIncludeDesignSystem(context) ? [`require('./design-system.css');`] : []),
         `import { register } from '@servicetitan/web-components';`,
         `import { App } from './app';`,
         `register(App, ${embed}, ${options});`,
     ].join('\n');
 }
+
+function needsToIncludeDesignSystem({ embed, packageData, sharedDependencies }: Context) {
+    return (
+        // Depends on design system
+        !!packageData.dependencies['@servicetitan/design-system'] &&
+        // ... and is not light bundle with private copy of design system
+        !(embed && !!sharedDependencies['@servicetitan/design-system'])
+    );
+}

package/src/webpack/configs/types.ts

@@ -13,7 +13,26 @@ export interface Context extends Options {
     isProduction: boolean;
     isWebComponent: boolean;
     minify?: MinifyOptions;
+    name: string;
     packageData: ReturnType<typeof getPackageData>;
     sharedDependencies: ReturnType<typeof loadSharedDependencies>;
     source: string;
 }
+
+export interface EntryPoint {
+    css?: string[];
+    js?: string[];
+}
+
+export interface EntryPoints {
+    full?: EntryPoint;
+    light?: EntryPoint;
+}
+
+export interface Metadata {
+    name: string;
+    bundledWith: Record<string, string>;
+    sharedDependencies: Record<string, string>;
+    dependencies: Record<string, string>;
+    entrypoints: EntryPoints;
+}

package/src/webpack/configs/utils/generate-metadata.ts

@@ -1,21 +1,20 @@
 import fs from 'fs';
 import path from 'path';
 import { log, getStartupVersion, readJsonSafe } from '../../../utils';
-import { Context } from '../types';
+import { Context, Metadata } from '../types';
 
 import { getWebComponentsVersion } from './get-web-components-version';
 
 export function generateMetadata(context: Context) {
     const { destination, name, packageData, sharedDependencies } = context;
-    const outputFile = `./${destination}/metadata.json`;
 
-    if (!fs.existsSync(`./${destination}`)) {
-        fs.mkdirSync(`./${destination}`, { recursive: true });
+    if (!fs.existsSync(destination)) {
+        fs.mkdirSync(destination, { recursive: true });
     }
 
     const full = readJsonSafe(path.join(destination, 'bundle', 'full', 'entrypoints.json'));
     const light = readJsonSafe(path.join(destination, 'bundle', 'light', 'entrypoints.json'));
-    const metadata = {
+    const metadata: Metadata = {
         name,
         bundledWith: {
             '@servicetitan/startup': getStartupVersion(),
@@ -26,6 +25,7 @@ export function generateMetadata(context: Context) {
         entrypoints: { ...(full ? { full } : {}), ...(light ? { light } : {}) },
     };
 
+    const outputFile = path.join(destination, 'metadata.json');
     fs.writeFileSync(outputFile, JSON.stringify(metadata, null, 2), 'utf8');
 
     /* istanbul ignore next: debug only */

package/template/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-    "extends": ["@servicetitan/eslint-config/mono"]
-}

package/template/.gitignore

@@ -1,21 +0,0 @@
-# Mac-related stuff
-._.DS_Store/
-.DS_Store/
-*.DS_Store
-
-# Node.js
-node_modules/
-
-# yalc store
-.yalc/
-yalc.lock
-
-#SonarQube
-.scannerwork/
-
-*.css.d.ts
-*.less.d.ts
-*.scss.d.ts
-/coverage/
-dist/
-*.tsbuildinfo

package/template/.npmrc

@@ -1,3 +0,0 @@
-engine-strict=true
-legacy-peer-deps=true
-no-audit=true

package/template/.prettierrc

@@ -1,9 +0,0 @@
-{
-    "printWidth": 100,
-    "tabWidth": 4,
-    "singleQuote": true,
-    "quoteProps": "consistent",
-    "arrowParens": "avoid",
-    "endOfLine": "auto",
-    "trailingComma": "es5"
-}

package/template/.stylelintignore

@@ -1 +0,0 @@
-/coverage

package/template/.stylelintrc.json

@@ -1,3 +0,0 @@
-{
-    "extends": ["@servicetitan/stylelint-config"]
-}

package/template/.vscode/extensions.json

@@ -1,18 +0,0 @@
-{
-    // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
-    // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
-
-    // List of extensions which should be recommended for users of this workspace.
-    "recommendations": [
-        "dbaeumer.vscode-eslint",
-        "esbenp.prettier-vscode",
-        "stylelint.vscode-stylelint",
-        "editorconfig.editorconfig",
-        "yoavbls.pretty-ts-errors",
-        "streetsidesoftware.code-spell-checker",
-        "eamodio.gitlens",
-        "pomber.git-file-history"
-    ],
-    // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
-    "unwantedRecommendations": []
-}

package/template/.vscode/settings.json

@@ -1,4 +0,0 @@
-{
-    "typescript.tsdk": "node_modules/typescript/lib",
-    "editor.formatOnSave": true
-}

package/template/lerna.json

@@ -1,4 +0,0 @@
-{
-    "packages": ["packages/*"],
-    "version": "0.0.0"
-}

package/template/package.json

@@ -1,32 +0,0 @@
-{
-    "name": "root",
-    "version": "0.0.0",
-    "description": "Multi-package web application template",
-    "private": true,
-    "engines": {
-        "node": ">=18",
-        "npm": ">=10"
-    },
-    "scripts": {
-        "bootstrap": "npx --yes @servicetitan/startup install",
-        "prestart": "npm run bootstrap",
-        "start": "startup start",
-        "prebuild": "npm run bootstrap",
-        "build": "startup build",
-        "lint": "startup lint",
-        "test": "startup test"
-    },
-    "devDependencies": {
-        "@servicetitan/startup": ">=22.21.0"
-    },
-    "workspaces": [
-        "packages/*"
-    ],
-    "cli": {
-        "test": {
-            "setupFilesAfterEnv": [
-                "./setupTests.ts"
-            ]
-        }
-    }
-}

package/template/packages/application/package.json

@@ -1,35 +0,0 @@
-{
-    "name": "application",
-    "version": "0.0.0",
-    "description": "",
-    "private": true,
-    "main": "./dist/index.js",
-    "typings": "./dist/index.d.ts",
-    "scripts": {},
-    "dependencies": {
-        "@servicetitan/design-system": "^13.4.3",
-        "@servicetitan/hash-browser-router": "^24.1.0",
-        "@servicetitan/link-item": "^26.1.0",
-        "@servicetitan/log-service": "^24.1.0",
-        "@servicetitan/react-ioc": "^24.1.0",
-        "@servicetitan/web-components": "^24.1.0",
-        "axios": "^0.28.1",
-        "feature-a": "^0.0.0",
-        "feature-b": "^0.0.0",
-        "feature-c": "^0.0.0",
-        "history": "~4.10.1",
-        "mobx": "~6.10.2",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "react-router-dom": "^5.3.0"
-    },
-    "devDependencies": {
-        "@servicetitan/testing-library": "^1.2.0",
-        "@testing-library/jest-dom": "^5.17.0",
-        "@testing-library/react": "^12.1.5",
-        "@testing-library/react-hooks": "^8.0.1",
-        "@types/react": "^17.0.37",
-        "@types/react-dom": "^17.0.11",
-        "@types/react-router-dom": "^5.3.2"
-    }
-}