agent-hel-react-comps 0.1.0

package/lib/configs/subApp.ts

@@ -0,0 +1,9 @@
+/*
+|--------------------------------------------------------------------------
+|
+| 对应 package.json/name
+|
+|--------------------------------------------------------------------------
+*/
+
+export const LIB_NAME = 'agent-hel-react-comps';

package/lib/entrance/libProperties.ts

@@ -0,0 +1,5 @@
+import comps from '../components';
+
+export type LibProperties = typeof comps;
+
+export default comps;

package/lib/entrance/libTypes.ts

@@ -0,0 +1,10 @@
+import type { LibProperties } from './libProperties';
+import { exposeLib } from 'hel-lib-proxy';
+import { LIB_NAME } from '../configs/subApp';
+
+
+export const lib = exposeLib<LibProperties>(LIB_NAME);
+
+export type Lib = LibProperties;
+
+export default lib;

package/lib/index.tsx

@@ -0,0 +1,36 @@
+/*
+|--------------------------------------------------------------------------
+|
+| 应用可能使用了头部 import 静态导入语法来使用hel模块，所以此处
+| 将应用入口文件后移一层到 loadApp 里并使用 import() 函数载入，这样以后
+| entrance/libProperties 和 loadApp 模块下有其他远程模块依赖且想在整个项目使用静态导入时，
+| 可在此文件main 函数里使用 helMicro.preFetchLib 来提前加载别的远程依赖，
+|
+| @author: fantasticsoul
+| @date: 2022-06-05
+|--------------------------------------------------------------------------
+*/
+// import { preFetchLib } from 'hel-micro';
+import { isMasterApp } from 'hel-iso';
+import { libReady } from 'hel-lib-proxy';
+import { LIB_NAME } from './configs/subApp';
+
+async function main() {
+  // 如有其他包依赖，且需要在逻辑里静态导入，可在此处执行预抓取
+  // await helMicro.preFetchLib('other-lib');
+
+  const libProperties = await import('./entrance/libProperties');
+  console.log('libProperties', libProperties);
+  // 表示模块已准备就绪，注意此处传递的是 default
+  libReady(LIB_NAME, libProperties.default);
+
+  // 非子应用时（即不是被别的模块触发载入的情况），自己挂载渲染节点，方便本地调试
+  if (isMasterApp()) {
+    await import('./loadApp');
+  }
+}
+
+main().catch(console.error);
+
+// avoid isolatedModules warning
+export default 'Hel Module Index file';

package/lib/loadApp.tsx

@@ -0,0 +1,20 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import comps from './components';
+
+function getHostNode(id = 'root') {
+  let node = document.getElementById(id);
+  if (!node) {
+    node = document.createElement('div');
+    node.id = id;
+    document.body.appendChild(node);
+  }
+  return node;
+}
+
+const { REACT_APP_COMP_TYPE = 'HelloRemoteReactComp' } = process.env;
+// @ts-ignore
+const Comp = comps[REACT_APP_COMP_TYPE] || (() => <h1>comp {REACT_APP_COMP_TYPE} not defined</h1>);
+
+ReactDOM.render(<Comp />, getHostNode('root'));

package/lib/react-app-env.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly NODE_ENV: 'development' | 'production' | 'test';
+    readonly PUBLIC_URL: string;
+  }
+}
+
+declare module '*.avif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.bmp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<
+    SVGSVGElement
+  > & { title?: string }>;
+
+  const src: string;
+  export default src;
+}
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

package/lib/setupProxy.js

@@ -0,0 +1,23 @@
+/* eslint-disable */
+
+/**
+ *  配置 proxy, 代理到本地启动的mocker服务
+ *  这份文件是CRA读取的，不属于项目打包后会包含的代码，所以非ts后缀
+*/
+const { createProxyMiddleware: proxy } = require('http-proxy-middleware');
+
+
+function makeProxyConfig(target) {
+  return {
+    target,
+    secure: false,
+    changeOrigin: true,
+    withCredentials: true,
+  };
+}
+
+
+// 如当前组件本地调试时需要发起的请求被代理出去，可配置此文件
+module.exports = function (app) {
+  app.use(proxy('/somepath', makeProxyConfig('https://xxx.yyy.com')));
+};

package/lib/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

package/package.json

