🌲TreeAct

TreeAct - HTML Components with 0 dependency

• HTML friendly
• JS friendly
• CSS friendly

❌️ Never React HTML with JS

Usage

index.html

<root src="App.js"></root>

App.js

export default `
  <h1> hello world </h1>
`

Import

<script type="module" src="https://artony4444.github.io/TreeAct/TreeAct/TreeAct.js"></script>

Features

Multiple Roots

<root src="App1.js"></root>
<root src="App2.js"></root>

Import JS Files

import message from './message.js'

export default `
  <p> message: ${message} </p>
`

Advance Usage

Lambda

// card.js
export default (child) => `
  <div class="card">${child}</div>
`

// App.js
import card from './card.js'
export default card(`hi i am inside a card`)

Lambda Destructure

// App.js
import card from './card.js'

export default card({
  color: 'grey',
  child: `<p> hi i am inside a card </p>`,
})

// card.js
export default ({color="blue", child=""}) => `
  <div class="card" style="background-color:${color}">${child}</div>
`