syndicate-lang
/
syndicate-2017
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update

This commit is contained in:
Tony Garnock-Jones 2016-05-10 22:43:16 -04:00
parent 0564e4efb3
commit 0c27a0a339
14 changed files with 413 additions and 865 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
dist/syndicate.js vendored
View File

File diff suppressed because one or more lines are too long

16
dist/syndicate.min.js vendored
View File

File diff suppressed because one or more lines are too long

1031
dist/syndicatecompiler.js vendored
View File

File diff suppressed because it is too large Load Diff

12
dist/syndicatecompiler.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
examples/button/index.expanded.js
View File

@ -10,7 +10,7 @@ $(document).ready(function() {
Syndicate.Actor.spawnActor(new Object(), function() {
this.counter = 0;
Syndicate.Actor.createFacet()
.addAssertion((function() { var _ = Syndicate.__; return Syndicate.Patch.assert(DOM('#button-label','',Syndicate.seal(this.counter)), 0); }))
.addAssertion((function() { var _ = Syndicate.__; return Syndicate.Patch.assert(DOM('#button-label','',''+this.counter), 0); }))
.onEvent(false, "message", (function() { var _ = Syndicate.__; return Syndicate.Patch.sub(jQueryEvent('#counter','click',_), 0); }), (function() { var _ = Syndicate.__; return { assertion: jQueryEvent('#counter','click',_), metalevel: 0 }; }), (function() {
this.counter++;
})).completeBuild();

2
examples/button/index.js
View File

@ -9,7 +9,7 @@ $(document).ready(function() {
actor {
this.counter = 0;
react {
assert DOM('#button-label', '', Syndicate.seal(this.counter));
assert DOM('#button-label', '', '' + this.counter);
on message jQueryEvent('#counter', 'click', _) {
this.counter++;
}

10
examples/chat/index.html
View File

@ -5,6 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script>
<script src="../../third-party/jquery-2.2.0.min.js"></script>
<script src="../../dist/syndicatecompiler.js"></script>
<script src="../../dist/syndicate.js"></script>
@ -33,7 +34,14 @@
</section>
<section id="active_users">
<h1>Active Users</h1>
<ul id="nymlist"></ul>
<ul id="nymlist">
<template id="nym_template">
<li>
<span class="nym">{{who}}</span>
<span class="nym_status">{{status}}</span>
</li>
</template>
</ul>
</section>
</section>

6
examples/chat/index.js
View File

@ -35,10 +35,8 @@ function spawnChatApp() {
assert toBroker(url, present(this.nym, this.status));
during fromBroker(url, present($who, $status)) {
assert DOM('#nymlist', 'present-nym', Syndicate.seal(
["li",
["span", [["class", "nym"]], who],
["span", [["class", "nym_status"]], status]]));
assert DOM('#nymlist', 'present-nym',
Mustache.render($('#nym_template').html(), { who: who, status: status }));
}
on message jQueryEvent('#send_chat', 'click', _) {

4
examples/chat/style.css
View File

@ -1,3 +1,7 @@
template {
display: none;
}
h1 {
background: lightgrey;
}

9
examples/dom/index.js
View File

@ -4,7 +4,6 @@ $(document).ready(function () {
var sub = Syndicate.sub;
var assert = Syndicate.assert;
var retract = Syndicate.retract;
var seal = Syndicate.seal;
var __ = Syndicate.__;
var _$ = Syndicate._$;
@ -18,8 +17,7 @@ $(document).ready(function () {
Dataspace.spawn({
boot: function () {
return assert(DOM("#clicker-holder", "clicker",
seal(["button", ["span", [["style", "font-style: italic"]],
"Click me!"]])))
'<button><span style="font-style: italic">Click me!</span></button>'))
.andThen(sub(jQueryEvent("button.clicker", "click", __)));
},
handleEvent: function (e) {
@ -38,9 +36,8 @@ $(document).ready(function () {
updateState: function () {
Dataspace.stateChange(retract(DOM.pattern)
.andThen(assert(DOM("#counter-holder", "counter",
seal(["div",
["p", "The current count is: ",
this.counter]])))));
'<div><p>The current count is: '+this.counter+
'</p></div>'))));
},
handleEvent: function (e) {
if (e.type === "message" && e.message === "bump_count") {

20
examples/iot/index.html
View File

@ -5,6 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script>
<script src="../../third-party/jquery-2.2.0.min.js"></script>
<script src="../../dist/syndicatecompiler.js"></script>
<script src="../../dist/syndicate.js"></script>
@ -19,13 +20,22 @@
<section>
<h3>TV</h3>
<div id="tv-container">
&nbsp;<div><ul id="tv" class="alerts"></ul></div>
&nbsp;
<ul id="tv" class="alerts">
<template id="alert_template">
<li>{{text}}</li>
</template>
</ul>
</div>
</section>
<section>
<h3>Stove switch</h3>
<div id="stove-switch"></div>
<div id="stove-switch">
<template id="stove_element_template">
<img src="{{imgurl}}">
</template>
</div>
<button id="stove-switch-on">Turn on switch</button>
<button id="stove-switch-off">Turn off switch</button>
</section>
@ -37,7 +47,11 @@
<section>
<h3>Power draw meter</h3>
<div id="power-draw-meter"></div>
<div id="power-draw-meter">
<template id="power_draw_template">
<p>Power draw: <span class="power-meter-display">{{watts}} W</span></p>
</template>
</div>
</section>
</section>

40
examples/iot/index.js
View File

@ -15,7 +15,7 @@ function spawnTV() {
actor {
react {
during tvAlert($text) {
assert DOM('#tv', 'alert', Syndicate.seal(["li", text]));
assert DOM('#tv', 'alert', Mustache.render($('#alert_template').html(), { text: text }));
}
}
}
@ -68,9 +68,9 @@ function spawnStoveSwitch() {
assert switchState(this.powerOn);
assert DOM('#stove-switch', 'switch-state',
Syndicate.seal(["img", [["src",
"img/stove-coil-element-" +
(this.powerOn ? "hot" : "cold") + ".jpg"]]]));
Mustache.render($('#stove_element_template').html(),
{ imgurl: ("img/stove-coil-element-" +
(this.powerOn ? "hot" : "cold") + ".jpg") }));
on message jQueryEvent('#stove-switch-on', 'click', _) { this.powerOn = true; }
on message jQueryEvent('#stove-switch-off', 'click', _) { this.powerOn = false; }
@ -92,9 +92,7 @@ function spawnPowerDrawMonitor() {
assert powerDraw(this.watts);
assert DOM('#power-draw-meter', 'power-draw',
Syndicate.seal(["p", "Power draw: ",
["span", [["class", "power-meter-display"]],
this.watts + " W"]]));
Mustache.render($('#power_draw_template').html(), { watts: this.watts }));
on asserted switchState($on) {
this.watts = on ? 1500 : 0;
@ -185,12 +183,32 @@ function spawnFailureMonitor() {
function spawnChaosMonkey() {
actor {
monitorComponent('power draw monitor',
'#spawn-power-draw-monitor',
'#kill-power-draw-monitor',
spawnPowerDrawMonitor);
monitorComponent('stove switch',
'#spawn-stove-switch',
'#kill-stove-switch',
spawnStoveSwitch);
}
function monitorComponent(name, spawnButtonSelector, killButtonSelector, spawnFunction) {
var jSpawnButtons = $(spawnButtonSelector);
var jKillButtons = $(killButtonSelector);
react {
on message jQueryEvent('#spawn-power-draw-monitor', 'click', _) {
spawnPowerDrawMonitor();
during componentPresent(name) {
do {
jSpawnButtons.prop('disabled', true);
jKillButtons.prop('disabled', false);
}
finally {
jSpawnButtons.prop('disabled', false);
jKillButtons.prop('disabled', true);
}
}
on message jQueryEvent('#spawn-stove-switch', 'click', _) {
spawnStoveSwitch();
on message jQueryEvent(spawnButtonSelector, 'click', _) {
spawnFunction();
}
}
}

4
examples/iot/style.css
View File

@ -1,3 +1,7 @@
template {
display: none;
}
#tv-container {
background: url('img/tvscreen.gif');
background-size: 100%;

14
examples/svg/index.js
View File

@ -19,15 +19,11 @@ $(document).ready(function () {
this.handX = 50 + 40 * Math.cos(this.angle);
this.handY = 50 + 40 * Math.sin(this.angle);
}
assert DOM('#clock', 'clock', Syndicate.seal(
["svg", [["xmlns", "http://www.w3.org/2000/svg"],
["width", "300px"],
["viewBox", "0 0 100 100"]],
["circle", [["fill", "#0B79CE"],
["r", 45], ["cx", 50], ["cy", 50]]],
["line", [["stroke", "#023963"],
["x1", 50], ["y1", 50],
["x2", this.handX], ["y2", this.handY]]]]))
assert DOM('#clock', 'clock',
'<svg width="300px" viewBox="0 0 100 100">'+
'<circle fill="#0B79CE" r=45 cx=50 cy=50/>'+
'<line stroke="#023963" x1=50 y1=50 x2='+this.handX+' y2='+this.handY+' />'+
'</svg>')
when (typeof this.angle === 'number');
}
}