{"id":14990384,"url":"https://github.com/authman2/mosaic","last_synced_at":"2025-04-06T02:07:16.257Z","repository":{"id":57099806,"uuid":"164148865","full_name":"Authman2/Mosaic","owner":"Authman2","description":"🎨 A front-end JavaScript library for building user interfaces!","archived":false,"fork":false,"pushed_at":"2021-12-01T23:55:49.000Z","size":782,"stargazers_count":385,"open_issues_count":0,"forks_count":11,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-06T02:04:33.785Z","etag":null,"topics":["components","front-end","javascript","ui","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Authman2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-04T19:52:24.000Z","updated_at":"2024-10-29T06:07:52.000Z","dependencies_parsed_at":"2022-08-22T23:10:38.498Z","dependency_job_id":null,"html_url":"https://github.com/Authman2/Mosaic","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Authman2%2FMosaic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Authman2%2FMosaic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Authman2%2FMosaic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Authman2%2FMosaic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Authman2","download_url":"https://codeload.github.com/Authman2/Mosaic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247423513,"owners_count":20936626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","front-end","javascript","ui","webcomponents"],"created_at":"2024-09-24T14:20:01.178Z","updated_at":"2025-04-06T02:07:16.239Z","avatar_url":"https://github.com/Authman2.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://mosaicjs.netlify.app/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg width=\"100\" height=\"100\" src=\"./MosaicLogo.png\" alt=\"Mosaic logo\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n   \u003ca href=\"https://www.npmjs.com/package/mosaic-framework\"\u003e\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/mosaic-framework.svg?color=#41bb18\"\u003e\u003c/a\u003e\n   \u003ca href=\"https://npmcharts.com/compare/mosaic-framework?minimal=true\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/mosaic-framework.svg?color=seagreen\" alt=\"Downloads\"\u003e\u003c/a\u003e\n   \u003cimg alt=\"NPM\" src=\"https://img.shields.io/npm/l/mosaic-framework.svg?color=blue\"\u003e\n\u003c/p\u003e\n\n# \u003ca target='_blank' rel='noopener noreferrer' href='https://mosaicjs.netlify.app/'\u003eMosaic\u003c/a\u003e\nMosaic is a declarative front-end JavaScript library for building user interfaces!\n\n💠 **(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.\n\n⚡️ **Observable Data**: Mosaic uses Observables to keep track of changes to a component's data. This means \nthat there is no need to call \"setState\" or anything like that to update a component - instead just change the data directly.\n\n🧠 **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.\n\n🔀 **Built-in Router**: Comes with a basic, client-side router which allows Mosaic components to be used as separate pages.\n\n🌐 **State Manager**: Comes with a built-in global state manager called *Portfolio*.\n\n👌 **Lightweight**: The minified Mosaic library comes in at a size of 28KB.\n\n🔖 **Tagged Template Literals**: Views are written using tagged template literals, which means there is no need for a compiler:\n```javascript\nconst name = \"Mosaic\";\nhtml`\u003ch1\u003eWelcome to ${name}!\u003c/h1\u003e`\n```\n\n## Demo\nHere is an example of a simple Mosaic application. All you need is an index.html file and an index.js file.\nFor a more detailed example, run the project inside the \"example\" folder.\n\n**index.html**:\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eMy Mosaic App\u003c/title\u003e\n  \u003c/head\u003e\n    \n  \u003cdiv id='root'\u003e\u003c/div\u003e\n\n  \u003cscript src='https://unpkg.com/mosaic-framework@latest/dist/index.js'\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src='./index.js'\u003e\u003c/script\u003e\n\u003c/html\u003e\n```\n**index.js**:\n```js\n// Import Mosaic\nimport Mosaic, { html } from 'mosaic-framework';\n\n// Create components\nMosaic({\n    name: 'my-label',\n    data: {\n        text: ''\n    },\n    view: self =\u003e {\n        return html`\n            \u003ch2\u003e${ self.data.text }\u003c/h2\u003e\n            \u003cp\u003eThis is a custom label component!\u003c/p\u003e\n            ${self.descendants}\n        `;\n    }\n});\nconst app = Mosaic({\n    name: 'my-app',\n    element: 'root',\n    data: {\n        title: \"Mosaic App\"\n    },\n    sayHello: function() {\n        console.log(\"Hello World!!\");\n        console.log(\"This component is \", this);\n    },\n    view: function() {\n        return html`\n            \u003ch1\u003eThis is a ${this.data.title}!\u003c/h1\u003e\n            \u003cp\u003eClick below to print a message!\u003c/p\u003e\n            \u003cbutton onclick=\"${this.sayHello}\"\u003eClick Me!\u003c/button\u003e\n\n            \u003cmy-label text='Welcome to Mosaic!'\u003e\n                Awesome, right?\n            \u003c/my-label\u003e\n        `;\n    }\n});\n\n// Paint the Mosaic onto the page.\napp.paint();\n```\n\n## Installation\nThe easiest way to use Mosaic is to first install the npm package by using:\n```shell\nnpm install --save mosaic-framework\n```\n```shell\nyarn add mosaic-framework --save\n```\nor with a script tag.\n```html\n\u003cscript src='https://unpkg.com/mosaic-framework@latest/dist/index.js'\u003e\u003c/script\u003e\n```\n**(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.\n```shell\nnpm install --save-dev parcel-bundler\n```\nNow you are ready to use Mosaic!\n\n# Author\n- Year: 2019\n- Programmer: Adeola Uthman\n- Languages/Tools: JavaScript, TypeScript, Parcel\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauthman2%2Fmosaic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fauthman2%2Fmosaic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fauthman2%2Fmosaic/lists"}