@infomaximum/package-cli 1.4.2 → 1.5.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+## [1.5.0](https://github.com/Infomaximum/package-cli/compare/v1.4.2...v1.5.0) (2023-12-01)
+
+
+### Features
+
+* добавлена возможность собрать пакет (виджет) с произвольным хостом и портом ([155be21](https://github.com/Infomaximum/package-cli/commit/155be21cc013fa70b3db3d1a5048810710fb0510))

package/README.md

@@ -12,15 +12,23 @@ Package-cli - предоставляет разработчикам набор
 yarn add -D @infomaximum/package-cli
 ```
 
-## Пример использования
+## Примеры использования
+
+Сборка пакета с виджетом:
 
 ```bash
 yarn im-package-cli widget build --entry ./src/index.tsx
 ```
 
+Создание нового пакета с виджетом:
+
+```bash
+npx @infomaximum/package-cli widget init project_name
+```
+
 ## Вывод всех доступных команд
 
-Вы можете использовать флаг `-h` или `--help`, чтобы просмотреть список всех доступных команд и их описаний:
+Вы можете использовать флаг `-h`, чтобы просмотреть список всех доступных команд и их описаний:
 
 ```bash
 yarn im-package-cli -h

package/dist/arguments.js

@@ -2,20 +2,24 @@ import { runBuild } from "./scripts/widget/build.js";
 import { runDevServer } from "./scripts/widget/start.js";
 import { runInitWidget } from "./scripts/widget/init/init.js";
 import { systemRequire } from "./utils.js";
+import { DEFAULT_HOST, DEFAULT_PORT } from "./const.js";
 const packageJson = systemRequire("../package.json");
 const registerWidgetCommands = (cli) => {
     const widgetCommand = cli.command("widget");
     const widgetBuildCommand = widgetCommand.command("build");
     widgetBuildCommand
+        .description("Выполняет сборку пакета для дальнейшей загрузки в систему")
         .option("-e, --entry <path>", "Путь до entrypoint")
+        .option("-p, --port <port>", "Порт который будет указан в манифесте виджета")
+        .option("--host <host>", "host который будет указан в манифесте виджета")
         .description("Запускает сборку проекта")
         .action((options) => runBuild(options));
     const widgetStartCommand = widgetCommand.command("start");
     widgetStartCommand
-        .description("Запускает проект в dev режиме")
+        .description("Выполняет запуск проекта для разработки")
         .option("-e, --entry <path>", "Путь до entrypoint")
-        .option("-p, --port <port>", "Порт на котором будет доступен виджет", "5555")
-        .option("--host <host>", "host на котором будет доступен виджет", "localhost")
+        .option("-p, --port <port>", "Порт на котором будет доступен виджет", DEFAULT_PORT)
+        .option("--host <host>", "host на котором будет доступен виджет", DEFAULT_HOST)
         .action((options) => runDevServer(options));
     const widgetInitCommand = widgetCommand.command("init <project-directory>");
     widgetInitCommand

package/dist/configs/webpack/buildPa/321/201kage.js

@@ -1,9 +1,9 @@
 import ZipPlugin from "zip-webpack-plugin";
 import CopyWebpackPlugin from "copy-webpack-plugin";
-import { archiveExt, buildWidgetConfigName, widgetArchiveName, } from "./common.js";
 import path from "path";
 import { JsonModifyWebpackPlugin } from "@infomaximum/json-modify-webpack-plugin";
 import { systemRequire } from "../../utils.js";
+import { BUILD_ARCHIVE_EXT, BUILD_WIDGET_CONFIG_NAME, WIDGET_ARCHIVE_NAME, } from "../../const.js";
 const packageFilename = "main.js";
 export const getPackageConfig = (mode, PATHS) => {
     const widgetVersion = systemRequire(PATHS.appPackageJson).version;
@@ -13,7 +13,7 @@ export const getPackageConfig = (mode, PATHS) => {
         name: "package",
         entry: [
             PATHS.packageManifest,
-            path.resolve(PATHS.appBuild, `${widgetArchiveName}.${archiveExt}`),
+            path.resolve(PATHS.appBuild, `${WIDGET_ARCHIVE_NAME}.${BUILD_ARCHIVE_EXT}`),
         ],
         output: {
             path: PATHS.appBuild,
@@ -30,7 +30,7 @@ export const getPackageConfig = (mode, PATHS) => {
                     },
                 },
                 {
-                    test: new RegExp(`.${archiveExt}$`, "i"),
+                    test: new RegExp(`.${BUILD_ARCHIVE_EXT}$`, "i"),
                     type: "asset/resource",
                     generator: {
                         filename: "[name][ext]",
@@ -44,7 +44,7 @@ export const getPackageConfig = (mode, PATHS) => {
             }),
             new ZipPlugin({
                 filename: `${manifestPackageName}_${widgetVersion}`,
-                extension: archiveExt,
+                extension: BUILD_ARCHIVE_EXT,
                 exclude: [packageFilename],
             }),
             new JsonModifyWebpackPlugin({
@@ -59,6 +59,6 @@ export const getPackageConfig = (mode, PATHS) => {
                 ],
             }),
         ],
-        dependencies: [buildWidgetConfigName],
+        dependencies: [BUILD_WIDGET_CONFIG_NAME],
     };
 };

package/dist/configs/webpack/common.js

@@ -1,24 +1,15 @@
-import ZipPlugin from "zip-webpack-plugin";
-import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
-import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
 import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
-import TerserWebpackPlugin from "terser-webpack-plugin";
 import { TsconfigPathsPlugin } from "tsconfig-paths-webpack-plugin";
-import { JsonModifyWebpackPlugin } from "@infomaximum/json-modify-webpack-plugin";
 import webpack, {} from "webpack";
 import { systemRequire } from "../../utils.js";
+import { BUILD_WIDGET_CONFIG_NAME } from "../../const.js";
 const { ProgressPlugin } = webpack;
 const isProduction = (mode) => mode === "production";
 const isDevelopment = (mode) => mode === "development";
-export const buildWidgetConfigName = "build-widget";
-export const widgetArchiveName = "widget";
-export const archiveExt = "zip";
-const DEV_SERVER_HOST = "0.0.0.0";
-const DEV_SERVER_PORT = 5555;
 export const getCommonWidgetConfig = (mode, PATHS) => {
     return {
         mode,
-        name: buildWidgetConfigName,
+        name: BUILD_WIDGET_CONFIG_NAME,
         entry: [PATHS.moduleIndex, PATHS.manifestJson],
         output: {
             path: PATHS.appBuild,
@@ -37,23 +28,6 @@ export const getCommonWidgetConfig = (mode, PATHS) => {
                     },
                 },
             }),
-            new ZipPlugin({
-                filename: widgetArchiveName,
-                extension: archiveExt,
-            }),
-            isDevelopment(mode) && new ReactRefreshWebpackPlugin(),
-            isDevelopment(mode) &&
-                new JsonModifyWebpackPlugin({
-                    matchers: [
-                        {
-                            matcher: /^manifest.json$/,
-                            action: (currentJsonContent) => {
-                                currentJsonContent.entry = `http://${DEV_SERVER_HOST}:${DEV_SERVER_PORT}/${currentJsonContent.entry}`;
-                                return currentJsonContent;
-                            },
-                        },
-                    ],
-                }),
         ].filter(Boolean),
         module: {
             rules: [
@@ -186,23 +160,9 @@ export const getCommonWidgetConfig = (mode, PATHS) => {
                 },
             ],
         },
-        optimization: isProduction(mode)
-            ? {
-                minimize: true,
-                splitChunks: false,
-                minimizer: [
-                    new TerserWebpackPlugin({
-                        minify: TerserWebpackPlugin.terserMinify,
-                        parallel: true,
-                    }),
-                    new CssMinimizerPlugin(),
-                ],
-            }
-            : undefined,
         resolve: {
             extensions: [".tsx", ".ts", ".js"],
             plugins: [new TsconfigPathsPlugin()],
         },
-        devtool: isProduction(mode) ? false : "cheap-module-source-map",
     };
 };

