Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

Sagiv ben giat sag1v

  • israel
View GitHub Profile
@sag1v
sag1v / mediator.js
Last active Apr 3, 2019
Just a poc of the mediator pattern
View mediator.js
// with class pattern
class Client {
constructor(name) {
this.name = name;
this.mediator = null;
}
send(message, to) {
if (!this.mediator) {
throw ('you need to register to a mediator first')
View createStore with no slice.js
function createStore(reducer, initialState) {
var currentReducer = reducer;
var currentState = initialState;
var listeners = [];
var isDispatching = false;
function getState() {
return currentState;
}
@sag1v
sag1v / typeCheck.js
Last active Mar 14, 2019
A run-time type checker with proxies
View typeCheck.js
function typeCheck(obj, definition) {
return new Proxy(obj, {
set(obj, key, value) {
if (key in definition && typeof value !== definition[key]) {
throw new TypeError(`Invalid type of ${key} '${typeof value}'. expected to be '${definition[key]}'`)
}
return Reflect.set(obj, key, value);
}
});
@sag1v
sag1v / ReactCounter.js
Last active Nov 17, 2018
react integration with other applications article
View ReactCounter.js
import React, {PureComponent} from 'react';
class ReactCounter extends PureComponent {
// create a ref so we can pass the element to mount and unmount
counterRef = React.createRef();
componentDidMount() {
// initial render with props
window.ReactCounter.mount(this.props, this.counterRef.current);
@sag1v
sag1v / main-app index.html
Last active Nov 17, 2018
react integration with other applications article
View main-app index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<title>React App</title>
@sag1v
sag1v / app with counter-app container
Created Nov 17, 2018
react integration with other applications article
View app with counter-app container
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<div id="counter-app"></div>
<p>
This is the main App.
@sag1v
sag1v / app passing props to mount
Created Nov 17, 2018
react integration with other applications article
View app passing props to mount
componentDidUpdate(prevProps, prevState) {
const { showCounter } = this.state;
if (prevState.showCounter !== showCounter) {
if(showCounter){
window.ReactCounter.mount({title: 'Whaaa! cool'});
} else{
window.ReactCounter.unmount();
}
}
}
@sag1v
sag1v / counter start code
Last active Nov 17, 2018
react integration with other applications article
View counter start code
class Counter extends Component {
state = { count: this.props.initialCount || 0 }
updateCount = val => () => {
const { onCountUpdate } = this.props;
this.setState(state => {
const nextCount = state.count + val;
return { count: nextCount }
},
@sag1v
sag1v / counter index passing props
Created Nov 17, 2018
react integration with other applications article
View counter index passing props
window.ReactCounter = {
mount: (props) => {
const el = document.getElementById('counter-app');
ReactDOM.render(<Counter {...props} />, el);
},
unmount: () => {
const el = document.getElementById('counter-app');
ReactDOM.unmountComponentAtNode(el);
}
}
@sag1v
sag1v / counter index passing the container
Created Nov 17, 2018
react integration with other applications article
View counter index passing the container
window.ReactCounter = {
mount: (props, container) => {
ReactDOM.render(<Counter {...props} />, container);
},
unmount: (container) => {
ReactDOM.unmountComponentAtNode(container);
}
}
You can’t perform that action at this time.