Made refactorings as required.

  - Add a class comment on HTMLSnippet
  - Rename HTMLCanvas >> snip: to #snippet:
  - Cleanup HTMLSnippet class-side initialization (extract current initialization into an instance-side method maybe?)
  - Exctract lazy initialization of 'snippet' inst var to an accessing method

js/Canvas.deploy.js

@@ -1553,36 +1553,15 @@ selector: "addSnippet:",
 fn: function (anAssociation){
 var self=this;
 var snippet;
-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 smalltalk.withContext(function($ctx1) { 
_st(_st(self)._snippets())._add_(anAssociation);
 snippet=_st(anAssociation)._value();
 _st(_st((smalltalk.ClassBuilder || ClassBuilder))._new())._installMethod_forClass_category_(_st(_st((function(htmlReceiver){
-return smalltalk.withContext(function($ctx2) {
return _st(htmlReceiver)._snip_(snippet);
+return smalltalk.withContext(function($ctx2) {
return _st(htmlReceiver)._snippet_(snippet);
 }, function($ctx2) {$ctx2.fillBlock({htmlReceiver:htmlReceiver},$ctx1)})}))._currySelf())._asCompiledMethod_(_st(anAssociation)._key()),(smalltalk.HTMLCanvas || HTMLCanvas),"**snippets");
 return self}, function($ctx1) {$ctx1.fill(self,"addSnippet:",{anAssociation:anAssociation,snippet:snippet}, 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({
@@ -1609,40 +1588,14 @@ return $1;
 }),
 smalltalk.HtmlSnippet);
 
-
-smalltalk.HtmlSnippet.klass.iVarNames = ['current'];
 smalltalk.addMethod(
-"_current",
+"_loadFromJQuery_",
 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:",
+selector: "loadFromJQuery:",
 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){
+return smalltalk.withContext(function($ctx1) { 
var $1,$2;
+_st(_st(_st(aJQuery)._find_("[data-snippet]"))._toArray())._do_((function(each){
 var jq,name;
 return smalltalk.withContext(function($ctx2) {
jq=_st(each)._asJQuery();
 jq;
@@ -1658,12 +1611,50 @@ _st(jq)._attr_put_("data-snippet","*");
 } else {
 _st(jq)._removeAttr_("data-snippet");
 };
-return _st(result)._at_put_(name,_st(_st(jq)._detach())._get_((0)));
+return _st(self)._addSnippet_(_st(name).__minus_gt(_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)})}
+return self}, function($ctx1) {$ctx1.fill(self,"loadFromJQuery:",{aJQuery:aJQuery}, smalltalk.HtmlSnippet)})}
+}),
+smalltalk.HtmlSnippet);
+
+smalltalk.addMethod(
+"_snippets",
+smalltalk.method({
+selector: "snippets",
+fn: function (){
+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;
+};
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"snippets",{}, 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,$1;
+$2=self["@current"];
+if(($receiver = $2) == nil || $receiver == undefined){
+self["@current"]=_st(self)._new();
+$1=self["@current"];
+} else {
+$1=$2;
+};
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"current",{}, smalltalk.HtmlSnippet.klass)})}
 }),
 smalltalk.HtmlSnippet.klass);
 
@@ -1674,7 +1665,7 @@ selector: "initialize",
 fn: function (){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
smalltalk.Object.klass.fn.prototype._initialize.apply(_st(self), []);
-_st(self)._current();
+_st(_st(self)._current())._loadFromJQuery_(_st(document)._asJQuery());
 return self}, function($ctx1) {$ctx1.fill(self,"initialize",{}, smalltalk.HtmlSnippet.klass)})}
 }),
 smalltalk.HtmlSnippet.klass);
@@ -2636,9 +2627,9 @@ return self}, function($ctx1) {$ctx1.fill(self,"asJQuery",{}, smalltalk.String)}
 smalltalk.String);
 
 smalltalk.addMethod(
-"_snip_",
+"_snippet_",
 smalltalk.method({
-selector: "snip:",
+selector: "snippet:",
 fn: function (anElement){
 var self=this;
 var clone,caret;
@@ -2653,7 +2644,7 @@ 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)})}
+}, function($ctx1) {$ctx1.fill(self,"snippet:",{anElement:anElement,clone:clone,caret:caret}, smalltalk.HTMLCanvas)})}
 }),
 smalltalk.HTMLCanvas);
 

