Component Model Strawman: Element Registration - Revision history

Morrita at 01:37, 29 October 2011

2011-10-29T01:37:21Z

Morrita: /* The script element */

2011-10-27T19:34:57Z

The script element

← Older revision		Revision as of 19:34, 27 October 2011
Line 33:		Line 33:

	The <tt>element</tt> element allows <tt>script</tt> elements in its children.		The <tt>element</tt> element allows <tt>script</tt> elements in its children.
	These script blocks are ~~evaluated~~ over a global object.		These script blocks are executed over a global object.
	Before the evaluation, <tt>HTMLRegistrar.registering</tt> is set to the		Before the evaluation, <tt>HTMLRegistrar.registering</tt> is set to the
	enclosing <tt>element</tt> element. These script blocks can be used for providing		enclosing <tt>element</tt> element. These script blocks can be used for providing

Morrita: /* HTMLRegistrar and document.elements */

2011-10-27T19:29:33Z

HTMLRegistrar and document.elements

← Older revision		Revision as of 19:29, 27 October 2011
Line 313:		Line 313:

	</pre>		</pre>

			=== The getter ===

			The getter returns HTMLRegistrationElement whose <tt>name</tt> attribute
			matches <tt>name</tt> parameter. unless returns null.

			The getter can be used like this:

			<pre>

			var newCommentElement = document.elements["x-comment"].create();

			</pre>

			=== The <tt>register</tt> method ===

			The <tt>HTMLRegistrar#register</tt> method is a shortcut for
			following:

			<pre>

			var element = document.createElement("element");
			element.name = name;
			element.creator = creator;
			document.head.appendChild(element);

			</pre>


			=== The <tt>registering</tt> attribute ===

			For each <tt>script</tt> block which is a child of <tt>element</tt> is executed,
			The <tt>HTMLRegistar#registering</tt> is set to the <tt>element</tt> element.

Morrita: /* The creator callback */

2011-10-27T19:21:38Z

The creator callback

← Older revision		Revision as of 19:21, 27 October 2011
Line 72:		Line 72:
	<element name="x-comment">		<element name="x-comment">
	<script>		<script>
	~~HTMLRegistrationElement~~.~~current~~.creator = function() {		document.elements.registering.creator = function() {
	return new HTMLElement("x-comment");		return new HTMLElement("x-comment");
	};		};

Morrita: /* The script element */

2011-10-27T19:21:10Z

The script element

← Older revision		Revision as of 19:21, 27 October 2011
Line 34:		Line 34:
	The <tt>element</tt> element allows <tt>script</tt> elements in its children.		The <tt>element</tt> element allows <tt>script</tt> elements in its children.
	These script blocks are evaluated over a global object.		These script blocks are evaluated over a global object.
	Before the evaluation, <tt>~~HTMLRegistrationElement~~.~~current~~</tt> is set to the		Before the evaluation, <tt>HTMLRegistrar.registering</tt> is set to the
	enclosing <tt>element</tt> element. These script blocks can be used for providing		enclosing <tt>element</tt> element. These script blocks can be used for providing
	lifecycle callback definitions for the registering element.		lifecycle callback definitions for the registering element.
Line 43:		Line 43:
	<element name="x-comment">		<element name="x-comment">
	<script>		<script>
	var shouldBeXComment = ~~HTMLRegistrationElement~~.~~current~~.name;		var shouldBeXComment = document.elements.registering.name;
	<script>		<script>
	</element>		</element>

Morrita: /* The element element and HTMLRegistrationElement */

2011-10-27T19:19:44Z

The element element and HTMLRegistrationElement

← Older revision		Revision as of 19:19, 27 October 2011
Line 19:		Line 19:
	document.head.appendChild(element);		document.head.appendChild(element);
	// Shorter form.		// Shorter form.
	~~HTMLRegistrationElement~~.register("x-comment");		document.elements.register("x-comment");

	<!-- Markup API -->		<!-- Markup API -->
Line 66:		Line 66:
	document.head.appendChild(element);		document.head.appendChild(element);
	// Shorter form.		// Shorter form.
	~~HTMLRegistrationElement~~.register("x-comment", function() { ... });		document.elements.register("x-comment", function() { ... });

	<!-- Markup API -->		<!-- Markup API -->
Line 93:		Line 93:
	};		};

	~~HTMLRegistrationElement~~.~~current~~.creator = Comment;		document.elements.registering.creator = Comment;
	</script>		</script>
	</element>		</element>
