{"id":13827146,"url":"https://github.com/terkelg/facon","last_synced_at":"2025-05-16T03:02:02.884Z","repository":{"id":33283042,"uuid":"155976403","full_name":"terkelg/facon","owner":"terkelg","description":"Tiny utility (365B) to create DOM elements with manner.","archived":false,"fork":false,"pushed_at":"2024-10-16T02:48:03.000Z","size":103,"stargazers_count":229,"open_issues_count":1,"forks_count":7,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-03T16:03:25.722Z","etag":null,"topics":["dom","html","template-literals","utility","view"],"latest_commit_sha":null,"homepage":"","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/terkelg.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-11-03T11:24:22.000Z","updated_at":"2025-02-21T12:40:14.000Z","dependencies_parsed_at":"2024-06-21T20:24:06.200Z","dependency_job_id":"3001ad8e-6962-44c4-954b-7c14a2c363f1","html_url":"https://github.com/terkelg/facon","commit_stats":{"total_commits":42,"total_committers":6,"mean_commits":7.0,"dds":"0.26190476190476186","last_synced_commit":"3d8aaa4cf4ba4ced4ab602848c388ce3c4579d05"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terkelg%2Ffacon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terkelg%2Ffacon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terkelg%2Ffacon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/terkelg%2Ffacon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/terkelg","download_url":"https://codeload.github.com/terkelg/facon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254160558,"owners_count":22024571,"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":["dom","html","template-literals","utility","view"],"created_at":"2024-08-04T09:01:51.111Z","updated_at":"2025-05-16T03:02:02.835Z","avatar_url":"https://github.com/terkelg.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Libraries"],"sub_categories":["HTML"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"facon.png\" alt=\"facon\" width=\"300\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.org/package/facon\"\u003e\n    \u003cimg src=\"https://badgen.now.sh/npm/v/facon\" alt=\"version\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/terkelg/facon\"\u003e\n    \u003cimg src=\"https://badgen.now.sh/codecov/c/github/terkelg/facon\" alt=\"codecov\" /\u003e\n  \u003c/a\u003e\n  \u003c!--\u003ca href=\"https://npmjs.org/package/facon\"\u003e\n    \u003cimg src=\"https://badgen.now.sh/npm/dm/facon\" alt=\"downloads\" /\u003e\n  \u003c/a\u003e--\u003e\n  \u003ca href=\"https://packagephobia.now.sh/result?p=facon\"\u003e\n    \u003cimg src=\"https://packagephobia.now.sh/badge?p=facon\" alt=\"install size\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cb\u003eTiny utility (365B) to create DOM elements with manner.\u003c/b\u003e\u003c/p\u003e\n\nManually creating DOM nested elements can be very troublesome and verbose.\nFacon is a tiny utility that makes it easy to create nested DOM elements using template literals and extract references.\n\n\nThere's no magic nor restrictive template logic. All you get are DOM references so that you can do whatever you like and take full advantage of the powerful native DOM API.\n\n\n\u003e **TLDR**: Facon fixes the tiring process of creating and assembling nested DOM elements or `.innerHTML` where you later have to query for references manually.\n\n**~~lack of~~ Features**\n- Tiny (365 bytes gzipped)\n- Vanilla JS\n- Zero Dependencies\n- Fast\n\n\n## Install\n\n```\n$ npm install facon\n```\n\nThis module exposes three module definitions:\n\n* **ES Module**: `dist/facon.mjs`\n* **CommonJS**: `dist/facon.js`\n* **UMD**: `dist/facon.min.js`\n\nInclude facon:\n```js\n// ES6\nimport f from 'facon'\n\n// CJS\nconst f = require('facon');\n```\n\nThe script can also be directly included from [unpkg.com](https://unpkg.com):\n```html\n\u003cscript src=\"https://unpkg.com/facon\"\u003e\u003c/script\u003e\n```\n\n\n## Usage\n\n```js\nimport f from 'facon';\n\n// Create a \u003cb\u003e DOM element\nlet node = f`\u003cb\u003eHello World\u003c/b\u003e`;\ndocument.body.appendChild(node);\n\n// Create nested elements, and extract references\nlet node = f`\n\u003cdiv\u003e\n  \u003ch1 ref=\"title\"\u003eFaçon\u003c/h1\u003e\n  \u003cp ref=\"body\"\u003eCreate nested DOM elements with manner\u003c/p\u003e\n\u003c/div\u003e\n`;\ndocument.body.appendChild(node);\n\nlet {title, body} = node.collect();\ntitle.textContent = 'Hello World';\n\n// DOM node appends\nlet child = f`\u003cb\u003eHello World\u003c/b\u003e`;\nlet parent = f`\u003cdiv\u003e${child}\u003c/div\u003e`;\n```\n\n\n## API\n\n### facon(string)\nReturns: `Element`\n\nConstruct and returns a DOM `element`.\n\nThe returned `element` has a special `collect` method that is used to collect references to all elements with a `ref` attribute. Multiple elements containing identical `ref` attribute values result in an array of DOM references.\n\nDOM Elements can be composed together/appended like this:\n\n```js\nlet myNode = f`\u003cb\u003eHello World\u003c/b\u003e`;\nlet node = f`\u003cdiv\u003e${myNode}\u003c/div\u003e`;\n\n// or this way\nlet myNode = document.createElement('div');\nlet node = f`\u003cdiv\u003e${myNode}\u003c/div\u003e`;\n```\n\n\n### node.collect(options)\nReturns: `Object`\n\nMethod for extracting DOM references. E.g:\n\n```js\nconst node = f`\n  \u003cdiv\u003e\n    \u003ch1 ref=\"title\"\u003eHello world!\u003c/h1\u003e\n    \u003cul ref=\"list\"\u003e\n      \u003cli ref=\"items\"\u003eOne\u003c/li\u003e\n      \u003cli ref=\"items\"\u003eTwo\u003c/li\u003e\n      \u003cli ref=\"items\"\u003eThree\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003cdiv\u003e\n`;\nlet {title, list, items} = node.collect();\n// ~\u003e title is a dom reference to the inner h1 element.\n// ~\u003e list is a dom reference to the inner ul element.\n// ~\u003e items is an array of dom references to each li element.\n// ~\u003e node is by default the outer most element.\n```\n\n#### options.ref\nType: `String`\u003cbr\u003e\nDefault: `ref`\n\nAttribute name used for collecting references.\n\n#### options.keepAttribute\nType: `Boolean`\u003cbr\u003e\nDefault: `false`\n\nKeep `ref` attributes on elements after collecting the references. Defaults to `false`.\n\n#### options.to\nType: `Object`\u003cbr\u003e\nDefault: `{}`\n\nOptional object reference to assign to.\n\nThis can be handy if you have a component and want to be able to access references through `this`. E.g:\n```js\nclass MyElement extends Component {\n\n    view() {\n      const view = f`\n        \u003cdiv\u003e\n          \u003ch1 ref=\"title\"\u003eFaçon\u003c/h1\u003e\n          \u003cp ref=\"body\"\u003eCreate nested DOM elements with manner\u003c/p\u003e\n        \u003c/div\u003e\n      `;\n      view.collect({to:this});\n    }\n\n    // later ...\n\n    update() {\n      this.title = 'Hello World';\n      this.body = 'test';\n    }\n}\n```\n\n## License\n\nMIT © [Terkel Gjervig](https://terkel.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterkelg%2Ffacon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fterkelg%2Ffacon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterkelg%2Ffacon/lists"}