@servicetitan/startup 22.17.0 → 22.19.0

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

@@ -0,0 +1,12 @@
+import { Configuration } from 'webpack';
+import { rulesConfig } from './rules-config';
+import { Context, Overrides } from './types';
+
+type Config = Configuration['module'];
+type Result = Pick<Configuration, 'module'>;
+
+export function moduleConfig(context: Context, overrides: Overrides): Result {
+    const module: Config = { ...rulesConfig(context, overrides) };
+
+    return { module };
+}

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

@@ -0,0 +1,63 @@
+import { Configuration } from 'webpack';
+import { Context, Overrides } from './types';
+
+type Config = Configuration['optimization'];
+type Result = Pick<Configuration, 'optimization'>;
+
+export function optimizationConfig(context: Context, _: Overrides): Result {
+    const { isExposeSharedDependencies, isProduction, isWebComponent } = context;
+
+    const optimization: Config & { splitChunks: { cacheGroups: Record<string, any> } } = {
+        chunkIds: 'size',
+        moduleIds: 'size',
+        mangleExports: 'size',
+        splitChunks: { cacheGroups: {} },
+    };
+
+    if (isExposeSharedDependencies) {
+        Object.assign(optimization.splitChunks.cacheGroups, {
+            'design-system': {
+                test: /[\\/]node_modules[\\/]@servicetitan[\\/](tokens|anvil-fonts|design-system)[\\/].*\.css$/,
+                name: 'design-system',
+                chunks: 'all',
+                enforce: true,
+            },
+        });
+    }
+
+    if (isWebComponent) {
+        Object.assign(optimization.splitChunks.cacheGroups, {
+            styles: {
+                name: 'main',
+                type: 'css/mini-extract',
+                chunks: 'all',
+                enforce: true,
+            },
+        });
+    }
+
+    if (isProduction) {
+        optimization.runtimeChunk = 'single';
+        if (isWebComponent) {
+            Object.assign(optimization.splitChunks.cacheGroups, {
+                common: {
+                    name: 'common',
+                    test: /[\\/]node_modules[\\/](axios|classnames|formstate|mobx|mobx-react|mobx-utils|react|react-dom|react-router|react-router-dom)[\\/]/,
+                    chunks: 'all',
+                },
+                kendo: {
+                    name: 'kendo',
+                    test: /[\\/]node_modules[\\/](@progress|@telerik)[\\/]/,
+                    chunks: 'all',
+                },
+                servicetitan: {
+                    name: 'servicetitan',
+                    test: /[\\/]node_modules[\\/]@servicetitan[\\/]/,
+                    chunks: 'all',
+                },
+            });
+        }
+    }
+
+    return { optimization };
+}

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

@@ -0,0 +1,28 @@
+import path from 'path';
+import { Configuration } from 'webpack';
+import { Context, Overrides } from './types';
+
+type Config = Configuration['output'];
+type Result = Pick<Configuration, 'output'>;
+
+export function outputConfig(context: Context, _: Overrides): Result {
+    const { destination, embed, isProduction, isWebComponent } = context;
+
+    const output: Config = {
+        filename: '[name].bundle.js',
+        path: isWebComponent
+            ? path.join(process.cwd(), `${destination}/bundle/${embed ? 'light' : 'full'}`)
+            : path.join(process.cwd(), `${destination}/bundle`),
+    };
+
+    if (isProduction) {
+        const cdnPath = process.env.CLIENT_CDN_PATH;
+        Object.assign(output, {
+            filename: '[name].[contenthash:8].bundle.js',
+            clean: true,
+            ...(cdnPath ? { publicPath: cdnPath } : {}),
+        });
+    }
+
+    return { output };
+}

package/src/webpack/configs/plugins/assets-manifest-plugin.ts

