can-route - npm Package Compare versions

Comparing version 5.0.0-pre.3 to 5.0.0-pre.4

doc/can-route.md

@@ -85,29 +85,34 @@ @module {Object} can-route can-route
 <script type="module">
-import {DefineMap, Component, route} from "can";
+import {ObservableObject, StacheElement, route} from "can";
 import "//unpkg.com/mock-url@^5";
 
-const PageHome = Component.extend({
-  tag: "page-home",
-  view: `<h1>Home page</h1>
-  <a href="{{ routeUrl(page='other') }}">
-    Go to another page
-  </a>`,
-  ViewModel: {},
-});
+class PageHome extends StacheElement {
+	static view = `
+		<h1>Home page</h1>
+		<a href="{{ routeUrl(page='other') }}">
+			Go to another page
+		</a>
+	`;
+}
 
-const PageOther = Component.extend({
-  tag: "page-other",
-  view: `<h1>Other page</h1>
-    <a href="{{ routeUrl(page='home') }}">
-      Go home
-    </a>`,
-  ViewModel: {},
-});
+customElements.define("page-home", PageHome);
 
-Component.extend({
-  tag: "my-app",
-  ViewModel: {
+class PageOther extends StacheElement {
+	static view = `
+		<h1>Other page</h1>
+		<a href="{{ routeUrl(page='home') }}">
+			Go home
+		</a>
+	`;
+}
+
+customElements.define("page-other", PageOther);
+
+class MyApp extends StacheElement {
+	static view = `{{componentToShow}}`;
+
+	static props = {
     routeData: {
-      default() {
-        route.data = new DefineMap();
+      get default() {
+        route.data = new ObservableObject();
         route.register("{page}", { page: "home" });
@@ -125,7 +130,7 @@ route.start();
       }
-    },
-    page: "string"
-  },
-  view: `{{componentToShow}}`
-});
+    }
+  };
+}
+
+customElements.define("my-app", MyApp);
 </script>
@@ -135,8 +140,12 @@ ```
 
-`route.data` defaults to [can-define/map/map], but `route.data` can be set to any observable. The following uses [can-observe]:
+`route.data` defaults to [can-observable-object], but `route.data` can be set to any observable. The following uses [can-define-map]:
 
 ```js
-import {DefineMap, route, observe} from "can/everything";
+import {DefineMap, route} from "can/everything";
 
-route.data = new observe();
+const RouteData = DefineMap.extend("RouteData", {
+	page: "string"
+});
+
+route.data = new RouteData();
 route.register( "{page}", { page: "home" } );
@@ -158,5 +167,5 @@ route.start();
 ```js
-import {DefineMap, route} from "can";
+import {ObservableObject, route} from "can";
 
-route.data = new DefineMap();
+route.data = new ObservableObject();
 route.register( "{page}", {page: "recipes"} );
@@ -202,5 +211,5 @@ route.start();
 import "//unpkg.com/mock-url@^5.0.0";
-import {DefineMap, route} from "can";
+import {ObservableObject, route} from "can";
 
-route.data = new DefineMap( {type: "image/bar"} ); // location.hash -> #!&type=image%2Fbar
+route.data = new ObservableObject( {type: "image/bar"} ); // location.hash -> #!&type=image%2Fbar
 route.start();
@@ -207,0 +216,0 @@ </script>

doc/data.md

@@ -13,6 +13,6 @@ @property {Object|HTMLElement} can-route.data data
   <script type="module">
-  import {DefineMap, route} from "can";
+  import {ObservableObject, route} from "can";
   import "//unpkg.com/mock-url@^5.0.0/mock-url.mjs";
 
-  route.data = new DefineMap( {page: ""} );
+  route.data = new ObservableObject( {page: ""} );
   route.register( "{page}" );
@@ -53,3 +53,3 @@ route.start();
 ```js
-import { DefineMap, route } from "can";
+import { DefineMap, route } from "can/everything";
 
@@ -56,0 +56,0 @@ route.data = new DefineMap();

doc/stop.md

@@ -41,3 +41,3 @@ @function can-route.stop stop
 
-In the example shows a possible use reason for stopping can-route. 
+In the example shows a possible use reason for stopping can-route.
 When the user logs out the page doesn't change, though the hash still updates.
@@ -51,19 +51,20 @@ Notice the `logout`/`login` functions start and stop route. When logged out you can't change the page,
 <script type="module">
-import {DefineMap, route, Component } from "can";
+import {StacheElement, route } from "can/everything";
 import "//unpkg.com/mock-url@^5";
 
-Component.extend({
-  tag: "my-app",
-  view: `<a href="{{ routeUrl(page="dashboard") }}">dashboard</a>
-    <a href="{{ routeUrl(page="admin") }}">admin</a><br />
-    {{# if (showLogin) }}
-      <button on:click="login()">login</button>
-    {{ else }}
-      <button on:click="logout()">logout</button>
-    {{/ if }}
-    <h1>{{componentToShow}}</h1>
-    `,
-  ViewModel: {
+class MyApp extends StacheElement {
+	static view = `
+		<a href="{{ routeUrl(page="dashboard") }}">dashboard</a>
+		<a href="{{ routeUrl(page="admin") }}">admin</a><br />
+		{{# if (showLogin) }}
+			<button on:click="login()">login</button>
+		{{ else }}
+			<button on:click="logout()">logout</button>
+		{{/ if }}
+		<h1>{{componentToShow}}</h1>
+	`;
+
+	static props = {
     routeData: {
-      default() {
+      get default() {
         route.register("{page}");
@@ -75,10 +76,2 @@ route.data.page = "admin";
     },
-    logout() {
-      route.data.page = "login";
-      route.stop();
-    },
-    login() {
-      route.start();
-      route.data.page = "admin";
-    },
     get componentToShow() {
@@ -89,7 +82,19 @@ return this.routeData.page;
       return this.routeData.page === "login";
-    } 
+    }
+  };
+
+  logout() {
+  	route.data.page = "login";
+  	route.stop();
   }
-});
+  
+  login() {
+  	route.start();
+  	route.data.page = "admin";
+  }
+}
+
+customElements.define("my-app", MyApp);
 </script>
 ```
 @codepen

package.json

 {
   "name": "can-route",
-  "version": "5.0.0-pre.3",
+  "version": "5.0.0-pre.4",
   "description": "Observable front-end application routing for CanJS.",
@@ -5,0 +5,0 @@ "homepage": "https://canjs.com/doc/can-route.html",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

140665

increased by0.17%

No dependency changes