https://github.com/desdaemon/swc-plugin-static-jsx

SWC plugin to transform JSX calls to static templates
https://github.com/desdaemon/swc-plugin-static-jsx

jsx swc-plugin templating

Last synced: about 2 months ago
JSON representation

SWC plugin to transform JSX calls to static templates

• Host: GitHub
• URL: https://github.com/desdaemon/swc-plugin-static-jsx
• Owner: Desdaemon
• License: apache-2.0
• Created: 2023-07-24T04:48:44.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-18T02:24:10.000Z (over 1 year ago)
• Last Synced: 2024-04-22T13:41:16.733Z (9 months ago)
• Topics: jsx, swc-plugin, templating
• Language: Rust
• Homepage:
• Size: 112 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# swc-plugin-static-jsx

[![npm](https://img.shields.io/npm/v/swc-plugin-static-jsx)](https://www.npmjs.com/package/swc-plugin-static-jsx)

[![Rust](https://github.com/Desdaemon/swc-plugin-static-jsx/actions/workflows/rust.yml/badge.svg)](https://github.com/Desdaemon/swc-plugin-static-jsx/actions/workflows/rust.yml)

[![Node.js E2E](https://github.com/Desdaemon/swc-plugin-static-jsx/actions/workflows/e2e.yml/badge.svg)](https://github.com/Desdaemon/swc-plugin-static-jsx/actions/workflows/e2e.yml)

SWC plugin to transform JSX calls to static templates

## Install

```shell

npm i -D @swc/core swc-plugin-static-jsx

```

### From source

```shell

git clone https://github.com/Desdaemon/swc-plugin-static-jsx

cd swc-plugin-static-jsx

rustup target add wasm32-wasi

npm run dist

npm link

```

## Usage

```jsonc

// In .swcrc:

{

  "jsc": {

    "experimental": {

      "plugins": [

        // All config values are optional.

        [

          "swc-plugin-static-jsx",

          {

            // If an identifier is supplied, it should not be an ambient global. Can be null.

            "template": "String.raw",

            // If supplied, template will be imported as `import { template } from 'my-library'`

            "importSource": "my-library",

            "spread": "$$spread",

            "child": "$$child",

            "children": "$$children"

          }

        ]

      ]

    }

  }

}

```

In your tsconfig.json, `compilerOptions.jsx` should be set to 'preserve'. You will also need to

provide your own JSX-related types under `namespace JSX`.

## Sample

```jsx

let unsanitized = 'alert("You\'ve been pwned!")';

// input

function MyComponent() {

  return (

    


      The quick brown fox jumps over the lazy dog.

      {unsanitized}

      {...children}

    

  );

}


// output (approximate)

function MyComponent() {

  return html`


    The quick brown fox jumps over thelazydog. ${{

      $$child: unsanitized,

    }} ${{ $$children: children }}

  
`;

}

```


Sample implementation of `html`:

```tsx

function html(raw, ...children: Record[]) {

  all: for (const child of children) {

    if ("$$spread" in child) {

      // ..

      continue all;

    }

    if ("$$child" in child) {

      // ..

      continue all;

    }

    if ("$$children" in child) {

      // ..

      continue all;

    }

    // ..

  }

}

```

## License

SPDX Identifier: `MIT OR Apache-2`