How typesafe can a remote be with Typescript?

[echarles]

Update from @ScriptedAlchemy - https://www.npmjs.com/package/@module-federation/typescript has been released

I can see a disadvantage using remotes libraries vs the classical libraries where e.g. typescript can be used to enforce strong types. The current typescript example defines a generic app2/Button which is similar defining a any type.

module-federation-examples/typescript/app1/src/app2.d.ts

Lines 3 to 7 in cf2d070

	declare module "app2/Button" {
	const Button: React.ComponentType;
	export default Button;
	}

As the remote var does not have type, I don't see a way to benefit from the app2 types in app1. Any idea on this?

[echarles]

@ScriptedAlchemy

[saulshanabrook]

I believe, in our case, we should be able to be fine with not having type checking for remote libraries. We can use shared libraries for extension authors import core libraries, so they don't need to be remote and dynamically imported.

[echarles]

I have tried a hacky way to benefit from type-safety importing the definition of the remote project (app2, here widgets) in the host project (app1). As shown on the below image, lazy returns the correct type and non acceptable props are underlined in red. I guess a solution would be to publish the types separately and a 3rd party could depend on those types.

[ScriptedAlchemy]

Or have a monorepo of types

[maraisr]

What I have done is use node to generate a .d.ts file, that are loaded by our global.d.ts file.

So each Remote outputs a .d.ts file that go declare module "dlaWidgets/Widets" {}, with using the ts.createProgram you can tap into the typeChecker stuff that i use to print its public api. Kinda like getting tsc to ouput definition files, but instead spit them into a single file.

Then each of my hosts import this .d.ts file, which I have registered in a global.d.ts, that all of my projectReferenced monorepo apps include.

So there is a small disconnect between a webpack config, and the types. But any exposed things, are automagically available with types in my entire app. So ts might say its a valid import, but just need to actially configure it with webpack also.

Working on open sourcing this generative thing - just gotta make sure it works in all use cases.

[echarles]

@maraisr your approach sounds very interesting. Keep us posted if you open source it.

[ScriptedAlchemy]

ill raise this with Microsoft - they will have to support federation since they are going to be using it heavily

[echarles]

ill raise this with Microsoft - they will have to support federation since they are going to be using it heavily

Awesome!

[zhangwilling]

mono repo is not recomended when our app is very large，independent repo is better.

💡We can watch and output independent repo's d.ts, then start a server which can make d.ts could be downloaded. When other apps need d.ts，just download it to your project from local server.

[ckken]

same issue and suggest like deno remote url type.d.ts