package/dist/configs/webpack/{devServer.js → sections/devServer.js}

@@ -9,7 +9,7 @@ export const getDevServerConfig = ({ host, port }) => {
             "Access-Control-Allow-Origin": "*",
         },
         devMiddleware: {
-            writeToDisk: false,
+            writeToDisk: true,
         },
     };
 };

package/dist/configs/webpack/sections/devtool.js

@@ -0,0 +1,3 @@
+export const devtoolSection = {
+    devtool: "inline-source-map",
+};

package/dist/configs/webpack/sections/plugins/minimizer.js

@@ -0,0 +1,17 @@
+import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
+import TerserWebpackPlugin from "terser-webpack-plugin";
+export const getMinimizer = () => {
+    return {
+        optimization: {
+            minimize: true,
+            splitChunks: false,
+            minimizer: [
+                new TerserWebpackPlugin({
+                    minify: TerserWebpackPlugin.terserMinify,
+                    parallel: true,
+                }),
+                new CssMinimizerPlugin(),
+            ],
+        },
+    };
+};

package/dist/configs/webpack/sections/plugins/modifyManifestWidget.js

@@ -0,0 +1,14 @@
+import { JsonModifyWebpackPlugin } from "@infomaximum/json-modify-webpack-plugin";
+export const getModifyManifestWidgetPlugin = ({ host, port }) => {
+    return new JsonModifyWebpackPlugin({
+        matchers: [
+            {
+                matcher: /^manifest.json$/,
+                action: (currentJsonContent) => {
+                    currentJsonContent.entry = `http://${host}:${port}/${currentJsonContent.entry}`;
+                    return currentJsonContent;
+                },
+            },
+        ],
+    });
+};

