Skip to content

Commit

Permalink
Merge branch 'main' into fix/public-path-in-windows
Browse files Browse the repository at this point in the history
  • Loading branch information
@GiveMe-A-Name
GiveMe-A-Name authored Apr 14, 2023
2 parents 1d27c56 + 0155383 commit 35585c6
Show file tree
Hide file tree
Showing 8 changed files with 386 additions and 11 deletions.
7 changes: 7 additions & 0 deletions .changeset/many-guests-help.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@modern-js/builder-webpack-provider': patch
---

fix(builder): set camel2dashName properly

fix(builder): 正确配置 transformImport babel 插件的 camel2dashName
17 changes: 16 additions & 1 deletion packages/builder/builder-webpack-provider/src/plugins/babel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,13 +209,28 @@ function applyPluginImport(
for (const item of pluginImport) {
const name = item.libraryName;

const option: TransformImport & {
camel2DashComponentName?: boolean;
} = {
...item,
};

if (
option.camelToDashComponentName !== undefined ||
option.camel2DashComponentName !== undefined
) {
option.camel2DashComponentName =
option.camel2DashComponentName ?? option.camelToDashComponentName;
delete option.camelToDashComponentName;
}

chain
.plugin(`plugin-import-${name}`)
.use(
require.resolve(
'@modern-js/babel-preset-base/compiled/babel-plugin-import',
),
[item, name],
[option, name],
);
}
}
Expand Down
244 changes: 244 additions & 0 deletions packages/builder/builder-webpack-provider/tests/__snapshots__/webpackConfig.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,3 +182,247 @@ exports[`webpackConfig > should provide mergeConfig util in tools.webpack functi
},
}
`;

exports[`webpackConfig > should set proper pluginImport option in Babel 1`] = `
[
{
"include": [
{
"and": [
"<ROOT>",
{
"not": /node_modules/,
},
],
},
],
"test": /\\\\\\.\\(js\\|mjs\\|cjs\\|jsx\\)\\$\\|\\\\\\.\\(ts\\|mts\\|cts\\|tsx\\)\\$/,
"use": [
{
"loader": "<WORKSPACE>/packages/builder/builder-shared/compiled/babel-loader",
"options": {
"babelrc": false,
"compact": false,
"configFile": false,
"plugins": [
[
"<WORKSPACE>/packages/cli/babel-preset-base/compiled/babel-plugin-import/index.js",
{
"camel2DashComponentName": true,
"libraryName": "foo",
},
"foo",
],
[
"<WORKSPACE>/packages/cli/babel-preset-app/src/babelPluginLockCorejsVersion",
],
[
"<WORKSPACE>/packages/cli/babel-preset-base/compiled/babel-plugin-dynamic-import-node/index.js",
],
[
"<WORKSPACE>/packages/cli/babel-preset-base/compiled/babel-plugin-lodash/index.js",
{},
],
[
"<WORKSPACE>/packages/cli/babel-preset-base/compiled/@babel/plugin-proposal-decorators/index.js",
{
"legacy": true,
},
],
[
"<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/plugin-transform-runtime/lib/index.js",
{
"helpers": false,
"regenerator": true,
"useESModules": true,
"version": "7.18.6",
},
],
[
"<WORKSPACE>/packages/cli/babel-preset-base/compiled/@babel/plugin-proposal-export-default-from/index.js",
],
[
"<WORKSPACE>/packages/cli/babel-preset-base/compiled/@babel/plugin-proposal-pipeline-operator/index.js",
{
"proposal": "minimal",
},
],
[
"<WORKSPACE>/packages/cli/babel-preset-base/compiled/@babel/plugin-proposal-partial-application/index.js",
],
[
"<WORKSPACE>/packages/cli/babel-preset-base/compiled/babel-plugin-styled-components/index.js",
{
"displayName": true,
"pure": false,
"ssr": false,
"transpileTemplateLiterals": true,
},
"styled-components",
],
],
"presets": [
[
"<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-env/lib/index.js",
{
"bugfixes": false,
"corejs": {
"proposals": true,
"version": "3.30",
},
"exclude": [
"transform-typeof-symbol",
],
"modules": false,
"shippedProposals": false,
"targets": [
"> 0.01%",
"not dead",
"not op_mini all",
],
"useBuiltIns": "entry",
},
],
[
"<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
{
"development": true,
"runtime": "classic",
"useBuiltIns": true,
"useSpread": false,
},
],
[
"<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-typescript/lib/index.js",
{
"allExtensions": true,
"allowDeclareFields": true,
"allowNamespaces": true,
"isTSX": true,
"optimizeConstEnums": true,
},
],
],
},
},
],
},
{
"mimetype": {
"or": [
"text/javascript",
"application/javascript",
],
},
"use": [
{
"loader": "<WORKSPACE>/packages/builder/builder-shared/compiled/babel-loader",
"options": {
"babelrc": false,
"compact": false,
"configFile": false,
"plugins": [
[
"<WORKSPACE>/packages/cli/babel-preset-base/compiled/babel-plugin-import/index.js",
{
"camel2DashComponentName": true,
"libraryName": "foo",
},
"foo",
],
[
"<WORKSPACE>/packages/cli/babel-preset-app/src/babelPluginLockCorejsVersion",
],
[
"<WORKSPACE>/packages/cli/babel-preset-base/compiled/babel-plugin-dynamic-import-node/index.js",
],
[
"<WORKSPACE>/packages/cli/babel-preset-base/compiled/babel-plugin-lodash/index.js",
{},
],
[
"<WORKSPACE>/packages/cli/babel-preset-base/compiled/@babel/plugin-proposal-decorators/index.js",
{
"legacy": true,
},
],
[
"<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/plugin-transform-runtime/lib/index.js",
{
"helpers": false,
"regenerator": true,
"useESModules": true,
"version": "7.18.6",
},
],
[
"<WORKSPACE>/packages/cli/babel-preset-base/compiled/@babel/plugin-proposal-export-default-from/index.js",
],
[
"<WORKSPACE>/packages/cli/babel-preset-base/compiled/@babel/plugin-proposal-pipeline-operator/index.js",
{
"proposal": "minimal",
},
],
[
"<WORKSPACE>/packages/cli/babel-preset-base/compiled/@babel/plugin-proposal-partial-application/index.js",
],
[
"<WORKSPACE>/packages/cli/babel-preset-base/compiled/babel-plugin-styled-components/index.js",
{
"displayName": true,
"pure": false,
"ssr": false,
"transpileTemplateLiterals": true,
},
"styled-components",
],
],
"presets": [
[
"<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-env/lib/index.js",
{
"bugfixes": false,
"corejs": {
"proposals": true,
"version": "3.30",
},
"exclude": [
"transform-typeof-symbol",
],
"modules": false,
"shippedProposals": false,
"targets": [
"> 0.01%",
"not dead",
"not op_mini all",
],
"useBuiltIns": "entry",
},
],
[
"<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-react/lib/index.js",
{
"development": true,
"runtime": "classic",
"useBuiltIns": true,
"useSpread": false,
},
],
[
"<WORKSPACE>/node_modules/<PNPM_INNER>/@babel/preset-typescript/lib/index.js",
{
"allExtensions": true,
"allowDeclareFields": true,
"allowNamespaces": true,
"isTSX": true,
"optimizeConstEnums": true,
},
],
],
},
},
],
},
]
`;
27 changes: 27 additions & 0 deletions packages/builder/builder-webpack-provider/tests/webpackConfig.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { expect, describe, it } from 'vitest';
import { builderPluginBasic } from '@/plugins/basic';
import { createStubBuilder } from '@/stub';
import { builderPluginBabel } from '@/plugins/babel';

describe('webpackConfig', () => {
it('should allow tools.webpack to return config', async () => {
Expand Down Expand Up @@ -198,4 +199,30 @@ describe('webpackConfig', () => {
const config = await builder.unwrapWebpackConfig();
expect(config.module?.rules).toEqual([newRule]);
});

it('should set proper pluginImport option in Babel', async () => {
// camelToDashComponentName
const builder = await createStubBuilder({
plugins: [builderPluginBabel()],
builderConfig: {
source: {
transformImport: [
{
libraryName: 'foo',
camelToDashComponentName: true,
},
],
},
},
});
const config = await builder.unwrapWebpackConfig();

const babelRules = config.module!.rules?.filter(item => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error item has use
return item?.use?.[0].loader.includes('babel-loader');
});

expect(babelRules).toMatchSnapshot();
});
});
19 changes: 15 additions & 4 deletions packages/document/doc-tools-doc/docs/en/advanced/extend-build.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,35 @@

## Modern.js Builder

Modern.js Doc builds projects based on [Modern.js Builder](https://modernjs.dev/builder/), you can use `builderConfig` to customize the build config. For example:
Modern.js Doc builds documents based on the Rspack mode of [Modern.js Builder](https://modernjs.dev/builder/en/).

Modern.js Builder provides flexible build configurations, you can use [doc.builderConfig](/api/config-build.html#builderconfig) to customize these configurations. For example, change the output directory to `doc_dist`:

```ts title="modern.config.ts"
import docTools, { defineConfig } from '@modern-js/doc-tools';
import path from 'path';

export default defineConfig({
doc: {
builderConfig: {
dev: {
startUrl: false,
output: {
distPath: {
root: 'doc_dist',
},
},
},
},
plugins: [docTools()],
});
```

:::tip

You can learn more configurations through the [Modern.js Builder - API](https://modernjs.dev/builder/en/api/index.html) documentation.

Note that Modern.js Doc only supports Rspack bundler, so some configurations related to webpack will not work, such as `tools.webpack`.

:::

## MDX Compilation

The compilation of MDX in the framework is based on [unified](https://github.com/unifiedjs/unified), and you can add related compilation plugins through `markdown` configuration. for example
Expand Down
Loading

0 comments on commit 35585c6

Please sign in to comment.