Adding "declarative custom tags" into HTMLCanvas.

This adds `HTMLSnippet` class which collects all
```
<tag html-snippet="quux">
  ...
  <innertag html-snippet="*" />
  ...
</tag>
```
structures in the page and detaches them. Then it allows to use
```
  html quux with: [ html p with: 'Text' ]
```
to render
```
<tag>
  ...
  <innertag><p>Text</p></innertag>
  ...
</tag>
```
in the page.
Thus, you can define pieces of page structure declaratively
in html and use whole snippets as selector in HTMLCanvas.
The tag with `html-snippet="*"` becomes the "caret", that is,
it is simulated as if it was just added and you can continue
with `with:`, `at:put:` etc.

js/Canvas-Snippet.deploy.js

@@ -0,0 +1,192 @@
+smalltalk.addPackage('Canvas-Snippet', {});
+smalltalk.addClass('HtmlSnippet', smalltalk.Object, ['snippets'], 'Canvas-Snippet');
+smalltalk.addMethod(
+"_addSnippet_",
+smalltalk.method({
+selector: "addSnippet:",
+fn: function (anAssociation){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $2,$1;
+$2=self["@snippets"];
+if(($receiver = $2) == nil || $receiver == undefined){
+self["@snippets"]=smalltalk.HashedCollection._fromPairs_([]);
+$1=self["@snippets"];
+} else {
+$1=$2;
+};
+_st($1)._add_(anAssociation);
+return self}, function($ctx1) {$ctx1.fill(self,"addSnippet:",{anAssociation:anAssociation}, smalltalk.HtmlSnippet)})}
+}),
+smalltalk.HtmlSnippet);
+
+smalltalk.addMethod(
+"_addSnippets_",
+smalltalk.method({
+selector: "addSnippets:",
+fn: function (aCollection){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+_st(aCollection)._associationsDo_((function(each){
+return smalltalk.withContext(function($ctx2) {
+return _st(self)._addSnippet_(each);
+}, function($ctx2) {$ctx2.fillBlock({each:each},$ctx1)})}));
+return self}, function($ctx1) {$ctx1.fill(self,"addSnippets:",{aCollection:aCollection}, smalltalk.HtmlSnippet)})}
+}),
+smalltalk.HtmlSnippet);
+
+smalltalk.addMethod(
+"_at_",
+smalltalk.method({
+selector: "at:",
+fn: function (aString){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $1;
+$1=_st(self["@snippets"])._at_(aString);
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"at:",{aString:aString}, smalltalk.HtmlSnippet)})}
+}),
+smalltalk.HtmlSnippet);
+
+smalltalk.addMethod(
+"_at_ifAbsent_",
+smalltalk.method({
+selector: "at:ifAbsent:",
+fn: function (aString,aBlock){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $1;
+$1=_st(self["@snippets"])._at_ifAbsent_(aString,aBlock);
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"at:ifAbsent:",{aString:aString,aBlock:aBlock}, smalltalk.HtmlSnippet)})}
+}),
+smalltalk.HtmlSnippet);
+
+
+smalltalk.HtmlSnippet.klass.iVarNames = ['current'];
+smalltalk.addMethod(
+"_current",
+smalltalk.method({
+selector: "current",
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $2,$3,$4,$1;
+$2=self["@current"];
+if(($receiver = $2) == nil || $receiver == undefined){
+$3=_st(self)._new();
+_st($3)._addSnippets_(_st(self)._digFromJQuery_(_st(document)._asJQuery()));
+$4=_st($3)._yourself();
+self["@current"]=$4;
+$1=self["@current"];
+} else {
+$1=$2;
+};
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"current",{}, smalltalk.HtmlSnippet.klass)})}
+}),
+smalltalk.HtmlSnippet.klass);
+
+smalltalk.addMethod(
+"_digFromJQuery_",
+smalltalk.method({
+selector: "digFromJQuery:",
+fn: function (aJQuery){
+var self=this;
+var result;
+return smalltalk.withContext(function($ctx1) { 
+var $1,$2,$3;
+result=smalltalk.HashedCollection._fromPairs_([]);
+_st(_st(_st("[data-snippet]")._asJQuery())._toArray())._do_((function(each){
+var jq,name;
+return smalltalk.withContext(function($ctx2) {
+jq=_st(each)._asJQuery();
+jq;
+name=_st(jq)._attr_("data-snippet");
+name;
+$1=_st(name).__eq("*");
+if(! smalltalk.assert($1)){
+$2=_st(_st("^\x5c*")._asRegexp())._test_(name);
+if(smalltalk.assert($2)){
+name=_st(name)._allButFirst();
+name;
+_st(jq)._attr_put_("data-snippet","*");
+} else {
+_st(jq)._removeAttr_("data-snippet");
+};
+return _st(result)._at_put_(name,_st(_st(jq)._detach())._get_((0)));
+};
+}, function($ctx2) {$ctx2.fillBlock({each:each,jq:jq,name:name},$ctx1)})}));
+$3=result;
+return $3;
+}, function($ctx1) {$ctx1.fill(self,"digFromJQuery:",{aJQuery:aJQuery,result:result}, smalltalk.HtmlSnippet.klass)})}
+}),
+smalltalk.HtmlSnippet.klass);
+
+
+smalltalk.addMethod(
+"_asSnippet",
+smalltalk.method({
+selector: "asSnippet",
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $1;
+$1=_st(_st((smalltalk.HtmlSnippet || HtmlSnippet))._current())._at_(_st(self)._asString());
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"asSnippet",{}, smalltalk.CharacterArray)})}
+}),
+smalltalk.CharacterArray);
+
+smalltalk.addMethod(
+"_doesNotUnderstand_",
+smalltalk.method({
+selector: "doesNotUnderstand:",
+fn: function (aMessage){
+var self=this;
+var snippet;
+return smalltalk.withContext(function($ctx1) { 
+var $1,$2,$3,$4;
+var $early={};
+try {
+$1=_st(_st(aMessage)._arguments())._isEmpty();
+if(! smalltalk.assert($1)){
+$2=smalltalk.Object.fn.prototype._doesNotUnderstand_.apply(_st(self), [aMessage]);
+return $2;
+};
+snippet=_st(_st((smalltalk.HtmlSnippet || HtmlSnippet))._current())._at_ifAbsent_(_st(aMessage)._selector(),(function(){
+return smalltalk.withContext(function($ctx2) {
+$3=smalltalk.Object.fn.prototype._doesNotUnderstand_.apply(_st(self), [aMessage]);
+throw $early=[$3];
+}, function($ctx2) {$ctx2.fillBlock({},$ctx1)})}));
+$4=_st(self)._snip_(snippet);
+return $4;
+}
+catch(e) {if(e===$early)return e[0]; throw e}
+}, function($ctx1) {$ctx1.fill(self,"doesNotUnderstand:",{aMessage:aMessage,snippet:snippet}, smalltalk.HTMLCanvas)})}
+}),
+smalltalk.HTMLCanvas);
+
+smalltalk.addMethod(
+"_snip_",
+smalltalk.method({
+selector: "snip:",
+fn: function (anElement){
+var self=this;
+var clone,caret;
+return smalltalk.withContext(function($ctx1) { 
var $1,$2;
+clone=_st(_st(anElement)._asJQuery())._clone();
+_st(self)._with_(_st((smalltalk.TagBrush || TagBrush))._fromJQuery_canvas_(clone,self));
+caret=_st(clone)._find_("[data-snippet=\x22*\x22]");
+$1=_st(_st(caret)._toArray())._isEmpty();
+if(smalltalk.assert($1)){
+caret=clone;
+caret;
+};
+$2=_st((smalltalk.TagBrush || TagBrush))._fromJQuery_canvas_(_st(caret)._removeAttr_("data-snippet"),self);
+return $2;
+}, function($ctx1) {$ctx1.fill(self,"snip:",{anElement:anElement,clone:clone,caret:caret}, smalltalk.HTMLCanvas)})}
+}),
+smalltalk.HTMLCanvas);
+

