https://github.com/mmis1000/litjsx

JSX compiler written with tagged templete literal
https://github.com/mmis1000/litjsx

Last synced: 9 days ago
JSON representation

JSX compiler written with tagged templete literal

• Host: GitHub
• URL: https://github.com/mmis1000/litjsx
• Owner: mmis1000
• License: mit
• Created: 2018-05-11T06:15:58.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-12-23T09:46:13.000Z (about 5 years ago)
• Last Synced: 2025-01-16T20:41:54.957Z (16 days ago)
• Language: JavaScript
• Homepage:
• Size: 57.6 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [WIP] litJSX

A 10kb(minified) only JSX compiler running in browser  

Write React without tool chains!

# Example

```js        

var res = litJSX.jsx(React, {Tag: Tag})`

    

`

ReactDOM.render(

    res,

    document.getElementById('root')

);

```

# API

```js

/**

 * @param {React} React

 * @param {Object} componenets the templete will try to create element as string directly if it is not registerd here

 * @returns {function} The templete literal function

 */

var jsx = litJSX.jsx(React, {Component1, Component1, ...other});

```

```js

/**

 * @param {string[]} templete

 * @param {...any} argumenets

 * @returns {Element} react element

 */

jsx;

```

# Basic Usage

```js

// it will return the element if there is only one root element

jsx`

    


`


// it will return a React.Fragment if there are more than one root element.

jsx`

    


    


`

```


# Supported Syntaxs

## common entities

```js

// it unesacpe only these entities in tag body and attribute value

jsx`

    


        &<>"' 

    

`

// you got &<>"'\u00A0 in both property and body

```

## self closed tag

```js

jsx`

    


`

```


## open tag

```js

jsx`

    
content

`

```


## text only (will be wrapped into a fragment)

```js

jsx`

    There is only text

`

```

## fragment (although there is no reason to use it. It is automatically wrapped if there is more than one element at root)

```js

jsx`

    <>

        There is only text

    >

`

```

## props

```js

jsx`

    


    


    


`

```


## data in body

```js

jsx`

    


        The data here can also be

        ${"text"}

        or

        ${jsx`another element`}

        or

        ${[jsx`array of elements`]}

        just like original jsx

    

`

```


## data in key (will be stringfied and concat to other part)

```js

jsx`

    


`

```


## only data in value (will not be stringfied)

```js

jsx`

    


`

```


## mixed data in value (will be stringfied and concat to other part)

```js

jsx`

    


`

```


## Object literal spread (will be mixed into the props by Object.assign)

```js

var ObjectToSpread = {key: "value"};

jsx`

    


`

```