Skip to content
🎨 A front-end JavaScript library for building user interfaces.
Branch: master
Clone or download
Latest commit b01ba8c Apr 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Delay template Apr 21, 2019
src Delay template Apr 21, 2019
.gitignore new version with better build in ts Mar 26, 2019
.npmignore new version with better build in ts Mar 26, 2019
LICENSE
MosaicLogo.png update readme Jan 21, 2019
README.md Update readme Apr 21, 2019
package.json
tsconfig.json

README.md

Mosaic logo

npm Downloads NPM

Mosaic

Mosaic is a declarative front-end JavaScript library for building user interfaces.

πŸ’  Component-Based: Mosaic components are reusable pieces of code that keep track of their own data, actions, lifecycle functions, and more.

⚑️ Observable Data: Mosaic uses Observables to keep track of changes to a component's data. This means that there is no need to call "setState" or anything like that, instead just change the data directly.

🧠 Smart DOM: Updates in Mosaic work by remembering which nodes are dynamic (i.e. subject to change) and traveling directly to those nodes to make changes, rather than traversing the tree again.

πŸ”€ Built-in Router: Comes with a basic, client-side router which allows data to be passed along to components.

🌐 State Manager: Comes with a built-in global state manager called Portfolio.

πŸ‘Œ Small Library Size: Mosaic is extremely small, with the minified JavaScript file being only 16.9KB.

πŸ”– Tagged Template Literals: Views are written using tagged template literals, which means there is no need for a compiler:

const name = "Mosaic";
html`<h1>Welcome to ${name}!</h1>`

Installation

The easiest way to use Mosaic is to first install the npm package by using:

npm install --save @authman2/mosaic

or with a script tag.

<script src='https://unpkg.com/@authman2/mosaic@latest/dist/index.js'></script>

(Optional) For fast builds and hot reloading, install the build tool "Parcel." This is not required, though, as Mosaic uses built-in JavaScript features. This means that no build tool is required, but any may be used if it helps the overall project structure.

npm install --save-dev parcel-bundler

Now you are ready to use Mosaic!

Example

Here is an example of a simple Mosaic application. All you need is an index.html file and an index.js file. For a more detailed example, run the project inside the "example" folder.

index.html:

<html>
  <head>
    <title>My Mosaic App</title>
  </head>
    
  <div id='root'></div>

  <script src='https://unpkg.com/@authman2/mosaic@latest/dist/index.js'></script>
  <script type="text/javascript" src='./index.js'></script>
</html>

index.js:

// Import Mosaic
import Mosaic from '@authman2/mosaic';

// Create a label component. Data is not defined yet,
// however, it will be injected later on.
const Label = new Mosaic({
    view: function() {
        return html`<div>
            <h2>${ this.data.text }</h2>
            <p>This is a custom label component!</p>
        </div>`;
    }
});

// Create an app component.
const app = new Mosaic({
    element: '#root',
    data: {
        title: "Mosaic App"
    },
    actions: {
        sayHello: function() {
            console.log("Hello World!!");
            console.log("This component is ", this);
        }
    },
    view: function() {
        return html`<div>
            <h1>This is a ${this.data.title}!</h1>
            <p>Click below to print a message!</p>
            <button onclick="${this.actions.sayHello}">Click Here</button>

            ${ Label.new({ text: "Welcome to Mosaic!" }) }
        </div>`;
    }
});

// Paint the Mosaic onto the page.
app.paint();

Author

  • Year: 2019
  • Programmer: Adeola Uthman
  • Languages/Tools: JavaScript, TypeScript, Parcel
You can’t perform that action at this time.