@@ -0,0 +1,131 @@
+{
+  "name": "agent-hel-react-comps",
+  "appGroupName": "agent-hel-react-comps",
+  "main": "hel_proxy/entry.js",
+  "module": "hel_proxy_es/entry.js",
+  "types": "lib/entrance/libTypes.ts",
+  "unpkg": "hel_dist/index.html",
+  "version": "0.1.0",
+  "dependencies": {
+    "hel-iso": "^4.3.2",
+    "hel-lib-proxy": "^4.7.0",
+    "hel-micro": "^4.7.1",
+    "react": ">=16.8.0",
+    "react-app-polyfill": "^3.0.0",
+    "react-dom": ">=16.8.0"
+  },
+  "peerDependencies": {
+    "hel-iso": "^4.3.2",
+    "hel-lib-proxy": "^4.7.0",
+    "hel-micro": "^4.7.1",
+    "react": ">=16.8.0",
+    "react-app-polyfill": "^3.0.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+    "@svgr/webpack": "^5.5.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.11.56",
+    "@types/react": "^18.0.18",
+    "@types/react-dom": "^18.0.6",
+    "babel-jest": "^27.4.2",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-named-asset-import": "^0.3.8",
+    "babel-preset-react-app": "^10.0.1",
+    "bfj": "^7.0.2",
+    "browserslist": "^4.18.1",
+    "camelcase": "^6.2.1",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "css-loader": "^6.5.1",
+    "css-minimizer-webpack-plugin": "^3.2.0",
+    "dotenv": "^10.0.0",
+    "dotenv-expand": "^5.1.0",
+    "eslint": "^8.3.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-webpack-plugin": "^3.1.1",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^10.0.0",
+    "hel-dev-utils": "^4.3.11",
+    "html-webpack-plugin": "^5.5.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.4.3",
+    "jest-resolve": "^27.4.2",
+    "jest-watch-typeahead": "^1.0.0",
+    "mini-css-extract-plugin": "^2.4.5",
+    "postcss": "^8.4.4",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^6.2.1",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^7.0.1",
+    "prompts": "^2.4.2",
+    "react-dev-utils": "^12.0.1",
+    "react-refresh": "^0.11.0",
+    "replace-absolute-path": "^1.3.4",
+    "resolve": "^1.20.0",
+    "resolve-url-loader": "^4.0.0",
+    "rollup-plugin-typescript": "^1.0.1",
+    "sass-loader": "^12.3.0",
+    "semver": "^7.3.5",
+    "source-map-loader": "^3.0.0",
+    "style-loader": "^3.3.1",
+    "tailwindcss": "^3.0.2",
+    "terser-webpack-plugin": "^5.2.5",
+    "typescript": "4.8.4",
+    "web-vitals": "^2.1.4",
+    "webpack": "^5.64.4",
+    "webpack-dev-server": "^4.6.0",
+    "webpack-manifest-plugin": "^4.0.2",
+    "workbox-webpack-plugin": "^6.4.1"
+  },
+  "scripts": {
+    "postinstall": "node ./scripts/postinstall.js",
+    "prepublishOnly": "node ./scripts/prepublishOnly.js",
+    "check": "node ./scripts/check.js",
+    "start": "cross-env PORT=3103 node scripts/start.js",
+    "build": "npm run check_name && npm run build_dist && npm run build_meta && npm run build_proxy",
+    "check_name": "node scripts/check.js",
+    "build_dist": "node scripts/build.js",
+    "build_meta": "node scripts/meta.js",
+    "build_proxy": "npm run build_proxy_umd && npm run build_proxy_es",
+    "build_proxy_umd": "tsc & node ./scripts/replaceToRelativePath.js & rollup -c",
+    "build_proxy_es": "tsc & node ./scripts/replaceToRelativePath.js & cross-env BUILD_ENV=es rollup -c",
+    "lint": "eslint ./src --ext ts,tsx",
+    "lintfix": "eslint ./src --ext ts,tsx --fix",
+    "build_cust": "npm run set_home_page \"npm run build_dist && npm run build_meta\"",
+    "set_home_page": "cross-env-shell HEL_APP_HOME_PAGE=http://127.0.0.1:8103",
+    "test": "jest",
+    "snap": "jest -u"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
+  },
+  "files": [
+    "hel_dist",
+    "hel_proxy",
+    "hel_proxy_es",
+    "lib",
+    "src",
+    "README.md",
+    "tsconfig.json",
+    "scripts"
+  ]
+}

package/scripts/build.js

