{
  "private": true,
  "workspaces": [
    "packages/*"
  ]
}

# W指workspace-root，即在專案根目錄下安裝，下同
yarn add lerna -D -W
# 由於經常使用lerna命令也推薦全域性安裝
yarn global add lerna
or
npm i lerna -g

lerna init

// lerna.json
{
  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
  "useWorkspaces": true,
  "version": "0.0.0"
}

// lerna.json
{
  "version": "independent",
  "npmClient": "yarn"
}

// lerna.json
{
  "command": {
    "version": {
      "message": "chore(release): publish",
      "conventionalCommits": true
    }
  }
}

cd argo-eslint-config
yarn add eslint
npx eslint --init

// argo-eslint-config/package.json
{
  scripts: {
    "lint:script": "npx eslint --ext .js,.jsx,.ts,.tsx --fix --quiet ./"
  }
}

// settings.json
{
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: ['plugin:vue/vue3-essential', 'standard-with-typescript'],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['vue'],
  rules: {}
}

// argo-eslint-config/package.json
{
   "main": "index.js"
}

// argo-eslint-config/package.json
{
  "devDependencies": {
    "@argo-design/eslint-config": "^1.0.0"
  },
  "eslintConfig": {
    "root": true,
    "extends": [
      "@argo-design"
    ]
  }
}

{
  "comma-dangle": "off",
  "no-comma-dangle": "off",
  "@typescript-eslint/comma-dangle": "off",
  "vue/comma-dangle": "off",
}

cd argo-prettier-config
yarn add prettier
yarn add eslint-config-prettier eslint-plugin-prettier

// argo-prettier-config/index.js
module.exports = {
  printWidth: 80, //一行的字元數，如果超過會進行換行，預設為80
  semi: false, // 行尾是否使用分號，預設為true
  trailingComma: 'none', // 是否使用尾逗號
  bracketSpacing: true // 物件大括號直接是否有空格
};

module.exports = {
   "extends": ["plugin:prettier/recommended"]
};

{
  "extends": ["eslint-config-prettier"],
  "plugins": ["eslint-plugin-prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

{
  "devDependencies": {
    "@argo-design/prettier-config": "^1.0.0"
  },
  "prettier": "@argo-design/prettier-config"
}

// settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

cd argo-stylelint-config
yarn add stylelint stylelint-prettier stylelint-config-prettier stylelint-order stylelint-config-rational-order postcss-html postcss-less
# 單獨postcss8
yarn add postcss@^8.0.0

// argo-stylelint-config/index.js
module.exports = {
  plugins: [
    "stylelint-prettier",
  ],
  extends: [
    // "stylelint-config-standard",
    "stylelint-config-standard-vue", 
    "stylelint-config-rational-order",
    "stylelint-prettier/recommended"
  ],
  rules: {
    "length-zero-no-unit": true, // 值為0不需要單位
    "plugin/rational-order": [
      true,
      {
        "border-in-box-model": true, // Border理應作為盒子模型的一部分 預設false
        "empty-line-between-groups": false // 組之間新增空行 預設false
      }
    ]
  },
  overrides: [
    {
      files: ["*.html", "**/*.html"],
      customSyntax: "postcss-html"
    },
    {
      files: ["**/*.{less,css}"],
      customSyntax: "postcss-less"
    }
  ]
};

{
  "devDependencies": {
    "@argo-design/stylelint-config": "^1.0.0"
  },
  "stylelint": {
    "extends": [
      "@argo-design/stylelint-config"
    ]
  }
}

// settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "stylelint.validate": ["css", "less", "vue", "html"],
  "css.validate": false,
  "less.validate": false
}

# 在根目錄安裝husky
yarn add husky -D -W

npm pkg set scripts.prepare="husky install"
npm run prepare
# 新增pre-commit勾點,在提交前執行程式碼lint
npx husky add .husky/pre-commit "yarn lint"

yarn add lint-staged -D -W

{
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{less,css}": [
      "stylelint --fix",
      "prettier --write"
    ],
    "**/*.vue": [
      "eslint --fix",
      "stylelint --fix",
      "prettier --write"
    ]
  }
}

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install lint-staged

<type>(<scope>): <subject>

yarn add commitizen -D -W

yarn add cz-conventional-changelog -D -W

"config": {
  "commitizen": {
    "path": "./node_modules/cz-conventional-changelog"
  }
}

"scripts": {
  "cm": "cz"
},

yarn add commitlint @commitlint/cli @commitlint/config-conventional -D -W

module.exports = {
  extends: ["@commitlint/config-conventional"]
};

npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install commitlint -e

// bar.ts
import _Bar from "./bar.vue";

const Bar = Object.assign(_Bar, {
  install: (app) => {
    app.component(_Bar.name, _Bar);
  }
});

export default Bar;

// foo.ts
import _Foo from "./foo.vue";

