Skip to content

Instantly share code, notes, and snippets.

Avatar

Tim Branyen tbranyen

View GitHub Profile
@tbranyen
tbranyen / test.html
Created Apr 28, 2022
Test page for using workers with diffHTML
View test.html
<!doctype html>
<html lang="en">
<head>
<title>Worker example</title>
</head>
<body>
<main id="mount"></main>
<script src="http://localhost:8080/packages/diffhtml/dist/diffhtml.min.js"></script>
<script src="./packages/diffhtml-middleware-worker/dist/worker.js"></script>
View visible-proxy.js
function makeVisibleProxy() {
const obj = {};
// Own keys must be known ahead of time for this to work
const keys = ['key1', 'key2'];
// Map each known key to the obj, but make the getter "lazy"
keys.forEach(keyName => {
const desc = {
configurable: true,
View game-of-life.js
const grid = buildGrid(20, 50, [
(10 * 50) + 20,
(10 * 50) + 21,
(10 * 50) + 22,
(10 * 50) + 23,
(10 * 50) + 24,
(10 * 50) + 25,
(10 * 50) + 26,
(10 * 50) + 27,
(10 * 50) + 28,
@tbranyen
tbranyen / diffhtml.js
Last active Apr 24, 2019
diffHTML "Calculator" Experiment
View diffhtml.js
import { innerHTML, html } from 'https://unpkg.com/diffhtml/dist/es';
let a = 1;
let b = 2;
const updateA = ({ target }) => (a = Number(target.value), render());
const updateB = ({ target }) => (b = Number(target.value), render());
function render() {
innerHTML(document.body, html`
View awhat.js
function makePromise() {
return new Promise(() => {});
}
async function main() {
console.log('start');
await makePromise();
console.log('end');
}
@tbranyen
tbranyen / console-react.jsx
Created Jan 29, 2019
A Console component for React
View console-react.jsx
const Console = props => {
for (let method in console) {
if (method in props) {
console[method](props[method]);
}
}
return <></>;
};
@tbranyen
tbranyen / hook-class.js
Created Dec 7, 2018
React Hooks in a Class
View hook-class.js
import { useState, Component } from 'react';
class MyComponent extends Component {
render() {
const [ count, setCount ] = this.state;
return (
<div>{count}</div>
);
}
@tbranyen
tbranyen / webapp.config.json
Created Oct 23, 2018
Build out ESM, CJS, UMD, Script, UMD Minified, and Script Minified
View webapp.config.json
{
"builds": [{
"input": "lib/**/*.js",
"output": "dist/esm",
"outputType": "module",
"debug": true
}, {
"input": "lib/**/*.js",
"output": "dist/cjs",
"outputType": "commonjs",
@tbranyen
tbranyen / events.js
Last active Nov 2, 2018
Rethinking events using ES6 (https://tbranyen.com/events)
View events.js
const bus = {};
const get = e => (bus[e] = bus[e] || new Set());
export const listeners = new Proxy(bus, { get });
export const emit = (e, ...args) => listeners[e].forEach(fn => fn(...args));
@tbranyen
tbranyen / cjs-treeshake.js
Last active Sep 27, 2018
CommonJS Tree Shaking Test Case
View cjs-treeshake.js
it('will treekshake a static named import', async () => {
const input = register('./a')`
const { a } = require('./b');
console.log(a);
`;
register('./b')`
function b() {}
exports.a = 'hello world';