https://github.com/tanhauhau/madu

Writing jsx as if html string
https://github.com/tanhauhau/madu

Last synced: 21 days ago
JSON representation

Writing jsx as if html string

• Host: GitHub
• URL: https://github.com/tanhauhau/madu
• Owner: tanhauhau
• License: mit
• Created: 2018-12-25T08:43:23.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-01-15T07:59:45.000Z (almost 6 years ago)
• Last Synced: 2024-09-22T03:39:53.301Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 123 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Madu

> Note: this is not production ready.

Write `jsx` as if is `html` string.

## What is Madu?

With Madu, you can think of `jsx` as `html` string.

```jsx

const Madu = require('@lihautan/madu');

const html = (

  

    

      
Hello World!

    

  

);

// html = "
Hello World!
"

```


All you need to do is to add `"@lihautan/babel-transform-madu"` into your `.babelrc`;

```json

{

  "plugins": ["@lihautan/babel-transform-madu"]

}

```

The benefit of writing `jsx` is that, you can write `JavaScript` within it.

```jsx

const formula = (

  


    1 + 2 =

    {1 + 2}

  

);

// formula = "


//              1 + 2 =

//              3

//            
";

const list = (

  <>

    
Flower

    


      {['rose', 'tulips', 'lily'].map(flower => (

        
{flower}

      ))}

    

  >

);

// list = "
Flower

//         


//           
rose

//           
tulips

//           
lily

//         
"

```


Besides, with `jsx`, you can compose components, just like you would when writing React flavor applications

```jsx

function App() {

  return (

    

      

      

//   

//   


// ";

```


### Async mode

In async mode, `jsx` can be think of `Promise`

This allows you to fetch data in the component function.

```jsx

const { MaduAsync: Madu } = require('@lihautan/madu');

function MovieList({ movies }) {

  return (

    


      {movies.map(movie => (

        


          {movie.title}

          {movie.director}

        

      ))}

    

  );

}

async function App({ searchParam }) {

  // fetch list of movies

  const movies = await fetchMovies(searchParam);

  return ;

}


const app = require('express')();

app.get('/movies/search', async function(req, res) {

  res.send(await );

  // sends out

  // "


  //   


  //     AvengersAnthony Russo

  //   

  //   


  //     A star is bornBradley Cooper

  //   

  //   ...

  // 
"

});

```


## The Damu-Madu Project

The Damu-Madu sister project aims to bring the developer experience of writing JSX (XML in JavaScript) without having to use React.

JSX is independent of React, you don't have to use React just to use JSX in your development process.

The Damu-Madu sister project contains solution for both client render and server render:

- [madu](https://github.com/tanhauhau/madu) - Writing jsx as if html string

- [damu](https://github.com/tanhauhau/damu) - Converts jsx to vanilla javascript