@@ -0,0 +1,34 @@
+import WebpackAssetsManifest from 'webpack-assets-manifest';
+import { Context, Overrides } from '../types';
+import { generateMetadata } from '../utils';
+
+export function assetsManifestPlugin(context: Context, _: Overrides) {
+    if (!context.isWebComponent) {
+        return;
+    }
+
+    return new WebpackAssetsManifest({
+        entrypoints: true,
+        output: 'entrypoints.json',
+        transform(assets) {
+            const entrypoints = assets.entrypoints as Record<
+                string,
+                { assets: Record<string, string[]> }
+            >;
+
+            const getAssetsByType = (type: string) => {
+                return Object.values(entrypoints)
+                    .map(({ assets }) => assets[type] ?? [])
+                    .flat();
+            };
+
+            return {
+                css: getAssetsByType('css'),
+                js: getAssetsByType('js'),
+            };
+        },
+        done(_manifest) {
+            generateMetadata(context);
+        },
+    });
+}

package/src/webpack/configs/plugins/bundle-analyser-plugin.ts

@@ -0,0 +1,18 @@
+import path from 'path';
+import os from 'os';
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+import { Context, Overrides } from '../types';
+
+export function bundleAnalyzerPlugin({ buildStat, embed }: Context, _: Overrides) {
+    if (!buildStat) {
+        return;
+    }
+
+    return new BundleAnalyzerPlugin({
+        analyzerMode: 'static',
+        reportFilename: path.join(
+            os.tmpdir(),
+            `report-${embed ? 'light' : 'full'}-bundle-${Date.now()}.html`
+        ),
+    });
+}

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

@@ -0,0 +1,29 @@
+import { DefinePlugin } from 'webpack';
+import { getPackageDependencyVersion } from '../../../utils';
+import { Context, Overrides } from '../types';
+
+export function defineExposedDependenciesPlugin(context: Context, _: Overrides) {
+    const { isExposeSharedDependencies, packageData, sharedDependencies } = context;
+    if (!isExposeSharedDependencies) {
+        return;
+    }
+
+    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,
+                        },
+                    }),
+                {}
+            )
+        ),
+    });
+}

package/src/webpack/configs/plugins/define-web-component-name-plugin.ts

@@ -0,0 +1,14 @@
+import { DefinePlugin } from 'webpack';
+import { Context, Overrides } from '../types';
+
+export function defineWebComponentNamePlugin(context: Context, _: Overrides) {
+    const { isWebComponent, name } = context;
+    if (!isWebComponent) {
+        return;
+    }
+
+    return new DefinePlugin({
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        WEB_COMPONENT_NAME: JSON.stringify(name),
+    });
+}

package/src/webpack/configs/plugins/filter-warnings-plugin.ts

@@ -0,0 +1,12 @@
+const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
+import { Context, Overrides } from '../types';
+
+export function filterWarningsPlugin({ embed }: Context, _: Overrides) {
+    if (embed) {
+        return;
+    }
+
+    return new FilterWarningsPlugin({
+        exclude: /export .* was not found in/,
+    });
+}

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

@@ -0,0 +1,53 @@
+import deepmerge from 'deepmerge';
+import HtmlWebpackPlugin, { Options as HtmlWebpackPluginOptions } from 'html-webpack-plugin';
+import { splitByEntry } from '../../utils';
+import { Context, Overrides } from '../types';
+
+export function htmlPlugin({ embed, isWebComponent, name }: Context, { plugins }: Overrides) {
+    const { HtmlWebpackPlugin: htmlWebpackPluginOptions = {} } = plugins ?? {};
+
+    if (embed) {
+        return;
+    }
+
+    return new HtmlWebpackPlugin(
+        deepmerge<HtmlWebpackPluginOptions>(
+            {
+                title: 'ServiceTitan',
+                hash: true,
+                ...(isWebComponent
+                    ? {
+                          inject: false,
+                          publicPath: '/',
+                          templateContent: ({
+                              htmlWebpackPlugin: {
+                                  tags: { headTags, bodyTags },
+                                  files,
+                              },
+                          }) => {
+                              const styleUrls = encodeURIComponent(JSON.stringify(files.css));
+                              return `
+                                <!DOCTYPE html>
+                                <html>
+                                    <head>
+                                        <meta name="viewport" content="width=device-width,initial-scale=1">
+                                        ${headTags}
+                                    </head>
+                                    <body>
+                                        <${name} style-urls="${styleUrls}" />
+
+                                        ${bodyTags}
+                                    </body>
+                                </html>
+                            `;
+                          },
+                      }
+                    : {}),
+                templateParameters: {
+                    splitByEntry,
+                },
+            },
+            htmlWebpackPluginOptions
+        )
+    );
+}

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

