@modern-js/module-tools-docs 2.31.2 → 2.32.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @modern-js/module-tools-docs
 
+## 2.32.1
+
+### Patch Changes
+
+- @modern-js/doc-plugin-auto-sidebar@2.32.1
+- @modern-js/doc-tools@2.32.1
+
+## 2.32.0
+
+### Minor Changes
+
+- 8d22b87: docs: add content about transformLodash and fix a error about english content
+  docs: 添加关于 transformLodash 的内容,并且修复一个英文内容的错误
+
+### Patch Changes
+
+- @modern-js/doc-plugin-auto-sidebar@2.32.0
+- @modern-js/doc-tools@2.32.0
+
 ## 2.31.2
 
 ### Patch Changes

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Modern.js
+Copyright (c) 2021-present Modern.js
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/docs/en/api/config/build-config.mdx

@@ -1036,6 +1036,8 @@ After enabling `inject`, you need to pay attention to the following points:
 
 You can resolve this by configuring [sideEffects](#sideeffects).
 
+:::
+
 ## style.autoModules
 
 Enable CSS Modules automatically based on the filename.
@@ -1095,13 +1097,8 @@ tailwindcss related configuration
 ```js title="modern.config.ts"
 const tailwind = {
   content: [
-    './config/html/**/*.html',
-    './config/html/**/*.ejs',
-    './config/html/**/*.hbs',
-    './src/**/*.js',
-    './src/**/*.jsx',
-    './src/**/*.ts',
-    './src/**/*.tsx',
+    './src/**/*.{js,jsx,ts,tsx}',
+    './config/html/**/*.{html,ejs,hbs}',
     './storybook/**/*',
   ],
 };
@@ -1113,10 +1110,14 @@ When the value is of type `object`, it is merged with the default configuration
 
 When the value is of type `Function`, the object returned by the function is merged with the default configuration via `Object.assign`.
 
-The `theme` property is not allowed, otherwise the build will fail, using [`designSystem`](/api/config/design-system) as the `Tailwind CSS Theme` configuration.
-
 The rest of the usage is the same as Tailwind CSS: [Quick Portal](https://tailwindcss.com/docs/configuration).
 
+### Notes
+
+Please note that if you are using the [designSystem](/api/config/design-system) configuration option simultaneously, the `theme` configuration of Tailwind CSS will be overridden by the value of `designSystem`.
+
+The usage of other configurations follows the same approach as the official usage of Tailwind CSS. Please refer to [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration) for more details.
+
 ## target
 
 `target` is used to set the target environment for the generated JavaScript code. It enables Module Tools to transform JavaScript syntax that is not recognized by the target environment into older versions of JavaScript syntax that are compatible with these environments.
@@ -1179,6 +1180,51 @@ export default defineConfig({
 
 Reference the [Import Plugin - Notes](plugins/official-list/plugin-import.html#Notes)
 
+## transformLodash
+
+Specifies whether to modularize the import of [lodash](https://www.npmjs.com/package/lodash) and remove unused lodash modules to reduce the code size of lodash.
+
+This optimization is implemented using [babel-plugin-lodash](https://www.npmjs.com/package/babel-plugin-lodash) and [swc-plugin-lodash](https://github.com/web-infra-dev/swc-plugins/tree/main/crates/plugin_lodash) under the hood.
+
+- **Type**: `boolean`
+- **Default**: `true`
+
+### Example
+
+This option is enabled by default, and Module Tools will automatically redirects the code references of `lodash` to sub-paths.
+
+For example:
+
+```ts title="input.js"
+import _ from 'lodash';
+import { add } from 'lodash/fp';
+
+const addOne = add(1);
+_.map([1, 2, 3], addOne);
+```
+
+The transformed code will be:
+
+```ts title="output.js"
+import _add from 'lodash/fp/add';
+import _map from 'lodash/map';
+
+const addOne = _add(1);
+_map([1, 2, 3], addOne);
+```
+
+### Disabling the Transformation
+
+In some cases, the import transformation of `lodash` may generate unexpected code. In such cases, you can manually disable this optimization:
+
+```js title="modern.config.ts"
+export default defineConfig({
+  buildConfig: {
+    transformLodash: false,
+  },
+});
+```
+
 ## umdGlobals
 
 Specify global variables for external import of umd artifacts
@@ -1221,7 +1267,6 @@ At this point the umd artifact will go to mount on `global.myLib`
 
 - The module name of the umd artifact must not conflict with the global variable name.
 - Module names will be converted to camelCase, e.g. `my-lib` will be converted to `myLib`, refer to [toIdentifier](https://github.com/babel/babel/blob/main/packages/babel-types/src/converters/toIdentifier.ts).
-
 :::
 
 Also the function form can take one parameter, which is the output path of the current package file

package/docs/en/api/config/design-system.md

@@ -647,7 +647,7 @@ const designSystem = {
 ```
 
 :::tip
-More about [TailwindCSS configuration](https://tailwindcss.com/docs/configuration#theme)
+More about [Tailwind CSS configuration](https://tailwindcss.com/docs/configuration#theme)
 :::
 
 </details>

package/docs/en/guide/advance/theme-config.mdx

@@ -1,35 +1,21 @@
----
-sidebar_position: 7
----
-
 # Theme Configuration
 
-The module project provides the ability to configure themes through the [`designSystem`](/en/api/config/design-system) API.
-
-## Motivation and rationale
-
-Theme configuration is somewhat similar to the custom theme functionality in the component library and is mainly used in style development. We can use the `designToken` generated by the `designSystem` configuration in different style development environments.
-
-The so-called `designToken` corresponds to different things in different style development environments.
+Module Tools provides the ability to configure the Tailwind CSS theme through the `designSystem` option.
 
-- tailwindcss: use `designSystem` as the `theme` configuration for tailwindcss. So you can use.
-  - The name of the HTML class supported by tailwindcss.
-  - `@apply` custom directive under css/less/sass to use a string with the same name as the HTML class name supported by tailwindcss.
-- css/less/scss: Generate global style variables via `designSystem`.
+## Motivation and Principles
 
-The data structure of the `designSystem` API is borrowed from the [theme API](https://tailwindcss.com/docs/theme) in the `tailwindcss` configuration object, so a default set of `designToken` exists. For the default values, see the [`designSystem` API](/api/config/design-system).
+Theme configuration is similar to custom theme functionality in component libraries and is primarily used for styling. When using `designSystem`, it serves as the `theme` configuration for Tailwind CSS. Therefore, you can use:
 
-:::info
-The css/less/sass global variables are not supported yet.
-:::
+- CSS class names supported by Tailwind CSS.
+- Strings with the same name as the CSS class names supported by Tailwind CSS, using the `@apply` custom directive in CSS/Less/Sass.
 
-## Usage examples
+For the default value of `designSystem`, refer to the [`designSystem` API](/api/config/design-system).
 
-### tailwindcss
+## Usage Example
 
-When using tailwindcss, its [`theme`](https://v2.tailwindcss.com/docs/theme#extending-the-default-theme) configuration can be set via `designSystem`.
+When using Tailwind CSS, you can use `designSystem` to configure its [`theme`](https://tailwindcss.com/docs/theme).
 
-For example, the following configuration extends the original color configuration:
+For example, the following configuration extends the existing color configuration:
 
 ```ts title="modern.config.ts"
 export default {
@@ -43,9 +29,9 @@ export default {
 };
 ```
 
-We can have two ways of using tailwindcss in our code.
+In the code, there are two ways to use Tailwind CSS.
 
-#### HTML Class
+#### CSS Class Names
 
 ```tsx title="./src/index.tsx"
 import 'tailwindcss/utilities.css';
@@ -55,11 +41,9 @@ export default () => {
 };
 ```
 
-#### `@apply` Directives
+#### `@apply` Directive
 
-:::info
-About [`@apply`](https://tailwindcss.com/docs/functions-and-directives#apply)。
-:::
+Regarding [`@apply`](https://tailwindcss.com/docs/functions-and-directives#apply).
 
 ```tsx title="./src/index.tsx"
 import './index.css';

package/docs/zh/api/config/build-config.mdx

@@ -1097,13 +1097,8 @@ Tailwind CSS 相关配置。
 ```js title="modern.config.ts"
 const tailwind = {
   content: [
-    './config/html/**/*.html',
-    './config/html/**/*.ejs',
-    './config/html/**/*.hbs',
-    './src/**/*.js',
-    './src/**/*.jsx',
-    './src/**/*.ts',
-    './src/**/*.tsx',
+    './src/**/*.{js,jsx,ts,tsx}',
+    './config/html/**/*.{html,ejs,hbs}',
     './storybook/**/*',
   ],
 };
@@ -1115,10 +1110,14 @@ const tailwind = {
 
 值为 `Function` 类型时，函数返回的对象与默认配置通过 `Object.assign` 合并。
 
-不允许出现 `theme` 属性，否则会构建失败, 使用 [`designSystem`](/api/config/design-system) 作为 `Tailwind CSS Theme` 配置。
-
 其他的使用方式和 Tailwind CSS 一致: [快速传送门](https://tailwindcss.com/docs/configuration)。
 
+### 注意事项
+
+注意，如果你同时使用了 [designSystem](/api/config/design-system) 配置项，那么 Tailwind CSS 的 `theme` 配置将会被 `designSystem` 的值所覆盖。
+
+其他配置的使用方式与 Tailwind CSS 官方用法一致，请参考 [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration)。
+
 ## target
 
 `target` 用于为生成的 JavaScript 代码设置目标环境。它让 Module Tools 将目标环境无法识别的 JavaScript 语法转换为在这些环境中可用的低版本 JavaScript 语法。
@@ -1181,6 +1180,49 @@ export default defineConfig({
 
 参考[「Import 插件——注意事项」](plugins/official-list/plugin-import.html#注意事项)
 
+## transformLodash
+
+是否模块化 [lodash](https://www.npmjs.com/package/lodash) 的导入，删除未使用的 lodash 模块，从而减少 lodash 代码体积。这项优化基于 [babel-plugin-lodash](https://www.npmjs.com/package/babel-plugin-lodash) 和 [swc-plugin-lodash](https://github.com/web-infra-dev/swc-plugins/tree/main/crates/plugin_lodash) 实现。
+
+- 类型：`boolean`
+- 默认值：`true`
+
+### 示例
+
+该选项默认开启，Module Tools 会自动将 lodash 的代码引用指向子路径。
+
+比如：
+
+``` ts title="input.js"
+import _ from 'lodash';
+import { add } from 'lodash/fp';
+
+const addOne = add(1);
+_.map([1, 2, 3], addOne);
+```
+
+转换后的代码：
+
+```ts title="output.js"
+import _add from 'lodash/fp/add';
+import _map from 'lodash/map';
+
+const addOne = _add(1);
+_map([1, 2, 3], addOne);
+```
+
+### 关闭转换
+
+在个别情况下，lodash 的 import 转换可能会生成不符合预期的代码，此时你可以手动关闭这项优化：
+
+```js title="modern.config.ts"
+export default defineConfig({
+  buildConfig: {
+    transformLodash: false,
+  },
+});
+```
+
 ## umdGlobals
 
 指定 UMD 产物外部导入的全局变量。

package/docs/zh/api/config/design-system.md

@@ -647,7 +647,7 @@ const designSystem = {
 ```
 
 :::tip
-更多关于[TailwindCSS 配置](https://tailwindcss.com/docs/configuration#theme)
+更多关于[Tailwind CSS 配置](https://tailwindcss.com/docs/configuration#theme)
 :::
 
 </details>

package/docs/zh/guide/advance/theme-config.mdx

@@ -4,30 +4,20 @@ sidebar_position: 6
 
 # 主题配置
 
-模块工程通过 [`designSystem`](/api/config/design-system) API，提供了配置主题的能力。
+Module Tools 通过 [`designSystem`](/api/config/design-system) 选项，提供了配置 Tailwind CSS 主题的能力。
 
 ## 动机和原理
 
-主题配置有些类似组件库中的定制主题功能，主要用于样式开发中使用。我们可以通过 `designSystem` 配置在不同的样式开发环境下使用由它生成的 `designToken`。
+主题配置有些类似组件库中的定制主题功能，主要用于开发样式。当你使用 `designSystem` 时，它会作为 Tailwind CSS 的 `theme` 配置。因此你可以使用：
 
-所谓 `designToken` 在不同的样式开发环境下对应不同的东西：
+- Tailwind CSS 支持的 CSS 类名。
+- 在 CSS/Less/Sass 下通过 `@apply` 自定义指令使用与 Tailwind CSS 支持的 CSS 类名同名的字符串。
 
-- tailwindcss: 以 `designSystem` 作为 tailwindcss 的 `theme` 配置。因此可以使用：
-  - tailwindcss 支持的 HTML 类名。
-  - 在 css/less/sass 下通过 `@apply` 自定义指令使用与 tailwindcss 支持的 HTML 类名同名的字符串。
-- css/less/scss: 通过 `designSystem` 生成全局的样式变量。
-
-`designSystem` API 的数据结构借鉴了 `tailwindcss` 配置对象中的 [theme API](https://tailwindcss.com/docs/theme)，因此存在默认的一套 `designToken`。关于默认值，可以查看 [`designSystem` API](/api/config/design-system)。
-
-:::info
-目前暂时还未支持 css/less/sass 全局变量。
-:::
+关于 `designSystem` 的默认值，可以查看 [`designSystem` API](/api/config/design-system)。
 
 ## 使用示例
 
-### tailwindcss
-
-在使用 tailwindcss 的时候，可以通过 `designSystem` 来设置它的 [`theme`](https://v2.tailwindcss.com/docs/theme#extending-the-default-theme) 配置。
+在使用 Tailwind CSS 的时候，可以通过 `designSystem` 来设置它的 [`theme`](https://tailwindcss.com/docs/theme) 配置。
 
 例如在下面的配置中扩展了原有的颜色配置:
 
@@ -43,9 +33,9 @@ export default {
 };
 ```
 
-我们可以在代码中有两种使用 tailwindcss 的方式。
+在代码中，我们可以有两种使用 Tailwind CSS 的方式。
 
-#### HTML 类名
+#### CSS 类名
 
 ```tsx title="./src/index.tsx"
 import 'tailwindcss/utilities.css';

package/package.json

@@ -9,13 +9,13 @@
     "directory": "packages/document/module-doc"
   },
   "license": "MIT",
-  "version": "2.31.2",
+  "version": "2.32.1",
   "main": "index.js",
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@modern-js/doc-tools": "2.31.2",
-    "@modern-js/doc-plugin-auto-sidebar": "2.31.2"
+    "@modern-js/doc-tools": "2.32.1",
+    "@modern-js/doc-plugin-auto-sidebar": "2.32.1"
   },
   "scripts": {
     "dev": "modern dev",