🤠

Luís Takahashi luistak

🤠

luistak / worker-container.js

Created January 27, 2021 15:50

luistak / worker.js

Created January 27, 2021 15:47

	let said = [];

	export function say(message) {
	console.log({ message, said });

	said.push(message)

	// This postMessage communicates with everyone listening to this worker
	postMessage(message);
	}

luistak / worker-mf2.js

Created January 27, 2021 15:47

	const { worky } = window;

	function App() {
	const handleSubmit = (e) => {
	e.preventDefault();

	const { target: form } = e;
	const input = form?.elements?.something;

	worky.say(input.value);

luistak / worker-mf1.js

Created January 27, 2021 15:46

	const { worky } = window;

	function App() {
	const [messages, setMessages] = useState([]);

	const handleNewMessage = (message) => {
	if (message.data.type) {
	return;
	}

luistak / windowed-mf2.js

Last active January 27, 2021 15:56

	import { Observable } from 'windowed-observable';

	const observable = new Observable('messages');

	function App() {
	const handleSubmit = (e) => {
	e.preventDefault();

	const { target: form } = e;
	const input = form?.elements?.something;

luistak / windowed-mf1.js

Created January 27, 2021 15:45


	import { Observable } from 'windowed-observable';

	const observable = new Observable('messages');

	function App() {
	const [messages, setMessages] = useState([]);

	const handleNewMessage = (newMessage) => {
	setMessages((currentMessages) => currentMessages.concat(newMessage));

luistak / windowed-common-usage.js

Created January 27, 2021 15:45


	import { Observable } from 'windowed-observable';

	// Define a specific context namespace
	const observable = new Observable('cart-items');

	const observer = (item) => console.log(item);

	// Add an observer subscribing to new events on this observable
	observable.subscribe(observer)

luistak / props-mf2.js

Created January 27, 2021 15:45

	function App({ onNewMessage }) {
	const handleSubmit = (e) => {
	e.preventDefault();

	const { target: form } = e;
	const input = form?.elements?.something;

	onNewMessage(input.value);
	form.reset();
	}

luistak / props-mf1.js

Created January 27, 2021 15:44

	function App({ messages = [] }) {
	return (
	<div className="MF">
	<h3>Microfrontend 1️⃣</h3>
	<p>New messages will be displayed below 👇</p>
	<div className="MF__messages">
	{messages.map((something, i) => <p key={something + i}>{something}</p>)}
	</div>
	</div>
	);

luistak / props-container.js

Created January 27, 2021 15:44

	const App = ({ microfrontends }) => {
	const [messages, setMessages] = useState([]);

	const handleNewMessage = (message) => {
	setMessages((currentMessages) => currentMessages.concat(message));
	};

	return (
	<main className="App">
	<div className="App__header">