{"id":31565805,"url":"https://github.com/smart-table/flaco","last_synced_at":"2025-10-05T07:17:50.792Z","repository":{"id":57237829,"uuid":"84956240","full_name":"smart-table/flaco","owner":"smart-table","description":"A Tiny (2kb) UI library based on hyperscript and virtual dom","archived":false,"fork":false,"pushed_at":"2018-11-06T20:08:07.000Z","size":1089,"stargazers_count":11,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-22T01:47:06.724Z","etag":null,"topics":["dom","elm","hyperscript","library","redux","ui","vdom"],"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/smart-table.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":"2017-03-14T14:06:57.000Z","updated_at":"2024-10-17T05:40:34.000Z","dependencies_parsed_at":"2022-08-26T15:01:39.733Z","dependency_job_id":null,"html_url":"https://github.com/smart-table/flaco","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/smart-table/flaco","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smart-table%2Fflaco","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smart-table%2Fflaco/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smart-table%2Fflaco/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smart-table%2Fflaco/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smart-table","download_url":"https://codeload.github.com/smart-table/flaco/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smart-table%2Fflaco/sbom","scorecard":{"id":832631,"data":{"date":"2025-08-11","repo":{"name":"github.com/smart-table/flaco","commit":"caf1713014716d3a14d8d753d533c80ba4a7b5ef"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"41 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-9q64-mpxx-87fg","Warn: Project is vulnerable to: GHSA-jc84-3g44-wf2q","Warn: Project is vulnerable to: GHSA-6vrv-94jv-crrg","Warn: Project is vulnerable to: GHSA-f9mq-jph6-9mhm","Warn: Project is vulnerable to: GHSA-h9jc-284h-533g","Warn: Project is vulnerable to: GHSA-m93v-9qjc-3g79","Warn: Project is vulnerable to: GHSA-hvf8-h2qh-37m9","Warn: Project is vulnerable to: GHSA-mpjm-v997-c4h4","Warn: Project is vulnerable to: GHSA-3p22-ghq8-v749","Warn: Project is vulnerable to: GHSA-77xc-hjv8-ww97","Warn: Project is vulnerable to: GHSA-mq8j-3h7h-p8g7","Warn: Project is vulnerable to: GHSA-p2jh-44qj-pf2v","Warn: Project is vulnerable to: GHSA-p7v2-p9m8-qqg7","Warn: Project is vulnerable to: GHSA-7x97-j373-85x5","Warn: Project is vulnerable to: GHSA-7m48-wc93-9g85","Warn: Project is vulnerable to: GHSA-qqvq-6xgj-jw8g","Warn: Project is vulnerable to: GHSA-6r2x-8pq8-9489","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h","Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T18:08:20.520Z","repository_id":57237829,"created_at":"2025-08-23T18:08:20.520Z","updated_at":"2025-08-23T18:08:20.520Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278421863,"owners_count":25984081,"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","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["dom","elm","hyperscript","library","redux","ui","vdom"],"created_at":"2025-10-05T07:17:48.668Z","updated_at":"2025-10-05T07:17:50.779Z","avatar_url":"https://github.com/smart-table.png","language":"TypeScript","readme":"# Flaco\n\n[![CircleCI](https://circleci.com/gh/smart-table/flaco.svg?style=svg)](https://circleci.com/gh/smart-table/flaco)\n\nYet another view engine based on [hyperscript](https://github.com/hyperhype/hyperscript) and virtual dom.\n\nIn **Flaco**, the base unit, component, is *just* [pure](https://github.com/hemanth/functional-programming-jargon#purity) functions which should be deterministic and easy to test.\nYou can then use any combinator (aka higher order function) to give more specificity (perhaps loosing the purity or statelessness) to your components and embrace the UI architecture you prefer (stateful components, [Elm](https://guide.elm-lang.org/) or [Redux](https://github.com/reactjs/redux) like architecture, observables, etc)\n\nAh, and Flaco is about **2kb**  minified and gzipped while providing a wide range of *features*, difficult to beat (that is about 400 lines of source code) !\n\n## Installation\n\n``yarn add flaco``\n\nor\n\n``npm install --save flaco``\n\nIf you wish to benefit from [JSX](https://facebook.github.io/react/docs/introducing-jsx.html) syntax, tell your transpiler to use the **h** pragma instead of the default \"createElement\" set for [React](https://facebook.github.io/react/) in most of the module bundlers.\n\n## Usage\n\n### Create a component\n\n```Jsx\n//hello.js\nimport {h} from 'flaco';\n\nexport const HelloWorld = ({hello = 'Hello', world = 'World'} = {}) =\u003e (\u003ch1\u003e{hello} ... {world} !\u003c/h1\u003e);\n```\nOr if you don't want to use JSX and keep the vanilla JS syntax\n\n```Javascript\nimport {h, NA} from 'flaco';\n\n// NA stands for \"No attributes\" replace by an object if you wish to pass some attributes\nexport const HelloWorld = ({hello = 'Hello', world = 'World'} = {}) =\u003e h('h1', NA, `${hello}...${world}`);\n```\nFlaco come with built in convenient functions for standard HTML Elements:\n```Javascript\nimport {h1} from 'flaco';\n\nexport const HelloWorld = ({hello = 'Hello', world = 'World'} = {}) =\u003e h1(`${hello}...${world}`);\n```\n\n### Mount a component\n\nHaving a component is pretty useless if you don't put it anywhere. For that, you can use the **mount** function\n\n```Jsx\nimport {mount} from 'flaco';\nimport {HelloWorld} from './hello.js';\n\nmount(HelloWorld, {hello:'Buenas dias', world:'mundo'}, document.getElementById('someContainer'));\n// or mount(\u003cHelloWorld hello='Buenas dias', world='mundo'/\u003e,{},document.getElementById('someContainer'));\n```\n\nNote the mount function is [curried](https://github.com/hemanth/functional-programming-jargon#currying) so you can somehow reuse it to mount it in different places for example\n\n```Jsx\nconst mountInFrench = mount(HelloWorld, {hello:'Bonjour', world:'monde'});\n\nmountInFrench(document.getElementById('here'));\nmountInFrench(document.getElementById('andThere'));\n```\n\n[See in CodePen](http://codepen.io/lorenzofox3/pen/GmRNzp)\n\nIf the node you try to mount your component in has already a dom tree, flaco will try to *hydrate* the dom tree. It means that with flaco you can have [progressive web app](https://dev.opera.com/articles/pwa-resources/) without changing a single line of code !\n\n### Use combinator to create state ... (or the beginning of the end)\n\nWithout any doubt, you will want the user to interact with your shiny user interface and you will need somehow to manage application states. Flaco itself does not make any assumption on how to do it but provide few combinators (higher order function for your components) to create common patterns.\nThey are shipped with the core module but don't worry with any good module bundler (like Rollup) you'll be able to tree shake the parts you don't use (and anyway the full Flaco lib remains probably one of the smallest UI library you may know)\n\n#### Self contained state\n\nIn some cases, you don't need the state of a particular component to be managed globally or shared. Only the component itself, should be aware of its own encapsulated state and able to edit it.\nThat could be a collapse/expanding section for example.\n\nTo create such behaviour you can use the **withState** combinator: it will create a scope specific to a component instance and allow it to update itself (by passing an update function as second argument to your component)\n\n```Jsx\n//expandable.js\nimport {withState, h} from 'flaco';\n\nconst ExpandableSection = withState((props, setState) =\u003e {\n    const {sectionId, expanded, children} = props;\n    const exp = expanded === 'true' || expanded === true;\n    const toggle = () =\u003e setState(Object.assign({}, props, {expanded: !exp}));\n    return (\n      \u003cdiv\u003e\n        \u003cbutton\n          onClick={toggle} aria-expanded={exp ? 'true' : 'false'}\n          aria-controls={sectionId}\u003e\n          {exp ? 'Collapse' : 'Expand'}\n        \u003c/button\u003e\n        \u003cdiv aria-hidden={String(!exp)} id={sectionId}\u003e\n          {children}\n        \u003c/div\u003e\n      \u003c/div\u003e\n    );\n  }\n);\n```\n\nWe have now a \"reusable component\" you can mount anywhere, share across projects, etc.\n\n```Jsx\nimport {mount} from 'flaco';\nimport ExpandableSection from './expandable.js'\n\nmount(() =\u003e (\n    \u003cdiv\u003e\n      \u003cExpandableSection sectionId=\"first\" expanded=\"true\"\u003e\u003cstrong\u003eExpanded\u003c/strong\u003e by default\n        section\u003c/ExpandableSection\u003e\n      \u003cExpandableSection sectionId=\"second\" expanded=\"false\"\u003e\u003cstrong\u003eNot expanded\u003c/strong\u003e by default\n        section\u003c/ExpandableSection\u003e\n    \u003c/div\u003e\n  ),\n  {},\n  document.getElementById('main'));\n```\n\n[See in CodePen](http://codepen.io/lorenzofox3/pen/ZKELYj)\n\n#### Global application state (the Elm way)\n\nNote you can have multiple apps in the same document. However you should make sure updates and models are in their isolated silos.\n\n### Life cycles\n\nFlaco allows you to hook yourself into different life cycles of the components. This is useful to create your own update logic and your own combinators.\n\n#### onMount\n\nWill occur when a component has been mounted into the DOM\n\n#### onUnmount\n\nWill occur when a component has been unmounted (ie removed from the DOM)\n\n#### onUpdate\n\nWill occur before the component is updated (it won't be triggered when the component is mounted)\n\n#### Use an update function\n\nThe lifecycle combined with the **update** factory will be useful to create your own update logic\n\nYou can create a combinator which will force the update every second for example.\n\n```Jsx\nimport {onMount,onUnMount,h,mount} from 'flaco';\nconst main = document.getElementById('main');\n\nconst pollEverySecond = function (comp) {\n  return function (initProp) {\n    let timer;\n\n    const createInterval = onMount(vnode =\u003e {\n      const updateFunc = update(comp, vnode);\n      timer = setInterval(() =\u003e {\n        updateFunc(Object.assign({}, initProp, {timestamp: Math.floor(Date.now())}));\n      }, 1000);\n    });\n\n    const clean = onUnMount(() =\u003e clearInterval(timer));\n\n    return clean(createInterval(comp));\n  };\n};\n\n\nconst DisplaySeconds = ({timestamp, startDate, event}) =\u003e \u003cp\u003e\n  \u003cstrong\u003e{Math.floor(timestamp - startDate.getTime())}\u003c/strong\u003e seconds have passed since \u003cstrong\u003e{event}\u003c/strong\u003e\n\u003c/p\u003e;\n\nconst Clock = pollEverySecond(DisplaySeconds);\n\nmount(() =\u003e \u003cdiv\u003e\n  \u003cClock startDate={new Date(1987, 4, 21)} event=\"I was born\"/\u003e\n  \u003cClock startDate={new Date(1955, 8, 27)} event=\"My Mom was born\"/\u003e\n\u003c/div\u003e, {}, main);\n```\n\nSee [Codepen](http://codepen.io/lorenzofox3/pen/ybLgEG);\n\n## Contributing\n\n### Test\n\n``yarn test`` or ``npm test``\n\n### Reporting an issue\n\nAny **bug** or **troubleshooting** need to come with an **isolated running example** (ex: a [codepen]() reproducing your issue only - we don't need the whole app) or will simply be ignored.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmart-table%2Fflaco","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmart-table%2Fflaco","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmart-table%2Fflaco/lists"}