diff --git a/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap b/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap index 4cb9694d..93ded8d4 100644 --- a/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap +++ b/packages/babel-plugin-transform-svg-component/src/__snapshots__/index.test.ts.snap @@ -1,5 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`plugin javascript #jsxRuntime allows to specify a custom "classic" jsxRuntime using "defaultSpecifier" 1`] = ` +"import h from "hyperapp-jsx-pragma"; +const SvgComponent = () => ; +export default SvgComponent;" +`; + exports[`plugin javascript #jsxRuntime allows to specify a custom "classic" jsxRuntime using "namespace" 1`] = ` "import * as Preact from "preact"; const SvgComponent = () => ; @@ -226,6 +232,12 @@ const Memo = memo(ForwardRef); export default Memo;" `; +exports[`plugin typescript #jsxRuntime allows to specify a custom "classic" jsxRuntime using "defaultSpecifier" 1`] = ` +"import h from "hyperapp-jsx-pragma"; +const SvgComponent = () => ; +export default SvgComponent;" +`; + exports[`plugin typescript #jsxRuntime allows to specify a custom "classic" jsxRuntime using "namespace" 1`] = ` "import * as Preact from "preact"; const SvgComponent = () => ; diff --git a/packages/babel-plugin-transform-svg-component/src/index.test.ts b/packages/babel-plugin-transform-svg-component/src/index.test.ts index 7272ff0d..7ce0b156 100644 --- a/packages/babel-plugin-transform-svg-component/src/index.test.ts +++ b/packages/babel-plugin-transform-svg-component/src/index.test.ts @@ -338,6 +338,14 @@ describe('plugin', () => { expect(code).toMatchSnapshot() }) + it('allows to specify a custom "classic" jsxRuntime using "defaultSpecifier"', () => { + const { code } = testPlugin(language)('', { + jsxRuntime: 'classic', + jsxRuntimeImport: { defaultSpecifier: 'h', source: 'hyperapp-jsx-pragma' }, + }) + expect(code).toMatchSnapshot() + }) + it('throws with invalid configuration', () => { expect(() => { testPlugin(language)('', { @@ -345,7 +353,7 @@ describe('plugin', () => { jsxRuntimeImport: { source: 'preact' }, }) }).toThrow( - 'Specify either "namespace" or "specifiers" in "jsxRuntimeImport" option', + 'Specify "namespace", "defaultSpecifier", or "specifiers" in "jsxRuntimeImport" option', ) }) }) diff --git a/packages/babel-plugin-transform-svg-component/src/types.ts b/packages/babel-plugin-transform-svg-component/src/types.ts index c171a5bb..c4caad7f 100644 --- a/packages/babel-plugin-transform-svg-component/src/types.ts +++ b/packages/babel-plugin-transform-svg-component/src/types.ts @@ -29,6 +29,7 @@ interface State { export interface JSXRuntimeImport { source: string namespace?: string + defaultSpecifier?: string specifiers?: string[] } diff --git a/packages/babel-plugin-transform-svg-component/src/variables.ts b/packages/babel-plugin-transform-svg-component/src/variables.ts index 64a1481b..e597b390 100644 --- a/packages/babel-plugin-transform-svg-component/src/variables.ts +++ b/packages/babel-plugin-transform-svg-component/src/variables.ts @@ -69,13 +69,17 @@ const getJsxRuntimeImport = (cfg: JSXRuntimeImport) => { const specifiers = (() => { if (cfg.namespace) return [t.importNamespaceSpecifier(t.identifier(cfg.namespace))] + if (cfg.defaultSpecifier) { + const identifier = t.identifier(cfg.defaultSpecifier) + return [t.importDefaultSpecifier(identifier)] + } if (cfg.specifiers) return cfg.specifiers.map((specifier) => { const identifier = t.identifier(specifier) return t.importSpecifier(identifier, identifier) }) throw new Error( - `Specify either "namespace" or "specifiers" in "jsxRuntimeImport" option`, + `Specify "namespace", "defaultSpecifier", or "specifiers" in "jsxRuntimeImport" option`, ) })() return t.importDeclaration(specifiers, t.stringLiteral(cfg.source)) diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts index 9468ca8b..98f21560 100644 --- a/packages/core/src/config.ts +++ b/packages/core/src/config.ts @@ -32,6 +32,12 @@ export interface Config { exportType?: 'named' | 'default' namedExport?: string jsxRuntime?: 'classic' | 'classic-preact' | 'automatic' + jsxRuntimeImport?: { + source: string + namespace?: string + specifiers?: string[] + defaultSpecifier?: string + } // CLI only index?: boolean diff --git a/packages/plugin-jsx/src/index.ts b/packages/plugin-jsx/src/index.ts index 9d198df0..d05faca5 100644 --- a/packages/plugin-jsx/src/index.ts +++ b/packages/plugin-jsx/src/index.ts @@ -7,6 +7,12 @@ import svgrBabelPreset, { import type { Plugin, Config } from '@svgr/core' const getJsxRuntimeOptions = (config: Config): Partial => { + if (config.jsxRuntimeImport) { + return { + importSource: config.jsxRuntimeImport.source, + jsxRuntimeImport: config.jsxRuntimeImport, + } + } switch (config.jsxRuntime) { case null: case undefined: diff --git a/website/pages/docs/options.mdx b/website/pages/docs/options.mdx index 072c7288..c9386e97 100644 --- a/website/pages/docs/options.mdx +++ b/website/pages/docs/options.mdx @@ -46,9 +46,11 @@ Specify a custom JSX runtime source to use. Allows to customize the import added Example: `jsxRuntimeImport: { source: 'preact', specifiers: ['h'] }` for "classic-preact" equivalent. -| Default | CLI Override | API Override | -| ------- | ------------ | ------------------------------------------------------------ | -| `null` | - | `jsxRuntimeImport: { source: string, specifiers: string[] }` | +To use the default import instead of a list of names, you can use `defaultSpecifier`, for example to use svgr with `hyperapp-jsx-pragma`, you can specify `jsxRuntimeImport: { source: 'hyperapp-jsx-pragma', defaultSpecifier: 'h' }` to get an end result of `import h from "hyperapp-jsx-pragma";` + +| Default | CLI Override | API Override | +| ------- | ------------ | -------------------------------------------------------------------------------------- | +| `null` | - | `jsxRuntimeImport: { source: string, specifiers: string[], defaultSpecifier: string }` | ## Icon