@@ -0,0 +1,11 @@
+export * from './assets-manifest-plugin';
+export * from './bundle-analyser-plugin';
+export * from './define-exposed-dependencies-plugin';
+export * from './define-web-component-name-plugin';
+export * from './filter-warnings-plugin';
+export * from './html-plugin';
+export * from './mini-css-extract-plugin';
+export * from './moment-locales-plugin';
+export * from './provide-react-plugin';
+export * from './ts-checker-plugin';
+export * from './virtual-modules-plugin';

package/src/webpack/configs/plugins/mini-css-extract-plugin.ts

@@ -0,0 +1,19 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { Context, Overrides } from '../types';
+
+export function miniCssExtractPlugin(context: Context, overrides: Overrides) {
+    const { isCustomStyleRules, isExposeSharedDependencies, isProduction, isWebComponent } =
+        context;
+    if (isProduction) {
+        if (!isCustomStyleRules) {
+            return new MiniCssExtractPlugin({
+                filename: '[name].[contenthash:8].bundle.css',
+                ...(overrides.plugins as any)?.MiniCssExtractPlugin,
+            });
+        }
+    } else {
+        if (isWebComponent || (isExposeSharedDependencies && !isCustomStyleRules)) {
+            return new MiniCssExtractPlugin({ filename: '[name].bundle.css' });
+        }
+    }
+}

package/src/webpack/configs/plugins/moment-locales-plugin.ts

@@ -0,0 +1,8 @@
+import MomentLocalesPlugin from 'moment-locales-webpack-plugin';
+import { Context, Overrides } from '../types';
+
+export function momentLocalesPlugin(_: Context, _overrides: Overrides) {
+    return new MomentLocalesPlugin({
+        localesToKeep: ['en-au', 'en-ca', 'en-gb'],
+    });
+}

package/src/webpack/configs/plugins/provide-react-plugin.ts

@@ -0,0 +1,12 @@
+import { ProvidePlugin } from 'webpack';
+import { Context, Overrides } from '../types';
+
+export function provideReactPlugin({ esbuild }: Context, _: Overrides) {
+    if (!esbuild) {
+        return;
+    }
+
+    return new ProvidePlugin({
+        React: 'react',
+    });
+}

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

@@ -0,0 +1,33 @@
+import deepmerge from 'deepmerge';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import { ForkTsCheckerWebpackPluginOptions } from 'fork-ts-checker-webpack-plugin/lib/plugin-options';
+import { getTsConfig } from '../../../utils';
+import { Context, Overrides } from '../types';
+
+export function tsCheckerPlugin({ embed }: Context, { plugins }: Overrides) {
+    const { ForkTsCheckerWebpackPlugin: forkTsCheckerWebpackPluginOptions = {} } = plugins ?? {};
+
+    if (embed) {
+        return;
+    }
+
+    return new ForkTsCheckerWebpackPlugin(
+        deepmerge<ForkTsCheckerWebpackPluginOptions>(
+            {
+                typescript: {
+                    configFile: getTsConfig(),
+                    configOverwrite: {
+                        exclude: [
+                            '**/__tests__/**/*',
+                            '**/__mocks__/**/*',
+                            '**/*.test.*',
+                            '**/*.stories.tsx',
+                        ],
+                        references: [],
+                    },
+                },
+            },
+            forkTsCheckerWebpackPluginOptions
+        )
+    );
+}

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

@@ -0,0 +1,42 @@
+import fs from 'fs';
+import path from 'path';
+import VirtualModulesPlugin from 'webpack-virtual-modules';
+import { Context, Overrides } from '../types';
+
+export function virtualModulesPlugin(context: Context, _: Overrides) {
+    if (!context.isWebComponent) {
+        return;
+    }
+
+    const { source } = context;
+
+    const indexPath = path.join(process.cwd(), `${source}/index.ts`);
+    const modules: ConstructorParameters<typeof VirtualModulesPlugin>[0] = {
+        [indexPath]: indexCode(context),
+    };
+
+    const designSystemPath = path.join(process.cwd(), `${source}/design-system.css`);
+    if (!fs.existsSync(designSystemPath)) {
+        modules[designSystemPath] = designSystemCode();
+    }
+
+    return new VirtualModulesPlugin(modules);
+}
+
+function designSystemCode() {
+    return [
+        `@import '~@servicetitan/tokens/core/tokens.css';`,
+        `@import '~@servicetitan/anvil-fonts/dist/css/anvil-fonts.css';`,
+        `@import '~@servicetitan/design-system/dist/system.min.css';`,
+    ].join('\n');
+}
+
+function indexCode({ embed }: Context) {
+    return [
+        `import { register } from '@servicetitan/web-components';`,
+        `import { App } from './app';`,
+        ...(embed
+            ? [`register(App, true);`]
+            : [`require('./design-system.css');`, `register(App, false);`]),
+    ].join('\n');
+}

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

