Skip to content

Commit

Permalink
fix(template): make it possible to use type in template (#619)
Browse files Browse the repository at this point in the history
Fix #556
  • Loading branch information
gregberge authored Nov 11, 2021
1 parent 9ea5da4 commit 5966714
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,19 @@ export default MyComponent;"
exports[`plugin javascript custom templates supports template that does not return an array 1`] = `"<svg><g /></svg>;"`;
exports[`plugin javascript custom templates supports type annotation on component 1`] = `
"import * as React from \\"react\\";
interface Props {
x?: string;
}
export const SvgComponent:React.FC<Props> = ({
x
}) => {
return <svg><g /></svg>;
};
export default SvgComponent;"
`;
exports[`plugin javascript transforms whole program 1`] = `
"import * as React from \\"react\\";
Expand Down Expand Up @@ -270,6 +283,19 @@ export default MyComponent;"
exports[`plugin typescript custom templates supports template that does not return an array 1`] = `"<svg><g /></svg>;"`;
exports[`plugin typescript custom templates supports type annotation on component 1`] = `
"import * as React from \\"react\\";
interface Props {
x?: string;
}
export const SvgComponent:React.FC<Props> = ({
x
}) => {
return <svg><g /></svg>;
};
export default SvgComponent;"
`;
exports[`plugin typescript transforms whole program 1`] = `
"import * as React from \\"react\\";
Expand Down
19 changes: 19 additions & 0 deletions packages/babel-plugin-transform-svg-component/src/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,25 @@ describe('plugin', () => {
})
expect(code).toMatchSnapshot()
})

it('supports type annotation on component', () => {
const { code } = testPlugin(language)('<svg><g /></svg>', {
typescript: true,
template: (
{ jsx, imports, interfaces, componentName, exports },
{ tpl },
) => tpl`
${imports}
${interfaces}
interface Props { x?: string }
export const ${`${componentName}:React.FC<Props>`} = ({ x }) => {
return (${jsx});
}
${exports}`,
state: { componentName: 'SvgComponent' },
})
expect(code).toMatchSnapshot()
})
})

describe('#jsxRuntime', () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/babel-plugin-transform-svg-component/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { types as t } from '@babel/core'
import type { TemplateBuilder } from '@babel/template'

export interface TemplateVariables {
componentName: t.Identifier
componentName: string
interfaces: t.TSInterfaceDeclaration[]
props: (t.ObjectPattern | t.Identifier)[]
imports: t.ImportDeclaration[]
Expand Down
12 changes: 9 additions & 3 deletions packages/babel-plugin-transform-svg-component/src/variables.ts
Original file line number Diff line number Diff line change
Expand Up @@ -95,14 +95,13 @@ export const getVariables = ({
opts: Options
jsx: t.JSXElement
}): TemplateVariables => {
const componentName = t.identifier(opts.state.componentName)
const interfaces: t.TSInterfaceDeclaration[] = []
const props: (t.Identifier | t.ObjectPattern)[] = []
const imports: t.ImportDeclaration[] = []
const exports: (t.VariableDeclaration | t.ExportDeclaration)[] = []
const ctx = {
importSource: opts.importSource ?? defaultImportSource,
exportIdentifier: componentName,
exportIdentifier: t.identifier(opts.state.componentName),
opts,
interfaces,
props,
Expand Down Expand Up @@ -238,5 +237,12 @@ export const getVariables = ({
} else {
exports.push(t.exportDefaultDeclaration(ctx.exportIdentifier))
}
return { componentName, props, interfaces, imports, exports, jsx }
return {
componentName: opts.state.componentName,
props,
interfaces,
imports,
exports,
jsx,
}
}

1 comment on commit 5966714

@vercel
Copy link

@vercel vercel bot commented on 5966714 Nov 11, 2021

Choose a reason for hiding this comment

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

Please sign in to comment.