embroidery
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.3 • Public • Published

    Embroidery

    npm bundle size npm version

    Note! This library is just an experiment and not intended for production use (yet).

    Install

    yarn add embroidery
    or
    npm i embroidery
     

    Usage

    Add controller, target and action attributes to your HTML

    <!-- HTML somewhere in your web app -->
    <div data-controller="myController">
      <input data-target="name" type="text" />
     
      <button data-action="click->greet">Greet</button>
     
      <span data-target="output"></span>
    </div>

    Create a controller in javascript.

    // my-controller.js
    const myController = {
      greet({ name, output }) {
        output.textContent = name.value
      },
    }

    Register your controller in your main javascript file.

    import { Embroidery } from 'embroidery'
    import { myController } from 'my-controller'
    let app = Embroidery.start()
    app.register({ myController })

    Partials

    Add a partial (async external html). This is good for inserting remote fragments into your HTML to keep page loads fast.

    <div data-partial="/endpoint-that-returns-html"></div>

    Actions

    Default actions

    Some elements have default actions, which means you don't have to specify click, submit etc. For example:

    // Before
      <button data-action="click->hello">Hello</button>
    // After
      <button data-action="hello">Hello</button>
    Element Event
    a 'click'
    button 'click'
    form 'submit'
    input 'input'
    select 'change'
    textarea 'input'

    Multiple actions

    If you want to have multiple actions you can separate them with a blank space.

    <div data-controller="manyActions">
      <div data-action="mouseover->doThis mouseout->doThat">Do this or that</div>
    </div>

    Targets

    Multiple targets

    If you have multiple targets you need to add [] to access them as an array in your controller. The array will be appended with <name>Targets.

    <div>
      <div data-target="hello[]">Hello to you</div>
      <div data-target="hello[]">Hello to me</div>
      <div data-target="hello[]">Hello to everyone</div>
    </div>
    // hello-controller.js
    const helloController = {
      init({ helloTargets }) {
        helloTargets.forEach((target) => {
          //...
        })
      },
    }

    Keywords

    none

    Install

    npm i embroidery

    DownloadsWeekly Downloads

    5

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    112 kB

    Total Files

    47

    Last publish

    Collaborators

    • antonnyman