@@ -0,0 +1,38 @@
+import { Configuration } from 'webpack';
+import {
+    assetsManifestPlugin,
+    bundleAnalyzerPlugin,
+    defineExposedDependenciesPlugin,
+    defineWebComponentNamePlugin,
+    filterWarningsPlugin,
+    htmlPlugin,
+    miniCssExtractPlugin,
+    momentLocalesPlugin,
+    provideReactPlugin,
+    tsCheckerPlugin,
+    virtualModulesPlugin,
+} from './plugins';
+import { Context, Overrides } from './types';
+
+type Config = Configuration['plugins'];
+type Result = Pick<Configuration, 'plugins'>;
+
+export function pluginsConfig(context: Context, overrides: Overrides): Result {
+    const plugins: Config = [
+        assetsManifestPlugin,
+        bundleAnalyzerPlugin,
+        defineExposedDependenciesPlugin,
+        defineWebComponentNamePlugin,
+        filterWarningsPlugin,
+        htmlPlugin,
+        miniCssExtractPlugin,
+        momentLocalesPlugin,
+        tsCheckerPlugin,
+        provideReactPlugin,
+        virtualModulesPlugin,
+    ]
+        .map(fn => fn(context, overrides))
+        .filter(plugin => !!plugin);
+
+    return { plugins };
+}

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

@@ -0,0 +1,13 @@
+import { Configuration } from 'webpack';
+import { Context, Overrides } from './types';
+
+type Config = Configuration['resolve'];
+type Result = Pick<Configuration, 'resolve'>;
+
+export function resolveConfig(_context: Context, _: Overrides): Result {
+    const resolve: Config = {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    };
+
+    return { resolve };
+}

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

@@ -0,0 +1,36 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { RuleSetRule } from 'webpack';
+import { cssLoader, styleLoader } from '../loaders';
+import { Context } from '../types';
+
+export function cssRules(context: Context): RuleSetRule[] {
+    const { isExposeSharedDependencies, isProduction } = context;
+
+    const excludeCallback = (path: string) => {
+        return (
+            path.endsWith('.module.css') ||
+            (isExposeSharedDependencies && path.endsWith('design-system.css'))
+        );
+    };
+
+    const result: RuleSetRule[] = [
+        {
+            test: /\.module.css$/,
+            use: [styleLoader(context, { esModule: true }), cssLoader(context, { esModule: true })],
+        },
+        {
+            test: /(\.css)$/,
+            exclude: isProduction ? /\.module.css$/ : excludeCallback,
+            use: [styleLoader(context), cssLoader(context)],
+        },
+    ];
+
+    if (isExposeSharedDependencies && !isProduction) {
+        result.push({
+            test: /design-system.css$/,
+            use: [MiniCssExtractPlugin.loader, cssLoader(context)],
+        });
+    }
+
+    return result;
+}

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

@@ -0,0 +1,14 @@
+import { RuleSetRule } from 'webpack';
+import { Context } from '../types';
+
+export function fontRules(_: Context): RuleSetRule[] {
+    return [
+        {
+            test: /\.(woff|woff2|eot|ttf|otf)$/i,
+            type: 'asset/resource',
+            generator: {
+                filename: 'fonts/[contenthash][ext][query]',
+            },
+        },
+    ];
+}

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

@@ -0,0 +1,14 @@
+import { RuleSetRule } from 'webpack';
+import { Context } from '../types';
+
+export function imageRules(_: Context): RuleSetRule[] {
+    return [
+        {
+            test: /\.(png|svg|jpg|jpeg|gif)$/i,
+            type: 'asset',
+            generator: {
+                filename: 'images/[contenthash][ext][query]',
+            },
+        },
+    ];
+}

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

