@docusaurus/plugin-ideal-image 4.0.0-canary-6928 → 4.0.0-canary-6930

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 +45 -32
  2. package/package.json +10 -8
  3. package/src/index.ts +50 -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,55 @@ 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
+ // new URL('./img.png', import.meta.url) references the image asset URL
50
+ dependency: { not: 'url' },
51
+ // We don't want to use the image loader for non-React source code
52
+ // ie we don't want to use ideal image loader for CSS files...
53
+ // See https://github.com/facebook/docusaurus/issues/10862
54
+ issuer: {
55
+ and: [/\.(?:tsx?|jsx?|mdx?)$/i],
37
56
  },
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
- ],
57
+ use: [
58
+ require.resolve('@docusaurus/lqip-loader'),
59
+ {
60
+ loader: require.resolve('@docusaurus/responsive-loader'),
61
+ options: {
62
+ // Don't emit for server-side rendering
63
+ emitFile: !isServer,
64
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
65
+ adapter: require('@docusaurus/responsive-loader/sharp'),
66
+ name: 'assets/ideal-img/[name].[hash:hex:7].[width].[ext]',
67
+ ...loaderOptions,
63
68
  },
64
- ],
65
- },
69
+ },
70
+ ],
71
+ };
72
+ // We "wrap" the existing image rule, so that only one of them applies
73
+ // Otherwise both rules would apply, leading to conflicting behavior
74
+ const index = parentRules.indexOf(existingImageRule);
75
+ parentRules[index] = {
76
+ test: existingImageRule.test,
77
+ with: { type: { not: 'text' } },
78
+ oneOf: [idealImageRule, existingImageRule],
66
79
  };
67
80
  },
68
81
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@docusaurus/plugin-ideal-image",
3
- "version": "4.0.0-canary-6928",
3
+ "version": "4.0.0-canary-6930",
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-6928",
18
- "@docusaurus/lqip-loader": "4.0.0-canary-6928",
17
+ "@docusaurus/core": "4.0.0-canary-6930",
18
+ "@docusaurus/lqip-loader": "4.0.0-canary-6930",
19
19
  "@docusaurus/responsive-loader": "^1.7.1",
20
- "@docusaurus/theme-translations": "4.0.0-canary-6928",
21
- "@docusaurus/types": "4.0.0-canary-6928",
22
- "@docusaurus/utils-validation": "4.0.0-canary-6928",
20
+ "@docusaurus/theme-translations": "4.0.0-canary-6930",
21
+ "@docusaurus/types": "4.0.0-canary-6930",
22
+ "@docusaurus/utils": "4.0.0-canary-6930",
23
+ "@docusaurus/utils-validation": "4.0.0-canary-6930",
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-6928"
29
+ "@docusaurus/module-type-aliases": "4.0.0-canary-6930"
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,60 @@ 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
+ // new URL('./img.png', import.meta.url) references the image asset URL
69
+ dependency: {not: 'url'},
70
+ // We don't want to use the image loader for non-React source code
71
+ // ie we don't want to use ideal image loader for CSS files...
72
+ // See https://github.com/facebook/docusaurus/issues/10862
73
+ issuer: {
74
+ and: [/\.(?:tsx?|jsx?|mdx?)$/i],
52
75
  },
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
- ],
76
+ use: [
77
+ require.resolve('@docusaurus/lqip-loader'),
78
+ {
79
+ loader: require.resolve('@docusaurus/responsive-loader'),
80
+ options: {
81
+ // Don't emit for server-side rendering
82
+ emitFile: !isServer,
83
+ // eslint-disable-next-line @typescript-eslint/no-require-imports
84
+ adapter: require('@docusaurus/responsive-loader/sharp'),
85
+ name: 'assets/ideal-img/[name].[hash:hex:7].[width].[ext]',
86
+ ...loaderOptions,
78
87
  },
79
- ],
80
- },
88
+ },
89
+ ],
90
+ };
91
+
92
+ // We "wrap" the existing image rule, so that only one of them applies
93
+ // Otherwise both rules would apply, leading to conflicting behavior
94
+ const index = parentRules.indexOf(existingImageRule);
95
+ parentRules[index] = {
96
+ test: existingImageRule.test,
97
+ with: {type: {not: 'text'}},
98
+ oneOf: [idealImageRule, existingImageRule],
81
99
  };
82
100
  },
83
101
  };