Skip to content

Make it work with coconut.html. #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
node_modules
*.js
*.js
*.n
/bin/example/static.html
6 changes: 6 additions & 0 deletions build-static.hxml
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
-cp src
-cp test/website
-lib coconut.html
-lib cix
-main Main
--interp
6 changes: 6 additions & 0 deletions haxe_libraries/coconut.html.hxml
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# @install: lix --silent download "gh://github.com/MVCoconut/coconut.html#50ce49e418c3412e780d6f2415cbf721cb4c7067" into coconut.html/0.0.0/github/50ce49e418c3412e780d6f2415cbf721cb4c7067
-lib coconut.ui
-lib tink_htmlstring
-cp ${HAXE_LIBCACHE}/coconut.html/0.0.0/github/50ce49e418c3412e780d6f2415cbf721cb4c7067/src
-D coconut.html=0.0.0
--macro coconut.html.macros.Setup.perform()
6 changes: 3 additions & 3 deletions haxe_libraries/coconut.ui.hxml
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# @install: lix --silent download "gh://github.com/MVCoconut/coconut.ui#ba6fc91a548cddd2bd1c87a3bb856ae934097ba7" into coconut.ui/0.10.0/github/ba6fc91a548cddd2bd1c87a3bb856ae934097ba7
# @install: lix --silent download "gh://github.com/MVCoconut/coconut.ui#91a1193f42bcb003a5f23c3af639ff8bdec33850" into coconut.ui/0.11.1/github/91a1193f42bcb003a5f23c3af639ff8bdec33850
-lib coconut.data
-lib tink_anon
-lib tink_hxx
-lib tink_lang
-cp ${HAXE_LIBCACHE}/coconut.ui/0.10.0/github/ba6fc91a548cddd2bd1c87a3bb856ae934097ba7/src
-D coconut.ui=0.10.0
-cp ${HAXE_LIBCACHE}/coconut.ui/0.11.1/github/91a1193f42bcb003a5f23c3af639ff8bdec33850/src
-D coconut.ui=0.11.1
-D coconut_ui
4 changes: 2 additions & 2 deletions haxe_libraries/tink_domspec.hxml
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# @install: lix --silent download "gh://github.com/haxetink/tink_domspec#880ae41ff4c346db4a7da567e74d360e8e31f14a" into tink_domspec/0.2.0/github/880ae41ff4c346db4a7da567e74d360e8e31f14a
# @install: lix --silent download "gh://github.com/haxetink/tink_domspec#7137a4ca5c4b16ff7c9834ab3e418d2847f5ad45" into tink_domspec/0.2.0/github/7137a4ca5c4b16ff7c9834ab3e418d2847f5ad45
-lib tink_macro
-lib tink_svgspec
-cp ${HAXE_LIBCACHE}/tink_domspec/0.2.0/github/880ae41ff4c346db4a7da567e74d360e8e31f14a/src
-cp ${HAXE_LIBCACHE}/tink_domspec/0.2.0/github/7137a4ca5c4b16ff7c9834ab3e418d2847f5ad45/src
-D tink_domspec=0.2.0
3 changes: 3 additions & 0 deletions haxe_libraries/tink_htmlstring.hxml
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# @install: lix --silent download "gh://github.com/haxetink/tink_htmlstring#d9ac1f8d0de0184e1e3dfc7ca5def710810ef153" into tink_htmlstring/0.1.0/github/d9ac1f8d0de0184e1e3dfc7ca5def710810ef153
-cp ${HAXE_LIBCACHE}/tink_htmlstring/0.1.0/github/d9ac1f8d0de0184e1e3dfc7ca5def710810ef153/src
-D tink_htmlstring=0.1.0
6 changes: 2 additions & 4 deletions src/bootstrap/Alert.hx
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
package bootstrap;

import coconut.vdom.View;

