UNPKG

radi/docs/examples/large-data.html

Version:

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Radi.js - Large Data</title>
9</head>
10
11<body>
<div id="app"></div>
<script>
  const rand = Math.random
15
  function buildData(count, start) {
    start = (start) ? start : 0;
    const adjectives = [
      "pretty",
      "large",
      "big",
      "small",
      "tall",
      "short",
      "long",
      "handsome",
      "plain",
      "quaint",
      "clean",
      "elegant",
      "easy",
      "angry",
      "crazy",
      "helpful",
      "mushy",
      "odd",
      "unsightly",
      "adorable",
      "important",
      "inexpensive",
      "cheap",
      "expensive",
      "fancy",
    ]
45
    const colours = [
      "red",
      "yellow",
      "blue",
      "green",
      "pink",
      "brown",
      "purple",
      "brown",
      "white",
      "black",
      "orange",
    ]
59
    const nouns = [
      "table",
      "chair",
      "house",
      "bbq",
      "desk",
      "car",
      "pony",
      "cookie",
      "sandwich",
      "burger",
      "pizza",
      "mouse",
      "keyboard",
    ]
75
    var i = start + 1;
    return new Array(count).fill(0).map(_ => ({
      id: i++, value: `${adjectives[
        rand() * 1000 % adjectives.length >> 0]} ${colours[
        rand() * 1000 % colours.length >> 0]} ${nouns[
        rand() * 1000 % nouns.length >> 0]}`
    }))
  }
84
  var bnc = {};
  var av = (k = 'null', i) => {
    if (typeof bnc[k] === 'undefined') bnc[k] = [];
    var p = bnc[k];
    p.push(i);
    return p.reduce((a, b) => (a + b)) / p.length;
  }
  var bench = (k, c, cb) => {
    let t;
    c();
    t = performance.now();
    window.requestAnimationFrame(() => {
      let e = performance.now();
      console.log(k, (e - t).toFixed(2), ', AVG =', av(k, e - t).toFixed(2) + 'ms');
      cb((e - t).toFixed(2));
    });
  };
102
  function random_rgba() {
    var o = Math.round, r = Math.random, s = 175, i = 50;
    return 'rgb(' + o(r() * s + i) + ',' + o(r() * s + i) + ',' + o(r() * s + i) + ')';
  }
</script>
<script src="../../dist/radi.min.js"></script>
<script src="../../src/devTools"></script>
<script src="../../src/radi-http.js"></script>
<script>
  var perf0 = performance.now()
  const { r, l, component, mount, cond, use, register } = radi
114
  // TODO: Env files
  // TODO: Global configs:
  //       Base url
  //       Base headers
  // http.defaults = {
  //   baseURL: 'https://randomuser.me',
  //   accept: {
  //     headers.common: 'application/json',
  //   },
  // }
  // // TODO: Add interceptors
  // http.interceptors.response.use(
  //   response => response,
  //   (error) => {
  //     if (error.status === 401) {
  //       // Do some magic
  //     }
  //     return error;
  //   });
134
135
  http.get('/api', { results: 2 })
    .then((response) => {
      response.headers
      response.status
      response.text()
      response.json()
      var json = response.json()
    }, (err) => {
144
      // Error
    });
147
  const state = {
    name: 'Marcis',
    num: 0,
    time: 0,
    count: 0,
    color: 'red',
    show: false,
    list: [],
    bench: '-'
  }
