itemsjs/benchmarks/browser-snapshot.html at 63e6ea436c3c763392b8a8001eff83fc09487c91 · itemsapi/itemsjs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>ItemsJS Snapshot Smoke Test</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    pre { background: #f6f8fa; padding: 12px; overflow: auto; }
  </style>
</head>
  <body>
    <h1>ItemsJS Snapshot Smoke Test</h1>
    <p style="max-width: 640px;">
      A green message below means the snapshot was created and stored in localStorage (first load)
      or successfully loaded from it (subsequent refreshes). If it stays on “Loading…” or you see a
      red message, check the browser console for errors.
    </p>
    <p id="status">Loading…</p>
    <div id="msg" style="margin: 8px 0; font-weight: bold;"></div>
    <pre id="output"></pre>

  <script type="module">
    import itemsjs from '../dist/index.module.js';

    const config = {
      searchableFields: ['name', 'category', 'actors', 'name'],
      aggregations: {
        tags: { title: 'Tags', conjunction: true },
        actors: { title: 'Actors', conjunction: true },
        year: { title: 'Year', conjunction: true },
        in_cinema: { title: 'Is played in Cinema', conjunction: true },
        category: { title: 'Category', conjunction: true },
      },
    };

    const log = (obj) => {
      document.getElementById('output').textContent += `${obj}\n`;
    };

    const setStatus = (msg) => {
      document.getElementById('status').textContent = msg;
    };

    const setMsg = (msg, ok = true) => {
      const el = document.getElementById('msg');
      el.style.color = ok ? 'green' : 'red';
      el.textContent = msg;
    };

    async function loadData() {
      const res = await fetch('../tests/fixtures/items.json');
      if (!res.ok) throw new Error(`Failed to load data: ${res.status}`);
      return res.json();
    }

    async function run() {
      try {
        const data = await loadData();

        // Try to load snapshot from localStorage if present
        const stored = localStorage.getItem('itemsjs-snapshot');
        const snap = stored ? JSON.parse(stored) : null;

        const engine = itemsjs(data, {
          ...config,
          fulltextSnapshot: snap?.fulltext,
          facetsSnapshot: snap?.facets,
        });

        if (!snap) {
          setStatus('Built fresh, creating snapshot…');
          const newSnap = engine.serializeAll();
          localStorage.setItem('itemsjs-snapshot', JSON.stringify(newSnap));
          setMsg('Snapshot created and stored in localStorage.', true);
        } else {
          setStatus('Loaded from snapshot');
          setMsg('Loaded from snapshot in localStorage.', true);
        }

        const result = engine.search({
          query: 'comedy',
          filters: { tags: ['a'] },
        });

        log(JSON.stringify({
          status: document.getElementById('status').textContent,
          message: document.getElementById('msg').textContent,
          total: result.pagination.total,
          items: result.data.items.map((v) => v.name),
          aggregations: result.data.aggregations.tags.buckets.slice(0, 3),
        }, null, 2));
      } catch (e) {
        setStatus('Error');
        setMsg(e.message || 'Error', false);
        log(e);
        console.error(e);
      }
    }

    run();
  </script>
</body>
</html>