hel-test-vue3-comp-esm-lib 1.5.0

package/hel_dist/entry.js

@@ -0,0 +1,37 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('hel-lib-proxy')) :
+	typeof define === 'function' && define.amd ? define(['exports', 'hel-lib-proxy'], factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["components-lib"] = {}, global.helLibProxy));
+})(this, (function (exports, helLibProxy) { 'use strict';
+
+	/*
+	|--------------------------------------------------------------------------
+	|
+	| 对应 package.json/appGroupName
+	|
+	|--------------------------------------------------------------------------
+	*/
+
+	const LIB_NAME = 'components-lib';
+
+	/*
+	|--------------------------------------------------------------------------
+	|
+	| 组件类型导出文件，同时也作为 rollup 的打包入口文件，因只提供类型，rollup 打包后是一个
+	| 仅包含 hel-lib-proxy 的空壳文件，对模块使用方的包体构建大小无影响
+	| 模块使用方 通过 npm i xxx-lib 后，只要在头文件处执行过 preFetchLib
+	| 则整个项目项使用本地模块一样载入提供方的组件，并可以点击到 node_modules 查看源码
+	|
+	|--------------------------------------------------------------------------
+	*/
+	/**
+	 * 将提供给用户的lib暴露出去（同时也暴露了类型）
+	 */
+	var dtlib = helLibProxy.exposeLib(LIB_NAME);
+
+	exports.default = dtlib;
+	exports.dtlib = dtlib;
+
+	Object.defineProperty(exports, '__esModule', { value: true });
+
+}));

package/hel_dist/hel-meta.json

@@ -0,0 +1,73 @@
+{
+  "app": {
+    "name": "components-lib",
+    "app_group_name": "components-lib",
+    "git_repo_url": "",
+    "online_version": "1.5.0",
+    "build_version": "1.5.0",
+    "platform": "unpkg",
+    "create_at": "2026-01-24T09:28:45.452Z"
+  },
+  "version": {
+    "plugin_ver": "5.4.3",
+    "extract_mode": "build",
+    "sub_app_name": "components-lib",
+    "sub_app_version": "components-lib@1.5.0",
+    "version_tag": "1.5.0",
+    "src_map": {
+      "webDirPath": "http://localhost:3000/lib/comp/hel-test-vue3-comp-esm-lib@1.5.0/hel_dist",
+      "htmlIndexSrc": "http://localhost:3000/lib/comp/hel-test-vue3-comp-esm-lib@1.5.0/hel_dist/index.html",
+      "extractMode": "all",
+      "iframeSrc": "",
+      "chunkCssSrcList": [
+        "http://localhost:3000/lib/comp/hel-test-vue3-comp-esm-lib@1.5.0/hel_dist/assets/index-xAurhbX9.css",
+        "http://localhost:3000/lib/comp/hel-test-vue3-comp-esm-lib@1.5.0/hel_dist/assets/loadApp-ht98S9XG.css"
+      ],
+      "chunkJsSrcList": [
+        "http://localhost:3000/lib/comp/hel-test-vue3-comp-esm-lib@1.5.0/hel_dist/assets/index-CHXtSHf9.js",
+        "http://localhost:3000/lib/comp/hel-test-vue3-comp-esm-lib@1.5.0/hel_dist/assets/index-FuFGqtaw.js",
+        "http://localhost:3000/lib/comp/hel-test-vue3-comp-esm-lib@1.5.0/hel_dist/assets/libProperties-DGTH5IvI.js",
+        "http://localhost:3000/lib/comp/hel-test-vue3-comp-esm-lib@1.5.0/hel_dist/assets/loadApp-BWZ2bSto.js"
+      ],
+      "staticCssSrcList": [],
+      "staticJsSrcList": [],
+      "relativeCssSrcList": [],
+      "relativeJsSrcList": [
+        "./assets/index-CHXtSHf9.js"
+      ],
+      "headAssetList": [
+        {
+          "tag": "script",
+          "append": true,
+          "attrs": {
+            "type": "importmap"
+          },
+          "innerText": "\n  {\n    \"imports\": {\n      \"vue\": \"https://unpkg.com/vue@3/dist/vue.esm-browser.js\"\n    }\n  }\n  "
+        },
+        {
+          "tag": "relativeScript",
+          "append": false,
+          "attrs": {
+            "src": "./assets/index-CHXtSHf9.js",
+            "type": "module",
+            "crossorigin": ""
+          }
+        }
+      ],
+      "bodyAssetList": [],
+      "otherSrcList": [
+        "http://localhost:3000/lib/comp/hel-test-vue3-comp-esm-lib@1.5.0/hel_dist/assets/index-CHXtSHf9.js.map",
+        "http://localhost:3000/lib/comp/hel-test-vue3-comp-esm-lib@1.5.0/hel_dist/assets/index-FuFGqtaw.js.map",
+        "http://localhost:3000/lib/comp/hel-test-vue3-comp-esm-lib@1.5.0/hel_dist/assets/libProperties-DGTH5IvI.js.map",
+        "http://localhost:3000/lib/comp/hel-test-vue3-comp-esm-lib@1.5.0/hel_dist/assets/loadApp-BWZ2bSto.js.map",
+        "http://localhost:3000/lib/comp/hel-test-vue3-comp-esm-lib@1.5.0/hel_dist/favicon.ico",
+        "http://localhost:3000/lib/comp/hel-test-vue3-comp-esm-lib@1.5.0/hel_dist/index.html"
+      ],
+      "srvModSrcList": [],
+      "srvModSrcIndex": ""
+    },
+    "html_content": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>tpl-remote-vue-comp</title>\n  <!-- Vue3 CDN -->\n  <!-- <script src=\"https://unpkg.com/vue@3/dist/vue.global.js\"></script> -->\n     <!-- importmap for vue3 -->\n\n  <script type=\"importmap\">\n  {\n    \"imports\": {\n      \"vue\": \"https://unpkg.com/vue@3/dist/vue.esm-browser.js\"\n    }\n  }\n  </script>\n  <script type=\"module\" crossorigin src=\"./assets/index-CHXtSHf9.js\"></script>\n</head>\n<body>\n  <div id=\"app\"></div>\n</body>\n</html>\n",
+    "create_at": "2026-01-24T09:28:45.452Z",
+    "desc": "this version meta is created by hel-dev-utils@5.4.3"
+  }
+}

