textbrowser 0.47.0 → 0.48.1

package/dist/sw-helper.js

@@ -0,0 +1,314 @@
+import activateCallback from './activateCallback-es.js';
+import {getWorkFiles} from './WorkInfo-es.js';
+
+// VERSION 0.1.0
+
+const CURRENT_CACHES = {
+  prefetch: 'prefetch-cache-v'
+};
+const minutes = 60 * 1000;
+
+// UTILITIES
+
+async function getJSON (url) {
+  const resp = await fetch(url);
+  return await resp.json();
+}
+
+function swHelper (self) {
+  // These could be made configurable by argument too
+  const defaultUserStaticFiles = [
+    '/', // Needs a separate entry from `index.html` (at least in Chrome)
+    'index.html',
+    'files.json',
+    'site.json',
+    'resources/user.js'
+    // We do not put the user.json here as that is obtained live with this
+    //   service worker via `pathToUserJSON`
+  ];
+  // Todo: We could supply `new URL(fileName, moduleURL).href` to
+  //   get these as reliable full paths without hard-coding or needing to
+  //   actually be in `node_modules/textbrowser`; see `resources/index.js`
+  const textbrowserStaticResourceFiles = [
+    'node_modules/textbrowser/appdata/languages.json',
+
+    /*
+      // Only needed atm for browser validation
+      'node_modules/textbrowser/general-schemas/files.jsonschema',
+      'node_modules/textbrowser/general-schemas/languages.jsonschema',
+      'node_modules/textbrowser-data-schemas/schemas/locale.jsonschema',
+      'node_modules/textbrowser-data-schemas/schemas/metadata.jsonschema',
+      'node_modules/textbrowser-data-schemas/schemas/table.jsonschema', // Not currently using for validation or meta-data
+      */
+
+    'node_modules/intl-locale-textinfo-polyfill/lib/polyfill.js',
+    'node_modules/textbrowser/dist/assets/languages-1sAACTKG.json',
+    'node_modules/textbrowser/dist/assets/index-_11XnUty.css',
+
+    'node_modules/textbrowser/dist/index-es.js'
+  ];
+
+  /**
+  * @typedef {PlainObject} ConfigObject
+  * @property {string} namespace
+  * @property {string} basePath
+  * @property {string} languages
+  * @property {string} files
+  * @property {string[]} userStaticFiles
+  */
+
+  /**
+   *
+   * @param {ConfigObject} args
+   * @returns {ConfigObject}
+   * @todo Since some of these reused, move to external file (or
+   *         use `setServiceWorkerDefaults`?)
+   */
+  function getConfigDefaults (args) {
+    return {
+      namespace: 'textbrowser',
+      basePath: '',
+      languages: new URL('../appdata/languages.json', import.meta.url).href,
+      files: 'files.json',
+      userStaticFiles: defaultUserStaticFiles,
+      // Opportunity to override
+      ...args
+    };
+  }
+
+  /**
+   *
+   * @param {string[]} messages
+  * @returns {Promise<void>}
+   */
+  function log (...messages) {
+    const message = messages.join(' ');
+    console.log(message);
+    return post({message, type: 'log'});
+  }
+
+  /**
+   *
+   * @param {Error} error
+   * @param {string[]} messages
+  * @returns {Promise<void>} Resolves to `undefined`
+   */
+  function logError (error, ...messages) {
+    const message = messages.join(' ');
+    console.error(error, message);
+    return post({message, errorType: error.type, name: error.name, type: 'error'});
+  }
+
+  /**
+   * @callback DelayCallback
+   * @param {Float} time
+   * @returns {void}
+   */
+
+  /**
+   *
+   * @param {DelayCallback} cb
+   * @param {PositiveInteger} timeout
+   * @param {string} errMessage
+   * @param {PositiveInteger} [time]
+   * @returns {Promise<void>}
+   */
+  async function tryAndRetry (cb, timeout, errMessage, time = 0) {
+    time++;
+    try {
+      await cb(time); // eslint-disable-line n/callback-return -- Needed for retries
+      return undefined;
+    } catch (err) {
+      console.log('errrr', err);
+      logError(err, err.message || errMessage);
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(tryAndRetry(cb, timeout, errMessage, time));
+        }, timeout);
+      });
+    }
+  }
+
+  /**
+   *
+   * @param {PlainObject} args
+   * @param {"log"|"error"|"beginInstall"|"finishedInstall"|"beginActivate"|"finishedActivate"} args.type
+   * @param {string} [args.message]
+   * @returns {Promise<void>}
+   */
+  async function post ({type, message = type}) {
+    const clients = await self.clients.matchAll({
+      // Are there any uncontrolled within activate anyways?
+      includeUncontrolled: true,
+      type: 'window'
+    }) || [];
+    if (message.includes('Posting finished')) {
+      message += ` (count: ${clients.length})`;
+    }
+    clients.forEach((client) => {
+      // Although we only need one client to which to send
+      //   arguments, we want to signal phase complete to all
+      // eslint-disable-next-line unicorn/require-post-message-target-origin -- In worker
+      client.postMessage({message, type});
+    });
+  }
+
+  /**
+   *
+   * @param {PositiveInteger} time
+   * @throws {Error}
+   * @returns {Promise<void>}
+   */
+  async function install (time) {
+    post({type: 'beginInstall'});
+    log(`Install: Trying, attempt ${time}`);
+    const now = Date.now();
+    const json = await getJSON(pathToUserJSON);
+
+    const {
+      namespace, languages, files, userStaticFiles
+    } = getConfigDefaults(json);
+
+    const {version} = await getJSON('./package.json');
+
+    console.log('opening cache', namespace + CURRENT_CACHES.prefetch + version);
+    const [
+      cache,
+      userDataFiles,
+      {languages: langs}
+    ] = await Promise.all([
+      caches.open(namespace + CURRENT_CACHES.prefetch + version),
+      getWorkFiles(files),
+      getJSON(languages)
+    ]);
+    log('Install: Retrieved dependency values');
+
+    const langPathParts = languages.split('/');
+
+    // Todo: Ought to make these locales only conditionally required and
+    //      then only show those specified in languages menu or go directly
+    //      to work selection
+    // Todo: We might give option to only download
+    //        one locale and avoid language splash page
+    const localeFiles = langs.map(
+      ({locale: {$ref}}) => {
+        return (langPathParts.length > 1
+          ? langPathParts.slice(0, -1).join('/') + '/'
+          : ''
+        ) + $ref;
+      }
+    );
+
+    const urlsToPrefetch = [
+      ...textbrowserStaticResourceFiles,
+      ...localeFiles,
+      ...userStaticFiles,
+      ...userDataFiles,
+      ...stylesheets
+    ];
+    // .map((url) => url === 'index.html' ? new Request(url, {cache: 'reload'}) : url)
+    try {
+      const cachePromises = urlsToPrefetch.map(async (urlToPrefetch) => {
+        // This constructs a new URL object using the service worker's script
+        //   location as the base for relative URLs.
+        const url = new URL(urlToPrefetch, location.href);
+        url.search += (url.search ? '&' : '?') + 'cache-bust=' + now;
+        const request = new Request(url, {mode: 'no-cors'});
+        try {
+          const response = await fetch(request);
+          if (response.status >= 400) {
+            throw new Error('request for ' + urlToPrefetch +
+                        ' failed with status ' + response.statusText);
+          }
+          return cache.put(urlToPrefetch, response);
+        } catch (error) {
+          logError(error, 'Not caching ' + urlToPrefetch + ' due to ' + error);
+          throw error;
+        }
+      });
+      await Promise.all(cachePromises);
+      log('Install: Pre-fetching complete.');
+    } catch (error) {
+      logError(error, `Install: Pre-fetching failed: ${error}`);
+      // Failing gives chance for a new client to re-trigger install?
+      throw error;
+    }
+
+    // An install update event will not be reported until controlled,
+    //    so we need to inform the clients
+    log(`Install: Posting finished message to clients`);
+
+    // Although we only need one client to which to send
+    //   arguments, we want to signal phase complete to all
+    post({type: 'finishedInstall'});
+  }
+
+  /**
+   *
+   * @param {PositiveInteger} time
+   * @returns {Promise<void>}
+   */
+  async function activate (time) {
+    post({type: 'beginActivate'});
+    log(`Activate: Trying, attempt ${time}`);
+    const [json, cacheNames] = await Promise.all([
+      getJSON(pathToUserJSON),
+      caches.keys()
+    ]);
+    const {namespace, files, basePath} = getConfigDefaults(json);
+    const {version} = await getJSON('./package.json');
+
+    const expectedCacheNames = Object.values(CURRENT_CACHES).map((n) => namespace + n + version);
+    cacheNames.map(async (cacheName) => {
+      if (!expectedCacheNames.includes(cacheName)) {
+        log('Activate: Deleting out of date cache:', cacheName);
+        await caches.delete(cacheName);
+      }
+    });
+
+    await activateCallback({namespace, files, basePath, log});
+    log('Activate: Database changes completed');
+
+    log(`Activate: Posting finished message to clients`);
+    // Signal phase complete to all clients
+    post({type: 'finishedActivate'});
+  }
+
+  const params = new URL(location).searchParams;
+  const pathToUserJSON = params.get('pathToUserJSON');
+  const stylesheets = JSON.parse(params.get('stylesheets') || []);
+
+  console.log('sw info', pathToUserJSON);
+  console.log('sw stylesheets', stylesheets);
+
+  self.addEventListener('install', (e) => {
+    e.waitUntil(tryAndRetry(install, 5 * minutes, 'Error installing'));
+  });
+
+  self.addEventListener('activate', (e) => {
+    // Erring is of no present use here:
+    //   https://github.com/w3c/ServiceWorker/issues/659#issuecomment-384919053
+    e.waitUntil(tryAndRetry(activate, 5 * minutes, 'Error activating'));
+  });
+
+  // We cannot make this async as `e.respondWith` must be called synchronously
+  self.addEventListener('fetch', (e) => {
+    // DevTools opening will trigger these o-i-c requests
+    const {request} = e;
+    const {cache, mode, url} = request;
+    if (cache === 'only-if-cached' &&
+          mode !== 'same-origin') {
+      return;
+    }
+    console.log('fetching', url);
+    e.respondWith((async () => {
+      const cached = await caches.match(request);
+      if (!cached) {
+        console.log('no cached found', url);
+      }
+      return cached || fetch(request);
+    })());
+  });
+}
+
+export default swHelper;

