Nocturnal Programmer's Machine

    naiv

    0.0.1-1 • Public • Published

    naiv

    Naive implementation of a template library

    npm: npm i -S naiv

    observable

    import { observable } from 'naiv'
     
    const o = observable()
    console.log(o()) // undefined
     
    o('hello world')
    console.log(o()) // hello world

    watch

    import { observable, watch } from 'naiv'
     
    const o = observable()
    watch(() => console.log(o())) // undefined
     
    o('hello world') // hello world
    import { observable, watch } from 'naiv'
     
    const o = observable(0)
    watch(() => {
      console.log(o())
      if (o() < 10)
        o(o() + 1)
    })
     
    // 0
    // 1
    // ...
    // 10

    template

    import { html } from 'naiv'
     
    document.body.append(html`<span>hello world</span>`)
    import { observable, html } from 'naiv'
     
    const Component = () => {
      const attr = 'attr'
      const text = observable('text')
      const nested = html`<div>nested</div>`
      
      return html`
        <div attr=${attr}>
          <span>${text}</span>
          ${nested}
        </div>`
    }
     
    console.log(Component())
    // <div attr=attr>
    //   <span>text</span>
    //   <div>nested</div>
    // </div>
    import { observable, html } from 'naiv'
     
    const o = observable(0)
    const e = html`
      <div>
        ${o}
        ${o() + 1}
        ${() => o() + 1}
      </div>
    `
    console.log(e)
    // <div>
    //   0
    //   1
    //   1
    // </div>
     
    o(1)
    console.log(e)
    // <div>
    //   1
    //   1
    //   2
    // </div>

    map

    import { observable, html, map } from 'naiv'
     
    const o = observable(['a', 'b', 'c'])
    const e = map(
      o, // array observable
      html`<ul></ul>`, // root element
      (value, index) => value, // key function
      (value, index) => html`<li>${value} - ${index}</li>`
    )
    console.log(e)
    // <ul>
    //   <li>a - 0</li>
    //   <li>b - 1</li>
    //   <li>c - 2</li>
    // </ul>
     
    o(['a', 'c'])
    console.log(e)
    // <ul>
    //   <li>a - 0</li>
    //   <li>c - 1</li>
    // </ul>

    Inspiration

    This is just a hobby practical project outside of school I do in my freetime. Got inspired a lot after reading Ryan Solid's article about reactivity, and seeing Sinuous template syntax. Learned a lot from them, big thanks.

    Install

    npm i naiv

    DownloadsWeekly Downloads

    0

    Version

    0.0.1-1

    License

    MIT

    Unpacked Size

    56.2 kB

    Total Files

    17

    Last publish

    Collaborators

    • pynnl