js/Canvas.js

@@ -2136,53 +2136,28 @@ smalltalk.HTMLCanvas.klass);
 
 
 smalltalk.addClass('HtmlSnippet', smalltalk.Object, ['snippets'], 'Canvas');
+smalltalk.HtmlSnippet.comment="HtmlSnippet instance is the registry of html snippets.\x0aHtmlSnippet current is the public singleton instance.\x0a\x0aAt the beginning, it scans the document for any html elements\x0awith 'data-snippet=\x22foo\x22' attribute and takes them off the document,\x0aremembering them in the store under the specified name.\x0aIt also install method #foo into HTMLCanvas dynamically.\x0a\x0aEvery html snippet should mark a 'caret', a place where contents\x0acan be inserted, by 'data-snippet=\x22*\x22' (a special name for caret).\x0aFor example:\x0a\x0a<li data-snippet='menuelement' class='...'><a data-snippet='*'></a></li>\x0a\x0adefines a list element with a link inside; the link itself is marked as a caret.\x0a\x0aYou can later issue\x0a\x0ahtml menuelement href: '/foo'; with: 'A foo'\x0a\x0ato insert the whole snippet and directly manipulate the caret, so it renders:\x0a\x0a<li class='...'><a href='/foo'>A foo</a></li>\x0a\x0aFor a self-careting tags (not very useful, but you do not need to fill class etc.\x0ayou can use\x0a\x0a<div class='lots of classes' attr1='one' attr2='two' data-snippet='*bar'></div>\x0a\x0aand in code later do:\x0a\x0ahtml bar with: [ xxx ]\x0a\x0ato render\x0a\x0a<div class='lots of classes' attr1='one' attr2='two'>...added by xxx...</div>\x0a"
 smalltalk.addMethod(
 "_addSnippet_",
 smalltalk.method({
 selector: "addSnippet:",
-category: 'accessing',
+category: 'snippet installation',
 fn: function (anAssociation){
 var self=this;
 var snippet;
-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 smalltalk.withContext(function($ctx1) { 
_st(_st(self)._snippets())._add_(anAssociation);
 snippet=_st(anAssociation)._value();
 _st(_st((smalltalk.ClassBuilder || ClassBuilder))._new())._installMethod_forClass_category_(_st(_st((function(htmlReceiver){
-return smalltalk.withContext(function($ctx2) {
return _st(htmlReceiver)._snip_(snippet);
+return smalltalk.withContext(function($ctx2) {
return _st(htmlReceiver)._snippet_(snippet);
 }, function($ctx2) {$ctx2.fillBlock({htmlReceiver:htmlReceiver},$ctx1)})}))._currySelf())._asCompiledMethod_(_st(anAssociation)._key()),(smalltalk.HTMLCanvas || HTMLCanvas),"**snippets");
 return self}, function($ctx1) {$ctx1.fill(self,"addSnippet:",{anAssociation:anAssociation,snippet:snippet}, smalltalk.HtmlSnippet)})},
 args: ["anAssociation"],
-source: "addSnippet: anAssociation\x0a\x09| snippet |\x0a\x09(snippets ifNil: [ snippets := #{} ]) add: anAssociation.\x0a    snippet := anAssociation value.\x0a    ClassBuilder new\x0a    \x09installMethod: ([ :htmlReceiver | htmlReceiver snip: snippet ] currySelf asCompiledMethod: anAssociation key)\x0a        forClass: HTMLCanvas\x0a        category: '**snippets'",
-messageSends: ["add:", "ifNil:", "value", "installMethod:forClass:category:", "asCompiledMethod:", "key", "currySelf", "snip:", "new"],
+source: "addSnippet: anAssociation\x0a\x09| snippet |\x0a\x09self snippets add: anAssociation.\x0a    snippet := anAssociation value.\x0a    ClassBuilder new\x0a    \x09installMethod: ([ :htmlReceiver | htmlReceiver snippet: snippet ] currySelf asCompiledMethod: anAssociation key)\x0a        forClass: HTMLCanvas\x0a        category: '**snippets'",
+messageSends: ["add:", "snippets", "value", "installMethod:forClass:category:", "asCompiledMethod:", "key", "currySelf", "snippet:", "new"],
 referencedClasses: ["HTMLCanvas", "ClassBuilder"]
 }),
 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({
@@ -2219,46 +2194,15 @@ referencedClasses: []
 }),
 smalltalk.HtmlSnippet);
 
-
-smalltalk.HtmlSnippet.klass.iVarNames = ['current'];
 smalltalk.addMethod(
-"_current",
+"_loadFromJQuery_",
 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',
+selector: "loadFromJQuery:",
+category: 'snippet installation',
 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){
+return smalltalk.withContext(function($ctx1) { 
var $1,$2;
+_st(_st(_st(aJQuery)._find_("[data-snippet]"))._toArray())._do_((function(each){
 var jq,name;
 return smalltalk.withContext(function($ctx2) {
jq=_st(each)._asJQuery();
 jq;
@@ -2274,15 +2218,63 @@ _st(jq)._attr_put_("data-snippet","*");
 } else {
 _st(jq)._removeAttr_("data-snippet");
 };
-return _st(result)._at_put_(name,_st(_st(jq)._detach())._get_((0)));
+return _st(self)._addSnippet_(_st(name).__minus_gt(_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)})},
+return self}, function($ctx1) {$ctx1.fill(self,"loadFromJQuery:",{aJQuery:aJQuery}, smalltalk.HtmlSnippet)})},
 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"],
+source: "loadFromJQuery: aJQuery\x0a\x09\x22Finds and takes out all snippets out of aJQuery.\x0a    Installs it into self.\x22\x0a\x09(aJQuery find: '[data-snippet]') 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            self addSnippet: name -> (jq detach get: 0) ]]\x0a",
+messageSends: ["do:", "asJQuery", "attr:", "ifFalse:", "ifTrue:ifFalse:", "allButFirst", "attr:put:", "removeAttr:", "test:", "asRegexp", "addSnippet:", "->", "get:", "detach", "=", "toArray", "find:"],
+referencedClasses: []
+}),
+smalltalk.HtmlSnippet);
+
+smalltalk.addMethod(
+"_snippets",
+smalltalk.method({
+selector: "snippets",
+category: 'accessing',
+fn: function (){
+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;
+};
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"snippets",{}, smalltalk.HtmlSnippet)})},
+args: [],
+source: "snippets\x0a\x09^snippets ifNil: [ snippets := #{} ]\x0a",
+messageSends: ["ifNil:"],
+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,$1;
+$2=self["@current"];
+if(($receiver = $2) == nil || $receiver == undefined){
+self["@current"]=_st(self)._new();
+$1=self["@current"];
+} else {
+$1=$2;
+};
+return $1;
+}, function($ctx1) {$ctx1.fill(self,"current",{}, smalltalk.HtmlSnippet.klass)})},
+args: [],
+source: "current\x0a\x09^ current ifNil: [ current := self new ]",
+messageSends: ["ifNil:", "new"],
 referencedClasses: []
 }),
 smalltalk.HtmlSnippet.klass);