package/hel_dist/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>tpl-remote-vue-comp</title>
+  <!-- Vue3 CDN -->
+  <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
+     <!-- importmap for vue3 -->
+
+  <script type="importmap">
+  {
+    "imports": {
+      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
+    }
+  }
+  </script>
+  <script type="module" crossorigin src="./assets/index-CHXtSHf9.js"></script>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

package/hel_proxy/entry.js

@@ -0,0 +1,37 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('hel-lib-proxy')) :
+	typeof define === 'function' && define.amd ? define(['exports', 'hel-lib-proxy'], factory) :
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["components-lib"] = {}, global.helLibProxy));
+})(this, (function (exports, helLibProxy) { 'use strict';
+
+	/*
+	|--------------------------------------------------------------------------
+	|
+	| 对应 package.json/appGroupName
+	|
+	|--------------------------------------------------------------------------
+	*/
+
+	const LIB_NAME = 'components-lib';
+
+	/*
+	|--------------------------------------------------------------------------
+	|
+	| 组件类型导出文件，同时也作为 rollup 的打包入口文件，因只提供类型，rollup 打包后是一个
+	| 仅包含 hel-lib-proxy 的空壳文件，对模块使用方的包体构建大小无影响
+	| 模块使用方 通过 npm i xxx-lib 后，只要在头文件处执行过 preFetchLib
+	| 则整个项目项使用本地模块一样载入提供方的组件，并可以点击到 node_modules 查看源码
+	|
+	|--------------------------------------------------------------------------
+	*/
+	/**
+	 * 将提供给用户的lib暴露出去（同时也暴露了类型）
+	 */
+	var dtlib = helLibProxy.exposeLib(LIB_NAME);
+
+	exports.default = dtlib;
+	exports.dtlib = dtlib;
+
+	Object.defineProperty(exports, '__esModule', { value: true });
+
+}));

