rich's notebooks

  • ways to test Svelte components - /rich/test-svelte-components
    Last edited 6 years ago
    const svelte = require('svelte'); const assert = require('assert'); const { JSDOM } = require('jsdom'); const SCRIPT = `script`; // otherwise RunKit breaks // testing non-DOM stuff const C1 = svelte.create(` <script> export default { computed: { name: ({ firstname, lastname }) => firstname + ' ' + lastname } }; </script> `); const c1 = new C1({ data: { firstname: 'Kent', lastname: 'Dodds' } }); assert.equal(c1.get().name, 'Kent Dodds'); // testing client-side rendering const C2 = svelte.create(` <h1>Hello {name}!</h1> `); const { window } = new JSDOM(); global.document = window.document; const c2 = new C2({ target: document.body, data: { name: 'Kent' } }); assert.equal(document.body.innerHTML, '<h1>Hello Kent!</h1>'); // testing server-side rendering const ServerSideComponent = svelte.create(` <h1>Hello {name}!</h1> `, { generate: 'ssr' }); const { html } = ServerSideComponent.render({ name: 'Rich' }); assert.equal(html, '<h1>Hello Rich!</h1>'); 'ok';
  • ways to test Svelte components - /rich/ways-to-test-svelte-components
    Last edited 6 years ago
    const svelte = require('svelte'); const assert = require('assert'); const { JSDOM } = require('jsdom'); const SCRIPT = `script`; // otherwise RunKit breaks // testing non-DOM stuff const C1 = svelte.create(` <script> export default { computed: { name: (firstname, lastname) => firstname + ' ' + lastname } }; </script> `); const c1 = new C1({ data: { firstname: 'Adam', lastname: 'Rackis' } }); assert.equal(c1.get('name'), 'Adam Rackis'); // testing client-side rendering const C2 = svelte.create(` <h1>Hello {name}!</h1> `); const { window } = new JSDOM(); global.document = window.document; const c2 = new C2({ target: document.body, data: { name: 'Adam' } }); assert.equal(document.body.innerHTML, '<h1>Hello Adam!</h1>'); // testing server-side rendering const ServerSideComponent = svelte.create(` <h1>Hello {name}!</h1> `, { generate: 'ssr' }); const { html } = ServerSideComponent.render({ name: 'Rich' }); assert.equal(html, '<h1>Hello Rich!</h1>'); 'ok';
  • svelte ssr demo - /rich/svelte-ssr-demo
    Last edited 6 years ago
    const svelte = require('svelte'); const source = `<h1>Hello {{name}}!</h1>`; const compiled = svelte.compile(source, { generate: 'ssr' }); compiled.code;
  • devalue vs lave - /rich/devalue-vs-lave
    Last edited 6 years ago
    const devalue = require('devalue'); const lave = require('lave'); const { generate } = require('escodegen'); const arr = []; for (let i = 0; i < 100; i += 1) { arr.push({ foo: 1, bar: 2, baz: 3 }); } function bench(fn) { const start = Date.now(); for (let i = 0; i < 1e3; i += 1) fn(); return Date.now() - start; } [ bench(() => devalue(arr)), bench(() => lave(arr, { generate })), bench(() => devalue(arr)), bench(() => lave(arr, { generate })), bench(() => devalue(arr)), bench(() => lave(arr, { generate })) ];
  • Bublé with reservedProperties - /rich/buble-with-reservedproperties
    Last edited 6 years ago
    const buble = require('buble'); const code = ` const slots = { default: 'the key is quoted' }; console.log(slots.default); `; buble.transform(code, { transforms: { reservedProperties: true } });
  • golden-fleece - /rich/golden-fleece-scratchpad
    Last edited 6 years ago
    const fleece = require('golden-fleece'); const str = `{ string: 'hello', number: 1, array: [ 'a', 'b', 'c' ], arrayWithoutSpaces: ['d', 'e', 'f'], object: { foo: 99, "unnecessarilyQuotedProperty": null }, largerObject: { // sometimes you need several lines // for readability. Also, comments! one: 'thing', two: 'thing', red: 'thing', blue: 'thing' } }`; const object = fleece.evaluate(str); object.string = 'goodbye'; object.number = 42; object.array = ['p', 'q', 'r']; object.arrayWithoutSpaces = ['x', 'y', 'z']; object.largerObject = { three: 'potato', four: 'potato', one: 'potato', two: 'potato' }; fleece.patch(str, object);