@@ -2295,11 +2287,11 @@ category: 'initialization',
 fn: function (){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
smalltalk.Object.klass.fn.prototype._initialize.apply(_st(self), []);
-_st(self)._current();
+_st(_st(self)._current())._loadFromJQuery_(_st(document)._asJQuery());
 return self}, function($ctx1) {$ctx1.fill(self,"initialize",{}, smalltalk.HtmlSnippet.klass)})},
 args: [],
-source: "initialize\x0a\x09super initialize.\x0a\x09self current",
-messageSends: ["initialize", "current"],
+source: "initialize\x0a\x09super initialize.\x0a\x09self current loadFromJQuery: document asJQuery",
+messageSends: ["initialize", "loadFromJQuery:", "asJQuery", "current"],
 referencedClasses: []
 }),
 smalltalk.HtmlSnippet.klass);
@@ -3672,9 +3664,9 @@ referencedClasses: []
 smalltalk.String);
 
 smalltalk.addMethod(
-"_snip_",
+"_snippet_",
 smalltalk.method({
-selector: "snip:",
+selector: "snippet:",
 category: '*Canvas',
 fn: function (anElement){
 var self=this;
@@ -3690,9 +3682,9 @@ 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)})},
+}, function($ctx1) {$ctx1.fill(self,"snippet:",{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",
+source: "snippet: 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    Rarely needed to use directly, use `html foo` dynamically installed method\x0a    for a snippet named foo.\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"]
 }),

st/Canvas.st

