{"id":20285633,"url":"https://github.com/marcisbee/boldom","last_synced_at":"2025-04-11T08:40:23.805Z","repository":{"id":99011666,"uuid":"184614409","full_name":"Marcisbee/boldom","owner":"Marcisbee","description":"🔖 JS framework based on Template Literals, Global scope and plain HTML","archived":false,"fork":false,"pushed_at":"2023-04-05T09:17:43.000Z","size":41,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T06:50:30.524Z","etag":null,"topics":["css","dom","framework","html","scope","template-literals"],"latest_commit_sha":null,"homepage":"https://boldom.js.org","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/Marcisbee.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":"2019-05-02T16:25:27.000Z","updated_at":"2025-01-02T16:10:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"d9990d1d-8c71-4f3d-a2a6-1384f526146d","html_url":"https://github.com/Marcisbee/boldom","commit_stats":{"total_commits":23,"total_committers":1,"mean_commits":23.0,"dds":0.0,"last_synced_commit":"d303684e921f0972aefa23efbc4ae68429f81134"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcisbee%2Fboldom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcisbee%2Fboldom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcisbee%2Fboldom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Marcisbee%2Fboldom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Marcisbee","download_url":"https://codeload.github.com/Marcisbee/boldom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248362343,"owners_count":21091099,"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":["css","dom","framework","html","scope","template-literals"],"created_at":"2024-11-14T14:27:58.218Z","updated_at":"2025-04-11T08:40:23.775Z","avatar_url":"https://github.com/Marcisbee.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg src='./assets/logo.png' height='60' alt='Boldom' /\u003e\n\n**Boldom** is a 1kb JS/HTML framework.\n\n**NOTE!** This is meant for being used in small projects, that would require minimal js usage. And need to be run on server, will not work over file://.\n\nThis framework is based on Template Literals, global scope (yes! You heard me, this framework utilizes global window scope) and plain old HTML. I build this as an experiment of an idea of using THE platform to build front end.\n\nAlso should mention that this is a runtime framework, no compilation or build process needed.\n\n[![npm version](https://img.shields.io/npm/v/boldom.svg?style=flat-square)](https://www.npmjs.com/package/boldom)\n[![discord](https://dcbadge.vercel.app/api/server/a62gfaDW2e?style=flat-square)](https://discord.gg/a62gfaDW2e)\n\n\n## Installation\n\nTo install the stable version:\n\n```\nnpm install --save boldom\n```\n\nThis assumes you are using [npm](https://www.npmjs.com/) as your package manager.\n\nIf you're not, you can [access it on unpkg](https://unpkg.com/boldom) like so\n\n```html\n\u003cscript src=\"https://unpkg.com/boldom\"\u003e\u003c/script\u003e\n```\n\nAltho it's not required, it's nice to import `style-scoped` too for scoped css usage\n\n```html\n\u003cscript src=\"https://unpkg.com/style-scoped@0.1.0/scoped.min.js\"\u003e\u003c/script\u003e\n```\n\n#### Browser Compatibility\n\nEvery evergreen browser and older ones that support [ES6 Template Literals](https://caniuse.com/#feat=template-literals).\n\n## Documentation\n\nHere we don't make use Compilers, Bundles, Virtual dom, Hyperscript, State management or any other fancy stuff. We use the platform (tools we are provided already, like plain old HTML for example).\n\n## State\n\nState in Boldom is split into 3 different approaches: Local state, Global state and Store.\n\n#### Local state\n\nIt is just a variable that can be changed, so this should be `var` or `let`.\n\n```html\n\u003cscript\u003e\n  var count = 21;\n\u003c/script\u003e\n\n\u003ch1\u003e${count}\u003c/h1\u003e\n```\n\nRemember that calling `count` variable in html event attributes will not work as `count` is not defined globally. Instead use template variable (`${variable}`).\n\n```diff\n\u003cbutton\n-   onclick=\"alert(count)\"\u003e\n+   onclick=\"alert(${count})\"\u003e\n  Get count\n\u003c/button\u003e\n```\n\n#### Global state\n\nIt is also just a variable that can be changed, but it should also be rewritable so we should use `var` when creating global variables.\n\n```html\n\u003cscript\u003e\n  export var count = 21;\n\u003c/script\u003e\n```\n\nBut in this case where `count` variable is exported to global scope, we can use it like so.\n\n```html\n\u003cbutton onclick=\"alert(count)\"\u003e\n  Get count\n\u003c/button\u003e\n```\n\nThere's no real functional difference between the approaches. Only that in exported case `count` variable is accessible in `window` scope and can be overwritten by other value with the same name.\n\n#### Store\n\nThis is state manager that syncs state across multiple components. If one component changes variable, then all components using store are updated.\n\n```html\n\u003cscript\u003e\n  store.name = 'John Doe';\n\u003c/script\u003e\n\n\u003ch1\u003e${store.name}\u003c/h1\u003e\n```\n\nStore value can be changed as regular variable with basic assignment operator (=).\n\n## Functions\n\nSame export logic applies for functions. Exported functions are accessable from global scope. That is why we can use them.\n\n```html\n\u003cscript\u003e\n  var count = 0;\n  export function increment() {\n    count += 1;\n  }\n\u003c/script\u003e\n\n\u003ch1\u003e${count}\u003c/h1\u003e\n\u003cbutton onclick=\"increment()\"\u003e+\u003c/button\u003e\n```\n\n## Style\n\nStyles should work as usual.\n\n```html\n\u003cstyle\u003e\n  h1 {\n    color: red;\n  }\n\u003c/style\u003e\n\n\u003ch1\u003eHello World\u003c/h1\u003e\n```\n\nBut we can also do interesting stuff like changing style using variables. If variable changes, style gets updated too.\n\n```html\n\u003cscript\u003e\n  var index = 0;\n  var colors = ['red', 'green', 'blue'];\n\n  setInterval(function () {\n    index = (index + 1) % colors.length;\n  }, 1000);\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  h1 {\n    color: ${colors[index]};\n  }\n\u003c/style\u003e\n\n\u003ch1\u003eHello World\u003c/h1\u003e\n```\n\nNow in this example, every second h1 will change it's colors.\n\n## Events\n\nEvents can be triggered on html tags.\n\nWe can also get event object using `event` variable.\n\n```html\n\u003cbutton onclick=\"console.log(event)\"\u003eGet event\u003c/button\u003e\n```\n\nSame applies for current `button` element node in this example by using `this` variable.\n\n```html\n\u003cbutton onclick=\"console.log(this)\"\u003eGet this reference\u003c/button\u003e\n```\n\n## Example\n\nSo what does Boldom component looks like? It's just an html file, stripped down a bit.\n\n**counter.html**\n```html\n\u003cscript\u003e\n  var count = 0;\n\n  export function increment() {\n    count += 1;\n  }\n\n  export function decrement() {\n    count -= 1;\n  }\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  h1 {\n    font-size: ${count + 4}rem;\n  }\n\u003c/style\u003e\n\n\u003ch1\u003e${count}\u003c/h1\u003e\n\n\u003cbutton onclick=\"decrement()\" ${count \u003c= 0 \u0026\u0026 'disabled' }\u003e-\u003c/button\u003e\n\u003cbutton onclick=\"increment()\"\u003e+\u003c/button\u003e\n```\n\nOk so we've seen how component looks, but how the hell we can use it ? We just need to inject that component in dom using `link` (it must be defined inside `body`):\n\n```html\n\u003cbody\u003e\n  \u003clink href=\"./count.html\" /\u003e\n\u003c/body\u003e\n```\n\nSee [examples section](/examples) for more demos.\n\n\n## Architecture\n\nThis is framework taks advantage of global scope and default html functionality. For example html has option to already trigger javascript code from props like `onclick` for example this works if you try this in html.\n\n```html\n\u003cimage src=\"hello.png\" onclick=\"alert('Hi')\"/\u003e\n```\n\nBut for it to work, we need functions to be global scope. So we export them to global scope using es6 `export` syntax.\n\n```js\nexport function sayHi() {\n  console.log('hi');\n}\n```\n\nbecomes:\n\n```js\nwindow.sayHi = function sayHi() {\n  console.log('hi');\n}\n```\n\nSame happens with all exported variables, not just functions.\n\nSo now that there is `increment` variable on global scope, we can do this in html:\n\n```html\n\u003cbutton onclick=\"sayHi()\"\u003eSay hi\u003c/button\u003e\n```\n\nNow that we know why we're making use of global scope, let me quickly show what happens in template engine.\n\nFor a while now we have this thing called [Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals). That basically allows us to write multi line strings and use variables inside it like so:\n\n```js\nconst count = 2;\nconst template = `\n  \u003ch1\u003e${count}\u003c/h1\u003e\n`;\n```\n\nThat is basically what happens when boldom is parsing imported html files, that is why we can use that syntax.\n\nAnd what about updates?\nGood question.\nWe inject `Boldom.action()` in every function found in components `script` tag. So whenever any function is called in component it triggers update. And it's just simple and small dom patch algo that applies new dom tree to old one (So that buttons/inputs etc. don't lose focus and state and is a bit more faster than innerHTML).\n\nThat's all there is to it.\n\n## Caveats\n\n- Exported variables and functions used in `\u003cscript\u003e` tag should be defined before being used.\n- Props cannot be passed to component (yet).\n\n\n## Stay In Touch\n\n- [Slack](https://join.slack.com/t/radijs/shared_invite/enQtMjk3NTE2NjYxMTI2LWFmMTM5NTgwZDI5NmFlYzMzYmMxZjBhMGY0MGM2MzY5NmExY2Y0ODBjNDNmYjYxZWYxMjEyNjJhNjA5OTJjNzQ)\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n\nCopyright (c) 2019-present, Marcis (Marcisbee) Bergmanis\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcisbee%2Fboldom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcisbee%2Fboldom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcisbee%2Fboldom/lists"}