Marcos de Andrade marcosmapf

Information Systems Graduate who fell for Data Analysis and Front-end development. I also quite enjoy back-end architecture,

marcosmapf / app-umd-bootstrap.tsx

Last active October 24, 2025 21:12

UMD App's startup file

	import React, { lazy, Suspense } from 'react'
	import { render } from 'react-dom'

	import { initRequestConfiguration } from 'utils/request'
	import {
	createShadowDom,
	initializeTagManager,
	setLocales,
	setToken
	} from 'startup/utils'

marcosmapf / federatedApp.ts

Created August 10, 2022 14:34

Util module that helps handling load and registration of Module Federated containers

	type FederatedAppRender = (props?: any) => void

	export interface FederatedAppList {
	[key: string]: () => Promise<FederatedAppRender>
	}
	export interface FederatedApp {
	render?: FederatedAppRender
	root: HTMLElement
	}

marcosmapf / app-mf-bootstrap.tsx

Last active October 24, 2025 21:16

Module Federated app's startup file

	import React, { lazy, Suspense, useEffect } from 'react'
	import { render } from 'react-dom'

	import { initRequestConfiguration } from 'utils/request'
	import {
	initializeTagManager,
	setLocales,
	setToken
	} from 'startup/utils'
	import { initRequestConfiguration } from 'utils/request'

marcosmapf / index.js

Created August 10, 2022 14:25

UMD / Module Federated App's entrypoint file

	/*
	* This file is imported as the entrypoint for the Module Federation or UMD bundle.
	* Exporting an async function as the project's entrypoint enables Module Federation Plugin to resolve the dependency tree
	* before the dependencies are actually used, which enables dependency sharing between modules
	*/

	export default props => {
	import('./bootstrap').then(({ default: bootstrap }) => bootstrap(props))
	}

marcosmapf / webpack.production.js

Created August 10, 2022 14:20

Webpack configuration that enables App usage inside Shadow Dom and as a Module Federation

	/*
	* Webpack bundle configuration that enables project export as UMD library and Module Federated container
	*
	* Custom styleTagTransform script is defined at https://gist.github.com/marcosmapf/904986dde911148e39a17a59dc3dd132
	* The 'from' option attribute is used inside styleTagTransform as a reference to the project's root element
	*/

	const { join } = require('path')
	const { container, EnvironmentPlugin } = require('webpack')

marcosmapf / webpackStyleTagTransformPlugin.js

Created August 10, 2022 14:08

Modification of Webpack style-loader module bundler that enable where to insert the css styles

	/*
	* Alternative version of StyleTagTransform option of Webpack's style-loader module bundler that enables
	* bundled project to insert imported styles on different container elements conditionally.
	* This enables usage of Module Federation Apps inside ShadowDom containers.
	*
	* Users should provide an "attributes" option on the project's Webpack style-loader configuration that contains
	* the element's reference on the window object
	*/

marcosmapf / fetchFromIterable.js

Last active January 25, 2020 07:22

Asynchronously fetch data from iterable structure

	/*
	Receives an iterable structure containing { target, options } objects and calls fetch on each
	Returns a Generator of Promises
	*/
	export default function* fetchFromIterable(data) {
	for (const { target, options = {} } of data) {
	yield fetch(target, options)
	}
	}

marcosmapf / reducer.js

Last active January 25, 2020 07:14

Receives any iterable structure and accumulates the result of the function calls

	export default const reduce = (iterable, reducer, initial) => {
	let acc = initial
	for (item of iterable) {
	acc = reducer(acc, item)
	}
	return acc
	}

marcosmapf / reactHooksCheatSheet.jsx

Last active June 2, 2019 18:31

	import React, { useState, useEffect } from 'react';

	const UserCardExample = props => {
	const [user, setUser] = useState("");
	const [fetching, setFetching] = useState(true);

	const fetchRandomUser = async _ =>
	await fetch("https://randomuser.me/api")
	.then(response => response.json())
	.then(object => object.results[0]);

marcosmapf / pusherNotification.txt

Last active June 2, 2019 05:04

Example on a Pusher server sending a notification to a client

	const Pusher = require("pusher");
	const Encryptor = require("simple-encryptor");
	const secrets = require("./secrets");
	const pipe = require("./utils/pipe");

	/*
	Example of setup and usage of Pusher. Original code made by @mpjme
	pipe.js is a vanilla javascript implementation of the pipe function:
	const pipe = (...funcList) => input => funcList.reduce((acc, func) => func(acc), input);
	module.exports = pipe;