Skip to content

Commit

Permalink
feat: allow specifying jsxRuntimeImport in config
Browse files Browse the repository at this point in the history
* Allow specifying `jsxRuntimeImport` in config, see #801

I need to have a config which isn't currently supported

* Allow specifying a single specifier for custom imports, see #801

`hyperapp-jsx-pragma` uses the default export so we need to `import h from "hyperapp-jsx-pragma"`, not `import { h } from "hyperapp-jsx-pragma"`
  • Loading branch information
shish authored Mar 14, 2023
1 parent 331c92c commit 86bb86f
Show file tree
Hide file tree
Showing 7 changed files with 44 additions and 5 deletions.
Original file line number Diff line number Diff line change
@@ -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 = () => <svg><g /></svg>;
export default SvgComponent;"
`;

exports[`plugin javascript #jsxRuntime allows to specify a custom "classic" jsxRuntime using "namespace" 1`] = `
"import * as Preact from "preact";
const SvgComponent = () => <svg><g /></svg>;
Expand Down Expand Up @@ -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 = () => <svg><g /></svg>;
export default SvgComponent;"
`;
exports[`plugin typescript #jsxRuntime allows to specify a custom "classic" jsxRuntime using "namespace" 1`] = `
"import * as Preact from "preact";
const SvgComponent = () => <svg><g /></svg>;
Expand Down
10 changes: 9 additions & 1 deletion packages/babel-plugin-transform-svg-component/src/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -338,14 +338,22 @@ describe('plugin', () => {
expect(code).toMatchSnapshot()
})

it('allows to specify a custom "classic" jsxRuntime using "defaultSpecifier"', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
jsxRuntime: 'classic',
jsxRuntimeImport: { defaultSpecifier: 'h', source: 'hyperapp-jsx-pragma' },
})
expect(code).toMatchSnapshot()
})

it('throws with invalid configuration', () => {
expect(() => {
testPlugin(language)('<svg><g /></svg>', {
jsxRuntime: 'classic',
jsxRuntimeImport: { source: 'preact' },
})
}).toThrow(
'Specify either "namespace" or "specifiers" in "jsxRuntimeImport" option',
'Specify "namespace", "defaultSpecifier", or "specifiers" in "jsxRuntimeImport" option',
)
})
})
Expand Down
1 change: 1 addition & 0 deletions packages/babel-plugin-transform-svg-component/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ interface State {
export interface JSXRuntimeImport {
source: string
namespace?: string
defaultSpecifier?: string
specifiers?: string[]
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
6 changes: 6 additions & 0 deletions packages/core/src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 6 additions & 0 deletions packages/plugin-jsx/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@ import svgrBabelPreset, {
import type { Plugin, Config } from '@svgr/core'

const getJsxRuntimeOptions = (config: Config): Partial<SvgrPresetOptions> => {
if (config.jsxRuntimeImport) {
return {
importSource: config.jsxRuntimeImport.source,
jsxRuntimeImport: config.jsxRuntimeImport,
}
}
switch (config.jsxRuntime) {
case null:
case undefined:
Expand Down
8 changes: 5 additions & 3 deletions website/pages/docs/options.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down

1 comment on commit 86bb86f

@vercel
Copy link

@vercel vercel bot commented on 86bb86f Mar 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

svgr – ./

svgr-git-main-gregberge.vercel.app
api.react-svgr.com
svgr-gregberge.vercel.app

Please sign in to comment.