@vernikr/size-report 2.5.0 → 2.7.0

package/src/page/app.js

@@ -1,101 +1,169 @@
-import { appData, appUi, appView, appWrite, appNotice, appLinkUse, appRead, appApply, appFoldRead } from './state.js';
-import { appBody, appHead, appState } from './table.js';
-import { appPanel } from './panel.js';
+import { appUnpack } from './payload.js';
+import { appApply, appBoot, appData, appFoldRead, appLinkUse, appNotice, appRead, appUi, appView, appWrite } from './state.js';
+import { appColumn, appColumnSize, appColumnStale, appContribute, appMetrics, appState, appTable, appTotals, appTotalsReset } from './table.js';
+import { appDraw } from './work.js';
+import { appPanel, appPanelAll, appPanelState } from './panel.js';
 
-/* Assembling the table: what to show (the metrics and files the reader left on) and where to put it. The table
- * chapter builds the markup of the head and the rows, the shared calculation gives the numbers — all that is
- * left here is the decision and the insertion, with no numbers of its own. */
-function appTable() {
-  const shown = appData.metrics.filter((m) => appView.metrics[m.key]);
-  const metrics = shown.map((m) => m.key);
-  const on = appView.files;
-  const files = [];
-  appData.files.forEach((f, i) => { if (on[i]) files.push(i); });
-  /* The columns the last commit touched come first: the report is rebuilt after every commit, and a reader's first
-   * question is what that edit brought. Inside each part the order stays as it comes from the settings — `sort` is
-   * stable, and the order of the columns is what the reader is used to. The mark comes from the history (which the
-   * engine knows) rather than from the numbers: an edit that changed no size is an edit too. */
-  files.sort((a, b) => (appData.last[a] === true ? 0 : 1) - (appData.last[b] === true ? 0 : 1));
+/* Assembling the report: the table is built once (`appTable` of the table chapter) and everything afterwards only
+ * shows, hides and recounts. A click on any switch therefore costs a class, a number and the fields it reached — the
+ * whole table used to be destroyed and built again, which was 81 % of the cost of a click and produced a hundred
+ * thousand dead nodes for the collector to walk.
+ *
+ * Hence two paths and no third: `appPaint` draws the whole view (the first drawing, a record from the browser's
+ * memory, a link in the address), while `appSwitch`, `appSwitchGroup` and `appSwitchMetric` are what one click on a
+ * box does. The numbers are counted on the click itself — that is arithmetic over the data — while the nodes of the
+ * columns are handed to the work chapter (`appDraw`), which draws the short work on the click and the long one in the
+ * next task with a stripe over the page (`src/page/work.js` says what was measured: the price of a switch is the
+ * browser's own relayout of the table, and it is paid once here rather than once per slice). Neither path makes a
+ * node.
+ */
 
-  const table = document.getElementById('grid');
-  table.textContent = '';
-  appState(metrics.length, files.length);
-  if (metrics.length === 0) return;
+// The table's cache of node references: made once, at the first drawing.
+let appCache = null;
 
-  table.appendChild(appHead(shown, files, metrics));
-  table.appendChild(appBody(metrics, files));
+/* One file's column drawn from the view — the state is read when the slice runs rather than kept from the click that
+ * queued it, so a click that arrives while the queue is running is drawn by the next slice rather than after it. */
+function appDrawColumn(i) {
+  appColumn(appCache, i, appView.files[i] === true);
+}
+
+/* The columns of a switch that have to be drawn, as the units the work chapter weighs (`{i, units}` — the file and the
+ * nodes of its column). Only the columns whose nodes are out of step with the view are asked for (`appColumnStale`): a
+ * report opened with everything switched on has nothing to draw, and a column that is already right would cost its
+ * nodes again. The count is the table's (`appColumnSize`), because the table is the only place that knows how many
+ * nodes a column has. */
+function appColumns(indexes) {
+  const todo = indexes.filter((i) => appColumnStale(appCache, i));
+  appDraw(appDrawColumn, todo.map((i) => ({ i: i, units: appColumnSize(appCache, i) })));
+}
+
+/* The note under the table: what a row is and how the report was made. It does not depend on the choice, so it is
+ * written once — with the table rather than with every drawing of it. */
+function appNote() {
   document.getElementById('note').textContent = appUi.note
     .replace('{rows}', appData.rows.length)
     .replace('{command}', appData.report.fixCommand);
+}
+
+/* What the empty states are told: how many metrics and how many files are left. The table stands there in either
+ * case (it is built once) — the words are about what is shown. */
+export function appCounts() {
+  appState(appData.metrics.filter((m) => appView.metrics[m.key] === true).length,
+    appView.files.filter((on) => on === true).length);
+}
+
+/* The whole view drawn: every column, the totals of the whole selection, the metrics, the empty states and the panel's
+ * fields. This is what a link, a record from the memory and the first drawing need — and it makes no node either. */
+export function appPaint() {
+  appColumns(appData.files.map((_f, i) => i));
+  appTotalsReset(appCache);
+  appMetrics(appCache);
+  appCounts();
+  appPanelAll();
   appWrite();
 }
 
-/* The panel's scroll is a property of the panel rather than of the markup, which is why it survives a rebuild:
- * otherwise every click on a checkbox would send the list back to the top and the files at its end would be
- * unreachable. Both the panel's scroll and the file list's are remembered — each has one of its own, and in a
- * narrow window it is the list that scrolls. The elements are the ones the page really has (`#panel` from the
- * markup, `.files` inside it from the panel): there is no second list of scroll places in the package. */
-const appScrolled = ['#panel', '#panel .files'];
-function appScrollTop() {
-  return appScrolled.map((sel) => {
-    const el = document.querySelector(sel);
-    return el === null ? 0 : el.scrollTop;
-  });
+/* One file switched by the reader: the view, its share of the totals, the fields it shows in and its column — the
+ * last through the queue, because a column may be long. The message about a link fades here: by this action the
+ * reader has read it. */
+export function appSwitch(i, on) {
+  if (appView.files[i] === on) return;
+  appView.files[i] = on;
+  appContribute(appCache, i, on);
+  appTotals(appCache);
+  appCounts();
+  appPanelState([i]);
+  appWrite();
+  appNotice('');
+  appColumns([i]);
 }
 
-function appScrollBack(saved) {
-  appScrolled.forEach((sel, i) => {
-    const el = document.querySelector(sel);
-    if (el !== null) el.scrollTop = saved[i];
+/* A group switched at once — a folder or a category: the same work per file, then the totals once and the fields of
+ * the files the choice really reached (switching a folder on when a part of it was already on touches only the rest,
+ * and a field that did not move is not written). The columns of the whole group go into the queue together, so the bar
+ * counts them as one piece of work. */
+export function appSwitchGroup(indexes, on) {
+  const touched = indexes.filter((i) => appView.files[i] !== on);
+  touched.forEach((i) => {
+    appView.files[i] = on;
+    appContribute(appCache, i, on);
   });
+  appTotals(appCache);
+  appCounts();
+  appPanelState(touched);
+  appWrite();
+  appNotice('');
+  appColumns(touched);
+}
+
+/* One metric switched: a class on the table and the headings' `colSpan`. The totals do not move with a metric — they
+ * are sums over files — and the metric's own field is the box the reader just clicked. */
+export function appSwitchMetric() {
+  appMetrics(appCache);
+  appCounts();
+  appWrite();
+  appNotice('');
 }
 
-/* The panel is redrawn whole, so the field under the keyboard and the scroll come back to their places after every
- * rebuild: otherwise switching with Tab and Space would mean walking the panel from the start again, and the scroll
- * would have to find its place anew. A field is identified by its ordinal number — the order of the panel's fields
- * does not change between rebuilds. The focus is set without scrolling (`preventScroll`): it returns the keyboard
- * rather than moving the list. */
-function appRender(keepNotice) {
-  const at = Array.from(document.querySelectorAll('#panel input')).indexOf(document.activeElement);
-  const saved = appScrollTop();
+/* The first drawing: the choice is already in the view (the link and the memory are applied above), the panel is
+ * built to match it, the table is built once — every column of every file — and the view is painted over it. */
+function appFirst() {
   appPanel();
-  appScrollBack(saved);
-  if (at >= 0) document.querySelectorAll('#panel input')[at].focus({ preventScroll: true });
-  appTable();
-  /* The message about the link survives the very drawing it caused, and fades on the reader's next action: he has read
-   * it by then. */
-  if (keepNotice !== true) appNotice('');
+  appCache = appTable(document.getElementById('grid'));
+  appNote();
+  appPaint();
 }
 
+/* The page's one asynchronous step, and why there is one. The block in the artifact is packed, and the platform's own
+ * unpacker answers with a promise, so the first drawing waits for it; everything after the first drawing is as
+ * synchronous as it was, and a click costs what it cost. A host that cannot unpack is told in words instead of being
+ * left with an empty table — the reader would not know whether the report or the browser is at fault. */
+let appBooted = false;
+
 /* Restoring happens before the first drawing: for someone opening the page for the first time the view has to be the
  * default rather than someone else's choice. A link outranks the memory: it is the sender's explicit choice, and
  * while the reader has changed nothing it does not replace his own — writing it to the memory is what does not
  * happen. A refused link is not an empty table but a message: the reader sees both what happened and what is shown
  * instead. */
-const appStart = appLinkUse();
-if (appStart === 'ours') appTransient = true;
-else if (appStart === 'refused') appForeign = true;
-if (appStart !== 'ours') {
-  const appSaved = appRead();
-  if (appSaved !== null) appApply(appSaved);
+async function appBegin() {
+  try {
+    appBoot(await appUnpack(document.getElementById('data')));
+  } catch (_e) {
+    appNotice(appUi.unpack);
+    return;
+  }
+  const appStart = appLinkUse();
+  /* A link that came in is the sender's choice rather than the reader's: while it is drawn, the memory is not touched
+   * (`appWrite`), so opening a link does not make it the reader's own. */
+  appTransient = appStart === 'ours';
+  if (appStart !== 'ours') {
+    const appSaved = appRead();
+    if (appSaved !== null) appApply(appSaved);
+  }
+  /* The unfolded tree is the onlooker's memory rather than the reader's choice: it comes back even when someone
+   * else's link is open (otherwise a link sent over would unfold the tree again on every visit). */
+  appFoldRead();
+  appFirst();
+  appBooted = true;
+  appTransient = false;
 }
-/* The folded tree is the onlooker's memory rather than the reader's choice: it comes back even when someone else's
- * link is open (otherwise a link sent over would unfold the tree again on every visit). */
-appFoldRead();
-appRender(true);
-appStartup = false;
-appForeign = false;
-appTransient = false;
+
+/* Whoever opened the page and has to know when the first drawing is over waits for this promise — the checks do
+ * (`tools/page-harness.js`); the page itself has no use for it. */
+window.appDrawn = appBegin();
 
 /* The anchor changed on an open page: the choice in the new address is applied by the same code as at opening. The
  * page's own address raises no such event (`replaceState` does not), so there is no loop here. A refusal touches
  * neither the view — the reader keeps looking at what he looked at — nor the address: it was sent to the reader,
- * and until he acts it is not ours. */
+ * and until he acts it is not ours. The message about the link stays: this drawing is exactly what it explains. */
 window.addEventListener('hashchange', () => {
-  const state = appLinkUse();
-  if (state === 'refused') appForeign = true;
-  appTransient = state === 'ours';
-  appRender(true);
-  appForeign = false;
+  /* The first drawing has not happened yet: the address the page was opened with is the business of that drawing,
+   * and a change that arrives before it has drawn nothing to replace. */
+  if (!appBooted) return;
+  /* An address that came in from outside is read here the way it is read at opening, and a link is not the reader's
+   * choice until he changes something — the memory stays his own. The address itself is never rewritten: the page has
+   * no business in the tab's title bar, and what a link holds is read rather than made. */
+  appTransient = appLinkUse() === 'ours';
+  appPaint();
   appTransient = false;
 });

package/src/page/build.js

@@ -1,6 +1,8 @@
 import fs from 'fs';
+import zlib from 'zlib';
 import { fill, LOCALES } from '../locales.js';
 import { PAGE_CSS, TABLE_CSS } from '../css.js';
+import { assertCompilable, stripCss, stripJs, stripLines } from '../strip.js';
 
 /* Escaping text for markup lives here, because this builder is the only place that turns data into markup: the rest
  * is drawn as nodes by the page. */
@@ -17,6 +19,9 @@ export function esc(s) {
  * `import` with, and the declarations have to reach the shared scope in the order of pasting — the calculation first,
  * then the chapters.
  *
+ * What is pasted is **squeezed** on the way in (`squeezedJs`, `squeezedCss`): comments and indentation leave only the
+ * copy inside the report, which is read in a browser, while the sources stay the ordinary files a person edits.
+ *
  * The chapters follow the page's subjects, and the order of pasting (the list below) is the order of declarations in
  * the assembled program: the calculation first, then the choice's state, the nodes, the panel, the table and the
  * assembling. The chapters are **slices of one text**: pasting glues them in a row, so the assembled page would stay
@@ -24,7 +29,10 @@ export function esc(s) {
 export function stripModules(src) {
   return src.split('\n')
     .filter((line) => !/^import\s.*;\s*$/.test(line))
-    .map((line) => line.replace(/^export\s+(function|const|let|var|class)\s/, '$1 '))
+    /* `async` is part of the form rather than a decoration of it: a declaration marked `export async` is as ordinary
+     * a source as the rest, and the pasted page has no module syntax to resolve either of them with. */
+    .map((line) => line.replace(/^export\s+(?:async\s+)?(?:function|const|let|var|class)\s/,
+      (head) => head.slice('export '.length)))
     .join('\n');
 }
 
@@ -33,11 +41,32 @@ export function pageSource(file) {
 }
 
 /* The list of chapters lives here rather than in the tests: one copy for the builder and for the guard
- * (`test/page-view.test.js` reads the same program and compares it with the sources). */
-export const PAGE_PARTS = ['./state.js', './dom.js', './panel.js', './table.js', './app.js'];
+ * (`test/page-view.test.js` reads the same program and compares it with the sources). The payload chapter comes
+ * first of the page's own: it is what turns the block into the data everything else reads. */
+export const PAGE_PARTS = ['./payload.js', './state.js', './dom.js', './work.js', './panel.js', './table.js', './app.js'];
+
+/* The form the artifact carries: the same stripping the `min` metric counts (`src/strip.js`) — comments out,
+ * indentation and blank lines out — applied to what is pasted, while the sources on disk keep everything: they are
+ * read, edited and linted by people, and only the copy inside the report is squeezed. Exported because the checks
+ * compare the page with exactly this form rather than with the sources. */
+export function squeezedJs(code) {
+  return stripLines(stripJs(code));
+}
 
+export function squeezedCss(css) {
+  return stripLines(stripCss(css));
+}
+
+/* The page's program: the chapters glued, the module syntax stripped line by line, the text squeezed — in that
+ * order, because the stripping works line by line and a comment could otherwise hide a line's shape. The squeeze
+ * may throw away nothing but comments and air, so what comes out has to parse, and the same guard the `min` metric
+ * uses says so: with no revision (the text is built here and now) and without the unparsed original, because a text
+ * that does not parse at all is not "a damaged file" but a bug of this assembler. */
 export function pageScript() {
-  return pageSource('../derived.js') + '\n' + PAGE_PARTS.map((part) => pageSource(part)).join('');
+  const code = squeezedJs(pageSource('../derived.js') + '\n'
+    + PAGE_PARTS.map((part) => pageSource(part)).join(''));
+  assertCompilable(code, '', 'the page’s program');
+  return code;
 }
 
 /* The note under the heading: what built the report and where it lies. The path is plain text rather than a link: the
@@ -67,11 +96,9 @@ function uiText(page, loc) {
     linkForeign: page.linkForeign,
     linkBroken: page.linkBroken,
     linkExtra: page.linkExtra,
-    /* Accuracy in two words: a metric's caption speaks about the worst in its column, while a cell's tooltip speaks
-     * about its own number. */
-    exact: page.exact,
-    approximate: page.approximate,
-    approxCell: page.approximateCell,
+    /* What a host that cannot unpack the block is told: the page's one message about its own file rather than about
+     * the report's numbers (see `appBegin`). */
+    unpack: page.unpack,
     /* Why a file is not in the report, in words: the engine names the reason with a mark (`why`), and the page dresses
      * the mark in text, as it does with everything else in the panel. */
     notMeasuredRule: page.notMeasuredRule,
@@ -91,19 +118,133 @@ function uiText(page, loc) {
   };
 }
 
-/* What does not go into the file. First, the list of skipped commits: it changes with the report's own commit (one
- * with nothing to say lands in the list), and the file would stop being a **fixed point** — a rebuild after its own
- * commit would yield different bytes and the hook would commit the report forever. The page has no use for the list
- * at all: it does not show it. It stays available to the reader — `--data`, `--json` and `explain` answer from the
- * same run. */
-const NOT_IN_FILE = ['skipped'];
+/* The page's block is the contract in **sparse form** (`schema: 2`): the history as changes rather than as a snapshot
+ * per commit, the texts in a dictionary of their own, and the rows' links cut by the part they share. The dense form
+ * stays what `--data` answers with — an agent reads the contract as it is — and the page's own chapter unrolls this
+ * one (`src/page/payload.js`, `appDecode`), so the two places it is read are the encoder here and the decoder there.
+ * `test/contract-data.test.js` holds the round trip between them.
+ *
+ * What the block leaves out besides the sparse form is the list of skipped commits: it changes with the report's own
+ * commit (one with nothing to say lands in the list), and the file would stop being a **fixed point** — a rebuild
+ * after its own commit would yield different bytes and the hook would commit the report forever. The page has no use
+ * for the list at all: it does not show it. It stays available to the reader — `--data`, `--json` and `explain`
+ * answer from the same run.
+ *
+ * How much this is worth: the artifact of this repository carried 1 370 627 B of data as a snapshot per commit — 95 %
+ * of the whole file — while nine tenths of the cells repeat the row above; the same history as changes is about 84 000
+ * B. Reproducibility is untouched: the artifact stays a fixed point, rebuilt byte for byte after its own commit. */
+
+/* The block's fields, in the order the encoder writes them. The shape is closed: a field added here has to be read in
+ * the decoder, and the page's checks compare the block with this list rather than with a description of it. */
+export const PAGE_KEYS = ['schema', 'tool', 'report', 'hrefPrefix', 'strs', 'metrics', 'cats', 'files',
+  'catalog', 'rows', 'last', 'hist'];
+
+/* The texts of the block, each written once. The dictionary is extended in the order of the walk `pagePayload` makes
+ * — files in the column order, rows in the history order — and the order of the first appearance is what decides an
+ * index. That is part of the format rather than a detail: the artifact is rebuilt after every commit and has to come
+ * out byte-identical on any machine. */
+function dictionary() {
+  const list = [];
+  const at = new Map();
+  function of(text) {
+    if (text === null) return null;
+    const seen = at.get(text);
+    if (seen !== undefined) return seen;
+    list.push(text);
+    at.set(text, list.length - 1);
+    return list.length - 1;
+  }
+  return { list: list, of: of };
+}
+
+/* What the rows' links have in common: for an ordinary row the commit template with the sha cut out, and, when some
+ * rows lead to a journal section instead, the part the two kinds share. A row keeps only the rest of its link — which
+ * for an ordinary row is the sha the row carries anyway, so a link costs nothing beyond the prefix written once. */
+function linkPrefix(rows) {
+  const links = rows.map((r) => r.href).filter((href) => href !== null);
+  let out = links.length === 0 ? null : links[0];
+  links.forEach((href) => {
+    let n = 0;
+    while (n < out.length && href[n] === out[n]) n++;
+    out = out.slice(0, n);
+  });
+  return out;
+}
+
+/* One file between two commits: nothing when the numbers are the same, the absolute numbers when the file was absent
+ * before, the deltas when it moved, and a record of the row alone when it is gone — the three shapes the decoder
+ * reads. A commit that did not touch a file has no record for it, which is what makes the block small: the numbers are
+ * compared rather than the list of paths a commit changed. */
+function change(was, nums) {
+  if (nums === null) return was === null ? null : [];
+  if (was === null) return nums;
+  const deltas = nums.map((n, mi) => n - was[mi]);
+  return deltas.every((d) => d === 0) ? null : deltas;
+}
+
+// The history of every file, in the column order: the rows it appeared in, moved in and disappeared in.
+function history(keys, files, rows) {
+  const was = files.map(() => null);
+  const hist = files.map(() => []);
+  rows.forEach((row, r) => {
+    row.values.forEach((v, i) => {
+      const nums = v === null ? null : keys.map((key) => v[key]);
+      const rec = change(was[i], nums);
+      if (rec !== null) hist[i].push([r].concat(rec));
+      was[i] = nums;
+    });
+  });
+  return hist;
+}
 
 export function pagePayload(data) {
-  const out = Object.assign({}, data);
-  NOT_IN_FILE.forEach((key) => delete out[key]);
+  const keys = data.metrics.map((m) => m.key);
+  const dict = dictionary();
+  const prefix = linkPrefix(data.rows);
+  const out = {
+    schema: 2,
+    tool: data.tool,
+    /* The report's own words are the ones the page reads: `heading` is the artifact's `<h1>` and `journal` is null
+     * today, so neither is carried — the page builds no heading and prints no journal. */
+    report: {
+      locale: data.report.locale,
+      title: data.report.title,
+      artifact: data.report.artifact,
+      fixCommand: data.report.fixCommand,
+      showSha: data.report.showSha
+    },
+    hrefPrefix: prefix,
+    strs: dict.list,
+    metrics: data.metrics.map((m) => [dict.of(m.key), dict.of(m.label), dict.of(m.note), dict.of(m.method)]),
+    cats: data.categories.map((c) => [dict.of(c.key), dict.of(c.label)]),
+    files: data.files.map((f) => [dict.of(f.label), dict.of(f.path),
+      f.paths.map((p) => dict.of(p)), dict.of(f.category), dict.of(f.categoryBy)]),
+    catalog: data.catalog.map((e) => [dict.of(e.path), dict.of(e.why)]),
+    rows: data.rows.map((r) => [dict.of(r.sha), dict.of(r.when), dict.of(r.subject),
+      r.section === null ? null : dict.of(r.section.id),
+      r.section === null ? null : dict.of(r.section.head),
+      r.section !== null && r.section.added ? 1 : 0,
+      r.href === null ? null : dict.of(r.href.slice(prefix.length))]),
+    last: [],
+    hist: history(keys, data.files, data.rows)
+  };
+  data.last.forEach((on, i) => { if (on) out.last.push(i); });
   return out;
 }
 
+/* The block as the artifact carries it: gzip of its JSON, base64. The packing is a **transport, not the shape** —
+ * what the page unpacks is the very block it received before (`schema: 2`), and `--data`/`--json` keep answering
+ * with the dense contract. It is here because the block is most of the file: this repository's report carried
+ * 88 786 B of it against 32 142 B compressed, 42 856 B with base64's third.
+ *
+ * Level 9 because the block is written once per commit and read by whoever opens the file, not by a server under
+ * load. What the fixed point rests on is that the bytes are reproducible: zlib writes no time into the gzip header,
+ * so the same text gives the same bytes (the version of zlib is the machine's, like the version of git). Base64 is
+ * what makes the bytes survive a text file — a gzip stream is not valid UTF-8, and the report is one. */
+export function pagePacked(text) {
+  return zlib.gzipSync(Buffer.from(text, 'utf8'), { level: 9 }).toString('base64');
+}
+
 /* The report's page is one file: the data lies in it, the script is pasted in, there are no external references. Hence
  * it opens with a double click and works without a network. */
 export function pageHtml(data, cfg) {
@@ -111,15 +252,21 @@ export function pageHtml(data, cfg) {
   return '<!doctype html>\n<html lang="' + esc(loc.html) + '">\n<head>\n<meta charset="utf-8">\n'
     + '<meta name="viewport" content="width=device-width, initial-scale=1">\n'
     + '<title>' + esc(data.report.title) + '</title>\n<style>\n'
-    + TABLE_CSS + '\n' + PAGE_CSS + '\n</style>\n</head>\n<body>\n'
+    + squeezedCss(TABLE_CSS) + '\n' + squeezedCss(PAGE_CSS) + '\n</style>\n</head>\n<body>\n'
     + '<header>\n<h1>' + esc(data.report.heading) + '</h1>\n'
     + '<p class="sub">' + esc(subText(data, loc.page)) + '</p>\n</header>\n'
+    /* The stripe of the drawing stands first in the page and is fixed to the window's top edge rather than laid out
+     * with the rest: the page's shape is a grid of five rows (`src/page/app.css`), and a stripe that appeared and
+     * disappeared inside it would move the numbers under the reader's eyes every time a switch is drawn. It holds an
+     * empty child rather than a share: the length of an indeterminate stripe is the styling's business. */
+    + '<div id="bar" class="bar" role="progressbar" aria-label="' + esc(loc.page.working) + '" hidden><i></i></div>\n'
     + '<div id="panel" class="panel"></div>\n'
     + '<p id="notice" class="notice" hidden></p>\n'
     + '<div id="shell" class="shell"><table id="grid"></table></div>\n'
     + '<p id="state" class="state" hidden></p>\n'
     + '<p id="note" class="note"></p>\n'
-    + '<script type="application/json" id="data">' + jsonInHtml(pagePayload(data)) + '</script>\n'
+    + '<script type="application/octet-stream" id="data" data-pack="base64+gzip">'
+    + pagePacked(jsonInHtml(pagePayload(data))) + '</script>\n'
     + '<script type="application/json" id="ui">' + jsonInHtml(uiText(loc.page, loc)) + '</script>\n'
     + '<script>\n' + pageScript() + '</script>\n</body>\n</html>\n';
 }