https://github.com/Authman2/Mosaic

🎨 A front-end JavaScript library for building user interfaces!
https://github.com/Authman2/Mosaic

components front-end javascript ui webcomponents

Last synced: 3 months ago
JSON representation

🎨 A front-end JavaScript library for building user interfaces!

• Host: GitHub
• URL: https://github.com/Authman2/Mosaic
• Owner: Authman2
• License: mit
• Created: 2019-01-04T19:52:24.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2021-12-01T23:55:49.000Z (almost 3 years ago)
• Last Synced: 2024-07-10T20:54:19.688Z (4 months ago)
• Topics: components, front-end, javascript, ui, webcomponents
• Language: TypeScript
• Homepage:
• Size: 764 KB
• Stars: 385
• Watchers: 7
• Forks: 11
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        




   

   

   



# Mosaic

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

💠 **(Web) Component-Based**: Mosaic uses the Custom Elements API to create web components that can keep track of their own data, actions, and more, and can be included in other components to create front-end web applications.

⚡️ **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 to update a component - 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 Mosaic components to be used as separate pages.

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

👌 **Lightweight**: The minified Mosaic library comes in at a size of 28KB.

🔖 **Tagged Template Literals**: Views are written using tagged template literals, which means there is no need for a compiler:

```javascript

const name = "Mosaic";

html`
Welcome to ${name}!
`

```


## Demo

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

  

    My Mosaic App

  

    

  


  

  

```

**index.js**:

```js

// Import Mosaic

import Mosaic, { html } from 'mosaic-framework';

// Create components

Mosaic({

    name: 'my-label',

    data: {

        text: ''

    },

    view: self => {

        return html`

            
${ self.data.text }

            
This is a custom label component!

            ${self.descendants}

        `;

    }

});

const app = Mosaic({

    name: 'my-app',

    element: 'root',

    data: {

        title: "Mosaic App"

    },

    sayHello: function() {

        console.log("Hello World!!");

        console.log("This component is ", this);

    },

    view: function() {

        return html`

            
This is a ${this.data.title}!

            
Click below to print a message!

            Click Me!


            

                Awesome, right?

            

        `;

    }

});

// Paint the Mosaic onto the page.

app.paint();

```

## Installation

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

```shell

npm install --save mosaic-framework

```

```shell

yarn add mosaic-framework --save

```

or with a script tag.

```html

```

**(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.

```shell

npm install --save-dev parcel-bundler

```

Now you are ready to use Mosaic!

# Author

- Year: 2019

- Programmer: Adeola Uthman

- Languages/Tools: JavaScript, TypeScript, Parcel