feat: 增加 unplugin 插件适配 (#1913)

* feat: add generate-style-deps.js

* fix: js->cjs

* fix: 增加遗漏的样式依赖

* feat: 所有组件完善 components

jd/generate-style-deps.cjs

@@ -0,0 +1,60 @@
+const config = require('../src/config.json');
+const path = require('path');
+const fs = require('fs-extra');
+
+// 获取依赖关系
+const styleMap = new Map();
+config.nav.forEach((item) => {
+  item.packages.forEach((element) => {
+    styleMap.set(element.name, {
+      name: element.name,
+      children: element.styleDeps
+    });
+  });
+});
+styleMap.forEach((value) => {
+  if (value.chilren?.length !== 0) {
+    value.children.forEach((item, index) => {
+      value.children[index] = styleMap.get(item);
+    });
+  }
+});
+
+const getAllDeps = (styleObj, key) => {
+  const value = styleObj;
+  if (value.children?.length === 0) {
+    return [value.name];
+  } else {
+    let deps = [];
+    value.children?.forEach((item) => {
+      if (key === item.name) {
+        console.error('generate-style-deps: 存在循环引用', key);
+        return [];
+      }
+      deps = deps.concat(getAllDeps(item, key));
+    });
+    deps.unshift(value.name);
+    return [...new Set(deps)];
+  }
+};
+
+const tasks = [];
+styleMap.forEach((value, key) => {
+  const name = key.toLowerCase();
+  let deps = getAllDeps(value, key);
+  deps = deps.filter((component) => {
+    return component !== key;
+  });
+  const output = `require('./index.scss');\n${deps
+    .map((component) => {
+      return `require('../${component.toLowerCase()}/index.scss');\n`;
+    })
+    .join('')}`;
+  tasks.push(
+    fs.outputFile(path.resolve(__dirname, `../dist/packages/${name}/index.js`), output, 'utf8', () => {
+      // console.log('')
+    })
+  );
+});
+
+Promise.all(tasks);

src/packages/__VUE/actionsheet/index.taro.vue

@@ -40,8 +40,12 @@
 import { createComponent } from '@/packages/utils/create';
 import { computed, useSlots } from 'vue';
 const { componentName, create } = createComponent('actionsheet');
+import Popup from '../popup/index.taro.vue';
 import { popupProps } from '../popup/props';
 export default create({
+  components: {
+    [Popup.name]: Popup
+  },
   props: {
     ...popupProps,
     cancelTxt: {

src/packages/__VUE/actionsheet/index.vue

@@ -40,8 +40,12 @@
 import { createComponent } from '@/packages/utils/create';
 import { computed, useSlots } from 'vue';
 import { popupProps } from '../popup/props';
+import Popup from '../popup/index.vue';
 const { componentName, create } = createComponent('actionsheet');
 export default create({
+  components: {
+    [Popup.name]: Popup
+  },
   props: {
     ...popupProps,
     cancelTxt: {

src/packages/__VUE/address/index.taro.vue

@@ -130,7 +130,8 @@ import { reactive, ref, toRefs, watch, computed } from 'vue';
 import { popupProps } from '../popup/props';
 import { RegionData, CustomRegionData } from './type';
 import { createComponent } from '@/packages/utils/create';
-
+import Popup from '../popup/index.taro.vue';
+import Elevator from '../elevator/index.taro.vue';
 const { create, componentName, translate } = createComponent('address');
 
 interface AddressList {
@@ -143,6 +144,10 @@ interface AddressList {
   selectedAddress: boolean;
 }
 export default create({
+  components: {
+    [Popup.name]: Popup,
+    [Elevator.name]: Elevator
+  },
   inheritAttrs: false,
   props: {
     ...popupProps,

src/packages/__VUE/address/index.vue

@@ -124,6 +124,8 @@ import { createComponent } from '@/packages/utils/create';
 import { RegionData, CustomRegionData } from './type';
 import { popupProps } from '../popup/props';
 import Icon from '../icon/index.vue';
+import Popup from '../popup/index.vue';
+import Elevator from '../elevator/index.vue';
 const { componentName, create, translate } = createComponent('address');
 
 interface AddressList {
@@ -136,6 +138,10 @@ interface AddressList {
   selectedAddress: boolean;
 }
 export default create({
+  components: {
+    [Popup.name]: Popup,
+    [Elevator.name]: Elevator
+  },
   inheritAttrs: false,
   props: {
     ...popupProps,

src/packages/__VUE/addresslist/index.taro.vue

@@ -64,6 +64,7 @@ const { componentName, create, translate } = createComponent('addresslist');
 import SwipeShell from './components/SwipeShell.vue';
 import GeneralShell from './components/GeneralShell.vue';
 import { floatData } from '@/packages/utils/util';
+import Button from '../button/index.taro.vue';
 export default create({
   props: {
     data: {
@@ -89,7 +90,8 @@ export default create({
   },
   components: {
     SwipeShell,
-    GeneralShell
+    GeneralShell,
+    [Button.name]: Button
   },
   emits: ['delIcon', 'editIcon', 'itemClick', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],
 

src/packages/__VUE/addresslist/index.vue

@@ -64,6 +64,7 @@ const { componentName, create, translate } = createComponent('addresslist');
 import SwipeShell from './components/SwipeShell.vue';
 import GeneralShell from './components/GeneralShell.vue';
 import { floatData } from '@/packages/utils/util';
+import Button from '../button/index.vue';
 export default create({
   props: {
     data: {
@@ -89,7 +90,8 @@ export default create({
   },
   components: {
     SwipeShell,
-    GeneralShell
+    GeneralShell,
+    [Button.name]: Button
   },
   emits: ['delIcon', 'editIcon', 'itemClick', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],
 

src/packages/__VUE/audio/index.vue

@@ -62,6 +62,7 @@
 <script lang="ts">
 import { toRefs, ref, onMounted, reactive, watch, provide } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import Range from '../range/index.vue';
 const { componentName, create } = createComponent('audio');
 
 export default create({
@@ -104,7 +105,9 @@ export default create({
       default: 'progress'
     }
   },
-  components: {},
+  components: {
+    [Range.name]: Range
+  },
   emits: ['fastBack', 'play', 'forward', 'ended', 'changeProgress', 'mute', 'can-play'],
 
   setup(props, { emit }) {

src/packages/__VUE/audiooperate/index.vue

@@ -25,6 +25,7 @@
 <script lang="ts">
 import { toRefs, ref, useSlots, onMounted, reactive, inject } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import Button from '../button/index.vue';
 const { componentName, create, translate } = createComponent('audio-operate');
 
 export default create({
@@ -35,7 +36,9 @@ export default create({
       default: () => 'play'
     }
   },
-  components: {},
+  components: {
+    [Button.name]: Button
+  },
   emits: ['click'],
 
   setup(props, { emit }) {

src/packages/__VUE/calendar/index.taro.vue

@@ -86,13 +86,15 @@ import { ref, watch, computed, reactive, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('calendar');
 import CalendarItem from '../calendaritem/index.taro.vue';
+import Popup from '../popup/index.taro.vue';
 import Utils from '@/packages/utils/date';
 import { useExpose } from '@/packages/utils/useExpose/index';
 import Taro from '@tarojs/taro';
 
 export default create({
   components: {
-    [CalendarItem.name]: CalendarItem
+    [CalendarItem.name]: CalendarItem,
+    [Popup.name]: Popup
   },
   props: {
     type: {

src/packages/__VUE/calendar/index.vue

@@ -90,13 +90,15 @@ import { PropType, ref, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('calendar');
 import CalendarItem from '../calendaritem/index.vue';
+import Popup from '../popup/index.vue';
 import Utils from '@/packages/utils/date';
 import { useExpose } from '@/packages/utils/useExpose/index';
 
 type InputDate = string | string[];
 export default create({
   components: {
-    [CalendarItem.name]: CalendarItem
+    [CalendarItem.name]: CalendarItem,
+    [Popup.name]: Popup
   },
   props: {
     type: {

src/packages/__VUE/card/index.taro.vue

@@ -39,8 +39,15 @@
 <script lang="ts">
 import { computed, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import Price from '../price/index.taro.vue';
+import Tag from '../tag/index.taro.vue';
 const { create } = createComponent('card');
 export default create({
+  components: {
+    [Price.name]: Price,
+    [Tag.name]: Tag
+  },
+
   props: {
     imgUrl: {
       type: String,

src/packages/__VUE/card/index.vue

@@ -36,8 +36,15 @@
 <script lang="ts">
 import { computed, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import Price from '../price/index.vue';
+import Tag from '../tag/index.vue';
 const { create } = createComponent('card');
 export default create({
+  components: {
+    [Price.name]: Price,
+    [Tag.name]: Tag
+  },
+
   props: {
     imgUrl: {
       type: String,

src/packages/__VUE/cascader/index.taro.vue

@@ -53,10 +53,12 @@ import { createComponent } from '@/packages/utils/create';
 import { popupProps } from '../popup/props';
 const { create } = createComponent('cascader');
 import CascaderItem from './cascader-item.vue';
+import Popup from '../popup/index.taro.vue';
 
 export default create({
   components: {
-    [CascaderItem.name]: CascaderItem
+    [CascaderItem.name]: CascaderItem,
+    [Popup.name]: Popup
   },
   props: {
     ...popupProps,

src/packages/__VUE/cascader/index.vue

@@ -52,10 +52,12 @@ import { popupProps } from '../popup/props';
 import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('cascader');
 import CascaderItem from './cascader-item.vue';
+import Popup from '../popup/index.vue';
 
 export default create({
   components: {
-    [CascaderItem.name]: CascaderItem
+    [CascaderItem.name]: CascaderItem,
+    [Popup.name]: Popup
   },
   props: {
     ...popupProps,

src/packages/__VUE/dialog/index.vue

@@ -49,11 +49,16 @@ import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('dialog');
 import { funInterceptor, Interceptor } from '@/packages/utils/util';
 import { popupProps } from '../popup/props';
+import Popup from '../popup/index.vue';
+import Button from '../button/index.vue';
 
 import { isPromise } from '@/packages/utils/util';
 export default create({
   inheritAttrs: false,
-  components: {},
+  components: {
+    [Popup.name]: Popup,
+    [Button.name]: Button
+  },
   props: {
     ...popupProps,
     closeOnClickOverlay: {

src/packages/__VUE/ecard/index.taro.vue

@@ -32,8 +32,12 @@
 <script lang="ts">
 import { Ref, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import InputNumber from '../inputnumber/index.taro.vue';
 const { componentName, create, translate } = createComponent('ecard');
 export default create({
+  components: {
+    [InputNumber.name]: InputNumber
+  },
   props: {
     chooseText: {
       type: String,

src/packages/__VUE/ecard/index.vue

@@ -34,8 +34,12 @@
 import { Ref, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { create, translate } = createComponent('ecard');
+import InputNumber from '../inputnumber/index.vue';
 
 export default create({
+  components: {
+    [InputNumber.name]: InputNumber
+  },
   props: {
     chooseText: {
       type: String,

src/packages/__VUE/imagepreview/index.taro.vue

@@ -31,6 +31,9 @@ import { toRefs, reactive, watch, onMounted, computed, CSSProperties, PropType }
 import { createComponent } from '@/packages/utils/create';
 import { funInterceptor, Interceptor } from '@/packages/utils/util';
 import { ImageInterface } from './types';
+import Popup from '../popup/index.taro.vue';
+import Swiper from '../swiper/index.taro.vue';
+import SwiperItem from '../swiperitem/index.taro.vue';
 import Taro from '@tarojs/taro';
 const { create } = createComponent('imagepreview');
 
@@ -87,7 +90,11 @@ export default create({
     }
   },
   emits: ['close', 'change'],
-  components: {},
+  components: {
+    [Popup.name]: Popup,
+    [Swiper.name]: Swiper,
+    [SwiperItem.name]: SwiperItem
+  },
 
   setup(props, { emit }) {
     const state = reactive({

src/packages/__VUE/imagepreview/index.vue

@@ -50,6 +50,8 @@ import { isArray } from '@/packages/utils/util';
 import { funInterceptor, Interceptor } from '@/packages/utils/util';
 import { useRect } from '@/packages/utils/useRect';
 import ImagePreviewItem from './imagePreviewItem.vue';
+import Popup from '../popup/index.vue';
+import Swiper from '../swiper/index.vue';
 import { ImageInterface, baseProps } from './types';
 const { create } = createComponent('imagepreview');
 
@@ -84,7 +86,9 @@ export default create({
   },
   emits: ['close', 'change'],
   components: {
-    ImagePreviewItem: ImagePreviewItem
+    ImagePreviewItem: ImagePreviewItem,
+    [Popup.name]: Popup,
+    [Swiper.name]: Swiper
   },
 
   setup(props, { emit }) {

src/packages/__VUE/invoice/index.taro.vue

@@ -39,8 +39,20 @@
 <script lang="ts">
 import { reactive, toRefs, computed, ref, onMounted, watch, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import Form from '../form/index.taro.vue';
+import FormItem from '../formitem/index.taro.vue';
+import Radio from '../radio/index.taro.vue';
+import RadioGroup from '../radiogroup/index.taro.vue';
+import Button from '../button/index.taro.vue';
 const { componentName, create } = createComponent('invoice');
 export default create({
+  components: {
+    [Form.name]: Form,
+    [FormItem.name]: FormItem,
+    [Radio.name]: Radio,
+    [RadioGroup.name]: RadioGroup,
+    [Button.name]: Button
+  },
   props: {
     data: {
       type: Array,

src/packages/__VUE/invoice/index.vue

@@ -39,8 +39,20 @@
 <script lang="ts">
 import { reactive, toRefs, computed, ref, onMounted, watch, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import Form from '../form/index.vue';
+import FormItem from '../formitem/index.vue';
+import Radio from '../radio/index.vue';
+import RadioGroup from '../radiogroup/index.vue';
+import Button from '../button/index.vue';
 const { componentName, create } = createComponent('invoice');
 export default create({
+  components: {
+    [Form.name]: Form,
+    [FormItem.name]: FormItem,
+    [Radio.name]: Radio,
+    [RadioGroup.name]: RadioGroup,
+    [Button.name]: Button
+  },
   props: {
     data: {
       type: Array,

src/packages/__VUE/numberkeyboard/index.taro.vue

@@ -77,8 +77,12 @@
 <script lang="ts">
 import { computed, onMounted, provide, reactive, nextTick, ref, watch, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import Popup from '../popup/index.taro.vue';
 const { create, translate } = createComponent('numberkeyboard');
 export default create({
+  components: {
+    [Popup.name]: Popup
+  },
   props: {
     confirmText: {
       type: String,

src/packages/__VUE/numberkeyboard/index.vue

@@ -79,8 +79,12 @@
 <script lang="ts">
 import { computed, onMounted, provide, reactive, nextTick, ref, watch, Ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import Popup from '../popup/index.vue';
 const { create, translate } = createComponent('numberkeyboard');
 export default create({
+  components: {
+    [Popup.name]: Popup
+  },
   props: {
     confirmText: {
       type: String,

src/packages/__VUE/picker/index.taro.vue

@@ -74,12 +74,14 @@ import { ref, onMounted, onBeforeUnmount, reactive, watch, computed, toRaw, toRe
 import { createComponent } from '@/packages/utils/create';
 import { popupProps } from '../popup/props';
 import column from './ColumnTaro.vue';
+import Popup from '../popup/index.taro.vue';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
 import Taro from '@tarojs/taro';
 const { componentName, create, translate } = createComponent('picker');
 export default create({
   components: {
-    [column.name]: column
+    [column.name]: column,
+    [Popup.name]: Popup
   },
   props: {
     ...popupProps,

src/packages/__VUE/popover/index.taro.vue

@@ -52,11 +52,14 @@ import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('popover');
 import { useTaroRect } from '@/packages/utils/useTaroRect';
 import { isArray } from '@/packages/utils/util';
+import Popup from '../popup/index.vue';
 import Taro from '@tarojs/taro';
 
 export default create({
   inheritAttrs: false,
-  components: {},
+  components: {
+    [Popup.name]: Popup
+  },
   props: {
     visible: { type: Boolean, default: false },
     list: { type: Array, default: [] },

src/packages/__VUE/popover/index.vue

@@ -41,9 +41,12 @@
 import { computed, watch, ref, PropType, CSSProperties, reactive } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { isArray } from '@/packages/utils/util';
+import Popup from '../popup/index.vue';
 const { create } = createComponent('popover');
 export default create({
-  components: {},
+  components: {
+    [Popup.name]: Popup
+  },
   props: {
     visible: { type: Boolean, default: false },
     list: { type: Array, default: [] },

src/packages/__VUE/shortpassword/index.taro.vue

@@ -57,9 +57,13 @@
 <script lang="ts">
 import { ref, computed, watch, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import Popup from '../popup/index.taro.vue';
 const { create, translate } = createComponent('shortpassword');
 import Taro, { eventCenter, getCurrentInstance } from '@tarojs/taro';
 export default create({
+  components: {
+    [Popup.name]: Popup
+  },
   props: {
     title: {
       type: String,

src/packages/__VUE/shortpassword/index.vue

@@ -50,8 +50,12 @@
 <script lang="ts">
 import { ref, computed, watch, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import Popup from '../popup/index.vue';
 const { create, translate } = createComponent('shortpassword');
 export default create({
+  components: {
+    [Popup.name]: Popup
+  },
   props: {
     title: {
       type: String,

src/packages/__VUE/signature/index.taro.vue

@@ -23,6 +23,7 @@
 import Taro from '@tarojs/taro';
 import { ref, reactive, onMounted, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import Button from '../button/index.taro.vue';
 const { componentName, create, translate } = createComponent('signature');
 
 export default create({
@@ -48,7 +49,9 @@ export default create({
       default: ''
     }
   },
-  components: {},
+  components: {
+    [Button.name]: Button
+  },
   emits: ['start', 'end', 'signing', 'confirm', 'clear'],
 
   setup(props, { emit }) {

src/packages/__VUE/signature/index.vue

@@ -12,6 +12,7 @@
 <script lang="ts">
 import { ref, reactive, onMounted, computed, toRefs } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import Button from '../button/index.vue';
 const { componentName, create, translate } = createComponent('signature');
 
 export default create({
@@ -45,7 +46,9 @@ export default create({
       default: ''
     }
   },
-  components: {},
+  components: {
+    [Button.name]: Button
+  },
   emits: ['start', 'end', 'signing', 'confirm', 'clear'],
 
   setup(props, { emit }) {

src/packages/__VUE/sku/index.taro.vue

@@ -67,6 +67,7 @@ import SkuHeader from './components/SkuHeader.vue';
 import SkuSelect from './components/SkuSelect.vue';
 import SkuStepper from './components/SkuStepper.vue';
 import SkuOperate from './components/SkuOperate.vue';
+import Popup from '../popup/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create, translate } = createComponent('sku');
 
@@ -181,7 +182,8 @@ export default create({
     SkuHeader,
     SkuSelect,
     SkuStepper,
-    SkuOperate
+    SkuOperate,
+    [Popup.name]: Popup
   },
 
   setup(props: any, { emit, slots }) {

src/packages/__VUE/sku/index.vue

@@ -69,6 +69,7 @@ import SkuStepper from './components/SkuStepper.vue';
 import SkuOperate from './components/SkuOperate.vue';
 import { createComponent } from '@/packages/utils/create';
 import { popupProps } from '../popup/props';
+import Popup from '../popup/index.vue';
 const { componentName, create, translate } = createComponent('sku');
 
 export default create({
@@ -156,7 +157,8 @@ export default create({
     SkuHeader,
     SkuSelect,
     SkuStepper,
-    SkuOperate
+    SkuOperate,
+    [Popup.name]: Popup
   },
 
   setup(props: any, { emit, slots }) {

src/packages/__VUE/uploader/index.taro.vue

@@ -75,10 +75,16 @@ import { createComponent } from '@/packages/utils/create';
 import { UploaderTaro, UploadOptions } from './uploader';
 import { FileItem } from './type';
 import { funInterceptor, Interceptor } from '@/packages/utils/util';
+import Progress from '../progress/index.taro.vue';
+import Button from '../button/index.taro.vue';
 const { componentName, create, translate } = createComponent('uploader');
 import Taro from '@tarojs/taro';
 import { isPromise } from '@/packages/utils/util';
 export default create({
+  components: {
+    [Progress.name]: Progress,
+    [Button.name]: Button
+  },
   props: {
     name: { type: String, default: 'file' },
     url: { type: String, default: '' },

src/packages/__VUE/uploader/index.vue

@@ -77,8 +77,12 @@ import { createComponent } from '@/packages/utils/create';
 import { Uploader, UploadOptions } from './uploader';
 import { FileItem } from './type';
 import { funInterceptor, Interceptor } from '@/packages/utils/util';
+import Progress from '../progress/index.vue';
 const { componentName, create, translate } = createComponent('uploader');
 export default create({
+  components: {
+    [Progress.name]: Progress
+  },
   props: {
     name: { type: String, default: 'file' },
     url: { type: String, default: '' },