Bruno Silva brunos3d

How to declare types of federated components without the need to re-write the types

Given that you have the following component (ComponentA) exported from remote (remote-a) in your Webpack config:

// ...
new ModuleFederationPlugin(
  {
    name: 'remoteA',
 exposes: {

This gist demonstrate how to enable syntax highlight on vscode for nx template files.

The Nx template files uses EJS syntax

To enable the syntax hightlight for EJS just install this extension and add the config below to your vscode settings.json file

Addtionally you can add *__tmpl__ your .prettierignore file

	// this file is just to set the name of the gist, use just one of the functions below
	export * as withLuxon from './withLuxon'
	export * as withMoment from './withMoment'
	export * as withDateFns from './withDateFns'

	export function diffArrayByKey<T, K1 extends keyof T, K2 extends T[K1]>(
	one: T[],
	key: K1,
	two: K2[]
	) {
	if (!Array.isArray(two)) {
	return one.slice();
	}

	const tlen = two.length;


	/*
	* Stripe WebGl Gradient Animation
	* All Credits to Stripe.com
	* ScrollObserver functionality to disable animation when not scrolled into view has been disabled and
	* commented out for now.
	* https://kevinhufnagl.com
	*/

	declare module 'remoteA/componentA' {
	function Component(props: unknown): JSX.Element;
	export default Component;
	}

	declare module 'remoteB/componentB' {
	export type ComponentProps = {
	foo: boolean;
	bar?: () => void;
	};

	import { ComponentProps, JSXElementConstructor } from 'react';

	export const provider = <C extends JSXElementConstructor<unknown>>(
	provider: C,
	props: Partial<ComponentProps<C>> = {}
	) => [provider, props];

	export const ProviderComposer = ({ providers, children }) => {
	for (let i = providers.length - 1; i >= 0; --i) {
	const [Provider, props] = providers[i];

	import App, { AppProps, AppContext } from 'next/app';

	function MyApp({ Component, pageProps }: AppProps) {
	return (
	<Component {...pageProps} />
	);
	}

	MyApp.getInitialProps = async (context: AppContext) => {
	return await App.getInitialProps(context); // Retrieves page's `getInitialProps`

	#!/usr/bin/env zx
	/** @type {import('zx/globals')} */