refactor: 将@celljs/cli-common中使用了ts-node的地方，改为使用importx-tsup包进行动态re…

…quire #211 (#212)

feat: 将 @celljs/cli-common 改为使用 importx-tsup 包进行动态 require
---------

Co-authored-by: Naily <[email protected]>

dev-packages/cli-common/package.json

@@ -46,7 +46,8 @@
     "temp": "^0.9.3",
     "traverse": "^0.6.7",
     "ts-node": "^10.9.1",
-    "typescript": "~5.4.5"
+    "typescript": "~5.4.5",
+    "importx-tsup": "^0.5.2"
   },
   "devDependencies": {
     "@celljs/component": "3.0.0",

dev-packages/cli-common/src/hook/hook-executor.ts

@@ -79,20 +79,27 @@ export class HookExecutor {
         return current === false ? false : true;
     }
 
-    protected async doRequire(context: CliContext, path: string, stage: HookStage = HookStage.on) {
-        const obj = require(path);
-        if (stage in obj) {
-            return obj[stage](context);
+    getModule(obj: any): any {
+        if (typeof obj === 'function') {
+            return obj;
+        } else if (typeof obj === 'object' && typeof obj.default === 'object' && typeof obj.default.default === 'function') {
+            return obj.default;
+        } else if (typeof obj === 'object' && typeof obj.default === 'function') {
+            return obj;
+        } else {
+            return obj;
         }
     }
 
-    protected async doExecuteHooks(modules: Module[], context: CliContext, hookName: string, stage?: HookStage): Promise<any[]> {
-        const { REGISTER_INSTANCE, register } = require('ts-node');
-        // Avoid duplicate registrations
-        if (!(process as any)[REGISTER_INSTANCE]) {
-            register({ transpileOnly: true, compilerOptions: { module: 'commonjs'} });
+    protected async doRequire(context: CliContext, path: string, stage: HookStage = HookStage.on) {
+        const obj = await import('importx-tsup').then(x => x.import(path, __filename));
+        const mod = this.getModule(obj);
+        if (mod[stage] && typeof mod[stage] === 'function') {
+            return mod[stage](context);
         }
+    }
 
+    protected async doExecuteHooks(modules: Module[], context: CliContext, hookName: string, stage?: HookStage): Promise<any[]> {
         const result: any = [];
 
         for (const m of modules) {

examples/backend-app/src/webpack-hook.ts

@@ -0,0 +1,3 @@
+export default async () => {
+    console.log('webpack-hook');
+}

examples/vitesse-app/package.json

@@ -0,0 +1,44 @@
+{
+  "private": true,
+  "name": "@celljs/example-vitesse-app",
+  "keywords": [
+    "cell-component"
+  ],
+  "version": "3.0.0",
+  "license": "MIT",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "dependencies": {
+    "@celljs/core": "3.0.0",
+    "@celljs/vue": "3.0.0",
+    "@celljs/rpc": "3.0.0",
+    "@celljs/serve-static": "3.0.0",
+    "vue": "^3.3.4",
+    "unocss": "^0.63.4",
+    "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@celljs/cli": "3.0.0",
+    "unplugin-auto-import": "^0.18.3",
+    "@unhead/vue": "^1.11.10",
+    "unplugin-vue-router": "^0.10.8",
+    "@unocss/webpack": "^0.63.4",
+    "unplugin-vue-components": "^0.27.4",
+    "unplugin-vue-markdown": "^0.26.2",
+    "markdown-it-link-attributes": "^4.0.1",
+    "@shikijs/markdown-it": "^1.22.0",
+    "@types/markdown-it-link-attributes": "^3.0.5",
+    "@intlify/unplugin-vue-i18n": "^5.2.0"
+  },
+  "scripts": {
+    "clean": "rimraf lib dist .cell",
+    "build": "cell build",
+    "start": "cell serve",
+    "deploy": "cell deploy -m scf -m test",
+    "deploy:test": "cell deploy -m scf -m test",
+    "deploy:pre": "cell deploy -m scf -m pre",
+    "deploy:prod": "cell deploy -m scf -m prod"
+  }
+}

examples/vitesse-app/src/browser/App.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <RouterView />
+</template>

examples/vitesse-app/src/browser/auto-imports.d.ts

@@ -0,0 +1,75 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useModel: typeof import('vue')['useModel']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

examples/vitesse-app/src/browser/components.d.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

examples/vitesse-app/src/browser/components/HelloWorld.vue

@@ -0,0 +1,3 @@
+<template>
+  Hello World
+</template>

examples/vitesse-app/src/browser/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue';
+import { App } from '@celljs/vue';
+import Root from './App.vue'
+import router from './router'
+
+@App(createApp(Root).use(router))
+export default class {}

examples/vitesse-app/src/browser/module.ts

@@ -0,0 +1,4 @@
+import './main';
+import { autoBind } from '@celljs/core';
+
+export default autoBind();

examples/vitesse-app/src/browser/pages/[...all].vue

@@ -0,0 +1,7 @@
+<script setup lang="tsx"></script>
+
+<template>
+  <div>
+    404 Page
+  </div>
+</template>

examples/vitesse-app/src/browser/pages/about.md

@@ -0,0 +1,21 @@
+---
+title: About
+---
+
+<div class="text-center">
+  <!-- You can use Vue components inside markdown -->
+  <div i-carbon-dicom-overlay class="text-4xl -mb-6 m-auto" />
+  <h3>About</h3>
+</div>
+
+[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **UnoCSS** for styling and icons.
+
+```js
+// syntax highlighting example
+function vitesse() {
+  const foo = 'bar'
+  console.log(foo)
+}
+```
+
+Check out the [GitHub repo](https://github.com/antfu/vitesse) for more details.

examples/vitesse-app/src/browser/pages/hi/[name].vue

@@ -0,0 +1,4 @@
+<script setup lang="ts">
+</script>
+
+<template></template>

examples/vitesse-app/src/browser/pages/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const router = useRouter()
+</script>
+
+<template>
+  <div>
+    Index Page
+    <button @click="router.push('/')">跳转到首页</button>
+    <HelloWorld />
+  </div>
+</template>

examples/vitesse-app/src/browser/router.ts

@@ -0,0 +1,7 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from 'vue-router/auto-routes'
+
+export default createRouter({
+    history: createWebHistory(),
+    routes,
+})

examples/vitesse-app/src/browser/shims.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="unplugin-vue-router/client" />
+
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+
+    const component: DefineComponent<{}, {}, unknown>
+    export default component
+}
+
+declare module '*.svg'
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.jpeg'
+declare module '*.gif'
+declare module '*.bmp'
+declare module '*.tiff'
+
+
+declare module 'vue-router/auto-routes' {
+    export const routes: any
+}

examples/vitesse-app/src/browser/vue-router.d.ts

@@ -0,0 +1,26 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
+  export interface RouteNamedMap {
+    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/[...all]': RouteRecordInfo<'/[...all]', '/:all(.*)', { all: ParamValue<true> }, { all: ParamValue<false> }>,
+    '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
+    '/hi/[name]': RouteRecordInfo<'/hi/[name]', '/hi/:name', { name: ParamValue<true> }, { name: ParamValue<false> }>,
+  }
+}

examples/vitesse-app/src/common/welcome-protocol.ts

@@ -0,0 +1,5 @@
+export const WelcomeServer = Symbol('WelcomeServer');
+
+export interface WelcomeServer {
+    say(): Promise<string>;
+}

examples/vitesse-app/src/node/module.ts

@@ -0,0 +1,4 @@
+import './welcome-server';
+import { autoBind } from '@celljs/core';
+
+export default autoBind();

examples/vitesse-app/src/node/welcome-server.ts

@@ -0,0 +1,9 @@
+import { WelcomeServer } from '../common/welcome-protocol';
+import { Rpc } from '@celljs/rpc';
+
+@Rpc(WelcomeServer)
+export class WelcomeServerImpl implements WelcomeServer {
+    say(): Promise<string> {
+        return Promise.resolve('Welcome to Cell');
+    }
+}