Skip to content

Commit

Permalink
Added initial-routing
Browse files Browse the repository at this point in the history
  • Loading branch information
David-OConnor committed Dec 17, 2018
1 parent e0719fe commit 46bfb9c
Show file tree
Hide file tree
Showing 24 changed files with 378 additions and 502 deletions.
3 changes: 1 addition & 2 deletions Cargo.toml
Expand Up @@ -24,8 +24,6 @@ wasm-bindgen-futures = "0.3.6"

# Markdown conversion
pulldown-cmark = "^0.2.0"
#syntect = "^3.0.2" // todo bugs out
regex = "^1.1.0"

[dependencies.web-sys]
version = "0.3.4"
Expand All @@ -46,6 +44,7 @@ features = [
"Node",
"NodeList",
"Performance",
"PopStateEvent",
"Request",
"RequestInit",
"RequestMode",
Expand Down
2 changes: 1 addition & 1 deletion LICENSE
@@ -1,4 +1,4 @@
Copyright (c) 2018 David O'Connor
Copyright (c) 2019 David O'Connor

Permission is hereby granted, free of charge, to any
person obtaining a copy of this software and associated
Expand Down
71 changes: 47 additions & 24 deletions README.md
Expand Up @@ -23,8 +23,8 @@ And wasm-bindgen: `cargo install wasm-bindgen-cli`
### The theoretical minimum
To start, clone [This quickstart repo](https://github.com/David-OConnor/seed-quickstart),
run `build.sh` or `build.ps1` in a terminal, then start a dev server that supports WASM.
For example, with [Python](https://www.python.org/downloads/) installed, run `python server.py`.
(Linux users may need to run `python3 server.py`.)
For example, with [Python](https://www.python.org/downloads/) installed, run `python serve.py`.
(Linux users may need to run `python3 serve.py`.)
Once you change your package name, you'll
need to tweak the html file and build script, as described below.

Expand Down Expand Up @@ -170,13 +170,13 @@ fn view(model: Model) -> El<Msg> {
// When passing numerical values to style!, "px" is implied.
"border" => "2px solid #004422"; "padding" => 20
},
// We can use normal Rust code and comments in the view.
h3![ format!("{} {}{} so far", model.count, model.what_we_count, plural) ],
button![ simple_ev("click", Msg::Increment), "+" ],
button![ simple_ev("click", Msg::Decrement), "-" ],
// We can use normal Rust code and comments in the view.
h3![ format!("{} {}{} so far", model.count, model.what_we_count, plural) ],
button![ simple_ev("click", Msg::Increment), "+" ],
button![ simple_ev("click", Msg::Decrement), "-" ],

// Optionally-displaying an element
if model.count >= 10 { h2![ style!{"padding" => 50}, "Nice!" ] } else { seed::empty() }
// Optionally-displaying an element
if model.count >= 10 { h2![ style!{"padding" => 50}, "Nice!" ] } else { seed::empty() }

],
success_level(model.count), // Incorporating a separate component
Expand Down Expand Up @@ -212,8 +212,8 @@ The Quickstart repo includes these, but you'll still need to do the rename. You
`./build.sh` or `.\build.ps1`

For development, you can view your app using a shimmed Python dev server described above.
(Set up [this mime-type shim](https://github.com/David-OConnor/seed-quickstart/blob/master/server.py)
from the quickstart repo, and run `python server.py`).
(Set up [this mime-type shim](https://github.com/David-OConnor/seed-quickstart/blob/master/serve.py)
from the quickstart repo, and run `python serve.py`).

For details, reference [the wasm-bindgen documention](https://rustwasm.github.io/wasm-bindgen/whirlwind-tour/basic-usage.html).
In the future, I'd like the build script and commands above to be replaced by [wasm-pack](https://github.com/rustwasm/wasm-pack).
Expand Down Expand Up @@ -468,7 +468,7 @@ extern crate seed;

div![]
```
These macros accept any combination (0 or 1 per) of the following parameters:
These macros accept any combination of the following parameters:
- One [Attrs](https://docs.rs/seed/0.1.6/seed/dom_types/struct.Attrs.html) struct
- One [Style](https://docs.rs/seed/0.1.6/seed/dom_types/struct.Style.html) struct
- One or more [Listener](https://docs.rs/seed/0.1.6/seed/dom_types/struct.Listener.html) structs, which handle events
Expand Down Expand Up @@ -525,10 +525,10 @@ the same one more than once:

Setting an InputElement's `checked` property is done through normal attributes:
```rust
input![ attrs!{"type" => "checkbox"; "checked" => true ]
input![ attrs!{"type" => "checkbox"; "checked" => true} ]
```

To edit Attrs or Styles you've created, you can edit their .vals HashMap. To add
To change Attrs or Styles you've created, edit their .vals HashMap. To add
a new part to them, use their .add method:
```rust
let mut attributes = attrs!{};
Expand Down Expand Up @@ -559,6 +559,19 @@ fn view(model: Model) -> El<Msg> {
}
```

We can combine Attrs and Style instances using their `merge` methods, which take
an &Attrs and &Style respectively. This can be used to compose styles from reusable parts.
Example:
```rust
let base_style = !style{"color" => "lavender"};

div![
h1![ &base_style.merge(&style!{"grid-row" => "1 / 2"}) "First row" ],
h1![ &base_style.merge(&style!{"grid-row" => "2 / 3"}) "Second row" ],
]
```


Overall: we leverage of Rust's strict type system to flexibly-create the view
using normal Rust code.

Expand Down Expand Up @@ -885,10 +898,6 @@ function run() {
```
Note that you don't need to pass your Msg enum; it's inferred from the update function.

### Comments in the view
The Element-creation macros used to create views are normal Rust code, you can
use comments in them normally: either on their own line, or in line.


### Logging in the web browser
To output to the web browser's console (ie `console.log()` in JS), use `web_sys::console_log1`,
Expand Down Expand Up @@ -942,11 +951,12 @@ let data = serde_json::from_str(&loaded_serialized).unwrap();

```

### Display markdown
### Display markdown and raw HTML
Seed supports creating elements from markdown text, using [pulldown-cmark](https://github.com/raphlinus/pulldown-cmark)
internally. Use the [El::from_markdown()](https://docs.rs/seed/0.1.6/seed/dom_types/struct.El.html#method.from_markdown)
method to create an element that accepts a markdown &str as its only parameter, and displays
it normally as html.
it normally as html. Note that it does not support syntax highlighting. You can render raw HTML with `El::from_html(html)`, where `html` is a
&str of HTML.

Example:
```rust
Expand All @@ -958,13 +968,26 @@ fn view(model: Model) -> El<Msg> {
Let's set the existence-of-God issue aside for a later volume,
and just [learn to code](https://play.rust-lang.org/).
";
"
;

let html =
"
<div>
<p>It is a truth universally acknowledged, that a single man in
possession of a good fortune, must be in want of a good time./p>
</div>
"
;

div![
El::from_markdown(markdown)
El::from_html(html)
]
}



```

### Building a release version
Expand Down Expand Up @@ -1016,8 +1039,8 @@ of your familiarity with Rust.

- Complete documentation that always matches the current version. Getting examples working, and
starting a project should be painless, and require nothing beyond this guide.

- An API that's easy to read, write, and understand.
- Concise, flexibilty vew syntax that's easy to read and write.


### A note on view syntax
Expand Down Expand Up @@ -1081,10 +1104,10 @@ You may choose
this approach over Elm if you're already comfortable with Rust, want the performance
benefits, or don't want to code business logic in a purely-functional langauge.

Compared to React, for example, you may appreciate the consistency of how to write apps:
Compared with React, you may appreciate the consistency of how to write apps:
There's no distinction between logic and display code; no restrictions on comments;
no distinction between components and normal functions. The API is
flexible, and avoids the OOP boilerplate.
flexible, and avoids OOP boilerplate.

I also hope that config, building, and dependency-management is cleaner with Cargo and
wasm-bindgen than with npm.
Expand Down
55 changes: 52 additions & 3 deletions examples/counter/pkg/counter.js
Expand Up @@ -141,6 +141,15 @@ function GetOwnOrInheritedPropertyDescriptor(obj, id) {
return {}
}

const __widl_f_set_inner_html_Element_target = GetOwnOrInheritedPropertyDescriptor(typeof Element === 'undefined' ? null : Element.prototype, 'innerHTML').set || function() {
throw new Error(`wasm-bindgen: Element.innerHTML does not exist`);
};

__exports.__widl_f_set_inner_html_Element = function(arg0, arg1, arg2) {
let varg1 = getStringFromWasm(arg1, arg2);
__widl_f_set_inner_html_Element_target.call(getObject(arg0), varg1);
};

const __widl_f_target_Event_target = GetOwnOrInheritedPropertyDescriptor(typeof Event === 'undefined' ? null : Event.prototype, 'target').get || function() {
throw new Error(`wasm-bindgen: Event.target does not exist`);
};
Expand Down Expand Up @@ -259,6 +268,21 @@ __exports.__widl_f_value_HTMLTextAreaElement = function(ret, arg0) {

};

const __widl_f_back_History_target = typeof History === 'undefined' ? null : History.prototype.back || function() {
throw new Error(`wasm-bindgen: History.back does not exist`);
};

__exports.__widl_f_back_History = function(arg0, exnptr) {
try {
__widl_f_back_History_target.call(getObject(arg0));
} catch (e) {
const view = getUint32Memory();
view[exnptr / 4] = 1;
view[exnptr / 4 + 1] = addHeapObject(e);

}
};

const __widl_f_append_child_Node_target = typeof Node === 'undefined' ? null : Node.prototype.appendChild || function() {
throw new Error(`wasm-bindgen: Node.appendChild does not exist`);
};
Expand Down Expand Up @@ -333,6 +357,18 @@ __exports.__widl_f_length_NodeList = function(arg0) {
return __widl_f_length_NodeList_target.call(getObject(arg0));
};

__exports.__widl_instanceof_PopStateEvent = function(idx) {
return getObject(idx) instanceof PopStateEvent ? 1 : 0;
};

const __widl_f_state_PopStateEvent_target = GetOwnOrInheritedPropertyDescriptor(typeof PopStateEvent === 'undefined' ? null : PopStateEvent.prototype, 'state').get || function() {
throw new Error(`wasm-bindgen: PopStateEvent.state does not exist`);
};

__exports.__widl_f_state_PopStateEvent = function(arg0) {
return addHeapObject(__widl_f_state_PopStateEvent_target.call(getObject(arg0)));
};

__exports.__widl_instanceof_Window = function(idx) {
return getObject(idx) instanceof Window ? 1 : 0;
};
Expand All @@ -344,6 +380,17 @@ __exports.__widl_f_document_Window = function(arg0) {

};

__exports.__widl_f_history_Window = function(arg0, exnptr) {
try {
return addHeapObject(getObject(arg0).history);
} catch (e) {
const view = getUint32Memory();
view[exnptr / 4] = 1;
view[exnptr / 4 + 1] = addHeapObject(e);

}
};

const __widl_f_log_1__target = console.log;

__exports.__widl_f_log_1_ = function(arg0) {
Expand Down Expand Up @@ -428,9 +475,11 @@ __exports.__wbindgen_cb_drop = function(i) {
return 0;
};

__exports.__wbindgen_closure_wrapper765 = function(a, b, _ignored) {
const f = wasm.__wbg_function_table.get(2);
const d = wasm.__wbg_function_table.get(3);
__exports.__wbindgen_cb_forget = dropObject;

__exports.__wbindgen_closure_wrapper790 = function(a, b, _ignored) {
const f = wasm.__wbg_function_table.get(6);
const d = wasm.__wbg_function_table.get(7);
const cb = function(arg0) {
this.cnt++;
let a = this.a;
Expand Down
Binary file modified examples/counter/pkg/counter_bg.wasm
Binary file not shown.
File renamed without changes.
4 changes: 2 additions & 2 deletions examples/counter/src/lib.rs
Expand Up @@ -35,7 +35,7 @@ enum Msg {
}

/// The sole source of updating the model; returns a fresh one.
fn update(msg: Msg, model: Model) -> Model {
fn update(history: &History<Model, Msg>, msg: Msg, model: Model) -> Model {
match msg {
Msg::Increment => Model {count: model.count + 1, ..model},
Msg::Decrement => Model {count: model.count - 1, ..model},
Expand Down Expand Up @@ -98,5 +98,5 @@ fn view(model: Model) -> El<Msg> {

#[wasm_bindgen]
pub fn render() {
seed::run(Model::default(), update, view, "main");
seed::run(Model::default(), update, view, "main", None);
}
2 changes: 1 addition & 1 deletion examples/homepage/README.md
@@ -1,4 +1,4 @@
The Seed homepage, also serving as an example. Includes
lots of view syntax, and elements created from markdown.
//! simple interactions, markdown elements, basic routing, and lots of view markup.

# [Homepage repo](https://github.com/David-OConnor/seed-homepage)
3 changes: 0 additions & 3 deletions examples/server_interaction/pkg/appname.d.ts

This file was deleted.

0 comments on commit 46bfb9c

Please sign in to comment.