const Foo = Object.assign(_Foo, {
  install: (app) => {
    app.component(_Foo.name, _Foo);
  }
});

export default Foo;

// argoIcon.ts
import Foo from "./foo";
import Bar from "./bar";

const icons = [Foo, Bar];

const install = (app) => {
  for (const key of Object.keys(icons)) {
    app.use(icons[key]);
  }
};

const ArgoIcon = {
  ...icons,
  install
};

export default ArgoIcon;

// index.ts
export { default } from "./argoIcon";

export { default as Foo } from "./foo";
export { default as Bar } from "./bar";

// 全量引入import ArgoIcon from "圖示庫";
app.use(ArgoIcon); 

// 按需引入import { Foo } from "圖示庫";
app.use(Foo);

<svg 
  :class="cls" 
  :style="innerStyle"
  :stroke-linecap="strokeLinecap"
  :stroke-linejoin="strokeLinejoin"
  :stroke-width="strokeWidth">
  <path d="..."></path>
</svg>

const template = `
<template>
  ${svgHtml}
</template>

<script setup>
defineProps({
    "stroke-linecap": String;
    // ...
  })
  // 省略邏輯程式碼...
</script>
`

import { build } from "vite";
import fs from "fs-extra";

const CWD = process.cwd();
const ES_DIR = resolve(CWD, "es");
const LIB_DIR = resolve(CWD, "lib");

interface compileOptions {
  umd: boolean;
  target: "component" | "icon";
}

async function compileComponent({
  umd = false,
  target = "component"
}: compileOptions): Promise<void> {
  await fs.emptyDir(ES_DIR);
  await fs.emptyDir(LIB_DIR);
  const config = getModuleConfig(target);
  await build(config);

  if (umd) {
    await fs.emptyDir(DIST_DIR);
    const umdConfig = getUmdConfig(target);
    await build(umdConfig);
  }
}

import { InlineConfig } from "vite";
import glob from "glob";
const langFiles = glob.sync("components/locale/lang/*.ts");

export default function getModuleConfig(type: "component" | "icon"): InlineConfig {
  const entry = "components/index.ts";
  const input = type === "component" ? [entry, ...langFiles] : entry;
  return {
    mode: "production",
    build: {
      emptyOutDir: true,
      minify: false,
      brotliSize: false,
      rollupOptions: {
        input,
        output: [
          {
            format: "es", // 打包模式
            dir: "es", // 產物存放路徑
            entryFileNames: "[name].js", // 入口模組的產物檔名
            preserveModules: true, // 保留模組結構,否則所有模組都將打包在一個bundle檔案中
            /*
             * 保留模組的根路徑，該值會在打包後的output.dir中被移除
             * 我們的入口是components/index.ts,打包後檔案結構為:es/components/index.js
             * preserveModulesRoot設為"components"，打包後就是:es/index.js
            */
            preserveModulesRoot: "components" 
          },
          {
            format: "commonjs",
            dir: "lib",
            entryFileNames: "[name].js",
            preserveModules: true,
            preserveModulesRoot: "components",
            exports: "named" // 匯出模式
          }
        ]
      },
      // 開啟lib模式
      lib: {
        entry,
        formats: ["es", "cjs"]
      }
    },
    plugins: [
      // 自定義external忽略node_modules
      external(),
      // 打包宣告檔案
      dts({
        outputDir: "es",
        entryRoot: C_DIR
      })
    ]
  };
};

export default function getUmdConfig(type: "component" | "icon"): InlineConfig {
  const entry =
    type === "component"
      ? "components/argo-components.ts"
      : "components/argo-icons.ts";
  const entryFileName = type === "component" ? "argo" : "argo-icon";
  const name = type === "component" ? "Argo" : "ArgoIcon";


  return {
    mode: "production",
    build: {
      target: "modules", // 支援原生 ES 模組的瀏覽器
      outDir: "dist", // 打包產物存放路徑
      emptyOutDir: true, // 如果outDir在根目錄下，則清空outDir
      sourcemap: true, // 生成sourcemap 
      minify: false, // 是否壓縮
      brotliSize: false, // 禁用 brotli 壓縮大小報告。
      rollupOptions: { // rollup打包選項
        external: "vue", // 匹配到的模組不會被打包到bundle
        output: [
          {
            format: "umd", // umd格式
            entryFileNames: `${entryFileName}.js`, // 即bundle名
            globals: {
              /*
               * format為umd/iife時，標記外部依賴vue，打包後以Vue取代
               * 未定義時打包結果如下
               * var ArgoIcon = function(vue2) {}(vue);
               * rollup自動猜測是vue,但實際是Vue.這會導致報錯
               * 定義後
               * var ArgoIcon = function(vue) {}(Vue);
              */
              vue: "Vue"
            }
          },
          {
            format: "umd",
            entryFileNames: `${entryFileName}.min.js`,
            globals: {
              vue: "Vue"
            },
            plugins: [terser()] // terser壓縮
          },
        ]
      },
      // 開啟lib模式
      lib: {
        entry, // 打包入口
        name // 全域性變數名
      }
    },
    plugins: [vue(), vueJsx()]
  };
};