package/dist/configs/webpack/sections/plugins/reactRefresh.js

@@ -0,0 +1,4 @@
+import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
+export const getReactRefresh = () => {
+    return new ReactRefreshWebpackPlugin();
+};

package/dist/configs/webpack/sections/plugins/zipWidget.js

@@ -0,0 +1,8 @@
+import ZipPlugin from "zip-webpack-plugin";
+import { BUILD_ARCHIVE_EXT, WIDGET_ARCHIVE_NAME } from "../../../../const.js";
+export const getZipWidgetPlugin = () => {
+    return new ZipPlugin({
+        filename: WIDGET_ARCHIVE_NAME,
+        extension: BUILD_ARCHIVE_EXT,
+    });
+};

package/dist/const.js

@@ -1,2 +1,7 @@
 export const CUSTOM_WIDGET_LIB_NAME = "@infomaximum/custom-widget";
 export const CUSTOM_PACKAGE_CLI_LIB_NAME = "@infomaximum/package-cli";
+export const BUILD_WIDGET_CONFIG_NAME = "build-widget";
+export const WIDGET_ARCHIVE_NAME = "widget";
+export const BUILD_ARCHIVE_EXT = "zip";
+export const DEFAULT_HOST = "localhost";
+export const DEFAULT_PORT = "5555";

package/dist/scripts/widget/build.js

@@ -4,18 +4,38 @@ import { generatePaths } from "../../paths.js";
 import { getCommonWidgetConfig } from "../../configs/webpack/common.js";
 import { getPackageConfig } from "../../configs/webpack/buildPaсkage.js";
 import { checkLatestLibsVersion } from "../../utils.js";