js/Canvas-Snippet.js

@@ -0,0 +1,237 @@
+smalltalk.addPackage('Canvas-Snippet', {});
+smalltalk.addClass('HtmlSnippet', smalltalk.Object, ['snippets'], 'Canvas-Snippet');
+smalltalk.addMethod(
+"_addSnippet_",
+smalltalk.method({
+selector: "addSnippet:",
+category: 'accessing',
+fn: function (anAssociation){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $2,$1;
+$2=self["@snippets"];
+if(($receiver = $2) == nil || $receiver == undefined){
+self["@snippets"]=smalltalk.HashedCollection._fromPairs_([]);
+$1=self["@snippets"];
+} else {
+$1=$2;
+};
+_st($1)._add_(anAssociation);
+return self}, function($ctx1) {$ctx1.fill(self,"addSnippet:",{anAssociation:anAssociation}, smalltalk.HtmlSnippet)})},
+args: ["anAssociation"],
+source: "addSnippet: anAssociation\x0a\x09(snippets ifNil: [ snippets := #{} ]) add: anAssociation",
+messageSends: ["add:", "ifNil:"],
+referencedClasses: []
+}),
+smalltalk.HtmlSnippet);
+
+smalltalk.addMethod(
+"_addSnippets_",
+smalltalk.method({
+selector: "addSnippets:",
+category: 'accessing',
+fn: function (aCollection){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+_st(aCollection)._associationsDo_((function(each){
+return smalltalk.withContext(function($ctx2) {
+return _st(self)._addSnippet_(each);
+}, function($ctx2) {$ctx2.fillBlock({each:each},$ctx1)})}));
+return self}, function($ctx1) {$ctx1.fill(self,"addSnippets:",{aCollection:aCollection}, smalltalk.HtmlSnippet)})},
+args: ["aCollection"],
+source: "addSnippets: aCollection\x0a\x09aCollection associationsDo: [ :each | self addSnippet: each ]\x0a",
+messageSends: ["associationsDo:", "addSnippet:"],
+referencedClasses: []
+}),
+smalltalk.HtmlSnippet);
+
+smalltalk.addMethod(
+"_at_",
+smalltalk.method({
+selector: "at:",
+category: 'accessing',
+fn: function (aString){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $1;
+$1=_st(self["@snippets"])._at_(aString);
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"at:",{aString:aString}, smalltalk.HtmlSnippet)})},
+args: ["aString"],
+source: "at: aString\x0a\x09^ snippets at: aString",
+messageSends: ["at:"],
+referencedClasses: []
+}),
+smalltalk.HtmlSnippet);
+
+smalltalk.addMethod(
+"_at_ifAbsent_",
+smalltalk.method({
+selector: "at:ifAbsent:",
+category: 'accessing',
+fn: function (aString,aBlock){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $1;
+$1=_st(self["@snippets"])._at_ifAbsent_(aString,aBlock);
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"at:ifAbsent:",{aString:aString,aBlock:aBlock}, smalltalk.HtmlSnippet)})},
+args: ["aString", "aBlock"],
+source: "at: aString ifAbsent: aBlock\x0a\x09^ snippets at: aString ifAbsent: aBlock",
+messageSends: ["at:ifAbsent:"],
+referencedClasses: []
+}),
+smalltalk.HtmlSnippet);
+
+
+smalltalk.HtmlSnippet.klass.iVarNames = ['current'];
+smalltalk.addMethod(
+"_current",
+smalltalk.method({
+selector: "current",
+category: 'instance creation',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $2,$3,$4,$1;
+$2=self["@current"];
+if(($receiver = $2) == nil || $receiver == undefined){
+$3=_st(self)._new();
+_st($3)._addSnippets_(_st(self)._digFromJQuery_(_st(document)._asJQuery()));
+$4=_st($3)._yourself();
+self["@current"]=$4;
+$1=self["@current"];
+} else {
+$1=$2;
+};
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"current",{}, smalltalk.HtmlSnippet.klass)})},
+args: [],
+source: "current\x0a\x09^ current ifNil: [\x0a\x09\x09current := self new addSnippets: (self digFromJQuery: document asJQuery); yourself ]",
+messageSends: ["ifNil:", "addSnippets:", "digFromJQuery:", "asJQuery", "new", "yourself"],
+referencedClasses: []
+}),
+smalltalk.HtmlSnippet.klass);
+
+smalltalk.addMethod(
+"_digFromJQuery_",
+smalltalk.method({
+selector: "digFromJQuery:",
+category: 'action',
+fn: function (aJQuery){
+var self=this;
+var result;
+return smalltalk.withContext(function($ctx1) { 
+var $1,$2,$3;
+result=smalltalk.HashedCollection._fromPairs_([]);
+_st(_st(_st("[data-snippet]")._asJQuery())._toArray())._do_((function(each){
+var jq,name;
+return smalltalk.withContext(function($ctx2) {
+jq=_st(each)._asJQuery();
+jq;
+name=_st(jq)._attr_("data-snippet");
+name;
+$1=_st(name).__eq("*");
+if(! smalltalk.assert($1)){
+$2=_st(_st("^\x5c*")._asRegexp())._test_(name);
+if(smalltalk.assert($2)){
+name=_st(name)._allButFirst();
+name;
+_st(jq)._attr_put_("data-snippet","*");
+} else {
+_st(jq)._removeAttr_("data-snippet");
+};
+return _st(result)._at_put_(name,_st(_st(jq)._detach())._get_((0)));
+};
+}, function($ctx2) {$ctx2.fillBlock({each:each,jq:jq,name:name},$ctx1)})}));
+$3=result;
+return $3;
+}, function($ctx1) {$ctx1.fill(self,"digFromJQuery:",{aJQuery:aJQuery,result:result}, smalltalk.HtmlSnippet.klass)})},
+args: ["aJQuery"],
+source: "digFromJQuery: aJQuery\x0a\x09\x22Finds and takes out all snippets out of aJQuery\x22\x0a    | result |\x0a    result := #{}.\x0a\x09'[data-snippet]' asJQuery toArray do: [ :each |\x0a    \x09| jq name |\x0a        jq := each asJQuery.\x0a        name := jq attr: 'data-snippet'.\x0a        name = '*' ifFalse: [\x0a        \x09('^\x5c*' asRegexp test: name) ifTrue: [ name := name allButFirst. jq attr: 'data-snippet' put: '*' ]\x0a          \x09\x09ifFalse: [ jq removeAttr: 'data-snippet' ].\x0a            result at: name put: (jq detach get: 0) ]].\x0a\x09^result",
+messageSends: ["do:", "asJQuery", "attr:", "ifFalse:", "ifTrue:ifFalse:", "allButFirst", "attr:put:", "removeAttr:", "test:", "asRegexp", "at:put:", "get:", "detach", "=", "toArray"],
+referencedClasses: []
+}),
+smalltalk.HtmlSnippet.klass);
+
+
+smalltalk.addMethod(
+"_asSnippet",
+smalltalk.method({
+selector: "asSnippet",
+category: '*Canvas-Snippet',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $1;
+$1=_st(_st((smalltalk.HtmlSnippet || HtmlSnippet))._current())._at_(_st(self)._asString());
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"asSnippet",{}, smalltalk.CharacterArray)})},
+args: [],
+source: "asSnippet\x0a\x09^ HtmlSnippet current at: self asString",
+messageSends: ["at:", "asString", "current"],
+referencedClasses: ["HtmlSnippet"]
+}),
+smalltalk.CharacterArray);
+
+smalltalk.addMethod(
+"_doesNotUnderstand_",
+smalltalk.method({
+selector: "doesNotUnderstand:",
+category: '*Canvas-Snippet',
+fn: function (aMessage){
+var self=this;
+var snippet;
+return smalltalk.withContext(function($ctx1) { 
+var $1,$2,$3,$4;
+var $early={};
+try {
+$1=_st(_st(aMessage)._arguments())._isEmpty();
+if(! smalltalk.assert($1)){
+$2=smalltalk.Object.fn.prototype._doesNotUnderstand_.apply(_st(self), [aMessage]);
+return $2;
+};
+snippet=_st(_st((smalltalk.HtmlSnippet || HtmlSnippet))._current())._at_ifAbsent_(_st(aMessage)._selector(),(function(){
+return smalltalk.withContext(function($ctx2) {
+$3=smalltalk.Object.fn.prototype._doesNotUnderstand_.apply(_st(self), [aMessage]);
+throw $early=[$3];
+}, function($ctx2) {$ctx2.fillBlock({},$ctx1)})}));
+$4=_st(self)._snip_(snippet);
+return $4;
+}
+catch(e) {if(e===$early)return e[0]; throw e}
+}, function($ctx1) {$ctx1.fill(self,"doesNotUnderstand:",{aMessage:aMessage,snippet:snippet}, smalltalk.HTMLCanvas)})},
+args: ["aMessage"],
+source: "doesNotUnderstand: aMessage\x0a\x09| snippet |\x0a\x09aMessage arguments isEmpty ifFalse: [ ^super doesNotUnderstand: aMessage ].\x0a    snippet := HtmlSnippet current at: aMessage selector ifAbsent: [ ^super doesNotUnderstand: aMessage ].\x0a    ^ self snip: snippet",
+messageSends: ["ifFalse:", "doesNotUnderstand:", "isEmpty", "arguments", "at:ifAbsent:", "selector", "current", "snip:"],
+referencedClasses: ["HtmlSnippet"]
+}),
+smalltalk.HTMLCanvas);
+
+smalltalk.addMethod(
+"_snip_",
+smalltalk.method({
+selector: "snip:",
+category: '*Canvas-Snippet',
+fn: function (anElement){
+var self=this;
+var clone,caret;
+return smalltalk.withContext(function($ctx1) { 
var $1,$2;
+clone=_st(_st(anElement)._asJQuery())._clone();
+_st(self)._with_(_st((smalltalk.TagBrush || TagBrush))._fromJQuery_canvas_(clone,self));
+caret=_st(clone)._find_("[data-snippet=\x22*\x22]");
+$1=_st(_st(caret)._toArray())._isEmpty();
+if(smalltalk.assert($1)){
+caret=clone;
+caret;
+};
+$2=_st((smalltalk.TagBrush || TagBrush))._fromJQuery_canvas_(_st(caret)._removeAttr_("data-snippet"),self);
+return $2;
+}, function($ctx1) {$ctx1.fill(self,"snip:",{anElement:anElement,clone:clone,caret:caret}, smalltalk.HTMLCanvas)})},
+args: ["anElement"],
+source: "snip: anElement\x0a\x09\x22Adds clone of anElement, finds [data-snippet=\x22\x22*\x22\x22] subelement\x0a    and returns TagBrush as if that subelement was just added.\x0a    \x0a    Use with asSnippet -- (html snip: #mySnip asSnippet) with: [...]\x22\x0a    | clone caret |\x0a    clone := anElement asJQuery clone.\x0a    self with: (TagBrush fromJQuery: clone canvas: self).\x0a    caret := clone find: '[data-snippet=\x22*\x22]'.\x0a    caret toArray isEmpty ifTrue: [ caret := clone ].\x0a    ^TagBrush fromJQuery: (caret removeAttr: 'data-snippet') canvas: self",
+messageSends: ["clone", "asJQuery", "with:", "fromJQuery:canvas:", "find:", "ifTrue:", "isEmpty", "toArray", "removeAttr:"],
+referencedClasses: ["TagBrush"]
+}),
+smalltalk.HTMLCanvas);
+