@@ -0,0 +1,7 @@
+export * from './css-rules';
+export * from './font-rules';
+export * from './image-rules';
+export * from './js-rules';
+export * from './less-rules';
+export * from './scss-rules';
+export * from './tsx-rules';

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

@@ -0,0 +1,17 @@
+import { RuleSetRule } from 'webpack';
+import { Context } from '../types';
+
+export function jsRules(_: Context): RuleSetRule[] {
+    return [
+        {
+            enforce: 'pre',
+            test: /\.js$/,
+            exclude: /node_modules/,
+            loader: 'source-map-loader',
+        },
+        {
+            test: /\.worker\.js$/,
+            use: { loader: 'worker-loader' },
+        },
+    ];
+}

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

@@ -0,0 +1,21 @@
+import { RuleSetRule } from 'webpack';
+import { cssLoader, lessLoader, styleLoader } from '../loaders';
+import { Context } from '../types';
+
+export function lessRules(context: Context): RuleSetRule[] {
+    return [
+        {
+            test: /\.module.less$/,
+            use: [
+                styleLoader(context, { esModule: true }),
+                cssLoader(context, { esModule: true }),
+                lessLoader(),
+            ],
+        },
+        {
+            test: /(\.less)$/,
+            exclude: /\.module.less$/,
+            use: [styleLoader(context), cssLoader(context), lessLoader()],
+        },
+    ];
+}

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

@@ -0,0 +1,21 @@
+import { RuleSetRule } from 'webpack';
+import { cssLoader, styleLoader } from '../loaders';
+import { Context } from '../types';
+
+export function scssRules(context: Context): RuleSetRule[] {
+    return [
+        {
+            test: /\.module.scss$/,
+            use: [
+                styleLoader(context, { esModule: true }),
+                cssLoader(context, { esModule: true }),
+                'sass-loader',
+            ],
+        },
+        {
+            test: /(\.scss)$/,
+            exclude: /\.module.scss$/,
+            use: [styleLoader(context), cssLoader(context), 'sass-loader'],
+        },
+    ];
+}

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

@@ -0,0 +1,22 @@
+import { RuleSetRule } from 'webpack';
+import { Context } from '../types';
+
+export function tsxRules({ esbuild }: Context): RuleSetRule[] {
+    const loader = esbuild
+        ? {
+              loader: 'esbuild-loader',
+              options: { loader: 'tsx', target: 'es2018' },
+          }
+        : {
+              loader: 'ts-loader',
+              options: { transpileOnly: true },
+          };
+
+    return [
+        {
+            test: /\.tsx?$/,
+            exclude: /node_modules/,
+            use: [loader],
+        },
+    ];
+}

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

@@ -0,0 +1,38 @@
+import { Configuration, RuleSetRule } from 'webpack';
+import { getModuleEntryPath } from '../utils';
+import { cssRules, fontRules, imageRules, jsRules, lessRules, scssRules, tsxRules } from './rules';
+import { Context, Overrides } from './types';
+
+type Config = NonNullable<Configuration['module']>['rules'];
+interface Result {
+    rules: Config;
+}
+
+export function rulesConfig(context: Context, _: Overrides): Result {
+    const rules: Config = [
+        jsRules,
+        imageRules,
+        fontRules,
+        tsxRules,
+        sharedDependenciesRules,
+    ].flatMap(fn => fn(context));
+
+    if (!context.isCustomStyleRules) {
+        rules.push(...[scssRules, lessRules, cssRules].flatMap(fn => fn(context)));
+    }
+
+    return { rules };
+}
+
+function sharedDependenciesRules(context: Context): RuleSetRule[] {
+    const { isExposeSharedDependencies, sharedDependencies } = context;
+    if (!isExposeSharedDependencies) {
+        return [];
+    }
+
+    return Object.entries(sharedDependencies).map(([dependency, variable]) => ({
+        test: getModuleEntryPath(dependency),
+        loader: require.resolve('../loaders/expose-loader'),
+        options: { exposes: variable },
+    }));
+}