# lsx-pug

> React plugin for LiveScript

Latest version **0.1.57** (published 2017-06-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install lsx-pug
pnpm add lsx-pug
yarn add lsx-pug
bun add lsx-pug
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.57 |
| Published | 2017-06-20 |
| First published | 2017-02-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | askucher |
| Maintainers | askucher |

## Links

- npm: https://www.npmjs.com/package/lsx-pug
- Repository: https://github.com/flyber-net/lsx-pug
- Homepage: https://github.com/flyber-net
- Issues: https://github.com/flyber-net/lsx-pug/issues
- npm.io page: https://npm.io/package/lsx-pug

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^15.6.1
- [react-dom](https://npm.io/package/react-dom.md) ^15.6.1

## Recent versions

- 0.1.57 (latest) — 2017-06-20
- 0.1.56 — 2017-06-20
- 0.1.55 — 2017-06-19
- 0.1.54 — 2017-06-19
- 0.1.53 — 2017-06-19
- 0.1.52 — 2017-06-19
- 0.1.51 — 2017-06-19
- 0.1.50 — 2017-06-19
- 0.1.49 — 2017-05-07
- 0.1.48 — 2017-05-06
- 0.1.47 — 2017-05-06
- 0.1.46 — 2017-05-06
- 0.1.45 — 2017-02-15
- 0.1.44 — 2017-02-15
- 0.1.43 — 2017-02-15
- … 40 more at https://npm.io/package/lsx-pug/versions

## README

### [lsx-pug - LiveScript Extension](https://github.com/flyber-net/lsx-pug)

![Logo](https://content.screencast.com/users/a.stegno/folders/Jing/media/1ddfab27-6d01-41c9-965d-30cef10675b6/00000147.png)
This is Pug/Jade like syntax library for React DOM written on LiveScript

### Please support this project (Goal $ 6k)

Wallet

1. BTC 19Uf4EjwXb2j2FvNvmgY3u7NtM7BYLmrR7
2. ETH 0x8d23C40C1703b99D0295b3277E4164cE3DAaF7b6
3. LTC LZFqabuJnk7VavgyTyKe8S9qqGVodbDkRe

### Example

```Livescript
{ render } = require \react-dom
{ create, div, a, p } = require \lsx-pug

main = create do
    render : ->
        div do
          a(href: \http://google.com 
            target: \blank) \hello
          p \world

window.onload = ->
    \app |> document.create-element |> document.body.append-child
    render do
        main ""
        \app |> document.query-selector
```



---------

### Installation

Have Node.js installed.

```Bash
npm i lsx-pug
```

### Usage

1 Import plugin 'lsx-pug'.

```Livescript
{ create, div, a, p } = require \lsx-pug
```

2 Create class and bind. (example:Main)

```Livescript
main = create do
    render : ->
        div do
            p \hello
            a(href: \http://google.com ) \world
```

3 Custom Element. (example:Main)

```Livescript
{ create, div, a, p, button } = require \lsx-pug

CustomElement = (on-click: on-click)->
    button(on-click: on-click)

main = create do
    render : ->
        div do
            CustomElement
            a(href: \http://google.com ) \world
```


4 Render.

```Livescript
{ render } = require \react-dom
render do
    main ""
    \app |> document.query-selector
```

---------
---------
---------



### More Examples

Object Oriented Programming

```Livescript
{ create, Component, div, a, p } = require \lsx-pug

main = create class Main extends Component
    render : ->
        div do
            a \hello
            p \world
```

Component

```Livescript


div \hello

# <div>hello</div>
```

Null Contents Component

```Livescript

div ""

# <div />
```

Nested Component

```Livescript
div do 
    p ""
    p \hello

# <div>
#     <p />
#     <p>hello</p>
# </div>
```

Set Properties and Style, etc..

```Livescript
div(test-prop : \test ,
    on-click : @test-func ,
    style : {height : 200  width : 200} ) \hello

# <div test-prop = "test"
#      onClick = {this.testFunc}
#      style = {
#          height:200
#          width:200
#      }>
#     hello
# <div>
```
Use Component and Set Prop-Types

```Livescript
{ create, type, div} = require \lsx-pug

test-component = create do

    prop-types =
        test-class : type.string

    get-default-props = ->
        test-class : \default

    render : ->
        div(class-name: @props.test-class) @props.children

main = create do

    render: ->
        div do
          test-component(test-class: \test ) \hello
```

Use If Condition

```Livescript

main = create do
    render : ->
        div(title: \title ) do 
            div [div 1, div 2]
            div do
              if 5 is 5  
                 div "conditional div"
              else 
                 div "never happended"
              div "next div"

```

Use Loops 

```Livescript 

main = create do

    render: ->
        div do
          for i in [1 to 5]
            div i

```

Limitations 

```Livescript 

#This syntax is not supported
 
div() 

#

div

#At least You need to add empty string 

div() "" 

#or 

div ""

#
#Perphaps, in next version, we are going to adjust React validations rules in order to make possible to write 
#

div 

div()


```

---
_Source: https://npm.io/package/lsx-pug · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._