Skip to content

Instantly share code, notes, and snippets.

View LucaColonnello's full-sized avatar
👋
Come say hello on Twitter!

Luca Colonnello LucaColonnello

👋
Come say hello on Twitter!
View GitHub Profile
@LucaColonnello
LucaColonnello / mocha-snapshot-test.js
Created February 6, 2018 16:10
Mocha snapshot test
const { writeFileSync } = require('fs');
const prettyFormat = require('pretty-format');
const reactTestPlugin = require('pretty-format/plugins/ReactTestComponent');
const reactElementPlugin = require('pretty-format/plugins/ReactElement');
let globalForceUpdate = false;
if (process.argv.includes('--snapshots-update')) {
globalForceUpdate = true;
}
@LucaColonnello
LucaColonnello / 1. v-dom.js
Last active April 14, 2020 09:57
Virtual DOM lite implementation
/** @jsx h */
// refs
// https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060
// https://medium.com/@deathmood/write-your-virtual-dom-2-props-events-a957608f5c76
// test: https://jsfiddle.net/Luca_Colonnello/Lzjy5a67/1/
// comparison:
// current - https://jsfiddle.net/Luca_Colonnello/5xebu97u/3/
// vidom - https://jsfiddle.net/Luca_Colonnello/dp9cwn37/2/
@LucaColonnello
LucaColonnello / Example of render engine.jsx
Created December 2, 2016 09:13
Example of render engine
const componentMap = {
TemplateX: ({ children }) => (<div>{children}</div>),
Header: ({ text }) => (<h1>{text}</h1>),
HeroBanner: ({ imgUrl, text }) => (
<section style={{ backgroundImage: `url(${imageUrl}) center center` }}>
<h2>{text}</h2>
</section>
),
Markdown: ({ content }) => (<ReactMarkdown content={content} />),
Carousel: ({ children }) => (<ReactSlick>{children}</ReactSlick>)
@LucaColonnello
LucaColonnello / AContainer.jsx
Created August 5, 2016 15:39
withRender HoC
import React, { Component } from 'react';
import { compose } from 'redux';
import { connect } from 'react-redux';
// supposed to receive a class and return a new function (curryed) that
// if called add a render function to the received class,
// rendering the received component passing down all the props
import { withRender } from './utils';
// container class with event handler and action creator dispatch
@LucaColonnello
LucaColonnello / bindNestedActionCreators.js
Last active May 23, 2016 08:58
Redux bind nested action creators
import { bindActionCreator } from 'redux';
export default function bindNestedActionCreators(actions, dispatch) {
if (typeof actions !== 'function' && (typeof actions !== 'object' || actions === null)) return false;
let dispatchedActions;
if (typeof actions === 'object') {
dispatchedActions = {};
@LucaColonnello
LucaColonnello / Sort.jsx
Created March 9, 2016 21:30 — forked from gianmarcotoso/Sort.jsx
React Sort HoC
import React from 'react';
import { Component } from 'react';
let Sort = Sortable => class extends Component {
constructor(props) {
super(props);
this.state = {
items: []
}
@LucaColonnello
LucaColonnello / Filter.jsx
Created March 9, 2016 21:29 — forked from gianmarcotoso/Filter.jsx
React Filter HoC
import React from 'react';
import { Component } from 'react';
let Filter = Filterable => class extends Component {
constructor(props) {
super(props);
this.state = {
items: props.items
};
@LucaColonnello
LucaColonnello / react-18next-with-hot-replacement.js
Created February 17, 2016 17:27
react-i18next with hot replacement
import i18next from 'i18next'
const resources = require("i18next-resource-store-loader!../assets/i18n/index.js");
i18next
.init({
lng: 'en', // set dynamically on build
fallbackLng: 'en',
resources: resources,
debug: true,
@LucaColonnello
LucaColonnello / pipe-tag-es6-tpl-string.js
Created January 20, 2016 08:49
String leading whitespaces
// Strip margin (Leading whitespaces)
function pipeFactory( separator = ' ' ){
return (s, ...args) => {
return s
.map(( v, i ) => v + ( args[i] || '') )
.join('')
.replace(/(\r\n|\r|\n)([\s]+)?\|/g, separator)
;
};
@LucaColonnello
LucaColonnello / # Redux Async Actions Utils
Last active January 16, 2016 11:05
Redux Async Actions Utils
Lib purpose