linee v1.0.7

LINEE

Micro component definition.

Install

$ npm install linee

Component Structure

📂 comp
├─── 📄 comp.export.js
├─── 📄 comp.render.js
├─── 📄 comp.script.js
├─── 📄 comp.css
└─── 📄 comp.spec.js

📄 component.export.js

Export the component files.

const ln = require('linee')

module.exports = ln.getComponent({
  render: './comp/comp.render',
  style: './comp/comp.css'
})

📄 component.render.js

Define the component markup.

const render = name => `
  <h1 class='comp'> ${name} </h1>
`

module.exports = render

📄 component.script.js

Define the component behavior.

const $ = require('jquery-slim')

$('.comp').on('click', e => {
    console.log('my first component!')
})

📄 component.css

/*==========================================================================
  comp
  ==========================================================================*/

.comp{
  color: white;
  background: black
}

Usage

📄 app.js

const comp = require('./components/comp.export.js')

comp('first')
comp('second')

👇

/*
<style>
.comp{
  color: white;
  background: black
}
</style>
<h1 class='comp'> first </h1>
<h1 class='comp'> second </h1>
*/

API

getComponent({renderPath, stylePath}) ⟶ string

get and format a component.

const ln = require('linee')

ln.getComponent({
  render: './comp/comp.render',
  style: './comp/comp.css'
})

// get a component with multiple styles

ln.getComponent({
  render: './comp/comp.render',
  style: [
    './comp/comp1.css',
    './comp/comp2.css',
    './comp/comp3.css'
  ]
})

getStyle(path || [path]) ⟶ string

get and formats style files to work inline.

const ln = require('linee')

ln.getStyle('./com/comp.css')

//get multiple style files.

ln.getStyle([
  './com/comp1.css',
  './com/comp2.css',
  './com/comp3.css'
])

getScript(path || [path]) ⟶ string

get and formats style files to work inline.

const ln = require('linee')

ln.getScript('./com/comp.script.js')

//get multiple script files.

ln.getScript([
  './com/comp1.script.js',
  './com/comp2.script.js',
  './com/comp3.script.js'
])

minHTML(code) ⟶ string

minify html code.

const ln = require('linee')

ln.minHTML('<h1> Hello, world! </h1>')

Licensed under the ISC License 2018 - C4co