package/index.html

@@ -4,6 +4,8 @@
     <title></title>
     <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
 
+    <!-- Browser polyfills -->
+    <script type="module" src="node_modules/intl-locale-textinfo-polyfill/lib/polyfill.js"></script>
     <!-- Site-specific customization -->
     <script type="module" src="resources/user.js"></script>
 </head><body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "textbrowser",
-  "version": "0.47.0",
+  "version": "0.48.1",
   "description": "Multilinear text browser",
   "type": "module",
   "main": "dist/index-es.min.js",
@@ -9,18 +9,6 @@
   "bin": {
     "textbrowser": "./server/main.js"
   },
-  "scripts": {
-    "server": "./server/main.js --allowPlugins --namespace=test",
-    "start": "static -p 8081",
-    "rollup": "rollup -c",
-    "lint": "npm run eslint",
-    "eslint": "eslint --ext=js,md,html .",
-    "mocha": "mocha --require test/bootstrap/node.js --require chai/register-assert.js test/textbrowserTests.js",
-    "node": "npm run eslint && npm run rollup && npm run mocha",
-    "open-test": "open-cli http://127.0.0.1:8081/test/",
-    "start-open-test": "run-p start open-test",
-    "test": "npm run eslint && npm run rollup && npm run start-open-test"
-  },
   "browserslist": [
     "cover 100%"
   ],