Line 104:		Line 104:
	};		};

	~~HTMLRegistrationElement~~.~~current~~.creator = function() { return new Comment(); };		document.elements.registering.creator = function() { return new Comment(); };
	</script>		</script>
	</element>		</element>
Line 113:		Line 113:
	};		};

	~~HTMLRegistrationElement~~.register("x-comment", Comment);		document.elements.register("x-comment", Comment);
	</pre>		</pre>

Line 123:		Line 123:
	<script>		<script>
	var element = this;		var element = this;
	~~HTMLRegistrationElement~~.~~current~~.creator = function() {		document.elements.registering.creator = function() {
	return new HTMLElement(element.name);		return new HTMLElement(element.name);
	};		};
Line 185:		Line 185:
	<script>		<script>
	...		...
	~~HTMLRegistrationElement~~.~~current~~.setup = function() {		document.elements.registering.setup = function() {
	// "this" points the newly created element instance.		// "this" points the newly created element instance.
	this.shadow = new ShadowRoot(this);		this.shadow = new ShadowRoot(this);
Line 258:		Line 258:
	<script>		<script>
	...		...
	~~HTMLRegistrationElement~~.~~current~~.setup = function(shadow) {		document.elements.registering.setup = function(shadow) {
	// setup using the shadow instance.		// setup using the shadow instance.
	};		};

Morrita: /* HTMLRegistrar and document.elements */

2011-10-27T19:17:01Z

HTMLRegistrar and document.elements

← Older revision		Revision as of 19:17, 27 October 2011
Line 308:		Line 308:
	interface HTMLRegistrar {		interface HTMLRegistrar {
	getter HTMLRegistrationElement (DOMString name);		getter HTMLRegistrationElement (DOMString name);
	void register(DOMString name, [Optional] ~~HTMLElementRegisrationCreateCallback callback~~);		void register(DOMString name, [Optional] HTMLRegistrationCreatorCallback creator);
			readonly attribute HTMLRegistrationElement registering;
	};		};

	</pre>		</pre>

Morrita: /* HTMLRegistrar and document.elements */

2011-10-27T19:15:43Z

HTMLRegistrar and document.elements

← Older revision		Revision as of 19:15, 27 October 2011
Line 296:		Line 296:

	<tt>HTMLRegistrar</tt> is an object oriented way to access registered element definitions.		<tt>HTMLRegistrar</tt> is an object oriented way to access registered element definitions.
			It provides a keyed-collection like access to each registered element.
			It also provides some utility method which helps idiomatic element registration and its use.

			The object exists per document, and is accessible through the <tt>Document#elements</tt> property.



			<pre>

			[NoInterfaceObject]
			interface HTMLRegistrar {
			getter HTMLRegistrationElement (DOMString name);
			void register(DOMString name, [Optional] HTMLElementRegisrationCreateCallback callback);
			};

			</pre>

Morrita: /* HTMLRegistrationElement interface */

2011-10-27T19:10:38Z

HTMLRegistrationElement interface

← Older revision		Revision as of 19:10, 27 October 2011
Line 285:		Line 285:
	attribute HTMLRegistrationCreatorCallback creator;		attribute HTMLRegistrationCreatorCallback creator;
	attribute HTMLRegistrationSetupCallback setup;		attribute HTMLRegistrationSetupCallback setup;
			HTMLElement create();
	};		};
	</pre>		</pre>

			<tt>HTMLRegistrationElement#create()</tt> instantiates an registered element instance.

			* TODO: The parameters of create() should match to the standard element constructor parameter list.

	= <tt>HTMLRegistrar</tt> and <tt>document.elements</tt> =		= <tt>HTMLRegistrar</tt> and <tt>document.elements</tt> =

	<tt>HTMLRegistrar</tt> is an object oriented way to access registered element definitions.		<tt>HTMLRegistrar</tt> is an object oriented way to access registered element definitions.

Morrita at 19:07, 27 October 2011

2011-10-27T19:07:25Z

← Older revision		Revision as of 19:07, 27 October 2011
Line 50:		Line 50:
	</pre>		</pre>

	=== The <tt>~~create~~</tt> callback ===		=== The <tt>creator</tt> callback ===

	The <tt>HTMLRegistrationElement</tt> provide a pair of lifecycle callbacks		The <tt>HTMLRegistrationElement</tt> provide a pair of lifecycle callbacks
	for the element instance creation including the tree construction.		for the element instance creation including the tree construction.

	The first callback, <tt>~~create~~</tt> is invoked when an agent need a new element instance of the registered element.		The first callback, <tt>creator</tt> is invoked when an agent need a new element instance of the registered element.
	<tt>~~create~~</tt> callback should return new element instance which matches the registered element specification.		<tt>creator</tt> callback should return new element instance which matches the registered element specification.

	<pre>		<pre>
