Skip to content

Instantly share code, notes, and snippets.

🌲
lost in the woods

Tim Branyen tbranyen

🌲
lost in the woods
Block or report user

Report or block tbranyen

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@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';
@tbranyen
tbranyen / cjs.js
Last active Aug 30, 2018
CJS to ESM
View cjs.js
const something = require('something');
const { somethingElse } = require('something-else');
const { exports } = module;
exports.somethingElse = somethingElse;
module.exports = something;
Object.assign(module.exports, exports);
@tbranyen
tbranyen / webapp-node-api.js
Last active Aug 20, 2018
WebApp Node API Example (Experimental JS Bundler) w/ Virtual Modules
View webapp-node-api.js
const { webapp, register } = require('webapp');
async function main() {
const input = register('./input.js')`
const msg = 'Hello world!';
console.log(msg);
`;
const { source } = await webapp({
input,
View promise-getters.md

Functions rescue us in this case because functions are lazy. But now, we can’t chain these things with .then() anymore.

function lazyPromise() {
  return new Promise(resolve => setTimeout(resolve, 1000))
    .then(() => console.log('Chain off all'));
}
// The only location you can't chain off is the function

// Chains just fine this way
You can’t perform that action at this time.