@gravity-ui/app-builder 0.3.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [0.4.1](https://github.com/gravity-ui/app-builder/compare/v0.4.0...v0.4.1) (2023-05-19)
+
+
+### Bug Fixes
+
+* **worker-loader:** correctly get main worker asset ([#22](https://github.com/gravity-ui/app-builder/issues/22)) ([31984c9](https://github.com/gravity-ui/app-builder/commit/31984c9c057a915233db3d9aed470ce6d4040db4))
+
+## [0.4.0](https://github.com/gravity-ui/app-builder/compare/v0.3.0...v0.4.0) (2023-05-19)
+
+
+### ⚠ BREAKING CHANGES
+
+* **Client:** change default value for setting `client.symlinks`, used default (true) from webpack.
+
+### Features
+
+* **Client:** add setting to watch changes in node_modules ([#21](https://github.com/gravity-ui/app-builder/issues/21)) ([3a5dea6](https://github.com/gravity-ui/app-builder/commit/3a5dea6284f3a768650b388115a83136ba1b7a07))
+* **WebWorker:** support webpack 5 web workers syntax ([#19](https://github.com/gravity-ui/app-builder/issues/19)) ([bf784bb](https://github.com/gravity-ui/app-builder/commit/bf784bb6480c60497bc79c93e70d61aaead80909))
+
 ## [0.3.0](https://github.com/gravity-ui/app-builder/compare/v0.2.2...v0.3.0) (2023-05-08)
 
 

package/README.md

@@ -198,6 +198,7 @@ With this `{rootDir}/src/ui/tsconfig.json`:
   - `type` (`'https'`) — allow to serve over HTTPS.
   - `options` (`import('https').ServerOptions`) — allow to provide your own certificate.
 - `watchOptions` — a set of options used to customize watch mode, [more](https://webpack.js.org/configuration/watch/#watchoptions)
+  - `watchPackages` (`boolean`) - watch all changes in `node_modules`.
 - `disableReactRefresh` (`boolean`) — disable `react-refresh` in dev mode.
 - `detectCircularDependencies` (`true | CircularDependenciesOptions`) - detect modules with circular dependencies, [more](https://github.com/aackerman/circular-dependency-plugin)
 
@@ -232,3 +233,71 @@ With this `{rootDir}/src/ui/tsconfig.json`:
   - `languages` (`string[]`) - include only a subset of the languages supported.
   - `features` (`string[]`) - include only a subset of the editor features.
   - `customLanguages` (`IFeatureDefinition[]`) - include custom languages (outside of the ones shipped with the `monaco-editor`).
+
+##### WebWorker support
+
+Web workers allow you to run JavaScript code in a separate thread from the main UI thread.
+This can improve the performance and responsiveness of your web application by offloading
+intensive tasks to the background.
+
+To create a web worker, you need to write a script file that defines the logic of the worker. For example,
+this file (my.worker.ts) implements a simple function that adds two numbers and sends the result back to the main thread:
+
+```ts
+// my.worker.ts
+self.onmessage = async (ev) => {
+  const {a = 0, b = 0} = ev.data || {};
+  const result = a + b;
+  self.postMessage({
+    result,
+  });
+};
+```
+
+`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:
+
+- `newWebWorkerSyntax: false` (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:
+
+```ts
+// main.ts
+import MyWorker from './my.worker.ts';
+
+const worker = new MyWorker();
+```
+
+In this variant, you need to add some type declarations for the worker files::
+
+```ts
+// worker.d.ts
+declare module '*.worker.ts' {
+  class WebpackWorker extends Worker {}
+
+  export default WebpackWorker;
+}
+```
+
+- `newWebWorkerSyntax: true` - 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
+import {Worker} from '@gravity-ui/app-builder/worker';
+
+const MyWorker = new Worker(new URL('./my.worker'), import.meta.url);
+```
+
+To use the web worker in your main script, you need to communicate with it using the postMessage and onmessage methods. For example:
+
+```ts
+// main.ts
+
+const worker = '...'; // Worker creation, first or second variant
+
+worker.onmessage = ({data: {result}}) => {
+  console.log(result);
+};
+
+worker.postMessage({a: 1, b: 2});
+```

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

@@ -137,9 +137,21 @@ export interface ClientConfig {
     polyfill?: {
         process?: boolean;
     };
+    /**
+     * Add additional options to DefinePlugin
+     */
     definitions?: DefinePlugin['definitions'];
-    watchOptions?: Configuration['watchOptions'];
+    watchOptions?: Configuration['watchOptions'] & {
+        /**
+         * watch changes in node_modules
+         */
+        watchPackages?: boolean;
+    };
     cdn?: CdnUploadConfig | CdnUploadConfig[];
+    /**
+     * use webpack 5 Web Workers [syntax](https://webpack.js.org/guides/web-workers/#syntax)
+     */
+    newWebWorkerSyntax?: boolean;
 }
 interface CdnUploadConfig {
     bucket: string;

package/dist/common/webpack/config.js

@@ -79,7 +79,7 @@ function webpackConfigFactory(webpackMode, config, { logger } = {}) {
         optimization: configureOptimization(helperOptions),
         externals: config.externals,
         node: config.node,
-        watchOptions: config.watchOptions,
+        watchOptions: configureWatchOptions(helperOptions),
         ignoreWarnings: [/Failed to parse source map/],
         infrastructureLogging: config.verbose
             ? {
@@ -99,6 +99,9 @@ function webpackConfigFactory(webpackMode, config, { logger } = {}) {
                     : undefined,
             }
             : undefined,
+        snapshot: {
+            managedPaths: config.watchOptions?.watchPackages ? [] : undefined,
+        },
     };
 }
 exports.webpackConfigFactory = webpackConfigFactory;
@@ -156,6 +159,17 @@ function configureDevTool({ isEnvProduction, config }) {
     }
     return config.disableSourceMapGeneration ? false : format;
 }
+function configureWatchOptions({ config }) {
+    const watchOptions = {
+        ...config.watchOptions,
+        followSymlinks: config.watchOptions?.followSymlinks ??
+            (!config.symlinks && config.watchOptions?.watchPackages)
+            ? true
+            : undefined,
+    };
+    delete watchOptions.watchPackages;
+    return watchOptions;
+}
 function configureResolve({ isEnvProduction, config, tsLinkedPackages, }) {
     let alias = config.alias || {};
     alias = Object.entries(alias).reduce((result, [key, value]) => {
@@ -179,7 +193,7 @@ function configureResolve({ isEnvProduction, config, tsLinkedPackages, }) {
         },
         modules: ['node_modules', ...modules, ...(config.modules || [])],
         extensions: ['.mjs', '.cjs', '.js', '.jsx', '.ts', '.tsx', '.json'],
-        symlinks: config.symlinks || false,
+        symlinks: config.symlinks,
         fallback: config.fallback,
     };
 }
@@ -280,14 +294,18 @@ function createWorkerRule(options) {
         test: /\.worker\.[jt]sx?$/,
         exclude: /node_modules/,
         use: [
-            {
-                loader: require.resolve('worker-loader'),
-                // currently workers located on cdn are not working properly, so we are enforcing loading workers from
-                // service instead
-                options: {
-                    inline: 'no-fallback',
+            options.config.newWebWorkerSyntax
+                ? {
+                    loader: require.resolve('./worker/worker-loader'),
+                }
+                : {
+                    loader: require.resolve('worker-loader'),
+                    // currently workers located on cdn are not working properly, so we are enforcing loading workers from
+                    // service instead
+                    options: {
+                        inline: 'no-fallback',
+                    },
                 },
-            },
             createJavaScriptLoader(options),
         ],
     };
@@ -533,7 +551,10 @@ function configurePlugins(options) {
     }
     if (isEnvDevelopment && !config.disableReactRefresh) {
         const { webSocketPath = path_1.default.normalize(`/${config.publicPathPrefix}/build/sockjs-node`) } = config.devServer || {};
-        plugins.push(new react_refresh_webpack_plugin_1.default({ overlay: { sockPath: webSocketPath } }));
+        plugins.push(new react_refresh_webpack_plugin_1.default({
+            overlay: { sockPath: webSocketPath },
+            exclude: /\.worker\.[jt]sx?$/,
+        }));
     }
     if (config.detectCircularDependencies) {
         let circularPluginOptions = {

package/dist/common/webpack/public-path.js

@@ -1,2 +1,2 @@
 "use strict";
-__webpack_public_path__ = window.__PUBLIC_PATH__;
+__webpack_public_path__ = window.__PUBLIC_PATH__ ?? '/build/';

package/dist/common/webpack/worker/public-path.worker.js

@@ -0,0 +1,3 @@
+"use strict";
+// eslint-disable-next-line camelcase, no-implicit-globals
+__webpack_public_path__ = self.__PUBLIC_PATH__;

package/dist/common/webpack/worker/web-worker.d.ts

@@ -0,0 +1,4 @@
+declare class WebWorker extends Worker {
+    constructor(url: string | URL, options?: WorkerOptions);
+}
+export { WebWorker as Worker };

package/dist/common/webpack/worker/web-worker.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Worker = void 0;
+class WebWorker extends Worker {
+    constructor(url, options) {
+        // eslint-disable-next-line camelcase
+        const publicPath = __webpack_public_path__;
+        const workerPublicPath = publicPath.match(/^https?:\/\//)
+            ? publicPath
+            : new URL(publicPath, window.location.href).toString();
+        const objectURL = URL.createObjectURL(new Blob([
+            [
+                `self.__PUBLIC_PATH__ = ${JSON.stringify(workerPublicPath)}`,
+                `importScripts(${JSON.stringify(url.toString())});`,
+            ].join('\n'),
+        ], {
+            type: 'application/javascript',
+        }));
+        super(objectURL, options);
+        URL.revokeObjectURL(objectURL);
+    }
+}
+exports.Worker = WebWorker;

package/dist/common/webpack/worker/worker-loader.d.ts

@@ -0,0 +1,2 @@
+import webpack from 'webpack';
+export declare const pitch: webpack.PitchLoaderDefinitionFunction;

package/dist/common/webpack/worker/worker-loader.js

@@ -0,0 +1,120 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pitch = void 0;
+const node_path_1 = __importDefault(require("node:path"));
+const webpack_1 = __importDefault(require("webpack"));
+const NodeTargetPlugin_1 = __importDefault(require("webpack/lib/node/NodeTargetPlugin"));
+const WebWorkerTemplatePlugin_1 = __importDefault(require("webpack/lib/webworker/WebWorkerTemplatePlugin"));
+const FetchCompileWasmPlugin_1 = __importDefault(require("webpack/lib/web/FetchCompileWasmPlugin"));
+const FetchCompileAsyncWasmPlugin_1 = __importDefault(require("webpack/lib/web/FetchCompileAsyncWasmPlugin"));
+const paths_1 = __importDefault(require("../../paths"));
+const publicPath = node_path_1.default.resolve(__dirname, 'public-path.worker.js');
+const pitch = function (request) {
+    this.cacheable(false);
+    if (!this._compiler || !this._compilation) {
+        throw new Error('Something went wrong');
+    }
+    const compilerOptions = this._compiler.options;
+    const logger = this.getLogger('APP_BUILDER_WORKER_LOADER');
+    if (compilerOptions.output.globalObject === 'window') {
+        logger.warn('Warning (app-builder-worker-loader): output.globalObject is set to "window". It should be set to "self" or "this" to support HMR in Workers.');
+    }
+    const isEnvProduction = compilerOptions.mode === 'production';
+    const filename = 'worker.js';
+    const chunkFilename = isEnvProduction
+        ? 'js/[name].[contenthash:8].worker.js'
+        : 'js/[name].worker.js';
+    const workerOptions = {
+        filename,
+        chunkFilename,
+        publicPath: compilerOptions.output.publicPath,
+        globalObject: 'self',
+        devtoolNamespace: node_path_1.default.resolve('/', node_path_1.default.relative(paths_1.default.app, this.resource)),
+    };
+    const workerCompiler = this._compilation.createChildCompiler(`worker ${request}`, workerOptions);
+    new WebWorkerTemplatePlugin_1.default().apply(workerCompiler);
+    if (this.target !== 'webworker' && this.target !== 'web') {
+        new NodeTargetPlugin_1.default().apply(workerCompiler);
+    }
+    new FetchCompileWasmPlugin_1.default({
+        mangleImports: this._compiler.options.optimization.mangleWasmImports,
+    }).apply(workerCompiler);
+    new FetchCompileAsyncWasmPlugin_1.default().apply(workerCompiler);
+    const bundleName = node_path_1.default.parse(this.resourcePath).name;
+    new webpack_1.default.EntryPlugin(this.context, `!!${publicPath}`, bundleName).apply(workerCompiler);
+    new webpack_1.default.EntryPlugin(this.context, `!!${request}`, bundleName).apply(workerCompiler);
+    configureSourceMap(workerCompiler);
+    const cb = this.async();
+    workerCompiler.compile((err, compilation) => {
+        if (!compilation) {
+            return undefined;
+        }
+        workerCompiler.parentCompilation?.children.push(compilation);
+        if (err) {
+            return cb(err);
+        }
+        if (compilation.errors && compilation.errors.length) {
+            const errorDetails = compilation.errors
+                .map((error) => {
+                if (error instanceof Error) {
+                    return error.stack;
+                }
+                return error;
+            })
+                .join('\n');
+            return cb(new Error('Child compilation failed:\n' + errorDetails));
+        }
+        const contents = compilation.assets[filename]?.source();
+        const mapFile = `${filename}.map`;
+        let map = compilation.assets[mapFile]?.source();
+        if (map) {
+            const sourceMap = JSON.parse(map.toString());
+            if (Array.isArray(sourceMap.sources)) {
+                sourceMap.sources = sourceMap.sources.map((pathname) => pathname.replace(/webpack:\/\/[^/]+\//, 'webpack://'));
+            }
+            map = JSON.stringify(sourceMap);
+        }
+        for (const [assetName, asset] of Object.entries(compilation.assets)) {
+            if ([filename, mapFile].includes(assetName)) {
+                continue;
+            }
+            workerCompiler.parentCompilation?.emitAsset(assetName, asset, compilation.assetsInfo.get(assetName));
+        }
+        return cb(null, contents, map?.toString());
+    });
+};
+exports.pitch = pitch;
+function configureSourceMap(compiler) {
+    const devtool = compiler.options.devtool;
+    if (devtool) {
+        if (devtool.includes('source-map')) {
+            // remove parent SourceMapDevToolPlugin from compilation
+            for (const hook of Object.values(compiler.hooks)) {
+                for (let i = hook.taps.length - 1; i >= 0; i--) {
+                    const tap = hook.taps[i];
+                    if (tap?.name === 'SourceMapDevToolPlugin') {
+                        hook.taps.splice(i, 1);
+                    }
+                }
+            }
+            const hidden = devtool.includes('hidden');
+            const inline = devtool.includes('inline');
+            const cheap = devtool.includes('cheap');
+            const moduleMaps = devtool.includes('module');
+            new webpack_1.default.SourceMapDevToolPlugin({
+                filename: inline ? null : compiler.options.output.sourceMapFilename,
+                moduleFilenameTemplate: compiler.options.output.devtoolModuleFilenameTemplate,
+                fallbackModuleFilenameTemplate: compiler.options.output.devtoolFallbackModuleFilenameTemplate,
+                append: hidden ? false : undefined,
+                module: moduleMaps ? true : !cheap,
+                columns: !cheap,
+                noSources: false,
+                namespace: (compiler.parentCompilation?.outputOptions.devtoolNamespace ?? '') +
+                    compiler.options.output.devtoolNamespace,
+            }).apply(compiler);
+        }
+    }
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { configureWebpackConfigForStorybook, configureServiceWebpackConfig, } from './common/webpack/storybook';
+export * from './common/s3-upload';
 export { createTransformPathsToLocalModules } from './common/typescript/transformers';
 export { defineConfig } from './common/models';
 export type { ProjectConfig, ServiceConfig, LibraryConfig, ProjectFileConfig } from './common/models';

package/dist/index.js

@@ -1,9 +1,24 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defineConfig = exports.createTransformPathsToLocalModules = exports.configureServiceWebpackConfig = exports.configureWebpackConfigForStorybook = void 0;
 var storybook_1 = require("./common/webpack/storybook");
 Object.defineProperty(exports, "configureWebpackConfigForStorybook", { enumerable: true, get: function () { return storybook_1.configureWebpackConfigForStorybook; } });
 Object.defineProperty(exports, "configureServiceWebpackConfig", { enumerable: true, get: function () { return storybook_1.configureServiceWebpackConfig; } });
+__exportStar(require("./common/s3-upload"), exports);
 var transformers_1 = require("./common/typescript/transformers");
 Object.defineProperty(exports, "createTransformPathsToLocalModules", { enumerable: true, get: function () { return transformers_1.createTransformPathsToLocalModules; } });
 var models_1 = require("./common/models");

package/package.json

@@ -1,10 +1,30 @@
 {
   "name": "@gravity-ui/app-builder",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Develop and build your React client-server projects, powered by typescript and webpack",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    "./worker": {
+      "types": "./dist/common/webpack/worker/web-worker.d.ts",
+      "default": "./dist/common/webpack/worker/web-worker.js"
+    },
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "index.d.ts": [
+        "./dist/index.d.ts"
+      ],
+      "worker": [
+        "./dist/common/webpack/worker/web-worker.d.ts"
+      ]
+    }
+  },
   "bin": {
     "app-builder": "dist/cli.js"
   },