@servicetitan/startup 27.4.0 → 28.1.0

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

@@ -118,6 +118,7 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
         configuration = {};
 
         jest.resetAllMocks();
+        jest.mocked(log.debug).mockReturnValue({ enabled: false } as any);
         jest.mocked(CssMinimizerWebpackPlugin).mockImplementation(
             mockPlugIn('CssMinimizerWebpackPlugin')
         );
@@ -331,10 +332,10 @@ describe(`[startup] ${createWebpackConfig.name}`, () => {
             ];
         });
 
-        test('configures "watchOptions" to ignore TSC packages', () => {
+        test('configures "watchOptions" to ignore TSC source files', () => {
             const ignored = packages
                 .filter(({ type }) => type === PackageType.TSC)
-                .map(({ location }) => location);
+                .map(({ location }) => path.join(location, getFolders(location).source));
             expect(subject().watchOptions).toEqual({ ignored });
         });
     });

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

@@ -4,6 +4,7 @@ import { Configuration } from 'webpack';
 import {
     PackageType,
     allowedWebpackDevServerOptions,
+    getFolders,
     getPackageName,
     getPackages,
     getWebpackConfiguration,
@@ -77,7 +78,7 @@ function getDevServerConfig() {
 function watchOptionsConfig(): WatchOptionsConfig {
     const ignored = getPackages({ scope: getPackageName() })
         .filter(({ type }) => type === PackageType.TSC)
-        .map(({ location }) => location);
+        .map(({ location }) => path.join(location, getFolders(location).source));
 
     /*
      * NOTE: Don't return empty ignored array. It triggered a bug that caused

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

@@ -16,7 +16,7 @@ const optionalAnvilPeerDependencies = ['@servicetitan/design-system', '@servicet
 export function isOptionalAnvilPeerDependency({ context, packageContext, resource }: Dependency) {
     return (
         optionalAnvilPeerDependencies.includes(resource) &&
-        /(@servicetitan|packages)\/(web-components)/.test(context) &&
+        /(@servicetitan|packages)[\\/](web-components)/.test(context) &&
         !Object.keys(packageContext.packageData.dependencies).includes(resource)
     );
 }

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

@@ -10,3 +10,4 @@ export * from './moment-locales-plugin';
 export * from './provide-react-plugin';
 export * from './ts-checker-plugin';
 export * from './virtual-modules-plugin';
+export * from './watch-run-plugin';

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/plugins/watch-run-plugin.ts

@@ -0,0 +1,23 @@
+import path from 'path';
+import { Compiler } from 'webpack';
+
+import { log } from '../../../utils';
+import { Context, Overrides } from '../types';
+
+export function watchRunPlugin(_context: Context, _overrides: Overrides) {
+    /* istanbul ignore next: debug only */
+    if (log.debug('modified-files').enabled) {
+        return new WatchRunPlugin();
+    }
+}
+
+class WatchRunPlugin {
+    /* istanbul ignore next: debug only */
+    apply(compiler: Compiler) {
+        compiler.hooks.watchRun.tap('WatchRun', compilation => {
+            compilation.modifiedFiles?.forEach(file => {
+                log.debug('modified-files', path.relative('', file));
+            });
+        });
+    }
+}

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

@@ -12,6 +12,7 @@ import {
     provideReactPlugin,
     tsCheckerPlugin,
     virtualModulesPlugin,
+    watchRunPlugin,
 } from './plugins';
 import { Context, Overrides } from './types';
 
@@ -32,6 +33,7 @@ export function pluginsConfig(context: Context, overrides: Overrides): Result {
         tsCheckerPlugin,
         provideReactPlugin,
         virtualModulesPlugin,
+        watchRunPlugin,
     ]
         .map(fn => fn(context, overrides))
         .filter(plugin => !!plugin);

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/tsconfig/base.json

@@ -4,7 +4,7 @@
         "incremental": true,
         "target": "es2018",
         "module": "esnext",
-        "moduleResolution": "node",
+        "moduleResolution": "Bundler",
         "lib": ["dom", "dom.iterable", "esnext"],
         "jsx": "react-jsx",
         "declaration": true,

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"
-    }
-}

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

