feat(css): build css

package.json

@@ -32,12 +32,6 @@
     "@types/node": "^18.11.12",
     "@typescript-eslint/eslint-plugin": "^6.2.1",
     "@typescript-eslint/parser": "^6.2.1",
-    "@babel/core": "^7.14.6",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "^7.14.7",
-    "@babel/preset-typescript": "^7.14.5",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "eslint": "^8.46.0",

packages/demo-test/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "vue": "^3.4.21",
-    "@yike-design/ui": "^0.0.8",
+    "@yike-design/ui": "workspace:*",
     "@yike-design/resolver": "workspace:*",
     "unplugin-vue-components": "^0.26.0",
     "unplugin-auto-import": "^0.17.5"

packages/demo-test/src/App.vue

@@ -18,6 +18,9 @@ import HelloWorld from './components/HelloWorld.vue'
     <yk-button type="outline">线框按钮</yk-button>
     <IconCupOutline />
   </yk-space>
+  <yk-input-search>
+    <IconCupOutline />
+  </yk-input-search>
   <HelloWorld msg="Vite + Vue" />
 </template>
 

packages/demo-test/src/main.ts

@@ -2,5 +2,10 @@ import { createApp } from 'vue';
 import './style.css';
 import App from './App.vue';
 import '@yike-design/ui/es/components/styles/index.less';
+import { YkTitle, YkMessage, YkNotification } from '@yike-design/ui';
 
-createApp(App).mount('#app');
+const app = createApp(App);
+app.component(YkTitle.name, YkTitle).mount('#app');
+
+app.config.globalProperties.$notification = YkNotification;
+app.config.globalProperties.$message = YkMessage;

packages/yike-design-build/scripts/build-style/index.ts