@@ -0,0 +1,217 @@
+'use strict';
+
+// Do this as the first thing so that any code reading it knows the right env.
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', err => {
+  throw err;
+});
+
+// Ensure environment variables are read.
+require('../config/env');
+
+const path = require('path');
+const chalk = require('react-dev-utils/chalk');
+const fs = require('fs-extra');
+const bfj = require('bfj');
+const webpack = require('webpack');
+const configFactory = require('../config/webpack.config');
+const paths = require('../config/paths');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
+const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
+const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
+const printBuildError = require('react-dev-utils/printBuildError');
+
+const measureFileSizesBeforeBuild =
+  FileSizeReporter.measureFileSizesBeforeBuild;
+const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
+const useYarn = fs.existsSync(paths.yarnLockFile);
+
+// These sizes are pretty large. We'll warn for bundles exceeding them.
+const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
+const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
+
+const isInteractive = process.stdout.isTTY;
+
+// Warn and crash if required files are missing
+if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
+  process.exit(1);
+}
+
+const argv = process.argv.slice(2);
+const writeStatsJson = argv.indexOf('--stats') !== -1;
+
+// Generate configuration
+const config = configFactory('production');
+
+// We require that you explicitly set browsers and do not fall back to
+// browserslist defaults.
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
+checkBrowsers(paths.appPath, isInteractive)
+  .then(() => {
+    // First, read the current file sizes in build directory.
+    // This lets us display how much they changed later.
+    return measureFileSizesBeforeBuild(paths.appBuild);
+  })
+  .then(previousFileSizes => {
+    // Remove all content but keep the directory so that
+    // if you're in it, you don't end up in Trash
+    fs.emptyDirSync(paths.appBuild);
+    // Merge with the public folder
+    copyPublicFolder();
+    // Start the webpack build
+    return build(previousFileSizes);
+  })
+  .then(
+    ({ stats, previousFileSizes, warnings }) => {
+      if (warnings.length) {
+        console.log(chalk.yellow('Compiled with warnings.\n'));
+        console.log(warnings.join('\n\n'));
+        console.log(
+          '\nSearch for the ' +
+            chalk.underline(chalk.yellow('keywords')) +
+            ' to learn more about each warning.'
+        );
+        console.log(
+          'To ignore, add ' +
+            chalk.cyan('// eslint-disable-next-line') +
+            ' to the line before.\n'
+        );
+      } else {
+        console.log(chalk.green('Compiled successfully.\n'));
+      }
+
+      console.log('File sizes after gzip:\n');
+      printFileSizesAfterBuild(
+        stats,
+        previousFileSizes,
+        paths.appBuild,
+        WARN_AFTER_BUNDLE_GZIP_SIZE,
+        WARN_AFTER_CHUNK_GZIP_SIZE
+      );
+      console.log();
+
+      const appPackage = require(paths.appPackageJson);
+      const publicUrl = paths.publicUrlOrPath;
+      const publicPath = config.output.publicPath;
+      const buildFolder = path.relative(process.cwd(), paths.appBuild);
+      printHostingInstructions(
+        appPackage,
+        publicUrl,
+        publicPath,
+        buildFolder,
+        useYarn
+      );
+    },
+    err => {
+      const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
+      if (tscCompileOnError) {
+        console.log(
+          chalk.yellow(
+            'Compiled with the following type errors (you may want to check these before deploying your app):\n'
+          )
+        );
+        printBuildError(err);
+      } else {
+        console.log(chalk.red('Failed to compile.\n'));
+        printBuildError(err);
+        process.exit(1);
+      }
+    }
+  )
+  .catch(err => {
+    if (err && err.message) {
+      console.log(err.message);
+    }
+    process.exit(1);
+  });
+
+// Create the production build and print the deployment instructions.
+function build(previousFileSizes) {
+  console.log('Creating an optimized production build...');
+
+  const compiler = webpack(config);
+  return new Promise((resolve, reject) => {
+    compiler.run((err, stats) => {
+      let messages;
+      if (err) {
+        if (!err.message) {
+          return reject(err);
+        }
+
+        let errMessage = err.message;
+
+        // Add additional information for postcss errors
+        if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
+          errMessage +=
+            '\nCompileError: Begins at CSS selector ' +
+            err['postcssNode'].selector;
+        }
+
+        messages = formatWebpackMessages({
+          errors: [errMessage],
+          warnings: [],
+        });
+      } else {
+        messages = formatWebpackMessages(
+          stats.toJson({ all: false, warnings: true, errors: true })
+        );
+      }
+      if (messages.errors.length) {
+        // Only keep the first error. Others are often indicative
+        // of the same problem, but confuse the reader with noise.
+        if (messages.errors.length > 1) {
+          messages.errors.length = 1;
+        }
+        return reject(new Error(messages.errors.join('\n\n')));
+      }
+      if (
+        process.env.CI &&
+        (typeof process.env.CI !== 'string' ||
+          process.env.CI.toLowerCase() !== 'false') &&
+        messages.warnings.length
+      ) {
+        // Ignore sourcemap warnings in CI builds. See #8227 for more info.
+        const filteredWarnings = messages.warnings.filter(
+          w => !/Failed to parse source map/.test(w)
+        );
+        if (filteredWarnings.length) {
+          console.log(
+            chalk.yellow(
+              '\nTreating warnings as errors because process.env.CI = true.\n' +
+                'Most CI servers set it automatically.\n'
+            )
+          );
+          return reject(new Error(filteredWarnings.join('\n\n')));
+        }
+      }
+
+      const resolveArgs = {
+        stats,
+        previousFileSizes,
+        warnings: messages.warnings,
+      };
+
+      if (writeStatsJson) {
+        return bfj
+          .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
+          .then(() => resolve(resolveArgs))
+          .catch(error => reject(new Error(error)));
+      }
+
+      return resolve(resolveArgs);
+    });
+  });
+}
+
+function copyPublicFolder() {
+  fs.copySync(paths.appPublic, paths.appBuild, {
+    dereference: true,
+    filter: file => file !== paths.appHtml,
+  });
+}