package/hel_proxy_es/entry.js

@@ -0,0 +1,28 @@
+import { exposeLib } from 'hel-lib-proxy';
+
+/*
+|--------------------------------------------------------------------------
+|
+| 对应 package.json/appGroupName
+|
+|--------------------------------------------------------------------------
+*/
+
+const LIB_NAME = 'components-lib';
+
+/*
+|--------------------------------------------------------------------------
+|
+| 组件类型导出文件，同时也作为 rollup 的打包入口文件，因只提供类型，rollup 打包后是一个
+| 仅包含 hel-lib-proxy 的空壳文件，对模块使用方的包体构建大小无影响
+| 模块使用方 通过 npm i xxx-lib 后，只要在头文件处执行过 preFetchLib
+| 则整个项目项使用本地模块一样载入提供方的组件，并可以点击到 node_modules 查看源码
+|
+|--------------------------------------------------------------------------
+*/
+/**
+ * 将提供给用户的lib暴露出去（同时也暴露了类型）
+ */
+var dtlib = exposeLib(LIB_NAME);
+
+export { dtlib as default, dtlib };

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "hel-test-vue3-comp-esm-lib",
+  "appGroupName": "components-lib",
+  "main": "hel_proxy/entry.js",
+  "module": "hel_proxy_es/entry.js",
+  "types": "src/entrance/libTypes.ts",
+  "unpkg": "hel_dist/index.html",
+  "version": "1.5.0",
+  "type": "module",
+  "files": [
+    "hel_dist",
+    "hel_proxy",
+    "hel_proxy_es",
+    "scripts",
+    "README.md",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite --port 7001",
+    "start": "vite --port 7001",
+    "start:App": "cross-env VITE_COMP=App vite --port 7001",
+    "start:Hello": "cross-env VITE_COMP=HelloWorld vite --port 7001",
+    "build": "npm run check_name && npm run build_dist && npm run build_meta && npm run build_proxy",
+    "build_dist": "vite build",
+    "build_dist:local": "cross-env HEL_APP_HOME_PAGE=http://127.0.0.1:7001 vite build",
+    "check_name": "node ./scripts/check.cjs",
+    "build_proxy": "npm run build_proxy_umd && npm run build_proxy_es && shx cp ./hel_proxy/entry.js ./hel_dist",
+    "build_proxy_umd": "rollup -c",
+    "build_proxy_es": "cross-env BUILD_ENV=es rollup -c",
+    "build_cust": "cross-env HEL_APP_HOME_PAGE=http://127.0.0.1:9001 npm run build && npm run build_meta",
+    "build_meta": "node scripts/meta.cjs",
+    "preview": "vite preview",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx --fix",
+    "prepublishOnly": "node ./scripts/prepublishOnly.cjs"
+  },
+  "dependencies": {
+    "hel-iso": "^4.3.2",
+    "hel-lib-proxy": "^4.7.0",
+    "tdesign-vue-next": "^1.9.9",
+    "vue": "^3.4.21"
+  },
+  "peerDependencies": {
+    "hel-iso": "^4.3.2",
+    "hel-lib-proxy": "^4.7.0",
+    "vue": "^3.4.21"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "chalk": "^5.6.2",
+    "cross-env": "^7.0.3",
+    "dayjs": "^1.11.13",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.24.0",
+    "hel-dev-utils": "^5.4.3",
+    "less": "^4.2.0",
+    "rollup": "^4.14.1",
+    "shx": "^0.3.4",
+    "typescript": "^5.4.4",
+    "vite": "^5.2.8"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/scripts/buildCI.cjs

@@ -0,0 +1,14 @@
+/**
+ * 此脚本被蓝盾【JS脚本执行】插件执行，脚本会被放到沙箱中执行，不允许引用非node内置模块，
+ * 故在插件里触发安装后，通过 libs.deploySDK 把 @tencent/hel-mono-deploy 包透传进来使用，
+ */
+/** @typedef {import('@tencent/helpack-ld-types').IDeployOptions} IDeployOptions */
+
+exports.buildCI = async function (/** @type IDeployOptions */options, libs) {
+  try {
+    await libs.deploySDK.deployLegacyHelMod(options);
+  } catch (err) {
+    console.error(err);
+    process.exit(1);
+  }
+};

package/scripts/check.cjs

@@ -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.cjs

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

package/scripts/prepublishOnly.cjs

@@ -0,0 +1,25 @@
+/*
+|--------------------------------------------------------------------------
+| npm publush 前检查根目录下 package.json 的版本号是否和 hel_dist/hel-meta.json 一致
+|--------------------------------------------------------------------------
+*/
+
+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.error("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.error(
+    'The package.json version number and the hel_dist/hel-meta.json version number must be the same.\n'
+  );
+  process.exit(1);
+}