Line 63:		Line 63:
	var element = document.createElement("element");		var element = document.createElement("element");
	element.name = "x-comment";		element.name = "x-comment";
	element.~~create~~ = function() { return new HTMLElement("x-comment"); };		element.creator = function() { return new HTMLElement("x-comment"); };
	document.head.appendChild(element);		document.head.appendChild(element);
	// Shorter form.		// Shorter form.
Line 72:		Line 72:
	<element name="x-comment">		<element name="x-comment">
	<script>		<script>
	HTMLRegistrationElement.current.~~create~~ = function() {		HTMLRegistrationElement.current.creator = function() {
	return new HTMLElement("x-comment");		return new HTMLElement("x-comment");
	};		};
Line 93:		Line 93:
	};		};

	HTMLRegistrationElement.current.~~create~~ = Comment;		HTMLRegistrationElement.current.creator = Comment;
	</script>		</script>
	</element>		</element>
Line 104:		Line 104:
	};		};

	HTMLRegistrationElement.current.~~create~~ = function() { return new Comment(); };		HTMLRegistrationElement.current.creator = function() { return new Comment(); };
	</script>		</script>
	</element>		</element>
Line 116:		Line 116:
	</pre>		</pre>

	If no <tt>~~create~~</tt> callback is given, its default behavior is something like this:		If no <tt>creator</tt> callback is given, its default behavior is something like this:

	<pre>		<pre>
Line 123:		Line 123:
	<script>		<script>
	var element = this;		var element = this;
	HTMLRegistrationElement.current.~~create~~ = function() {		HTMLRegistrationElement.current.creator = function() {
	return new HTMLElement(element.name);		return new HTMLElement(element.name);
	};		};
Line 131:		Line 131:
	</pre>		</pre>

	=== The <tt>~~create~~</tt> attribute ===		=== The <tt>creator</tt> attribute ===

	A <tt>~~create~~</tt> callback can also be set by the <tt>~~create~~</tt> attribute on <tt>element</tt> element.		A <tt>creator</tt> callback can also be set by the <tt>creator</tt> attribute on <tt>element</tt> element.
	Once the attribute value is set, that is invoked as an expression.		Once the attribute value is set, that is invoked as an expression.
	The expression should return a function object.		The expression should return a function object.
	And the returned function object is set to <code>~~create~~</code> property of the <tt>element</tt> element.		And the returned function object is set to <code>creator</code> property of the <tt>element</tt> element.

	<pre>		<pre>
Line 142:		Line 142:
	<head>		<head>
	<element name="x-comment"		<element name="x-comment"
	~~create~~="function() { new HTMLElement('x-comment'); }">		creator="function() { new HTMLElement('x-comment'); }">
	</element>		</element>
	</head>		</head>
Line 152:		Line 152:
	<pre>		<pre>

	<element name="x-comment" ~~create~~="Comment">		<element name="x-comment" creator="Comment">
	<script>		<script>
	class Comment : HTMLElement {		class Comment : HTMLElement {
Line 210:		Line 210:


	<element name="x-comment" ~~create~~="Comment">		<element name="x-comment" creator="Comment">
	<script>		<script>
	class Comment : HTMLElement {		class Comment : HTMLElement {
Line 271:		Line 271:
	<pre>		<pre>
	[Callback=AcceptConstructor]		[Callback=AcceptConstructor]
	interface ~~HTMLRegistrationCreateCallback~~ {		interface HTMLRegistrationCreatorCallback {
	HTMLElement create();		HTMLElement create();
	};		};
Line 283:		Line 283:
	interface HTMLRegistrationElement {		interface HTMLRegistrationElement {
	attribute String name;		attribute String name;
	attribute ~~HTMLRegistrationCreateCallback create~~;		attribute HTMLRegistrationCreatorCallback creator;
	attribute HTMLRegistrationSetupCallback setup;		attribute HTMLRegistrationSetupCallback setup;
	};		};
	</pre>		</pre>

			= <tt>HTMLRegistrar</tt> and <tt>document.elements</tt> =

			<tt>HTMLRegistrar</tt> is an object oriented way to access registered element definitions.