Skip to content

Commit

Permalink
Working on updating examples.
Browse files Browse the repository at this point in the history
  • Loading branch information
foxdonut committed Mar 31, 2017
1 parent 8ba92c9 commit c578fb7
Show file tree
Hide file tree
Showing 89 changed files with 650 additions and 22,914 deletions.
1 change: 0 additions & 1 deletion examples/library/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@
"@types/signals": "0.0.17",
"ava": "^0.18.2",
"browser-env": "^2.0.21",
"cross-env": "^3.1.4",
"jquery": "^3.1.1",
"source-map-loader": "^0.1.6",
"ts-loader": "^2.0.0",
Expand Down
1 change: 0 additions & 1 deletion examples/random-gif/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-env": "^1.1.8",
"browser-env": "^2.0.21",
"cross-env": "^3.1.4",
"jquery": "^3.1.1",
"meiosis-tracer": "^1.0.0",
"webpack": "^2.2.1"
Expand Down
18 changes: 13 additions & 5 deletions examples/temperatures/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,22 @@
<head>
<link rel="shortcut icon" size="16x16, 32x32, 48x48, 64x64, 128x128, 256x256" href="/favicon.ico">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/public/css/base-min.css">
<link rel="stylesheet" href="/public/css/pure-min.css">
<title>Meiosis Example - Temperatures</title>
</head>
<body class="container">
<div>
<a href="http://meiosis.js.org" target="_blank"><img src="/public/images/meiosis.png" style="padding-bottom: 20px; margin-right: 8px" width="53px"></a>
<h2 style="display: inline;">Meiosis Example - Temperatures</h2>
<body class="pure-g">
<div class="pure-u-1-4"></div>
<div class="pure-u-1-2">
<div class="pure-g">
<span class="pure-u-1-16">
<a href="http://meiosis.js.org" target="_blank"><img src="/public/images/meiosis.png" style="margin-right: 8px; margin-top: 8px" width="53px"></a>
</span>
<span class="pure-u-1-2">
<h2>Meiosis Example - Temperatures</h2>
</span>
</div>
<div><a href="/index.html">Back to list of examples</a></div>
<div><a href="https://github.com/foxdonut/meiosis-examples/tree/master/examples/temperatures" target="_blank">Source code</a></div>
<hr>
Expand All @@ -20,4 +29,3 @@ <h2 style="display: inline;">Meiosis Example - Temperatures</h2>
</body>
<script src="/examples/temperatures/build/generated-app.js"></script>
</html>