export const CWD = process.cwd();
export const C_DIR = resolve(CWD, "components");

import dts from "vite-plugin-dts";

plugins: [
  dts({
    outputDir: "es",
    entryRoot: C_DIR
  })
]

{
  "sideEffects": false,
}

{
  "main": "lib/index.js", // 以esm形式被引入時的入口
  "module": "es/index.js", // 以commonjs形式被引入時的入口
  "types": "es/index.d.ts" // 指定宣告檔案
}

npx storybook init -t vue3 -b webpack5

{
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "devDependencies": {
    "@storybook/vue3": "^6.5.13",
    "@storybook/addon-links": "^6.5.13",
    "@storybook/addon-essentials": "^6.5.13",
    "@storybook/addon-actions": "^6.5.13",
    "@storybook/addon-interactions": "^6.5.13",
    "@storybook/testing-library": "^0.0.13",
    "vue-loader": "^16.8.3",
    "@storybook/builder-webpack5": "^6.5.13",
    "@storybook/manager-webpack5": "^6.5.13",
    "@babel/core": "^7.19.6",
    "babel-loader": "^8.2.5"
  }
}

export const parameters = {
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/
    }
  }
};

module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  framework: "@storybook/vue3",
  core: {
    builder: "@storybook/builder-webpack5"
  },
}

module.exports = {
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /.less$/,
      use: [
        {
          loader: "style-loader"
        },
        {
          loader: "css-loader"
        },
        {
          loader: "less-loader",
          options: {
            lessOptions: {
              javascriptEnabled: true
            }
          }
        }
      ]
    });

    return config;
  },
}

yarn add @vue/babel-plugin-jsx -D

{
  "plugins": ["@vue/babel-plugin-jsx"]
}

const instance = {
  provides: parent ? parent.provides : Object.create(appContext.provides)
}

function provide(key, value) { 
  const parentProvides = currentInstance.parent && currentInstance.parent.provides; 
  const newObj = Object.create(parentProvides);
  currentInstance.provides = newObj;
  newObj[key] = value;
}

function inject(key, defaultValue) { 
  const instance = currentInstance; 
  const provides = instance.parent == null
    ? instance.vnode.appContent && instance.vnode.appContent.provides
    :	instance.parent.provides;

  if(provides && key in provides) {
    return provides[key]
  }
}

import path from "path";
import { outputFileSync } from "fs-extra";
import glob from "glob";

export const CWD = process.cwd();
export const C_DIR = path.resolve(CWD, "components");

export const lessgen = async () => {
  let lessContent = `@import "./style/index.less";\n`; // 全域性樣式檔案
  const lessFiles = glob.sync("**/style/index.less", {
    cwd: C_DIR,
    ignore: ["style/index.less"]
  });
  lessFiles.forEach((value) => {
    lessContent += `@import "./${value}";\n`;
  });

  outputFileSync(path.resolve(C_DIR, "index.less"), lessContent);
  log.success("genless", "generate index.less success!");
};

@import "./style/index.less";
@import "./button/style/index.less";
/* other less of components */

import path from "path";
import { readFile, copySync } from "fs-extra"
import { render } from "less";

export const ES_DIR = path.resolve(CWD, "es");
export const LIB_DIR = path.resolve(CWD, "lib");

const less2css = (lessPath: string): string => {
  const source = await readFile(lessPath, "utf-8");
  const { css } = await render(source, { filename: lessPath });
  return css;
}

const files = glob.sync("**/*.{less,js}", {
  cwd: C_DIR
});

for (const filename of files) {
  const lessPath = path.resolve(C_DIR, `${filename}`);
  // less檔案拷貝到es和lib相對應目錄下
  copySync(lessPath, path.resolve(ES_DIR, `${filename}`));
  copySync(lessPath, path.resolve(LIB_DIR, `${filename}`));

  // 元件樣式/總入口檔案/全域性樣式的入口檔案編譯成css
  if (/index.less$/.test(filename)) {
    const cssFilename = filename.replace(".less", ".css");
    const ES_DEST = path.resolve(ES_DIR, `${cssFilename}`);
    const LIB_DEST = path.resolve(LIB_DIR, `${cssFilename}`);
    const css = await less2css(lessPath);

    writeFileSync(ES_DEST, css, "utf-8");
    writeFileSync(LIB_DEST, css, "utf-8");
  }
}

import path from "path";
import CleanCSS, { Output } from "clean-css";
import { ensureDirSync } from "fs-extra";
export const DIST_DIR = path.resolve(CWD, "dist");