@@ -42,59 +30,72 @@
     "text"
   ],
   "dependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.23.3",
     "@brettz9/node-static": "^0.1.1",
     "command-line-args": "^5.2.1",
-    "dom-parser": "^0.1.6",
+    "dom-parser": "^1.1.5",
     "form-serialization": "^0.11.0",
-    "indexeddbshim": "^10.0.0",
-    "intl-dom": "^0.17.0",
-    "jamilih": "0.54.0",
-    "jsdom": "^20.0.3",
+    "indexeddbshim": "^12.0.0",
+    "intl-dom": "^0.19.0",
+    "intl-locale-textinfo-polyfill": "^2.1.1",
+    "jamilih": "0.58.2",
+    "jsdom": "^22.1.0",
     "json-refs": "^3.0.15",
     "load-stylesheets": "0.10.0",
     "node-fetch": "^2.6.6",
-    "rtl-detect": "1.0.4",
     "simple-get-json": "^9.0.1"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.19.1",
+    "@babel/eslint-parser": "^7.23.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-env": "^7.23.3",
     "@brettz9/eslint-plugin": "^1.0.4",
-    "@rollup/plugin-babel": "^6.0.2",
-    "@rollup/plugin-commonjs": "^23.0.2",
-    "@rollup/plugin-json": "^5.0.1",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-terser": "^0.1.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-json": "^6.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "@stadtlandnetz/rollup-plugin-postprocess": "^1.1.0",
-    "ajv": "8.11.2",
+    "@web/rollup-plugin-import-meta-assets": "^2.2.0",
+    "ajv": "8.12.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
-    "chai": "^4.3.7",
-    "eslint": "^8.28.0",
-    "eslint-config-ash-nazg": "^34.4.0",
-    "eslint-config-standard": "^17.0.0",
-    "eslint-plugin-array-func": "^3.1.7",
-    "eslint-plugin-compat": "^4.0.2",
+    "chai": "^4.3.10",
+    "eslint": "^8.53.0",
+    "eslint-config-ash-nazg": "^35.1.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-array-func": "^4.0.0",
+    "eslint-plugin-compat": "^4.2.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-html": "^7.1.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsdoc": "^39.6.2",
-    "eslint-plugin-markdown": "^3.0.0",
-    "eslint-plugin-n": "^15.5.1",
-    "eslint-plugin-no-unsanitized": "^4.0.1",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jsdoc": "^46.9.0",
+    "eslint-plugin-markdown": "^3.0.1",
+    "eslint-plugin-n": "^16.3.1",
+    "eslint-plugin-no-unsanitized": "^4.0.2",
     "eslint-plugin-no-use-extend-native": "^0.5.0",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-sonarjs": "^0.16.0",
