{"id":27689533,"url":"https://github.com/idchlife/breakster","last_synced_at":"2025-07-26T13:14:40.490Z","repository":{"id":92885279,"uuid":"87636657","full_name":"idchlife/breakster","owner":"idchlife","description":"Tool that breaks your html into \"reacty\" (React, Preact) components, saving their code into files. Imports of children components, JSX with children components, etc - you're all set.","archived":false,"fork":false,"pushed_at":"2017-05-17T08:14:52.000Z","size":58,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-25T10:17:08.752Z","etag":null,"topics":["cli","code-generation","preact","react"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/idchlife.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2017-04-08T13:42:48.000Z","updated_at":"2022-11-17T10:29:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"6868525a-9422-436d-8867-1ed4006b6cce","html_url":"https://github.com/idchlife/breakster","commit_stats":{"total_commits":31,"total_committers":1,"mean_commits":31.0,"dds":0.0,"last_synced_commit":"e5255c4f49ebc6a2888677be1cdf9d27ab71ac9e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idchlife%2Fbreakster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idchlife%2Fbreakster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idchlife%2Fbreakster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idchlife%2Fbreakster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/idchlife","download_url":"https://codeload.github.com/idchlife/breakster/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250796363,"owners_count":21488713,"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":["cli","code-generation","preact","react"],"created_at":"2025-04-25T10:17:14.916Z","updated_at":"2025-04-25T10:17:15.436Z","avatar_url":"https://github.com/idchlife.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Breakster\n\n[![Build Status](https://travis-ci.org/idchlife/breakster.svg?branch=master)](https://travis-ci.org/idchlife/breakster)\n\nTool that breaks your html into \"reacty\" (React, Preact) components, saving their\ncode into files. Imports of children components, JSX with children components,\netc - you're all set.\n\n## Installation\n\n```\n  npm install breakster --global\n```\n\n## Usage\n\nBasically:\n\n```\n   breakster --entry=your_html.html --outDir=/your_directory\n   \n```\n\nFirst, let's observe this example html that will be breaked into files with components code in them.\n(taken from tests folder, file entry1.html)\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003e\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv b-comp b-dialect=\"typescript\" b-name=\"IndexPage\"\u003e\n      \u003cdiv b-comp b-name=\"Layout\"\u003e\n        \u003cheader\u003e\n          \u003cdiv\u003eUser\u003c/div\u003e\n          \u003cdiv b-comp b-name=\"UserInfo\"\u003e\n            \u003cdiv class=\"user-info-class\"\u003eUsername: Alan\u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/header\u003e\n        \u003cdiv b-comp b-name=\"Product\"\u003e\n          \u003cdiv\u003eProduct name\u003c/div\u003e\n          \u003cdiv\u003eProduct price\u003c/div\u003e\n          \u003cdiv\u003eProduct count\u003c/div\u003e\n          \u003cdiv b-comp b-jsx-lib=\"react\" b-name=\"BuyButton\"\u003e\n            \u003cbutton\u003ebuy\u003c/button\u003e\n            \u003cdiv\u003e\n              \u003cdiv\u003eBuy as\u003c/div\u003e\n              \u003cdiv b-comp b-name=\"UserInfo\"\u003e\u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003ctable b-comp b-name=\"Table\"\u003e\n          \u003cthead\u003e\n            \u003ctr\u003e\n              \u003ctd\u003eHeader first\u003c/td\u003e\n              \u003ctd\u003eHeader second\u003c/td\u003e\n              \u003ctd\u003eHeader third\u003c/td\u003e\n            \u003c/tr\u003e\n          \u003c/thead\u003e\n          \u003ctbody\u003e\n            \u003ctr b-comp b-name=\"TableRow\"\u003e\n              \u003ctd\u003eFirst\u003c/td\u003e\n              \u003ctd\u003eSecond\u003c/td\u003e\n              \u003ctd\u003eThird\u003c/td\u003e\n            \u003c/tr\u003e\n          \u003c/tbody\u003e\n        \u003c/table\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nSo, you see some attributes that are not your common html attributes.\nWith the help of those Breakster knows what should be breaked and saved into components.\n\nIn the output folder you would see:\n\n![image](https://cloud.githubusercontent.com/assets/4563032/24829271/181fd4c2-1c77-11e7-993f-e6852cdad656.png)\n\nAnd this is what inside of IndexPage.tsx file:\n\n![image](https://cloud.githubusercontent.com/assets/4563032/24930721/3579403c-1f13-11e7-9948-447550141c7f.png)\n\n(the return of render method could not be that pretty (it's WIP), maybe you will need some tweeks with indentation)\n\nDon't be frightened by .tsx files. It's just the behaviour of b-dialect attribute at top div. Without this attribute Breakster will save .jsx files.\n\n### Attributes overview\n\n- **b-comp** - main attribute that tells that this is a root element for future component.\nFuture component could not live without a name, so b-comp always should be used with b-name.\n- **b-name=\"ComponentName\"** - this attribute defines components name. Name of component class and also name of file, where code will be saved.\n- **b-dialect=\"javascript|typescript\"** - this attribute tells which dialect your code should be in. For now there are 2: \"javascript\" (default, should not be used, because it's enabled by default) and \"typescript\". File for component is saved with extension based on chosen dialect. Jsx or Tsx for now. **if you have this attribute at top level element, all inner component would use dialect defined at top, as in example**\n- **b-jsx-lib=\"preact|react\"** - this attribute will tell which `reacty` (react-like api) should be used in this component. Default is Preact. What do I mean by \"used in this component\"? Import will be from library you define.\n\n## Development\n\nIssues, tests and ideas are welcome!\n\n## Contributing\n\n1. Fork it ( https://github.com/idchlife/breakster/fork )\n2. Create your feature branch (git checkout -b my-new-feature)\n3. Commit your changes (git commit -am 'Add some feature')\n4. Push to the branch (git push origin my-new-feature)\n5. Create a new Pull Request\n\n## Contributors\n\n- [idchlife](https://github.com/idchlife) idchlife - creator, maintainer","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidchlife%2Fbreakster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fidchlife%2Fbreakster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidchlife%2Fbreakster/lists"}