feat(rust-plugins): 🎸 modular UI component build plugin for Farm.

[asasugar]

@farmfe/plugin-modular-import

Modular UI library build plugin for Farm.

Install

Plugin

npm i -D @farmfe/plugin-modular-import

Usage

Via farm.config.ts.

import { defineConfig } from '@farmfe/core';

export default defineConfig({
  plugins: [
      ["@farmfe/plugin-modular-import", {
        /**
         * zie of zooming icon
         * @type {string}
         * @default lib
         */
        libDir: 'lib',
        /**
         * @description The components lib directory
         * @type {string}
         */
        libraryName: "",
        /**
         * @description The UI library name
         * @type {boolean}
         * @default true
         */
        camel2Dash: true,
        /**
         * @description style lib directory, default "lib"
         * @type {string}
         * @default lib
         */
        styleLibDir: 'lib',
        /**
         * @description the style library name. e.g. custon-theme =>  custon-theme/index.css
         * @type {string}
         */
        styleLibraryName: '',
        /**
         * @description custom style path
         * @type {string}
         * @default index.css
         */
        styleLibraryPath: 'index.css',
    }],
  ],
});

Example

Default Usage

export default defineConfig({
  plugins: [
    ['@farmfe/plugin-modular-import', {
      libraryName: 'element-ui',
    }]
  ],
});

Converts

import { SomeComponent } from 'element-ui'

To

import SomeComponent from 'element-ui/lib/SomeComponent';
import 'element-ui/lib/SomeComponent/index.css';

Set libDir Usage

export default defineConfig({
  plugins: [
    ['@farmfe/plugin-modular-import', {
      libraryName: 'element-ui',
      libDir: 'es',
    }]
  ],
});

Converts

import { SomeComponent } from 'element-ui'

To

import SomeComponent from 'element-ui/es/SomeComponent';
import 'element-ui/lib/SomeComponent/index.css';

Set camel2Dash Usage

export default defineConfig({
  plugins: [
    ['@farmfe/plugin-modular-import', {
      libraryName: 'element-ui',
      libDir: 'es',
      camel2Dash: false,
    }]
  ],
});

Converts

import { SomeComponent } from 'element-ui'

To

import SomeComponent from 'element-ui/es/someComponent';
import 'element-ui/lib/someComponent/index.css';

Set styleLibDir Usage

export default defineConfig({
  plugins: [
    ['@farmfe/plugin-modular-import', {
      libraryName: 'element-ui',
      libDir: 'es',
      camel2Dash: false,
      styleLibDir: 'lib',
    }]
  ],
});

Converts

import { SomeComponent } from 'element-ui'

To

import SomeComponent from 'element-ui/es/someComponent';
import 'element-ui/lib/someComponent/index.css';

Set styleLibraryName Usage

export default defineConfig({
  plugins: [
    ['@farmfe/plugin-modular-import', {
      libraryName: 'element-ui',
      libDir: 'es',
      camel2Dash: false,
      styleLibDir: 'lib',
      styleLibraryName: 'theme-default',
    }]
  ],
});

Converts

import { SomeComponent } from 'element-ui'

To

import SomeComponent from 'element-ui/es/someComponent';
import 'element-ui/lib/theme-default/someComponent/index.css';

Set styleLibraryPath Usage

export default defineConfig({
  plugins: [
    ['@farmfe/plugin-modular-import', {
      libraryName: 'element-ui',
      libDir: 'es',
      camel2Dash: false,
      styleLibDir: 'lib',
      styleLibraryName: 'theme-default',
      styleLibraryPath: 'style/index.css'
    }]
  ],
});

Converts

import { SomeComponent } from 'element-ui'

To

import SomeComponent from 'element-ui/es/someComponent';
import 'element-ui/lib/theme-default/someComponent/style/index.css';

[Maidang1]

插件内部的 workflow 文件应该都可以删掉 统一用外面的就可以了，需要在最外面的 build.yaml 最后加一行这个插件的上传配置。以及 rust-plugins.yml 的 38 行加一下你的文件名。

[Maidang1]

这个文件好像应该也不用

[Maidang1]

这个文件可以删除一下呢 ci 会读最外面的，里面声明的话 有的包会安装不到

[Maidang1]

module_type 似乎是原来的 module_type，None 是有啥特殊用途吗

[asasugar]

1. 包名更新 ：@farmfe/plugin-component -> @farmfe/plugin-modular-import
2. 配置文件删除，根目录配置补充
3. module_type 设置

[ErKeLost]

参数感觉可以用驼峰命名呢 在 js 传递参数的时候 比较符合 js 的规范

[asasugar]

参数感觉可以用驼峰命名呢 在 js 传递参数的时候 比较符合 js 的规范

1