package/src/components/App.vue

@@ -0,0 +1,256 @@
+<template>
+  <div id="app">
+    <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
+    <!-- <h2>name: {{ name }}</h2> -->
+    <!-- <HelloWorld msg="Welcome to view project hel-tpl-remote-vue-comp ( from unpkg deploy )" /> -->
+    
+    <!-- 计算器组件 -->
+    <div class="calculator-wrapper">
+      <t-card title="计算器" class="calculator-card">
+        <!-- 显示屏 -->
+        <div class="display">
+          <div class="expression">{{ expression || '0' }}</div>
+          <div class="result">{{ displayValue }}</div>
+        </div>
+        
+        <!-- 按钮区域 -->
+        <div class="buttons">
+          <t-button 
+            v-for="btn in buttons" 
+            :key="btn.value"
+            :theme="btn.theme || 'default'"
+            :variant="btn.variant || 'outline'"
+            class="calc-btn"
+            :class="btn.class"
+            @click="handleClick(btn.value)"
+          >
+            {{ btn.label }}
+          </t-button>
+        </div>
+      </t-card>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, defineProps } from 'vue';
+import HelloWorld from "./HelloWorld.vue";
+
+defineProps({
+  name: String,
+});
+
+// 当前显示值
+const displayValue = ref('0');
+// 完整表达式
+const expression = ref('');
+// 是否刚计算完结果
+const justCalculated = ref(false);
+
+// 计算器按钮配置
+const buttons = [
+  { label: 'C', value: 'clear', theme: 'danger', variant: 'base' },
+  { label: '±', value: 'negate', theme: 'default', variant: 'outline' },
+  { label: '%', value: 'percent', theme: 'default', variant: 'outline' },
+  { label: '÷', value: '/', theme: 'warning', variant: 'base', class: 'operator' },
+  
+  { label: '7', value: '7' },
+  { label: '8', value: '8' },
+  { label: '9', value: '9' },
+  { label: '×', value: '*', theme: 'warning', variant: 'base', class: 'operator' },
+  
+  { label: '4', value: '4' },
+  { label: '5', value: '5' },
+  { label: '6', value: '6' },
+  { label: '-', value: '-', theme: 'warning', variant: 'base', class: 'operator' },
+  
+  { label: '1', value: '1' },
+  { label: '2', value: '2' },
+  { label: '3', value: '3' },
+  { label: '+', value: '+', theme: 'warning', variant: 'base', class: 'operator' },
+  
+  { label: '0', value: '0', class: 'zero' },
+  { label: '.', value: '.' },
+  { label: '=', value: '=', theme: 'primary', variant: 'base', class: 'equals' },
+];
+
+// 处理按钮点击
+const handleClick = (value) => {
+  switch (value) {
+    case 'clear':
+      clear();
+      break;
+    case 'negate':
+      negate();
+      break;
+    case 'percent':
+      percent();
+      break;
+    case '=':
+      calculate();
+      break;
+    case '+':
+    case '-':
+    case '*':
+    case '/':
+      handleOperator(value);
+      break;
+    case '.':
+      handleDecimal();
+      break;
+    default:
+      handleNumber(value);
+  }
+};
+
+// 清空
+const clear = () => {
+  displayValue.value = '0';
+  expression.value = '';
+  justCalculated.value = false;
+};
+
+// 正负号切换
+const negate = () => {
+  if (displayValue.value !== '0') {
+    if (displayValue.value.startsWith('-')) {
+      displayValue.value = displayValue.value.slice(1);
+    } else {
+      displayValue.value = '-' + displayValue.value;
+    }
+  }
+};
+
+// 百分比
+const percent = () => {
+  const num = parseFloat(displayValue.value);
+  displayValue.value = String(num / 100);
+};
+
+// 处理数字输入
+const handleNumber = (num) => {
+  if (justCalculated.value) {
+    displayValue.value = num;
+    expression.value = num;
+    justCalculated.value = false;
+  } else if (displayValue.value === '0') {
+    displayValue.value = num;
+  } else {
+    displayValue.value += num;
+  }
+};
+
+// 处理小数点
+const handleDecimal = () => {
+  if (justCalculated.value) {
+    displayValue.value = '0.';
+    expression.value = '0.';
+    justCalculated.value = false;
+  } else if (!displayValue.value.includes('.')) {
+    displayValue.value += '.';
+  }
+};
+
+// 处理运算符
+const handleOperator = (op) => {
+  justCalculated.value = false;
+  const opSymbol = op === '*' ? '×' : op === '/' ? '÷' : op;
+  expression.value = displayValue.value + ' ' + opSymbol + ' ';
+  displayValue.value = '0';
+};
+
+// 计算结果
+const calculate = () => {
+  if (!expression.value) return;
+  
+  try {
+    // 构建完整表达式
+    const fullExpression = expression.value
+      .replace(/×/g, '*')
+      .replace(/÷/g, '/')
+      .replace(/ /g, '') + displayValue.value;
+    
+    // 安全计算
+    const result = Function('"use strict"; return (' + fullExpression + ')')();
+    
+    if (isFinite(result)) {
+      // 保留合理的小数位数
+      displayValue.value = String(Math.round(result * 1000000000) / 1000000000);
+      expression.value = fullExpression + ' =';
+    } else {
+      displayValue.value = 'Error';
+    }
+    justCalculated.value = true;
+  } catch (e) {
+    displayValue.value = 'Error';
+    justCalculated.value = true;
+  }
+};
+</script>
+
+<style scoped>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+
+.calculator-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-top: 30px;
+}
+
+.calculator-card {
+  width: 320px;
+  border-radius: 16px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+}
+
+.display {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 20px;
+  text-align: right;
+  min-height: 80px;
+}
+
+.expression {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 14px;
+  min-height: 20px;
+  word-break: break-all;
+}
+
+.result {
+  color: #fff;
+  font-size: 36px;
+  font-weight: 600;
+  word-break: break-all;
+}
+
+.buttons {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+}
+
+.calc-btn {
+  height: 56px;
+  font-size: 18px;
+  font-weight: 500;
+  border-radius: 12px;
+}
+
+.calc-btn.zero {
+  grid-column: span 2;
+}
+
+.calc-btn.operator {
+  font-size: 22px;
+}
+</style>

package/src/components/HelloWorld.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="hello">
+    <hr />
+    <h1>{{ msg }}</h1>
+    <h2>I am a remote vue component (Vue3)</h2>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  msg: String,
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

package/src/components/button.vue

@@ -0,0 +1,41 @@
+<template>
+  <div id="app">
+    <div :class="btnType">{{ btnType }} 按钮</div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  btnType: {
+    default: 'primary',
+    type: String,
+  }
+});
+</script>
+
+<style scoped>
+.primary {
+  margin-left: 10px;
+  color: #fff;
+  background-color: #409eff;
+  border-color: #409eff;
+  padding: 12px 20px;
+  font-size: 14px;
+  border-radius: 4px;
+  outline: none;
+  border: 1px solid #dcdfe6;
+  cursor: pointer;
+}
+.warning {
+  margin-left: 10px;
+  color: #fff;
+  background-color: #e6a23c;
+  border-color: #e6a23c;
+  padding: 12px 20px;
+  font-size: 14px;
+  border-radius: 4px;
+  outline: none;
+  border: 1px solid #dcdfe6;
+  cursor: pointer;
+}
+</style>