seltzer-components v0.1.9

Seltzer Components

Design system thinking to vanilla javascript. Componentize and scope your javascript.

Mission Statement

Not all projects right for react, vue, or insert new framework. Seltzer Components aims to systematize your interactive components across projects

Getting Started

There are two steps to using Seltzer components.

• The component(s) themselves
• The hydration loop to initalize the components

The Seltzer Component

Seltzer components are javascript class based that extend the BaseComponent class from the seltzer-components module. Heres an example file of a seltzer-component.

import BaseComponent from './core/BaseComponent'

class SampleComponent extends BaseComponent {}

Simple as that!

To help facilitate use with javascript and html binding, there is a single special initialize function in every component that you should use to initialzie any component functionality within. This function will be called during the hydragion loop. (called once within the scope of each component)

For Example

import BaseComponent from './core/BaseComponent'

class SampleComponent extends BaseComponent {
    doStuff() {
        // stuff here
    }
    moreStuff() {
        // more stuff herre
    }
    init() {
        // named function init() is called during the loop
        console.log('component initialized')
        this.doStuff()
        this.moreStuff()
    }
}

Export these components into an object and movve on to the hydration loop.

// All your components
import SampleComponent from './components/SampleComponent'
import SampleComponent2 from './components/SampleComponent2'
import SampleComponent2 from './components/SampleComponent3'

// export them into an object of key value pairs - in this example im using the keys and values as the same
// these will be bound to html data attributes
export default {
    SampleComponent,
    SampleComponent2,
    SampleComponent3,
}

Within your html you can scope seltzer components by using data-html attributes for example:

<div data-component="SampleComponent">
    this is scoped to an instance of SampleComponent
</div>

During the Hydration Loop These html partials will be bound to an instance of the javascript class.

The Hydration Loop

Now that you have an object of component imports pass that to the seltzerHydrate function

import seltzerHydrate from 'seltzer-components'
import SampleComponent from './components/SampleComponent'
import SampleComponent2 from './components/SampleComponent2'
import SampleComponent2 from './components/SampleComponent3'

const components = {
    SampleComponent,
    SampleComponent2,
    SampleComponent3,
}

seltzerHydrate(components) // this calls init on every class! - ALL DONE!

Seltzer COmponents