@gravity-ui/app-builder 0.33.4-beta.10 → 0.34.1-beta.0

package/README.md

@@ -304,9 +304,9 @@ self.onmessage = async (ev) => {
 ```
 
 `app-builder` provides built-in support for web workers for files with the `.worker.[jt]s` suffix. You can choose
-between two variants of getting web workers by setting the `newWebWorkerSyntax` option:
+between two variants of getting web workers by setting the `webWorkerHandle` option:
 
-- `newWebWorkerSyntax: false` (default) - use the `worker-loader` to import web workers.
+- `loader` (default) - use the `worker-loader` to import web workers.
   Content of worker file will be included in main bundle as blob. This variant does not
   support dynamic imports inside worker. For example:
 
@@ -328,7 +328,7 @@ declare module '*.worker.ts' {
 }
 ```
 
-- `newWebWorkerSyntax: true` - use the webpack 5 web workers [syntax](https://webpack.js.org/guides/web-workers/#syntax)
+- `cdn-compat` - use the webpack 5 web workers [syntax](https://webpack.js.org/guides/web-workers/#syntax)
   to import web workers. This variant allows to use dynamic imports inside worker and load worker bundle from CDN. For example:
 
 ```ts
@@ -337,6 +337,8 @@ import {Worker} from '@gravity-ui/app-builder/worker';
 const MyWorker = new Worker(new URL('./my.worker', import.meta.url));
 ```
 
+- `none` - disable worker-specific handling.
+
 To use the web worker in your main script, you need to communicate with it using the postMessage and onmessage methods. For example:
 
 ```ts

package/dist/common/models/index.d.ts

@@ -3,7 +3,7 @@ import type { EditorFeature } from 'monaco-editor-webpack-plugin/out/features';
 import type { IFeatureDefinition } from 'monaco-editor-webpack-plugin/out/types';
 import type { Options as MomentTzOptions } from 'moment-timezone-data-webpack-plugin';
 import type { Configuration, DefinePlugin, FileCacheOptions, MemoryCacheOptions } from 'webpack';
-import type { LightningCssMinimizerRspackPluginOptions, Configuration as RspackConfiguration, SwcJsMinimizerRspackPluginOptions } from '@rspack/core';
+import type { LazyCompilationOptions, LightningCssMinimizerRspackPluginOptions, Configuration as RspackConfiguration, SwcJsMinimizerRspackPluginOptions } from '@rspack/core';
 import type * as Babel from '@babel/core';
 import type * as Swc from '@swc/core';
 import type { ServerConfiguration } from 'webpack-dev-server';
@@ -52,13 +52,8 @@ export interface LibraryConfig {
     };
     verbose?: boolean;
 }
-interface LazyCompilationConfig {
+interface LazyCompilationConfig extends Pick<LazyCompilationOptions, 'imports' | 'entries' | 'test'> {
     port?: number;
-    /**
-     * @default true
-     * disable lazy compilation for entries
-     */
-    entries?: boolean;
 }
 export type ModuleFederationConfig = Omit<moduleFederationPlugin.ModuleFederationPluginOptions, 'name' | 'remotes'> & {
     /**
@@ -124,6 +119,7 @@ export type ModuleFederationConfig = Omit<moduleFederationPlugin.ModuleFederatio
         prefixSelector: (prefix: string, selector: string, prefixedSelector: string, filePath: string) => string;
     };
 };
+export type WebWorkerHandle = 'loader' | 'cdn-compat' | 'none';
 export interface ClientConfig {
     modules?: string[];
     /**
@@ -261,8 +257,22 @@ export interface ClientConfig {
     cdn?: CdnUploadConfig | CdnUploadConfig[];
     /**
      * use webpack 5 Web Workers [syntax](https://webpack.js.org/guides/web-workers/#syntax)
+     *
+     * @deprecated use `webWorkerHandle` instead
      */
     newWebWorkerSyntax?: boolean;
+    /**
+     * How workers are handled
+     * Worker entry point should have `.worker.ts` postfix
+     *
+     * Files, that match this pattern would be handle with one of the strategies:
+     * - 'loader' - `worker-rspack-loader` would be used
+     * - 'cdn-compat' - bundler will handle WebWorker syntax, but we also rebuild this worker, to correctly handle publicPath from variable for imports inside worker
+     *
+     * @see https://www.npmjs.com/package/worker-rspack-loader
+     * @see https://webpack.js.org/guides/web-workers/
+     */
+    webWorkerHandle?: WebWorkerHandle;
     babelCacheDirectory?: boolean | string;
     cache?: boolean | FileCacheOptions | MemoryCacheOptions;
     /** Use [Lighting CSS](https://lightningcss.dev) to transform and minimize css instead of PostCSS and cssnano*/

package/dist/common/webpack/config.d.ts

@@ -1,6 +1,6 @@
 import * as webpack from 'webpack';
 import type * as Rspack from '@rspack/core';
-import type { NormalizedClientConfig } from '../models';
+import type { NormalizedClientConfig, WebWorkerHandle } from '../models';
 import type { Logger } from '../logger';
 export interface HelperOptions {
     config: NormalizedClientConfig;
@@ -12,6 +12,7 @@ export interface HelperOptions {
     entriesDirectory: string;
     isSsr: boolean;
     configPath?: string;
+    webWorkerHandle: WebWorkerHandle;
 }
 export declare const enum WebpackMode {
     Prod = "production",

package/dist/common/webpack/config.js

@@ -76,6 +76,7 @@ function getHelperOptions({ webpackMode, config, logger, isSsr = false, configPa
         entriesDirectory: isSsr ? paths_1.default.appSsrEntry : paths_1.default.appEntry,
         isSsr,
         configPath,
+        webWorkerHandle: (0, utils_1.getNormalizedWorkerOption)(config),
     };
 }
 function configureExternals({ config, isSsr }) {
@@ -309,6 +310,7 @@ function configureRspackExperiments(options) {
             entries: false,
             imports: true,
             prefix: '/build/lazy-',
+            test: config.lazyCompilation?.test ?? undefined,
         };
     }
     const filesystemCacheOptions = typeof config.cache === 'object' && config.cache.type === 'filesystem'
@@ -586,24 +588,30 @@ function createSourceMapRules(shouldUseSourceMap) {
     return [];
 }
 async function createWorkerRule(options) {
+    const ruleset = [];
+    switch (options.webWorkerHandle) {
+        case 'loader':
+            ruleset.push({
+                loader: require.resolve('worker-rspack-loader'),
+                // currently workers located on cdn are not working properly, so we are enforcing loading workers from
+                // service instead
+                options: {
+                    inline: 'no-fallback',
+                },
+            });
+            break;
+        case 'cdn-compat':
+            ruleset.push({
+                loader: require.resolve('./worker/worker-loader'),
+            });
+            break;
+        case 'none':
+            break;
+    }
     return {
         test: /\.worker\.[jt]sx?$/,
         exclude: /node_modules/,
-        use: [
-            options.config.newWebWorkerSyntax
-                ? {
-                    loader: require.resolve('./worker/worker-loader'),
-                }
-                : {
-                    loader: require.resolve('worker-rspack-loader'),
-                    // currently workers located on cdn are not working properly, so we are enforcing loading workers from
-                    // service instead
-                    options: {
-                        inline: 'no-fallback',
-                    },
-                },
-            await createJavaScriptLoader(options),
-        ],
+        use: [...ruleset, await createJavaScriptLoader(options)],
     };
 }
 function createSassStylesRule(options) {

package/dist/common/webpack/storybook.js

@@ -36,6 +36,7 @@ const config_1 = require("./config");
 const config_2 = require("../config");
 const models_1 = require("../models");
 const paths_1 = __importDefault(require("../paths"));
+const utils_1 = require("./utils");
 async function configureServiceWebpackConfig(mode, storybookConfig) {
     const serviceConfig = await (0, config_2.getProjectConfig)(mode === "production" /* WebpackMode.Prod */ ? 'build' : 'dev', {
         storybook: true,
@@ -115,6 +116,7 @@ async function configureWebpackConfigForStorybook(mode, userConfig = {}, storybo
         buildDirectory: config.client.outputPath || paths_1.default.appBuild,
         entriesDirectory: paths_1.default.appEntry,
         isSsr: false,
+        webWorkerHandle: (0, utils_1.getNormalizedWorkerOption)(config.client),
     };
     return {
         module: {

package/dist/common/webpack/utils.d.ts

@@ -1,6 +1,7 @@
 import type * as Webpack from 'webpack';
 import type { Logger } from '../logger';
 import { MultiStats } from '@rspack/core';
+import { NormalizedClientConfig, WebWorkerHandle } from '../models';
 export declare function compilerHandlerFactory(logger: Logger, onCompilationEnd?: () => void): (err?: Error | null, stats?: Webpack.MultiStats | MultiStats) => Promise<void>;
 export declare function resolveTsConfigPathsToAlias(projectPath: string, filename?: string): {
     aliases?: undefined;
@@ -9,3 +10,4 @@ export declare function resolveTsConfigPathsToAlias(projectPath: string, filenam
     aliases: Record<string, string[]>;
     modules: string[];
 };
+export declare function getNormalizedWorkerOption(config: NormalizedClientConfig): WebWorkerHandle;

package/dist/common/webpack/utils.js

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compilerHandlerFactory = compilerHandlerFactory;
 exports.resolveTsConfigPathsToAlias = resolveTsConfigPathsToAlias;
+exports.getNormalizedWorkerOption = getNormalizedWorkerOption;
 const path = __importStar(require("node:path"));
 const ts = __importStar(require("typescript"));
 const pretty_time_1 = require("../logger/pretty-time");
@@ -99,3 +100,13 @@ function resolveTsConfigPathsToAlias(projectPath, filename = 'tsconfig.json') {
     }
     return { aliases, modules };
 }
+function getNormalizedWorkerOption(config) {
+    let webWorkerHandle = 'loader';
+    if (config.newWebWorkerSyntax) {
+        webWorkerHandle = 'cdn-compat';
+    }
+    if (config.webWorkerHandle) {
+        webWorkerHandle = config.webWorkerHandle;
+    }
+    return webWorkerHandle;
+}

package/dist/create-cli.d.ts

@@ -2,8 +2,8 @@ export type CliArgs = Awaited<ReturnType<typeof createCli>>;
 export declare function createCli(argv: string[]): {
     [x: string]: unknown;
     verbose: boolean | undefined;
-    env: string[] | undefined;
     cdn: string | undefined;
+    env: string[] | undefined;
     target: "client" | "server" | undefined;
     c: unknown;
     inspect: number | undefined;
@@ -32,8 +32,8 @@ export declare function createCli(argv: string[]): {
 } | Promise<{
     [x: string]: unknown;
     verbose: boolean | undefined;
-    env: string[] | undefined;
     cdn: string | undefined;
+    env: string[] | undefined;
     target: "client" | "server" | undefined;
     c: unknown;
     inspect: number | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/app-builder",
-  "version": "0.33.4-beta.10",
+  "version": "0.34.1-beta.0",
   "description": "Develop and build your React client-server projects, powered by typescript and webpack",
   "license": "MIT",
   "type": "commonjs",
@@ -73,9 +73,9 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@rsdoctor/rspack-plugin": "^1.0.2",
     "@rsdoctor/webpack-plugin": "^1.0.2",
-    "@rspack/core": "1.6.5",
+    "@rspack/core": "1.5.5",
     "@rspack/dev-server": "^1.1.4",
-    "@rspack/plugin-react-refresh": "^1.5.3",
+    "@rspack/plugin-react-refresh": "^1.5.1",
     "@statoscope/stats": "^5.28.1",
     "@statoscope/stats-extension-compressed": "^5.28.1",
     "@statoscope/webpack-model": "^5.29.0",
@@ -84,8 +84,8 @@
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
     "@swc/cli": "0.7.8",
-    "@swc/core": "1.14.0",
-    "@swc/plugin-transform-imports": "10.0.0",
+    "@swc/core": "1.13.5",
+    "@swc/plugin-transform-imports": "9.1.0",
     "babel-loader": "^9.2.1",
     "babel-plugin-import": "^1.13.8",
     "babel-plugin-inline-react-svg": "^2.0.2",