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

html2 templateGenerator

This commit is contained in:
Tony Garnock-Jones 2024-03-28 10:22:21 +01:00
parent 8031eb1a17
commit f105736694
1 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/html2/src/index.ts
View File

@ -20,6 +20,7 @@ type Wrapped = {
export type NodeGenerator = (t: HtmlTemplater) => ReturnType<HtmlTemplater>;
export class Widget implements EventTarget {
readonly nodeGenerator: NodeGenerator;
readonly facet: Facet;
private _node: ChildNode | null = null;
parentField: Dataflow.Field<ParentNode | null>;
@ -29,7 +30,15 @@ export class Widget implements EventTarget {
return this._node!;
}
constructor (private nodeGenerator: NodeGenerator) {
constructor (nodeGenerator: NodeGenerator);
constructor (template: string | HTMLTemplateElement, data: object);
constructor (arg0: NodeGenerator | string | HTMLTemplateElement, data?: object) {
if (data === void 0) {
this.nodeGenerator = arg0 as NodeGenerator;
} else {
this.nodeGenerator = templateGenerator(arg0 as (string | HTMLTemplateElement), data);
}
this.facet = Turn.activeFacet;
const cancelAtExit = this.facet.actor.atExit(() => this.node.remove());
@ -151,8 +160,11 @@ export class ValueWidget extends Widget {
_value: Dataflow.Field<string>;
_valueAsNumber: Dataflow.Field<number>;
constructor (nodeGenerator: NodeGenerator, triggerEvent: 'change' | 'input' = 'change') {
super(nodeGenerator);
constructor (nodeGenerator: NodeGenerator, triggerEvent?: 'change' | 'input');
constructor (template: string | HTMLTemplateElement, data: object, triggerEvent?: 'change' | 'input');
constructor (arg0: NodeGenerator | string | HTMLTemplateElement, arg1?: object | 'change' | 'input', arg2?: 'change' | 'input') {
super(arg0 as any, arg1 as any);
const triggerEvent = typeof arg1 === 'string' ? arg1 : typeof arg2 === 'string' ? arg2 : 'change';
field value: string = '';
this._value = value;
@ -226,3 +238,17 @@ function spawnLocationHashTracker(ds: Ref) {
}
}
}
export function templateGenerator(
template0: string | HTMLTemplateElement,
data: object,
): NodeGenerator {
const template = typeof template0 === 'string' ? document.querySelector(template0) : template0;
if (template === null) throw new Error('Cannot find template: ' + template0);
const body = `return t => t\`${template.innerHTML.trim().split('`').join('\\`')}\``;
const kvs = Object.entries(data);
const keys = kvs.map(e => e[0]);
const values = kvs.map(e => e[1]);
const factory = new Function(... keys, body);
return factory(... values);
}