+    "eslint-plugin-sonarjs": "^0.23.0",
     "eslint-plugin-standard": "^4.1.0",
-    "eslint-plugin-unicorn": "^44.0.2",
+    "eslint-plugin-unicorn": "^49.0.0",
     "json-metaschema": "1.3.0",
-    "mocha": "^10.1.0",
+    "mocha": "^10.2.0",
     "npm-run-all": "^4.1.5",
-    "open-cli": "^7.1.0",
-    "rollup": "^3.4.0",
+    "open-cli": "^7.2.0",
+    "rollup": "^4.4.0",
     "rollup-plugin-re": "^1.0.7",
     "textbrowser-data-schemas": "^0.2.0"
+  },
+  "scripts": {
+    "server": "./server/main.js --allowPlugins --namespace=test",
+    "start": "static -p 8081",
+    "rollup": "rollup -c",
+    "lint": "npm run eslint",
+    "eslint": "eslint --ext=js,md,html .",
+    "mocha": "mocha --require test/bootstrap/node.js --require chai/register-assert.js test/textbrowserTests.js",
+    "node": "npm run eslint && npm run rollup && npm run mocha",
+    "open-test": "open-cli http://127.0.0.1:8081/test/",
+    "start-open-test": "run-p start open-test",
+    "test": "npm run eslint && npm run rollup && npm run start-open-test"
   }
-}
+}

package/resources/activateCallback.js

