From 7423479de3e195c622f0a0dfcc2dddd4784db55a Mon Sep 17 00:00:00 2001 From: Tony Garnock-Jones Date: Tue, 26 Jan 2021 22:10:41 +0100 Subject: [PATCH] HTML example --- packages/html/.npmignore | 1 + packages/html/examples/table/.gitignore | 2 + packages/html/examples/table/Makefile | 1 + packages/html/examples/table/index.html | 34 +++++++++ packages/html/examples/table/package.json | 25 +++++++ packages/html/examples/table/rollup.config.js | 16 +++++ packages/html/examples/table/src/index.ts | 72 +++++++++++++++++++ packages/html/examples/table/tsconfig.json | 20 ++++++ 8 files changed, 171 insertions(+) create mode 100644 packages/html/.npmignore create mode 100644 packages/html/examples/table/.gitignore create mode 120000 packages/html/examples/table/Makefile create mode 100644 packages/html/examples/table/index.html create mode 100644 packages/html/examples/table/package.json create mode 100644 packages/html/examples/table/rollup.config.js create mode 100644 packages/html/examples/table/src/index.ts create mode 100644 packages/html/examples/table/tsconfig.json diff --git a/packages/html/.npmignore b/packages/html/.npmignore new file mode 100644 index 0000000..d838da9 --- /dev/null +++ b/packages/html/.npmignore @@ -0,0 +1 @@ +examples/ diff --git a/packages/html/examples/table/.gitignore b/packages/html/examples/table/.gitignore new file mode 100644 index 0000000..2a6b3ff --- /dev/null +++ b/packages/html/examples/table/.gitignore @@ -0,0 +1,2 @@ +index.js +index.js.map diff --git a/packages/html/examples/table/Makefile b/packages/html/examples/table/Makefile new file mode 120000 index 0000000..1749323 --- /dev/null +++ b/packages/html/examples/table/Makefile @@ -0,0 +1 @@ +../../../../Makefile.generic-package \ No newline at end of file diff --git a/packages/html/examples/table/index.html b/packages/html/examples/table/index.html new file mode 100644 index 0000000..ada1b7a --- /dev/null +++ b/packages/html/examples/table/index.html @@ -0,0 +1,34 @@ + + + + Syndicate: Table Example + + + + + + +

Table Example

+ + + + + + + + + + +
IDFirst NameLast NameAddressAge
+

+ Click on column headings to sort data rows. +

+

+ Source code: index.ts +

+
+ + + diff --git a/packages/html/examples/table/package.json b/packages/html/examples/table/package.json new file mode 100644 index 0000000..5c45852 --- /dev/null +++ b/packages/html/examples/table/package.json @@ -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 ", + "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" + } +} diff --git a/packages/html/examples/table/rollup.config.js b/packages/html/examples/table/rollup.config.js new file mode 100644 index 0000000..156b55c --- /dev/null +++ b/packages/html/examples/table/rollup.config.js @@ -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', + }, + }, +}; diff --git a/packages/html/examples/table/src/index.ts b/packages/html/examples/table/src/index.ts new file mode 100644 index 0000000..7bb9c5e --- /dev/null +++ b/packages/html/examples/table/src/index.ts @@ -0,0 +1,72 @@ +//--------------------------------------------------------------------------- +// @syndicate-lang/core, an implementation of Syndicate dataspaces for JS. +// Copyright (C) 2016-2021 Tony Garnock-Jones +// +// 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 . +//--------------------------------------------------------------------------- + +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`${text.toString()}`; + } + + 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`${[id, firstName, lastName, address, age].map(cell)}`, + [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``); + + on message UIEvent(ui.fragmentId, '.', 'click', $_e) => { + alert("Hello!"); + } + } +} diff --git a/packages/html/examples/table/tsconfig.json b/packages/html/examples/table/tsconfig.json new file mode 100644 index 0000000..07bbdef --- /dev/null +++ b/packages/html/examples/table/tsconfig.json @@ -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/**/*"] +}