refactor(router): change url syntax (incomplete)

packages/router/src/router.ts

@@ -73,9 +73,9 @@ export class Router {
 
     this.separators = {
       ... {
-        viewport: ':',
-        sibling: '/',
-        scope: '+',
+        viewport: '@', // ':',
+        sibling: '+', // '/',
+        scope: '/', // '+',
         ownsScope: '!',
         parameters: '=',
         add: '+',
@@ -152,7 +152,7 @@ export class Router {
     const viewports: Viewport[] = [];
     for (const vp in views) {
       const component: ICustomElementType | string = views[vp];
-      const viewport = this.findViewport(`${vp}${this.separators.viewport}${component}`);
+      const viewport = this.findViewport(`${component}${this.separators.viewport}${vp}`);
       if (viewport.setNextContent(component, instruction)) {
         viewports.push(viewport);
       }
@@ -291,10 +291,12 @@ export class Router {
 
   public findViews(entry: IHistoryEntry): Object {
     const views: Object = {};
-    let sections: string[] = entry.path.split(this.separators.sibling);
-    if (sections.length && sections[0] === '') {
-      sections.shift();
+    let path = entry.path;
+    // TODO: Let this govern start of scope
+    if (path.startsWith('/')) {
+      path = path.substr(1);
     }
+    let sections: string[] = path.split(this.separators.sibling);
 
     // Expand with instances for all containing views
     const expandedSections: string[] = [];
@@ -312,9 +314,13 @@ export class Router {
       const view = sections.shift();
       // TODO: implement parameters
       // As a = part at the end of the view!
-      const parts = view.split(this.separators.viewport);
-      const component = parts.pop();
-      const name = (parts.length ? parts.join(this.separators.viewport) : `?${index++}`);
+      const scopes = view.split(this.separators.scope);
+      const leaf = scopes.pop();
+      const parts = leaf.split(this.separators.viewport);
+      // Noooooo?
+      const component = parts[0];
+      scopes.push(parts.length ? parts.join(this.separators.viewport) : `?${index++}`);
+      const name = scopes.join(this.separators.scope);
       if (component) {
         views[name] = component;
       }

packages/router/src/scope.ts

@@ -21,7 +21,7 @@ export class Scope {
   public findViewport(name: string): Viewport {
     const parts = name.split(this.router.separators.scope);
     const names = parts.shift().split(this.router.separators.viewport);
-    const comp = names.pop();
+    const comp = names.shift();
     name = names.shift();
     let newScope = false;
     if (name.endsWith(this.router.separators.ownsScope)) {

packages/router/src/viewport.ts

@@ -144,7 +144,7 @@ export class Viewport {
     if (this.content) {
       const component = this.content.description.name;
       const newScope: string = this.scope ? this.router.separators.ownsScope : '';
-      return `${this.name}${newScope}${this.router.separators.viewport}${component}`;
+      return `${component}${this.router.separators.viewport}${this.name}${newScope}`;
     }
   }
 

packages/router/test/e2e/modules/src/app.html

@@ -41,18 +41,18 @@
       <viewport name="steps"></viewport>
     </div>
     <div style="padding: 10px;">
-      <a href="steps:one">One</a>
-      <a href="steps:two">Two</a>
-      <a href="steps:three">Three</a>
+      <a href="one@steps">One</a>
+      <a href="two@steps">Two</a>
+      <a href="three@steps">Three</a>
     </div>
     <div style="padding: 10px;">
-      <a href="application:email">Email</a>
-      <a href="application:calendar">Calendar</a>
-      <a href="application:email/email-content:contacts">Email Contacts</a>
-      <a href="email-content:contacts">Only Contacts</a>
-      <a href="application:calendar+calendar-content!:recursive+application:email">Recursive > Email</a>
-      <a href="header:header">Add the header</a>
-      <a href="header:-">Remove the header</a>
+      <a href="email@application">Email</a>
+      <a href="calendar@application">Calendar</a>
+      <a href="email@application+contacts@email-content">Email Contacts</a>
+      <a href="contacts@email-content">Only Contacts</a>
+      <a href="calendar@application/recursive@calendar-content!/email@application">Recursive > Email</a>
+      <a href="header@header">Add the header</a>
+      <a href="-@header">Remove the header</a>
     </div>
     <div style="padding: 10px;">
       <viewport name="application"></viewport>

packages/router/test/e2e/modules/src/components/calendar.html

@@ -1,9 +1,9 @@
 <template>
   <div>CALENDAR</div>
-  <a href="calendar-content:dates">Dates</a>
-  <a href="calendar-content:schedule">Schedule</a>
-  <a href="calendar-content:about">About application</a>
-  <a href="calendar-content:recursive">Recursive</a>
+  <a href="dates@calendar-content">Dates</a>
+  <a href="schedule@calendar-content">Schedule</a>
+  <a href="about@calendar-content">About application</a>
+  <a href="recursive@calendar-content!">Recursive</a>
   <div><input></div>
 
   <viewport name="calendar-content" scope="true"></viewport>

packages/router/test/e2e/modules/src/components/email.html

@@ -1,8 +1,8 @@
 <template>
   <div>EMAIL</div>
-  <a href="email-content:inbox">Inbox</a>
-  <a href="email-content:contacts">Contacts</a>
-  <a href="email-content:about">About application</a>
+  <a href="inbox@email-content">Inbox</a>
+  <a href="contacts@email-content">Contacts</a>
+  <a href="about@email-content">About application</a>
   <div><input></div>
 
   <viewport name="email-content"></viewport>

packages/router/test/e2e/modules/src/components/one.html

@@ -1,6 +1,6 @@
 <template>
 ONE
-<a href="steps:three">Previous</a>
-<a href="steps:two">Next</a>
+<a href="three@steps">Previous</a>
+<a href="two@steps">Next</a>
 <input>
 </template>

packages/router/test/e2e/modules/src/components/recursive.html

@@ -1,8 +1,8 @@
 <template>
   <div style="padding: 10px;">
-    <a href="application:email">Email</a>
-    <a href="application:calendar">Calendar</a>
-    <a href="application:email/email:contacts">Contacts</a>
+    <a href="email@application">Email</a>
+    <a href="calendar@application">Calendar</a>
+    <a href="email@application+contacts@email">Contacts</a>
   </div>
   <div style="padding: 10px;">
     <viewport name="application"></viewport>

packages/router/test/e2e/modules/src/components/three.html

@@ -1,6 +1,6 @@
 <template>
 THREE
-<a href="steps:two">Previous</a>
-<a href="steps:one">Next</a>
+<a href="two@steps">Previous</a>
+<a href="one@steps">Next</a>
 <input>
 </template>

packages/router/test/e2e/modules/src/components/two.html

@@ -1,6 +1,6 @@
 <template>
 TWO
-<a href="steps:one">Previous</a>
-<a href="steps:three">Next</a>
+<a href="one@steps">Previous</a>
+<a href="three@steps">Next</a>
 <input>
 </template>

packages/router/test/unit/link-handler.spec.ts

@@ -5,14 +5,14 @@ import { spy, SinonSpy } from 'sinon';
 describe('LinkHandler', () => {
   let linkHandler;
   let callback = ((info) => { });
-  class MockDockument {
+  class MockDocument {
     addEventListener(event, handler, preventDefault) {}
     removeEventListener(handler) {}
   }
 
   beforeEach(() => {
     linkHandler = new LinkHandler();
-    linkHandler.document = new MockDockument();
+    linkHandler.document = new MockDocument();
   });
 
   it('can be created', () => {

packages/router/test/unit/router.spec.ts

@@ -24,7 +24,7 @@ describe('Router', () => {
     this.timeout(30000);
     const { host, router } = await setup();
 
-    router.goto('/left:foo');
+    router.goto('/foo@left');
     await Promise.resolve();
     await Promise.resolve();
     expect(host.textContent).to.contain('foo');
@@ -36,7 +36,7 @@ describe('Router', () => {
     this.timeout(30000);
     const { host, router } = await setup();
 
-    router.goto('/left:foo');
+    router.goto('/foo@left');
     await Promise.resolve();
     await Promise.resolve();
     await Promise.resolve();
@@ -52,13 +52,13 @@ describe('Router', () => {
     const { host, router } = await setup();
 
     let historyLength = router.historyBrowser.history.length;
-    router.goto('/left:foo');
+    router.goto('/foo@left');
     await Promise.resolve();
     await Promise.resolve();
     expect(host.textContent).to.contain('foo');
     expect(router.historyBrowser.history.length).to.equal(historyLength + 1);
 
-    router.replace('/left:bar');
+    router.replace('/bar@left');
     await Promise.resolve();
     await Promise.resolve();
     expect(host.textContent).to.contain('bar');
@@ -71,7 +71,7 @@ describe('Router', () => {
     this.timeout(30000);
     const { host, router } = await setup();
 
-    router.goto('/right:bar');
+    router.goto('/bar@right');
     await Promise.resolve();
     await Promise.resolve();
     expect(host.textContent).to.contain('bar');
@@ -83,13 +83,13 @@ describe('Router', () => {
     this.timeout(30000);
     const { host, router } = await setup();
 
-    router.goto('/left:foo');
+    router.goto('/foo@left');
     await Promise.resolve();
     await Promise.resolve();
     expect(host.textContent).to.contain('Viewport: foo');
     expect(host.textContent).to.not.contain('Viewport: bar');
 
-    router.goto('/right:bar');
+    router.goto('/bar@right');
     await Promise.resolve();
     await Promise.resolve();
     expect(host.textContent).to.contain('Viewport: foo');
@@ -102,14 +102,14 @@ describe('Router', () => {
     this.timeout(40000);
     const { host, router } = await setup();
 
-    router.goto('/left:foo');
+    router.goto('/foo@left');
     await Promise.resolve();
     await Promise.resolve();
     await Promise.resolve();
     expect(host.textContent).to.contain('Viewport: foo');
     expect(host.textContent).to.not.contain('Viewport: bar');
 
-    router.goto('/left:bar');
+    router.goto('/bar@left');
     await Promise.resolve();
     await Promise.resolve();
     await Promise.resolve();
@@ -137,13 +137,13 @@ describe('Router', () => {
   //   this.timeout(30000);
   //   const { host, router } = await setup();
 
-  //   router.goto('/left:foo');
+  //   router.goto('/foo@left');
   //   await Promise.resolve();
   // await Promise.resolve();
   //   expect(host.textContent).to.contain('Viewport: foo');
   //   expect(host.textContent).to.not.contain('Viewport: bar');
 
-  //   router.goto('/right:bar');
+  //   router.goto('/bar@right');
   //   await Promise.resolve();
   // await Promise.resolve();
   //   expect(host.textContent).to.contain('Viewport: foo');
@@ -168,7 +168,7 @@ describe('Router', () => {
     this.timeout(30000);
     const { host, router } = await setup();
 
-    router.goto('/left:foo/right:bar');
+    router.goto('/foo@left+bar@right');
     await Promise.resolve();
     await Promise.resolve();
     expect(host.textContent).to.contain('foo');
@@ -181,12 +181,12 @@ describe('Router', () => {
     this.timeout(30000);
     const { host, router } = await setup();
 
-    router.goto('/left:baz/right:qux');
+    router.goto('/baz@left+qux@right');
     await Promise.resolve();
     await Promise.resolve();
     expect(host.textContent).to.contain('Viewport: baz');
     expect(host.textContent).to.contain('Viewport: qux');
-    router.goto('/left:foo/right:bar');
+    router.goto('/foo@left+bar@right');
     await Promise.resolve();
     await Promise.resolve();
     expect(host.textContent).to.contain('Viewport: baz');
@@ -201,7 +201,7 @@ describe('Router', () => {
     this.timeout(30000);
     const { host, router } = await setup();
 
-    router.goto('/left:foo/right:bar/foo:baz/bar:qux');
+    router.goto('/foo@left+bar@right+baz@foo+qux@bar');
     await Promise.resolve();
     await Promise.resolve();
     expect(host.textContent).to.contain('Viewport: foo');
@@ -216,7 +216,7 @@ describe('Router', () => {
     this.timeout(30000);
     const { host, router } = await setup();
 
-    router.goto('/left:foo');
+    router.goto('/foo@left');
     await Promise.resolve();
     await Promise.resolve();
     expect(host.textContent).to.contain('foo');
@@ -233,18 +233,21 @@ describe('Router', () => {
     this.timeout(30000);
     const { host, router } = await setup();
 
-    router.goto('/left:quux');
+    router.goto('/quux@left');
+    await Promise.resolve();
     await Promise.resolve();
     await Promise.resolve();
     expect(host.textContent).to.contain('Viewport: quux');
 
-    router.goto('/quux:quux');
+    router.goto('/quux@quux!');
+    await Promise.resolve();
     await Promise.resolve();
     await Promise.resolve();
     console.log(host.innerHTML);
     expect(host.textContent).to.contain('Viewport: quux');
 
-    router.goto('/left:quux+quux:foo');
+    router.goto('/quux@left/foo@quux!');
+    await Promise.resolve();
     await Promise.resolve();
     await Promise.resolve();
     console.log(host.innerHTML);
@@ -253,10 +256,12 @@ describe('Router', () => {
     (<any>host).getElementsByTagName('SPAN')[0].click();
     await Promise.resolve();
     await Promise.resolve();
+    await Promise.resolve();
     console.log(host.innerHTML);
     expect(host.textContent).to.contain('Viewport: baz');
 
-    router.goto('/left:bar');
+    router.goto('/bar@left');
+    await Promise.resolve();
     await Promise.resolve();
     await Promise.resolve();
     expect(host.textContent).to.contain('Viewport: bar');
@@ -273,7 +278,7 @@ let setup = async (): Promise<{ au, container, host, router }> => {
   const container = DI.createContainer();
   container.register(<any>BasicConfiguration);
   const App = (<any>CustomElementResource).define({ name: 'app', template: '<template><viewport name="left"></viewport><viewport name="right"></viewport></template>' });
-  const Foo = (<any>CustomElementResource).define({ name: 'foo', template: '<template>foo <a href="#/foo:baz"><span>baz</span></a><viewport name="foo"></viewport></template>' });
+  const Foo = (<any>CustomElementResource).define({ name: 'foo', template: '<template>foo <a href="#/baz@foo"><span>baz</span></a><viewport name="foo"></viewport></template>' });
   const Bar = (<any>CustomElementResource).define({ name: 'bar', template: '<template>bar<viewport name="bar"></viewport></template>' });
   const Baz = (<any>CustomElementResource).define({ name: 'baz', template: '<template>baz<viewport name="baz"></viewport></template>' });
   const Qux = (<any>CustomElementResource).define({ name: 'qux', template: '<template>qux<viewport name="qux"></viewport></template>' }, class {
@@ -312,7 +317,7 @@ let teardown = async (host, router, count) => {
 let throttleCounter = 0;
 let freshState = async (router, count) => {
   throttleCounter += (count * 2) + 2;
-  router.goto('/left:-/right:-');
+  router.goto('/-@left+-@right');
   await Promise.resolve();
   await Promise.resolve();
   await Promise.resolve();