Sagiv ben giat sag1v

🎯

Focusing

sag1v / counter index passing the container

Created November 17, 2018 17:23

react integration with other applications article

	window.ReactCounter = {
	mount: (props, container) => {
	ReactDOM.render(<Counter {...props} />, container);
	},
	unmount: (container) => {
	ReactDOM.unmountComponentAtNode(container);
	}
	}

sag1v / counter index passing props

Created November 17, 2018 17:26

react integration with other applications article

	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 / counter start code

Last active November 17, 2018 18:57

react integration with other applications article

	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 / app passing props to mount

Created November 17, 2018 17:52

react integration with other applications article

	componentDidUpdate(prevProps, prevState) {
	const { showCounter } = this.state;
	if (prevState.showCounter !== showCounter) {
	if(showCounter){
	window.ReactCounter.mount({title: 'Whaaa! cool'});
	} else{
	window.ReactCounter.unmount();
	}
	}
	}

sag1v / app with counter-app container

Created November 17, 2018 17:54

react integration with other applications article

	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 / main-app index.html

Last active November 17, 2018 19:24

react integration with other applications article

	<!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 / ReactCounter.js

Last active November 17, 2018 19:52

react integration with other applications article

	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 / typeCheck.js

Last active July 4, 2019 13:53

A run-time type checker with proxies

	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 / createStore with no slice.js

Created March 31, 2019 17:57

	function createStore(reducer, initialState) {
	var currentReducer = reducer;
	var currentState = initialState;
	var listeners = [];
	var isDispatching = false;

	function getState() {
	return currentState;
	}

sag1v / mediator.js

Last active April 3, 2019 10:59

Just a poc of the mediator pattern

	// 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')