chore: beta.3 support tree shaking

.gitignore

@@ -6,6 +6,7 @@ node_modules
 yarn.lock
 package-lock.json
 /cache
+/src/nutui.ts
 
 
 # local env files

jd/generate-nutui.js

@@ -0,0 +1,40 @@
+const package = require('../package.json');
+const config = require('../src/config.json');
+const path = require('path');
+const fs = require('fs');
+let importStr = '';
+const packages = [];
+config.nav.map(item => {
+  item.packages.forEach(element => {
+    let { name, show } = element;
+    if (show) {
+      importStr += `import ${name} from '/src/packages/${name.toLowerCase()}/index.vue';\n`;
+      packages.push(name);
+    }
+  });
+});
+let installFunction = `
+  function install(app: any) {
+    const packages = [${packages.join(',')}];
+    packages.forEach((item:any) => {
+      if (item.install) {
+        app.use(item);
+      } else if (item.name) {
+        app.component(item.name, item);
+      }
+    });
+  }
+  `;
+let fileStr = `
+  ${importStr}
+  ${installFunction}
+export { ${packages.join(',')}  };
+export default { install, version:'${package.version}'};`;
+fs.writeFile(
+  path.resolve(__dirname, '../src/nutui.ts'),
+  fileStr,
+  'utf8',
+  error => {
+    // logger.success(`${package_config_path} 文件写入成功`);
+  }
+);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.3",
   "npm": {
     "tag": "beta"
   },
@@ -36,14 +36,14 @@
     "CHANGELOG.md"
   ],
   "scripts": {
-    "dev": "tsc && vite --open",
+    "dev": "rm -rf dist && tsc && npm run generate:file && vite --open",
     "build:site": "vite build",
-    "build": "vite build -c vite.config.build.ts",
-    "build:ts": "rm -rf dist/es && tsc",
+    "build": "npm run generate:file && vite build -c vite.config.build.ts",
     "serve": "vite preview",
     "upload": "yarn build:site && node ./jd/upload.js",
     "add": "node jd/createComponentMode.js",
-    "publish:beta": "npm publish --tag=beta"
+    "publish:beta": "npm publish --tag=beta",
+    "generate:file": "node jd/generate-nutui.js"
   },
   "dependencies": {
     "axios": "^0.21.0",
@@ -108,4 +108,4 @@
     "type": "git",
     "url": "https://github.com/jdf2e/nutui.git"
   }
-}
+}

src/config.json

@@ -80,7 +80,7 @@
           "author": "richard1015"
         },
         {
-          "name": "collapse",
+          "name": "Collapse",
           "sort": 2,
           "cName": "折叠面板",
           "type": "component",
@@ -89,7 +89,7 @@
           "author": "Ymm0008"
         },
         {
-          "name": "collapse",
+          "name": "CollapseItem",
           "sort": 3,
           "cName": "折叠面板-item",
           "type": "component",
@@ -107,7 +107,7 @@
           "author": "undo"
         },
         {
-          "name": "col",
+          "name": "Col",
           "sort": 5,
           "cName": "布局-Col",
           "type": "component",
@@ -116,7 +116,7 @@
           "author": "undo"
         },
         {
-          "name": "row",
+          "name": "Row",
           "sort": 6,
           "cName": "布局-Row",
           "type": "component",
@@ -186,7 +186,7 @@
           "sort": 1,
           "cName": "模板组件",
           "type": "component",
-          "show": true,
+          "show": false,
           "desc": "组件模板示例",
           "author": "richard1015"
         },
