added scoped link feature (#1172)

* added scoped link feature
* added scoped link to documentation

docs/components.md

@@ -422,6 +422,18 @@ The above code will produce output HTML similar to the following:
 </div>
 ```
 
+**`href:scoped`**
+
+```marko
+<a href:scoped="#anchor">Go to Anchor</a>
+<div id:scoped="anchor"></div>
+```
+
+```html
+<a href="#c0-anchor">Go to Anchor</a>
+<div id="c0-anchor"></div>
+```
+
 ### `no-update`
 
 Preserves the DOM subtree associated with the DOM element or component such that

src/components/ComponentDef.js

@@ -63,6 +63,10 @@ ComponentDef.prototype = {
         if (nestedId == null) {
             return id;
         } else {
+            if (nestedId.startsWith("#")) {
+                id = "#" + id;
+                nestedId = nestedId.substring(1);
+            }
             if (typeof nestedId == "string" && repeatedRegExp.test(nestedId)) {
                 return this.___globalComponentsContext.___nextRepeatedId(
                     id,

test/components-browser/fixtures/scoped-link/component.js

@@ -0,0 +1,3 @@
+module.exports = {
+    onMount: function() {}
+};

test/components-browser/fixtures/scoped-link/index.marko

@@ -0,0 +1,3 @@
+<div key="root">
+	<a href:scoped="#anchor">Go to anchor</a>
+</div>

test/components-browser/fixtures/scoped-link/test.js

@@ -0,0 +1,10 @@
+var expect = require("chai").expect;
+
+module.exports = function(helpers) {
+    var component = helpers.mount(require.resolve("./index"), {});
+    var link = component.getEl("root").querySelector("a");
+    var linkHref = link.getAttribute("href");
+    expect(!!linkHref).to.equal(true);
+    expect(linkHref).to.match(/^#.*anchor$/);
+    expect(link.getAttribute("href:scoped")).to.equal(null);
+};