Add beforeSend anchor

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>

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>

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>

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>