@servicetitan/startup 23.0.0 → 23.2.0

package/src/utils/get-configuration.ts

@@ -57,11 +57,15 @@ export enum CommandName {
 }
 /* eslint-enable @typescript-eslint/naming-convention */
 
+interface WebComponentOptions {
+    legacyRoot: boolean;
+}
+
 type Configuration = {
     'legacy'?: boolean;
     'lint'?: { eslint: ESLintConfiguration; stylelint: StylelintConfiguration };
     'test'?: JestConfiguration;
-    'web-component'?: boolean;
+    'web-component'?: boolean | WebComponentOptions;
     'webpack'?: false | WebpackConfiguration;
 } & {
     [key in CommandName]: NodeConfiguration;
@@ -75,38 +79,6 @@ export function getConfigurationSafe(location = './'): Configuration {
     return readJsonSafe(path.join(location, 'package.json'))?.cli ?? {};
 }
 
-export function isBundle(location?: string) {
-    return getConfiguration(location).webpack !== false;
-}
-
-export function isCustomStyleRules() {
-    const configuration = getConfiguration();
-
-    if (typeof configuration.webpack !== 'object') {
-        return false;
-    }
-
-    return configuration.webpack['custom-style-rules'] === true;
-}
-
-export function isExposeSharedDependencies() {
-    const configuration = getConfiguration();
-
-    if (typeof configuration.webpack !== 'object') {
-        return false;
-    }
-
-    return configuration.webpack['expose-shared-dependencies'] === true;
-}
-
-function pick<T, K extends keyof T>(target: T, keys: readonly K[]) {
-    return Object.fromEntries(
-        keys
-            .filter(key => Object.prototype.hasOwnProperty.call(target, key))
-            .map(key => [key, target[key]])
-    ) as Pick<T, K>;
-}
-
 export function getDevServerConfiguration() {
     const configuration = getConfiguration();
 
@@ -130,24 +102,49 @@ export function getDevServerConfiguration() {
     >;
 }
 
-export function isWebComponent() {
-    return getConfiguration()['web-component'] === true;
-}
-
-export function isLegacy(location?: string) {
-    return getConfiguration(location).legacy === true;
-}
-
 export function getESLintConfiguration() {
     return getConfiguration().lint?.eslint ?? {};
 }
 
+export function getJestConfiguration() {
+    return getConfiguration().test ?? {};
+}
+
 export function getStylelintConfiguration() {
     return getConfiguration().lint?.stylelint ?? {};
 }
 
-export function getJestConfiguration() {
-    return getConfiguration().test ?? {};
+export function isBundle(location?: string) {
+    return getConfiguration(location).webpack !== false;
+}
+
+export function isCustomStyleRules() {
+    const configuration = getConfiguration();
+
+    if (typeof configuration.webpack !== 'object') {
+        return false;
+    }
+
+    return configuration.webpack['custom-style-rules'] === true;
+}
+
+export function isExposeSharedDependencies() {
+    const configuration = getConfiguration();
+
+    if (typeof configuration.webpack !== 'object') {
+        return false;
+    }
+
+    return configuration.webpack['expose-shared-dependencies'] === true;
+}
+
+export function isLegacy(location?: string) {
+    return getConfiguration(location).legacy === true;
+}
+
+export function isLegacyRoot() {
+    const config = getConfiguration()['web-component'];
+    return typeof config === 'object' && config.legacyRoot === true;
 }
 
 export function isStyleCheckDisabled() {
@@ -159,3 +156,17 @@ export function isStyleCheckDisabled() {
 
     return configuration.webpack?.['disable-style-check'] === true;
 }
+
+export function isWebComponent() {
+    const config = getConfiguration()['web-component'];
+    return config === true || typeof config === 'object';
+}
+
+function pick<T extends object, K extends keyof T>(target: T, keys: readonly K[]) {
+    return keys.reduce((result, key) => {
+        if (Object.hasOwn(target, key)) {
+            result[key] = target[key];
+        }
+        return result;
+    }, {} as Pick<T, K>);
+}

package/src/utils/get-jest-config.ts

@@ -28,7 +28,7 @@ const getJestConfigBase = ({
         verbose: true,
         testEnvironment: 'jsdom',
         testRunner: 'jest-circus/runner',
-        transformIgnorePatterns: ['node_modules/(?!(@servicetitan|@react-hook|nanoid)/)'],
+        transformIgnorePatterns: ['node_modules/(?!(@servicetitan|@react-hook|nanoid|axios)/)'],
         modulePathIgnorePatterns: ['<rootDir>/.*/__mocks__'],
         transform,
         moduleNameMapper,

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

@@ -7,7 +7,14 @@ import WebpackAssetsManifest from 'webpack-assets-manifest';
 import VirtualModulesPlugin from 'webpack-virtual-modules';
 
 import { webpackDevConfigFileName, webpackProdConfigFileName } from '../../cli/utils';
-import { getFolders, getPackageData, getPackages, getTsConfig, isWebComponent } from '../../utils';
+import {
+    getFolders,
+    getPackageData,
+    getPackages,
+    getTsConfig,
+    isLegacyRoot,
+    isWebComponent,
+} from '../../utils';
 import { webComponentStyleRules } from '../__mocks__';
 import { generateMetadata } from '../configs/utils';
 import { featureCohort, getCallerFile, splitByEntry } from '../utils';
@@ -33,6 +40,7 @@ jest.mock('../../utils', () => ({
     getPackageData: jest.fn(),
     getPackages: jest.fn(),
     getTsConfig: jest.fn(),
+    isLegacyRoot: jest.fn(),
     isWebComponent: jest.fn(),
 }));
 jest.mock('../configs/utils/generate-metadata');
@@ -56,12 +64,13 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
     ].join('\n');
 
     const indexPath = () => path.join(process.cwd(), `${source}/index.ts`);
-    const indexCode = [
-        `import { register } from '@servicetitan/web-components';`,
-        `import { App } from './app';`,
-        `require('./design-system.css');`,
-        `register(App, false);`,
-    ].join('\n');
+    const indexCode = ({ legacyRoot = false }: { legacyRoot?: boolean } = {}) =>
+        [
+            `import { register } from '@servicetitan/web-components';`,
+            `import { App } from './app';`,
+            `require('./design-system.css');`,
+            `register(App, false, { legacyRoot: ${legacyRoot} });`,
+        ].join('\n');
 
     let overrides: Parameters<typeof createWebpackConfig>[0];
     let options: NonNullable<Parameters<typeof createWebpackConfig>[1]>;
@@ -86,6 +95,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         jest.mocked(getPackageData).mockReturnValue({ dependencies: {}, sharedDependencies: {} });
         jest.mocked(getPackages).mockReturnValue([]);
         jest.mocked(getTsConfig).mockReturnValue(tsConfig);
+        jest.mocked(isLegacyRoot).mockReturnValue(false);
 
         vol.fromJSON({ [packageJson]: JSON.stringify({ name: packageName }) });
     });
@@ -216,11 +226,24 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             expect(subject().plugins).toContainEqual(
                 new VirtualModulesPlugin({
                     [designSystemPath()]: designSystemCode,
-                    [indexPath()]: indexCode,
+                    [indexPath()]: indexCode(),
                 })
             );
         });
 
+        describe('with {legacyRoot: true}', () => {
+            beforeEach(() => jest.mocked(isLegacyRoot).mockReturnValue(true));
+
+            test('registers component with {legacyRoot: true}', () => {
+                expect(subject().plugins).toContainEqual(
+                    new VirtualModulesPlugin({
+                        [designSystemPath()]: designSystemCode,
+                        [indexPath()]: indexCode({ legacyRoot: true }),
+                    })
+                );
+            });
+        });
+
         describe('when design-system.css exists', () => {
             beforeEach(() => {
                 vol.fromJSON({
@@ -232,7 +255,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             test('omits design system virtual module', () => {
                 expect(subject().plugins).toContainEqual(
                     new VirtualModulesPlugin({
-                        [indexPath()]: indexCode,
+                        [indexPath()]: indexCode(),
                     })
                 );
             });
@@ -245,9 +268,9 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
                 expect(subject().plugins).toContainEqual(
                     new VirtualModulesPlugin({
                         [designSystemPath()]: designSystemCode,
-                        [indexPath()]: indexCode
+                        [indexPath()]: indexCode()
                             .replace("require('./design-system.css');\n", '')
-                            .replace('register(App, false)', 'register(App, true)'),
+                            .replace('register(App, false', 'register(App, true'),
                     })
                 );
             });

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

@@ -5,7 +5,7 @@ import { fs, vol } from 'memfs';
 import MomentLocalesPlugin from 'moment-locales-webpack-plugin';
 import os from 'os';
 import path from 'path';
-import { ProvidePlugin } from 'webpack';
+import { IgnorePlugin, ProvidePlugin } from 'webpack';
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
 import { argv } from 'yargs';
@@ -37,6 +37,7 @@ jest.mock('mini-css-extract-plugin', () =>
 jest.mock('moment-locales-webpack-plugin', () => jest.fn());
 jest.mock('webpack', () => ({
     ...jest.requireActual('webpack'),
+    IgnorePlugin: jest.fn(),
     ProvidePlugin: jest.fn(),
 }));
 jest.mock('webpack-assets-manifest', () => jest.fn());
@@ -86,7 +87,8 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
     }
 
     function setOptions(props: typeof options) {
-        Object.assign((options ??= {}), props);
+        options ??= {};
+        Object.assign(options, props);
     }
 
     beforeEach(() => {
@@ -108,13 +110,14 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             mockPlugIn('ForkTsCheckerWebpackPlugin')
         );
         jest.mocked(HtmlWebpackPlugin).mockImplementation(mockPlugIn('HtmlWebpackPlugin'));
+        jest.mocked(IgnorePlugin).mockImplementation(mockPlugIn('IgnorePlugin'));
         jest.mocked(MomentLocalesPlugin).mockImplementation(mockPlugIn('MomentLocalesPlugin'));
         jest.mocked(ProvidePlugin).mockImplementation(mockPlugIn('ProvidePlugin'));
 
-        jest.mocked(getFolders).mockImplementation((location?: string) => ({
-            source: `${location ? `${location.replace(/\W/g, '')}-` : ''}${source}`,
-            destination,
-        }));
+        jest.mocked(getFolders).mockImplementation((location?: string) => {
+            const prefix = location ? `${location.replace(/\W/g, '')}-` : '';
+            return { source: `${prefix}${source}`, destination };
+        });
         jest.mocked(getPackageData).mockReturnValue({ dependencies, sharedDependencies });
         jest.mocked(getPackageDependencyVersion).mockImplementation(
             (_, defaultVersion) => defaultVersion
@@ -231,7 +234,19 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         });
     });
 
-    function itConfiguresTsLoader() {
+    function itConfiguresCodeCoverage() {
+        test('configures ".tsx" rules to use coverage-istanbul-loader', () => {
+            expect(subject().module?.rules).toEqual(
+                expect.arrayContaining([
+                    expect.objectContaining({
+                        test: /\.tsx?$/,
+                        use: expect.arrayContaining(['@jsdevtools/coverage-istanbul-loader']),
+                    }),
+                ])
+            );
+        });
+    }
+    function itConfiguresESBuildLoader() {
         test('configures ".tsx" rules to use esbuild-loader', () => {
             expect(subject().module?.rules).toContainEqual({
                 test: /\.tsx?$/,
@@ -265,16 +280,26 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             expect(subject().plugins).toContainEqual(new ProvidePlugin({ React: 'react' }));
         });
     }
+    describe('with --code-coverage command line argument', () => {
+        beforeEach(() => Object.assign(argv, { 'code-coverage': true }));
+        itConfiguresCodeCoverage();
+    });
+    describe('with codeCoverage option', () => {
+        beforeEach(() => {
+            options = { codeCoverage: true };
+        });
+        itConfiguresCodeCoverage();
+    });
     describe('with --esbuild command line argument', () => {
         beforeEach(() => Object.assign(argv, { esbuild: true }));
-        itConfiguresTsLoader();
+        itConfiguresESBuildLoader();
         itConfiguresReactToLoadAutomatically();
     });
     describe('with esbuild option', () => {
         beforeEach(() => {
             options = { esbuild: true };
         });
-        itConfiguresTsLoader();
+        itConfiguresESBuildLoader();
         itConfiguresReactToLoadAutomatically();
     });
     describe('with experimental-bundlers option', () => {
@@ -291,8 +316,8 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
     });
 
     test('configures ".css" rule to exclude .module.css files', () => {
-        const cssRule: any = subject().module?.rules?.find(({ test }: { test: RegExp }) =>
-            '.css'.match(test)
+        const cssRule: any = subject().module?.rules?.find(({ test: regexp }: { test: RegExp }) =>
+            regexp.test('.css')
         );
         expect(
             ['design-system.css', 'foo.module.css', 'foo.css'].filter(path => cssRule.exclude(path))
@@ -344,6 +369,12 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         );
     });
 
+    test('configures IgnorePlugin plugin', () => {
+        expect(subject().plugins).toContainEqual(
+            new IgnorePlugin({ checkResource: expect.any(Function) })
+        );
+    });
+
     describe('when buildStat option is set to true', () => {
         beforeEach(() => {
             setOptions({ buildStat: true });
@@ -428,7 +459,10 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
     });
 
     describe('when mode is "production"', () => {
-        beforeEach(() => Object.assign((overrides.configuration ??= {}), { mode: 'production' }));
+        beforeEach(() => {
+            overrides.configuration ??= {};
+            Object.assign(overrides.configuration, { mode: 'production' });
+        });
 
         test('changes "devtool" to "source-map"', () => {
             expect(subject().devtool).toEqual('source-map');

package/src/webpack/configs/plugins/ignore-plugin/__tests__/check-resource.test.ts

@@ -0,0 +1,37 @@
+import { checkResource } from '../check-resource';
+import { isOptionalPeerDependency } from '../is-optional-peer-dependency';
+
+jest.mock('../is-optional-peer-dependency');
+
+describe(`${checkResource.name}`, () => {
+    let context: string;
+    let resource: string;
+
+    const subject = () => checkResource(resource, context);
+
+    function itReturns(value: boolean) {
+        test(`returns ${value}`, () => expect(subject()).toBe(value));
+    }
+
+    describe('when resource is not an optional peer dependency', () => {
+        beforeEach(() => jest.mocked(isOptionalPeerDependency).mockReturnValue(false));
+
+        itReturns(false);
+    });
+
+    describe('when resource is optional peer dependency', () => {
+        beforeEach(() => jest.mocked(isOptionalPeerDependency).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/__tests__/is-optional-peer-dependency.test.ts

@@ -0,0 +1,30 @@
+import { isOptionalPeerDependency } from '../is-optional-peer-dependency';
+
+describe(`${isOptionalPeerDependency.name}`, () => {
+    const subject = (...args: Parameters<typeof isOptionalPeerDependency>) =>
+        isOptionalPeerDependency(...args);
+
+    describe.each([
+        {
+            resource: 'react-dom/client',
+            contexts: ['@servicetitan/web-components', '@servicetitan/ko-bridge'],
+        },
+    ])('with dependency "$resource"', ({ resource, contexts }) => {
+        contexts.forEach(context => {
+            test(`with context ${context}, returns true`, () => {
+                expect(subject({ context, resource })).toBe(true);
+            });
+        });
+    });
+
+    describe.each([
+        { resource: 'react-dom', contexts: ['@servicetitan/web-components'] },
+        { resource: 'react-dom/client', contexts: ['@servicetitan/foo'] },
+    ])('with dependency "$resource"', ({ resource, contexts }) => {
+        contexts.forEach(context => {
+            test(`with context ${context}, returns false`, () => {
+                expect(subject({ context, resource })).toBe(false);
+            });
+        });
+    });
+});

package/src/webpack/configs/plugins/ignore-plugin/check-resource.ts

@@ -0,0 +1,12 @@
+import { isOptionalPeerDependency } from './is-optional-peer-dependency';
+
+export function checkResource(resource: string, context: string) {
+    if (isOptionalPeerDependency({ resource, context })) {
+        try {
+            require.resolve(resource);
+        } catch (e) {
+            return true;
+        }
+    }
+    return false;
+}

package/src/webpack/configs/plugins/ignore-plugin/ignore-plugin.ts

@@ -0,0 +1,13 @@
+import { IgnorePlugin } from 'webpack';
+
+import { Context, Overrides } from '../../types';
+import { checkResource } from './check-resource';
+
+export function ignorePlugin(_context: Context, _: Overrides) {
+    /**
+     * Ignore optional peer dependencies
+     * @see {@link: file://./../../../../../../web-components/src/render.ts}
+     * @see {@link: file://./../../../../../../ko-bridge/src/ko-binding-handlers.tsx}
+     */
+    return new IgnorePlugin({ checkResource });
+}

package/src/webpack/configs/plugins/ignore-plugin/index.ts

@@ -0,0 +1 @@
+export * from './ignore-plugin';

package/src/webpack/configs/plugins/ignore-plugin/is-optional-peer-dependency.ts

@@ -0,0 +1,10 @@
+interface Dependency {
+    context: string;
+    resource: string;
+}
+
+export function isOptionalPeerDependency({ context, resource }: Dependency) {
+    return (
+        resource === 'react-dom/client' && /@servicetitan\/(ko-bridge|web-components)/.test(context)
+    );
+}

package/src/webpack/configs/plugins/index.ts

@@ -4,6 +4,7 @@ export * from './define-exposed-dependencies-plugin';
 export * from './define-web-component-name-plugin';
 export * from './filter-warnings-plugin';
 export * from './html-plugin';
+export * from './ignore-plugin';
 export * from './mini-css-extract-plugin';
 export * from './moment-locales-plugin';
 export * from './provide-react-plugin';

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

@@ -31,12 +31,13 @@ function designSystemCode() {
     ].join('\n');
 }
 
-function indexCode({ embed }: Context) {
+function indexCode({ embed, isLegacyRoot }: Context) {
+    const options = `{ legacyRoot: ${isLegacyRoot} }`;
     return [
         `import { register } from '@servicetitan/web-components';`,
         `import { App } from './app';`,
         ...(embed
-            ? [`register(App, true);`]
-            : [`require('./design-system.css');`, `register(App, false);`]),
+            ? [`register(App, true, ${options});`]
+            : [`require('./design-system.css');`, `register(App, false, ${options});`]),
     ].join('\n');
 }

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

@@ -6,6 +6,7 @@ import {
     defineWebComponentNamePlugin,
     filterWarningsPlugin,
     htmlPlugin,
+    ignorePlugin,
     miniCssExtractPlugin,
     momentLocalesPlugin,
     provideReactPlugin,
@@ -25,6 +26,7 @@ export function pluginsConfig(context: Context, overrides: Overrides): Result {
         defineWebComponentNamePlugin,
         filterWarningsPlugin,
         htmlPlugin,
+        ignorePlugin,
         miniCssExtractPlugin,
         momentLocalesPlugin,
         tsCheckerPlugin,

package/src/webpack/configs/rules/tsx-rules.ts

@@ -1,7 +1,7 @@
-import { RuleSetRule } from 'webpack';
+import { RuleSetRule, RuleSetUseItem } from 'webpack';
 import { Context } from '../types';
 
-export function tsxRules({ esbuild, experimentalBundlers }: Context): RuleSetRule[] {
+export function tsxRules({ codeCoverage, esbuild, experimentalBundlers }: Context): RuleSetRule[] {
     let loader: Record<string, any> = {
         loader: 'ts-loader',
         options: { transpileOnly: true },
@@ -34,11 +34,15 @@ export function tsxRules({ esbuild, experimentalBundlers }: Context): RuleSetRul
         };
     }
 
-    return [
-        {
-            test: /\.tsx?$/,
-            exclude: /node_modules/,
-            use: [loader],
-        },
-    ];
+    const rule = {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        use: [loader] as RuleSetUseItem[],
+    };
+
+    if (codeCoverage) {
+        rule.use.unshift('@jsdevtools/coverage-istanbul-loader');
+    }
+
+    return [rule];
 }

package/src/webpack/configs/types.ts

@@ -3,11 +3,13 @@ import { Options } from '../types';
 export { Overrides } from '../types';
 
 export interface Context extends Options {
+    codeCoverage: boolean;
     destination: string;
     esbuild: boolean;
     experimentalBundlers: boolean;
     isCustomStyleRules: boolean;
     isExposeSharedDependencies: boolean;
+    isLegacyRoot: boolean;
     isProduction: boolean;
     isWebComponent: boolean;
     packageData: ReturnType<typeof getPackageData>;

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

@@ -8,6 +8,7 @@ import {
     getPackageData,
     isCustomStyleRules,
     isExposeSharedDependencies,
+    isLegacyRoot,
     isWebComponent,
     loadSharedDependencies,
     log,
@@ -41,12 +42,14 @@ export function createWebpackConfig(overrides: Overrides, options: Options = {})
     );
 
     const context: Context = {
+        codeCoverage: options.codeCoverage ?? !!(argv as Arguments)['code-coverage'],
         destination,
-        esbuild: options.esbuild ?? !!(argv as Arguments).esbuild ?? false,
+        esbuild: options.esbuild ?? !!(argv as Arguments).esbuild,
         experimentalBundlers:
-            options.experimentalBundlers ?? !!(argv as Arguments)['experimental-bundlers'] ?? false,
+            options.experimentalBundlers ?? !!(argv as Arguments)['experimental-bundlers'],
         isCustomStyleRules: isCustomStyleRules(),
         isExposeSharedDependencies: isExposeSharedDependencies(),
+        isLegacyRoot: isLegacyRoot(),
         isProduction: configuration.mode === 'production',
         isWebComponent: isWebComponent(),
         name: '',

package/src/webpack/types.ts

@@ -4,11 +4,12 @@ import { PluginOptions as MiniCssExtractPlugInOptions } from 'mini-css-extract-p
 import { Configuration } from 'webpack';
 
 export interface Options {
-    embed?: boolean;
     buildStat?: boolean;
-    name?: string;
+    codeCoverage?: boolean;
+    embed?: boolean;
     esbuild?: boolean;
     experimentalBundlers?: boolean;
+    name?: string;
 }
 
 export interface Overrides {

package/template/package.json

@@ -4,8 +4,8 @@
     "description": "Multi-package web application template",
     "private": true,
     "engines": {
-        "node": ">=16",
-        "npm": ">=7"
+        "node": ">=18",
+        "npm": ">=10"
     },
     "scripts": {
         "bootstrap": "npx --yes @servicetitan/startup install",
@@ -17,7 +17,7 @@
         "test": "startup test"
     },
     "devDependencies": {
-        "@servicetitan/startup": ">=22.11.0"
+        "@servicetitan/startup": ">=22.21.0"
     },
     "workspaces": [
         "packages/*"

package/template/packages/application/package.json

@@ -7,12 +7,18 @@
     "typings": "./dist/index.d.ts",
     "scripts": {},
     "dependencies": {
-        "@servicetitan/design-system": "^12.10.0",
-        "@servicetitan/link-item": "^23.1.0",
-        "@servicetitan/react-ioc": "^22.15.0",
+        "@servicetitan/design-system": "^13.4.3",
+        "@servicetitan/hash-browser-router": "^23.1.0",
+        "@servicetitan/link-item": "^25.9.0",
+        "@servicetitan/log-service": "^23.1.0",
+        "@servicetitan/react-ioc": "^23.1.0",
+        "@servicetitan/web-components": "^23.1.0",
+        "axios": "^0.27.2",
         "feature-a": "^0.0.0",
         "feature-b": "^0.0.0",
         "feature-c": "^0.0.0",
+        "history": "~4.10.1",
+        "mobx": "~6.10.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^5.3.0"

package/template/packages/application/src/__tests__/app.test.tsx

@@ -18,7 +18,7 @@ describe(`${App.name}`, () => {
 
     const routes = Object.entries({
         MainPage: '/',
-        SecondPage: '/second-page',
+        SecondPage: '/#/second-page',
     }).map(([component, path]) => ({ component, path }));
 
     describe.each(routes)('when location is $path', ({ component, path }) => {