https://github.com/tomerigal/babel-plugin-transform-redom-jsx

Babel plugin for RE:DOM jsx
https://github.com/tomerigal/babel-plugin-transform-redom-jsx

Last synced: 3 months ago
JSON representation

Babel plugin for RE:DOM jsx

• Host: GitHub
• URL: https://github.com/tomerigal/babel-plugin-transform-redom-jsx
• Owner: tomerigal
• License: mit
• Created: 2016-11-19T13:46:20.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2024-10-10T16:28:11.000Z (4 months ago)
• Last Synced: 2024-10-22T07:50:27.198Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 299 KB
• Stars: 20
• Watchers: 1
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - babel-plugin-transform-redom-jsx - Babel plugin for RE:DOM jsx (JavaScript)

README

        
# babel-plugin-transform-redom-jsx

[![Build Status](https://github.com/tomerigal/babel-plugin-transform-redom-jsx/workflows/tests/badge.svg)](https://github.com/tomerigal/babel-plugin-transform-redom-jsx/actions)

[![npm version](https://badge.fury.io/js/babel-plugin-transform-redom-jsx.svg)](https://badge.fury.io/js/babel-plugin-transform-redom-jsx)

## Installation

```bash

npm install babel-plugin-transform-redom-jsx --save-dev

```

## Usage

### Babel config:

```json

{

  "plugins": [

    "babel-plugin-transform-redom-jsx",

    [

      "transform-react-jsx",

      {

        "pragma": "el"

      }

    ]

  ]

}

```

### Component

The plugin transpiles the following JSX:

```jsx

import { el, text, mount } from "redom";

class A {

  constructor(attr, text) {

    


      
{attr.title}

      Hello {text}

    
;

  }

  update() {

    this.span.textContent = "Hi";

  }

}


class B {

  constructor() {

    


      

        World

      

    
;

  }

  update() {

    this.span.textContent = "You";

    this.a.update();

  }

}


const b = ;

mount(document.body, b);

b.update();

```

To the following JavaScript:

```js

import { el, text, mount } from "redom";

class A {

  constructor(attr, text) {

    this["el"] = el(

      "div",

      null,

      el("h3", null, attr.title),

      (this["span"] = el("span", null, "Hello")),

      " ",

      text

    );

  }

  update() {

    this.span.textContent = "Hi";

  }

}

class B {

  constructor() {

    this["el"] = el(

      "div",

      null,

      (this["a"] = new A(

        { title: "Hello World example" },

        (this["span"] = el("span", null, "World"))

      ))

    );

  }

  update() {

    this.span.textContent = "You";

    this.a.update();

  }

}

const b = new B({});

mount(document.body, b);

b.update();

```

### Assign to this

The plugin transpiles the following JSX:

```jsx

import { el, mount } from "redom";

// define Login component

class Login {

  constructor() {

     {

        e.preventDefault();

        const email = this.email.value;

        const pass = this.pass.value;

        console.log(email, pass);

      }}

    >

      

      

      Sign in

    ;

  }

}

// mount to DOM

mount(document.body, );

```

To the following JavaScript:

```js

import { el, mount } from "redom";

// define Login component

class Login {

  constructor() {

    this["el"] = el(

      "form",

      {

        id: "login",

        onsubmit: (e) => {

          e.preventDefault();

          const email = this.email.value;

          const pass = this.pass.value;

          console.log(email, pass);

        },

      },

      (this["email"] = el("input", { type: "email", class: "email" })),

      (this["pass"] = el("input", { type: "password", class: "pass" })),

      el("button", { type: "submit" }, "Sign in")

    );

  }

}

// mount to DOM

mount(document.body, new Login());

```