console.log("start build components/index.less to dist/argo(.min).css");
const indexCssPath = path.resolve(ES_DIR, "index.css");
const css = readFileSync(indexCssPath, "utf8");
const minContent: Output = new CleanCSS().minify(css);

ensureDirSync(DIST_DIR);
writeFileSync(path.resolve("dist/argo.css"), css);
writeFileSync(path.resolve("dist/argo.min.css"), minContent.styles);
log.success(`build components/index.less to dist/argo(.min).css`);

import "../../style/index.less";
import "./index.less";

import "../../style/index.css";
import "./index.css";

"sideEffects": [
  "dist/*",
  "es/**/style/*",
  "lib/**/style/*",
  "*.less"
]

// locale.ts
import { ref, reactive, computed, inject } from "vue";
import { isString } from "../_utils/is";
import zhCN from "./lang/zh-cn";

export interface ArgoLang {
  locale: string;
  button: {
    defaultText: string;
  }
}

type ArgoI18nMessages = Record<string, ArgoLang>;

// 預設使用中文
const LOCALE = ref("zh-CN");
const I18N_MESSAGES = reactive<ArgoI18nMessages>({
  "zh-CN": zhCN
});

// 新增語言套件
export const addI18nMessages = (
  messages: ArgoI18nMessages,
  options?: {
    overwrite?: boolean;
  }
) => {
  for (const key of Object.keys(messages)) {
    if (!I18N_MESSAGES[key] || options?.overwrite) {
      I18N_MESSAGES[key] = messages[key];
    }
  }
};

// 切換語言套件
export const useLocale = (locale: string) => {
  if (!I18N_MESSAGES[locale]) {
    console.warn(`use ${locale} failed! Please add ${locale} first`);
    return;
  }
  LOCALE.value = locale;
};

// 獲取當前語言
export const getLocale = () => {
  return LOCALE.value;
};

export const useI18n = () => {
  const i18nMessage = computed<ArgoLang>(() => I18N_MESSAGES[LOCALE.value]);
  const locale = computed(() => i18nMessage.value.locale);

  const transform = (key: string): string => {
    const keyArray = key.split(".");
    let temp: any = i18nMessage.value;

    for (const keyItem of keyArray) {
      if (!temp[keyItem]) {
        return key;
      }
      temp = temp[keyItem];
    }
    return temp;
  };

  return {
    locale,
    t: transform
  };
};

// lang/zh-CN.ts
const lang: ArgoLang = {
  locale: "zh-CN",
  button: {
    defaultText: "按鈕"
  },
}

// lang/en-US.ts
const lang: ArgoLang = {
  locale: "en-US",
  button: {
    defaultText: "Button",
  },
}

<template>
  <button>
    <slot> {{ t("button.defaultText") }} </slot>
  </button>
</template>

<script>
import { defineComponent } from "vue";
import { useI18n } from "../locale";

export default defineComponent({
  name: "Button",
  setup(props, { emit }) {
    const { t } = useI18n();

    return {
      t
    };
  }
});
</script>

import { computed } from "vue";
import { Meta, StoryFn } from "@storybook/vue3";
import {
  Button,
  addI18nMessages,
  useLocale,
  getLocale
} from "@argo-design/argo-ui/components/index"; // 原始檔形式引入方便開發時偵錯
import enUS from "@argo-design/argo-ui/components/locale/lang/en-us";

interface Args {}

export default {
  title: "Component/locale",
  argTypes: {}
} as Meta<Args>;

const BasicTemplate: StoryFn<Args> = (args) => {
  return {
    components: { Button },
    setup() {
      addI18nMessages({ "en-US": enUS });
      const currentLang = computed(() => getLocale());
      const changeLang = () => {
        const lang = getLocale();
        if (lang === "en-US") {
          useLocale("zh-CN");
        } else {
          useLocale("en-US");
        }
      };
      return { args, changeLang, currentLang };
    },
    template: `
      <h1>內部切換語言,當前語言: {{currentLang}}</h1>
      <p>僅在未提供ConfigProvider時生效</p>
      <Button type="primary" @click="changeLang">點選切換語言</Button>
      <Button long style="marginTop: 20px;"></Button>
    `
  };
};
export const Basic = BasicTemplate.bind({});
Basic.storyName = "基本使用";
Basic.args = {};

import "@argo-design/argo-ui/components/index.less";

<template>
  <a-config-provider :locale="enUS">
    <a-button />
  </a-config-provider>
</template>

<template>
  <slot />
</template>

<script>
import type { PropType } from "vue";
import {
  defineComponent,
  provide,
  reactive,
  toRefs,
} from "vue";
import { configProviderInjectionKey } from "./context";

export default defineComponent({
  name: "ConfigProvider",
  props: {
    locale: {
      type: Object as PropType<ArgoLang>
    },
  },
  setup(props, { slots }) {
    const { locale } = toRefs(props);
    const config = reactive({
      locale,
    });

    provide(configProviderInjectionKey, config);
  }
});
</script>