@@ -1,33 +0,0 @@
-import { mockComponent, mockLocation } from '@servicetitan/testing-library';
-import { render, screen } from '@testing-library/react';
-
-import { App } from '../app';
-
-jest.mock('../main-page', () => mockComponent('MainPage'));
-jest.mock('../second-page', () => mockComponent('SecondPage'));
-
-describe(`${App.name}`, () => {
-    const subject = () => render(<App />);
-
-    test('renders sidebar', () => {
-        subject();
-
-        expect(screen.getByRole('link', { name: 'Main page' })).toBeInTheDocument();
-        expect(screen.getByRole('link', { name: 'Second page' })).toBeInTheDocument();
-    });
-
-    const routes = Object.entries({
-        MainPage: '/',
-        SecondPage: '/#/second-page',
-    }).map(([component, path]) => ({ component, path }));
-
-    describe.each(routes)('when location is $path', ({ component, path }) => {
-        beforeEach(() => mockLocation(path));
-
-        test(`renders <${component} />`, () => {
-            subject();
-
-            expect(screen).toContainComponent(component);
-        });
-    });
-});

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

@@ -1,3 +0,0 @@
-body {
-    margin: var(--spacing-0);
-}

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

@@ -1,45 +0,0 @@
-import { StrictMode, FC } from 'react';
-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';
-
-import { SecondPage } from './second-page';
-import { MainPage } from './main-page';
-import './design-system.css';
-import './app.css';
-
-export const App: FC = () => (
-    <StrictMode>
-        <HashBrowserRouter>
-            <Frame>
-                <Page
-                    sidebar={
-                        <Sidebar localStorageKey="sidebar-application">
-                            <Sidebar.Section padding="y">
-                                <SideNav title="Application">
-                                    <SideNavLinkItem pathname="/" exact>
-                                        Main page
-                                    </SideNavLinkItem>
-                                    <SideNavLinkItem pathname="/second-page">
-                                        Second page
-                                    </SideNavLinkItem>
-                                </SideNav>
-                            </Sidebar.Section>
-                        </Sidebar>
-                    }
-                    maxWidth="wide"
-                >
-                    <Switch>
-                        <Route path="/" exact>
-                            <MainPage />
-                        </Route>
-                        <Route path="/second-page">
-                            <SecondPage />
-                        </Route>
-                    </Switch>
-                </Page>
-            </Frame>
-        </HashBrowserRouter>
-    </StrictMode>
-);

package/template/packages/application/src/design-system.css

@@ -1,3 +0,0 @@
-@import '~@servicetitan/tokens/dist/tokens.css';
-@import '~@servicetitan/anvil-fonts/dist/css/anvil-fonts.css';
-@import '~@servicetitan/design-system/dist/system.min.css';

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

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

package/template/packages/application/src/main-page.tsx

@@ -1,5 +0,0 @@
-import { Fragment } from 'react';
-
-export function MainPage() {
-    return <Fragment>Main page</Fragment>;
-}

package/template/packages/application/src/second-page.tsx

@@ -1,5 +0,0 @@
-import { Fragment } from 'react';
-
-export function SecondPage() {
-    return <Fragment>Second page</Fragment>;
-}

package/template/packages/application/tsconfig.json

@@ -1,13 +0,0 @@
-{
-    "extends": "@servicetitan/startup/tsconfig/base",
-    "compilerOptions": {
-        "outDir": "dist",
-        "rootDir": "src"
-    },
-    "include": ["src/**/*"],
-    "references": [
-        { "path": "../feature-a" },
-        { "path": "../feature-b" },
-        { "path": "../feature-c" }
-    ]
-}

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

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

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

@@ -1,9 +0,0 @@
-{
-    "extends": "@servicetitan/startup/tsconfig/base",
-    "compilerOptions": {
-        "outDir": "dist",
-        "rootDir": "src",
-        "composite": true
-    },
-    "include": ["src/**/*"]
-}