Update web contents

falsandtru · Sep 8, 2023 · 350ebbe · 350ebbe
1 parent 5b6f735
commit 350ebbe
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 10 deletions.
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -15,6 +15,9 @@
             <li><a href="{{ site.basepath }}docs/apis/util/">Util</a></li>
           </ul>
         </li>
+        <li>
+          <a href="{{ site.basepath }}docs/modes/">Modes</a>
+        </li>
       </ul>
     </li>
   </ul>

diff --git a/assets/dist/index.js b/assets/dist/index.js
@@ -6616,7 +6616,7 @@ function xhr(method, displayURL, base, headers, body, timeout, cache, cancellati
     xhr.addEventListener("error", () => void resolve((0, either_1.Left)(new Error(`Failed to request a page by error`))));
     xhr.addEventListener("timeout", () => void resolve((0, either_1.Left)(new Error(`Failed to request a page by timeout`))));
     xhr.addEventListener("load", () => void verify(base, method, xhr, cache).fmap(xhr => {
-      const responseURL = new url_1.URL((0, url_1.standardize)(xhr.responseURL, base.href));
+      const responseURL = new url_1.URL((0, url_1.standardize)(fix(xhr.responseURL, displayURL.href), base.href));
       if (method === 'GET') {
         const cc = new Map(xhr.getResponseHeader('Cache-Control')
         // eslint-disable-next-line redos/no-vulnerable
@@ -6650,6 +6650,9 @@ function request(url, method, headers, timeout, body) {
   xhr.send(body);
   return xhr;
 }
+function fix(res, req) {
+  return !res.includes('#') && req.includes('#') ? res + req.slice(req.indexOf('#')) : res;
+}
 function verify(base, method, xhr, cache) {
   const url = new url_1.URL((0, url_1.standardize)(xhr.responseURL, base.href));
   switch (true) {
@@ -7953,6 +7956,23 @@ class FakeXMLHttpRequest extends XMLHttpRequest {
         }
       });
       xhr.send();
+    }, reason => {
+      const response = reason instanceof Response ? reason : new Response(null, xhr);
+      Object.defineProperties(this, {
+        responseURL: {
+          value: url
+        },
+        readyState: {
+          value: 4
+        },
+        status: {
+          value: response.status
+        },
+        statusText: {
+          value: response.statusText
+        }
+      });
+      xhr.dispatchEvent(new ProgressEvent('error'));
     });
     return xhr;
   }
@@ -7985,6 +8005,22 @@ class FakeXMLHttpRequest extends XMLHttpRequest {
       this.dispatchEvent(new ProgressEvent('load'));
     });
   }
+  abort() {
+    setTimeout(() => {
+      Object.defineProperties(this, {
+        readyState: {
+          value: 4
+        },
+        status: {
+          value: 400
+        },
+        statusText: {
+          value: 'Bad Request'
+        }
+      });
+      this.dispatchEvent(new ProgressEvent('abort'));
+    });
+  }
   getResponseHeader(name) {
     switch (name.toLowerCase()) {
       case 'content-type':

diff --git a/docs/index.md b/docs/index.md
@@ -9,3 +9,5 @@ class: style-api
 # Documents
 
 ## [APIs]({{ site.basepath }}docs/apis/)
+
+## [Modes]({{ site.basepath }}docs/modes/)
diff --git a/docs/modes/index.md b/docs/modes/index.md
@@ -0,0 +1,72 @@
+---
+layout: layout
+title: Modes
+type: page
+nav: nav
+class: style-api
+---
+
+# Modes
+
+## None (Offline)
+
+Send no requests.
+
+```ts
+import Pjax, { FakeXMLHttpRequest } from 'pjax-api';
+
+new Pjax({
+  fetch: {
+    rewrite: url =>
+      FakeXMLHttpRequest.create(
+        url,
+        new DOMParser().parseFromString(
+          `<title>Title</title><body>Body</body>`,
+          'text/html')),
+  },
+});
+```
+
+## HTML (Pjax)
+
+Request an HTML response.
+
+```ts
+import Pjax, { FakeXMLHttpRequest } from 'pjax-api';
+
+new Pjax({
+  fetch: {
+    rewrite: url =>
+      FakeXMLHttpRequest.create(
+        url,
+        fetch(url)
+          .then(res => res.text())
+          .then(data =>
+            new DOMParser().parseFromString(
+              data,
+              'text/html'))),
+  },
+});
+```
+
+## JSON (SPA)
+
+Request a JSON response.
+
+```ts
+import Pjax, { FakeXMLHttpRequest } from 'pjax-api';
+
+new Pjax({
+  fetch: {
+    rewrite: url =>
+      FakeXMLHttpRequest.create(
+        url,
+        fetch(url, { headers: { 'Content-Type': 'application/json' } })
+          .then(res => res.json())
+          .then(data =>
+            new DOMParser().parseFromString(
+              `<title>${data.title}</title><body>${data.body}</body>`,
+              'text/html'))),
+  },
+});
+```
diff --git a/index.md b/index.md
@@ -12,26 +12,31 @@ class: style-top
 <div class="col-md-4">
 ## Features
 
-**The pjax-api provides almost complete original web experience.**
+The pjax-api provides almost complete original web experience.
 
 - Browser history fix
 - Scroll position restoration
 - Unexpected scroll prevention
 - Scroll behaviors around hash links
-- [**SPA mode (Use JSON instead of HTML)**]({{ site.basepath }}docs/apis/util/)
+- [**SPA mode (Use JSON instead of HTML)**]({{ site.basepath }}docs/modes/#json-spa)
 - [More](https://github.com/falsandtru/pjax-api#features)
 </div>
 
 <div class="col-md-4">
-## APIs
+## Modes
 
-This site is also powered by PJAX as a demo. Try page transitions.
+**JSON(SPA) mode is statically and dynamically configurable per URL scope on browsers.**
 
-- [APIs]({{ site.basepath }}docs/apis/)
-  - [Pjax]({{ site.basepath }}docs/apis/pjax/)
-    - [Config]({{ site.basepath }}docs/apis/pjax/config/)
-  - [Events]({{ site.basepath }}docs/apis/events/)
-  - [Util]({{ site.basepath }}docs/apis/util/)
+Adding JSON APIs is the only change required on servers.
+
+- [None (Offline)]({{ site.basepath }}docs/modes/#none-offline)
+  - Send no requests.
+- [HTML (Pjax)]({{ site.basepath }}docs/modes/#html-pjax)
+  - Request an HTML response.
+- [JSON (SPA)]({{ site.basepath }}docs/modes/#json-spa)
+  - Request a JSON response.
+- Any
+  - Any response types are available in the same way as JSON.
 </div>
 
 <div class="col-md-4">
@@ -66,6 +71,19 @@ new Pjax({
 
 <div class="row">
 
+<div class="col-md-4">
+## Documents
+
+This site is also powered by PJAX as a demo. Try page transitions.
+
+- [APIs]({{ site.basepath }}docs/apis/)
+  - [Pjax]({{ site.basepath }}docs/apis/pjax/)
+    - [Config]({{ site.basepath }}docs/apis/pjax/config/)
+  - [Events]({{ site.basepath }}docs/apis/events/)
+  - [Util]({{ site.basepath }}docs/apis/util/)
+- [Modes]({{ site.basepath }}docs/modes/)
+</div>
+
 <div class="col-md-4">
 ## Browsers