export interface ConfigProvider {
  locale?: ArgoLang;
}

export const configProviderInjectionKey: InjectionKey<ConfigProvider> =
  Symbol("ArgoConfigProvider");

import { configProviderInjectionKey } from "../config-provider/context";

export const useI18n = () => {
  const configProvider = inject(configProviderInjectionKey, undefined);
  const i18nMessage = computed<ArgoLang>(
    () => configProvider?.locale ?? I18N_MESSAGES[LOCALE.value]
  );
  const locale = computed(() => i18nMessage.value.locale);

  const transform = (key: string): string => {
    const keyArray = key.split(".");
    let temp: any = i18nMessage.value;

    for (const keyItem of keyArray) {
      if (!temp[keyItem]) {
        return key;
      }
      temp = temp[keyItem];
    }
    return temp;
  };

  return {
    locale,
    t: transform
  };
};

const ProviderTemplate: StoryFn<Args> = (args) => {
  return {
    components: { Button, ConfigProvider },
    render() {
      return (
        <ConfigProvider {...args}>
          <Button long={true} />
        </ConfigProvider>
      );
    }
  };
};
export const Provider = ProviderTemplate.bind({});
Provider.storyName = "在config-provider中使用";
Provider.args = {
  // 在這裡把enUS傳給ConfigProvider的locale
  locale: enUS
};

import { createApp } from "vue";
import App from "./App.vue";
import { Button, Empty, ConfigProvider } from "@argo-design/argo-ui";
import { Anchor } from "@argo-design/argo-ui";
createApp(App)
  .use(Button)
  .use(Empty)
  .use(ConfigProvider)
  .use(Anchor)
  .mount("#root");

import { defineConfig } from "vite";
import argoAutoInjectStyle from 'vite-plugin-argo-auto-inject-style';
export default defineConfig({
  plugins: [
      argoAutoInjectStyle({
            libs: [
        {
                  libraryName: "@argo-design/argo-ui",          
                  resolveStyle: (name) => {
                              return `@argo-design/argo-ui/es/${name}/style/index.js`;
          }
        }
      ]
    })
  ]
})

{
  name: "vite-plugin-vue-auto-inject-style",
  configResolved(config) {}
}

import type { Plugin } from "vite";
import { createFilter } from "@rollup/pluginutils";
import { ExportSpecifier, ImportSpecifier, init, parse } from "es-module-lexer";
import MagicString from "magic-string";
import * as changeCase from "change-case";
import { Lib, VitePluginOptions } from "./types";

const asRE = /\s+as\s+\w+,?/g;

// 外掛本質是一個物件，但為了接受在設定時傳遞的引數，我們通常在一個函數中將其返回。
// 外掛預設開發和構建階段都會應用
export default function(options: VitePluginOptions): Plugin {
  const {
    libs,
    include = ["**/*.vue", "**/*.ts", "**/*.tsx"],
    exclude = "node_modules/**"
  } = options;
  const filter = createFilter(include, exclude);

  return {
    name: "vite:argo-auto-inject-style",
    async transform(code: string, id: string) {
      if (!filter(id) || !code || !needTransform(code, libs)) {
        return null;
      }

      await init;
      let imports: readonly ImportSpecifier[] = [];
      imports = parse(code)[0];
  
      if (!imports.length) {
        return null;
      }

      let s: MagicString | undefined;
      const str = () => s || (s = new MagicString(code));

      for (let index = 0; index < imports.length; index++) {
        // ss import語句開始索引
        // se import語句介結束索引
        const { n: moduleName, se, ss } = imports[index];

        if (!moduleName) continue;

        const lib = getLib(moduleName, libs);
        if (!lib) continue;

        // 整條import語句
        const importStr = code.slice(ss, se); 
        // 拿到每條import語句匯入的元件集合
        const importItems = getImportItems(importStr);

        let endIndex = se + 1;

        for (const item of importItems) {
          const componentName = item.n;
          const paramName = changeCase.paramCase(componentName);
          const cssImportStr = `\nimport "${lib.resolveStyle(paramName)}";`;
          str().appendRight(endIndex, cssImportStr);
        }
      }

      return {
        code: str().toString()
      };
    }
  };
}

export type { Lib, VitePluginOptions };

function getLib(libraryName: string, libs: Lib[]) {
  return libs.find((item) => item.libraryName === libraryName);
}

function getImportItems(importStr: string) {
  if (!importStr) {
    return [];
  }
  const matchItem = importStr.match(/{(.+?)}/gs);
  const formItem = importStr.match(/from.+/gs);
  if (!matchItem) return [];
  const exportStr = `export ${matchItem[0].replace(asRE, ",")} ${formItem}`;

  let importItems: readonly ExportSpecifier[] = [];
  try {
    importItems = parse(exportStr)[1];
  } catch (error) {
    console.log(error);
  }
  return importItems;
}

