@servicetitan/startup 27.3.0 → 27.4.0-canary.0

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

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/**/*"]
-}

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

@@ -1,19 +0,0 @@
-{
-    "name": "feature-b",
-    "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-b/tsconfig.json

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

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

@@ -1,19 +0,0 @@
-{
-    "name": "feature-c",
-    "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-c/tsconfig.json

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

package/template/setupTests.ts

@@ -1,27 +0,0 @@
-import '@servicetitan/testing-library';
-import '@testing-library/jest-dom';
-
-Object.defineProperties(window, {
-    location: { value: window.location, writable: true, configurable: true },
-    matchMedia: {
-        value: jest.fn().mockImplementation(query => ({
-            matches: false,
-            media: query,
-            onChange: null,
-            addEventListener: jest.fn(),
-            removeEventListener: jest.fn(),
-            dispatchEvent: jest.fn(),
-        })),
-        writable: true,
-        configurable: true,
-    },
-    ResizeObserver: {
-        value: jest.fn().mockImplementation(() => ({
-            disconnect: jest.fn(),
-            observe: jest.fn(),
-            unobserve: jest.fn(),
-        })),
-        writable: true,
-        configurable: true,
-    },
-});

package/template/tsconfig.test.json

@@ -1,5 +0,0 @@
-{
-    "extends": "@servicetitan/startup/tsconfig/base",
-    "include": ["**/__tests__/**/*", "**/*.d.ts", "setupTests.ts"],
-    "exclude": ["node_modules"]
-}

package/template-react18/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": "^14.0.0",
-        "@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": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "react-router-dom": "^5.3.0"
-    },
-    "devDependencies": {
-        "@servicetitan/testing-library": "^1.2.0",
-        "@testing-library/jest-dom": "^6.4.2",
-        "@testing-library/react": "^14.2.1",
-        "@testing-library/react-hooks": "^8.0.1",
-        "@types/react": "^18.3.3",
-        "@types/react-dom": "^18.3.0",
-        "@types/react-router-dom": "^5.3.2"
-    }
-}

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

@@ -1,9 +0,0 @@
-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

@@ -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": "^18.3.1",
-        "react-dom": "^18.3.1"
-    },
-    "devDependencies": {
-        "@types/react": "^18.3.3",
-        "@types/react-dom": "^18.3.0"
-    },
-    "cli": {
-        "webpack": false
-    }
-}