@@ -1,8 +1,12 @@
+/**
+ * @file Note that this should be kept as a polyglot client-server file
+ *    (besides the server, it is to be invoked by the project service worker).
+ */
 /* eslint-env worker */
 
 const {ceil} = Math;
 const arrayChunk = (arr, size) => {
-  return [...Array.from({length: ceil(arr.length / size)})].map((_, i) => {
+  return Array.from({length: ceil(arr.length / size)}, (_, i) => {
     const offset = i * size;
     return arr.slice(offset, offset + size);
   });
@@ -25,7 +29,7 @@ const arrayChunk = (arr, size) => {
  * @param {string} cfg.namespace
  * @param {string[]} cfg.files
  * @param {Logger} cfg.log
- * @param {string} [cfg.basePath=""]
+ * @param {string} [cfg.basePath]
  * @returns {Promise<void>}
  */
 export default async function activateCallback ({

package/resources/index.js

@@ -8,7 +8,7 @@ import {serialize as formSerialize} from 'form-serialization';
 import getLocaleFallbackResults from './utils/getLocaleFallbackResults.js';
 import {dialogs} from './utils/dialogs.js';
 import {getFieldNameAndValueAliases, getBrowseFieldData} from './utils/Metadata.js';
-import {getWorkFiles, getWorkData} from './utils/WorkInfo.js';
+import {getWorkData} from './utils/WorkInfo.js';
 import {
   respondToState, listenForWorkerUpdate, registerServiceWorker, setServiceWorkerDefaults
 } from './utils/ServiceWorker.js';
@@ -22,14 +22,14 @@ import workSelect from './workSelect.js';
 import workDisplay from './workDisplay.js';
 import {resultsDisplayClient} from './resultsDisplay.js';
 
-/* eslint-disable no-unused-vars */
+/* eslint-disable no-unused-vars, @stylistic/brace-style */
 /**
  *
  * @param {null|number|string|PlainObject|GenericArray} obj
  * @returns {void}
  */
 function s (obj) { dialogs.alert(JSON.stringify(obj)); } // lgtm [js/unused-local-variable]
-/* eslint-enable no-unused-vars */
+/* eslint-enable no-unused-vars, @stylistic/brace-style */
 
 /**
  *
@@ -85,7 +85,7 @@ async function prepareForServiceWorker () {
  * @returns {Promise<void>}
  */
 async function requestPermissions (langs, l) {
-  return await new Promise((resolve, reject) => {
+  return await new Promise((resolve) => {
     // Todo: We could run the dialog code below for every page if
     //    `Notification.permission === 'default'` (i.e., not choice
     //    yet made by user), but user may avoid denying with intent
@@ -165,10 +165,6 @@ async function requestPermissions (langs, l) {
 
 class TextBrowser {
   constructor (options) {
-    // Todo: Replace the `languages` default with `import.meta.url`
-    //  (`new URL('../appdata/languages.json', import.meta.url).href`?)
-    //  https://github.com/tc39/proposal-import-meta
-    const moduleURL = new URL('node_modules/textbrowser/resources/index.js', location);
     this.site = options.site || 'site.json';
     const stylesheets = options.stylesheets || ['@builtin'];
     const builtinIndex = stylesheets.indexOf('@builtin');
@@ -176,7 +172,7 @@ class TextBrowser {
       stylesheets.splice(
         builtinIndex,
         1,
-        new URL('index.css', moduleURL).href
+        new URL('index.css', import.meta.url).href
       );
     }
     this.stylesheets = stylesheets;
@@ -203,10 +199,7 @@ class TextBrowser {
 
   async init () {
     this._stylesheetElements = await loadStylesheets(this.stylesheets);
-    return this.displayLanguages();
-  }
 
-  async displayLanguages () {
     // We use getJSON instead of JsonRefs as we do not need to resolve the locales here
     try {
       const [langData, siteData] = await getJSON([this.languages, this.site]);
@@ -242,7 +235,7 @@ class TextBrowser {
 
   // Need for directionality even if language specified (and we don't want
   //   to require it as a param)
-  // Todo: Use rtl-detect (already included)
+  // Todo: Use intl-locale-textinfo-polyfill (already included)
   getDirectionForLanguageCode (code) {
     const langs = this.langData.languages;
     const exactMatch = langs.find((lang) => {
@@ -587,6 +580,5 @@ class TextBrowser {
 // Todo: Definable as public fields?
 TextBrowser.prototype.workDisplay = workDisplay;
 TextBrowser.prototype.resultsDisplayClient = resultsDisplayClient;
-TextBrowser.prototype.getWorkFiles = getWorkFiles;
 
 export default TextBrowser;