function needTransform(code: string, libs: Lib[]) {
  return libs.some(({ libraryName }) => {
    return new RegExp(`('${libraryName}')|("${libraryName}")`).test(code);
  });
}

export interface Lib {
  libraryName: string;
  resolveStyle: (name: string) => string;
}

export type RegOptions =
  | string
  | RegExp
  | Array<string | RegExp>
  | null
  | undefined;

export interface VitePluginOptions {
  include?: RegOptions;
  exclude?: RegOptions;
  libs: Lib[];
}

@blue-6: #3491fa;
@blue-1: color-palette(@blue-6, 1);
@blue-2: color-palette(@blue-6, 2);
@blue-3: color-palette(@blue-6, 3);
@blue-4: color-palette(@blue-6, 4);
@blue-5: color-palette(@blue-6, 5);
@blue-7: color-palette(@blue-6, 7);
@blue-8: color-palette(@blue-6, 8);
@blue-9: color-palette(@blue-6, 9);
@blue-10: color-palette(@blue-6, 10);

@primary-1: @blue-1;
@primary-2: @blue-2;
@primary-3: @blue-3;
// 以此類推...

@success-1: @green-1;
@success-2: @green-2;
@success-3: @green-3;
// 以此類推...

/* @warn @danger @info等等 */

@color-primary-1: @primary-1;
@color-primary-2: @primary-2;
@color-primary-3: @primary-3;
/* ... */

.argo-btn.arco-btn-primary {
  color: #fff;  
  background-color: @color-primary-1;
}

// webpack.config.js
module.exports = {
  rules: [{
    test: /.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader',
    }, {
      loader: 'less-loader',
     options: {
       lessOptions: {
         modifyVars: {
           'primary-6': '#f85959',
         },
         javascriptEnabled: true,
       },
     },
    }],
  }],
}

// vite.config.js
export default {
  css: {
   preprocessorOptions: {
     less: {
       modifyVars: {
         'primary-6': '#f85959',
       },
       javascriptEnabled: true,
     }
   }
  },
}

@dark-blue-1: dark-color-palette(@blue-6, 1);
@dark-blue-2: dark-color-palette(@blue-6, 2);
@dark-blue-3: dark-color-palette(@blue-6, 3);
@dark-blue-4: dark-color-palette(@blue-6, 4);
@dark-blue-5: dark-color-palette(@blue-6, 5);
@dark-blue-6: dark-color-palette(@blue-6, 6);
@dark-blue-7: dark-color-palette(@blue-6, 7);
@dark-blue-8: dark-color-palette(@blue-6, 8);
@dark-blue-9: dark-color-palette(@blue-6, 9);
@dark-blue-10: dark-color-palette(@blue-6, 10);

body {
  --color-bg: #fff;  
  --color-text: #000;  
  --primary-6: @primary-6; 
}
body[argo-theme="dark"] {
  --color-bg: #000;  
  --color-text: #fff;  
  --primary-6: @dark-primary-6; 
}

.argo-btn.argo-btn-primary {
  color: #fff;  
  background-color: var(--primary-6);
}

body {
  color: var(--color-bg);  
  background-color: var(--color-text);
}

// 設定為暗黑模式
document.body.setAttribute('argo-theme', 'dark')

// 恢復亮色模式
document.body.removeAttribute('argo-theme');

body {
  --primary-6: '#3491fa'
}
.argo-btn {  
  color: #fff;  
  background-color: var(--primary-6);
}

// 可計算selectedColor的10個顏色梯度值列表，並逐一替換
document.body.style.setProperty('--primary-6', colorPalette(selectedColor, 6));
// ....

## zh-CN
```yaml
meta:
  type: 元件
  category: 通用
title: 按鈕 Button
description: 按鈕是一種命令元件，可發起一個即時操作。
```
---
## en-US
```yaml
meta:
  type: Component
  category: Common
title: Button
description: Button is a command component that can initiate an instant operation.
```
---

@import ./__demo__/basic.md
@import ./__demo__/disabled.md

## API
%%API(button.vue)%%

## TS
%%TS(interface.ts)%%

%%API(button.vue)%%

%%INTERFACE(interface.ts)%%

import { Project } from "ts-morph";
const project = new Project();
project.addSourceFileAtPath(filepath);
const sourceFile = project.getSourceFile(filepath);
const interfaces = sourceFile.getInterfaces();
const componentDocList = [];
interfaces.forEach((interfaceDeclaration) => {
  const properties = interfaceDeclaration.getProperties();
  const componentDocJson = {
    displayName: interfaceDeclaration.getName(),
    exportName: interfaceDeclaration.getName(),
    props: formatterProps(properties),
    tags: {}
  };

  if (componentDocJson.props.length) {
    componentDocList.push(componentDocJson);
  }
});