@@ -366,7 +366,7 @@
           "author": "liqiong43"
         },
         {
-          "name": "tab",
+          "name": "Tab",
           "sort": 1,
           "cName": "标签组件",
           "type": "component",
@@ -375,7 +375,7 @@
           "author": "zhenyulei"
         },
         {
-          "name": "menu",
+          "name": "Menu",
           "sort": 2,
           "cName": "菜单组件",
           "type": "component",
@@ -384,7 +384,7 @@
           "author": "vickyYE"
         },
         {
-          "name": "tabbar",
+          "name": "Tabbar",
           "sort": 2,
           "cName": "标签栏组件",
           "type": "component",

src/nutui.ts

@@ -1,17 +1,115 @@
-import { version } from '../package.json';
-const modules = import.meta.globEager('/src/packages/**/index.vue');
-function install(app: any) {
-  /** webpack */
-  // const files = require.context('@/packages', true, /index\.vue$/);
-  // files.keys().forEach(component => {
-  //   const componentEntity = files(component).default;
-  //   app.component(componentEntity.name, componentEntity);
-  // });
+import Button from '/src/packages/button/index.vue';
+import Collapse from '/src/packages/collapse/index.vue';
+import Layout from '/src/packages/layout/index.vue';
+import BackTop from '/src/packages/backtop/index.vue';
+import ActionSheet from '/src/packages/actionsheet/index.vue';
+import Toast from '/src/packages/toast/index.vue';
+import Notify from '/src/packages/notify/index.vue';
+import Picker from '/src/packages/picker/index.vue';
+import Cell from '/src/packages/cell/index.vue';
+import Uploader from '/src/packages/uploader/index.vue';
+import Icon from '/src/packages/icon/index.vue';
+import Price from '/src/packages/price/index.vue';
+import Checkbox from '/src/packages/checkbox/index.vue';
+import Swiper from '/src/packages/swiper/index.vue';
+import Avatar from '/src/packages/avatar/index.vue';
+import Popup from '/src/packages/popup/index.vue';
+import Dialog from '/src/packages/dialog/index.vue';
+import Radio from '/src/packages/radio/index.vue';
+import OverLay from '/src/packages/overlay/index.vue';
+import InfiniteLoading from '/src/packages/infiniteloading/index.vue';
+import Range from '/src/packages/range/index.vue';
+import PullRefresh from '/src/packages/pullrefresh/index.vue';
+import Navbar from '/src/packages/navbar/index.vue';
+import Tab from '/src/packages/tab/index.vue';
+import Menu from '/src/packages/menu/index.vue';
+import Tabbar from '/src/packages/tabbar/index.vue';
+import InputNumber from '/src/packages/inputnumber/index.vue';
+import Input from '/src/packages/input/index.vue';
+import Switch from '/src/packages/switch/index.vue';
+import Rate from '/src/packages/rate/index.vue';
+import Calendar from '/src/packages/calendar/index.vue';
+import ShortPassword from '/src/packages/shortpassword/index.vue';
+import Address from '/src/packages/address/index.vue';
 
-  /** vite */
-  for (const key in modules) {
-    const componentEntity = modules[key]?.default;
-    app.component(componentEntity.name, componentEntity);
-  }
+function install(app: any) {
+  const packages = [
+    Button,
+    Collapse,
+    Layout,
+    BackTop,
+    ActionSheet,
+    Toast,
+    Notify,
+    Picker,
+    Cell,
+    Uploader,
+    Icon,
+    Price,
+    Checkbox,
+    Swiper,
+    Avatar,
+    Popup,
+    Dialog,
+    Radio,
+    OverLay,
+    InfiniteLoading,
+    Range,
+    PullRefresh,
+    Navbar,
+    Tab,
+    Menu,
+    Tabbar,
+    InputNumber,
+    Input,
+    Switch,
+    Rate,
+    Calendar,
+    ShortPassword,
+    Address
+  ];
+  packages.forEach((item: any) => {
+    if (item.install) {
+      app.use(item);
+    } else if (item.name) {
+      app.component(item.name, item);
+    }
+  });
 }
-export default { install, version };
+
+export {
+  Button,
+  Collapse,
+  Layout,
+  BackTop,
+  ActionSheet,
+  Toast,
+  Notify,
+  Picker,
+  Cell,
+  Uploader,
+  Icon,
+  Price,
+  Checkbox,
+  Swiper,
+  Avatar,
+  Popup,
+  Dialog,
+  Radio,
+  OverLay,
+  InfiniteLoading,
+  Range,
+  PullRefresh,
+  Navbar,
+  Tab,
+  Menu,
+  Tabbar,
+  InputNumber,
+  Input,
+  Switch,
+  Rate,
+  Calendar,
+  ShortPassword,
+  Address
+};
+export default { install, version: '3.0.0-beta.3' };

src/packages/actionsheet/demo.vue

@@ -1,76 +1,70 @@
 <template>
   <div class="demo-list demo">
-    <h4>基本用法(选择类)</h4>
-    <div>
-      <div>
-        <nut-cell
-          :showIcon="true"
-          :isLink="true"
-          @click="switchActionSheet('isVisible1')"
-        >
-          <span><label>基础用法</label></span>
-          <div class="selected-option">{{ state.val1 }}</div>
-        </nut-cell>
-        <nut-cell
-          :showIcon="true"
-          :isLink="true"
-          @click="switchActionSheet('isVisible2')"
-        >
-          <span><label>展示取消按钮</label></span>
-          <div class="selected-option">{{ state.val2 }}</div>
-        </nut-cell>
-        <div>
-          <nut-cell :isLink="true" @click="switchActionSheet('isVisible3')">
-            <span><label>展示描述信息</label></span>
-            <div class="selected-option">{{ state.val3 }}</div>
-          </nut-cell>
-        </div>
-        <h4>选项状态</h4>
+    <h2>基本用法(选择类)</h2>
+    <nut-cell
+      :showIcon="true"
+      :isLink="true"
+      @click="switchActionSheet('isVisible1')"
+    >
+      <span><label>基础用法</label></span>
+      <div class="selected-option">{{ state.val1 }}</div>
+    </nut-cell>
+    <nut-cell
+      :showIcon="true"
+      :isLink="true"
+      @click="switchActionSheet('isVisible2')"
+    >
+      <span><label>展示取消按钮</label></span>
+      <div class="selected-option">{{ state.val2 }}</div>
+    </nut-cell>
+    <nut-cell :isLink="true" @click="switchActionSheet('isVisible3')">
+      <span><label>展示描述信息</label></span>
+      <div class="selected-option">{{ state.val3 }}</div>
+    </nut-cell>
+    <h2>选项状态</h2>
 
-        <nut-cell :isLink="true" @click="switchActionSheet('isVisible4')">
-          <span><label>选项状态</label></span>
-          <!-- <div class="selected-option">打开</div> -->
-        </nut-cell>
-        <h4>自定义面板</h4>
+    <nut-cell :isLink="true" @click="switchActionSheet('isVisible4')">
+      <span><label>选项状态</label></span>
+      <!-- <div class="selected-option">打开</div> -->
+    </nut-cell>
+    <h2>自定义面板</h2>
 
-        <nut-cell :isLink="true" @click="switchActionSheet('isVisible5')">
-          <span><label>自定义内容</label></span>
-          <!-- <div class="selected-option">打开</div> -->
-        </nut-cell>
-      </div>
-      <!-- demo 基础用法 -->
-      <nut-actionsheet
-        :is-visible="state.isVisible1"
-        :menu-items="menuItemsOne"
-        @choose="chooseItem"
-      ></nut-actionsheet>
-      <!-- demo(带取消按钮） -->
-      <nut-actionsheet
-        :is-visible="state.isVisible2"
-        cancelTxt="取消"
-        :menu-items="menuItemsOne"
-        @choose="chooseItemTwo"
-      ></nut-actionsheet>
-      <!-- 展示描述信息 -->
-      <nut-actionsheet
-        :is-visible="state.isVisible3"
-        :description="state.desc"
-        :menu-items="menuItemsTwo"
-        @choose="chooseItemThree"
-        cancelTxt="取消"
-      >
-      </nut-actionsheet>
-      <!-- demo 选项状态-->
-      <nut-actionsheet
-        :is-visible="state.isVisible4"
-        cancelTxt="取消"
-        :menu-items="menuItemsThree"
-      ></nut-actionsheet>
-      <!-- demo 自定义 -->
-      <nut-actionsheet :is-visible="state.isVisible5" title="标题">
-        <div class="myContent">内容</div>
-      </nut-actionsheet>
-    </div>
+    <nut-cell :isLink="true" @click="switchActionSheet('isVisible5')">
+      <span><label>自定义内容</label></span>
+      <!-- <div class="selected-option">打开</div> -->
+    </nut-cell>
+    <!-- demo 基础用法 -->
+    <nut-actionsheet
+      :is-visible="state.isVisible1"
+      :menu-items="menuItemsOne"
+      @choose="chooseItem"
+    ></nut-actionsheet>
+    <!-- demo(带取消按钮） -->
+    <nut-actionsheet
+      :is-visible="state.isVisible2"
+      cancelTxt="取消"
+      :menu-items="menuItemsOne"
+      @choose="chooseItemTwo"
+    ></nut-actionsheet>
+    <!-- 展示描述信息 -->
+    <nut-actionsheet
+      :is-visible="state.isVisible3"
+      :description="state.desc"
+      :menu-items="menuItemsTwo"
+      @choose="chooseItemThree"
+      cancelTxt="取消"
+    >
+    </nut-actionsheet>
+    <!-- demo 选项状态-->
+    <nut-actionsheet
+      :is-visible="state.isVisible4"
+      cancelTxt="取消"
+      :menu-items="menuItemsThree"
+    ></nut-actionsheet>
+    <!-- demo 自定义 -->
+    <nut-actionsheet :is-visible="state.isVisible5" title="标题">
+      <div class="myContent">内容</div>
+    </nut-actionsheet>
   </div>
 </template>
 

src/packages/col/index.vue

@@ -4,9 +4,9 @@
   </view>
 </template>
 <script lang="ts">
-import { toRefs, watch, reactive, inject } from 'vue';
+import { reactive, inject } from 'vue';
 import { createComponent } from '@/utils/create';
-const { componentName, create } = createComponent('col');
+const { create } = createComponent('col');
 
 export default create({
   props: {

src/packages/layout/index.vue

@@ -0,0 +1,14 @@
+<script lang="ts">
+import { createComponent } from '@/utils/create';
+const { create } = createComponent('layout');
+import Row from '@/packages/row/index.vue';
+import Col from '@/packages/col/index.vue';
+export default create({
+  components: {
+    [Row.name]: Row,
+    [Col.name]: Col
+  }
+});
+</script>
+
+<style lang="scss"></style>

vite.config.build.ts

@@ -4,6 +4,13 @@ import Markdown from 'vite-plugin-md';
 import path from 'path';
 import config from './package.json';
 // https://vitejs.dev/config/
+
+const banner = `/*!
+* ${config.name} v${config.version} ${new Date()}
+* (c) 2021 @jdf2e.
+* Released under the MIT License.
+*/`;
+
 export default defineConfig({
   resolve: {
     alias: [{ find: '@', replacement: path.resolve(__dirname, './src') }]
@@ -28,11 +35,7 @@ export default defineConfig({
       // 请确保外部化那些你的库中不需要的依赖
       external: ['vue'],
       output: {
-        banner: `/*!
-* ${config.name} v${config.version} ${new Date()}
-* (c) 2021 @jdf2e.
-* Released under the MIT License.
-*/`,
+        banner,
         // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
         globals: {
           vue: 'Vue'
@@ -41,7 +44,9 @@ export default defineConfig({
     },
     lib: {
       entry: 'src/nutui.ts',
-      name: 'nutui'
-    }
+      name: 'nutui',
+      formats: ['es', 'umd']
+    },
+    emptyOutDir: false
   }
 });