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

package/src/components/dialog.vue

@@ -0,0 +1,50 @@
+<template>
+  <div v-if="visible" class="wrapperStyle">
+    <div class="boxStyle">
+      <div>
+        <p>What is your name ?</p>
+        <input :style="{ fontSize: '18px', lineHeight: 2 }" type="text" />
+      </div>
+      <button :style="{ marginTop: '10px' }" @click="switchVisible(false)">
+        close It!
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  visible: {
+    default: true,
+    type: Boolean,
+  }
+});
+
+const emit = defineEmits(['switchVisible']);
+
+const switchVisible = (flag) => {
+  emit('switchVisible', flag);
+};
+</script>
+
+<style lang="css" scoped>
+.wrapperStyle {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2000;
+  height: 100%;
+  background-color: rgba(0,0,0,.5);
+  overflow: auto;
+}
+
+.boxStyle {
+  width: 30%;
+  margin: 0 auto 50px;
+  margin-top: 15vh;
+  padding: 20px;
+  background: #fff;
+}
+</style>

package/src/components/index.js

@@ -0,0 +1,20 @@
+/*
+|--------------------------------------------------------------------------
+|
+| 这些组件暴露给使用方
+|
+|--------------------------------------------------------------------------
+*/
+import App from './App.vue';
+import HelloWorld from './HelloWorld.vue';
+import Button from './button.vue';
+import Dialog from './dialog.vue';
+import Tooltip from './tooltip.vue';
+
+export default {
+  App,
+  HelloWorld,
+  Button,
+  Dialog,
+  Tooltip,
+};

package/src/components/tooltip.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="tool-tip" :data-content="message">
+    {{ content }}
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  message: {
+    default: "",
+    type: String,
+  },
+  content: {
+    default: "",
+    type: String,
+  },
+});
+</script>
+
+<style scoped>
+.tool-tip {
+  background-color: #fff;
+  padding: 10px 16px;
+  border: 1px solid #dcdfe6;
+  display: inline-block;
+  cursor: pointer;
+  border-radius: 4px;
+  position: relative;
+}
+/* content-box */
+.tool-tip::before {
+  content: attr(data-content);
+  max-width: 100%;
+  box-sizing: border-box;
+  position: absolute;
+  background-color: #303133;
+  color: #fff;
+  font-size: 12px;
+  border-radius: 4px;
+  padding: 10px;
+  left: 50%;
+  bottom: 100%;
+  transform: translate(-50%, -10px);
+  display: none;
+}
+/* arrow-box */
+.tool-tip::after {
+  display: none;
+  content: "";
+  border: 6px solid transparent;
+  border-top-color: #303133;
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  transform: translate(-50%, 2px);
+}
+.tool-tip:hover::after,
+.tool-tip:hover::before {
+  display: block;
+}
+</style>

package/src/configs/subApp.js

@@ -0,0 +1,9 @@
+/*
+|--------------------------------------------------------------------------
+|
+| 对应 package.json/appGroupName
+|
+|--------------------------------------------------------------------------
+*/
+
+export const LIB_NAME = 'components-lib';

package/src/entrance/libProperties.js

@@ -0,0 +1,10 @@
+/*
+|--------------------------------------------------------------------------
+|
+| 这些组件暴露给使用方
+|
+|--------------------------------------------------------------------------
+*/
+import comps from '../components';
+
+export default comps;

package/src/entrance/libTypes.ts

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

package/src/loadApp.js

@@ -0,0 +1,17 @@
+/*
+|--------------------------------------------------------------------------
+|
+| 用于本地调试组件，配合环境变量 VITE_COMP 参数来决定载入哪个组件调试
+|
+|--------------------------------------------------------------------------
+*/
+import { createApp } from 'vue';
+import TDesign from 'tdesign-vue-next';
+import 'tdesign-vue-next/es/style/index.css';
+import libProperties from './entrance/libProperties';
+
+const compName = import.meta.env.VITE_COMP || 'App';
+
+const app = createApp(libProperties[compName]);
+app.use(TDesign);
+app.mount('#app');

package/src/main.js

@@ -0,0 +1,15 @@
+import { isMasterApp } from 'hel-iso';
+import { libReady } from 'hel-lib-proxy';
+import { LIB_NAME } from './configs/subApp';
+
+(async function () {
+  const libProperties = await import('./entrance/libProperties');
+  // 注意此处传递的是 default
+  libReady(LIB_NAME, libProperties.default);
+
+  // 非子应用时（即不是被别的模块触发载入的情况），自己挂载渲染节点，方便本地调试
+  // 可根据项目实际情况控制是否载入 loadApp 文件
+  if (isMasterApp()) {
+    await import('./loadApp');
+  }
+})().catch(console.error);