{"id":19064830,"url":"https://github.com/cloudbit-interactive/cuppajs","last_synced_at":"2025-04-28T11:25:28.930Z","repository":{"id":71938708,"uuid":"320607081","full_name":"cloudbit-interactive/cuppajs","owner":"cloudbit-interactive","description":"Standard Vanilla Libraries that work with everything.","archived":false,"fork":false,"pushed_at":"2025-04-27T23:32:20.000Z","size":1853,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-28T11:25:12.256Z","etag":null,"topics":["angular","component","components","cuppajs","element-collection","javascript","reactive","reactjs","stencil","svelte","utility","vanilla","web","web-components"],"latest_commit_sha":null,"homepage":"https://cuppajs.cloudbit.co/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloudbit-interactive.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,"zenodo":null}},"created_at":"2020-12-11T15:10:35.000Z","updated_at":"2025-04-26T20:34:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"c88c3a76-da11-418a-97ae-765a7c65e7af","html_url":"https://github.com/cloudbit-interactive/cuppajs","commit_stats":{"total_commits":395,"total_committers":2,"mean_commits":197.5,"dds":0.005063291139240533,"last_synced_commit":"2cded0717cb3d14015fa043ee1cb19cd12479243"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudbit-interactive%2Fcuppajs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudbit-interactive%2Fcuppajs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudbit-interactive%2Fcuppajs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudbit-interactive%2Fcuppajs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudbit-interactive","download_url":"https://codeload.github.com/cloudbit-interactive/cuppajs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251303637,"owners_count":21567728,"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":["angular","component","components","cuppajs","element-collection","javascript","reactive","reactjs","stencil","svelte","utility","vanilla","web","web-components"],"created_at":"2024-11-09T00:47:30.034Z","updated_at":"2025-04-28T11:25:28.920Z","avatar_url":"https://github.com/cloudbit-interactive.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# CuppaJS - Standard libraries that work with everything out there.\n\nA set of libraries to create any kind of javascript projects but regardless to other libraries, it is focus in vanilla javascript giving standard tools to built code and reuse it anywere, not matter the toolset (reactj, angular, vue, svelte).\n\nThere are tons of good frameworks and libraries implementations out there to create amazing projects and one of the biggest problems is found solid mature standard resources that works with alls of them, for example: if you are using Angular the way to go is found an Angular Component that solve your needed, but if you need switch or create a new project using other technology base \"React\", needs to found an alternative that supply your needs in that specific framework.\n\nCuppaComponent.js | CuppaRouter.js | CuppaStorage.js\n\n# Advantages\n\n - Compatible with any other framework or libraries due is just standard code.\n - Faster performance thanks to lit-html a simple, modern and fast HTML templeating.\n - No pre-compilation process.\n - Small size.\n - No dependencies.\n\n# Documentation\n\nDoc [https://cuppajs.cloudbit.co/](https://cuppajs.cloudbit.co/) \u003cbr /\u003e\nGit [https://github.com/cloudbit-interactive/cuppajs](https://github.com/cloudbit-interactive/cuppajs) \u003cbr /\u003e\nNpm [https://www.npmjs.com/package/cuppajs](https://www.npmjs.com/package/cuppajs) \u003cbr /\u003e\nWebComponents [https://www.webcomponents.org/element/cuppajs-elements](https://www.webcomponents.org/element/cuppajs-elements)\n\n# Cuppa Component ~5.5kB gzipped\n```javascript\n// Load or embed the library\nimport {CuppaComponent, html} from \"https://cdn.jsdelivr.net/npm/cuppajs/libs/cuppa.component.min.js\";\n\nexport default class MyComponent extends CuppaComponent {\n\tstatic attributes = ['attr1', 'attr2'];\n\tstatic observables = ['count'];\n\tcount = 0;\n\trefs = {myDivRef:null};\n\n\tconstructor(){ super(); }\n\n\t// Invoked when the custom element is first connected to the document's DOM.\n\tmounted() { }   \n\t\n\t// Invoked when the custom element is disconnected from the document's DOM.\n\tunmounted() { }\n\n\t// Invoked after the first render execution\n\tfirstRendered(count){ }\n\n\t// Invoked after render execution\n\trendered(count){ }             \n\t\n\trender(){\n\t\treturn html`\n\t\t\t\u003cdiv ref=\"myDivRef\"\u003e    \n\t\t\t\t\u003cbutton @click=${ ()=\u003ethis.count-- }\u003e+\u003c/button\u003e\n\t\t\t\t\u003cspan\u003eCount: ${this.count}\u003c/span\u003e\n\t\t\t\t\u003cbutton @click=${ ()=\u003ethis.count++ }\u003e+\u003c/button\u003e\n\t\t\t\u003c/div\u003e\n\t\t`\n\t}\n}\n\n// Standard way to defines a new custom element.\ncustomElements.define('my-component', MyComponent);\n\n// Ok, now we can add a instance of our component and see the result\ndocument.body.append(new MyComponent())\n\n```\n# Cuppa Router ~2.5kB gzipped\n```javascript\n// Load or embed the library\nimport { CuppaRouter } from \"https://cdn.jsdelivr.net/npm/cuppajs/libs/cuppa.router.min.js\";\n\nconst router = new CuppaRouter();\nrouter.addListener(onRouterUpdated);\nrouter.updateLinks();\nrouter.resolve();\n\nfunction  onRouterUpdated(path)  {\n\tlet content = document.getElementById(\"content\");\n\tcontent.innerHTML =  \"\";\n\t\t\n\tif(router.match(path,  \"/\"))  {\n\t\tcontent.innerHTML = \"Home Page\";\n\t}else if(router.match(path, \"works\"))  {\n\t\tcontent.innerHTML = \"Works\";\n\t}else if(router.match(path, \"works/:alias\"))  {\n\t\tlet data = router.match(path, \"works/:alias\");\n\t\tcontent.innerHTML = `\u003cstrong\u003eWork Alias:\u003c/strong\u003e ${data.params.alias}`;\n\t}\n}\n```\n# Cuppa Storage ~2.0kB gzipped\n```javascript\n// Load or embed the cuppa.component.js library\nimport {CuppaStorage} from \"https://cdn.jsdelivr.net/npm/cuppajs/libs/cuppa.storage.min.js\";\n\n// Register a callback that will be automatically updated when value change\n// store = null, LOCAL, SESSION, INDEXED_DB\nCuppaStorage.getData({name:\"user\", store:CuppaStorage.LOCAL, defaultValue:null, callback:(data)=\u003e{\n    console.log(data);\n}})\n\n// Set the value in the storage\nCuppaStorage.setData({name:\"user\", data:{name:\"Tufik\", age:36}, store:CuppaStorage.LOCAL});\n\n// Also is possible ge the value directly.\nlet value = await CuppaStorage.getData({name:\"user\", store:CuppaStorage.LOCAL, defaultValue:null});\n// CuppaStorage.getDataSync doesn't support store CuppaStorage.INDEXED_DB due IndexedDB is async\nlet value = CuppaStorage.getDataSync({name:\"user\", store:CuppaStorage.LOCAL});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudbit-interactive%2Fcuppajs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudbit-interactive%2Fcuppajs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudbit-interactive%2Fcuppajs/lists"}