Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: update unplugin docs #64

Merged
merged 2 commits into from
Mar 14, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"Preprocess",
"PUFY",
"raxjs",
"Rolup",
"Rspack",
"shikiji",
"shulandmimi",
Expand Down
66 changes: 35 additions & 31 deletions docs/plugins/community-plugins.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# Community Plugins

Farm support `Vite/Rollup` plugins out of box. So `Vite/Rollup` or `unplugin` plugins can be used in Farm directly.

:::tip
Expand All @@ -8,64 +9,67 @@ Farm recommends to write Farm Plugins instead of `Vite/Rollup` plugins for Farm.
Current tested compatible `Vite/Rollup/unplugin` plugins as below:

## Vite/Rollup Plugins

using `vitePlugins` in `farm.config.ts` to configure `Vite/Rollup` plugins.

```ts
import { UserConfig } from '@farmfe/core';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { UserConfig } from "@farmfe/core";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

const config: UserConfig = {
vitePlugins: [
vue(),
vueJsx(),
]
}
vitePlugins: [vue(), vueJsx()],
};
```

* **[`@vitejs/plugin-vue`](https://github.com/vitejs/vite-plugin-vue/blob/main/packages/plugin-vue/README.md)**: Vue support.
* **[`@vitejs/plugin-vue-jsx`](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx)**: Vue Jsx/Tsx support.
* **[`vite-plugin-solid`](https://www.npmjs.com/package/vite-plugin-solid)**: Solid support for Farm.
* **[`vite-plugin-mock`](https://www.npmjs.com/package/vite-plugin-solid)**: Mock data in both dev and prod.
* ...
- **[`@vitejs/plugin-vue`](https://github.com/vitejs/vite-plugin-vue/blob/main/packages/plugin-vue/README.md)**: Vue support.
- **[`@vitejs/plugin-vue-jsx`](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx)**: Vue Jsx/Tsx support.
- **[`vite-plugin-solid`](https://www.npmjs.com/package/vite-plugin-solid)**: Solid support for Farm.
- **[`vite-plugin-mock`](https://www.npmjs.com/package/vite-plugin-solid)**: Mock data in both dev and prod.
- ...

## unplugin

:::note
Currently you can use `unplugin/vite` or `unplugin/rollup` in Farm. `unplugin/farm` will be available when [this PR](https://github.com/unjs/unplugin/pull/341) are merged into unplugin
Currently you can use `unplugin/farm`, `unplugin/vite` and `unplugin/rollup` in Farm. If you are using `unplugin/vite` or `unplugin/rollup`, some attributes may not have been fully adapted, or the Farm team believes that the api does not have the adaptation conditions, you can provide [issues](https://github.com/farm-fe/farm/issues/new/choose).
:::

```ts
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import Components from 'unplugin-vue-components/rollup';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
import { FileSystemIconLoader } from 'unplugin-icons/loaders';
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
import Components from "unplugin-vue-components/rollup";
import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
import { FileSystemIconLoader } from "unplugin-icons/loaders";

const config: UserConfig = {
vitePlugins: [
Icons({
compiler: 'vue3',
compiler: "vue3",
customCollections: {
[collectionName]: FileSystemIconLoader(localIconPath, svg =>
[collectionName]: FileSystemIconLoader(localIconPath, (svg) =>
svg.replace(/^<svg\s/, '<svg width="1em" height="1em" ')
)
),
},
scale: 1,
defaultClass: 'inline-block'
defaultClass: "inline-block",
}),
Components({
dts: 'src/typings/components.d.ts',
types: [{ from: 'vue-router', names: ['RouterLink', 'RouterView'] }],
dts: "src/typings/components.d.ts",
types: [{ from: "vue-router", names: ["RouterLink", "RouterView"] }],
resolvers: [
NaiveUiResolver(),
IconsResolver({ customCollections: [collectionName], componentPrefix: VITE_ICON_PREFIX })
]
})
]
}
IconsResolver({
customCollections: [collectionName],
componentPrefix: VITE_ICON_PREFIX,
}),
],
}),
],
};
```

All unplugin are supported in Farm:

- [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)
- [unplugin-vue2-script-setup](https://github.com/antfu/unplugin-vue2-script-setup)
- [unplugin-icons](https://github.com/antfu/unplugin-icons)
Expand All @@ -89,4 +93,4 @@ All unplugin are supported in Farm:
- [unplugin-fonts](https://github.com/cssninjaStudio/unplugin-fonts)
- [sentry-javascript-bundler-plugins](https://github.com/getsentry/sentry-javascript-bundler-plugins)
- [unplugin-svg-component](https://github.com/Jevon617/unplugin-svg-component)
- [unplugin-vue-cssvars](https://github.com/baiwusanyu-c/unplugin-vue-cssvars)
- [unplugin-vue-cssvars](https://github.com/baiwusanyu-c/unplugin-vue-cssvars)
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ export default defineConfig({
});
```
:::note
当前可用 `unplugin/vite` 或者 `unplugin/rollup`. `unplugin/farm` 在 [这个 PR](https://github.com/unjs/unplugin/pull/341) 合进 unplugin 后可用
目前,您可以在 Farm 中使用`unplugin/farm`、`unplugin/vite``unplugin/rollup`。如果您使用的是`unplugin/vite`或`unplugin/Rolup`,有些属性可能还没有完全适配,或者 Farm 团队认为该 `api` 不具备适配条件,可以提供[issues](https://github.com/farm-fe/farm/issues/new/choose) .
:::

## Farm 运行时插件
Expand Down Expand Up @@ -275,4 +275,4 @@ export default defineConfig({

:::note
`SWC 插件`可能与 Farm 使用的 `SWC 版本`不兼容。 如果出现错误,请尝试升级插件。
:::
:::
Loading