Skip to content

Instantly share code, notes, and snippets.

@goldhand
goldhand / resolveModuleFromLocations.js
Created January 1, 2019 02:00
Resolves a module given multiple locations.
import * as R from 'ramda';
const resolveModuleFromLocation = R.curry((location, next) => {
try {
return require.resolve(location) && require(location);
} catch (err) {
if (next && err && err.code === 'MODULE_NOT_FOUND') {
return next();
}
}
const accessCors = res => {
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', '*');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
@goldhand
goldhand / SlotChildren.jsx
Created October 20, 2018 01:57
Render React components and modules as web components
import * as React from 'react';
import {hot} from "react-hot-loader";
const slotChildren = (UnwrappedComponent, options = {}) => {
// enable hot reloading in each react tree
const Component = hot(options.module || module)(UnwrappedComponent);
const slotName = `slot-${options.name}`;
class SlotWrapper extends React.Component {
constructor(props) {
@goldhand
goldhand / Greet.jsx
Created October 19, 2018 00:25
React App into Web Component (proof of concept)
import * as React from 'react';
import toWebComponent from './WebComponent';
const styles = {
greeting: {
color: 'green',
},
user: {
color: 'blue',
}
* {
border: solid lightgray 1px !important;
}
/* blocks use solid border */
section, aside, nav {
border: solid green 1px !important;
}
div {
@goldhand
goldhand / react-snippets.cson
Created June 8, 2018 20:25
React snippets for Atom
'.source.js.jsx':
'ReactJS Component single unit test':
'prefix': 'comput'
'body': """
it('$1', () => {
const {output} = setup();
const expected = $2;
const actual = $3;
expect(actual).toEqual(expected);
});
@goldhand
goldhand / Break.jsx
Created March 2, 2018 19:09
Line break react component
/**
* @module {Function} components/Break
* @flow
*/
import * as React from 'react';
import {css} from 'emotion';
const style = css`
margin: 0;
padding: 0;
@goldhand
goldhand / DateDisplay.jsx
Created March 2, 2018 19:08
Display a Date object react component
/**
* Create a uniform appearance for date and time displays
* @module {Function} components/DateDisplay
* @flow
*/
import * as React from 'react';
import typeOf from 'ramda/src/type';
const createDateDisplay = (getDisplay: (Date) => string, name: string) => {
// gets the prototype function of an object so it can be called against a value
const protoOf = curry((Obj, method, value, ...args) =>
Obj.prototype[method].call(value, ...args));
/**
* Converts a Date or TimeStamp into a human readable format
* @module {Function} utils/displayDate
* @flow
*/
import memoizeWith from 'ramda/src/memoizeWith';
import identity from 'ramda/src/identity';
import pipe from 'ramda/src/pipe';
import ifElse from 'ramda/src/ifElse';
import useWith from 'ramda/src/useWith';