class Alert extends View {
static inline final prefix:String = 'alert';

Expand All @@ -19,8 +17,8 @@ class Alert extends View {
<div
role="alert"
className=${[
'${prefix}' => true,
'${prefix}-${variant}' => true,
'${prefix}' => true,
'${prefix}-${variant}' => true,
]}
>
<if ${dismissible}>
Expand Down
4 changes: 1 addition & 3 deletions src/bootstrap/Button.hx
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
package bootstrap;

import coconut.vdom.View;

class Button extends View {
static inline final prefix:String = 'btn';

Expand All @@ -13,7 +11,7 @@ class Button extends View {
@:attribute var href:String = null;
@:attribute var type:ButtonType = ButtonType.Default;

@:attribute function onclick(e:js.html.Event):Void {};
@:attribute function onclick(e:#if js js.html.Event #else Any #end):Void {};

@:attribute var className:ClassName = null;
@:attribute var children:String;
Expand Down
2 changes: 0 additions & 2 deletions src/bootstrap/CloseButton.hx
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
package bootstrap;

import coconut.vdom.View;

class CloseButton extends View {
@:attribute function onclick():Void;

Expand Down
3 changes: 0 additions & 3 deletions src/bootstrap/Container.hx
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
package bootstrap;

import haxe.extern.EitherType;
import coconut.vdom.View;

class Container extends View {
static inline final prefix:String = 'container';

Expand Down
2 changes: 2 additions & 0 deletions src/bootstrap/Dropdown.hx
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,15 @@ class Dropdown extends View {
';

function handleClick(e) if (!open) {
#if js
open = true;
e.stopPropagation();
var body = js.Browser.document.body;
body.addEventListener('click', function close() {
open = false;
body.removeEventListener('click', close);
});
#end
}
}

Expand Down
16 changes: 8 additions & 8 deletions src/bootstrap/ListGroup.hx
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ class ListGroup extends View {
@:attribute var flush:Bool = false;
@:attribute var horizontal:Bool = false; // TODO: use Size

@:attribute function items(tags:ListGroupItemTags):Children return null;
@:optional @:attribute function items(tags:ListGroupItemTags):Children;

@:attribute function links(tags:ListGroupLinkTags):Children return null;
@:optional @:attribute function links(tags:ListGroupLinkTags):Children;

@:attribute function buttons(tags:ListGroupButtonTags):Children return null;
@:optional @:attribute function buttons(tags:ListGroupButtonTags):Children;

function render() '<>
<let className=${className.add(['$prefix' => true, '$prefix-horizontal' => horizontal, 'flush' => flush])}>
Expand All @@ -36,7 +36,7 @@ class ListGroup extends View {
static var itemTags:ListGroupItemTags = {
item: function(attr) '
<li class=${attr.className.add([
'$prefix-item' => true,
'$prefix-item' => true,
'$prefix-item-${attr.variant}' => attr.variant != null,
'active' => attr.active,
'disabled' => attr.disabled,
Expand All @@ -49,8 +49,8 @@ class ListGroup extends View {
static var linkTags:ListGroupLinkTags = {
item: function(attr) '
<a class=${attr.className.add([
'$prefix-item' => true,
'$prefix-item-action' => true,
'$prefix-item' => true,
'$prefix-item-action' => true,
'$prefix-item-${attr.variant}' => attr.variant != null,
'active' => attr.active,
'disabled' => attr.disabled,
Expand All @@ -64,8 +64,8 @@ class ListGroup extends View {
static var buttonTags:ListGroupButtonTags = {
item: function(attr) '
<button class=${attr.className.add([
'$prefix-item' => true,
'$prefix-item-action' => true,
'$prefix-item' => true,
'$prefix-item-action' => true,
'$prefix-item-${attr.variant}' => attr.variant != null,
'active' => attr.active,
])}
Expand Down
4 changes: 2 additions & 2 deletions src/import.hx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import bootstrap.types.Variant;
import bootstrap.types.Size;
import bootstrap.Bootstrap;
import coconut.vdom.Renderer.hxx;
import coconut.vdom.*;
import coconut.ui.Renderer.hxx;
import coconut.ui.*;
import tink.domspec.ClassName;
import haxe.extern.EitherType;
33 changes: 23 additions & 10 deletions test/website/Main.hx
Original file line number Diff line number Diff line change
@@ -1,23 +1,31 @@
package;

import js.Browser.document;
import js.Browser.window;
import js.Browser.location;
#if js
import js.Browser.*;
#end
import bootstrap.*;
import bootstrap.Container;
import bootstrap.types.Variant;
import bootstrap.types.Size;
import bootstrap.Bootstrap;
import coconut.vdom.Renderer.hxx;
import coconut.vdom.View;
import coconut.ui.Children;
import coconut.ui.Renderer.hxx;
import coconut.ui.*;
import tink.domspec.ClassName;

class Main {
static function main() {
coconut.ui.Renderer.mount(
cast document.body.appendChild(document.createDivElement()), hxx('<Root />')
#if sys
sys.io.File.saveContent(
'bin/example/static.html',
sys.io.File.getContent('bin/example/index.html')
.split('<script src="example.js"></script>')
.join(coconut.html.Renderer.render('<Root />'))
);
#else
Renderer.mount(
cast document.body.appendChild(document.createDivElement()), '<Root />'
);
#end
}
}

Expand Down Expand Up @@ -46,7 +54,7 @@ class Root extends View {
</Col>
<Col>
<h1 class="display-4 my-5">Coconut.ui 🥥 <small><Badge variant=${Info}>bootstrap components</Badge></small></h1>

Useful links:
<ul>
<li><a href="https://github.com/markknol/coconut.bootstrap">coconut.bootstrap on GitHub</a></li>
Expand Down Expand Up @@ -604,7 +612,12 @@ class Root extends View {
}

public static function codeExample(attr:{children:String}) {
var formattedCode:String = js.Syntax.code("window.formatCode({0})", attr.children);
var formattedCode:String =
#if js
js.Syntax.code("window.formatCode({0})", attr.children);
#else
attr.children;
#end
return hxx('<pre class="border rounded p-4 my-1 mb-3"><code>${formattedCode}</code></pre>');
}

Expand Down