Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork2
Bootstrap for Haxe/Coconut.ui
markknol/coconut.bootstrap
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Coconut-Bootstrap is a complete re-implementation of the Bootstrap components usingcoconut.ui. It has no dependency on either bootstrap.js or jQuery. If you havecoconut.vdom setup andcoconut.bootstrap installed, you have everything you need.
Methods 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.
Coconut.ui is the React alternative forHaxe. 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.
- Install Yarnhttps://yarnpkg.com
- Install VSCodehttps://code.visualstudio.com/
- Install Haxe support for vscodehttps://marketplace.visualstudio.com/items?itemName=nadako.vshaxe
- Install lix support for vscodehttps://marketplace.visualstudio.com/items?itemName=lix.lix
This project useslix.pm as Haxe package manager.
Create a new project directory somewhere, open commandline here
yarn inityarn add lixyarn lix scope createyarn lix use haxe stableyarn lix install gh:markknol/coconut.bootstrapmd srcmd binCreatesrc/build.hxml
-cp src-lib coconut.vdom-lib coconut.bootstrap-mainMain-dce full-D analyzer-optimize-D js_es=6-js bin/main.js
Createbin/index.html
<!DOCTYPE html><htmllang="en"><head><metacharset="utf8"/><title>🥥 Coconut.ui Bootstrap Example</title></head><bodyclass="bg-light"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"crossorigin="anonymous"/><scriptsrc="main.js"></script></body></html>
Createsrc/Main.hx
importjs.Browser.document;importjs.Browser.window;importcoconut.vdom.Renderer.hxx;importcoconut.data.Model;importcoconut.ui.View;importcoconut.data.*;importbootstrap.*;classMain {staticfunctionmain() {coconut.ui.Renderer.mount(castdocument.body.appendChild(document.createDivElement()),hxx('<Root />'));}}classRootextendsView {@:statevaritems:List<Item>=null;functionadd(_) {items=items.append(newItem({id:window.prompt("name")}));}functionremove(id:String) {items=items.filter((i->i.id!=id);}functionrender()'<Container><Jumbotron><h1>Hello, world!</h1><p>This is an example of how to use Haxe, Coconut.ui and bootstrap at the same time.</p></Jumbotron><if${items.length>0}><p><strong>Total items:</strong>${items.length}</p><else><p>Start adding items in your list.</p></if><ListGroup className="mb-1"><items><for${iinitems}><item>${i.id} <Button onclick=${remove(i.id)} variant=${Light} size=${Small} className="float-right">❌</Button></item></for></items></ListGroup><Button onclick=${add}>Add item</Button></Container>';}classItemimplementsModel {@:constantvarid:String;}
- File > Open folder > Select your new project folder
- Build the project: Press CTRL-SHIFT-B > select
build.hxml - Open the project: open
bin/index.htmlin your browser, preferably using some webserver.
You're ready to create cool stuff now
A live demo of this example can be found here:https://haxe.stroep.nl/coconut-bootstrap/example/
You can import individual components like:import bootstrap.Button. If you want all the components, useimport bootstrap.*.
Because 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.
How 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 theBootstrap introduction.
Since we use ES6 output we need to useterser instead ofuglify (from NPM) but we can use theuglify library from Haxelib (This library runs the node module after compilation completed).
- Add dependencies
yarn add terseryarn lix install haxelib:uglifyjs - Append to your build.hxml:if you go back to development, you can remove the hash from
-lib uglifyjs-D uglifyjs_overwrite-D uglifyjs_bin=node_modules/.bin/terser #-D uglifyjs_disable--no-traces-D uglifyjs_disable. - In vscode, compile again
Ship it!
Note to JavaScript developers:
- In Haxe there is no need to bundle sources, this is default compiler behavior.
- Haxe omits
tracestatements when using--no-traces. - Unused imports / fields / classes have no impact on the final bundle size (due use of
-dce fulland-D analyzer-optimize).
The project is still under development, but works with the components listed below.
| Done | TODO |
|---|---|
|
|
Note: Because there aren't components doesn't mean you can't use it, for example to create a spinner you can already use
<div role="status"><span>Loading...</span></div>.
A live demo of all the components can be found herehttps://haxe.stroep.nl/coconut-bootstrap/
We aim to support all browsers supported by both coconut and Bootstrap.
This project is heavily inspired byhttps://react-bootstrap.netlify.app/getting-started/introduction/
About
Bootstrap for Haxe/Coconut.ui
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.