st/Canvas-Snippet.st

@@ -0,0 +1,77 @@
+Smalltalk current createPackage: 'Canvas-Snippet' properties: #{}!
+Object subclass: #HtmlSnippet
+	instanceVariableNames: 'snippets'
+	package: 'Canvas-Snippet'!
+
+!HtmlSnippet methodsFor: 'accessing'!
+
+addSnippet: anAssociation
+	(snippets ifNil: [ snippets := #{} ]) add: anAssociation
+!
+
+addSnippets: aCollection
+	aCollection associationsDo: [ :each | self addSnippet: each ]
+!
+
+at: aString
+	^ snippets at: aString
+!
+
+at: aString ifAbsent: aBlock
+	^ snippets at: aString ifAbsent: aBlock
+! !
+
+HtmlSnippet class instanceVariableNames: 'current'!
+
+!HtmlSnippet class methodsFor: 'action'!
+
+digFromJQuery: aJQuery
+	"Finds and takes out all snippets out of aJQuery"
+    | result |
+    result := #{}.
+	'[data-snippet]' asJQuery toArray do: [ :each |
+    	| jq name |
+        jq := each asJQuery.
+        name := jq attr: 'data-snippet'.
+        name = '*' ifFalse: [
+        	('^\*' asRegexp test: name) ifTrue: [ name := name allButFirst. jq attr: 'data-snippet' put: '*' ]
+          		ifFalse: [ jq removeAttr: 'data-snippet' ].
+            result at: name put: (jq detach get: 0) ]].
+	^result
+! !
+
+!HtmlSnippet class methodsFor: 'instance creation'!
+
+current
+	^ current ifNil: [
+		current := self new addSnippets: (self digFromJQuery: document asJQuery); yourself ]
+! !
+
+!CharacterArray methodsFor: '*Canvas-Snippet'!
+
+asSnippet
+	^ HtmlSnippet current at: self asString
+! !
+
+!HTMLCanvas methodsFor: '*Canvas-Snippet'!
+
+doesNotUnderstand: aMessage
+	| snippet |
+	aMessage arguments isEmpty ifFalse: [ ^super doesNotUnderstand: aMessage ].
+    snippet := HtmlSnippet current at: aMessage selector ifAbsent: [ ^super doesNotUnderstand: aMessage ].
+    ^ self snip: snippet
+!
+
+snip: anElement
+	"Adds clone of anElement, finds [data-snippet=""*""] subelement
+    and returns TagBrush as if that subelement was just added.
+    
+    Use with asSnippet -- (html snip: #mySnip asSnippet) with: [...]"
+    | clone caret |
+    clone := anElement asJQuery clone.
+    self with: (TagBrush fromJQuery: clone canvas: self).
+    caret := clone find: '[data-snippet="*"]'.
+    caret toArray isEmpty ifTrue: [ caret := clone ].
+    ^TagBrush fromJQuery: (caret removeAttr: 'data-snippet') canvas: self
+! !
+