feat: allow specifying jsxRuntimeImport in config

* 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"`

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 = () => <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>;
@@ -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>;

packages/babel-plugin-transform-svg-component/src/index.test.ts

@@ -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',
         )
       })
     })

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[]
 }
 

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))

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

packages/plugin-jsx/src/index.ts

@@ -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:

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