{"id":23055661,"url":"https://github.com/intellisrc/m2d2","last_synced_at":"2025-08-15T05:32:21.224Z","repository":{"id":42510582,"uuid":"160897424","full_name":"Intellisrc/m2d2","owner":"Intellisrc","description":"M2D2 JS (Model to DOM 2) A class to easily place data in DOM and update them immediately upon change. This is my second version of \"Model\", that is why I named it M2D2. Also, for those Start Wars fans, it is also kind of a joke.","archived":false,"fork":false,"pushed_at":"2024-02-25T04:14:09.000Z","size":2691,"stargazers_count":3,"open_issues_count":7,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-03-15T03:56:01.156Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://gitlab.com/lepe/m2d2","language":"JavaScript","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/Intellisrc.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-08T02:45:44.000Z","updated_at":"2024-08-21T05:43:05.440Z","dependencies_parsed_at":"2024-08-21T05:42:55.527Z","dependency_job_id":null,"html_url":"https://github.com/Intellisrc/m2d2","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intellisrc%2Fm2d2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intellisrc%2Fm2d2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intellisrc%2Fm2d2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intellisrc%2Fm2d2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Intellisrc","download_url":"https://codeload.github.com/Intellisrc/m2d2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229893875,"owners_count":18140620,"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":[],"created_at":"2024-12-16T01:12:56.314Z","updated_at":"2024-12-16T01:12:56.896Z","avatar_url":"https://github.com/Intellisrc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# M2D2\n\n[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)\n[![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)\n[![npm version](https://badge.fury.io/js/m2d2.svg)](https://www.npmjs.com/package/m2d2)\n[![npm downloads](https://img.shields.io/npm/dt/m2d2?color=C52)](https://www.npmjs.com/package/m2d2)\n---\n[Quick Start](documentation/quick.md) |\n[Documentation](documentation/m2d2.md) |\n[Recommendations](documentation/recommendations.md) |\n[Install](#install) |\n[Tutorial](#tutorial) |\n[Examples](#live-demo)\n---\nExtensions: [Alerts](documentation/alert.md) |\n[Language](documentation/lang.md) |\n[Storage](documentation/storage.md) |\n[XHR](documentation/xhr.md) |\n[Upload](documentation/upload.md) |\n[WebSocket](documentation/ws.md)\n---\nA class to easily place data in DOM and update them immediately upon change. It has no dependencies. It is similar to Angular, Vue, ReactJS and alike frameworks and shares some similarities with JQuery.\n\nThe main goal of this framework is to keep the HTML and JS pure and clean, without having to either setup rules in the HTML (like in Angular), use HTML templates inside Javascript like in React, or use mixed templates like Vue. \n\nIf you know Javascript and HTML you pretty much know 98% of M2D2 already. \nBecause of that, it has a small learning curve, so you don't need to spend hours trying to understand\nhow the framework works or how you can apply it to your work.\n\nThis framework can work together with any other as it is just pure Javascript. Although, once you use it, you will like how clean your code can be.\n\n### Is M2D2 for you?\n\nThese are some reasons why you may be interested in using M2D2:\n\n- [ ] I deploy mainly for modern browsers (no Internet Explorer, for example)\n- [ ] I like to keep my HTML and my Javascript codes clean and simple\n- [ ] I like Javascript, but I would like to update the HTML in an easier way\n- [ ] I have used JQuery, but I want to make my code to react to value changes automatically\n- [ ] I don't want to spend too much time in learning a new framework\n- [ ] I really don't like to have all my code in a single file\n- [ ] I have some JQuery or Javascript libraries that I would like to use\n- [ ] I don't want very complicated codes to achieve simple things\n\nIf you checked one or more of the above boxes, M2D2 will suit you well.\n\n### Framework/Library comparison:\n\n| \t\t \t\t \t         | M2D2 | JQuery | Angular | ReactJS | Vue   |\n|---------------------------|------|--------|---------|---------|-------|\n| Size  \t\t  \t\t\t | 19Kb | 88Kb   | 60Kb    | 166Kb   | 181Kb |\n| Easy to learn   \t\t\t | Yes  | Yes    | No      | No      | No    |\n| Clean and standard HTML \t | Yes  | Yes    | No      | Yes     | No    |\n| Clean Javascript    \t\t | Yes  | Yes    | Yes     | No      | Yes   |\n| Good for small projects   | Yes  | Yes    | No      | Yes     | Yes   |\n| Good for large projects   | Yes  | No     | Yes     | Yes     | Yes   |\n| Observe object changes    | Yes  | No     | Yes     | Yes     | Yes   |\n| Large community           | No   | Yes    | Yes     | Yes     | Yes   |\n\n### Repositories (synchronized):\n\n* https://gitlab.com/intellisrc/m2d2/\n* https://github.com/intellisrc/m2d2/\n\n\n## Hello World\n\n---\n```js\n// When DOM is ready...\nm2d2.ready($ =\u003e {\n    // Place text in #myid :\n    $(myid, \"Hello World\");\n    \n    // Then, change it into something else:\n    myid.text = \"Hola Mundo\";\n});\n```\n\nTo better understand how M2D2 works, let's imagine you have this object:\n\n```js\nconst user_data = {\n    user_id : 1289943,\n    first_name : \"Beth\",\n    middle_name : \"Eleonor\",\n    last_name : \"Wilson\",\n    age : 35,\n    emails : [\n        \"beth900@example.com\",\n        \"beth.wilson@example.com\"\n    ]\n}\n```\n\nNow, we want to place that information in this HTML:\n\n```html\n\u003cdiv id=\"user\"\u003e\n    \u003cdiv\u003e\u003cspan\u003eID:\u003c/span\u003e\u003cspan class=\"user_id\"\u003e\u003c/span\u003e\u003c/div\u003e\n    \u003cdiv\u003e\u003cspan\u003eFirst Name:\u003c/span\u003e\u003cspan class=\"first_name\"\u003e\u003c/span\u003e\u003c/div\u003e\n    \u003cdiv\u003e\u003cspan\u003eMiddle Name:\u003c/span\u003e\u003cspan class=\"middle_name\"\u003e\u003c/span\u003e\u003c/div\u003e\n    \u003cdiv\u003e\u003cspan\u003eLast Name:\u003c/span\u003e\u003cspan class=\"last_name\"\u003e\u003c/span\u003e\u003c/div\u003e\n    \u003cdiv\u003e\u003cspan\u003eAge:\u003c/span\u003e\u003cspan class=\"age\"\u003e\u003c/span\u003e\u003c/div\u003e\n    \u003cdiv\u003e\n        \u003cspan\u003eEmails:\u003c/span\u003e\n        \u003cul class=\"emails\"\u003e\u003c/ul\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThis is what you need to code (for example: `user.js`):\n\n```js\nm2d2.ready($ =\u003e {\n    const user = $(\"#user\", user_data);\n})\n```\n\nAnd that's it! ... But what if `user_info` doesn't match our HTML structure?\n\nfor example this one:\n\n```html\n\u003cdiv id=\"user\"\u003e\n    \u003cdiv\u003e\u003cspan\u003eName:\u003c/span\u003e\u003cspan class=\"name\"\u003e\u003c/span\u003e\u003c/div\u003e\n    \u003cdiv\u003e\u003cspan\u003eEmail:\u003c/span\u003e\u003cspan class=\"email\"\u003e\u003c/span\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nm2d2.ready($ =\u003e {\n    // Assuming we don't have empty fields (for simplicity)\n    const user = $(\"#user\", {\n        dataset : { id : user_info.user_id }, // will create `data-id=` attribute in `#user`\n        name  : user_info.first_name + \" \" + user_info.middle_name[0].toUpperCase() + \". \" + user_info.last_name,\n        email : user_info.emails[0]\n    });\n})\n```\n\n... and that's it! ... But what if you need to interact with it (using events) ?\n\n```js\nm2d2.ready($ =\u003e {\n    const user = $(\"#user\", {\n        /* ... */\n        email : {\n            text : user_info.emails[0],\n            onclick : function(ev) {\n                window.location.href = \"mailto:\" + this.text;\n            }\n        }\n    });\n})\n```\n\n... and that's it! ... But what if ... ?\n\nRead the documentation, try the tutorial or the examples:\n\n### Quick Start:\n[5 minute reading](documentation/quick.md)\n\n### General Recommendations\n[Best practices when using M2D2](documentation/recommendations.md)\n\n### Tutorial:\n[Learn it now using jsfiddle](https://gl.githack.com/intellisrc/m2d2/raw/master/examples/tutorial.html)\n\n### Live Demo:\n[Stand-alone html + js examples](https://gl.githack.com/intellisrc/m2d2/raw/master/examples/tests/index.html)\n\n### Documentation:\n[M2D2 Reference](documentation/m2d2.md)\n\n## Install\n\n---\nYou can use this library either with Web or NodeJS, Framework7, etc. \n\n### For the Web\n\n#### Option 1 : Get M2D2 using npm / yarn\n\n[npm web page](https://www.npmjs.com/package/m2d2) | [yarn web page](https://yarnpkg.com/package/m2d2)\n\n\u003e npm i m2d2\n\nor\n\n\u003e yarn add m2d2\n\nThen you will find the library files under `node_modules/m2d2/dist/` (more about this below).\n\n#### Option 2 : Direct download\n\n\u003e Core Only (~19Kb): [m2d2.min.js](https://gl.githack.com/intellisrc/m2d2/raw/master/dist/m2d2.min.js) and set it in the HTML head.\u003cbr\u003e\n\u003e With all extensions (~29Kb): [m2d2.bundle.min.js](https://gl.githack.com/intellisrc/m2d2/raw/master/dist/m2d2.bundle.min.js) and set it in the HTML head.\n\n#### Option 3 : CDN\n\n\u003e Core Only: [m2d2.min.js](https://cdn.jsdelivr.net/npm/m2d2@2.1.0/dist/m2d2.min.js)\u003cbr\u003e\n\u003e With all extensions: [m2d2.bundle.min.js](https://cdn.jsdelivr.net/npm/m2d2@2.1.0/dist/m2d2.bundle.min.js)\n\nTo use it:\n\n```js\nm2d2.ready($ =\u003e {\n    // your code here\n});\n```\n\n### As Module\n\nUsing npm:\n\n\u003e npm i m2d2\n\nThen you will use it something like:\n\n```js\nimport m2d2 from 'm2d2';\nconst $ = m2d2.load();\n```\n\nYou can use it [together with JQuery](documentation/m2d2.md#using-with-jquery), or [with Framework7](documentation/m2d2.md#using-with-framework7)\nor any other framework of your choice.\n\n## Extensions:\n\n### Alert\n\n---\nThis extension makes it easy to display alerts, confirmation, input dialogs and more.\n\nExample:\n```js\n$.confirm(\"Are you sure?\", \"This is important\", res =\u003e {\n    if(res) {\n        // Do something\n    }\n});\n```\n\n[Try it (UTF8 Icons)](https://gl.githack.com/intellisrc/m2d2/raw/master/examples/extensions/alert.html)\n[Try it (FontAwesome)](https://gl.githack.com/intellisrc/m2d2/raw/master/examples/extensions/alert-fontawesome.html)\n[Try it (Google Material)](https://gl.githack.com/intellisrc/m2d2/raw/master/examples/extensions/alert-material.html)\nor\n[Learn about it](documentation/alert.md)\n\n### Storage\n\n------------\nThis extension provides an easy way to save and restore data into localStorage and sessionStorage.\n\nExample:\n```js\n// Store something in the localStorage:\n$.local.set(\"key\", { age: 20 });\nconsole.log($.local.get(\"key\"));\n```\n\n[Try it](https://gl.githack.com/intellisrc/m2d2/raw/master/examples/extensions/storage.html)\nor\n[Learn about it](documentation/storage.md)\n\n### Lang\n\n---\nWith this extension you can handle multiple languages easily.\n\nExample:\n```js\n$.lang('fr');\nconst _ = $.dict;\nconsole.log(_(\"yes\"));\n```\n\n[Try it](https://gl.githack.com/intellisrc/m2d2/raw/master/examples/extensions/lang.html)\nor\n[Learn about it](documentation/lang.md)\n\n### XHR\n\n---\nThis extension handles almost any kind of HTTP request to a server (e.g., GET, POST, PUT, DELETE, etc.)\n\nExample:\n```js\n$.put(\"/my/url\", { name : \"Tony\" }, res =\u003e {\n    // res = response from server\n});\n```\n\n[Try it](https://gl.githack.com/intellisrc/m2d2/raw/master/examples/extensions/xhr.html)\nor\n[Learn about it](documentation/xhr.md)\n\n### Upload\n\n---\nThis extension makes it easy to upload files to a server via XHR (included in XHR bundle).\n\nExample:\n```js\n$(\"uploadFileButton\", {\n    onclick : function(event) {\n        $.upload(event, {\n            upload : \"example.com/upload/\",\n            field  : \"file\",\n            onDone : (response, allDone) =\u003e {\n                console.log(\"Uploaded\");\n            }\n        });\n    }    \n});\n```\n\n[Learn about it](documentation/upload.md)\n\n### WS\n\n---\nThis extension gives you an easy-to-use WebSocket client.\n\nExample:\n```js\n$.ws.connect({\n    host    : \"example.com\",\n    path    : \"ws/\",\n    secure  : true, // for wss://\n    request : {} // initial request\n}, json =\u003e {\n    // json is the data received from server\n    if(json.user) { /* ... */ }\n});\n// Send a message to server:\n$.ws.request({\n    user : { id : 1000 }\n});\n```\n\n[Try it](https://gl.githack.com/intellisrc/m2d2/raw/master/examples/extensions/ws.html)\nor\n[Learn about it](documentation/ws.md)\n\n## Bundle Packs:\n\n---\nFor your convenience, there are some minimized files included in each release (you can find them under `dist/` directory if you install via `npm` or download them clicking on the file name):\n\n| \t\t \t\t \t                                                                                                  | Core | Alert | Storage | Lang | XHR | WS  | Size |\n|----------------------------------------------------------------------------------------------------------|------|-------|---------|------|-----|-----|------|\n| [m2d2.min.js](https://gl.githack.com/intellisrc/m2d2/raw/master/dist/m2d2.min.js)\t\t  \t\t                  | Yes  | No    | No      | No   | No  | No  | 19K  |\n| [m2d2.bundle.xhr.min.js](https://gl.githack.com/intellisrc/m2d2/raw/master/dist/m2d2.bundle.xhr.min.js)\t | Yes  | Yes   | Yes     | Yes  | Yes | No  | 28K  |\n| [m2d2.bundle.ws.min.js](https://gl.githack.com/intellisrc/m2d2/raw/master/dist/m2d2.bundle.ws.min.js)\t\t  | Yes  | Yes   | Yes     | Yes  | No  | Yes | 27K  |\n| [m2d2.bundle.min.js](https://gl.githack.com/intellisrc/m2d2/raw/master/dist/m2d2.bundle.min.js)\t\t        | Yes  | Yes   | Yes     | Yes  | Yes | Yes | 29K  |\n\n## Import:\n\n---\nYou can import M2D2 in this way:\n\n```js\nimport m2d2 from 'm2d2'         // You get m2d2.bundle.min.js\nimport m2d2 from 'm2d2/core'    // You get m2d2.min.js\nimport m2d2 from 'm2d2/ws'      // You get m2d2.bundle.ws.min.js\nimport m2d2 from 'm2d2/xhr'     // You get m2d2.bundle.xhr.min.js\n```\n\n## What's New in version 2.0:\n\n---\nThis library was almost completely rewritten in v2.0. The main difference is that in 1.x, the M2D2 object was mainly a Proxy object which upon change, updated the DOM. However the main issue was that if you changed the DOM directly, there was no way to update the M2D2 object automatically, and thus could have side effects. In 2.x, the M2D2 object is a Node/HTMLElement wrapped around a Proxy and extended, which means that you can safely change the DOM directly without having side effects. Because now the M2D2 object is a DOM element, you have access to everything through vanilla javascript (like classList, appendChild, style, etc), which greatly simplified things.\n\nOther big difference with v2.0 is that you can split your code across several small files in a very easy way (very useful if you use tools like 'gulp' to concatenate and minify your code).\n\n# Developing\n\nTo modify or contribute to this code, start by cloning this repository.\n\nThen execute: `npm install`\n\nTo compile, execute: `gulp`\n\nTo run all tests, execute: `npm test`\n\n## Acknowledgments:\n\n---\nDeveloped with IntelliJ Ultimate Edition.\nI would like to thank [JetBrains](https://jb.gg/OpenSource) for their support. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintellisrc%2Fm2d2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fintellisrc%2Fm2d2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintellisrc%2Fm2d2/lists"}