@@ -492,22 +492,45 @@ onJQuery: aJQuery
 Object subclass: #HtmlSnippet
 	instanceVariableNames: 'snippets'
 	package: 'Canvas'!
+!HtmlSnippet commentStamp!
+HtmlSnippet instance is the registry of html snippets.
+HtmlSnippet current is the public singleton instance.
 
-!HtmlSnippet methodsFor: 'accessing'!
+At the beginning, it scans the document for any html elements
+with 'data-snippet="foo"' attribute and takes them off the document,
+remembering them in the store under the specified name.
+It also install method #foo into HTMLCanvas dynamically.
 
-addSnippet: anAssociation
-	| snippet |
-	(snippets ifNil: [ snippets := #{} ]) add: anAssociation.
-    snippet := anAssociation value.
-    ClassBuilder new
-    	installMethod: ([ :htmlReceiver | htmlReceiver snip: snippet ] currySelf asCompiledMethod: anAssociation key)
-        forClass: HTMLCanvas
-        category: '**snippets'
-!
+Every html snippet should mark a 'caret', a place where contents
+can be inserted, by 'data-snippet="*"' (a special name for caret).
+For example:
 
-addSnippets: aCollection
-	aCollection associationsDo: [ :each | self addSnippet: each ]
-!
+<li data-snippet='menuelement' class='...'><a data-snippet='*'></a></li>
+
+defines a list element with a link inside; the link itself is marked as a caret.
+
+You can later issue
+
+html menuelement href: '/foo'; with: 'A foo'
+
+to insert the whole snippet and directly manipulate the caret, so it renders:
+
+<li class='...'><a href='/foo'>A foo</a></li>
+
+For a self-careting tags (not very useful, but you do not need to fill class etc.
+you can use
+
+<div class='lots of classes' attr1='one' attr2='two' data-snippet='*bar'></div>
+
+and in code later do:
+
+html bar with: [ xxx ]
+
+to render
+
+<div class='lots of classes' attr1='one' attr2='two'>...added by xxx...</div>!
+
+!HtmlSnippet methodsFor: 'accessing'!
 
 at: aString
 	^ snippets at: aString
@@ -515,39 +538,50 @@ at: aString
 
 at: aString ifAbsent: aBlock
 	^ snippets at: aString ifAbsent: aBlock
+!
+
+snippets
+	^snippets ifNil: [ snippets := #{} ]
 ! !
 
-HtmlSnippet class instanceVariableNames: 'current'!
+!HtmlSnippet methodsFor: 'snippet installation'!
 
-!HtmlSnippet class methodsFor: 'action'!
+addSnippet: anAssociation
+	| snippet |
+	self snippets add: anAssociation.
+    snippet := anAssociation value.
+    ClassBuilder new
+    	installMethod: ([ :htmlReceiver | htmlReceiver snippet: snippet ] currySelf asCompiledMethod: anAssociation key)
+        forClass: HTMLCanvas
+        category: '**snippets'
+!
 
-digFromJQuery: aJQuery
-	"Finds and takes out all snippets out of aJQuery"
-    | result |
-    result := #{}.
-	'[data-snippet]' asJQuery toArray do: [ :each |
+loadFromJQuery: aJQuery
+	"Finds and takes out all snippets out of aJQuery.
+    Installs it into self."
+	(aJQuery find: '[data-snippet]') 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
+            self addSnippet: name -> (jq detach get: 0) ]]
 ! !
 
+HtmlSnippet class instanceVariableNames: 'current'!
+
 !HtmlSnippet class methodsFor: 'initialization'!
 
 initialize
 	super initialize.
-	self current
+	self current loadFromJQuery: document asJQuery
 ! !
 
 !HtmlSnippet class methodsFor: 'instance creation'!
 
 current
-	^ current ifNil: [
-		current := self new addSnippets: (self digFromJQuery: document asJQuery); yourself ]
+	^ current ifNil: [ current := self new ]
 ! !
 
 Object subclass: #TagBrush
@@ -951,11 +985,12 @@ asJQuery
 
 !HTMLCanvas methodsFor: '*Canvas'!
 
-snip: anElement
+snippet: 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: [...]"
+    Rarely needed to use directly, use `html foo` dynamically installed method
+    for a snippet named foo."
     | clone caret |
     clone := anElement asJQuery clone.
     self with: (TagBrush fromJQuery: clone canvas: self).