From 4c7519f364c4299f4a6e428bd32acf42fea0df8f Mon Sep 17 00:00:00 2001 From: sebastien Date: Thu, 14 Nov 2024 15:31:51 +0100 Subject: [PATCH 01/12] restore no-unused-vars _ ignore pattern --- .eslintrc.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index edfbf50d97eb..50453b0ada69 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -380,7 +380,14 @@ module.exports = { // We don't provide any escape hatches for this rule. Rest siblings and // function placeholder params are always ignored, and any other unused // locals must be justified with a disable comment. - '@typescript-eslint/no-unused-vars': [ERROR, {ignoreRestSiblings: true}], + '@typescript-eslint/no-unused-vars': [ + ERROR, + { + ignoreRestSiblings: true, + argsIgnorePattern: '^_', + varsIgnorePattern: '^_', + }, + ], '@typescript-eslint/prefer-optional-chain': ERROR, '@docusaurus/no-html-links': ERROR, '@docusaurus/prefer-docusaurus-heading': ERROR, From b25475433761ef79c91bae19cecb4ba74abe5007 Mon Sep 17 00:00:00 2001 From: sebastien Date: Thu, 14 Nov 2024 15:32:04 +0100 Subject: [PATCH 02/12] scaffold svgr plugin --- packages/docusaurus-plugin-svgr/.npmignore | 3 + packages/docusaurus-plugin-svgr/README.md | 7 ++ packages/docusaurus-plugin-svgr/package.json | 33 ++++++ .../src/__tests__/options.test.ts | 100 ++++++++++++++++++ packages/docusaurus-plugin-svgr/src/index.ts | 25 +++++ .../docusaurus-plugin-svgr/src/options.ts | 36 +++++++ .../docusaurus-plugin-svgr/src/types.d.ts | 8 ++ packages/docusaurus-plugin-svgr/tsconfig.json | 8 ++ 8 files changed, 220 insertions(+) create mode 100644 packages/docusaurus-plugin-svgr/.npmignore create mode 100644 packages/docusaurus-plugin-svgr/README.md create mode 100644 packages/docusaurus-plugin-svgr/package.json create mode 100644 packages/docusaurus-plugin-svgr/src/__tests__/options.test.ts create mode 100644 packages/docusaurus-plugin-svgr/src/index.ts create mode 100644 packages/docusaurus-plugin-svgr/src/options.ts create mode 100644 packages/docusaurus-plugin-svgr/src/types.d.ts create mode 100644 packages/docusaurus-plugin-svgr/tsconfig.json diff --git a/packages/docusaurus-plugin-svgr/.npmignore b/packages/docusaurus-plugin-svgr/.npmignore new file mode 100644 index 000000000000..03c9ae1e1b54 --- /dev/null +++ b/packages/docusaurus-plugin-svgr/.npmignore @@ -0,0 +1,3 @@ +.tsbuildinfo* +tsconfig* +__tests__ diff --git a/packages/docusaurus-plugin-svgr/README.md b/packages/docusaurus-plugin-svgr/README.md new file mode 100644 index 000000000000..27b865208d4d --- /dev/null +++ b/packages/docusaurus-plugin-svgr/README.md @@ -0,0 +1,7 @@ +# `@docusaurus/plugin-svgr` + +[SVGR](https://react-svgr.com/) plugin for Docusaurus. + +## Usage + +See [plugin-svgr documentation](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-svgr). diff --git a/packages/docusaurus-plugin-svgr/package.json b/packages/docusaurus-plugin-svgr/package.json new file mode 100644 index 000000000000..756c7c7bf59c --- /dev/null +++ b/packages/docusaurus-plugin-svgr/package.json @@ -0,0 +1,33 @@ +{ + "name": "@docusaurus/plugin-svgr", + "version": "3.6.1", + "description": "SVGR plugin for Docusaurus.", + "main": "lib/index.js", + "types": "lib/index.d.ts", + "scripts": { + "build": "tsc --build", + "watch": "tsc --build --watch" + }, + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "https://github.com/facebook/docusaurus.git", + "directory": "packages/docusaurus-plugin-svgr" + }, + "license": "MIT", + "dependencies": { + "@docusaurus/core": "3.6.1", + "@docusaurus/types": "3.6.1", + "@docusaurus/utils-validation": "3.6.1", + "tslib": "^2.6.0" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "engines": { + "node": ">=18.0" + } +} diff --git a/packages/docusaurus-plugin-svgr/src/__tests__/options.test.ts b/packages/docusaurus-plugin-svgr/src/__tests__/options.test.ts new file mode 100644 index 000000000000..af5b454cab7c --- /dev/null +++ b/packages/docusaurus-plugin-svgr/src/__tests__/options.test.ts @@ -0,0 +1,100 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import {normalizePluginOptions} from '@docusaurus/utils-validation'; +import { + validateOptions, + type PluginOptions, + type Options, + DEFAULT_OPTIONS, +} from '../options'; +import type {Validate} from '@docusaurus/types'; + +function validate(options?: Options) { + return validateOptions({ + validate: normalizePluginOptions as Validate< + Options | undefined, + PluginOptions + >, + options, + }); +} + +function result(options?: Options) { + return { + id: 'default', + ...DEFAULT_OPTIONS, + ...options, + }; +} + +describe('validateOptions', () => { + it('accepts undefined', () => { + expect(validate(undefined)).toEqual(result(DEFAULT_OPTIONS)); + }); + + it('accepts empty object', () => { + expect(validate({})).toEqual(result(DEFAULT_OPTIONS)); + }); + + it('accepts defaults', () => { + expect(validate(DEFAULT_OPTIONS)).toEqual(result(DEFAULT_OPTIONS)); + }); + + it('rejects null', () => { + expect( + // @ts-expect-error: TS should error + () => validate(null), + ).toThrowErrorMatchingInlineSnapshot(`""value" must be of type object"`); + }); + + it('rejects number', () => { + expect( + // @ts-expect-error: TS should error + () => validate(42), + ).toThrowErrorMatchingInlineSnapshot(`""value" must be of type object"`); + }); + + describe('svgrOptions', () => { + it('accepts undefined', () => { + expect(validate({svgrOptions: undefined})).toEqual( + result(DEFAULT_OPTIONS), + ); + }); + + it('accepts empty', () => { + expect(validate({svgrOptions: {}})).toEqual(result(DEFAULT_OPTIONS)); + }); + + it('accepts any record', () => { + expect(validate({svgrOptions: {any: 'value', evenNumbers: 42}})).toEqual( + result({ + ...DEFAULT_OPTIONS, + svgrOptions: { + any: 'value', + evenNumbers: 42, + }, + }), + ); + }); + + it('accepts default', () => { + expect(validate({svgrOptions: DEFAULT_OPTIONS.svgrOptions})).toEqual( + result(DEFAULT_OPTIONS), + ); + }); + + it('rejects number values', () => { + expect(() => + // @ts-expect-error: invalid type + validate({svgrOptions: 42}), + ).toThrowErrorMatchingInlineSnapshot( + `""svgrOptions" must be of type object"`, + ); + }); + }); +}); diff --git a/packages/docusaurus-plugin-svgr/src/index.ts b/packages/docusaurus-plugin-svgr/src/index.ts new file mode 100644 index 000000000000..c2fbb5f490f9 --- /dev/null +++ b/packages/docusaurus-plugin-svgr/src/index.ts @@ -0,0 +1,25 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import type {LoadContext, Plugin} from '@docusaurus/types'; +import type {PluginOptions, Options} from './options'; + +export default function pluginSVGR( + _context: LoadContext, + _options: PluginOptions, +): Plugin { + return { + name: 'docusaurus-plugin-svgr', + configureWebpack: () => { + return {}; + }, + }; +} + +export {validateOptions} from './options'; + +export type {PluginOptions, Options}; diff --git a/packages/docusaurus-plugin-svgr/src/options.ts b/packages/docusaurus-plugin-svgr/src/options.ts new file mode 100644 index 000000000000..9aef22a12d32 --- /dev/null +++ b/packages/docusaurus-plugin-svgr/src/options.ts @@ -0,0 +1,36 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import {Joi} from '@docusaurus/utils-validation'; +import type {OptionValidationContext} from '@docusaurus/types'; + +type SVGROptions = Record; + +export type PluginOptions = { + svgrOptions: SVGROptions; +}; + +export type Options = { + svgrOptions?: Partial; +}; + +export const DEFAULT_OPTIONS: Partial = { + svgrOptions: {}, +}; + +const pluginOptionsSchema = Joi.object({ + svgrOptions: Joi.object() + .pattern(Joi.string(), Joi.any()) + .optional() + .default(DEFAULT_OPTIONS.svgrOptions), +}).default(DEFAULT_OPTIONS); + +export function validateOptions({ + validate, + options, +}: OptionValidationContext): PluginOptions { + return validate(pluginOptionsSchema, options); +} diff --git a/packages/docusaurus-plugin-svgr/src/types.d.ts b/packages/docusaurus-plugin-svgr/src/types.d.ts new file mode 100644 index 000000000000..6f6f99f12793 --- /dev/null +++ b/packages/docusaurus-plugin-svgr/src/types.d.ts @@ -0,0 +1,8 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +/// diff --git a/packages/docusaurus-plugin-svgr/tsconfig.json b/packages/docusaurus-plugin-svgr/tsconfig.json new file mode 100644 index 000000000000..343f87c70bdc --- /dev/null +++ b/packages/docusaurus-plugin-svgr/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "noEmit": false + }, + "include": ["src"], + "exclude": ["**/__tests__/**"] +} From 438dd5adaf42ad6af6c12df87a038a04a9b38969 Mon Sep 17 00:00:00 2001 From: sebastien Date: Thu, 14 Nov 2024 16:24:00 +0100 Subject: [PATCH 03/12] poc of SVGR plugin --- packages/docusaurus-plugin-svgr/package.json | 6 +- .../src/__tests__/options.test.ts | 16 ++--- packages/docusaurus-plugin-svgr/src/index.ts | 24 +++++-- .../docusaurus-plugin-svgr/src/options.ts | 13 ++-- .../docusaurus-plugin-svgr/src/svgrLoader.ts | 70 +++++++++++++++++++ packages/docusaurus-types/src/plugin.d.ts | 14 ++-- packages/docusaurus-utils/package.json | 1 - packages/docusaurus-utils/src/webpackUtils.ts | 40 ----------- packages/docusaurus/src/webpack/base.ts | 1 - 9 files changed, 117 insertions(+), 68 deletions(-) create mode 100644 packages/docusaurus-plugin-svgr/src/svgrLoader.ts diff --git a/packages/docusaurus-plugin-svgr/package.json b/packages/docusaurus-plugin-svgr/package.json index 756c7c7bf59c..aea47b5a2095 100644 --- a/packages/docusaurus-plugin-svgr/package.json +++ b/packages/docusaurus-plugin-svgr/package.json @@ -20,8 +20,12 @@ "dependencies": { "@docusaurus/core": "3.6.1", "@docusaurus/types": "3.6.1", + "@docusaurus/utils": "3.6.1", "@docusaurus/utils-validation": "3.6.1", - "tslib": "^2.6.0" + "@svgr/core": "8.1.0", + "@svgr/webpack": "^8.1.0", + "tslib": "^2.6.0", + "webpack": "^5.88.1" }, "peerDependencies": { "react": "^18.0.0", diff --git a/packages/docusaurus-plugin-svgr/src/__tests__/options.test.ts b/packages/docusaurus-plugin-svgr/src/__tests__/options.test.ts index af5b454cab7c..63edff7dd217 100644 --- a/packages/docusaurus-plugin-svgr/src/__tests__/options.test.ts +++ b/packages/docusaurus-plugin-svgr/src/__tests__/options.test.ts @@ -59,22 +59,22 @@ describe('validateOptions', () => { ).toThrowErrorMatchingInlineSnapshot(`""value" must be of type object"`); }); - describe('svgrOptions', () => { + describe('svgrConfig', () => { it('accepts undefined', () => { - expect(validate({svgrOptions: undefined})).toEqual( + expect(validate({svgrConfig: undefined})).toEqual( result(DEFAULT_OPTIONS), ); }); it('accepts empty', () => { - expect(validate({svgrOptions: {}})).toEqual(result(DEFAULT_OPTIONS)); + expect(validate({svgrConfig: {}})).toEqual(result(DEFAULT_OPTIONS)); }); it('accepts any record', () => { - expect(validate({svgrOptions: {any: 'value', evenNumbers: 42}})).toEqual( + expect(validate({svgrConfig: {any: 'value', evenNumbers: 42}})).toEqual( result({ ...DEFAULT_OPTIONS, - svgrOptions: { + svgrConfig: { any: 'value', evenNumbers: 42, }, @@ -83,7 +83,7 @@ describe('validateOptions', () => { }); it('accepts default', () => { - expect(validate({svgrOptions: DEFAULT_OPTIONS.svgrOptions})).toEqual( + expect(validate({svgrConfig: DEFAULT_OPTIONS.svgrConfig})).toEqual( result(DEFAULT_OPTIONS), ); }); @@ -91,9 +91,9 @@ describe('validateOptions', () => { it('rejects number values', () => { expect(() => // @ts-expect-error: invalid type - validate({svgrOptions: 42}), + validate({svgrConfig: 42}), ).toThrowErrorMatchingInlineSnapshot( - `""svgrOptions" must be of type object"`, + `""svgrConfig" must be of type object"`, ); }); }); diff --git a/packages/docusaurus-plugin-svgr/src/index.ts b/packages/docusaurus-plugin-svgr/src/index.ts index c2fbb5f490f9..53e34ecdf3fb 100644 --- a/packages/docusaurus-plugin-svgr/src/index.ts +++ b/packages/docusaurus-plugin-svgr/src/index.ts @@ -5,17 +5,33 @@ * LICENSE file in the root directory of this source tree. */ +import {createLoader} from './svgrLoader'; import type {LoadContext, Plugin} from '@docusaurus/types'; import type {PluginOptions, Options} from './options'; export default function pluginSVGR( - _context: LoadContext, - _options: PluginOptions, + context: LoadContext, + options: PluginOptions, ): Plugin { return { name: 'docusaurus-plugin-svgr', - configureWebpack: () => { - return {}; + configureWebpack: (config, isServer) => { + return { + mergeStrategy: { + module: { + rules: { + test: 'match', + use: { + loader: 'match', + options: 'replace', + }, + }, + }, + }, + module: { + rules: [createLoader({isServer, svgrConfig: options.svgrConfig})], + }, + }; }, }; } diff --git a/packages/docusaurus-plugin-svgr/src/options.ts b/packages/docusaurus-plugin-svgr/src/options.ts index 9aef22a12d32..c9448e1999d5 100644 --- a/packages/docusaurus-plugin-svgr/src/options.ts +++ b/packages/docusaurus-plugin-svgr/src/options.ts @@ -6,26 +6,25 @@ */ import {Joi} from '@docusaurus/utils-validation'; import type {OptionValidationContext} from '@docusaurus/types'; - -type SVGROptions = Record; +import type {Config as SVGRConfig} from '@svgr/core'; export type PluginOptions = { - svgrOptions: SVGROptions; + svgrConfig: SVGRConfig; }; export type Options = { - svgrOptions?: Partial; + svgrConfig?: Partial; }; export const DEFAULT_OPTIONS: Partial = { - svgrOptions: {}, + svgrConfig: {}, }; const pluginOptionsSchema = Joi.object({ - svgrOptions: Joi.object() + svgrConfig: Joi.object() .pattern(Joi.string(), Joi.any()) .optional() - .default(DEFAULT_OPTIONS.svgrOptions), + .default(DEFAULT_OPTIONS.svgrConfig), }).default(DEFAULT_OPTIONS); export function validateOptions({ diff --git a/packages/docusaurus-plugin-svgr/src/svgrLoader.ts b/packages/docusaurus-plugin-svgr/src/svgrLoader.ts new file mode 100644 index 000000000000..4c3d502f8d55 --- /dev/null +++ b/packages/docusaurus-plugin-svgr/src/svgrLoader.ts @@ -0,0 +1,70 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import {getFileLoaderUtils} from '@docusaurus/utils'; +import type {Config as SVGRConfig} from '@svgr/core'; +import type {RuleSetRule} from 'webpack'; + +type SVGOConfig = NonNullable; + +// TODO Docusaurus v4: change these defaults? +// see https://github.com/facebook/docusaurus/issues/8297 +// see https://github.com/facebook/docusaurus/pull/10205 +// see https://github.com/facebook/docusaurus/pull/10211 +const DefaultSVGOConfig: SVGOConfig = { + plugins: [ + { + name: 'preset-default', + params: { + overrides: { + removeTitle: false, + removeViewBox: false, + }, + }, + }, + ], +}; + +const DefaultSVGRConfig: SVGRConfig = { + prettier: false, + svgo: true, + svgoConfig: DefaultSVGOConfig, + titleProp: true, +}; + +type Params = {isServer: boolean; svgrConfig: SVGRConfig}; + +function createSVGRLoader(params: Params): RuleSetRule { + const options: SVGRConfig = { + ...DefaultSVGRConfig, + ...params.svgrConfig, + }; + return { + loader: require.resolve('@svgr/webpack'), + options, + }; +} + +export function createLoader(params: Params): RuleSetRule { + const utils = getFileLoaderUtils(params.isServer); + return { + test: /\.svg$/i, + oneOf: [ + { + use: [createSVGRLoader(params)], + // We don't want to use SVGR loader for non-React source code + // ie we don't want to use SVGR for CSS files... + issuer: { + and: [/\.(?:tsx?|jsx?|mdx?)$/i], + }, + }, + { + use: [utils.loaders.url({folder: 'images'})], + }, + ], + }; +} diff --git a/packages/docusaurus-types/src/plugin.d.ts b/packages/docusaurus-types/src/plugin.d.ts index fae721dcd0cb..a2936fc82e05 100644 --- a/packages/docusaurus-types/src/plugin.d.ts +++ b/packages/docusaurus-types/src/plugin.d.ts @@ -7,7 +7,7 @@ import type {CodeTranslations, TranslationFile} from './i18n'; import type {RuleSetRule, Configuration as WebpackConfiguration} from 'webpack'; -import type {CustomizeRuleString} from 'webpack-merge/dist/types'; +import type {CustomizeRuleString} from 'webpack-merge'; import type {CommanderStatic} from 'commander'; import type Joi from 'joi'; import type {HelmetServerState} from 'react-helmet-async'; @@ -108,6 +108,12 @@ export type HtmlTagObject = { export type HtmlTags = string | HtmlTagObject | (string | HtmlTagObject)[]; +export type ConfigureWebpackResult = WebpackConfiguration & { + mergeStrategy?: { + [key: string]: CustomizeRuleString; + }; +}; + export type Plugin = { name: string; loadContent?: () => Promise | Content; @@ -134,11 +140,7 @@ export type Plugin = { isServer: boolean, configureWebpackUtils: ConfigureWebpackUtils, content: Content, - ) => WebpackConfiguration & { - mergeStrategy?: { - [key: string]: CustomizeRuleString; - }; - }; + ) => ConfigureWebpackResult; configurePostCss?: (options: PostCssOptions) => PostCssOptions; getThemePath?: () => string; getTypeScriptThemePath?: () => string; diff --git a/packages/docusaurus-utils/package.json b/packages/docusaurus-utils/package.json index 4e2b66ba87a9..08f7eef4caed 100644 --- a/packages/docusaurus-utils/package.json +++ b/packages/docusaurus-utils/package.json @@ -21,7 +21,6 @@ "@docusaurus/logger": "3.6.1", "@docusaurus/types": "3.6.1", "@docusaurus/utils-common": "3.6.1", - "@svgr/webpack": "^8.1.0", "escape-string-regexp": "^4.0.0", "file-loader": "^6.2.0", "fs-extra": "^11.1.1", diff --git a/packages/docusaurus-utils/src/webpackUtils.ts b/packages/docusaurus-utils/src/webpackUtils.ts index 8c005a8a5c4b..dc3dd2b1181a 100644 --- a/packages/docusaurus-utils/src/webpackUtils.ts +++ b/packages/docusaurus-utils/src/webpackUtils.ts @@ -45,7 +45,6 @@ type FileLoaderUtils = { images: () => RuleSetRule; fonts: () => RuleSetRule; media: () => RuleSetRule; - svg: () => RuleSetRule; otherAssets: () => RuleSetRule; }; }; @@ -134,45 +133,6 @@ function createFileLoaderUtils({ test: /\.(?:mp4|avi|mov|mkv|mpg|mpeg|vob|wmv|m4v|webm|ogv|wav|mp3|m4a|aac|oga|flac)$/i, }), - svg: () => ({ - test: /\.svg$/i, - oneOf: [ - { - use: [ - { - loader: require.resolve('@svgr/webpack'), - options: { - prettier: false, - svgo: true, - svgoConfig: { - plugins: [ - { - name: 'preset-default', - params: { - overrides: { - removeTitle: false, - removeViewBox: false, - }, - }, - }, - ], - }, - titleProp: true, - }, - }, - ], - // We don't want to use SVGR loader for non-React source code - // ie we don't want to use SVGR for CSS files... - issuer: { - and: [/\.(?:tsx?|jsx?|mdx?)$/i], - }, - }, - { - use: [loaders.url({folder: 'images'})], - }, - ], - }), - otherAssets: () => ({ use: [loaders.file({folder: 'files'})], test: /\.(?:pdf|docx?|xlsx?|zip|rar)$/i, diff --git a/packages/docusaurus/src/webpack/base.ts b/packages/docusaurus/src/webpack/base.ts index 31ea6b85d5c1..5ae2a215e533 100644 --- a/packages/docusaurus/src/webpack/base.ts +++ b/packages/docusaurus/src/webpack/base.ts @@ -245,7 +245,6 @@ export async function createBaseConfig({ fileLoaderUtils.rules.images(), fileLoaderUtils.rules.fonts(), fileLoaderUtils.rules.media(), - fileLoaderUtils.rules.svg(), fileLoaderUtils.rules.otherAssets(), { test: /\.[jt]sx?$/i, From 871c41a54bfbfb2ac8802d7d94d8c3e79d0d0f3b Mon Sep 17 00:00:00 2001 From: sebastien Date: Thu, 14 Nov 2024 16:28:16 +0100 Subject: [PATCH 04/12] poc of SVGR plugin --- packages/docusaurus-preset-classic/package.json | 1 + packages/docusaurus-preset-classic/src/index.ts | 4 ++++ packages/docusaurus-preset-classic/src/options.ts | 3 +++ 3 files changed, 8 insertions(+) diff --git a/packages/docusaurus-preset-classic/package.json b/packages/docusaurus-preset-classic/package.json index 3b627aefed34..8b0cfa0c4d29 100644 --- a/packages/docusaurus-preset-classic/package.json +++ b/packages/docusaurus-preset-classic/package.json @@ -27,6 +27,7 @@ "@docusaurus/plugin-google-gtag": "3.6.1", "@docusaurus/plugin-google-tag-manager": "3.6.1", "@docusaurus/plugin-sitemap": "3.6.1", + "@docusaurus/plugin-svgr": "3.6.1", "@docusaurus/theme-classic": "3.6.1", "@docusaurus/theme-common": "3.6.1", "@docusaurus/theme-search-algolia": "3.6.1", diff --git a/packages/docusaurus-preset-classic/src/index.ts b/packages/docusaurus-preset-classic/src/index.ts index 45ae988bc507..eac8c461b306 100644 --- a/packages/docusaurus-preset-classic/src/index.ts +++ b/packages/docusaurus-preset-classic/src/index.ts @@ -37,6 +37,7 @@ export default function preset( blog, pages, sitemap, + svgr, theme, googleAnalytics, gtag, @@ -92,6 +93,9 @@ export default function preset( if (sitemap !== false && (isProd || debug)) { plugins.push(makePluginConfig('@docusaurus/plugin-sitemap', sitemap)); } + if (svgr !== false) { + plugins.push(makePluginConfig('@docusaurus/plugin-svgr', svgr)); + } if (Object.keys(rest).length > 0) { throw new Error( `Unrecognized keys ${Object.keys(rest).join( diff --git a/packages/docusaurus-preset-classic/src/options.ts b/packages/docusaurus-preset-classic/src/options.ts index a8fdb68125f2..98c4087ac696 100644 --- a/packages/docusaurus-preset-classic/src/options.ts +++ b/packages/docusaurus-preset-classic/src/options.ts @@ -9,6 +9,7 @@ import type {Options as DocsPluginOptions} from '@docusaurus/plugin-content-docs import type {Options as BlogPluginOptions} from '@docusaurus/plugin-content-blog'; import type {Options as PagesPluginOptions} from '@docusaurus/plugin-content-pages'; import type {Options as SitemapPluginOptions} from '@docusaurus/plugin-sitemap'; +import type {Options as SVGRPluginOptions} from '@docusaurus/plugin-svgr'; import type {Options as GAPluginOptions} from '@docusaurus/plugin-google-analytics'; import type {Options as GtagPluginOptions} from '@docusaurus/plugin-google-gtag'; import type {Options as GTMPluginOptions} from '@docusaurus/plugin-google-tag-manager'; @@ -31,6 +32,8 @@ export type Options = { pages?: false | PagesPluginOptions; /** Options for `@docusaurus/plugin-sitemap`. Use `false` to disable. */ sitemap?: false | SitemapPluginOptions; + /** Options for `@docusaurus/plugin-svgr`. Use `false` to disable. */ + svgr?: false | SVGRPluginOptions; /** Options for `@docusaurus/theme-classic`. */ theme?: ThemeOptions; /** From 334ee8f4d5c26ac80eea644b95f1c6a20a7bea9f Mon Sep 17 00:00:00 2001 From: sebastien Date: Thu, 14 Nov 2024 16:42:18 +0100 Subject: [PATCH 05/12] Add SVG dogfood page test --- website/_dogfooding/_pages tests/index.mdx | 1 + .../_dogfooding/_pages tests/svg/hacker.svg | 188 ++++++++++ .../_dogfooding/_pages tests/svg/index.mdx | 15 + .../_pages tests/svg/integrations.svg | 335 ++++++++++++++++++ website/_dogfooding/_pages tests/svg/logo.svg | 13 + .../_dogfooding/_pages tests/svg/mascot.svg | 239 +++++++++++++ .../_pages tests/svg/open-source.svg | 237 +++++++++++++ 7 files changed, 1028 insertions(+) create mode 100644 website/_dogfooding/_pages tests/svg/hacker.svg create mode 100644 website/_dogfooding/_pages tests/svg/index.mdx create mode 100644 website/_dogfooding/_pages tests/svg/integrations.svg create mode 100644 website/_dogfooding/_pages tests/svg/logo.svg create mode 100644 website/_dogfooding/_pages tests/svg/mascot.svg create mode 100644 website/_dogfooding/_pages tests/svg/open-source.svg diff --git a/website/_dogfooding/_pages tests/index.mdx b/website/_dogfooding/_pages tests/index.mdx index 4f7c2889bff1..d862394e29c4 100644 --- a/website/_dogfooding/_pages tests/index.mdx +++ b/website/_dogfooding/_pages tests/index.mdx @@ -26,6 +26,7 @@ import Readme from "../README.mdx" ### Other tests - [React 18](/tests/pages/react-18) +- [SVG](/tests/pages/svg) - [Crash test](/tests/pages/crashTest) - [Code block tests](/tests/pages/code-block-tests) - [Link tests](/tests/pages/link-tests) diff --git a/website/_dogfooding/_pages tests/svg/hacker.svg b/website/_dogfooding/_pages tests/svg/hacker.svg new file mode 100644 index 000000000000..701730e08652 --- /dev/null +++ b/website/_dogfooding/_pages tests/svg/hacker.svg @@ -0,0 +1,188 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + svgo --help + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/_dogfooding/_pages tests/svg/index.mdx b/website/_dogfooding/_pages tests/svg/index.mdx new file mode 100644 index 000000000000..a3c5c2718476 --- /dev/null +++ b/website/_dogfooding/_pages tests/svg/index.mdx @@ -0,0 +1,15 @@ +import Logo from './logo.svg'; +import Hacker from './hacker.svg'; +import Integrations from './integrations.svg'; +import OpenSource from './open-source.svg'; +import Mascot from './mascot.svg'; + +# Many inline SVGs + +Have a bunch of SVGs, they're written to intentionally override each others styled when inlined on the same page. + + + + + + diff --git a/website/_dogfooding/_pages tests/svg/integrations.svg b/website/_dogfooding/_pages tests/svg/integrations.svg new file mode 100644 index 000000000000..659c5d146bfa --- /dev/null +++ b/website/_dogfooding/_pages tests/svg/integrations.svg @@ -0,0 +1,335 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/_dogfooding/_pages tests/svg/logo.svg b/website/_dogfooding/_pages tests/svg/logo.svg new file mode 100644 index 000000000000..c0167b6f6d35 --- /dev/null +++ b/website/_dogfooding/_pages tests/svg/logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/website/_dogfooding/_pages tests/svg/mascot.svg b/website/_dogfooding/_pages tests/svg/mascot.svg new file mode 100644 index 000000000000..b3c8bbe6e758 --- /dev/null +++ b/website/_dogfooding/_pages tests/svg/mascot.svg @@ -0,0 +1,239 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/_dogfooding/_pages tests/svg/open-source.svg b/website/_dogfooding/_pages tests/svg/open-source.svg new file mode 100644 index 000000000000..08311e31c091 --- /dev/null +++ b/website/_dogfooding/_pages tests/svg/open-source.svg @@ -0,0 +1,237 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From b50845b258b4702805ddc1a87dc559777552e6a4 Mon Sep 17 00:00:00 2001 From: sebastien Date: Thu, 14 Nov 2024 16:51:15 +0100 Subject: [PATCH 06/12] Use website custom svgo config file --- website/docusaurus.config.ts | 5 +++++ website/svgo.config.js | 29 +++++++++++++++++++++++++++++ 2 files changed, 34 insertions(+) create mode 100644 website/svgo.config.js diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts index b52e5c859a7a..852a0b4e3c83 100644 --- a/website/docusaurus.config.ts +++ b/website/docusaurus.config.ts @@ -547,6 +547,11 @@ export default async function createConfigAsync() { priority: null, changefreq: null, }, + svgr: { + svgrConfig: { + svgoConfig: undefined, // Use .svgo.config.js + }, + }, } satisfies Preset.Options, ], ], diff --git a/website/svgo.config.js b/website/svgo.config.js new file mode 100644 index 000000000000..be70fc07fc59 --- /dev/null +++ b/website/svgo.config.js @@ -0,0 +1,29 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +const path = require('path'); + +module.exports = { + plugins: [ + { + name: 'preset-default', + params: { + overrides: { + removeTitle: false, + removeViewBox: false, + }, + }, + }, + { + name: 'prefixIds', + params: { + delim: '', + prefix: (_, info) => path.parse(info.path).name, + }, + }, + ], +}; From 0b93cdbf5c9c96f907cb232ff1969148c8d20bea Mon Sep 17 00:00:00 2001 From: sebastien Date: Thu, 14 Nov 2024 17:02:36 +0100 Subject: [PATCH 07/12] remove useless SVGR tests --- .../src/__tests__/webpackUtils.test.ts | 34 ------------------- .../src/webpack/__tests__/base.test.ts | 16 --------- 2 files changed, 50 deletions(-) delete mode 100644 packages/docusaurus-utils/src/__tests__/webpackUtils.test.ts diff --git a/packages/docusaurus-utils/src/__tests__/webpackUtils.test.ts b/packages/docusaurus-utils/src/__tests__/webpackUtils.test.ts deleted file mode 100644 index 3d2c70f68924..000000000000 --- a/packages/docusaurus-utils/src/__tests__/webpackUtils.test.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -import {getFileLoaderUtils} from '../webpackUtils'; - -describe('getFileLoaderUtils()', () => { - it('plugin svgo/removeViewBox and removeTitle should be disabled', () => { - const {oneOf} = getFileLoaderUtils().rules.svg(); - expect(oneOf![0]!.use).toContainEqual( - expect.objectContaining({ - loader: require.resolve('@svgr/webpack'), - options: expect.objectContaining({ - svgoConfig: { - plugins: [ - { - name: 'preset-default', - params: { - overrides: { - removeTitle: false, - removeViewBox: false, - }, - }, - }, - ], - }, - }), - }), - ); - }); -}); diff --git a/packages/docusaurus/src/webpack/__tests__/base.test.ts b/packages/docusaurus/src/webpack/__tests__/base.test.ts index b4c29b514e17..676e509fe4b9 100644 --- a/packages/docusaurus/src/webpack/__tests__/base.test.ts +++ b/packages/docusaurus/src/webpack/__tests__/base.test.ts @@ -132,20 +132,4 @@ describe('base webpack config', () => { ); expect(relativeAliases).toMatchSnapshot(); }); - - it('uses svg rule', async () => { - const config = await createBaseConfig({ - props, - isServer: false, - minify: false, - faster: DEFAULT_FASTER_CONFIG, - configureWebpackUtils: await createTestConfigureWebpackUtils(), - }); - - const svgRule = (config.module?.rules ?? []).find((rule) => { - return rule && (rule as any).test.toString().includes('.svg'); - }); - expect(svgRule).toBeDefined(); - expect(svgRule).toMatchSnapshot(); - }); }); From 87fd316612cf37d4fce0f5eb887fea6e17e30b51 Mon Sep 17 00:00:00 2001 From: sebastien Date: Thu, 14 Nov 2024 17:22:52 +0100 Subject: [PATCH 08/12] remove useless SVGR tests --- .../__tests__/__snapshots__/base.test.ts.snap | 51 ----- .../_dogfooding/_pages tests/svg/hacker.svg | 188 ------------------ .../_dogfooding/_pages tests/svg/index.mdx | 4 - website/_dogfooding/_pages tests/svg/logo.svg | 13 -- 4 files changed, 256 deletions(-) delete mode 100644 website/_dogfooding/_pages tests/svg/hacker.svg delete mode 100644 website/_dogfooding/_pages tests/svg/logo.svg diff --git a/packages/docusaurus/src/webpack/__tests__/__snapshots__/base.test.ts.snap b/packages/docusaurus/src/webpack/__tests__/__snapshots__/base.test.ts.snap index 8f321b063446..88a08cdf5997 100644 --- a/packages/docusaurus/src/webpack/__tests__/__snapshots__/base.test.ts.snap +++ b/packages/docusaurus/src/webpack/__tests__/__snapshots__/base.test.ts.snap @@ -52,54 +52,3 @@ exports[`base webpack config creates webpack aliases 1`] = ` "react-dom": "../../../../../../../node_modules/react-dom", } `; - -exports[`base webpack config uses svg rule 1`] = ` -{ - "oneOf": [ - { - "issuer": { - "and": [ - /\\\\\\.\\(\\?:tsx\\?\\|jsx\\?\\|mdx\\?\\)\\$/i, - ], - }, - "use": [ - { - "loader": "/node_modules/@svgr/webpack/dist/index.js", - "options": { - "prettier": false, - "svgo": true, - "svgoConfig": { - "plugins": [ - { - "name": "preset-default", - "params": { - "overrides": { - "removeTitle": false, - "removeViewBox": false, - }, - }, - }, - ], - }, - "titleProp": true, - }, - }, - ], - }, - { - "use": [ - { - "loader": "/node_modules/url-loader/dist/cjs.js", - "options": { - "emitFile": true, - "fallback": "/node_modules/file-loader/dist/cjs.js", - "limit": 10000, - "name": "assets/images/[name]-[contenthash].[ext]", - }, - }, - ], - }, - ], - "test": /\\\\\\.svg\\$/i, -} -`; diff --git a/website/_dogfooding/_pages tests/svg/hacker.svg b/website/_dogfooding/_pages tests/svg/hacker.svg deleted file mode 100644 index 701730e08652..000000000000 --- a/website/_dogfooding/_pages tests/svg/hacker.svg +++ /dev/null @@ -1,188 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - svgo --help - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/website/_dogfooding/_pages tests/svg/index.mdx b/website/_dogfooding/_pages tests/svg/index.mdx index a3c5c2718476..494bc5e21d10 100644 --- a/website/_dogfooding/_pages tests/svg/index.mdx +++ b/website/_dogfooding/_pages tests/svg/index.mdx @@ -1,5 +1,3 @@ -import Logo from './logo.svg'; -import Hacker from './hacker.svg'; import Integrations from './integrations.svg'; import OpenSource from './open-source.svg'; import Mascot from './mascot.svg'; @@ -8,8 +6,6 @@ import Mascot from './mascot.svg'; Have a bunch of SVGs, they're written to intentionally override each others styled when inlined on the same page. - - diff --git a/website/_dogfooding/_pages tests/svg/logo.svg b/website/_dogfooding/_pages tests/svg/logo.svg deleted file mode 100644 index c0167b6f6d35..000000000000 --- a/website/_dogfooding/_pages tests/svg/logo.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - From 1d11f784b7b743552e5a947aca76dc824689d86b Mon Sep 17 00:00:00 2001 From: sebastien Date: Thu, 14 Nov 2024 17:31:08 +0100 Subject: [PATCH 09/12] refactor SVGR/SVGO types and export them --- packages/docusaurus-plugin-svgr/src/index.ts | 2 ++ packages/docusaurus-plugin-svgr/src/svgrLoader.ts | 5 ++--- packages/docusaurus-plugin-svgr/src/types.d.ts | 4 ++++ 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/docusaurus-plugin-svgr/src/index.ts b/packages/docusaurus-plugin-svgr/src/index.ts index 53e34ecdf3fb..d68b94195f00 100644 --- a/packages/docusaurus-plugin-svgr/src/index.ts +++ b/packages/docusaurus-plugin-svgr/src/index.ts @@ -9,6 +9,8 @@ import {createLoader} from './svgrLoader'; import type {LoadContext, Plugin} from '@docusaurus/types'; import type {PluginOptions, Options} from './options'; +export type {SVGRConfig, SVGOConfig} from './types'; + export default function pluginSVGR( context: LoadContext, options: PluginOptions, diff --git a/packages/docusaurus-plugin-svgr/src/svgrLoader.ts b/packages/docusaurus-plugin-svgr/src/svgrLoader.ts index 4c3d502f8d55..a75a16571186 100644 --- a/packages/docusaurus-plugin-svgr/src/svgrLoader.ts +++ b/packages/docusaurus-plugin-svgr/src/svgrLoader.ts @@ -6,10 +6,9 @@ */ import {getFileLoaderUtils} from '@docusaurus/utils'; -import type {Config as SVGRConfig} from '@svgr/core'; -import type {RuleSetRule} from 'webpack'; -type SVGOConfig = NonNullable; +import type {SVGRConfig, SVGOConfig} from './types'; +import type {RuleSetRule} from 'webpack'; // TODO Docusaurus v4: change these defaults? // see https://github.com/facebook/docusaurus/issues/8297 diff --git a/packages/docusaurus-plugin-svgr/src/types.d.ts b/packages/docusaurus-plugin-svgr/src/types.d.ts index 6f6f99f12793..763efa96df9b 100644 --- a/packages/docusaurus-plugin-svgr/src/types.d.ts +++ b/packages/docusaurus-plugin-svgr/src/types.d.ts @@ -6,3 +6,7 @@ */ /// + +export type {Config as SVGRConfig} from '@svgr/core'; + +export type SVGOConfig = NonNullable; From 61b4bdb61eaca79d3e75e355663f56715165318e Mon Sep 17 00:00:00 2001 From: sebastien Date: Thu, 14 Nov 2024 17:32:38 +0100 Subject: [PATCH 10/12] fix webpack merge type :s --- packages/docusaurus-types/src/plugin.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docusaurus-types/src/plugin.d.ts b/packages/docusaurus-types/src/plugin.d.ts index a2936fc82e05..51cecbf64783 100644 --- a/packages/docusaurus-types/src/plugin.d.ts +++ b/packages/docusaurus-types/src/plugin.d.ts @@ -7,7 +7,7 @@ import type {CodeTranslations, TranslationFile} from './i18n'; import type {RuleSetRule, Configuration as WebpackConfiguration} from 'webpack'; -import type {CustomizeRuleString} from 'webpack-merge'; +import type {CustomizeRuleString} from 'webpack-merge/dist/types'; import type {CommanderStatic} from 'commander'; import type Joi from 'joi'; import type {HelmetServerState} from 'react-helmet-async'; From 992ea8189624dfbf7ef7cc29247a7ce789004039 Mon Sep 17 00:00:00 2001 From: sebastien Date: Thu, 14 Nov 2024 17:43:18 +0100 Subject: [PATCH 11/12] fix types --- packages/docusaurus-plugin-svgr/src/index.ts | 15 +-------------- packages/docusaurus-plugin-svgr/src/options.ts | 8 +++++++- packages/docusaurus-plugin-svgr/src/svgrLoader.ts | 2 +- packages/docusaurus-plugin-svgr/src/types.d.ts | 4 ---- 4 files changed, 9 insertions(+), 20 deletions(-) diff --git a/packages/docusaurus-plugin-svgr/src/index.ts b/packages/docusaurus-plugin-svgr/src/index.ts index d68b94195f00..ab92a1ee1507 100644 --- a/packages/docusaurus-plugin-svgr/src/index.ts +++ b/packages/docusaurus-plugin-svgr/src/index.ts @@ -9,27 +9,14 @@ import {createLoader} from './svgrLoader'; import type {LoadContext, Plugin} from '@docusaurus/types'; import type {PluginOptions, Options} from './options'; -export type {SVGRConfig, SVGOConfig} from './types'; - export default function pluginSVGR( - context: LoadContext, + _context: LoadContext, options: PluginOptions, ): Plugin { return { name: 'docusaurus-plugin-svgr', configureWebpack: (config, isServer) => { return { - mergeStrategy: { - module: { - rules: { - test: 'match', - use: { - loader: 'match', - options: 'replace', - }, - }, - }, - }, module: { rules: [createLoader({isServer, svgrConfig: options.svgrConfig})], }, diff --git a/packages/docusaurus-plugin-svgr/src/options.ts b/packages/docusaurus-plugin-svgr/src/options.ts index c9448e1999d5..c4cd5c9f37e8 100644 --- a/packages/docusaurus-plugin-svgr/src/options.ts +++ b/packages/docusaurus-plugin-svgr/src/options.ts @@ -6,7 +6,13 @@ */ import {Joi} from '@docusaurus/utils-validation'; import type {OptionValidationContext} from '@docusaurus/types'; -import type {Config as SVGRConfig} from '@svgr/core'; + +// TODO unfortunately there's a SVGR TS error when skipLibCheck=false +// related to prettier, see https://github.com/gregberge/svgr/issues/904 +// import type {Config as SVGRConfig} from '@svgr/core'; +// export type {SVGRConfig}; +export type SVGRConfig = any; +export type SVGOConfig = NonNullable; export type PluginOptions = { svgrConfig: SVGRConfig; diff --git a/packages/docusaurus-plugin-svgr/src/svgrLoader.ts b/packages/docusaurus-plugin-svgr/src/svgrLoader.ts index a75a16571186..3744b9decca1 100644 --- a/packages/docusaurus-plugin-svgr/src/svgrLoader.ts +++ b/packages/docusaurus-plugin-svgr/src/svgrLoader.ts @@ -7,7 +7,7 @@ import {getFileLoaderUtils} from '@docusaurus/utils'; -import type {SVGRConfig, SVGOConfig} from './types'; +import type {SVGRConfig, SVGOConfig} from './options'; import type {RuleSetRule} from 'webpack'; // TODO Docusaurus v4: change these defaults? diff --git a/packages/docusaurus-plugin-svgr/src/types.d.ts b/packages/docusaurus-plugin-svgr/src/types.d.ts index 763efa96df9b..6f6f99f12793 100644 --- a/packages/docusaurus-plugin-svgr/src/types.d.ts +++ b/packages/docusaurus-plugin-svgr/src/types.d.ts @@ -6,7 +6,3 @@ */ /// - -export type {Config as SVGRConfig} from '@svgr/core'; - -export type SVGOConfig = NonNullable; From 430494c54983923790bfbf432bc6e26432b1247a Mon Sep 17 00:00:00 2001 From: sebastien Date: Thu, 14 Nov 2024 17:58:50 +0100 Subject: [PATCH 12/12] docs --- website/docs/api/plugins/overview.mdx | 3 ++ website/docs/api/plugins/plugin-svgr.mdx | 55 ++++++++++++++++++++++++ website/docs/using-plugins.mdx | 3 ++ 3 files changed, 61 insertions(+) create mode 100644 website/docs/api/plugins/plugin-svgr.mdx diff --git a/website/docs/api/plugins/overview.mdx b/website/docs/api/plugins/overview.mdx index 651517d4ee83..23eb70892996 100644 --- a/website/docs/api/plugins/overview.mdx +++ b/website/docs/api/plugins/overview.mdx @@ -23,8 +23,11 @@ These plugins will add a useful behavior to your Docusaurus site. - [@docusaurus/plugin-debug](./plugin-debug.mdx) - [@docusaurus/plugin-sitemap](./plugin-sitemap.mdx) +- [@docusaurus/plugin-svgr](./plugin-svgr.mdx) +- [@docusaurus/plugin-rsdoctor](./plugin-rsdoctor.mdx) - [@docusaurus/plugin-pwa](./plugin-pwa.mdx) - [@docusaurus/plugin-client-redirects](./plugin-client-redirects.mdx) - [@docusaurus/plugin-ideal-image](./plugin-ideal-image.mdx) - [@docusaurus/plugin-google-analytics](./plugin-google-analytics.mdx) - [@docusaurus/plugin-google-gtag](./plugin-google-gtag.mdx) +- [@docusaurus/plugin-google-tag-manager](./plugin-google-tag-manager.mdx) diff --git a/website/docs/api/plugins/plugin-svgr.mdx b/website/docs/api/plugins/plugin-svgr.mdx new file mode 100644 index 000000000000..bd5bef1eab90 --- /dev/null +++ b/website/docs/api/plugins/plugin-svgr.mdx @@ -0,0 +1,55 @@ +--- +sidebar_position: 7 +slug: /api/plugins/@docusaurus/plugin-svgr +--- + +# 📦 plugin-svgr + +import APITable from '@site/src/components/APITable'; + +An [SVGR](https://react-svgr.com/) plugin to transform SVG files into React components automatically at build time. + +## Installation {#installation} + +```bash npm2yarn +npm install --save @docusaurus/plugin-svgr +``` + +:::tip + +If you use the preset `@docusaurus/preset-classic`, you don't need to install this plugin as a dependency. + +You can configure this plugin through the [preset options](../../using-plugins.mdx#docusauruspreset-classic). + +::: + +## Configuration {#configuration} + +Accepted fields: + +```mdx-code-block + +``` + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `svgrConfig` | `object` | `{}` | The [SVGR config options](https://react-svgr.com/docs/options/), forwarded as is | + +```mdx-code-block + +``` + +### Example configuration {#ex-config} + +You can configure this plugin through plugin options. + +```js config-tabs +// Preset Options: svgr +// Plugin Options: @docusaurus/plugin-svgr + +const config = { + svgrConfig: { + /* SVGR config */ + }, +}; +``` diff --git a/website/docs/using-plugins.mdx b/website/docs/using-plugins.mdx index 92d86097d717..a9d7f043243b 100644 --- a/website/docs/using-plugins.mdx +++ b/website/docs/using-plugins.mdx @@ -148,6 +148,7 @@ The classic preset is shipped by default to new Docusaurus websites created with - [`@docusaurus/plugin-google-tag-manager`](./api/plugins/plugin-google-tag-manager.mdx) - [`@docusaurus/plugin-google-analytics`](./api/plugins/plugin-google-analytics.mdx) (**deprecated**) - [`@docusaurus/plugin-sitemap`](./api/plugins/plugin-sitemap.mdx) +- [`@docusaurus/plugin-svgr`](./api/plugins/plugin-svgr.mdx) The classic preset will relay each option entry to the respective plugin/theme. @@ -171,6 +172,8 @@ export default { pages: {}, // Will be passed to @docusaurus/plugin-sitemap (false to disable) sitemap: {}, + // Will be passed to @docusaurus/plugin-svgr (false to disable) + svgr: {}, // Will be passed to @docusaurus/plugin-google-gtag (only enabled when explicitly specified) gtag: {}, // Will be passed to @docusaurus/plugin-google-tag-manager (only enabled when explicitly specified)