Skip to content

Instantly share code, notes, and snippets.

@IanColdwater
IanColdwater / twittermute.txt
Last active April 22, 2024 17:26
Here are some terms to mute on Twitter to clean your timeline up a bit.
Mute these words in your settings here: https://twitter.com/settings/muted_keywords
ActivityTweet
generic_activity_highlights
generic_activity_momentsbreaking
RankedOrganicTweet
suggest_activity
suggest_activity_feed
suggest_activity_highlights
suggest_activity_tweet
import React from "react";
import { Link } from "react-router-dom";
export function createResource(getPromise) {
let cache = {};
let inflight = {};
let errors = {};
function load(key) {
inflight[key] = getPromise(key)
const {useCallback, useEffect, useReducer, useRef} = require('react');
let effectCapture = null;
exports.useReducerWithEmitEffect = function(reducer, initialArg, init) {
let updateCounter = useRef(0);
let wrappedReducer = useCallback(function(oldWrappedState, action) {
effectCapture = [];
try {
let newState = reducer(oldWrappedState.state, action.action);
@tkh44
tkh44 / html.js
Last active September 22, 2021 17:29
Simple SSR template library with scoped styles
const hash = require('@emotion/hash')
const weakMemoize = require('@emotion/weak-memoize')
export function html (strings, ...interpolations) {
return strings.reduce(
(final, str, i) =>
final +
str +
(interpolations[i] === undefined
? ''
@bvaughn
bvaughn / create-subscriber-component-poc.js
Last active September 30, 2018 09:55
create-subscriber-component proof of concept
type SubscribableConfig = {
// Maps property names of subscribable data sources (e.g. 'someObservable'),
// To state names for subscribed values (e.g. 'someValue').
subscribablePropertiesMap: {[subscribableProperty: string]: string},
// Synchronously get data for a given subscribable property.
// It is okay to return null if the subscribable does not support sync value reading.
getDataFor: (subscribable: any, propertyName: string) => any,
// Subscribe to a given subscribable.
@kitten
kitten / reactiveconf-sc-cfp.md
Last active November 17, 2020 15:06
ReactiveConf 2017 Lightning Talk CFP: With styled-components into the future

styled-components Logo

With styled-components into the future

Preprocessing is dead, long live preprocessing!


This is a CFP for ReactiveConf 2017's open call for Lightning talks. If you'd like to see this talk become a reality, please ⭐ star this gist. #ReactiveConf

tracked npm

@tracked is a decorator for Preact that makes working with state values no different than properties on your component instance.

It's one 300 byte function that creates a getter/setter alias into state/setState() for a given key, with an optional initial value. The "magic" here is simply that it works as a property decorator rather than a function, so it appears to integrate directly into the language.

tracked has no dependencies and works with any component implementation that uses this.state and this.setState().

Installation

// In v2/3 you did this:
import ReactDOM from 'react-dom'
import { Router, browserHistory, Route } from 'react-router'
ReactDOM.render(
<Router>
<Route path="/about" component={About}/>
<Route path="/:username" component={User}/>
</Router>
)
@developit
developit / preact-vdom-viewer.js
Last active July 11, 2017 15:42
preact vdom viewer
/** Use the built-in document viewer in devtools to inspect your VDOM.
* Usage in console:
* viewComponentTree(document.body)
*/
function viewComponentTree(node) {
let doc = new DOMParser().parseFromString('', 'application/xml');
function visitor(dom) {
let el, c;
if (dom instanceof Node) {
el = dom.cloneNode();
@acdlite
acdlite / app.js
Last active January 20, 2023 08:23
Quick and dirty code splitting with React Router v4
// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
return class AsyncComponent extends React.Component {
static Component = null;
state = { Component: AsyncComponent.Component };
componentWillMount() {
if (!this.state.Component) {
getComponent().then(Component => {