@melt-js/comps-vue3 0.0.0-stage → 0.0.1

package/scripts/prepublishOnly.js

@@ -0,0 +1,27 @@
+/*
+|--------------------------------------------------------------------------
+| npm publish 前检查根目录下 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)
+
+// 检查是否执行 pnpm run build 打包命令
+if (!existHelMeata) {
+  console.log("Run the 'pnpm 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(
+    'The package.json version number and the hel_dist/hel-meta.json version number must be the same.\n',
+  )
+  process.exit(1)
+}

package/scripts/preview.js

@@ -0,0 +1,71 @@
+/*
+|--------------------------------------------------------------------------
+| 本地预览 hel_dist 构建产物（默认 7002，带 CORS）
+|--------------------------------------------------------------------------
+| 预览前请先执行 `pnpm run build:local`，让产物里的资源地址指向
+| http://localhost:7002，否则 index.html 会引用 unpkg 上的线上地址。
+*/
+const http = require('node:http')
+const fs = require('node:fs')
+const path = require('node:path')
+
+const PORT = Number(process.env.PORT) || 7002
+const ROOT = path.resolve(__dirname, '../hel_dist')
+
+const MIME = {
+  '.html': 'text/html; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
+  '.mjs': 'text/javascript; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.map': 'application/json; charset=utf-8',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+}
+
+function send(res, status, body, headers = {}) {
+  res.writeHead(status, {
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Methods': '*',
+    'Access-Control-Allow-Headers': '*',
+    ...headers,
+  })
+  res.end(body)
+}
+
+http
+  .createServer((req, res) => {
+    const urlPath = decodeURIComponent((req.url || '/').split('?')[0])
+    const relativePath = urlPath === '/' ? 'index.html' : urlPath.replace(/^\/+/, '')
+    let filePath = path.resolve(ROOT, relativePath)
+
+    // 防止路径穿越
+    if (filePath !== ROOT && !filePath.startsWith(`${ROOT}${path.sep}`)) {
+      send(res, 403, 'Forbidden')
+      return
+    }
+
+    fs.stat(filePath, (statErr, stat) => {
+      if (!statErr && stat.isDirectory()) {
+        filePath = path.join(filePath, 'index.html')
+      }
+
+      fs.readFile(filePath, (readErr, content) => {
+        if (readErr) {
+          send(res, 404, 'Not Found')
+          return
+        }
+        const contentType = MIME[path.extname(filePath).toLowerCase()] || 'application/octet-stream'
+        send(res, 200, content, { 'Content-Type': contentType })
+      })
+    })
+  })
+  .listen(PORT, () => {
+    console.log(`[comps-vue3] preview: http://localhost:${PORT}`)
+  })

package/src/App.vue

@@ -0,0 +1,26 @@
+<template>
+  <HelloWorld msg="Welcome to Your Vue.js + TypeScript + hel-micro App"/>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import HelloWorld from './components/HelloWorld.vue'
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+})
+</script>
+
+<style>
+#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;
+}
+</style>

package/src/components/HelloWorld.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="hello">
+    <img alt="Vue logo" src="../assets/logo.png">
+    <h1>{{ msg }}</h1>
+      <h3>hel-micro</h3>
+    <p>
+      A module federation SDK which is unrelated to tool chain for module consumer.
+      checkout the <a href="https://tnfe.github.io/hel/" target="_blank" rel="noopener">hel-micro documentation</a>.
+    </p>
+    <button class="remote-btn" @click="count++">远程组件内部计数 {{ count }}</button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  },
+  setup() {
+    // 验证远程组件复用的是宿主注入的 vue 运行时：
+    // 若是两份 vue，这里的 ref 变更不会触发宿主渲染。
+    const count = ref(0)
+    return { count }
+  }
+})
+</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;
+}
+.remote-btn {
+  margin-top: 20px;
+  padding: 8px 16px;
+  border: 1px solid #42b983;
+  border-radius: 6px;
+  background: #fff;
+  color: #42b983;
+  font-size: 16px;
+  cursor: pointer;
+}
+</style>

package/src/components/index.ts

@@ -0,0 +1,12 @@
+/*
+|--------------------------------------------------------------------------
+|
+| 这些组件暴露给使用方
+|
+|--------------------------------------------------------------------------
+*/
+import HelloWorld from './HelloWorld.vue'
+
+export default {
+  HelloWorld
+}

package/src/configs/subApp.ts

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

package/src/entrance/libProperties.ts

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

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

package/src/main.ts

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

package/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}