158
  const actions = {
    onMount() {
      console.log('Mounted in', performance.now() - perf0, 'ms');
162
      // setInterval(() => {
      //   this.num = ('0' + Math.round(Math.random() * 100)).substr(-2);
      // }, 0);
      //
      // setInterval(() => {
      //   this.time = ('0' + Math.round(Math.random() * 100)).substr(-2);
      // }, 1000);
      //
      // setInterval(() => {
      //   this.color = random_rgba();
      // }, 100);
    },
    toggle(events) {
      console.log(this, events);
      bench('Toggle element', () => {
        this.show = !this.show;
      }, (b) => {
        this.bench = b;
      });
    },
    reverse() {
      bench('Reverse list', () => {
        this.list.reverse();
      }, (b) => {
        this.bench = b;
      });
    },
    create1000() {
      bench('Create 10 rows', () => {
        this.list = buildData(10, this.list.length);
        this.count = 10;
      }, (b) => {
        this.bench = b;
      });
    },
    add1000() {
      bench('Add 1,000 rows', () => {
        this.list = this.list.concat(buildData(1000, this.list.length));
        this.count += 1000;
      }, (b) => {
        this.bench = b;
      });
    },
    add10000() {
      bench('Add 10,000 rows', () => {
        this.list = this.list.concat(buildData(10000, this.list.length));
        this.count += 10000;
      }, (b) => {
        this.bench = b;
      });
    },
    pop() {
      bench('Remove 1 row', () => {
        this.list.pop();
        this.count -= 1;
      }, (b) => {
        this.bench = b;
      });
    },
    update(events) {
      bench('Update every 10th row', () => {
        for (var i = 0; i < this.list.length; i++) {
          if (!((i + 1) % 10)) this.list[i] = { value: this.list[i].value + ' !!!' };
        }
      }, (b) => {
        this.bench = b;
      });
    },
    remove(events) {
      bench('Remove all rows', () => {
        this.list.splice(0, this.list.length);
        this.count = 0;
      }, (b) => {
        this.bench = b;
      });
    },
    swap(events) {
      bench('Swap 5th and 10th rows', () => {
        var x = 4, y = 9;
        this.list[x] = this.list.splice(y, 1, this.list[x])[0];
      }, (b) => {
        this.bench = b;
      });
    }
  }
248
  const reg = component({
    name: 'reg-comp',
    view: function () {
      return r('h1', 'This is ', l(this.name), ' component')
    },
    props: {
      name: String,
    }
  })
258
  register(reg)
260
  const view = function () {
    var name = l(this.name);
    return r('div',
      {
        style: {
          'white-space': 'pre'
        }
      },
      r('reg-comp', { name: name }),
      '\n\n\n',
      r('img', { src: 'https://img.strike.lv/i/avatars/f3/94/5557907d62b2fc97549394f3.png' }),
      r('h4',
        '[dynamic predefined] My name is ',
        name
      ),
      r('h4',
        '[dynamic] My name is ',
        l(this.name + ' Bergmanis')
      ),
      r('h4',
        '[static] My name is ',
        this.name
      ),
      r('input', { type: 'email', autofocus: true, model: l(this.name) }),
      r('hr'),
      cond(
        l(this.show),
        r('div',
          {
            style: {
              'color': l(this.color)
            }
          },
          '\nThis refreshes 60fps:\n',
          l(this.num),
          '\n\n',
          'This refreshes every second:\n',
          l(this.time)
        )
      ).else(
        r('div', '[ There is something hidden here ]')
      ),
      r('button',
        { onclick: () => this.toggle('asd') },
        'Toggle Color Test'
      ),
      r('hr'),
      r('div',
        r('h3',
          'Item count: ',
          l(this.count),
        ),
        r('h3',
          cond(
            l(this.count < 1000),
            '< 1000'
          ).cond(
            l(this.count < 2000),
            '< 2000'
          ).cond(
            l(this.count < 3000),
            '< 3000'
          ).cond(
            l(this.count < 4000),
            '< 4000'
          ).else(
            '>= 4000'
          )
        ),
        'Benchmark: ',
        l(this.bench),
        ' ms',
        r('div',
          r('button',
            { onclick: this.create1000 },
            'Create 10 rows'
          ),
          r('button',
            { onclick: this.add1000 },
            'Add 1,000 rows'
          ),
          r('button',
            { onclick: this.add10000 },
            'Add 10,000 rows'
          ),
          '\n',
          r('button',
            { onclick: this.pop },
            'Remove 1 row'
          ),
          r('button',
            { onclick: this.reverse },
            'Reverse Test'
          ),
          r('button',
            { onclick: this.swap },
            'Swap Test'
          ),
          r('button',
            { onclick: this.remove },
            'Remove all'
          )
        ),
        r('ul',
          'Child node on top\n\n',
          // this.list.loop(item => r('li',
          list(l(this.list), (item) => r('li',
            l(item.id),
            ' - ',
            l(item.value)
          )),
          '\nChild node at bottom'
        )
      )
    );
  };
