@docusaurus/plugin-ideal-image 4.0.0-canary-6927 → 4.0.0-canary-6929

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/lib/index.js +43 -32
  2. package/package.json +10 -8
  3. package/src/index.ts +48 -32
package/lib/index.js CHANGED
@@ -8,6 +8,7 @@
8
8
  Object.defineProperty(exports, "__esModule", { value: true });
9
9
  exports.default = pluginIdealImage;
10
10
  exports.validateOptions = validateOptions;
11
+ const utils_1 = require("@docusaurus/utils");
11
12
  const utils_validation_1 = require("@docusaurus/utils-validation");
12
13
  const theme_translations_1 = require("@docusaurus/theme-translations");
13
14
  function pluginIdealImage(context, options) {
@@ -26,43 +27,53 @@ function pluginIdealImage(context, options) {
26
27
  name: 'plugin-ideal-image',
27
28
  });
28
29
  },
29
- configureWebpack(_config, isServer) {
30
+ configureWebpack(config, isServer) {
30
31
  const { disableInDev, ...loaderOptions } = options;
31
32
  if (disableInDev && process.env.NODE_ENV !== 'production') {
32
- return {};
33
+ return;
33
34
  }
34
- return {
35
- mergeStrategy: {
36
- 'module.rules': 'prepend',
35
+ const { parentRules, rule: existingImageRule } = (() => {
36
+ const result = (0, utils_1.findAssetRule)({
37
+ rules: config.module?.rules,
38
+ test: (0, utils_1.getAssetRuleUtils)(isServer).rules.images().test,
39
+ });
40
+ if (!result) {
41
+ throw new Error("Docusaurus built-in image rule couldn't be found. The ideal-image plugin can't enhance it.");
42
+ }
43
+ return result;
44
+ })();
45
+ const idealImageRule = {
46
+ test: /\.(?:png|jpe?g)$/i,
47
+ // Ideal images are JS modules, not assets
48
+ type: 'javascript/auto',
49
+ // We don't want to use the image loader for non-React source code
50
+ // ie we don't want to use ideal image loader for CSS files...
51
+ // See https://github.com/facebook/docusaurus/issues/10862
52
+ issuer: {
53
+ and: [/\.(?:tsx?|jsx?|mdx?)$/i],
37
54
  },
38
- module: {
39
- rules: [
40
- {
41
- test: /\.(?:png|jpe?g)$/i,
42
- with: { type: { not: 'text' } },
43
- // We don't want to use the image loader for non-React source code
44
- // ie we don't want to use ideal image loader for CSS files...
45
- // See https://github.com/facebook/docusaurus/issues/10862
46
- issuer: {
47
- and: [/\.(?:tsx?|jsx?|mdx?)$/i],
48
- },
49
- use: [
50
- require.resolve('@docusaurus/lqip-loader'),
51
- {
52
- loader: require.resolve('@docusaurus/responsive-loader'),
53
- options: {
54
- // Don't emit for server-side rendering
55
- emitFile: !isServer,
56
- // eslint-disable-next-line @typescript-eslint/no-require-imports
57
- adapter: require('@docusaurus/responsive-loader/sharp'),
58
- name: 'assets/ideal-img/[name].[hash:hex:7].[width].[ext]',
59
- ...loaderOptions,
60
- },
61
- },
62
- ],
55
+ use: [
56
+ require.resolve('@docusaurus/lqip-loader'),
57
+ {
58
+ loader: require.resolve('@docusaurus/responsive-loader'),
59
+ options: {
60
+ // Don't emit for server-side rendering
61
+ emitFile: !isServer,
62
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
63
+ adapter: require('@docusaurus/responsive-loader/sharp'),
64
+ name: 'assets/ideal-img/[name].[hash:hex:7].[width].[ext]',
65
+ ...loaderOptions,
63
66
  },
64
- ],
65
- },
67
+ },
68
+ ],
69
+ };
70
+ // We "wrap" the existing image rule, so that only one of them applies
71
+ // Otherwise both rules would apply, leading to conflicting behavior
72
+ const index = parentRules.indexOf(existingImageRule);
73
+ parentRules[index] = {
74
+ test: existingImageRule.test,
75
+ with: { type: { not: 'text' } },
76
+ oneOf: [idealImageRule, existingImageRule],
66
77
  };
67
78
  },
68
79
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@docusaurus/plugin-ideal-image",
3
- "version": "4.0.0-canary-6927",
3
+ "version": "4.0.0-canary-6929",
4
4
  "description": "Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder).",
5
5
  "main": "lib/index.js",
6
6
  "types": "src/plugin-ideal-image.d.ts",
@@ -14,17 +14,19 @@
14
14
  },
15
15
  "license": "MIT",
16
16
  "dependencies": {
17
- "@docusaurus/core": "4.0.0-canary-6927",
18
- "@docusaurus/lqip-loader": "4.0.0-canary-6927",
17
+ "@docusaurus/core": "4.0.0-canary-6929",
18
+ "@docusaurus/lqip-loader": "4.0.0-canary-6929",
19
19
  "@docusaurus/responsive-loader": "^1.7.1",
20
- "@docusaurus/theme-translations": "4.0.0-canary-6927",
21
- "@docusaurus/types": "4.0.0-canary-6927",
22
- "@docusaurus/utils-validation": "4.0.0-canary-6927",
20
+ "@docusaurus/theme-translations": "4.0.0-canary-6929",
21
+ "@docusaurus/types": "4.0.0-canary-6929",
22
+ "@docusaurus/utils": "4.0.0-canary-6929",
23
+ "@docusaurus/utils-validation": "4.0.0-canary-6929",
23
24
  "sharp": "^0.35.1",
24
- "tslib": "^2.8.1"
25
+ "tslib": "^2.8.1",
26
+ "webpack": "^5.111.0"
25
27
  },
26
28
  "devDependencies": {
27
- "@docusaurus/module-type-aliases": "4.0.0-canary-6927"
29
+ "@docusaurus/module-type-aliases": "4.0.0-canary-6929"
28
30
  },
29
31
  "peerDependencies": {
30
32
  "jimp": "^1.6.1",
package/src/index.ts CHANGED
@@ -5,6 +5,7 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
 
8
+ import {getAssetRuleUtils, findAssetRule} from '@docusaurus/utils';
8
9
  import {Joi} from '@docusaurus/utils-validation';
9
10
  import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
10
11
  import type {
@@ -13,6 +14,7 @@ import type {
13
14
  OptionValidationContext,
14
15
  } from '@docusaurus/types';
15
16
  import type {PluginOptions} from '@docusaurus/plugin-ideal-image';
17
+ import type {RuleSetRule} from 'webpack';
16
18
 
17
19
  export default function pluginIdealImage(
18
20
  context: LoadContext,
@@ -40,44 +42,58 @@ export default function pluginIdealImage(
40
42
  });
41
43
  },
42
44
 
43
- configureWebpack(_config, isServer) {
45
+ configureWebpack(config, isServer) {
44
46
  const {disableInDev, ...loaderOptions} = options;
45
47
  if (disableInDev && process.env.NODE_ENV !== 'production') {
46
- return {};
48
+ return;
47
49
  }
48
50
 
49
- return {
50
- mergeStrategy: {
51
- 'module.rules': 'prepend',
51
+ const {parentRules, rule: existingImageRule} = (() => {
52
+ const result = findAssetRule({
53
+ rules: config.module?.rules as RuleSetRule[],
54
+ test: getAssetRuleUtils(isServer).rules.images().test,
55
+ });
56
+ if (!result) {
57
+ throw new Error(
58
+ "Docusaurus built-in image rule couldn't be found. The ideal-image plugin can't enhance it.",
59
+ );
60
+ }
61
+ return result;
62
+ })();
63
+
64
+ const idealImageRule: RuleSetRule = {
65
+ test: /\.(?:png|jpe?g)$/i,
66
+ // Ideal images are JS modules, not assets
67
+ type: 'javascript/auto',
68
+ // We don't want to use the image loader for non-React source code
69
+ // ie we don't want to use ideal image loader for CSS files...
70
+ // See https://github.com/facebook/docusaurus/issues/10862
71
+ issuer: {
72
+ and: [/\.(?:tsx?|jsx?|mdx?)$/i],
52
73
  },
53
- module: {
54
- rules: [
55
- {
56
- test: /\.(?:png|jpe?g)$/i,
57
- with: {type: {not: 'text'}},
58
- // We don't want to use the image loader for non-React source code
59
- // ie we don't want to use ideal image loader for CSS files...
60
- // See https://github.com/facebook/docusaurus/issues/10862
61
- issuer: {
62
- and: [/\.(?:tsx?|jsx?|mdx?)$/i],
63
- },
64
- use: [
65
- require.resolve('@docusaurus/lqip-loader'),
66
- {
67
- loader: require.resolve('@docusaurus/responsive-loader'),
68
- options: {
69
- // Don't emit for server-side rendering
70
- emitFile: !isServer,
71
- // eslint-disable-next-line @typescript-eslint/no-require-imports
72
- adapter: require('@docusaurus/responsive-loader/sharp'),
73
- name: 'assets/ideal-img/[name].[hash:hex:7].[width].[ext]',
74
- ...loaderOptions,
75
- },
76
- },
77
- ],
74
+ use: [
75
+ require.resolve('@docusaurus/lqip-loader'),
76
+ {
77
+ loader: require.resolve('@docusaurus/responsive-loader'),
78
+ options: {
79
+ // Don't emit for server-side rendering
80
+ emitFile: !isServer,
81
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
82
+ adapter: require('@docusaurus/responsive-loader/sharp'),
83
+ name: 'assets/ideal-img/[name].[hash:hex:7].[width].[ext]',
84
+ ...loaderOptions,
78
85
  },
79
- ],
80
- },
86
+ },
87
+ ],
88
+ };
89
+
90
+ // We "wrap" the existing image rule, so that only one of them applies
91
+ // Otherwise both rules would apply, leading to conflicting behavior
92
+ const index = parentRules.indexOf(existingImageRule);
93
+ parentRules[index] = {
94
+ test: existingImageRule.test,
95
+ with: {type: {not: 'text'}},
96
+ oneOf: [idealImageRule, existingImageRule],
81
97
  };
82
98
  },
83
99
  };