// genMd(componentDocList);

```yaml
meta:
  type: 元件
  category: 通用
title: 按鈕 Button
description: 按鈕是一種命令元件，可發起一個即時操作。
```

@import ./__demo__/basic.md

@import ./__demo__/disabled.md

## API

### `<button>` Props
|引數名|描述|型別|預設值|
|---|---|---|:---:|
|type|按鈕的型別，分為五種：次要按鈕、主要按鈕、虛框按鈕、線性按鈕、文字按鈕。|`'secondary' | 'primary' | 'dashed' | 'outline' | 'text'`|`"secondary"`|
|shape|按鈕的形狀|`'square' | 'round' | 'circle'`|`"square"`|
|status|按鈕的狀態|`'normal' | 'warning' | 'success' | 'danger'`|`"normal"`|
|size|按鈕的尺寸|`'mini' | 'small' | 'medium' | 'large'`|`"medium"`|
|long|按鈕的寬度是否隨容器自適應。|`boolean`|`false`|
|loading|按鈕是否為載入中狀態|`boolean`|`false`|
|disabled|按鈕是否禁用|`boolean`|`false`|
|html-type|設定 `button` 的原生 `type` 屬性，可選值參考 [HTML標準](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type "_blank")|`'button' | 'submit' | 'reset'`|`"button"`|
|href|設定跳轉連結。設定此屬性時，按鈕渲染為a標籤。|`string`|`-`|

### `<button>` Events
|事件名|描述|引數|
|---|---|---|
|click|點選按鈕時觸發|event: `Event`|

### `<button>` Slots
|插槽名|描述|引數|
|---|:---:|---|
|icon|圖示|-|

### `<button-group>` Props
|引數名|描述|型別|預設值|
|---|---|---|:---:|
|disabled|是否禁用|`boolean`|`false`|

## INTERFACE

### ButtonProps
|引數名|描述|型別|預設值|
|---|---|---|:---:|
|type|按鈕型別|`ButtonTypes`|`-`|

const Button = () => import("@argo-design/argo-ui/components/button/README.zh-CN.md");

const router = createRouter({
  {
    path: "/button",
  	component: Button
  }
});

export default router;

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import md from "./plugins/vite-plugin-md/index";

export default defineConfig({
  server: {
    port: 8002,
  },
  plugins: [md(), vue()],
});

// App.vue
<template>
  <ReadMe />
</template>

<script setup>
import ReadMe from "./readme.md";
</script>

// readme.md
@import ./__demo__/basic.md

@import "./__demo__/basic.md"

<template>
  <basic-demo />
</template>

<script>
import { defineComponent } from "vue";
import BasicDemo from "./__demo__/basic.md";

export default defineComponent({
  name: "ArgoMain",
  components: { BasicDemo },
});
</script>

// marked.ts
import { marked } from "marked";
import path from "path";

const mdImport = {
  name: "mdImport",
  level: "block",
  tokenizer(src: string) {
    const rule = /^@import\s+(.+)(?:\n|$)/;
    const match = rule.exec(src);
    if (match) {
      const filename = match[1].trim();
      const basename = path.basename(filename, ".md");

      return {
        type: "mdImport",
        raw: match[0],
        filename,
        basename,
      };
    }
    return undefined;
  },
  renderer(token: any) {
    return `<demo-${token.basename} />\n`;
  },
};

marked.use({
  extensions: [mdImport],
});

export default marked;

// index.ts
import { Plugin } from "vite";
import marked from "./marked";

export default function vueMdPlugin(): Plugin {
  return {
    name: "vite:argo-vue-docs",
    async transform(code: string, id: string) {
      if (!id.endsWith(".md")) {
        return null;
      }
      const tokens = marked.lexer(code);
      const html = marked.parser(tokens);
      const vueCode = transformMain({ html, tokens });
    },
  };
}

// vue-template.ts
import changeCase from "change-case";
import marked from "./marked";

export const transformMain = ({
  html,
  tokens,
}: {
  html: string;
  tokens: any[];
}): string => {
  const imports = [];
  const components = [];
  for (const token of tokens) {
    const componentName = changeCase.pascalCase(`demo-${token.basename}`);

    imports.push(`import ${componentName} from "${token.filename}";`);
    components.push(componentName);
  }


  return `
  <template>
    ${html}
  </template>

  <script>
import { defineComponent } from "vue";
${imports.join("\n")};

export default defineComponent({
  name: "ArgoMain",
  components: { ${components.join(",")} },
});
</script>
`;
};

import { getVueId } from "./utils";