@@ -71,6 +71,20 @@ function cssjsPlugin(): Plugin {
     async generateBundle(outputOptions, bundle) {
       for (const filename of Object.keys(bundle)) {
         // const chunk = bundle[filename];
+        const indexExist = fs.existsSync(
+          resolvePath('es\\', filename.replace('index.js', 'index.css')),
+        );
+        if (!indexExist) {
+          this.emitFile({
+            type: 'asset',
+            fileName: filename.replace('index.js', 'index.css'),
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            // FIX ME
+            // Change the content of index.js to be correct
+            source: '',
+          });
+        }
         this.emitFile({
           type: 'asset',
           fileName: filename.replace('index.js', 'css.js'),

packages/yike-design-demo/src/views/develop/getting-started.md

@@ -14,6 +14,7 @@ npm install --save-dev @yike-design/ui
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { YikeResolver } from '@yike-design/resolver' // https://vitejs.dev/config/ export default
+
 defineConfig({
   plugins: [
     vue(),
@@ -27,6 +28,13 @@ main.ts
 
 ```ts
 import '@yike-design/ui/es/components/styles/index.less'
+// 引入全局方法
+import { YkMessage, YkNotification } from '@yike-design/ui'
+
+const app = createApp(App)
+
+app.config.globalProperties.$notification = YkNotification
+app.config.globalProperties.$message = YkMessage
 ```
 
 package.json

packages/yike-design-resolver/src/index.ts

@@ -1,61 +1,5 @@
-export { YikeResolver } from './yike';
-const matchComponents = [
-  { pattern: /^YkUpload$/, componentDir: 'upload' },
-  { pattern: /^(YkRadio|YkRadioGroup)$/, componentDir: 'radio' },
-  { pattern: /^(YkCheckbox|YkCheckboxGroup)$/, componentDir: 'checkbox' },
-  { pattern: /^YkAnchor$/, componentDir: 'anchor' },
-  { pattern: /^YkPopover$/, componentDir: 'popover' },
-  { pattern: /^YkSwitch$/, componentDir: 'switch' },
-  { pattern: /^YkDrawer$/, componentDir: 'drawer' },
-  { pattern: /^(YkTable|YkTableColumn)$/, componentDir: 'table' },
-  { pattern: /^(YkBreadcrumb|YkBreadcrumbItem)$/, componentDir: 'breadcrumb' },
-  { pattern: /^YkBadge$/, componentDir: 'badge' },
-  { pattern: /^YkScrollbar$/, componentDir: 'scrollbar' },
-  { pattern: /^YkRate$/, componentDir: 'rate' },
-  { pattern: /^YkAffix$/, componentDir: 'affix' },
-  { pattern: /^YkInput$/, componentDir: 'input' },
-  { pattern: /^YkInputSearch$/, componentDir: 'input-search' },
-  { pattern: /^YkTree$/, componentDir: 'tree' },
-  { pattern: /^YkTreeSelect$/, componentDir: 'tree-select' },
-  { pattern: /^YkSlider$/, componentDir: 'slider' },
-  { pattern: /^YkCollapse$/, componentDir: 'collapse' },
-  { pattern: /^YkCollapseGroup$/, componentDir: 'collapse' },
-  { pattern: /^YkPopconfirm$/, componentDir: 'popconfirm' },
-  { pattern: /^YkInputNumber$/, componentDir: 'input-number' },
-  { pattern: /^(YkTabs|YkTabPane)$/, componentDir: 'tabs' },
-  { pattern: /^(YkForm|YkFormItem)$/, componentDir: 'form' },
-  { pattern: /^YkInputTag$/, componentDir: 'input-tag' },
-  { pattern: /^YkPagination$/, componentDir: 'pagination' },
-  { pattern: /^YkTextArea$/, componentDir: 'text-area' },
-  { pattern: /^YkTag$/, componentDir: 'tag' },
-  { pattern: /^YkCalendar$/, componentDir: 'calendar' },
-  { pattern: /^YkSkeleton$/, componentDir: 'skeleton' },
-  { pattern: /^YkDivider$/, componentDir: 'divider' },
-  { pattern: /^YkLink$/, componentDir: 'link' },
-  { pattern: /^YkAlert$/, componentDir: 'alert' },
-  { pattern: /^YkButton$/, componentDir: 'button' },
-  { pattern: /^YkTheme$/, componentDir: 'theme' },
-  { pattern: /^YkIcon$/, componentDir: 'icon' },
-  { pattern: /^(YkAvatar|YkAvatarGroup)$/, componentDir: 'avatar' },
-  { pattern: /^YkSpace$/, componentDir: 'space' },
-  { pattern: /^(YkTimeline|YkTimelineItem)$/, componentDir: 'timeline' },
-  { pattern: /^YkMessage$/, componentDir: 'message' },
-  { pattern: /^YkNotification$/, componentDir: 'notification' },
-  { pattern: /^(YkParagraph|YkTitle|YkText)$/, componentDir: 'typography' },
-  { pattern: /^YkBackTop$/, componentDir: 'back-top' },
-  { pattern: /^YkTooltip$/, componentDir: 'tooltip' },
-  { pattern: /^YkEmpty$/, componentDir: 'empty' },
-  { pattern: /^YkProgress$/, componentDir: 'progress' },
-  { pattern: /^YkModal$/, componentDir: 'modal' },
-  { pattern: /^(YkDropdown|YkDropdownItem)$/, componentDir: 'dropdown' },
-  {
-    pattern: /^(YkImage|YkImagePreview|YkImagePreviewGroup)$/,
-    componentDir: 'image',
-  },
-  { pattern: /^YkSpinner$/, componentDir: 'spinner' },
-  { pattern: /^vLoading$/, componentDir: 'directive' },
-];
-
+export { YikeResolver, matchComponents } from './yike';
+import { matchComponents } from './yike';
 export function kebabCase(key: string) {
   const result = key.replace(/([A-Z])/g, ' $1').trim();
   return result.split(' ').join('-').toLowerCase();

packages/yike-design-resolver/src/yike.ts

@@ -1,7 +1,7 @@
 import type { ComponentInfo, ComponentResolver } from './types';
 import { isExclude } from './_utils';
 
-const matchComponents = [
+export const matchComponents = [
   { pattern: /^YkUpload$/, componentDir: 'upload' },
   { pattern: /^(YkRadio|YkRadioGroup)$/, componentDir: 'radio' },
   { pattern: /^(YkCheckbox|YkCheckboxGroup)$/, componentDir: 'checkbox' },