Adding additional properties to JSX components during typescript compilationIs there a way to include additional properties

Question

Adding additional properties to JSX components during typescript compilationIs there a way to include additional properties

Currently, I am employing JSX syntax in my TypeScript node.js project (without relying on React).

Within my tsconfig, I have specified my custom jsxFactory

{
  "compilerOptions": {
    ...
    "jsxFactory": "myJSXFactory",
    ...
  }
}

<MyBanner backgroundColor="red" />

Everything is functioning smoothly and the above JSX gets transformed to this post TSC compilation

myJSXFactory(MyBanner, {
  backgroundColor: 'red' 
});

At this juncture, I desire to append additional props to All JSX components at compile time, as shown below:

myJSXFactory(MyBanner, {
  backgroundColor: 'red',
  theme: myTheme // a variable accessible in the parent context
});

I delved into the Compiler API for guidance, but it's somewhat vague on how to edit the source during JSX transformation.

typescript jsx tsc

Answer 1

Answer №1

Solving the puzzle on my own...

import * as ts from "typescript";

type TYPESCRIPT = typeof ts;
function nodeVisitor(ts: TYPESCRIPT, ctx: ts.TransformationContext, sf: ts.SourceFile) {
  const visitor: ts.Visitor = (node) => {
      if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
          // Creating a theme attribute
          const themeAttr = ts.createPropertyAssignment(
              'theme',
              ts.createIdentifier('request.query.theme')
          )

          // Creating JSX Attribute __my_extra_prop={{ theme: request.query.theme }}
          const sourceJsxAttr = ts.createJsxAttribute(
              ts.createIdentifier('__my_extra_prop'),
              ts.createJsxExpression(undefined, ts.createObjectLiteral([themeAttr]))
          )
          const jsxAttributes = ts.createJsxAttributes([...node.attributes.properties, sourceJsxAttr])
          const clonedNode = ts.getMutableClone(node)
          clonedNode.attributes = jsxAttributes
          return clonedNode
      }
      return ts.visitEachChild(node, visitor, ctx)
  }
  return visitor
}

function transform(ts: TYPESCRIPT): ts.TransformerFactory<ts.SourceFile> {
  return (ctx) => (sf) => ts.visitNode(sf, nodeVisitor(ts, ctx, sf))
}

// JSX expression
const source = "<MyBanner backgroundColor='red' />";

const result = ts.transpileModule(source,
  {
    compilerOptions: {
      module: ts.ModuleKind.CommonJS,
      jsxFactory: "myJSXFactory",
      jsx: ts.JsxEmit.React
    },
    transformers: {
      before: [transform(ts)]
    }
  }
);

console.log(result.outputText);

https://repl.it>@ABMAdnan/TS-JSX-extra-props#index.ts

myJSXFactory(MyBanner, { backgroundColor: 'red', __my_extra_prop: { theme: request.query.theme } });

Answer 2

Solving the puzzle on my own...

import * as ts from "typescript";

type TYPESCRIPT = typeof ts;
function nodeVisitor(ts: TYPESCRIPT, ctx: ts.TransformationContext, sf: ts.SourceFile) {
  const visitor: ts.Visitor = (node) => {
      if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
          // Creating a theme attribute
          const themeAttr = ts.createPropertyAssignment(
              'theme',
              ts.createIdentifier('request.query.theme')
          )

          // Creating JSX Attribute __my_extra_prop={{ theme: request.query.theme }}
          const sourceJsxAttr = ts.createJsxAttribute(
              ts.createIdentifier('__my_extra_prop'),
              ts.createJsxExpression(undefined, ts.createObjectLiteral([themeAttr]))
          )
          const jsxAttributes = ts.createJsxAttributes([...node.attributes.properties, sourceJsxAttr])
          const clonedNode = ts.getMutableClone(node)
          clonedNode.attributes = jsxAttributes
          return clonedNode
      }
      return ts.visitEachChild(node, visitor, ctx)
  }
  return visitor
}

function transform(ts: TYPESCRIPT): ts.TransformerFactory<ts.SourceFile> {
  return (ctx) => (sf) => ts.visitNode(sf, nodeVisitor(ts, ctx, sf))
}

// JSX expression
const source = "<MyBanner backgroundColor='red' />";

const result = ts.transpileModule(source,
  {
    compilerOptions: {
      module: ts.ModuleKind.CommonJS,
      jsxFactory: "myJSXFactory",
      jsx: ts.JsxEmit.React
    },
    transformers: {
      before: [transform(ts)]
    }
  }
);

console.log(result.outputText);

https://repl.it>@ABMAdnan/TS-JSX-extra-props#index.ts

myJSXFactory(MyBanner, { backgroundColor: 'red', __my_extra_prop: { theme: request.query.theme } });

Adding additional properties to JSX components during typescript compilationIs there a way to include additional properties

Answer №1

Similar questions

Can someone explain to me how this ternary operator works?

How to retrieve the parent activated route in Angular 2

Error: The jasmine framework is unable to locate the window object

Having difficulty implementing a versatile helper using Typescript in a React application

Enhance the functionality of 'takeWhile' by incorporating a limit parameter, similar to how 'take' operates

Flow - secure actions to ensure type safety

What is the best way to preserve the state of a component in Angular?

In socket.io, the event occurs twice in a row

"Encountering an error stating 'SyntaxError: Unable to use import statement outside of a module' when attempting to import a module that itself imports another module for side

Anonymous function bundle where the imported namespace is undefined

The endpoint throws an error, yet the HTTP subscription fails to capture it

What is the mechanism behind Typescript interface scope? How can interfaces be defined globally in Typescript?

What is the best way to set up Storybook with Vue Cli 3?

Angular developers may encounter a dependency conflict while attempting to install ngx-cookie

Material UI Error TS1128: Expected declaration or statement for ButtonUnstyledProps

What benefits do Definitely Typed TypeScript files offer for Knockout and jQuery?

Exploring the power of Prosemirror with NextJS through Tiptap v2

How can I populate a mat-table in Angular 7 with data stored in an object?

Angular 7's URL updates, but no other actions take place

Is there a way to specifically call the last promise in a loop?