package/scripts/check.js

@@ -0,0 +1,13 @@
+/*
+|--------------------------------------------------------------------------
+|
+| 此脚本在流水线上会被触发，用于校验组名是否和应用里的组名保持一致
+|
+|--------------------------------------------------------------------------
+*/
+const path = require('path');
+const helDevUtils = require('hel-dev-utils');
+const pkg = require('../package.json');
+
+const fileFullPath = path.join(__dirname, '../src/configs/subApp');
+helDevUtils.check(pkg, { fileFullPath, checkEnv: false });

package/scripts/meta.js

@@ -0,0 +1,21 @@
+/*
+|--------------------------------------------------------------------------
+|
+| 生成meta
+|
+|--------------------------------------------------------------------------
+*/
+const process = require('process');
+const path = require('path');
+const helDevUtils = require('hel-dev-utils');
+const packageJson = require('../package.json');
+const appInfo = require('../config/appInfo');
+
+helDevUtils.extractHelMetaJson({
+  appInfo,
+  buildDirFullPath: path.join(__dirname, '../hel_dist'),
+  packageJson,
+}).catch(err => {
+  console.error(err);
+  process.exit(-1);
+});

package/scripts/postinstall.js

@@ -0,0 +1,10 @@
+
+console.log('---------------------------------------------------------------------------------------');
+console.log('| ');
+console.log('| Welcome to use hel remote component');
+console.log('| this lib only offer types(may include source code), its dist file is nearly empty,');
+console.log('| so it has no effect on your app webpack bundle size! ');
+console.log('| you should use hel-micro to load remote component.');
+console.log('| see https://tnfe.github.io/hel to know more details of hel-micro');
+console.log('| ');
+console.log('---------------------------------------------------------------------------------------');

package/scripts/prepublishOnly.js

@@ -0,0 +1,28 @@
+/*
+|--------------------------------------------------------------------------
+| npm publush 前检查根目录下 package.json 的版本号是否和 hel_dist/hel-meta.json 一致
+|--------------------------------------------------------------------------
+*/
+
+const chalk = require("react-dev-utils/chalk");
+const pkg = require("../package.json");
+const fs = require("fs");
+const path = require("path");
+const helDistPath = path.resolve(__dirname, "../hel_dist/hel-meta.json");
+const existHelMeata = fs.existsSync(helDistPath);
+
+// 检查是否执行npm run build 打包命令
+if (!existHelMeata) {
+  console.log(chalk.red("Run the 'npm run build' command first.\n"));
+  process.exit(1);
+}
+const { app } = JSON.parse(fs.readFileSync(helDistPath, "utf-8"));
+// 检查根目录下 package.json 的版本号是否和 hel_dist/hel-meta.json 一致
+if (app?.build_version !== pkg.version) {
+  console.log(
+    chalk.red(
+      "The package.json version number and the hel_dist/hel-meta.json version number must be the same.\n"
+    )
+  );
+  process.exit(1);
+}

package/scripts/replaceToRelativePath.js

@@ -0,0 +1,31 @@
+/*
+|--------------------------------------------------------------------------
+|
+| convert absolute path based baseUrl to relative path
+|
+| 配合 npm run build_types 命令执行的脚本
+| 用于将所有的绝对引用路径转为相对应用路径
+| 例如：import { isSubApp } from 'services/appEnv';
+| 将转为：import { isSubApp } from '../../services/appEnv';
+| 这样被别的项目引用时才能正确的导出整个项目的推导类型
+|--------------------------------------------------------------------------
+*/
+const path = require('path');
+const replacePath = require('replace-absolute-path');
+// const { replaceRelativePath: replacePath, DEFAULT_EXTS } = require('./replace-relative-path');
+
+
+(async function () {
+  const srcDir = process.env.BUNDLE === 'true' ? path.resolve(__dirname, '../lib-js') : path.resolve(__dirname, '../src');
+  const libDir = process.env.BUNDLE === 'true' ? path.resolve(__dirname, '../lib-js') : path.resolve(__dirname, '../lib');
+  replacePath({
+    inputDir: srcDir,
+    outputDir: libDir,
+    // includeExts: DEFAULT_EXTS.concat(['.md']),
+    afterReplaced: () => {
+      console.log('----------------------------------------------------------------------------------');
+      console.log(`| all files import statements been transformed to relative path for ${libDir} ^_^ |`);
+      console.log('----------------------------------------------------------------------------------');
+    },
+  });
+})();