{"id":26501232,"url":"https://github.com/polight/brick","last_synced_at":"2025-03-20T16:37:40.101Z","repository":{"id":57137531,"uuid":"251062814","full_name":"Polight/brick","owner":"Polight","description":"🌱 Minimalistic, fast and reactive Web-component library. ⚠️ Brick was merged into Lego: https://github.com/Polight/lego","archived":false,"fork":false,"pushed_at":"2020-10-06T21:57:30.000Z","size":904,"stargazers_count":10,"open_issues_count":4,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-19T06:35:39.486Z","etag":null,"topics":["htmlelement","javascript","minimalistic","react","reactive","virtual-dom","web-components"],"latest_commit_sha":null,"homepage":"https://polight.github.io/brick/demo","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/Polight.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-29T15:16:41.000Z","updated_at":"2025-01-21T18:28:09.000Z","dependencies_parsed_at":"2022-08-22T20:50:13.269Z","dependency_job_id":null,"html_url":"https://github.com/Polight/brick","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polight%2Fbrick","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polight%2Fbrick/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polight%2Fbrick/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Polight%2Fbrick/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Polight","download_url":"https://codeload.github.com/Polight/brick/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244166634,"owners_count":20409175,"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":["htmlelement","javascript","minimalistic","react","reactive","virtual-dom","web-components"],"created_at":"2025-03-20T16:37:39.452Z","updated_at":"2025-03-20T16:37:40.089Z","avatar_url":"https://github.com/Polight.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Brick\n\n\u003e The minimalist reactive web-component\n\nBrick is a thin layer to constructs [native webcomponents](https://developer.mozilla.org/en-US/docs/Web/Web_Components) and make them [reactive](https://en.wikipedia.org/wiki/Reactive_programming).\n\nBrick is:\n- 👙 minimalist: 74 lines of readable code (non-optimised, uncompressed, no cheating)\n- 🌱 low dependency: its single third-party is the minimalist [Petit-Dom](https://github.com/yelouafi/petit-dom) which itself has no dependency\n- ♻️ reactive: updating the state recalculate the Virtual Dom when needed\n- 🚀 fast: using virtual dom through a thin layer makes it close to bare-metal\n- 💧 simple: that's [Vanilla](http://vanilla-js.com/), there isn't much to know, it's a raw class to extend; no magic ✨\n\nView the [demo](https://polight.github.io/brick/demo/) and [their source](https://github.com/Polight/lego/tree/master/demo) 🧪.\n\nIf you're looking for a higher level Web-Components library, checkout [Lego](https://github.com/polight/lego) that builds Bricks out of HTML web-component files.\n\n\n### Getting started\n\nHere's a fully working example with no install.\n\nCopy-paste the following in an HMTL file and run it in a browser:\n\n```html\n\u003chello-world name=\"earth\"\u003e\n\n\u003cscript type=module\u003e\n  import { h, Component } from '//unpkg.com/@polight/brick/lib'\n\n  class HelloWorld extends Component {\n    init() { this.state = { name: 'world' } }\n\n    toggleName() { this.render({ name: 'gaia' }) }\n\n    get vdom() {\n      return ({ state }) =\u003e [\n        h('p', {}, `Hello ${state.name}`),\n        h('button', { onclick: this.toggleName.bind(this) }, `toggle`),\n      ]\n    }\n  }\n\n  customElements.define('hello-world', HelloWorld)\n\u003c/script\u003e\n```\n\nThere isn't much to explain, but let's detail a little:\n\n- `\u003chello-world name=\"earth\"\u003e` is a web-component. That's native. `name=\"earth\"` will be sent to the component as `{ state: 'earth' }`\n- `init() { this.state = { name: 'world' } }` declares the `state` with it's default values. Also, anything that is declared in the state—and only what is declared here—will be reactive\n- `toggleName` is a custom method that will be called on click\n- `get vdom()` is the property that should return a function reprenting your HTML. That function is itself called passing the `state` argument. It should returns a virtual-dom. If you know [virtual-dom](https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060), [React](https://reactjs.org/) or [elm](https://elm-lang.org/), this writing will be familiar\n- `customElements.define('hello-world', HelloWorld)` that's the native way in HTML to declare the web-component.\n\n### Documentation\n\nThe best documentation is [reading the code](./lib/Component.js).\n\nBecause it constructs native webcomponents, all the native [web-components documentation](https://developer.mozilla.org/en-US/docs/Web/Web_Components) applies.\nYou can therefore use [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot), disable or enable [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM), the [`is` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-is) and other web-component or HTML capabilities.\n\nIn addition, a couple of extra tools are brought by Brick:\n\n#### state\n\nthis object is made available to the virtual-dom (and CSS styles).\nIt can be reactive (when declared in the init) and can be updated by the app.\n\nState is fed the following way:\n1. declared in the `init()` with the default values\n2. attributes of the element in the HTML will overwrite the defaults\n3. changing values in the object or on the component attributes will update the state values (without re-rendering)\n4. call `this.render(state)` to update the state **and** update the interface.\n\n#### init()\n\nYou can initialize whatever you need here.\nThat's a convenient instance to declare your reactive `state` object.\nWhen declaring your `state` here, it's properties will be made reactive.\n\n#### vdom()\n\nMust return a function that returns a string, an array or a `h()` instance.\nThe structure of `h()` takes 3 arguments:\n`h(\u003chtml element (string)\u003e, \u003cattributes (object)\u003e, \u003cchildren (array, string, or h())\u003e)`.\n\n#### vstyle()\n\nSame as `vdom()`, but returning a CSS style node.\n\n```js\nget vstyle() {\n  return ({ state }) =\u003e h('style', {}, 'p{ color: red }')\n}\n```\n\n#### connected()\n\nA convenient method to call when the component is attached to the dom.\n\n#### disconnected()\n\nA convenient method to call when the component is removed from the dom.\n\n\n## Development\n\n### Working on sources\n\nWhen participating to Brick you can simply tune the _lib/index.js_ and import it.\n_petit-dom_ is the only dependency. You may need to adapt its path.\n\n### Compilation\n\nCompiling is convenient but not _future-proof_.\nCompilation is done with [Rollup](http://rollupjs.org/) and will break in the future.\nTherefore it is not a high dependency and should never be.\n\nThat said, plugins for bundling, minifying and gziping are set up.\n\nYou may install them all with `npm i --env=dev`.\n\n#### Compiling task\n\n`npm run build` to bundle/minimify/gzip _dist/index.js_.\nThat will be bandwidth-friendlier.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolight%2Fbrick","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpolight%2Fbrick","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpolight%2Fbrick/lists"}