Merge pull request lichess-org#16000 from schlawg/ui-site-cleansing

relocate storage, trans, socket from site

Author: ornicar

ui/@types/lichess/index.d.ts

@@ -10,17 +10,8 @@ interface Site {
     message: string;
     date: string;
   };
-  StrongSocket: {
-    // file://./../../site/src/socket.ts
-    new (url: string, version: number | false, cfg?: any): any;
-    firstConnect: Promise<(tpe: string, data: any) => void>;
-    defaultParams: Record<string, any>;
-  };
   mousetrap: LichessMousetrap; // file://./../../site/src/mousetrap.ts
   sri: string;
-  storage: LichessStorageHelper;
-  tempStorage: LichessStorageHelper;
-  once(key: string, mod?: 'always'): boolean;
   powertip: LichessPowertip; // file://./../../site/src/powertip.ts
   clockWidget(el: HTMLElement, opts: { time: number; pause?: boolean }): void;
   spinnerHtml: string;
@@ -42,10 +33,10 @@ interface Site {
   pubsub: Pubsub; // file://./../../site/src/pubsub.ts
   unload: { expected: boolean };
   redirect(o: RedirectTo, beep?: boolean): void;
-  reload(): void;
+  reload(err?: any): void;
   watchers(el: HTMLElement): void;
   announce(d: LichessAnnouncement): void;
-  trans(i18n: I18nDict): Trans;
+  trans: Trans;
   sound: SoundI; // file://./../../site/src/sound.ts
   miniBoard: {
     // file://./../../common/src/miniBoard.ts
@@ -200,7 +191,7 @@ declare type SocketSend = (type: string, data?: any, opts?: any, noRetry?: boole
 type TransNoArg = (key: string) => string;
 
 interface Trans {
-  // file://./../../site/src/trans.ts
+  // file://./../../common/src/trans.ts
   (key: string, ...args: Array<string | number>): string;
   noarg: TransNoArg;
   plural(key: string, count: number, ...args: Array<string | number>): string;
@@ -218,36 +209,6 @@ interface Pubsub {
   emit(msg: string, ...args: any[]): void;
 }
 
-interface LichessStorageHelper {
-  make(k: string, ttl?: number): LichessStorage;
-  boolean(k: string): LichessBooleanStorage;
-  get(k: string): string | null;
-  set(k: string, v: string): void;
-  fire(k: string, v?: string): void;
-  remove(k: string): void;
-}
-
-interface LichessStorage {
-  get(): string | null;
-  set(v: any): void;
-  remove(): void;
-  listen(f: (e: LichessStorageEvent) => void): void;
-  fire(v?: string): void;
-}
-
-interface LichessBooleanStorage {
-  get(): boolean;
-  getOrDefault(defaultValue: boolean): boolean;
-  set(v: boolean): void;
-  toggle(): void;
-}
-
-interface LichessStorageEvent {
-  sri: string;
-  nonce: number;
-  value?: string;
-}
-
 interface LichessAnnouncement {
   msg?: string;
   date?: string;

ui/analyse/src/analyse.ts

@@ -1,6 +1,7 @@
 import { patch } from './view/util';
 import makeBoot from './boot';
 import makeStart from './start';
+import StrongSocket from 'common/socket';
 
 export { patch };
 
@@ -15,7 +16,7 @@ export function initModule({ mode, cfg }: { mode: 'userAnalysis' | 'replay'; cfg
 
 function userAnalysis(cfg: any) {
   cfg.$side = $('.analyse__side').clone();
-  site.socket = new site.StrongSocket(cfg.socketUrl || '/analysis/socket/v5', cfg.socketVersion, {
+  site.socket = new StrongSocket(cfg.socketUrl || '/analysis/socket/v5', cfg.socketVersion, {
     receive: (t: string, d: any) => analyse.socketReceive(t, d),
   });
   cfg.socketSend = site.socket.send;

ui/analyse/src/boot.ts

@@ -1,9 +1,10 @@
 import { AnalyseApi, AnalyseOpts } from './interfaces';
+import StrongSocket from 'common/socket';
 
 export default function (start: (opts: AnalyseOpts) => AnalyseApi) {
   return function (cfg: AnalyseOpts) {
     const socketUrl = `/watch/${cfg.data.game.id}/${cfg.data.player.color}/v6`;
-    site.socket = new site.StrongSocket(socketUrl, cfg.data.player.version, {
+    site.socket = new StrongSocket(socketUrl, cfg.data.player.version, {
       params: {
         userTv: cfg.data.userTv && cfg.data.userTv.id,
       },

ui/analyse/src/ctrl.ts

@@ -8,7 +8,7 @@ import debounce from 'common/debounce';
 import GamebookPlayCtrl from './study/gamebook/gamebookPlayCtrl';
 import StudyCtrl from './study/studyCtrl';
 import { isTouchDevice } from 'common/device';
-import throttle from 'common/throttle';
+import { throttle } from 'common/timing';
 import {
   AnalyseOpts,
   AnalyseData,

ui/analyse/src/evalCache.ts

@@ -1,5 +1,5 @@
 import { defined, prop } from 'common';
-import throttle from 'common/throttle';
+import { throttle } from 'common/timing';
 import { EvalHit, EvalGetData, EvalPutData } from './interfaces';
 import { AnalyseSocketSend } from './socket';
 import { FEN } from 'chessground/types';

ui/analyse/src/ground.ts

@@ -3,6 +3,7 @@ import { Api as CgApi } from 'chessground/api';
 import { Config as CgConfig } from 'chessground/config';
 import * as cg from 'chessground/types';
 import resizeHandle from 'common/resize';
+import { storage } from 'common/storage';
 import AnalyseCtrl from './ctrl';
 import * as Prefs from 'common/prefs';
 
@@ -67,7 +68,7 @@ export function makeConfig(ctrl: AnalyseCtrl): CgConfig {
     drawable: {
       enabled: true,
       eraseOnClick: !ctrl.opts.study || !!ctrl.opts.practice,
-      defaultSnapToValidMove: site.storage.boolean('arrow.snap').getOrDefault(true),
+      defaultSnapToValidMove: storage.boolean('arrow.snap').getOrDefault(true),
     },
     highlight: {
       lastMove: pref.highlight,

ui/analyse/src/plugins/analyse.nvui.ts

@@ -32,7 +32,7 @@ import { renderSetting } from 'nvui/setting';
 import { Notify } from 'nvui/notify';
 import { commands } from 'nvui/command';
 import { bind, MaybeVNodes } from 'common/snabbdom';
-import throttle from 'common/throttle';
+import { throttle } from 'common/timing';
 import { Role } from 'chessground/types';
 import explorerView from '../explorer/explorerView';
 import { ops, path as treePath } from 'tree';

ui/analyse/src/plugins/analyse.study.ts

@@ -2,14 +2,15 @@ import { patch } from '../view/util';
 import makeBoot from '../boot';
 import makeStart from '../start';
 import * as studyDeps from '../study/studyDeps';
+import StrongSocket from 'common/socket';
 
 export { patch };
 
 export const start = makeStart(patch, studyDeps);
 export const boot = makeBoot(start);
 
 export function initModule(cfg: any) {
-  site.socket = new site.StrongSocket(cfg.socketUrl || '/analysis/socket/v5', cfg.socketVersion, {
+  site.socket = new StrongSocket(cfg.socketUrl || '/analysis/socket/v5', cfg.socketVersion, {
     receive: (t: string, d: any) => analyse.socketReceive(t, d),
     ...(cfg.embed ? { params: { flag: 'embed' } } : {}),
   });

ui/analyse/src/serverSideUnderboard.ts

@@ -8,6 +8,7 @@ import { stockfishName } from 'common/spinner';
 import { domDialog } from 'common/dialog';
 import { FEN } from 'chessground/types';
 import { escapeHtml } from 'common';
+import { storage } from 'common/storage';
 
 export default function (element: HTMLElement, ctrl: AnalyseCtrl) {
   $(element).replaceWith(ctrl.opts.$underboard);
@@ -84,7 +85,7 @@ export default function (element: HTMLElement, ctrl: AnalyseCtrl) {
     });
   }
 
-  const storage = site.storage.make('analysis.panel');
+  const store = storage.make('analysis.panel');
   const setPanel = function (panel: string) {
     $menu.children('.active').removeClass('active');
     $menu.find(`[data-panel="${panel}"]`).addClass('active');
@@ -102,10 +103,10 @@ export default function (element: HTMLElement, ctrl: AnalyseCtrl) {
   };
   $menu.on('mousedown', 'span', function (this: HTMLElement) {
     const panel = this.dataset.panel!;
-    storage.set(panel);
+    store.set(panel);
     setPanel(panel);
   });
-  const stored = storage.get();
+  const stored = store.get();
   const foundStored =
     stored &&
     $menu.children(`[data-panel="${stored}"]`).filter(function (this: HTMLElement) {

ui/analyse/src/start.ts

@@ -4,14 +4,15 @@ import makeView from './view/main';
 import { AnalyseApi, AnalyseOpts } from './interfaces';
 import { VNode } from 'snabbdom';
 import type * as studyDeps from './study/studyDeps';
+import { trans } from 'common/trans';
 
 export default function (
   patch: (oldVnode: VNode | Element | DocumentFragment, vnode: VNode) => VNode,
   deps?: typeof studyDeps,
 ) {
   return function (opts: AnalyseOpts): AnalyseApi {
     opts.element = document.querySelector('main.analyse') as HTMLElement;
-    opts.trans = site.trans(opts.i18n);
+    opts.trans = trans(opts.i18n);
 
     const ctrl = (site.analysis = new makeCtrl(opts, redraw, deps?.StudyCtrl));
     const view = makeView(deps);

ui/analyse/src/study/commentForm.ts

@@ -1,9 +1,10 @@
 import { prop } from 'common';
 import { onInsert } from 'common/snabbdom';
-import throttle from 'common/throttle';
+import { throttle } from 'common/timing';
 import { h, VNode } from 'snabbdom';
 import AnalyseCtrl from '../ctrl';
 import { currentComments, isAuthorObj } from './studyComments';
+import { storage } from 'common/storage';
 
 interface Current {
   chapterId: string;
@@ -80,7 +81,7 @@ export function view(root: AnalyseCtrl): VNode {
               setupTextarea(vnode);
               const el = vnode.elm as HTMLInputElement;
               el.oninput = () => setTimeout(() => ctrl.submit(el.value), 50);
-              const heightStore = site.storage.make('study.comment.height');
+              const heightStore = storage.make('study.comment.height');
               el.onmouseup = () => heightStore.set('' + el.offsetHeight);
               el.style.height = parseInt(heightStore.get() || '80') + 'px';
 

ui/analyse/src/study/gamebook/gamebookEdit.ts

@@ -2,7 +2,7 @@ import * as control from '../../control';
 import AnalyseCtrl from '../../ctrl';
 import { requestIdleCallback } from 'common';
 import * as licon from 'common/licon';
-import throttle from 'common/throttle';
+import { throttle } from 'common/timing';
 import { iconTag, bind, MaybeVNodes } from 'common/snabbdom';
 import { h, Hooks, VNode } from 'snabbdom';
 

ui/analyse/src/study/multiBoard.ts

@@ -12,12 +12,13 @@ import { StudyChapters, gameLinkAttrs, gameLinksListener } from './studyChapters
 import { playerFed } from './playerBars';
 import { userTitle } from 'common/userLink';
 import { h } from 'snabbdom';
+import { storage } from 'common/storage';
 
 export class MultiBoardCtrl {
   playing: Toggle;
   teamSelect: Prop<string> = prop('');
   page: number = 1;
-  maxPerPageStorage = site.storage.make('study.multiBoard.maxPerPage');
+  maxPerPageStorage = storage.make('study.multiBoard.maxPerPage');
 
   constructor(
     readonly chapters: StudyChapters,

ui/analyse/src/study/studyCtrl.ts

@@ -1,7 +1,7 @@
 import { Config as CgConfig } from 'chessground/config';
 import { DrawShape } from 'chessground/draw';
 import { prop, defined } from 'common';
-import throttle, { throttlePromise } from 'common/throttle';
+import { throttle, throttlePromise } from 'common/timing';
 import debounce from 'common/debounce';
 import AnalyseCtrl from '../ctrl';
 import { StudyMemberCtrl } from './studyMembers';

ui/analyse/src/study/studyGlyph.ts

@@ -1,6 +1,6 @@
 import { prop } from 'common';
 import { bind } from 'common/snabbdom';
-import throttle from 'common/throttle';
+import { throttle } from 'common/timing';
 import { spinnerVdom as spinner } from 'common/spinner';
 import { h, VNode } from 'snabbdom';
 import AnalyseCtrl from '../ctrl';

ui/analyse/src/study/studyMembers.ts

@@ -10,6 +10,7 @@ import { StudyMember, StudyMemberMap, Tab } from './interfaces';
 import { textRaw as xhrTextRaw } from 'common/xhr';
 import { userLink } from 'common/userLink';
 import StudyCtrl from './studyCtrl';
+import { once } from 'common/storage';
 
 interface Opts {
   initDict: StudyMemberMap;
@@ -99,7 +100,7 @@ export class StudyMemberCtrl {
     const wasContrib = this.myMember() && this.canContribute();
     this.dict(members);
     if (wasViewer && this.canContribute()) {
-      if (site.once('study-tour')) this.opts.startTour();
+      if (once('study-tour')) this.opts.startTour();
       this.opts.onBecomingContributor();
       this.opts.notif.set({
         text: this.opts.trans.noarg('youAreNowAContributor'),

ui/analyse/src/study/studyTags.ts

@@ -1,5 +1,5 @@
 import { onInsert } from 'common/snabbdom';
-import throttle from 'common/throttle';
+import { throttle } from 'common/timing';
 import { h, thunk, VNode } from 'snabbdom';
 import { option } from '../view/util';
 import { looksLikeLichessGame } from './studyChapters';

ui/analyse/src/treeView/common.ts

@@ -1,6 +1,6 @@
 import AnalyseCtrl from '../ctrl';
 import contextMenu from './contextMenu';
-import throttle from 'common/throttle';
+import { throttle } from 'common/timing';
 import { enrichText, innerHTML } from 'common/richText';
 import { authorText as commentAuthorText } from '../study/studyComments';
 import { bindMobileTapHold } from 'common/device';

ui/analyse/src/view/components.ts

@@ -40,6 +40,7 @@ import StudyCtrl from '../study/studyCtrl';
 import RelayCtrl from '../study/relay/relayCtrl';
 import type * as studyDeps from '../study/studyDeps';
 import { renderPgnError } from '../pgnImport';
+import { storage } from 'common/storage';
 
 export interface ViewContext {
   ctrl: AnalyseCtrl;
@@ -146,7 +147,7 @@ export function renderBoard({ ctrl, study, playerBars, playerStrips }: ViewConte
     addChapterId(study, 'div.analyse__board.main-board'),
     {
       hook:
-        'ontouchstart' in window || !site.storage.boolean('scrollMoves').getOrDefault(true)
+        'ontouchstart' in window || !storage.boolean('scrollMoves').getOrDefault(true)
           ? undefined
           : bindNonPassive(
               'wheel',

ui/bits/src/bits.account.ts

@@ -1,5 +1,6 @@
 import * as licon from 'common/licon';
 import * as xhr from 'common/xhr';
+import { storage } from 'common/storage';
 import { addPasswordVisibilityToggleListener } from 'common/password';
 import flairPickerLoader from './exports/flairPicker';
 
@@ -32,22 +33,19 @@ site.load.then(() => {
       computeBitChoices($form, 'behavior.submitMove');
       localPrefs.forEach(([categ, name, storeKey]) => {
         if (this.name == `${categ}.${name}`) {
-          site.storage.boolean(storeKey).set(this.value == '1');
+          storage.boolean(storeKey).set(this.value == '1');
           showSaved();
         }
       });
       xhr.formToXhr(form).then(() => {
         showSaved();
-        site.storage.fire('reload-round-tabs');
+        storage.fire('reload-round-tabs');
       });
     });
   });
 
   localPrefs.forEach(([categ, name, storeKey, def]) =>
-    $(`#ir${categ}_${name}_${site.storage.boolean(storeKey).getOrDefault(def) ? 1 : 0}`).prop(
-      'checked',
-      true,
-    ),
+    $(`#ir${categ}_${name}_${storage.boolean(storeKey).getOrDefault(def) ? 1 : 0}`).prop('checked', true),
   );
 
   $('form[action="/account/oauth/token/create"]').each(function (this: HTMLFormElement) {

ui/bits/src/bits.challengePage.ts

@@ -1,4 +1,5 @@
 import * as xhr from 'common/xhr';
+import StrongSocket from 'common/socket';
 
 interface ChallengeOpts {
   xhrUrl: string;
@@ -10,21 +11,17 @@ export function initModule(opts: ChallengeOpts): void {
   const selector = '.challenge-page';
   let accepting: boolean;
 
-  site.socket = new site.StrongSocket(
-    `/challenge/${opts.data.challenge.id}/socket/v5`,
-    opts.data.socketVersion,
-    {
-      events: {
-        reload() {
-          xhr.text(opts.xhrUrl).then(html => {
-            $(selector).replaceWith($(html).find(selector));
-            init();
-            site.contentLoaded($(selector)[0]);
-          });
-        },
+  site.socket = new StrongSocket(`/challenge/${opts.data.challenge.id}/socket/v5`, opts.data.socketVersion, {
+    events: {
+      reload() {
+        xhr.text(opts.xhrUrl).then(html => {
+          $(selector).replaceWith($(html).find(selector));
+          init();
+          site.contentLoaded($(selector)[0]);
+        });
       },
     },
-  );
+  });
 
   function init() {
     if (!accepting)

ui/bits/src/bits.cms.ts

@@ -1,5 +1,5 @@
 import * as xhr from 'common/xhr';
-import throttle from 'common/throttle';
+import { throttle } from 'common/timing';
 import Editor from '@toast-ui/editor';
 import { currentTheme } from 'common/theme';
 import tablesort from 'tablesort';