design: simplified view interfaces
This commit is contained in:
@ -1,5 +1,5 @@
|
||||
import 'package:di/di.dart' show Module;
|
||||
import '../view/element_module.dart' show ElementModule;
|
||||
import '../compiler/element_module.dart' show ElementModule;
|
||||
|
||||
typedef DomServicesFunction(ElementModule m);
|
||||
typedef ComponentServicesFunction(Module m);
|
||||
typedef ComponentServicesFunction(Module m);
|
||||
|
@ -1,6 +1,6 @@
|
||||
import {Future, Type} from 'facade/lang';
|
||||
import {Element} from 'facade/dom';
|
||||
import {ProtoView} from '../view/proto_view';
|
||||
import {ProtoView} from './view';
|
||||
import {TemplateLoader} from './template_loader';
|
||||
|
||||
export class Compiler {
|
||||
@ -23,4 +23,4 @@ export class Compiler {
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
@ -17,11 +17,25 @@ ElementInjector (ElementModule):
|
||||
- Query mechanism for children
|
||||
- 1:1 to DOM structure.
|
||||
*/
|
||||
|
||||
|
||||
export class ProtoElementInjector {
|
||||
@FIELD('final _parent:ProtoElementInjector')
|
||||
/// Temporory instance while instantiating
|
||||
@FIELD('_instance:ElementInjector')
|
||||
constructor() {}
|
||||
@FIELD('_clone:ElementInjector')
|
||||
constructor(parent:ProtoElementInjector) {
|
||||
this._parent = parent;
|
||||
}
|
||||
|
||||
instantiate():ElementInjector {
|
||||
return new ElementInjector(this);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class ElementInjector {
|
||||
@FIELD('final protoInjector:ProtoElementInjector')
|
||||
constructor(protoInjector:ProtoElementInjector) {
|
||||
this.protoInjector = protoInjector;
|
||||
}
|
||||
|
||||
}
|
||||
|
107
modules/core/src/compiler/view.js
Normal file
107
modules/core/src/compiler/view.js
Normal file
@ -0,0 +1,107 @@
|
||||
import {DOM, Node, DocumentFragment, TemplateElement} from 'facade/dom';
|
||||
import {ListWrapper wraps List} from 'facade/collection';
|
||||
import {ProtoWatchGroup, WatchGroup, WatchGroupDispatcher} from 'change_detection/watch_group';
|
||||
import {Record} from 'change_detection/record';
|
||||
import {Module} from 'di/di';
|
||||
import {ProtoElementInjector, ElementInjector} from './element_injector';
|
||||
import {SetterFn} from 'change_detection/facade';
|
||||
|
||||
export class ProtoView {
|
||||
@FIELD('final _template:TemplateElement')
|
||||
@FIELD('final _module:Module')
|
||||
@FIELD('final _protoElementInjectors:List<ProtoElementInjector>')
|
||||
@FIELD('final _protoWatchGroup:ProtoWatchGroup')
|
||||
constructor(
|
||||
template:TemplateElement,
|
||||
module:Module,
|
||||
protoElementInjector:ProtoElementInjector,
|
||||
protoWatchGroup:ProtoWatchGroup)
|
||||
{
|
||||
this._template = template;
|
||||
this._module = module;
|
||||
this._protoElementInjectors = protoElementInjector;
|
||||
this._protoWatchGroup = protoWatchGroup;
|
||||
}
|
||||
}
|
||||
|
||||
@IMPLEMENTS(WatchGroupDispatcher)
|
||||
export class View {
|
||||
@FIELD('final _fragment:DocumentFragment')
|
||||
/// This list matches the _nodes list. It is sparse, since only Elements have ElementInjector
|
||||
@FIELD('final _rootElementInjectors:List<ElementInjector>')
|
||||
@FIELD('final _elementInjectors:List<ElementInjector>')
|
||||
@FIELD('final _textNodes:List<Text>')
|
||||
@FIELD('final _watchGroup:WatchGroup')
|
||||
/// When the view is part of render tree, the DocumentFragment is empty, which is why we need
|
||||
/// to keep track of the nodes.
|
||||
@FIELD('final _nodes:List<Node>')
|
||||
@FIELD('final _onChangeDispatcher:OnChangeDispatcher')
|
||||
constructor(fragment:DocumentFragment) {
|
||||
this._fragment = fragment;
|
||||
this._nodes = ListWrapper.clone(fragment.childNodes);
|
||||
this._onChangeDispatcher = null;
|
||||
this._elementInjectors = null;
|
||||
this._textNodes = null;
|
||||
}
|
||||
|
||||
onRecordChange(record:Record, target) {
|
||||
// dispatch to element injector or text nodes based on context
|
||||
if (target instanceof ElementInjectorTarget) {
|
||||
// we know that it is ElementInjectorTarget
|
||||
var eTarget:ElementInjectorTarget = target;
|
||||
this._onChangeDispatcher.notify(this, eTarget);
|
||||
eTarget.invoke(record, this._elementInjectors);
|
||||
} else {
|
||||
// we know it refferst to _textNodes.
|
||||
var textNodeIndex:number = target;
|
||||
DOM.setText(this._textNodes[textNodeIndex], record.currentValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class ElementInjectorTarget {
|
||||
@FIELD('final _elementInjectorIndex:int')
|
||||
@FIELD('final _directiveIndex:int')
|
||||
@FIELD('final _setterName:String')
|
||||
@FIELD('final _setter:SetterFn')
|
||||
constructor(
|
||||
elementInjectorIndex:number,
|
||||
directiveIndex:number,
|
||||
setterName:String,
|
||||
setter:SetterFn)
|
||||
{
|
||||
this._elementInjectorIndex = elementInjectorIndex;
|
||||
this._directiveIndex = directiveIndex;
|
||||
this._setterName = setterName;
|
||||
this._setter = setter;
|
||||
}
|
||||
|
||||
invoke(record:Record, elementInjectors:List<ElementInjector>) {
|
||||
var elementInjector:ElementInjector = elementInjectors[this._elementInjectorIndex];
|
||||
var directive = elementInjectors[this._directiveIndex];
|
||||
this._setter(directive, record.currentValue);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//TODO(tbosch): I don't like to have done be called from a different place than notify
|
||||
// notify is called by change detection, but done is called by our wrapper on detect changes.
|
||||
export class OnChangeDispatcher {
|
||||
|
||||
@FIELD('_lastView:View')
|
||||
@FIELD('_lastTarget:ElementInjectorTarget')
|
||||
constructor() {
|
||||
this._lastView = null;
|
||||
this._lastTarget = null;
|
||||
}
|
||||
|
||||
notify(view:View, eTarget:ElementInjectorTarget) {
|
||||
|
||||
}
|
||||
|
||||
done() {
|
||||
|
||||
}
|
||||
}
|
@ -11,6 +11,5 @@ export * from 'change_detection/record';
|
||||
|
||||
export * from './compiler/compiler';
|
||||
export * from './compiler/template_loader';
|
||||
export * from './compiler/view';
|
||||
|
||||
export * from './view/proto_view';
|
||||
export * from './view/view';
|
||||
|
@ -1,13 +0,0 @@
|
||||
export class ElementInjectorTarget {
|
||||
@FIELD('final _elementInjectorIndex:int')
|
||||
@FIELD('final _directiveIndex:int')
|
||||
@FIELD('final _setterName:String')
|
||||
@FIELD('final _setter:SetterFn')
|
||||
constructor() {}
|
||||
|
||||
invoke(record:Record, elementInjectors:List<ElementInjector>) {
|
||||
var elementInjector:ElementInjector = elementInjectors[this._elementInjectorIndex];
|
||||
var directive = elementInjectors.getByIndex(this._directiveIndex);
|
||||
this._setter(directive, record.currentValue);
|
||||
}
|
||||
}
|
@ -1,19 +0,0 @@
|
||||
|
||||
//TODO(tbosch): I don't like to have done be called from a different place than notify
|
||||
// notify is called by change detection, but done is called by our wrapper on detect changes.
|
||||
export class OnChangeDispatcher {
|
||||
|
||||
@FIELD('_lastView:View')
|
||||
@FIELD('_lastTarget:ElementInjectorTarget')
|
||||
constructor() {
|
||||
|
||||
}
|
||||
|
||||
notify(view:View, eTarget:ElementInjectorTarget) {
|
||||
|
||||
}
|
||||
|
||||
done() {
|
||||
|
||||
}
|
||||
}
|
@ -1,10 +0,0 @@
|
||||
import {Module} from 'di/di';
|
||||
import {TemplateElement} from 'facade/dom';
|
||||
|
||||
export class ProtoView {
|
||||
@FIELD('final _template:TemplateElement')
|
||||
@FIELD('final _module:Module')
|
||||
@FIELD('final _protoElementInjectors:List<ProtoElementInjector>')
|
||||
@FIELD('final _protoWatchGroup:ProtoWatchGroup')
|
||||
constructor() { }
|
||||
}
|
@ -1,35 +0,0 @@
|
||||
import {Node, DocumentFragment} from 'facade/dom';
|
||||
import {ListWrapper wraps List} from 'facade/collection';
|
||||
import {WatchGroupDispatcher} from 'change_detection/watch_group_dispatcher';
|
||||
import {Record} from 'change_detection/record';
|
||||
|
||||
@IMPLEMENTS(WatchGroupDispatcher)
|
||||
export class View {
|
||||
@FIELD('final _fragment:DocumentFragment')
|
||||
/// This list matches the _nodes list. It is sparse, since only Elements have ElementInjector
|
||||
@FIELD('final _rootElementInjectors:List<ElementInjector>')
|
||||
@FIELD('final _elementInjectors:List<ElementInjector>')
|
||||
@FIELD('final _textNodes:List<Text>')
|
||||
@FIELD('final _watchGroup:WatchGroup')
|
||||
/// When the view is part of render tree, the DocumentFragment is empty, which is why we need
|
||||
/// to keep track of the nodes.
|
||||
@FIELD('final _nodes:List<Node>')
|
||||
constructor(fragment:DocumentFragment) {
|
||||
this._fragment = fragment;
|
||||
this._nodes = ListWrapper.clone(fragment.childNodes);
|
||||
}
|
||||
|
||||
onRecordChange(record:Record, target) {
|
||||
// dispatch to element injector or text nodes based on context
|
||||
if (target instanceof ElementInjectorTarge) {
|
||||
// we know that it is ElementInjectorTarge
|
||||
var eTarget:ElementInjectorTarget = target;
|
||||
onChangeDispatcher.notify(this, eTarget);
|
||||
eTarget.invoke(record, _elementInjectors);
|
||||
} else {
|
||||
// we know it refferst to _textNodes.
|
||||
var textNodeIndex:number = target;
|
||||
DOM.setText(this._textNodes[textNodeIndex], record.currentValue);
|
||||
}
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user