Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(template): make it possible to use type in template #619

Merged
merged 1 commit into from
Nov 11, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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,
}
}