feat(un-jsx): inline constant tag inlining (#129)

* feat(un-jsx): improve jsx constant tag inlining * test: update test cases * refactor(un-jsx): remove array inlining * refactor(un-jsx): remove ternary inlining * refactor(un-jsx): rewrite the implementation of constant tag variable inlining --------- Co-authored-by: Pionxzh <[email protected]>
pionxzh · May 9, 2024 · 2fb95bb · 2fb95bb
1 parent 8546f81
commit 2fb95bb
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 1 deletion.
diff --git a/packages/unminify/src/transformations/__tests__/un-jsx.spec.ts b/packages/unminify/src/transformations/__tests__/un-jsx.spec.ts
@@ -206,6 +206,35 @@ const Foo = () => {
 `,
 )
 
+inlineTest('jsx with dynamic Component tag - tag name in constant variable',
+ `
+function fn() {
+ const Name = "div";
+ return React.createElement(Name, null);
+}
+`,
+ `
+function fn() {
+ return <div />;
+}
+`,
+)
+
+inlineTest('jsx with dynamic Component tag - tag name in constant variable but the value is not a string',
+ `
+function fn() {
+ const Name = 1;
+ return React.createElement(Name, null);
+}
+`,
+ `
+function fn() {
+ const Name = 1;
+ return <Name />;
+}
+`,
+)
+
 inlineTest('jsx with child text that should be wrapped',
  `
 function fn() {

diff --git a/packages/unminify/src/transformations/un-jsx.ts b/packages/unminify/src/transformations/un-jsx.ts
@@ -4,6 +4,7 @@ import { removePureAnnotation } from '@wakaru/ast-utils/comments'
 import { generateName } from '@wakaru/ast-utils/identifier'
 import { insertBefore } from '@wakaru/ast-utils/insert'
 import { isNull, isTrue, isUndefined } from '@wakaru/ast-utils/matchers'
+import { findDeclaration, removeDeclarationIfUnused } from '@wakaru/ast-utils/scope'
 import { nonNullable } from '@wakaru/shared/array'
 import { createJSCodeshiftTransformationRule } from '@wakaru/shared/rule'
 import { z } from 'zod'
@@ -106,7 +107,6 @@ export const transformAST: ASTTransformation<typeof Schema> = (context, params)
  if (jsxElement) {
  const parentWithComments = j.ExpressionStatement.check(path.parent.node) ? path.parent : path
  removePureAnnotation(j, parentWithComments.node)
-
  path.replace(jsxElement)
  }
  })
@@ -131,6 +131,27 @@ function toJSX(j: JSCodeshift, path: ASTPath<CallExpression>, pragmas: string[],
  if (isCapitalizationInvalid(j, type)) return null
 
  let tag = toJsxTag(j, type)
+
+ // constant tag name will convert into JSX tag
+ if (j.JSXIdentifier.check(tag)) {
+ const scope = path.scope
+ assertScopeExists(scope)
+
+ const tagName = tag.name
+ const declaration = findDeclaration(scope, tagName)
+ if (declaration) {
+ // if the tag is a variable and it's string literal, inline it
+ const variableDeclarator = j(declaration).closest(j.VariableDeclarator)
+ if (variableDeclarator.size() === 1) {
+ const init = variableDeclarator.get().node.init
+ if (j.StringLiteral.check(init)) {
+ tag = j.jsxIdentifier(init.value)
+ removeDeclarationIfUnused(j, path, tagName)
+ }
+ }
+ }
+ }
+
  // If a tag cannot be converted to JSX tag, convert it to a variable
  if (!tag && !j.SpreadElement.check(type)) {
  const name = generateName('Component', scope)