DNU creation of elements

src/Silk.js

@@ -6,7 +6,7 @@ $core.packages["Silk"].transport = {"type":"amd","amdNamespace":"silk"};
 
 $core.addClass('Silk', $globals.Domite, [], 'Silk');
 //>>excludeStart("ide", pragmas.excludeIdeData);
-$globals.Silk.comment="I am adding convenience APIs to my subclass, `Domite`.\x0a\x0a##Rendering\x0a\x0a - `aSilk << anObject` uses double-dispatch via `renderOnSilk:`. This allows creating widgets (no formal superclass, anything with `renderOnSilk:` is a widget), as well as incorporating blocks: `aSilk << aBlock` runs the block, passing aSilk as a parameter.\x0a\x0a##Convenience\x0a\x0a - `aCssSelectorString asSilk` returns Silk wrapping an element at a selector.\x0a - `anObject inSilk` returns anObject rendered in a document fragment.";
+$globals.Silk.comment="I am adding convenience APIs to my subclass, `Domite`.\x0a\x0a##Rendering\x0a\x0a - `aSilk << anObject` uses double-dispatch via `renderOnSilk:`. This allows creating widgets (no formal superclass, anything with `renderOnSilk:` is a widget), as well as incorporating blocks: `aSilk << aBlock` runs the block, passing aSilk as a parameter.\x0a\x0a##Convenience\x0a\x0a - `aCssSelectorString asSilk` returns Silk wrapping an element at a selector.\x0a - `anObject inSilk` returns anObject rendered in a document fragment.\x0a\x0a##Element creation\x0a\x0aThese messages use DNU to dynamically create\x0aelements with any (letters-and-numbers) tag name,\x0aNext samples show this on an example of `<div>`.\x0a\x0a - `Silk DIV` is shortcut for `Silk newElement: 'div'`.";
 //>>excludeEnd("ide");
 $core.addMethod(
 $core.method({
@@ -46,6 +46,60 @@ messageSends: ["ifNil:", "renderOnSilk:", "nextPut:"]
 $globals.Silk);
 
 
+$core.addMethod(
+$core.method({
+selector: "doesNotUnderstand:",
+protocol: 'message handling',
+fn: function (aMessage){
+var self=this;
+var selector;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+return $core.withContext(function($ctx1) {
+//>>excludeEnd("ctx");
+var $1,$2,$3,$4,$5;
+selector=$recv(aMessage)._selector();
+$1=$recv($recv(selector)._asUppercase()).__eq(selector);
+if(!$core.assert($1)){
+$2=(
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx1.supercall = true, 
+//>>excludeEnd("ctx");
+$globals.Silk.klass.superclass.fn.prototype._doesNotUnderstand_.apply($recv(self), [aMessage]));
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx1.supercall = false;
+//>>excludeEnd("ctx");;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx1.sendIdx["doesNotUnderstand:"]=1;
+//>>excludeEnd("ctx");
+return $2;
+};
+$3=$recv(selector)._includes_(":");
+if($core.assert($3)){
+$4=(
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx1.supercall = true, 
+//>>excludeEnd("ctx");
+$globals.Silk.klass.superclass.fn.prototype._doesNotUnderstand_.apply($recv(self), [aMessage]));
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+$ctx1.supercall = false;
+//>>excludeEnd("ctx");;
+return $4;
+};
+$5=self._newElement_($recv(selector)._asLowercase());
+return $5;
+//>>excludeStart("ctx", pragmas.excludeDebugContexts);
+}, function($ctx1) {$ctx1.fill(self,"doesNotUnderstand:",{aMessage:aMessage,selector:selector},$globals.Silk.klass)});
+//>>excludeEnd("ctx");
+},
+//>>excludeStart("ide", pragmas.excludeIdeData);
+args: ["aMessage"],
+source: "doesNotUnderstand: aMessage\x0a\x09\x22`Silk DIV` creates a div element\x22\x0a\x09| selector |\x0a\x09selector := aMessage selector.\x0a\x09selector asUppercase = selector\x0a\x09\x09ifFalse: [ ^ super doesNotUnderstand: aMessage ].\x0a\x09(selector includes: ':')\x0a\x09\x09ifTrue: [ ^ super doesNotUnderstand: aMessage ].\x0a\x09^ self newElement: selector asLowercase",
+referencedClasses: [],
+//>>excludeEnd("ide");
+messageSends: ["selector", "ifFalse:", "=", "asUppercase", "doesNotUnderstand:", "ifTrue:", "includes:", "newElement:", "asLowercase"]
+}),
+$globals.Silk.klass);
+
 $core.addMethod(
 $core.method({
 selector: "renderOnSilk:",

src/Silk.st

@@ -12,7 +12,15 @@ I am adding convenience APIs to my subclass, `Domite`.
 ##Convenience
 
  - `aCssSelectorString asSilk` returns Silk wrapping an element at a selector.
- - `anObject inSilk` returns anObject rendered in a document fragment.!
+ - `anObject inSilk` returns anObject rendered in a document fragment.
+
+##Element creation
+
+These messages use DNU to dynamically create
+elements with any (letters-and-numbers) tag name,
+Next samples show this on an example of `<div>`.
+
+ - `Silk DIV` is shortcut for `Silk newElement: 'div'`.!
 
 !Silk methodsFor: 'writing'!
 
@@ -25,6 +33,19 @@ nextPut: anObject
 		ifNil: [ super nextPut: anObject ]
 ! !
 
+!Silk class methodsFor: 'message handling'!
+
+doesNotUnderstand: aMessage
+	"`Silk DIV` creates a div element"
+	| selector |
+	selector := aMessage selector.
+	selector asUppercase = selector
+		ifFalse: [ ^ super doesNotUnderstand: aMessage ].
+	(selector includes: ':')
+		ifTrue: [ ^ super doesNotUnderstand: aMessage ].
+	^ self newElement: selector asLowercase
+! !
+
 !BlockClosure methodsFor: '*Silk'!
 
 renderOnSilk: aSilk