Remove lock option

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.41.0
+
+- Remove `lock` option.
+
 ## 3.40.5
 
 - Micro refactoring.

gh-pages/docs/apis/pjax/config/index.md

@@ -38,23 +38,6 @@ Set target forms.
 
 Set target links that replace the current URL.
 
-## lock: () => string = ...
-
-Give CSS to lock and protect the scroll position from unexpected scrolls caused by a browser bug.
-
-```ts
-  // Default
-  public readonly lock = () => `
-    :root {
-      position: fixed;
-      top: ${-window.scrollY}px;
-      left: ${-window.scrollX}px;
-      right: 0;
-      ${window.innerWidth - document.body.clientWidth ? 'overflow-y: scroll;' : ''}
-      ${window.innerHeight - document.body.clientHeight ? 'overflow-x: scroll;' : ''}
-    }`;
-```
-
 ## cache: Dict<string, unknown> = `new Cache(100)`
 
 Set a dictionary object having has/get/set/delete methods of Map to cache the requests.

index.d.ts

@@ -19,7 +19,6 @@ export interface Config {
   readonly filter?: (el: HTMLAnchorElement | HTMLAreaElement) => boolean;
   readonly form?: string;
   readonly replace?: string;
-  readonly lock?: () => string;
   readonly cache?: Dict<string, unknown>;
   readonly memory?: Dict<string, Document>;
   readonly fetch?: {

src/layer/domain/data/config.ts

@@ -26,15 +26,6 @@ export class Config implements Option {
   }
   public readonly form = 'form:not([method])';
   public readonly replace = '';
-  public readonly lock = () => `
-    :root {
-      position: fixed;
-      top: ${-window.scrollY}px;
-      left: ${-window.scrollX}px;
-      right: 0;
-      ${window.innerWidth - document.body.clientWidth ? 'overflow-y: scroll;' : ''}
-      ${window.innerHeight - document.body.clientHeight ? 'overflow-x: scroll;' : ''}
-    }`;
   public readonly cache: Dict<URL.Path<StandardURL>, { etag: string; expiry: number; xhr: XMLHttpRequest; }> = new Cache(100, { sweep: { threshold: 0 } });
   public readonly memory?: Dict<URL.Path<StandardURL>, Document>;
   public readonly fetch = {

src/layer/domain/router/module/fetch.ts

@@ -20,7 +20,6 @@ export async function fetch(
     },
   }: RouterEvent,
   {
-    lock,
     cache,
     fetch: {
       rewrite,
@@ -37,8 +36,6 @@ export async function fetch(
 ): Promise<Either<Error, readonly [Response, 'seq:fetch']>> {
   const { scrollX, scrollY } = window;
   if (type === RouterEventType.Popstate) {
-    // 小さな画面でもチラつかない
-    style.textContent = lock();
     io.document.documentElement.appendChild(style);
   }
   const [seq, res] = await Promise.all([

src/layer/interface/service/router.ts

@@ -9,10 +9,6 @@ import { Supervisor } from 'spica/supervisor';
 import { Cancellation } from 'spica/cancellation';
 import { Just } from 'spica/maybe';
 import { never } from 'spica/promise';
-import { bind } from 'typed-dom/listener';
-
-bind(window, 'pjax:unload', () =>
-  window.history.scrollRestoration = 'auto', true);
 
 export { Config, RouterEvent, RouterEventSource }
 
@@ -32,9 +28,6 @@ export function route(
       break;
     case RouterEventType.Popstate:
       io.document.title = loadTitle();
-      // 小さな画面ではチラつく
-      //const { scrollX, scrollY } = window;
-      //requestAnimationFrame(() => void window.scrollTo(scrollX, scrollY));
       break;
   }
   return Just(0)
@@ -53,7 +46,6 @@ export function route(
       page.isAvailable() && config.memory?.set(event.location.orig.path, io.document.cloneNode(true));
       page.process(event.location.dest);
       const [scripts] = await env;
-      window.history.scrollRestoration = 'manual';
       //progressbar(config.progressbar);
       return router(config, event, { process: cancellation, scripts }, io)
         .then(m => m
@@ -71,7 +63,6 @@ export function route(
         .catch(reason => {
           kill();
           page.complete();
-          window.history.scrollRestoration = 'auto';
           if (cancellation.isAlive() || reason instanceof FatalError) {
             config.fallback(event.source, reason);
           }

src/layer/interface/service/state/scroll-restoration.ts

@@ -1,4 +1,16 @@
+import { isTransitable } from '../../../data/store/state';
 import { bind } from 'typed-dom/listener';
 
+// popstateイベントは事前に検知できないため事前設定
+if (isTransitable(window.history.state)) {
+  window.history.scrollRestoration = 'manual';
+}
+// 遷移前ページの設定
+bind(window, 'pjax:fetch', () =>
+  window.history.scrollRestoration = 'manual', true);
+// 遷移後ページの設定
+bind(document, 'pjax:ready', () =>
+  window.history.scrollRestoration = 'manual', true);
+// 通常ページへの遷移または離脱では戻しておく
 bind(window, 'unload', () =>
-  window.history.scrollRestoration = 'auto', false);
+  window.history.scrollRestoration = 'auto', true);

test/integration/index.test.ts

@@ -8,13 +8,6 @@ describe('Integration: Package', function () {
     Pjax['resources'].clear();
   });
 
-  describe('state', function () {
-    it('scrollRestoration', function () {
-      assert(window.history.scrollRestoration === 'auto' || window.history.scrollRestoration === undefined);
-    });
-
-  });
-
   describe('event', function () {
     it('sequence', function (done) {
       const path = '/base/test/integration/fixture/basic/1.html';
@@ -31,26 +24,26 @@ describe('Integration: Package', function () {
       });
       once(window, 'pjax:unload', ev => {
         assert(ev instanceof Event);
-        assert(window.history.scrollRestoration === 'auto');
+        assert(window.history.scrollRestoration === 'manual');
         assert(window.location.pathname !== path);
         assert(cnt === 1 && ++cnt);
       });
       once(document, 'pjax:content', ev => {
         assert(ev instanceof Event);
-        assert(window.history.scrollRestoration === 'auto');
+        assert(window.history.scrollRestoration === 'manual');
         assert(window.location.pathname === path);
         assert(document.title === 'Title 1');
         assert(document.querySelector('header')!.innerHTML === 'Header 1');
         assert(cnt === 2 && ++cnt);
       });
       once(document, 'pjax:ready', ev => {
         assert(ev instanceof Event);
-        assert(window.history.scrollRestoration === 'auto');
+        assert(window.history.scrollRestoration === 'manual');
         assert(cnt === 3 && ++cnt);
       });
       once(window, 'pjax:load', ev => {
         assert(ev instanceof Event);
-        assert(window.history.scrollRestoration === 'auto');
+        assert(window.history.scrollRestoration === 'manual');
         assert(cnt === 4 && ++cnt);
         done();
       });
@@ -89,7 +82,7 @@ describe('Integration: Package', function () {
           assert(cnt === 4 && ++cnt);
           assert(r === 2);
           assert.deepStrictEqual(areas, [document.body]);
-          assert(window.history.scrollRestoration === 'auto');
+          assert(window.history.scrollRestoration === 'manual');
           assert(window.location.pathname === path);
           assert(document.title === 'Title 2');
           assert(document.querySelector('header')!.innerHTML === 'Header 2');
@@ -98,14 +91,14 @@ describe('Integration: Package', function () {
         async ready(r) {
           assert(cnt === 6 && ++cnt);
           assert(r === 3);
-          assert(window.history.scrollRestoration === 'auto');
+          assert(window.history.scrollRestoration === 'manual');
           return 4;
         },
         async load(r, events) {
           assert(cnt === 8 && ++cnt);
           assert(r === 4);
           assert.deepStrictEqual(events, []);
-          assert(window.history.scrollRestoration === 'auto');
+          assert(window.history.scrollRestoration === 'manual');
           done();
         }
       };

test/integration/usecase/assign.test.ts

@@ -28,7 +28,7 @@ describe('Integration: Usecase', function () {
       new Pjax({
         fallback(target) {
           assert(target instanceof HTMLAnchorElement);
-          assert(window.history.scrollRestoration === 'auto');
+          assert(window.history.scrollRestoration === 'manual');
           done();
         }
       }, { document, router })

test/integration/usecase/click.test.ts

@@ -96,7 +96,7 @@ describe('Integration: Usecase', function () {
       new Pjax({
         fallback(target) {
           assert(target === a);
-          assert(window.history.scrollRestoration === 'auto');
+          assert(window.history.scrollRestoration === 'manual');
           done();
         }
       }, { document, router });

test/integration/usecase/replace.test.ts

@@ -28,7 +28,7 @@ describe('Integration: Usecase', function () {
       new Pjax({
         fallback(target) {
           assert(target instanceof HTMLAnchorElement);
-          assert(window.history.scrollRestoration === 'auto');
+          assert(window.history.scrollRestoration === 'manual');
           done();
         }
       }, { document, router })

test/integration/usecase/submit.test.ts

@@ -30,7 +30,7 @@ describe('Integration: Usecase', function () {
         fallback(target) {
           form.remove();
           assert(target === form);
-          assert(window.history.scrollRestoration === 'auto');
+          assert(window.history.scrollRestoration === 'manual');
           done();
         }
       }, { document, router });