Wondering what’s next for npm?Check out our public roadmap! »

    brue

    2.0.5 • Public • Published

    Brue

    Brue allows you to express Vue templating in 100% vanilla javascript resulting in more concise components. Brue componants are indistinguishable from Vue componants and can be used interchangably. Now re-written specifically for Vue 3.x.

    Quick comparison

    with Brue:

    import Brue from 'brue';
    import { reactive } from 'vue';
    import CustomComponent from './CustomComponent.vue'
     
    export default Brue('incomingProp', props => {
      const state = reactive({
        double: props.incomingProp * 2
      })
      const doClick = () => console.log('click');
      return $ => { $
        .a('div .example')
          .b('h1').text('Twice as much')
          .b(CustomComponent, { customProp: true })
          .b('div .link').text(state.double)
            .click(doClick)
      }
    });

    with Vue:

    <template>
      <div class="example">
        <h1>Twice as much</h1>
        <custom-component :customProp="true" />
        <div class="link" @click="doClick">
          {{ state.double }}
        </div>
      </div>
    </template>
    <script>
    import { reactive } from 'vue';
    import CustomComponent from './CustomComponent.vue'
     
    export default {
      props: ['incomingProp'],
      components: { 
        CustomComponent
      },
      setup(props){
        const state = reactive({
          double: props.incomingProp * 2
        })
        const doClick = () => console.log('click');
        return {
          state,
          doClick
        }
      }
    }
    </script> 

    Creating components

    Brue() accepts the component properties followed by the setup function. The property names can be spread across the arguments or as a single object or array - Brue expects the setup function to be the last argument. If a property is not specified it will be treated like an HTML attribute.

    //Any of these work...
    Brue('prop1','prop2', props => {
     
    });
    Brue(['prop1','prop2'], (props, context) => {
     
    });
    Brue(
      { 
          prop1: String, 
          prop2: Number 
      },
      (props, { slots, attrs, emit}) => {
          // ...
      }
    );
     

    Tree builder - $

    The component function passed to Brue needs to return a render function. The first argument of the render function (the tree builder variable $) is used to construct the virtual DOM node tree. Every $ function returns $, allowing for continuous chaining. The chain can be suspended to perform loops or execute javascript and then reestablished with $. E.g.

    $ => { $
      .a('ul')
      users.map(user => { $
        .b('li').key(user.id)
          .c('span').text(user.name)
      });
    }

    Defining nodes

    .a(), .b(), .c(), etc. (through z) are used to establish a new node (html tag or component), and establish the child-parent relationship. c nodes are children of b nodes, etc.

    Strings

    Strings passed into nodes as arguments can define the element type, class, and/or id of the node:

    • no prefix indicates the element type
    • . prefix indicates a class
    • # prefix indicates the id
    $
    .a('div')
      .b('h1 .headerClass #homeHeader').text('Home')
    //same as
    .a('div')
      .b('h1','#homeHeader', {class: 'headerClass'}).text('Home')

    Objects

    Objects passed into nodes as arguments will define properties and/or attributes. There's no need to use v-bind - variables and values can be used directly. Note Since Vue components are objects: if the first argument is an object, Brue will assume you're defining the node type as a vue component.

    $
    .a('div')
      .b(MyComponent, {someProp: true, title: 'Example attribute'})

    Node modifiers

    Node modifiers are $ functions that can further define characteristics of a node. Any non-alphabet $ function will always modify the last established node.

    $
    .a('div')
      .style({fontSize: '14px'})
      .on('click', doSomething)

    Text

    Text nodes can be defined a number of ways:

    // all equivalent:
    $.a('div').text('')
     
    $.a('div')
      .b().text('Hello')
     
    $.a('div')
      .b(String, 'Hello')

    The .b(String, 'Hello') format can make it a little easier to express inline tags (not a Brue strong point):

    // <div>Inline <em>tags</em> are a bit verbose</div>
    $
    .a('div')
      .b(String, 'Inline ')
      .b('em').text('tags')
      .b(String, ' are a bit verbose')

    $ API

    More to come.

    .class({})

    Assign classes to the node based on boolean values. The equivalent of v-bind:class.

    .a('div .mynode').class({
        active: true,
        deleted: false
    })
    // <div class="mynode active"></div>

    .html(str)

    Set the contents of the node to pre formatted html. Equivalent to innerHTML. Any inner children or text nodes will be igonored.

    .key()

    Within a loop specify a unique key to optimize rendering. Vue docs: Maintaining State

    .on()

    Add an event listener to the node. Accepts either a single listener or an object of listeners. In addition, event modifiers can be added as suffixes (event.mod) or as optional arguments. Some examples:

    $.a('div')
      .on('click', doClick)
    //
    $.a('div')
      .on({
        'focus': () => console.log('focus'),
        'keydown.ctrl': onCtrlKey
      })
    //
    $.a('div')
      .on('contextmenu', rightClickFunc, 'prevent','stop')

    Modifiers:

    events mouse key values key mods
    stop
    prevent
    capture
    self
    once
    passive
    left
    right
    middle
    enter
    tab
    delete
    esc
    space
    up
    down
    left
    right
    ctrl
    alt
    shift
    meta
    exact

    .ref()

    Assign a reference to the element. Vue docs: Refs

    .style({})

    Assign styles to the node. The equivalent of v-bind:style.

    .a('.mynode').style({
        color: 'red',
        fontSize: '14px'
    })

    .text(str)

    Sets the inner text of the node: .a('p').text('Hello') creates <p>Hello</p>. If the node has any other children, the text will be inserted after the children. Alternatively, use String as the first argument of a node: .a('p').b(String, 'Hello')

    Keywords

    none

    Install

    npm i brue

    DownloadsWeekly Downloads

    20

    Version

    2.0.5

    License

    ISC

    Unpacked Size

    34.7 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar