Package Exports

modjool

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (modjool) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Documentation

Full guide & documentation available at the Modjool Docs website.

Latest update

v1.1 - Added findSlot instance param, enabling easy creation of headless components.

Introduction

Modjool is a lightweight JavaScript framework for creating user interface libraries and simple web components. It's ideal for creating UI libraries and simple reusable components, by allowing for easy creation of native custom elements.

Overview of features

Simplicity - simplify away classes, styling, multiple HTML tags, into one custom element
HTML templates - use attributes, slots, dynamic content & more
CSS templates - with scoped CSS, and all the above
Lifecycle events - run JS at different points in an element's lifecycle
Reactive data - body updates when the data changes
Pairs up - combine with CSS libraries, such as Tailwind, Bulma, Bootstrap

Code example

modjool.create({
  tag: 'like-button',

  js: ({ attr, elem }) => {
    elem.onclick = () => attr.likes++    
  },

  html: ({ attr, slot }) => `
    <button>
      ${slot} • <b>${attr.likes}</b>
    </button>
  `
})

<like-button likes="641">Like me!</like-button>

Try <like-button> on CodeSandbox:

Guide and API available at the Modjool Docs website.

modjool