@servicetitan/startup 22.21.0 → 23.1.0

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

@@ -4,39 +4,34 @@ import { JestConfiguration, getJestConfiguration } from './get-configuration';
 import { getDestinationFolders } from './get-destination-folders';
 import { toArray } from './to-array';
 
-const getJestConfigBase = (
-    stringify: boolean,
-    testPathIgnorePatterns: string[] = [],
-    setupFiles: string[] = [],
-    coveragePathIgnorePatterns: string[] = [],
-    globalsOverrides: Record<string, any> = {}
-): Partial<JestConfiguration> => {
+const getJestConfigBase = ({
+    coveragePathIgnorePatterns = [],
+    setupFiles = [],
+    testPathIgnorePatterns = [],
+}: {
+    coveragePathIgnorePatterns?: string[];
+    setupFiles?: string[];
+    testPathIgnorePatterns?: string[];
+}) => {
     const transform = {
         '^.+\\.jsx?$': [
             'babel-jest',
             { presets: [['@babel/preset-env', { targets: { node: 'current' } }]] },
         ],
-        '^.+\\.tsx?$': 'ts-jest',
+        '^.+\\.tsx?$': ['ts-jest', { tsconfig: './tsconfig.test.json' }],
     };
     const moduleNameMapper = {
         '\\.(css|scss|less|png|svg|jpg|jpeg|gif|woff|woff2|eot|ttf|otf)$': 'identity-obj-proxy',
     };
-    const globals = {
-        'ts-jest': {
-            tsconfig: './tsconfig.test.json',
-        },
-        ...globalsOverrides,
-    };
 
     return {
         verbose: true,
         testEnvironment: 'jsdom',
         testRunner: 'jest-circus/runner',
-        transformIgnorePatterns: ['node_modules/(?!@servicetitan/)'],
+        transformIgnorePatterns: ['node_modules/(?!(@servicetitan|@react-hook|nanoid|axios)/)'],
         modulePathIgnorePatterns: ['<rootDir>/.*/__mocks__'],
-        transform: stringify ? JSON.stringify(transform) : transform,
-        moduleNameMapper: stringify ? JSON.stringify(moduleNameMapper) : moduleNameMapper,
-        globals: stringify ? JSON.stringify(globals) : globals,
+        transform,
+        moduleNameMapper,
         testPathIgnorePatterns: [
             '\\.yalc',
             ...getDestinationFolders(),
@@ -54,21 +49,14 @@ const getJestConfigBase = (
  * Jest config files.
  */
 export const getJestConfig = (): JestConfiguration => {
-    const {
-        testPathIgnorePatterns = [],
-        setupFiles = [],
-        coveragePathIgnorePatterns = [],
-        globals = {},
-        ...config
-    } = { ...getJestConfiguration() };
+    const { coveragePathIgnorePatterns, setupFiles, testPathIgnorePatterns, ...config } =
+        getJestConfiguration() as Record<string, any>;
     return {
-        ...getJestConfigBase(
-            false,
-            testPathIgnorePatterns,
-            setupFiles,
+        ...getJestConfigBase({
             coveragePathIgnorePatterns,
-            globals
-        ),
+            setupFiles,
+            testPathIgnorePatterns,
+        }),
         ...config,
     };
 };
@@ -77,24 +65,23 @@ export const getJestConfig = (): JestConfiguration => {
  * Get Jest config for running it using jest CLI (see jest runCLI function)
  */
 export const getJestConfigCLI = (args: Config.Argv): Config.Argv => {
-    const {
-        testPathIgnorePatterns = [],
-        setupFiles = [],
-        coveragePathIgnorePatterns = [],
-        globals = {},
-        ...config
-    } = {
+    const { coveragePathIgnorePatterns, setupFiles, testPathIgnorePatterns, globals, ...config } = {
         ...getJestConfiguration(),
         ...args,
     };
+
+    const { collectCoverageFrom, moduleNameMapper, transform, ...rest } = getJestConfigBase({
+        coveragePathIgnorePatterns,
+        setupFiles,
+        testPathIgnorePatterns,
+    });
+
     return {
-        ...getJestConfigBase(
-            true,
-            testPathIgnorePatterns,
-            setupFiles,
-            coveragePathIgnorePatterns,
-            globals
-        ),
+        collectCoverageFrom: JSON.stringify(collectCoverageFrom),
+        globals: JSON.stringify(globals),
+        moduleNameMapper: JSON.stringify(moduleNameMapper),
+        transform: JSON.stringify(transform),
+        ...rest,
         ...config,
     };
 };

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

@@ -231,7 +231,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 +277,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', () => {

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,6 +3,7 @@ import { Options } from '../types';
 export { Overrides } from '../types';
 
 export interface Context extends Options {
+    codeCoverage: boolean;
     destination: string;
     esbuild: boolean;
     experimentalBundlers: boolean;

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

@@ -41,10 +41,11 @@ 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(),
         isProduction: configuration.mode === 'production',

package/src/webpack/loaders/expose-loader/__tests__/__snapshots__/index.test.ts.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`expose-loader should work for a nested property for a global object: errors 1`] = `Array []`;
+exports[`expose-loader should work for a nested property for a global object: errors 1`] = `[]`;
 
 exports[`expose-loader should work for a nested property for a global object: module 1`] = `
-"var ___EXPOSE_LOADER_IMPORT___ = require(\\"-!./configuration.expose-loader.js\\");
-var ___EXPOSE_LOADER_GLOBAL_THIS___ = require(\\"../../runtime/get-global-this.ts\\");
+"var ___EXPOSE_LOADER_IMPORT___ = require("-!./configuration.expose-loader.js");
+var ___EXPOSE_LOADER_GLOBAL_THIS___ = require("../../runtime/get-global-this.ts");
 var ___EXPOSE_LOADER_STORAGE_KEY___ = Symbol.for('SERVICETITAN_EXPOSE_LOADER_STORAGE');
 if (___EXPOSE_LOADER_GLOBAL_THIS___[___EXPOSE_LOADER_STORAGE_KEY___] === undefined) {
   ___EXPOSE_LOADER_GLOBAL_THIS___[___EXPOSE_LOADER_STORAGE_KEY___] = Object.assign(
@@ -48,7 +48,7 @@ ___EXPOSE_LOADER_GLOBAL_THIS___.SharedDependencies.Configuration = new Proxy(
       if (prop === 'getStorage') {
         return Reflect.get(target, prop, receiver);
       }
-      return getModule(require.resolveWeak(\\"-!./configuration.expose-loader.js\\"))
+      return getModule(require.resolveWeak("-!./configuration.expose-loader.js"))
     },
   }
 );
@@ -57,8 +57,8 @@ module.exports = ___EXPOSE_LOADER_IMPORT___;
 `;
 
 exports[`expose-loader should work for a nested property for a global object: result 1`] = `
-Object {
-  "configuration": Object {
+{
+  "configuration": {
     "get": [Function],
     "set": [Function],
     "version": "1.0.0",
@@ -66,13 +66,13 @@ Object {
 }
 `;
 
-exports[`expose-loader should work for a nested property for a global object: warnings 1`] = `Array []`;
+exports[`expose-loader should work for a nested property for a global object: warnings 1`] = `[]`;
 
-exports[`expose-loader should work: errors 1`] = `Array []`;
+exports[`expose-loader should work: errors 1`] = `[]`;
 
 exports[`expose-loader should work: module 1`] = `
-"var ___EXPOSE_LOADER_IMPORT___ = require(\\"-!./configuration.expose-loader.js\\");
-var ___EXPOSE_LOADER_GLOBAL_THIS___ = require(\\"../../runtime/get-global-this.ts\\");
+"var ___EXPOSE_LOADER_IMPORT___ = require("-!./configuration.expose-loader.js");
+var ___EXPOSE_LOADER_GLOBAL_THIS___ = require("../../runtime/get-global-this.ts");
 var ___EXPOSE_LOADER_STORAGE_KEY___ = Symbol.for('SERVICETITAN_EXPOSE_LOADER_STORAGE');
 if (___EXPOSE_LOADER_GLOBAL_THIS___[___EXPOSE_LOADER_STORAGE_KEY___] === undefined) {
   ___EXPOSE_LOADER_GLOBAL_THIS___[___EXPOSE_LOADER_STORAGE_KEY___] = Object.assign(
@@ -113,7 +113,7 @@ ___EXPOSE_LOADER_GLOBAL_THIS___.Configuration = new Proxy(
       if (prop === 'getStorage') {
         return Reflect.get(target, prop, receiver);
       }
-      return getModule(require.resolveWeak(\\"-!./configuration.expose-loader.js\\"))
+      return getModule(require.resolveWeak("-!./configuration.expose-loader.js"))
     },
   }
 );
@@ -122,8 +122,8 @@ module.exports = ___EXPOSE_LOADER_IMPORT___;
 `;
 
 exports[`expose-loader should work: result 1`] = `
-Object {
-  "configuration": Object {
+{
+  "configuration": {
     "get": [Function],
     "set": [Function],
     "version": "1.0.0",
@@ -131,4 +131,4 @@ Object {
 }
 `;
 
-exports[`expose-loader should work: warnings 1`] = `Array []`;
+exports[`expose-loader should work: warnings 1`] = `[]`;

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/src/webpack/utils/testing/normalize-errors.ts

@@ -14,5 +14,5 @@ function removeCWD(str: string) {
 }
 
 export function normalizeErrors(errors: WebpackError[]) {
-    return errors.map(error => removeCWD(error.toString().split('\n').slice(0, 2).join('\n')));
+    return errors.map(error => removeCWD(error.message.split('\n').slice(0, 2).join('\n')));
 }

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

@@ -8,11 +8,17 @@
     "scripts": {},
     "dependencies": {
         "@servicetitan/design-system": "^12.10.0",
+        "@servicetitan/hash-browser-router": "^22.15.0",
         "@servicetitan/link-item": "^23.1.0",
+        "@servicetitan/log-service": "^22.15.0",
         "@servicetitan/react-ioc": "^22.15.0",
+        "@servicetitan/web-components": "^22.15.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 }) => {

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

@@ -1,5 +1,6 @@
 import { StrictMode, FC } from 'react';
-import { BrowserRouter, Switch, Route } from 'react-router-dom';
+import { Switch, Route } from 'react-router-dom';
+import { HashBrowserRouter } from '@servicetitan/hash-browser-router';
 import { SideNav, Frame, Page, Sidebar } from '@servicetitan/design-system';
 import { SideNavLinkItem } from '@servicetitan/link-item';
 
@@ -10,7 +11,7 @@ import './app.css';
 
 export const App: FC = () => (
     <StrictMode>
-        <BrowserRouter>
+        <HashBrowserRouter>
             <Frame>
                 <Page
                     sidebar={
@@ -39,6 +40,6 @@ export const App: FC = () => (
                     </Switch>
                 </Page>
             </Frame>
-        </BrowserRouter>
+        </HashBrowserRouter>
     </StrictMode>
 );

package/template-react18/packages/application/package.json

@@ -0,0 +1,35 @@
+{
+    "name": "application",
+    "version": "0.0.0",
+    "description": "",
+    "private": true,
+    "main": "./dist/index.js",
+    "typings": "./dist/index.d.ts",
+    "scripts": {},
+    "dependencies": {
+        "@servicetitan/design-system": "^14.0.0",
+        "@servicetitan/hash-browser-router": "^22.15.0",
+        "@servicetitan/link-item": "^23.1.0",
+        "@servicetitan/log-service": "^22.15.0",
+        "@servicetitan/react-ioc": "^22.15.0",
+        "@servicetitan/web-components": "^22.15.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": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^5.3.0"
+    },
+    "devDependencies": {
+        "@servicetitan/testing-library": "^0.3.0",
+        "@testing-library/jest-dom": "^6.4.2",
+        "@testing-library/react": "^14.2.1",
+        "@testing-library/react-hooks": "^8.0.1",
+        "@types/react": "^18.2.55",
+        "@types/react-dom": "^18.2.19",
+        "@types/react-router-dom": "^5.3.2"
+    }
+}

package/template-react18/packages/application/src/index.tsx

@@ -0,0 +1,9 @@
+import { createRoot } from 'react-dom/client';
+
+import { App } from './app';
+
+const appContainer = document.createElement('div');
+document.body.appendChild(appContainer);
+
+const root = createRoot(appContainer);
+root.render(<App />);

package/template-react18/packages/feature-a/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "feature-a",
+    "version": "0.0.0",
+    "description": "",
+    "private": true,
+    "main": "./dist/index.js",
+    "typings": "./dist/index.d.ts",
+    "dependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.55",
+        "@types/react-dom": "^18.2.19"
+    },
+    "cli": {
+        "webpack": false
+    }
+}

package/template-react18/packages/feature-b/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "feature-b",
+    "version": "0.0.0",
+    "description": "",
+    "private": true,
+    "main": "./dist/index.js",
+    "typings": "./dist/index.d.ts",
+    "dependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.55",
+        "@types/react-dom": "^18.2.19"
+    },
+    "cli": {
+        "webpack": false
+    }
+}

package/template-react18/packages/feature-c/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "feature-c",
+    "version": "0.0.0",
+    "description": "",
+    "private": true,
+    "main": "./dist/index.js",
+    "typings": "./dist/index.d.ts",
+    "dependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.55",
+        "@types/react-dom": "^18.2.19"
+    },
+    "cli": {
+        "webpack": false
+    }
+}