3 changes: 1 addition & 2 deletions examples/temperatures/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"homepage": "https://github.com/foxdonut/meiosis-examples#readme",
"dependencies": {
"flyd": "^0.2.4",
"immutable": "^3.8.1",
"lodash": "^4.17.4",
"meiosis": "^1.0.0",
"preact": "^7.2.1",
"validate.js": "^0.11.1"
Expand All @@ -34,7 +34,6 @@
"babel-core": "^6.23.1",
"babel-loader": "^6.4.0",
"babel-preset-env": "1.1.8",
"cross-env": "^3.2.3",
"meiosis-tracer": "^1.0.0",
"react-jsx": "^1.0.0",
"webpack": "^2.2.1"
Expand Down
77 changes: 48 additions & 29 deletions examples/temperatures/src/app/index.js
Original file line number Diff line number Diff line change
@@ -1,34 +1,53 @@
import _ from "lodash";
import { createView } from "./view.jsx";
import { date } from "../date";
import { entry } from "../entry";
import { temperature } from "../temperature";
import { nest } from "../util/nest";

export const nest = (update, path) => modelChange =>
update(model => model.updateIn(path, modelChange));

export const save = (model, update) => evt => {
evt.preventDefault();

const errors = {
date: { errors: date.validateModel(model.date) },
entry: { errors: entry.validateModel(model.entry) }
};
update(model =>
Object.keys(errors).reduce(
(m, key) => m.setIn([key, "errors"], errors[key].errors),
model
)
);

if (!(errors.date.errors || errors.entry.errors)) {
const air = model.temperature.air;
const water = model.temperature.water;

update(model =>
model.
set("saved", "Entry #" + model.getIn(["entry", "value"]) + " on " + model.getIn(["date", "value"]) + ":" +
" Air: " + air.value + " \xB0" + air.units +
" Water: " + water.value + " \xB0" + water.units).
setIn(["entry", "value"], "").
setIn(["date", "value"], "")
);
const createActions = update => ({
save: evt => {
evt.preventDefault();

update(model => {
const errors = {
date: { errors: date.validateModel(model.date) },
entry: { errors: entry.validateModel(model.entry) }
};
model = Object.keys(errors).reduce(
(m, key) => _.set(m, [key, "errors"], errors[key].errors),
model
);

if (!(errors.date.errors || errors.entry.errors)) {
const air = model.temperature.air;
const water = model.temperature.water;

model.saved =
"Entry #" + model.entry.value +
" on " + model.date.value + ":" +
" Air: " + air.value + " \xB0" + air.units +
" Water: " + water.value + " \xB0" + water.units;

model.entry.value = "";
model.date.value = "";
}
return model;
});
}
});

export const app = {
create: update => {
const actions = createActions(update);

const components = {
date: date.create(nest(update, ["date"])),
entry: entry.create(nest(update, ["entry"])),
airTemperature: temperature.create(nest(update, ["temperature", "air"])),
waterTemperature: temperature.create(nest(update, ["temperature", "water"]))
};

return createView(actions, components);
}
};
43 changes: 12 additions & 31 deletions examples/temperatures/src/app/view.jsx
Original file line number Diff line number Diff line change
@@ -1,36 +1,17 @@
import preact from "preact";

import { nest, save } from "./index";
import { createDateView } from "../date/view-jsx.jsx";
import { createEntryView } from "../entry/view-jsx.jsx";
import { createTemperatureView } from "../temperature/view-jsx.jsx";
export const createView = (actions, components) =>
model => (
<form className="pure-form pure-form-aligned">
<fieldset>
{components.entry(model.entry)}
{components.date(model.date)}
{components.airTemperature(model.temperature.air)}
{components.waterTemperature(model.temperature.water)}

export const view = update => {
const dateView = createDateView(nest(update, ["date"]));
const entryView = createEntryView(nest(update, ["entry"]));
const airTemperatureView = createTemperatureView(nest(update, ["temperature", "air"]));
const waterTemperatureView = createTemperatureView(nest(update, ["temperature", "water"]));
<button className="pure-button pure-button-primary" onClick={actions.save}>Save</button>
</fieldset>

return model => (
<div>
<div className="row">
<div className="column column-25">
<a className="button" href="index-jsx.html">Preact + JSX + Milligram</a>
</div>
<div className="column column-25">
<a className="button button-outline" href="index-h.html">Preact + h + Basscss</a>
</div>
</div>
<form>
<fieldset>
{entryView(model.entry)}
{dateView(model.date)}
{airTemperatureView(model.temperature.air)}
{waterTemperatureView(model.temperature.water)}
<button onClick={save(model, update)}>Save</button>
<span>Saved: {model.saved}</span>
</fieldset>
</form>
</div>
<span>Saved: {model.saved}</span>
</form>
);
};
4 changes: 3 additions & 1 deletion examples/temperatures/src/date/actions.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import _ from "lodash";

export const createActions = update => ({
editDateValue: evt => update(model => model.set("value", evt.target.value))
editDateValue: evt => update(model => _.set(model, "value", evt.target.value))
});
13 changes: 11 additions & 2 deletions examples/temperatures/src/date/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
import * as model from "./model";
import { model, validateModel } from "./model";
import { createActions } from "./actions";
import { createView } from "./view.jsx";

export const date = model;
export const date = {
model,
validateModel,
create: update => {
const actions = createActions(update);
return createView(actions);
}
};
2 changes: 1 addition & 1 deletion examples/temperatures/src/date/model.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import validate from "validate.js";

export const initialModel = () => ({
export const model = () => ({
value: ""
});

Expand Down
22 changes: 8 additions & 14 deletions examples/temperatures/src/date/view.jsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,10 @@
import preact from "preact";
import { createActions } from "./actions";

export const createDateView = update => {
const actions = createActions(update);

return model => {
const error = model.errors && model.errors.value[0];

return (<div>
<label>Date:</label>
<input type="text" size="10" value={model.value} onInput={actions.editDateValue} />
<span>{error}</span>
</div>);
};
};
export const createView = actions =>
model => (
<div className="pure-control-group">
<label htmlFor="date">Date:</label>
<input id="date" type="text" size="10" value={model.value} onInput={actions.editDateValue} />
<span className="pure-form-message-inline">{model.errors && model.errors.value[0]}</span>
</div>
);
4 changes: 3 additions & 1 deletion examples/temperatures/src/entry/actions.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import _ from "lodash";

export const createActions = update => ({
editEntryValue: evt => update(model => model.set("value", evt.target.value))
editEntryValue: evt => update(model => _.set(model, "value", evt.target.value))
});
13 changes: 11 additions & 2 deletions examples/temperatures/src/entry/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
import * as model from "./model";
import { model, validateModel } from "./model";
import { createActions } from "./actions";
import { createView } from "./view.jsx";

export const entry = model;
export const entry = {
model,
validateModel,
create: update => {
const actions = createActions(update);
return createView(actions);
}
};
2 changes: 1 addition & 1 deletion examples/temperatures/src/entry/model.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import validate from "validate.js";

export const initialModel = () => ({
export const model = () => ({
value: ""
});

Expand Down
22 changes: 8 additions & 14 deletions examples/temperatures/src/entry/view.jsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,10 @@
import preact from "preact";
import { createActions } from "./actions";

export const createEntryView = update => {
const actions = createActions(update);

return model => {
const error = model.errors && model.errors.value[0];

return (<div>
<label>Entry number:</label>
<input type="text" size="2" value={model.value} onInput={actions.editEntryValue} />
<span>{error}</span>
</div>);
};
};
export const createView = actions =>
model => (
<div className="pure-control-group">
<label htmlFor="entry">Entry number:</label>
<input id="entry" type="text" size="2" value={model.value} onInput={actions.editEntryValue} />
<span className="pure-form-message-inline">{model.errors && model.errors.value[0]}</span>
</div>
);
4 changes: 0 additions & 4 deletions examples/temperatures/src/index-jsx.js

This file was deleted.

37 changes: 17 additions & 20 deletions examples/temperatures/src/index.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,29 @@
import flyd from "flyd";
import { render } from "preact";
import { fromJS } from "immutable";
import { applyUpdate, trace } from "meiosis";
import meiosisTracer from "meiosis-tracer";

import { app } from "./app";
import { entry } from "./entry";
import { date } from "./date";
import { temperature } from "./temperature";

export const startApp = createView => {
const initialModel = fromJS({
saved: "",
entry: entry.initialModel(),
date: date.initialModel(),
temperature: {
air: temperature.initialModel("Air temperature:"),
water: temperature.initialModel("Water temperature:")
}
});
const initialModel = {
saved: "",
entry: entry.model(),
date: date.model(),
temperature: {
air: temperature.model("Air temperature:"),
water: temperature.model("Water temperature:")
}
};

const update = flyd.stream();
const model = flyd.scan(applyUpdate, initialModel, update);
const view = createView(update);
const update = flyd.stream();
const model = flyd.scan(applyUpdate, initialModel, update);

const element = document.getElementById("app");
const modeljs = model.map(model => model.toJS());
modeljs.map(modeljs => render(view(modeljs), element, element.lastElementChild));
const view = app.create(update);
const element = document.getElementById("app");
model.map(model => render(view(model), element, element.lastElementChild));

trace({ update, dataStreams: [ modeljs ] });
meiosisTracer({ selector: "#tracer" });
};
trace({ update, dataStreams: [ model ] });
meiosisTracer({ selector: "#tracer" });
18 changes: 9 additions & 9 deletions examples/temperatures/src/temperature/actions.js
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
import _ from "lodash";

export const createActions = update => ({
increase: amount => evt => {
evt.preventDefault();

update(model => model.update("value", value => value + amount));
update(model => _.update(model, "value", value => value + amount));
},

changeUnits: evt => {
evt.preventDefault();

update (model => {
if (model.get("units") === "F") {
return model.
update("value", value => Math.round( (value - 32) / 9 * 5 )).
set("units", "C");
update(model => {
if (model.units === "F") {
return _.update(_.set(model, "units", "C"),
"value", value => Math.round( (value - 32) / 9 * 5 ));
}
else {
return model.
update("value", value => Math.round( value * 9 / 5 + 32 )).
set("units", "F");
return _.update(_.set(model, "units", "F"),
"value", value => Math.round( value * 9 / 5 + 32 ));
}
})
}
Expand Down
Loading

0 comments on commit c578fb7

Please sign in to comment.