377
  const main = component({
    view: view,
    state: state,
    actions: actions
  });
383
  mount(r('div', new main()), 'app');
</script>
386</body>
387
388</html>

1	`<!DOCTYPE html>`
2	`<html lang="en">`
3
4	`<head>`
5	`<meta charset="UTF-8">`
6	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
7	`<meta http-equiv="X-UA-Compatible" content="ie=edge">`
8	`<title>Radi.js - Large Data</title>`
9	`</head>`
10
11	`<body>`
12	`<div id="app"></div>`
13	`<script>`
14	`const rand = Math.random`
15
16	`function buildData(count, start) {`
17	`start = (start) ? start : 0;`
18	`const adjectives = [`
19	`"pretty",`
20	`"large",`
21	`"big",`
22	`"small",`
23	`"tall",`
24	`"short",`
25	`"long",`
26	`"handsome",`
27	`"plain",`
28	`"quaint",`
29	`"clean",`
30	`"elegant",`
31	`"easy",`
32	`"angry",`
33	`"crazy",`
34	`"helpful",`
35	`"mushy",`
36	`"odd",`
37	`"unsightly",`
38	`"adorable",`
39	`"important",`
40	`"inexpensive",`
41	`"cheap",`
42	`"expensive",`
43	`"fancy",`
44	`]`
45
46	`const colours = [`
47	`"red",`
48	`"yellow",`
49	`"blue",`
50	`"green",`
51	`"pink",`
52	`"brown",`
53	`"purple",`
54	`"brown",`
55	`"white",`
56	`"black",`
57	`"orange",`
58	`]`
59
60	`const nouns = [`
61	`"table",`
62	`"chair",`
63	`"house",`
64	`"bbq",`
65	`"desk",`
66	`"car",`
67	`"pony",`
68	`"cookie",`
69	`"sandwich",`
70	`"burger",`
71	`"pizza",`
72	`"mouse",`
73	`"keyboard",`
74	`]`
75
76	`var i = start + 1;`
77	`return new Array(count).fill(0).map(_ => ({`
78	id: i++, value: `${adjectives[
79	`rand() * 1000 % adjectives.length >> 0]} ${colours[`
80	`rand() * 1000 % colours.length >> 0]} ${nouns[`
81	rand() * 1000 % nouns.length >> 0]}`
82	`}))`
83	`}`
84
85	`var bnc = {};`
86	`var av = (k = 'null', i) => {`
87	`if (typeof bnc[k] === 'undefined') bnc[k] = [];`
88	`var p = bnc[k];`
89	`p.push(i);`
90	`return p.reduce((a, b) => (a + b)) / p.length;`
91	`}`
92	`var bench = (k, c, cb) => {`
93	`let t;`
94	`c();`
95	`t = performance.now();`
96	`window.requestAnimationFrame(() => {`
97	`let e = performance.now();`
98	`console.log(k, (e - t).toFixed(2), ', AVG =', av(k, e - t).toFixed(2) + 'ms');`
99	`cb((e - t).toFixed(2));`
100	`});`
101	`};`
102
103	`function random_rgba() {`
104	`var o = Math.round, r = Math.random, s = 175, i = 50;`
105	`return 'rgb(' + o(r() * s + i) + ',' + o(r() * s + i) + ',' + o(r() * s + i) + ')';`
106	`}`
107	`</script>`
108	`<script src="../../dist/radi.min.js"></script>`
109	`<script src="../../src/devTools"></script>`
110	`<script src="../../src/radi-http.js"></script>`
111	`<script>`
112	`var perf0 = performance.now()`
113	`const { r, l, component, mount, cond, use, register } = radi`
114
115	`// TODO: Env files`
116	`// TODO: Global configs:`
117	`// Base url`
118	`// Base headers`
119	`// http.defaults = {`
120	`// baseURL: 'https://randomuser.me',`
121	`// accept: {`
122	`// headers.common: 'application/json',`
123	`// },`
124	`// }`
125	`// // TODO: Add interceptors`
126	`// http.interceptors.response.use(`
127	`// response => response,`
128	`// (error) => {`
129	`// if (error.status === 401) {`
130	`// // Do some magic`
131	`// }`
132	`// return error;`
133	`// });`
134
135
136	`http.get('/api', { results: 2 })`
137	`.then((response) => {`
138	`response.headers`
139	`response.status`
140	`response.text()`
141	`response.json()`
142	`var json = response.json()`
143	`}, (err) => {`
144
145	`// Error`
146	`});`
147
148	`const state = {`
149	`name: 'Marcis',`
150	`num: 0,`
151	`time: 0,`
152	`count: 0,`
153	`color: 'red',`
154	`show: false,`
155	`list: [],`
156	`bench: '-'`
157	`}`
158
159	`const actions = {`
160	`onMount() {`
161	`console.log('Mounted in', performance.now() - perf0, 'ms');`
162
163	`// setInterval(() => {`
164	`// this.num = ('0' + Math.round(Math.random() * 100)).substr(-2);`
165	`// }, 0);`
166	`//`
167	`// setInterval(() => {`
168	`// this.time = ('0' + Math.round(Math.random() * 100)).substr(-2);`
169	`// }, 1000);`
170	`//`
171	`// setInterval(() => {`
172	`// this.color = random_rgba();`
173	`// }, 100);`
174	`},`
175	`toggle(events) {`
176	`console.log(this, events);`
177	`bench('Toggle element', () => {`
178	`this.show = !this.show;`
179	`}, (b) => {`
180	`this.bench = b;`
181	`});`
182	`},`
183	`reverse() {`
184	`bench('Reverse list', () => {`
185	`this.list.reverse();`
186	`}, (b) => {`
187	`this.bench = b;`
188	`});`
189	`},`
190	`create1000() {`
191	`bench('Create 10 rows', () => {`
192	`this.list = buildData(10, this.list.length);`
193	`this.count = 10;`
194	`}, (b) => {`
195	`this.bench = b;`
196	`});`
197	`},`
198	`add1000() {`
199	`bench('Add 1,000 rows', () => {`
200	`this.list = this.list.concat(buildData(1000, this.list.length));`
201	`this.count += 1000;`
202	`}, (b) => {`
203	`this.bench = b;`
204	`});`
205	`},`
206	`add10000() {`
207	`bench('Add 10,000 rows', () => {`
208	`this.list = this.list.concat(buildData(10000, this.list.length));`
209	`this.count += 10000;`
210	`}, (b) => {`
211	`this.bench = b;`
212	`});`
213	`},`
214	`pop() {`
215	`bench('Remove 1 row', () => {`
216	`this.list.pop();`
217	`this.count -= 1;`
218	`}, (b) => {`
219	`this.bench = b;`
220	`});`
221	`},`
222	`update(events) {`
223	`bench('Update every 10th row', () => {`
224	`for (var i = 0; i < this.list.length; i++) {`
225	`if (!((i + 1) % 10)) this.list[i] = { value: this.list[i].value + ' !!!' };`
226	`}`
227	`}, (b) => {`
228	`this.bench = b;`
229	`});`
230	`},`
231	`remove(events) {`
232	`bench('Remove all rows', () => {`
233	`this.list.splice(0, this.list.length);`
234	`this.count = 0;`
235	`}, (b) => {`
236	`this.bench = b;`
237	`});`
238	`},`
239	`swap(events) {`
240	`bench('Swap 5th and 10th rows', () => {`
241	`var x = 4, y = 9;`
242	`this.list[x] = this.list.splice(y, 1, this.list[x])[0];`
243	`}, (b) => {`
244	`this.bench = b;`
245	`});`
246	`}`
247	`}`
248
249	`const reg = component({`
250	`name: 'reg-comp',`
251	`view: function () {`
252	`return r('h1', 'This is ', l(this.name), ' component')`
253	`},`
254	`props: {`
255	`name: String,`
256	`}`
257	`})`
258
259	`register(reg)`
260
261	`const view = function () {`
262	`var name = l(this.name);`
263	`return r('div',`
264	`{`
265	`style: {`
266	`'white-space': 'pre'`
267	`}`
268	`},`
269	`r('reg-comp', { name: name }),`
270	`'\n\n\n',`
271	`r('img', { src: 'https://img.strike.lv/i/avatars/f3/94/5557907d62b2fc97549394f3.png' }),`
272	`r('h4',`
273	`'[dynamic predefined] My name is ',`
274	`name`
275	`),`
276	`r('h4',`
277	`'[dynamic] My name is ',`
278	`l(this.name + ' Bergmanis')`
279	`),`
280	`r('h4',`
281	`'[static] My name is ',`
282	`this.name`
283	`),`
284	`r('input', { type: 'email', autofocus: true, model: l(this.name) }),`
285	`r('hr'),`
286	`cond(`
287	`l(this.show),`
288	`r('div',`
289	`{`
290	`style: {`
291	`'color': l(this.color)`
292	`}`
293	`},`
294	`'\nThis refreshes 60fps:\n',`
295	`l(this.num),`
296	`'\n\n',`
297	`'This refreshes every second:\n',`
298	`l(this.time)`
299	`)`
300	`).else(`
301	`r('div', '[ There is something hidden here ]')`
302	`),`
303	`r('button',`
304	`{ onclick: () => this.toggle('asd') },`
305	`'Toggle Color Test'`
306	`),`
307	`r('hr'),`
308	`r('div',`
309	`r('h3',`
310	`'Item count: ',`
311	`l(this.count),`
312	`),`
313	`r('h3',`
314	`cond(`
315	`l(this.count < 1000),`
316	`'< 1000'`
317	`).cond(`
318	`l(this.count < 2000),`
319	`'< 2000'`
320	`).cond(`
321	`l(this.count < 3000),`
322	`'< 3000'`
323	`).cond(`
324	`l(this.count < 4000),`
325	`'< 4000'`
326	`).else(`
327	`'>= 4000'`
328	`)`
329	`),`
330	`'Benchmark: ',`
331	`l(this.bench),`
332	`' ms',`
333	`r('div',`
334	`r('button',`
335	`{ onclick: this.create1000 },`
336	`'Create 10 rows'`
337	`),`
338	`r('button',`
339	`{ onclick: this.add1000 },`
340	`'Add 1,000 rows'`
341	`),`
342	`r('button',`
343	`{ onclick: this.add10000 },`
344	`'Add 10,000 rows'`
345	`),`
346	`'\n',`
347	`r('button',`
348	`{ onclick: this.pop },`
349	`'Remove 1 row'`
350	`),`
351	`r('button',`
352	`{ onclick: this.reverse },`
353	`'Reverse Test'`
354	`),`
355	`r('button',`
356	`{ onclick: this.swap },`
357	`'Swap Test'`
358	`),`
359	`r('button',`
360	`{ onclick: this.remove },`
361	`'Remove all'`
362	`)`
363	`),`
364	`r('ul',`
365	`'Child node on top\n\n',`
366	`// this.list.loop(item => r('li',`
367	`list(l(this.list), (item) => r('li',`
368	`l(item.id),`
369	`' - ',`
370	`l(item.value)`
371	`)),`
372	`'\nChild node at bottom'`
373	`)`
374	`)`
375	`);`
376	`};`
377
378	`const main = component({`
379	`view: view,`
380	`state: state,`
381	`actions: actions`
382	`});`
383
384	`mount(r('div', new main()), 'app');`
385	`</script>`
386	`</body>`
387
388	`</html>`