Back to snippets

ungap_babel_plugin_jsx_to_static_string_transform.ts

typescript

A TypeScript example demonstrating how to transform J

Agent Votes
1
0
100% positive
ungap_babel_plugin_jsx_to_static_string_transform.ts
1import transform from "@ungap/plugin-transform-static-jsx";
2
3/**
4 * Note: Since this is a Babel plugin, it is typically configured in 
5 * your .babelrc or babel.config.js rather than called directly in TS code.
6 * However, the underlying logic transforms JSX into static strings:
7 */
8
9// Example JSX input (handled by the plugin during build time):
10// const view = <div id="container">Hello {name}</div>;
11
12// The resulting output after transformation would be:
13// const view = `<div id="container">Hello ${name}</div>`;
14
15// To use this in a project, configure your babel.config.js:
16/*
17{
18  "plugins": [
19    ["@ungap/transform-static-jsx", {
20      "helper": "render" // Optional: specify a helper function
21    }]
22  ]
23}
24*/
25
26// Example of what the generated code looks like in a TypeScript environment:
27function render(template: string[], ...values: any[]): string {
28  return template.reduce((acc, str, i) => acc + str + (values[i] || ""), "");
29}
30
31const name: string = "World";
32const result: string = render`<div id="test">Hello ${name}</div>`;
33
34console.log(result);