html2 templateGenerator
This commit is contained in:
parent
8031eb1a17
commit
f105736694
|
@ -20,6 +20,7 @@ type Wrapped = {
|
||||||
export type NodeGenerator = (t: HtmlTemplater) => ReturnType<HtmlTemplater>;
|
export type NodeGenerator = (t: HtmlTemplater) => ReturnType<HtmlTemplater>;
|
||||||
|
|
||||||
export class Widget implements EventTarget {
|
export class Widget implements EventTarget {
|
||||||
|
readonly nodeGenerator: NodeGenerator;
|
||||||
readonly facet: Facet;
|
readonly facet: Facet;
|
||||||
private _node: ChildNode | null = null;
|
private _node: ChildNode | null = null;
|
||||||
parentField: Dataflow.Field<ParentNode | null>;
|
parentField: Dataflow.Field<ParentNode | null>;
|
||||||
|
@ -29,7 +30,15 @@ export class Widget implements EventTarget {
|
||||||
return this._node!;
|
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;
|
this.facet = Turn.activeFacet;
|
||||||
|
|
||||||
const cancelAtExit = this.facet.actor.atExit(() => this.node.remove());
|
const cancelAtExit = this.facet.actor.atExit(() => this.node.remove());
|
||||||
|
@ -151,8 +160,11 @@ export class ValueWidget extends Widget {
|
||||||
_value: Dataflow.Field<string>;
|
_value: Dataflow.Field<string>;
|
||||||
_valueAsNumber: Dataflow.Field<number>;
|
_valueAsNumber: Dataflow.Field<number>;
|
||||||
|
|
||||||
constructor (nodeGenerator: NodeGenerator, triggerEvent: 'change' | 'input' = 'change') {
|
constructor (nodeGenerator: NodeGenerator, triggerEvent?: 'change' | 'input');
|
||||||
super(nodeGenerator);
|
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 = '';
|
field value: string = '';
|
||||||
this._value = value;
|
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);
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue