textbrowser 0.47.0 → 0.48.0

package/dist/sw-helper.js

@@ -0,0 +1,310 @@
+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/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=0]
+   * @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, reject) => {
+        setTimeout(() => {
+          resolve(tryAndRetry(cb, timeout, errMessage, time));
+        }, timeout);
+      });
+    }
+  }
+
+  /**
+   *
+   * @param {PlainObject} args
+   * @param {"log"|"error"|"beginInstall"|"finishedInstall"|"beginActivate"|"finishedActivate"} args.type
+   * @param {string} [args.message=type]
+   * @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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "textbrowser",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "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%"
   ],
@@ -69,6 +57,7 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.1.0",
     "@stadtlandnetz/rollup-plugin-postprocess": "^1.1.0",
+    "@web/rollup-plugin-import-meta-assets": "^1.0.7",
     "ajv": "8.11.2",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "chai": "^4.3.7",
@@ -96,5 +85,17 @@
     "rollup": "^3.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,3 +1,7 @@
+/**
+ * @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;

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';
@@ -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]);
@@ -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;

package/resources/resultsDisplay.js

@@ -10,7 +10,6 @@ import {
 } from './utils/Metadata.js';
 import {Languages} from './utils/Languages.js';
 import {getWorkData} from './utils/WorkInfo.js';
-// Keep this as the last import for Rollup
 
 const {getLangDir} = rtlDetect;
 const fieldValueAliasRegex = /^.* \((.*?)\)$/;
@@ -117,6 +116,11 @@ export const resultsDisplayClient = async function resultsDisplayClient (args) {
   });
 };
 
+/**
+ * This is server-only code, but kept here as the function is similar.
+ * @param {{serverOutput: "jamilih"|"html"|"json"}} args
+ * @returns {Promise<Array|string>}
+ */
 export const resultsDisplayServer = async function resultsDisplayServer (args) {
   const {
     templateArgs

package/resources/utils/IntlURLSearchParams.js

@@ -1,3 +1,6 @@
+/**
+ * @file Note that this should be kept as a polyglot client-server file.
+ */
 /**
  *
  * @param {string} param

package/resources/utils/Languages.js

@@ -20,6 +20,9 @@ export const getPreferredLanguages = ({namespace, preferredLocale}) => {
   return langArr;
 };
 
+/**
+ * @classdesc Note that this should be kept as a polyglot client-server class.
+ */
 export class Languages {
   constructor ({langData}) {
     this.langData = langData;

package/resources/utils/ServiceWorker.js

@@ -2,12 +2,23 @@
 // import {escapeHTML} from './sanitize.js';
 import {dialogs} from './dialogs.js';
 
+/**
+ * Note that this function be kept as a polyglot client-server file.
+ * @param {PlainObject} target
+ * @param {PlainObject} source
+ * @returns {{
+ *   userJSON: string,
+ *   languages: string,
+ *   serviceWorkerPath: string,
+ *   files: string,
+ *   namespace: string
+ * }}
+ */
 export const setServiceWorkerDefaults = (target, source) => {
   target.userJSON = source.userJSON || 'resources/user.json';
   target.languages = source.languages || new URL(
-    '../appdata/languages.json',
-    // Todo: Substitute with `import.meta.url`
-    new URL('node_modules/textbrowser/resources/index.js', location)
+    '../../appdata/languages.json',
+    import.meta.url
   ).href;
   target.serviceWorkerPath = source.serviceWorkerPath ||
         `sw.js?pathToUserJSON=${

package/resources/utils/WorkInfo.js

@@ -3,7 +3,12 @@ import {i18n} from 'intl-dom';
 import {getMetaProp, getMetadata, Metadata} from './Metadata.js';
 import {PluginsForWork, escapePlugin} from './Plugin.js';
 
-export const getWorkFiles = async function getWorkFiles (files = this.files) {
+/**
+ * Imported by the `dist/sw-helper.js`
+ * @param {string} files The files.json file path
+ * @returns {PlainObject}
+ */
+export const getWorkFiles = async function getWorkFiles (files) {
   const filesObj = await getJSON(files);
   const dataFiles = [];
   filesObj.groups.forEach((fileGroup) => {

package/resources/utils/getLocaleFallbackResults.js

@@ -1,3 +1,6 @@
+/**
+ * @file Note that this should be kept as a polyglot client-server file.
+ */
 import {i18n} from 'intl-dom';
 
 export default async function getLocaleFallbackResults ({

package/server/main.js

@@ -15,7 +15,6 @@ import IntlURLSearchParams from '../resources/utils/IntlURLSearchParams.js';
 import {resultsDisplayServer} from '../resources/resultsDisplay.js';
 import getLocaleFallbackResults from '../resources/utils/getLocaleFallbackResults.js';
 import {setServiceWorkerDefaults} from '../resources/utils/ServiceWorker.js';
-// import setGlobalVars from 'indexeddbshim/src/node-UnicodeIdentifiers.js';
 import {Languages} from '../resources/utils/Languages.js';
 import activateCallback from '../resources/activateCallback.js';