{"id":17956387,"url":"https://github.com/o0101/bepis","last_synced_at":"2025-03-25T02:31:19.734Z","repository":{"id":42956779,"uuid":"231626293","full_name":"o0101/bepis","owner":"o0101","description":":dog2: bepis - Write components concisely. Like to play? https://cutt.ly/bepis?drincc!","archived":false,"fork":false,"pushed_at":"2023-05-07T16:15:38.000Z","size":586,"stargazers_count":50,"open_issues_count":5,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T11:56:57.070Z","etag":null,"topics":["framework","html","js-framework"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/o0101.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":"crislin2046","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-01-03T16:38:03.000Z","updated_at":"2023-01-15T19:12:32.000Z","dependencies_parsed_at":"2024-02-01T16:16:20.233Z","dependency_job_id":null,"html_url":"https://github.com/o0101/bepis","commit_stats":null,"previous_names":["crisdosyago/bepis","crislin2046/bepis","o0101/bepis"],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o0101%2Fbepis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o0101%2Fbepis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o0101%2Fbepis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/o0101%2Fbepis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/o0101","download_url":"https://codeload.github.com/o0101/bepis/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245385451,"owners_count":20606649,"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":["framework","html","js-framework"],"created_at":"2024-10-29T10:37:38.628Z","updated_at":"2025-03-25T02:31:19.451Z","avatar_url":"https://github.com/o0101.png","language":"JavaScript","readme":"\u003cp align=center\u003e\n  \u003cimg src=\"readme-images/bepis-logo.jpg?raw=true\" alt=\"Bepis Logo\"\u003e\n\u003c/p\u003e\n\n# :dog2: [bepis](#drincc) ![download badge](https://img.shields.io/npm/dt/bepis) ![version badge](https://img.shields.io/npm/v/bepis/latest)\n\nDynamic HTML + CSS in JavaScript. Implemented using a custom parser for a new HTML templating DSL.\n\n[It Is On Npm](https://www.npmjs.com/package/bepis)\n\n```console\nnpm i bepis\n```\n\n## Examples\n\nSimple keyed list, play with it [here](https://codesandbox.io/s/bepis-latest-playground-6cggy):\n\nFirst, import:\n```js\nimport { w, clone } from \"bepis\";\n```\n\nThen set up some data:\n```js\nconst myItems = [\n  { name: \"Screw\", description: \"Part\", key: \"a3\" },\n  { name: \"Moxie\", description: \"Intangible\", key: \"x5\" },\n  { name: \"Sand\", description: \"Material\", key: \"p4\" },\n];\nconst newName = \"Mojo\";\n```\n\nMake some views:\n```js\nconst KeyedItem = item =\u003e\n  w` ${item.key} \n    li p, \n      :text ${item.description}.\n      a ${{ href: item.url }} :text ${item.name}..`;\n\nconst SingletonList = items =\u003e\n  w` ${true} \n    ul :map ${items} ${KeyedItem}`;\n```\n\nRender the data and mount the view to the document\n```js\nSingletonList(myItems)(document.body);\n```\n\nMake a change and see it\n```js\nconst myChangedItems = clone(myItems);\nmyChangedItems[1].name = newName;\n\nsetTimeout(() =\u003e SingletonList(myChangedItems), 2000);\n```\n\n## :text, :map and :comp directives.\n\n- Use `:text` to insert text, and `:map` to insert lists, as in the above example.\n- Use `:comp` to insert components:\n  ```javascript\n  w`\n    main,\n      h1 ${\"Demo\"}.\n      :comp ${myChangedItems} ${SingletonList}..`\n  ```\n\n## Basics\n\n- Use template literals tagged with `w`. This creates a 'bepis'\n- Use ',' operator to save an insertion point\n- Use '.' operator to load an insertion point\n- `\u003ctag name\u003e ${attributes} ${styles}` is the format.\n- Whitespace is ignored.\n\n## Up next\n\n- minimal diffing with updator functions.\n\n## Related Projects\n\nI don't know. I didn't search any \"prior art.\" Let me know how I reinvented this beautiful wheel by opening a PR request.\n\n\n----------\n\n\u003cp align=center\u003e\n  \u003cimg src=\"readme-images/bepiswatnsyou.jpg?raw=true\" alt=\"Bepis Wants You\" width=\"80%\"\u003e\n\u003c/p\u003e\n","funding_links":["https://github.com/sponsors/crislin2046"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fo0101%2Fbepis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fo0101%2Fbepis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fo0101%2Fbepis/lists"}