{"id":21647821,"url":"https://github.com/markknol/coconut.bootstrap","last_synced_at":"2025-04-11T19:33:01.190Z","repository":{"id":49639830,"uuid":"259961096","full_name":"markknol/coconut.bootstrap","owner":"markknol","description":"Bootstrap for Haxe/Coconut.ui","archived":false,"fork":false,"pushed_at":"2024-06-16T11:33:16.000Z","size":216,"stargazers_count":18,"open_issues_count":4,"forks_count":2,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-25T15:21:51.670Z","etag":null,"topics":["bootstrap","coconut","haxe"],"latest_commit_sha":null,"homepage":"https://haxe.stroep.nl/coconut-bootstrap/","language":"Haxe","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/markknol.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":null,"support":null},"funding":{"patreon":"markknol","custom":["https://www.paypal.me/markknol"]}},"created_at":"2020-04-29T15:13:33.000Z","updated_at":"2022-12-18T00:26:25.000Z","dependencies_parsed_at":"2022-08-01T02:08:48.395Z","dependency_job_id":null,"html_url":"https://github.com/markknol/coconut.bootstrap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markknol%2Fcoconut.bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markknol%2Fcoconut.bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markknol%2Fcoconut.bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markknol%2Fcoconut.bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markknol","download_url":"https://codeload.github.com/markknol/coconut.bootstrap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248467179,"owners_count":21108608,"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":["bootstrap","coconut","haxe"],"created_at":"2024-11-25T06:51:49.053Z","updated_at":"2025-04-11T19:33:01.162Z","avatar_url":"https://github.com/markknol.png","language":"Haxe","funding_links":["https://patreon.com/markknol","https://www.paypal.me/markknol"],"categories":[],"sub_categories":[],"readme":"# Bootstrap for Haxe / Coconut.ui\n\n[![Build project](https://github.com/markknol/coconut.bootstrap/workflows/Build%20project/badge.svg)](https://github.com/markknol/coconut.bootstrap/actions)\n\n**Coconut-Bootstrap is a complete re-implementation of the Bootstrap components using `coconut.ui`. It has no dependency on either bootstrap.js or jQuery. If you have `coconut.vdom` setup and `coconut.bootstrap` installed, you have everything you need.**\n\nMethods and events using jQuery is done imperatively by directly manipulating the DOM. In contrast, `coconut.ui` uses updates to the state to update the virtual DOM. In this way, Coconut-Bootstrap provides a more reliable solution by incorporating Bootstrap functionality into Coconut's virtual DOM. \n\n\u003e [Coconut.ui](https://github.com/MVCoconut/coconut.ui) is the React alternative for [Haxe](https://haxe.org/). It makes creating interactive UIs easy. Design views for each state using encapsulated components, coconut will update and render the right components when the data changed. Completely type-safe, you profit from all the Haxe goodness! Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.\n\n![coconut.bootstrap](https://raw.githubusercontent.com/markknol/coconut.bootstrap/master/bin/social.png)\n\n# Get started\n\n### Prerequisites\n\n* Install Yarn https://yarnpkg.com\n* Install VSCode https://code.visualstudio.com/\n* Install Haxe support for vscode https://marketplace.visualstudio.com/items?itemName=nadako.vshaxe\n* Install lix support for vscode https://marketplace.visualstudio.com/items?itemName=lix.lix\n\nThis project uses [lix.pm](https://github.com/lix-pm/lix.client) as Haxe package manager.\n\n### Project setup\n\nCreate a new project directory somewhere, open commandline here\n```\nyarn init\nyarn add lix\nyarn lix scope create\nyarn lix use haxe stable\nyarn lix install gh:markknol/coconut.bootstrap\nmd src\nmd bin\n```\n\nCreate _[src/build.hxml](build-example.hxml)_\n```hxml\n-cp src\n-lib coconut.vdom\n-lib coconut.bootstrap\n-main Main\n-dce full\n-D analyzer-optimize\n-D js_es=6\n-js bin/main.js\n```\n\nCreate _[bin/index.html](bin/example/index.html)_\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n\t\u003cmeta charset=\"utf8\" /\u003e\n\t\u003ctitle\u003e🥥 Coconut.ui Bootstrap Example\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody class=\"bg-light\"\u003e\n\t\u003clink\n\t\trel=\"stylesheet\"\n\t\thref=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css\"\n\t\tintegrity=\"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh\"\n\t\tcrossorigin=\"anonymous\"\n\t/\u003e\n \t\u003cscript src=\"main.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nCreate _[src/Main.hx](test/example/Main.hx)_\n```haxe\nimport js.Browser.document;\nimport js.Browser.window;\nimport coconut.vdom.Renderer.hxx;\nimport coconut.data.Model;\nimport coconut.ui.View;\nimport coconut.data.*;\nimport bootstrap.*;\n\nclass Main {\n\tstatic function main() {\n\t\tcoconut.ui.Renderer.mount(\n\t\t\tcast document.body.appendChild(document.createDivElement()), hxx('\u003cRoot /\u003e')\n\t\t);\n\t}\n}\n\nclass Root extends View {\n\t@:state var items:List\u003cItem\u003e = null;\n\n\tfunction add(_) {\n\t\titems = items.append(new Item({id: window.prompt(\"name\")}));\n\t}\n\n\tfunction remove(id:String) {\n\t\titems = items.filter((i -\u003e i.id != id);\n\t}\n\n\tfunction render() '\n\t\t\u003cContainer\u003e\n\t\t\t\u003cJumbotron\u003e\n\t\t\t\t\u003ch1\u003eHello, world!\u003c/h1\u003e\n\t\t\t\t\u003cp\u003eThis is an example of how to use Haxe, Coconut.ui and bootstrap at the same time.\u003c/p\u003e\n\t\t\t\u003c/Jumbotron\u003e\n\t\t\t\u003cif ${items.length \u003e 0}\u003e\n\t\t\t\t\u003cp\u003e\u003cstrong\u003eTotal items:\u003c/strong\u003e ${items.length}\u003c/p\u003e\n\t\t\t\u003celse\u003e\n\t\t\t\t\u003cp\u003eStart adding items in your list.\u003c/p\u003e\n\t\t\t\u003c/if\u003e\n\t\t\t\u003cListGroup className=\"mb-1\"\u003e\n\t\t\t\t\u003citems\u003e\n\t\t\t\t\t\u003cfor ${i in items}\u003e\n\t\t\t\t\t\t\u003citem\u003e${i.id} \u003cButton onclick=${remove(i.id)} variant=${Light} size=${Small} className=\"float-right\"\u003e❌\u003c/Button\u003e\u003c/item\u003e\n\t\t\t\t\t\u003c/for\u003e\n\t\t\t\t\u003c/items\u003e\n\t\t\t\u003c/ListGroup\u003e\n\t\t\t\u003cButton onclick=${add}\u003eAdd item\u003c/Button\u003e\n\t\t\u003c/Container\u003e\n\t';\n}\n\nclass Item implements Model {\n\t@:constant var id:String;\n}\n```\n\n### Open Visual Studio Code \n\n1. File \u003e Open folder \u003e Select your new project folder\n1. Build the project: Press CTRL-SHIFT-B \u003e select `build.hxml`\n1. Open the project: open `bin/index.html` in your browser, preferably using some webserver.\n\n\u003e You're ready to create cool stuff now\n\nA live demo of this example can be found here: \u003chttps://haxe.stroep.nl/coconut-bootstrap/example/\u003e\n\n### Importing components\n\nYou can import individual components like: `import bootstrap.Button`. If you want all the components, use `import bootstrap.*`.\n\n### Stylesheets\n\nBecause Coconut-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included CSS. However, a stylesheet is required to use these components. \n\nHow and which Bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN. A little more information about the benefits of using a CDN can be found in the [Bootstrap introduction](https://getbootstrap.com/docs/4.4/getting-started/introduction/).\n\n\n### Make production build\n\nSince we use ES6 output we need to use `terser` instead of `uglify` (from NPM) but we can use the `uglify` library from Haxelib (This library runs the node module after compilation completed).\n\n1. Add dependencies\n   ```\n   yarn add terser\n   yarn lix install haxelib:uglifyjs\n   ```\n1. Append to your build.hxml:\n   ```\n   -lib uglifyjs\n   -D uglifyjs_overwrite\n   -D uglifyjs_bin=node_modules/.bin/terser \n   #-D uglifyjs_disable\n   --no-traces\n   ```\n   if you go back to development, you can remove the hash from `-D uglifyjs_disable`.\n1. In vscode, compile again\n\n\u003e Ship it!\n\nNote to JavaScript developers:  \n\n- In Haxe there is no need to bundle sources, this is default compiler behavior. \n- Haxe omits `trace` statements when using `--no-traces`.\n- Unused imports / fields / classes have no impact on the final bundle size (due use of [`-dce full`](https://haxe.org/manual/cr-dce.html) and [`-D analyzer-optimize`](https://haxe.org/manual/cr-static-analyzer.html)).\n\n# Status\n\nThe project is still under development, but works with the components listed below.\n\n## Components\n\n\u003ctable width=100%\u003e\n\u003ctr\u003e\n\t\u003cth\u003eDone\u003c/th\u003e\n\t\u003cth\u003eTODO\u003c/th\u003e\n\u003ctr\u003e\n\u003ctd valign=top\u003e\n\n * [x] Container\n * [x] Row\n * [x] Col\n * [x] Alert\n * [x] Badge / Pill\n * [x] Breadcrumb\n * [x] Buttons\n * [x] Button Group\n * [x] Card\n * [x] Dropdown\n * [x] Image\n * [x] Jumbotron\n * [x] List Group\n * [x] Pagination\n * [x] Progress\n * [x] Spinners\n * [x] Table\n\n \u003c/td\u003e\n \u003ctd valign=top\u003e\n \n * [ ] Figures\n * [ ] Accordion\n * [ ] Carousel\n * [ ] Forms\n * [ ] Input Group\n * [ ] Modal\n * [ ] Navs\n * [ ] Navbar\n * [ ] Overlays\n * [ ] Popovers\n * [ ] Tabs\n * [ ] Tooltips\n * [ ] Toasts\n\n \u003c/td\u003e\n \u003c/tr\u003e\n \u003c/table\u003e\n\n\u003e **Note:** Because there aren't components doesn't mean you can't use it, for example to create a spinner you can already use `\u003cdiv class=\"spinner-border\" role=\"status\"\u003e\u003cspan class=\"sr-only\"\u003eLoading...\u003c/span\u003e\u003c/div\u003e`. \n\nA live demo of all the components can be found here \u003chttps://haxe.stroep.nl/coconut-bootstrap/\u003e\n\n## Browser support\n\nWe aim to support all browsers supported by both coconut and Bootstrap.\n\n---\n\nThis project is heavily inspired by \u003chttps://react-bootstrap.netlify.app/getting-started/introduction/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkknol%2Fcoconut.bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkknol%2Fcoconut.bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkknol%2Fcoconut.bootstrap/lists"}