From 332ca061f09dd85fc34ca9226c5bc45298fd5c0c Mon Sep 17 00:00:00 2001
From: Nils Lundquist <nils@bitovi.com>
Date: Fri, 27 Sep 2019 10:15:15 -0600
Subject: [PATCH 1/2] add beforeSend anchor to docs

---
 data/url/url.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/data/url/url.js b/data/url/url.js
index 5a81a2ec..d4f00ff1 100644
--- a/data/url/url.js
+++ b/data/url/url.js
@@ -218,6 +218,7 @@ var urlBehavior = behavior("data/url", function(baseConnection) {
  * ```
  * This can be particularly useful for passing a handler for the [can-ajax <code>beforeSend</code>] hook.
  *
+ * <a id="beforeSend"></a>
  * The [can-ajax <code>beforeSend</code>] hook can also be passed for all request methods. This can be useful when
  * attaching a session token header to a request:
  * 

From ca61d292bb249f09c4042eb913136af0e82d179c Mon Sep 17 00:00:00 2001
From: Nils Lundquist <nils@bitovi.com>
Date: Fri, 27 Sep 2019 19:47:03 -0600
Subject: [PATCH 2/2] add codepens for all url object config examples

---
 data/url/beforeSend-all.html  | 69 +++++++++++++++++++++++++
 data/url/custom-request.html  | 89 ++++++++++++++++++++++++++++++++
 data/url/plain-endpoints.html | 96 +++++++++++++++++++++++++++++++++++
 data/url/request-params.html  | 85 +++++++++++++++++++++++++++++++
 data/url/resource-param.html  | 83 ++++++++++++++++++++++++++++++
 data/url/url.js               | 88 --------------------------------
 data/url/url.url.md           | 53 +++++++++++++++++++
 7 files changed, 475 insertions(+), 88 deletions(-)
 create mode 100644 data/url/beforeSend-all.html
 create mode 100644 data/url/custom-request.html
 create mode 100644 data/url/plain-endpoints.html
 create mode 100644 data/url/request-params.html
 create mode 100644 data/url/resource-param.html
 create mode 100644 data/url/url.url.md

diff --git a/data/url/beforeSend-all.html b/data/url/beforeSend-all.html
new file mode 100644
index 00000000..057c9f79
--- /dev/null
+++ b/data/url/beforeSend-all.html
@@ -0,0 +1,69 @@
+<person-list></person-list>
+
+<script type="module">
+import {
+  fixture,
+  restModel,
+  ObservableObject,
+  StacheElement,
+} from "can/ecosystem";
+
+setupFixtures();
+
+class Person extends ObservableObject {
+  static props = {
+    firstName: String,
+    lastName: String,
+    age: Number,
+  };
+}
+
+const personConnection = restModel({
+  Map: Person,
+  url: {
+    resource: '/api/person',
+    beforeSend(xhr) {
+      xhr.setRequestHeader('Authorization', 'Bearer: some-authorization-token');
+    }
+  }
+});
+
+class PersonList extends StacheElement {
+  static view =`
+    <button on:click="this.getList()">Make request for person list</button>
+    <ul>
+      {{#for(person of this.people)}}
+        <li>{{person.firstName}} {{person.lastName}} - {{person.age}}</li>
+      {{else}}
+        <li>No people loaded.</li>
+      {{/for}}
+    </ul>
+  `;
+
+  static props = {
+    people: {
+      get default() { return []; }
+    }
+  };
+
+  getList() {
+    personConnection.getList().then((list) => {;
+      this.people = list;
+    });
+  }
+}
+customElements.define("person-list", PersonList);
+
+function setupFixtures() {
+  fixture("GET /api/person", function (request, response) {
+    if (request.headers.Authorization) { // validate auth header
+      response([
+        {firstName: 'Keanu', lastName: 'Reeves', age: 55},
+        {firstName: 'Tom', lastName: 'Cruise', age: 57},
+      ]);
+    } else {
+      response(401, {message: "Unauthorized"}, {}, "unauthorized");
+    }
+  });
+}
+</script>
diff --git a/data/url/custom-request.html b/data/url/custom-request.html
new file mode 100644
index 00000000..a05c52f1
--- /dev/null
+++ b/data/url/custom-request.html
@@ -0,0 +1,89 @@
+<todo-list></todo-list>
+
+<script type="module">
+  import {
+    ajax,
+    fixture,
+    restModel,
+    ObservableObject,
+    StacheElement,
+  } from "can/ecosystem";
+
+  setupFixtures();
+
+  class Todo extends ObservableObject {
+    static props = {
+      id: Number,
+      content: String,
+      complete: Boolean,
+    };
+  }
+
+  const todoConnection = restModel({
+    Map: Todo,
+    url: {
+      resource: "/services/todo",
+      getListData: "GET /services/todos",
+      getData: function(param){
+        return ajax({
+          url: '/services/todo',
+          data: { identifier: param.id }
+        });
+      }
+    }
+  });
+
+  class TodoList extends StacheElement {
+    static view =`
+      <button on:click="this.getList()">Make request for Todo list</button>
+      <ul>
+        {{#for(todo of this.todos)}}
+          <li on:click="this.getTodo(todo.id)">{{todo.id}}</li>
+        {{else}}
+          <li>No todos loaded.</li>
+        {{/for}}
+      </ul>
+
+      {{#if this.activeTodo}}
+        <h3>Active Todo:</h3>
+        <p>{{this.activeTodo.content}} - <input type="checkbox" disabled checked:from="{{this.activeTodo.complete}}"></p>
+      {{/if}}
+    `;
+
+    static props = {
+      todos: {
+        get default() { return []; }
+      },
+      activeTodo: Todo
+    };
+
+    getList() {
+      todoConnection.getList().then((list) => {
+        this.todos = list;
+      });
+    }
+
+    getTodo(id) {
+      todoConnection.get({id}).then((todo) => {
+        this.activeTodo = todo;
+      })
+    }
+  }
+  customElements.define("todo-list", TodoList);
+
+  function setupFixtures() {
+    const todos = [
+      {id: 1, content: 'Do the dishes', complete: true},
+      {id: 2, content: 'Walk the dog', complete: false},
+      {id: 3, content: 'Sweep the floor', complete: false},
+    ];
+
+    fixture("GET /services/todos", function (request, response) {
+      response(todos);
+    });
+
+    fixture("GET /services/todo", function (request, response) {
+      response(todos[request.data.identifier - 1]);
+    })
+  }
+</script>
diff --git a/data/url/plain-endpoints.html b/data/url/plain-endpoints.html
new file mode 100644
index 00000000..e96bf0c5
--- /dev/null
+++ b/data/url/plain-endpoints.html
@@ -0,0 +1,96 @@
+<request-demo></request-demo>
+
+<script type="module">
+import {
+  fixture,
+  restModel,
+  ObservableObject,
+  StacheElement,
+} from "can/ecosystem";
+
+setupFixtures();
+
+class Todo extends ObservableObject {
+  static props = {
+    id: Number,
+    content: String,
+    complete: Boolean,
+  };
+}
+
+const todoConnection = restModel({
+  Map: Todo,
+  url: {
+    getListData: "GET /services/todos",
+    getData: "GET /services/todo/{id}",
+    createData: "POST /services/todo",
+    updateData: "PUT /services/todo/{id}",
+    destroyData: "DELETE /services/todo/{id}"
+  }
+});
+
+class RequestDemo extends StacheElement {
+  static view =`
+    <button on:click="this.getList()">Todo list request</button>
+    <button on:click="this.get()">Single todo request</button>
+    <button on:click="this.create()">Todo creation request</button>
+    <button on:click="this.update()">Todo update request</button>
+    <button on:click="this.delete()">Todo deletion request</button>
+  `;
+
+  getList() {
+    todoConnection.getList();
+  }
+
+  get() {
+    todoConnection.get({id: 5});
+  }
+
+  create() {
+    new Todo({
+      content: 'New todo',
+      complete: false,
+    }).save();
+  }
+
+  update() {
+    new Todo({
+      id: 1,
+      content: 'Old todo',
+      complete: true,
+    }).save(); // makes an update request since this instance already has an id
+  }
+
+  delete() {
+    new Todo({
+      id: 1,
+      content: 'Old todo',
+      complete: true,
+    }).destroy();
+  }
+}
+customElements.define("request-demo", RequestDemo);
+
+function setupFixtures() {
+  fixture("GET /services/todos", function (request, response) {
+    console.log('Todo list request');
+    response([]);
+  });
+  fixture("GET /services/todo/{id}", function (request, response) {
+    console.log(`Todo id ${request.data.id} request`);
+    response({});
+  });
+  fixture("POST /services/todo", function (request, response) {
+    console.log(`Todo created`);
+    response({});
+  });
+  fixture("PUT /services/todo/{id}", function (request, response) {
+    console.log(`Todo id ${request.data.id} updated`);
+    response({});
+  });
+  fixture("DELETE /services/todo/{id}", function (request, response) {
+    console.log(`Todo id ${request.data.id} deleted`);
+    response({});
+  });
+}
+</script>
diff --git a/data/url/request-params.html b/data/url/request-params.html
new file mode 100644
index 00000000..1a363880
--- /dev/null
+++ b/data/url/request-params.html
@@ -0,0 +1,85 @@
+<todo-list></todo-list>
+
+<script type="module">
+  import {
+    ajax,
+    fixture,
+    restModel,
+    ObservableObject,
+    StacheElement,
+  } from "can/ecosystem";
+
+  setupFixtures();
+
+  class Todo extends ObservableObject {
+    static props = {
+      id: Number,
+      content: String,
+      complete: Boolean,
+    };
+  }
+
+  function processContext() {
+    // react to the response of the '/services/context' request before sending getListData request
+  }
+
+  const todoConnection = restModel({
+    Map: Todo,
+    url: {
+      resource: "/services/todos",
+      getListData: {
+        url: "/services/todos",
+        type: "GET",
+        beforeSend: () => {
+          return ajax({url: '/services/context'}).then(processContext);
+        }
+      }
+    }
+  });
+
+  class TodoList extends StacheElement {
+    static view =`
+      <button on:click="this.getList()">Make request for Todo list</button>
+      <ul>
+        {{#for(todo of this.todos)}}
+          <li>
+            <input type="checkbox" disabled checked:from="{{todo.complete}}">
+            {{todo.id}} - {{todo.content}}
+          </li>
+        {{else}}
+          <li>No todos loaded.</li>
+        {{/for}}
+      </ul>
+    `;
+
+    static props = {
+      todos: {
+        get default() { return []; }
+      },
+    };
+
+    getList() {
+      todoConnection.getList().then((list) => {
+        this.todos = list;
+      });
+    }
+  }
+  customElements.define("todo-list", TodoList);
+
+  function setupFixtures() {
+    const todos = [
+      {id: 1, content: 'Do the dishes', complete: true},
+      {id: 2, content: 'Walk the dog', complete: false},
+      {id: 3, content: 'Sweep the floor', complete: false},
+    ];
+
+    fixture("GET /services/todos", function (request, response) {
+      response(todos);
+    });
+
+    // arbitrary preliminary request
+    fixture("GET /services/context", function (request, response) {
+      response({});
+    });
+  }
+</script>
diff --git a/data/url/resource-param.html b/data/url/resource-param.html
new file mode 100644
index 00000000..9fbe75e9
--- /dev/null
+++ b/data/url/resource-param.html
@@ -0,0 +1,83 @@
+<todo-list></todo-list>
+
+<script type="module">
+  import {
+    ajax,
+    fixture,
+    restModel,
+    ObservableObject,
+    StacheElement,
+  } from "can/ecosystem";
+
+  setupFixtures();
+
+  class Todo extends ObservableObject {
+    static props = {
+      id: Number,
+      content: String,
+      complete: Boolean,
+    };
+  }
+
+  const todoConnection = restModel({
+    Map: Todo,
+    url: {
+      resource: "/services/todo",
+      getListData: "GET /services/todos",
+    }
+  });
+
+  class TodoList extends StacheElement {
+    static view =`
+      <button on:click="this.getList()">Make request for Todo list</button>
+      <ul>
+        {{#for(todo of this.todos)}}
+          <li on:click="this.getTodo(todo.id)">{{todo.id}}</li>
+        {{else}}
+          <li>No todos loaded.</li>
+        {{/for}}
+      </ul>
+
+      {{#if this.activeTodo}}
+        <h3>Active Todo:</h3>
+        <p>{{this.activeTodo.content}} - <input type="checkbox" disabled checked:from="{{this.activeTodo.complete}}"></p>
+      {{/if}}
+    `;
+
+    static props = {
+      todos: {
+        get default() { return []; }
+      },
+      activeTodo: Todo
+    };
+
+    getList() {
+      todoConnection.getList().then((list) => {
+        this.todos = list;
+      });
+    }
+
+    getTodo(id) {
+      todoConnection.get({id}).then((todo) => {
+        this.activeTodo = todo;
+      })
+    }
+  }
+  customElements.define("todo-list", TodoList);
+
+  function setupFixtures() {
+    const todos = [
+      {id: 1, content: 'Do the dishes', complete: true},
+      {id: 2, content: 'Walk the dog', complete: false},
+      {id: 3, content: 'Sweep the floor', complete: false},
+    ];
+
+    fixture("GET /services/todos", function (request, response) {
+      response(todos);
+    });
+
+    fixture("GET /services/todo/{id}", function (request, response) {
+      response(todos[parseInt(request.data.id) - 1]);
+    })
+  }
+</script>
diff --git a/data/url/url.js b/data/url/url.js
index d4f00ff1..10fa2bd1 100644
--- a/data/url/url.js
+++ b/data/url/url.js
@@ -159,94 +159,6 @@ var urlBehavior = behavior("data/url", function(baseConnection) {
 
 	return behavior;
 });
-/**
- * @property {String|Object} can-connect/data/url/url.url url
- * @parent can-connect/data/url/url.option
- *
- * Specify the url and methods that should be used for the "Data Methods".
- *
- * @option {String} If a string is provided, it's assumed to be a RESTful interface. For example,
- * if the following is provided:
- *
- * ```
- * url: "/services/todos"
- * ```
- *
- * ... the following methods and requests are used:
- *
- *  - `getListData` - `GET /services/todos`
- *  - `getData` - `GET /services/todos/{id}`
- *  - `createData` - `POST /services/todos`
- *  - `updateData` - `PUT /services/todos/{id}`
- *  - `destroyData` - `DELETE /services/todos/{id}`
- *
- * @option {Object} If an object is provided, it can customize each method and URL directly
- * like:
- *
- * ```js
- * url: {
- *   getListData: "GET /services/todos",
- *   getData: "GET /services/todo/{id}",
- *   createData: "POST /services/todo",
- *   updateData: "PUT /services/todo/{id}",
- *   destroyData: "DELETE /services/todo/{id}"
- * }
- * ```
- *
- * You can provide a `resource` property that works like providing `url` as a string, but overwrite
- * other values like:
- *
- * ```js
- * url: {
- *   resource: "/services/todo",
- *   getListData: "GET /services/todos"
- * }
- * ```
- *
- * You can also customize per-method the parameters passed to the [can-connect/data/url/url.ajax ajax implementation], like:
- * ```js
- * url: {
- *   resource: "/services/todos",
- *   getListData: {
- *     url: "/services/todos",
- *     type: "GET",
- *     beforeSend: () => {
- *       return fetch('/services/context').then(processContext);
- *     }
- *   }
- * }
- * ```
- * This can be particularly useful for passing a handler for the [can-ajax <code>beforeSend</code>] hook.
- *
- * <a id="beforeSend"></a>
- * The [can-ajax <code>beforeSend</code>] hook can also be passed for all request methods. This can be useful when
- * attaching a session token header to a request:
- * 
- * ```js
- * url: {
- *   resource: "/services/todos",
- *   beforeSend: (xhr) => {
- *     xhr.setRequestHeader('Authorization', `Bearer: ${Session.current.token}`);
- *   }
- * }
- * ```
- *
- * Finally, you can provide your own method to totally control how the request is made:
- *
- * ```js
- * url: {
- *   resource: "/services/todo",
- *   getListData: "GET /services/todos",
- *   getData: function(param){
- *     return new Promise(function(resolve, reject){
- *       $.get("/services/todo", {identifier: param.id}).then(resolve, reject);
- *     });
- *   }
- * }
- * ```
- */
-
-
  /**
   * @property {function} can-connect/data/url/url.ajax ajax
   * @parent can-connect/data/url/url.option
diff --git a/data/url/url.url.md b/data/url/url.url.md
new file mode 100644
index 00000000..1c5b4009
--- /dev/null
+++ b/data/url/url.url.md
@@ -0,0 +1,53 @@
+@property {String|Object} can-connect/data/url/url.url url
+@parent can-connect/data/url/url.option
+
+Specify the url and methods that should be used for the "Data Methods".
+
+@option {String} If a string is provided, it's assumed to be a RESTful interface. For example,
+if the following is provided:
+
+```
+url: "/services/todos"
+```
+
+... the following methods and requests are used:
+
+ - `getListData` - `GET /services/todos`
+ - `getData` - `GET /services/todos/{id}`
+ - `createData` - `POST /services/todos`
+ - `updateData` - `PUT /services/todos/{id}`
+ - `destroyData` - `DELETE /services/todos/{id}`
+
+@option {Object} If an object is provided, it can customize each method and URL directly
+like:
+
+ @sourceref ./plain-endpoints.html
+ @highlight 23-29,only
+ @codepen
+
+You can provide a `resource` property that works like providing `url` as a string, but overwrite
+other values like:
+
+ @sourceref ./resource-param.html
+ @highlight 25,only
+ @codepen
+
+You can also customize per-method the parameters passed to the [can-connect/data/url/url.ajax ajax implementation], like:
+ @sourceref ./request-params.html
+ @highlight 30-36,only
+ @codepen
+This can be particularly useful for passing a handler for the [can-ajax <code>beforeSend</code>] hook.
+
+<a id="beforeSend"></a>
+The [can-ajax <code>beforeSend</code>] hook can also be passed for all request methods. This can be useful when
+attaching a session token header to a request:
+
+ @sourceref ./beforeSend-all.html
+ @highlight 25-27,only
+ @codepen
+
+Finally, you can provide your own method to totally control how the request is made:
+
+ @sourceref ./custom-request.html
+ @highlight 27-32,only
+ @codepen
\ No newline at end of file