HTML example
This commit is contained in:
parent
82e9457359
commit
7423479de3
|
|
@ -0,0 +1 @@
|
|||
examples/
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
index.js
|
||||
index.js.map
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../../Makefile.generic-package
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!doctype HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Syndicate: Table Example</title>
|
||||
<meta charset="utf-8">
|
||||
<script src="node_modules/@syndicate-lang/core/dist/syndicate.js"></script>
|
||||
<script src="node_modules/@syndicate-lang/html/dist/syndicate-html.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Table Example</h1>
|
||||
<table id="the-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th data-column="0">ID</th>
|
||||
<th data-column="1">First Name</th>
|
||||
<th data-column="2">Last Name</th>
|
||||
<th data-column="3">Address</th>
|
||||
<th data-column="4">Age</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>
|
||||
Click on column headings to sort data rows.
|
||||
</p>
|
||||
<p>
|
||||
Source code: <a href="src/index.ts">index.ts</a>
|
||||
</p>
|
||||
<div id="extra"></div>
|
||||
<script>
|
||||
Syndicate.bootModule(Main.__SYNDICATE__bootProc);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"name": "@syndicate-lang/syndicatec-ts-plugin-example",
|
||||
"version": "0.0.0",
|
||||
"description": "Simple syndicatec example in TypeScript",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"prepare": "npm run compile && npm run rollup",
|
||||
"compile": "npx syndicate-tsc",
|
||||
"rollup": "npx rollup -c",
|
||||
"clean": "rm -rf lib/ index.js index.js.map"
|
||||
},
|
||||
"author": "Tony Garnock-Jones <tonyg@leastfixedpoint.com>",
|
||||
"license": "GPL-3.0+",
|
||||
"dependencies": {
|
||||
"@syndicate-lang/core": "file:../../../core",
|
||||
"@syndicate-lang/html": "file:../.."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@syndicate-lang/ts-plugin": "file:../../../ts-plugin",
|
||||
"@syndicate-lang/tsc": "file:../../../tsc",
|
||||
"rollup": "^2.37.0",
|
||||
"rollup-plugin-sourcemaps": "^0.6.3",
|
||||
"typescript": "^4.1.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import sourcemaps from 'rollup-plugin-sourcemaps';
|
||||
|
||||
export default {
|
||||
input: 'lib/index.js',
|
||||
plugins: [sourcemaps()],
|
||||
output: {
|
||||
file: 'index.js',
|
||||
format: 'umd',
|
||||
name: 'Main',
|
||||
sourcemap: true,
|
||||
globals: {
|
||||
'@syndicate-lang/core': 'Syndicate',
|
||||
'@syndicate-lang/html': 'SyndicateHtml',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
//---------------------------------------------------------------------------
|
||||
// @syndicate-lang/core, an implementation of Syndicate dataspaces for JS.
|
||||
// Copyright (C) 2016-2021 Tony Garnock-Jones <tonyg@leastfixedpoint.com>
|
||||
//
|
||||
// This program is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
//---------------------------------------------------------------------------
|
||||
|
||||
import { Value } from '@syndicate-lang/core';
|
||||
activate import { UIEvent, GlobalEvent, HtmlFragments, template, Anchor } from '@syndicate-lang/html';
|
||||
|
||||
assertion type Person(id, firstName, lastName, address, age);
|
||||
message type SetSortColumn(number);
|
||||
|
||||
boot {
|
||||
function newRow(id: number, firstName: string, lastName: string, address: string, age: number) {
|
||||
spawn named ('model' + id) {
|
||||
assert Person(id, firstName, lastName, address, age);
|
||||
}
|
||||
}
|
||||
|
||||
newRow(1, 'Keith', 'Example', '94 Main St.', 44);
|
||||
newRow(2, 'Karen', 'Fakeperson', '5504 Long Dr.', 34);
|
||||
newRow(3, 'Angus', 'McFictional', '2B Pioneer Heights', 39);
|
||||
newRow(4, 'Sue', 'Donnem', '1 Infinite Loop', 104);
|
||||
newRow(5, 'Boaty', 'McBoatface', 'Arctic Ocean', 1);
|
||||
|
||||
spawn named 'view' {
|
||||
let ui = new Anchor();
|
||||
field orderColumn: number = 2;
|
||||
|
||||
function cell(text: Value): HtmlFragments {
|
||||
return template`<td>${text.toString()}</td>`;
|
||||
}
|
||||
|
||||
on message SetSortColumn($c: number) => this.orderColumn = c;
|
||||
|
||||
during Person($id: number, $firstName: string, $lastName: string, $address: string, $age: number) => {
|
||||
assert ui.context(id)
|
||||
.html('table#the-table tbody',
|
||||
template`<tr>${[id, firstName, lastName, address, age].map(cell)}</tr>`,
|
||||
[id, firstName, lastName, address, age][this.orderColumn]);
|
||||
}
|
||||
}
|
||||
|
||||
spawn named 'controller' {
|
||||
on message GlobalEvent('table#the-table th', 'click', $e) => {
|
||||
console.log(e);
|
||||
send message SetSortColumn(
|
||||
JSON.parse(((e as unknown as Event).target as HTMLElement).dataset.column!));
|
||||
}
|
||||
}
|
||||
|
||||
spawn named 'alerter' {
|
||||
let ui = new Anchor();
|
||||
assert ui.html('#extra', template`<button>Click me</button>`);
|
||||
|
||||
on message UIEvent(ui.fragmentId, '.', 'click', $_e) => {
|
||||
alert("Hello!");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": ["ES2017", "DOM"],
|
||||
"declaration": true,
|
||||
"baseUrl": "./src",
|
||||
"rootDir": "./src",
|
||||
"outDir": "./lib",
|
||||
"declarationDir": "./lib",
|
||||
"esModuleInterop": true,
|
||||
"moduleResolution": "node",
|
||||
"module": "es6",
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"plugins": [
|
||||
{ "name": "@syndicate-lang/ts-plugin" }
|
||||
]
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
Loading…
Reference in New Issue