export default function vueMdPlugin(): Plugin {
  let vuePlugin: Plugin | undefined;
  return {
    name: "vite:argo-vue-docs",
    configResolved(resolvedConfig) {
      vuePlugin = resolvedConfig.plugins.find((p) => p.name === "vite:vue");
    },
    async transform(code: string, id: string) {
      if (!id.endsWith(".md")) {
        return null;
      }
      if (!vuePlugin) {
        return this.error("Not found plugin [vite:vue]");
      }
      const tokens = marked.lexer(code);
      const html = marked.parser(tokens);
      const vueCode = transformMain({ html, tokens });
      return await vuePlugin.transform?.call(this, vueCode, getVueId(id));
    },
  };
}

// utils.ts
export const getVueId = (id: string) => {
  return id.replace(".md", ".vue");
};

Uncaught SyntaxError: The requested module '/src/__demo__/basic.md?import' does not provide an export named 'default' (at readme.vue:9:8)

// index.ts
async transform(code: string, id: string) {
  if (!id.endsWith(".md")) {
    return null;
  }

  // 新增對demo檔案的解析分支
  if (isDemoMarkdown(id)) {
    const tokens = marked.lexer(code);
    const vueCode = transformDemo({ tokens, filename: id });
    return await vuePlugin.transform?.call(this, vueCode, getVueId(id));
  } else {
    const tokens = marked.lexer(code);
    const html = marked.parser(tokens);
    const vueCode = transformMain({ html, tokens });
    return await vuePlugin.transform?.call(this, vueCode, getVueId(id));
  }

},

// utils.tsexport 
const isDemoMarkdown = (id: string) => {
  return //__demo__//.test(id);
};

// vue-template.ts
export const transformDemo = ({
  tokens,
  filename,
}: {
  tokens: any[];
  filename: string;
}) => {
  const data = {
    html: "",
  };

  const vueCodeTokens = tokens.filter(token => {
    return token.type === "code" && token.lang === "vue"
  });
  data.html = marked.parser(vueCodeTokens);

  return `
  <template>
    <hr />
    ${data.html}
  </template>

  <script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "ArgoDemo",
});
</script>
`;
};

export const transformDemo = ({
  tokens,
  filename,
}: {
  tokens: any[];
  filename: string;
}) => {
  const data = {
    html: "",
  };
  const virtualPath = `/@virtual${filename}`;
  const vueCodeTokens = tokens.filter(token => {
    const isValid = token.type === "code" && token.lang === "vue"
    // 快取vue模版程式碼
    isValid && createDescriptor(virtualPath, token.text);
    return isValid;
  });
  data.html = marked.parser(vueCodeTokens);

  return `
  <template>
    <Result />
    <hr />
    ${data.html}
  </template>

  <script>
import { defineComponent } from "vue";
import Result from "${virtualPath}";

export default defineComponent({
  name: "ArgoDemo",
  components: {
    Result
  }
});
</script>
`;
};

// utils.ts
export const isVirtualModule = (id: string) => {
  return //@virtual/.test(id);
};

export default function docPlugin(): Plugin {
  let vuePlugin: Plugin | undefined;

  return {
    name: "vite:plugin-doc",
    resolveId(id) {
      if (isVirtualModule(id)) {
        return id;
      }
      return null;
    },
    load(id) {
      // 遇到虛擬md模組，直接返回快取的內容
      if (isVirtualModule(id)) {
        return getDescriptor(id);
      }
      return null;
    },
    async transform(code, id) {
      if (!id.endsWith(".md")) {
        return null;
      }

      if (isVirtualModule(id)) {
        return await vuePlugin.transform?.call(this, code, getVueId(id));
      }

      // 省略其它程式碼...
    }
  }
}

// cache.ts
const cache = new Map();
export const createDescriptor = (id: string, content: string) => {
  cache.set(id, content);
};
export const getDescriptor = (id: string) => {
  return cache.get(id);
};

yarn add prismjs

// marked.ts
import Prism from "prismjs";
import loadLanguages from "prismjs/components/index.js";

const languages = ["shell", "js", "ts", "jsx", "tsx", "less", "diff"];
loadLanguages(languages);

marked.setOptions({
  highlight(
    code: string,
    lang: string,
    callback?: (error: any, code?: string) => void
  ): string | void {
    if (languages.includes(lang)) {
      return Prism.highlight(code, Prism.languages[lang], lang);
    }
    return Prism.highlight(code, Prism.languages.html, "html");
  },
});

// main.ts
import "prismjs/themes/prism.css";

import "../../style/index.less"; // 全域性樣式
import "./index.less"; // 元件樣式複製程式碼

import type { Plugin } from "vite";
import { OutputChunk } from "rollup";

export default function cssjsPlugin(): Plugin {
  return {
    name: "vite:cssjs",
    async generateBundle(outputOptions, bundle) {
      for (const filename of Object.keys(bundle)) {
        const chunk = bundle[filename] as OutputChunk;
        this.emitFile({
          type: "asset",
          fileName: filename.replace("index.js", "css.js"),
          source: chunk.code.replace(/.less/g, ".css")
        });
      }
    }
  };
}