+import { merge } from "webpack-merge";
+import { getModifyManifestWidgetPlugin } from "../../configs/webpack/sections/plugins/modifyManifestWidget.js";
+import { getMinimizer } from "../../configs/webpack/sections/plugins/minimizer.js";
+import { getZipWidgetPlugin } from "../../configs/webpack/sections/plugins/zipWidget.js";
 export const runBuild = (args) => __awaiter(void 0, void 0, void 0, function* () {
     const mode = "production";
+    const { entry, host, port } = args;
     yield checkLatestLibsVersion();
     const PATHS = generatePaths({
-        entryPath: args.entry,
+        entryPath: entry,
     });
-    const configList = [
+    const pluginsSection = {
+        plugins: [getZipWidgetPlugin()],
+    };
+    if (host && port) {
+        pluginsSection.plugins.push(getModifyManifestWidgetPlugin({
+            host,
+            port,
+        }));
+    }
+    const configSections = [
         getCommonWidgetConfig(mode, PATHS),
+        pluginsSection,
+        getMinimizer(),
+    ];
+    const widgetConfig = merge(configSections);
+    const configs = [
+        widgetConfig,
         getPackageConfig(mode, PATHS),
     ];
     try {
-        build(configList);
+        build(configs);
     }
     catch (error) {
         console.error("Failed to compile.\n");

package/dist/scripts/widget/start.js

@@ -1,11 +1,14 @@
 import { __awaiter } from "tslib";
-import _webpack from "webpack";
+import _webpack, {} from "webpack";
 import { generatePaths } from "../../paths.js";
 import WebpackDevServer from "webpack-dev-server";
-import { getDevServerConfig } from "../../configs/webpack/devServer.js";
+import { getDevServerConfig } from "../../configs/webpack/sections/devServer.js";
 import { merge } from "webpack-merge";
 import { getCommonWidgetConfig } from "../../configs/webpack/common.js";
 import { checkLatestLibsVersion } from "../../utils.js";
+import { getModifyManifestWidgetPlugin } from "../../configs/webpack/sections/plugins/modifyManifestWidget.js";
+import { getReactRefresh } from "../../configs/webpack/sections/plugins/reactRefresh.js";
+import { devtoolSection } from "../../configs/webpack/sections/devtool.js";
 const { webpack } = _webpack;
 export const runDevServer = (options) => __awaiter(void 0, void 0, void 0, function* () {
     const PATHS = generatePaths({
@@ -25,7 +28,20 @@ export const runDevServer = (options) => __awaiter(void 0, void 0, void 0, funct
 const run = (PATHS, options) => __awaiter(void 0, void 0, void 0, function* () {
     const { host, port } = options;
     const mode = "development";
-    const configWebpack = [getCommonWidgetConfig(mode, PATHS)];
+    const pluginsSection = {
+        plugins: [
+            getModifyManifestWidgetPlugin({
+                host,
+                port,
+            }),
+            getReactRefresh(),
+        ],
+    };
+    const configWebpack = [
+        getCommonWidgetConfig(mode, PATHS),
+        pluginsSection,
+        devtoolSection,
+    ];
     const compiler = webpack(merge(configWebpack));
     const devServerConfig = getDevServerConfig({
         host,

package/dist/templates/widget/src/widgetIndex.js

@@ -1,3 +1,4 @@
+import { capitalizeHelperName } from "../../../scripts/widget/init/helpers.js";
 export const WIDGET_INDEX_TEMPLATE = `\
 import React from "react";
 import ReactDOM from "react-dom/client";
@@ -36,7 +37,7 @@ class CustomWidget implements IWidget<Settings> {
   public render(props: ICustomWidgetProps<Settings>) {
     this.root?.render(
       <React.StrictMode>
-        <div>Custom Component</div>
+        <div>{{ ${capitalizeHelperName} packageName}}</div>
       </React.StrictMode>
     );
   }

package/dist/templates/widget/widgetPackageJson.js

@@ -6,7 +6,8 @@ export const WIDGET_PACKAGE_JSON_TEMPLATE = `\
   "main": "src/index.tsx",
   "scripts": {
     "build": "im-package-cli widget build --entry ./src/index.tsx",
-    "start": "im-package-cli widget start --entry ./src/index.tsx",
+    "build:dev": "im-package-cli widget build --port 5555 --host localhost --entry ./src/index.tsx",
+    "start": "im-package-cli widget start --port 5555 --host localhost --entry ./src/index.tsx",
     "lint": "tsc --noEmit && eslint src/ --ext .ts,.tsx --quiet",
     "test": "jest --passWithNoTests"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infomaximum/package-cli",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "exports": "./dist/index.js",
   "type": "module",
   "license": "Apache-2.0",
@@ -75,8 +75,9 @@
     "url": "git+https://github.com/Infomaximum/package-cli.git"
   },
   "keywords": [
-    "widgets cli",
-    "widgets builder",
+    "package",
+    "builder",
+    "widgets",
     "cli"
   ],
   "bugs": {