webpack-federation-types-plugin 1.0.0

package/FederationTypesPlugin.js

@@ -0,0 +1,173 @@
+const validate = require("schema-utils")
+const ts = require("typescript")
+const axios = require("axios")
+const fs = require("fs-extra")
+const path = require("path")
+
+const PLUGIN_NAME = "FederationTypesPlugin"
+const MF_TYPES_DIR = "federation-types"
+const DECLARATION_FILE_EXT = ".d.ts"
+
+const tscOptions = {
+  allowJs: true,
+  declaration: true,
+  emitDeclarationOnly: true,
+}
+
+const optionsSchema = {
+  type: "object",
+  properties: {
+    ignoreRemotes: {
+      type: "array",
+    },
+    exposeTypes: {
+      type: "boolean",
+    },
+    importTypes: {
+      type: "boolean",
+    },
+  },
+}
+
+const getAssetData = (content) => {
+  const fileBuffer = Buffer.from(content, "utf-8")
+  const fileData = {
+    source: () => fileBuffer,
+    size: () => fileBuffer.length,
+  }
+  return fileData
+}
+
+class FederationTypesPlugin {
+  constructor(options) {
+    validate(optionsSchema, options)
+    this._options = options
+  }
+
+  /**
+   * @param {import("webpack").Compiler} compiler
+   */
+  apply(compiler) {
+    const federationPlugin =
+      compiler.options.plugins && compiler.options.plugins.find((plugin) => plugin.constructor.name === "ModuleFederationPlugin")
+    if (!federationPlugin) throw new Error("No ModuleFederationPlugin found.")
+    const logger = compiler.getInfrastructureLogger(PLUGIN_NAME)
+
+    const exposes = Object.fromEntries(Object.entries(federationPlugin._options.exposes || {}).map(([k, v]) => [k.replace("./", ""), v]))
+
+    const modulesPathsMap = Object.fromEntries(
+      Object.entries(exposes).map(([name, currentPath]) => {
+        const absPath = path.resolve(process.cwd(), currentPath)
+        const extension = path.extname(currentPath) ? "" : fs.existsSync(absPath + ".jsx") ? ".jsx" : ".js"
+        return [name, path.join(process.cwd(), currentPath + extension).replace(/\\/g, "/")]
+      })
+    )
+
+    const declarationFileToExposeNameMap = Object.entries(modulesPathsMap).reduce(
+      (result, [key, val]) => Object.assign(result, {[val.replace(/\.jsx?$/, DECLARATION_FILE_EXT)]: key}),
+      {}
+    )
+
+    const modulesPaths = Object.values(modulesPathsMap)
+
+    const createTypesDefinitions = (compilation) => {
+      const host = ts.createCompilerHost(tscOptions)
+
+      const createdFiles = {}
+      host.writeFile = (fileName, fileContent) => {
+        const isExposedModules = modulesPaths.some((current) => current.startsWith(fileName.replace(/\.d\.ts/, "")))
+        if (isExposedModules) {
+          createdFiles[fileName] = fileContent
+        }
+      }
+
+      const program = ts.createProgram(modulesPaths, tscOptions, host)
+      program.emit()
+
+      // create definitions files
+      modulesPaths.forEach((modulePath) => {
+        const typeDefFilePath = modulePath.replace(/\.jsx?$/, DECLARATION_FILE_EXT)
+        const typeDefFileContent = createdFiles[typeDefFilePath]
+        if (typeDefFileContent) {
+          compilation.emitAsset(
+            path.join(MF_TYPES_DIR, declarationFileToExposeNameMap[typeDefFilePath] + DECLARATION_FILE_EXT),
+            getAssetData(typeDefFileContent)
+          )
+        } else {
+          logger.warn(`failed to create ${typeDefFilePath}`)
+        }
+      })
+
+      // create index.json
+      const modulesNames = Object.keys(exposes).map((moduleName) => moduleName + DECLARATION_FILE_EXT)
+      compilation.emitAsset(path.join(MF_TYPES_DIR, "index.json"), getAssetData(JSON.stringify(modulesNames)))
+    }
+
+    const getRemoteDeclareDirPath = (remoteName) => path.resolve(process.cwd(), "node_modules", "@types", remoteName)
+
+    const getTypesDefinitions = async () => {
+      const remotes = federationPlugin._options.remotes
+      if (!remotes) return
+
+      const ignoreRemotes = this._options.ignoreRemotes || []
+      const wantedRemotes = Object.entries(remotes).filter((remote) => ignoreRemotes.find((c) => c !== remote[0]))
+
+      for (const [remoteName, remoteEntryUri] of wantedRemotes) {
+        const {origin, pathname} = new URL(remoteEntryUri.split("@")[1])
+        const remotePublicUrl = origin + pathname.slice(0, pathname.lastIndexOf("/") + 1)
+        const remoteDeclareDirPath = getRemoteDeclareDirPath(remoteName)
+        const federationTypesUrl = remotePublicUrl + MF_TYPES_DIR + "/"
+
+        axios
+          // get types index from the current remote
+          .get(federationTypesUrl + "index.json")
+          .catch((error) => {
+            if (error.response?.status === 404) logger.warn(`WARNING: remote ${remoteName} has no types`)
+            else logger.error("Failed to get remote types index", error.message)
+          })
+          .then((response) => response?.data)
+          .then((modulesNames) => {
+            if (!modulesNames) return
+            // for each remote module get his types
+            modulesNames.forEach((moduleName) => {
+              const moduleDeclarationFileUrl = federationTypesUrl + moduleName
+              axios
+                .get(moduleDeclarationFileUrl)
+                .catch((error) => {
+                  logger.error(`Failed to get ${moduleDeclarationFileUrl} ${error.message}`)
+                })
+                .then((declarationFileResponse) => {
+                  if (!declarationFileResponse) return
+                  const declarationFileContent = declarationFileResponse.data
+                  const decFilePath = path.join(remoteDeclareDirPath, moduleName)
+                  fs.writeFile(decFilePath, declarationFileContent, {recursive: true})
+                  fs.promises
+                    .mkdir(path.dirname(decFilePath), {recursive: true})
+                    .catch((error) => logger.error(`Failed to write dir: ${decFilePath}`, error))
+                    .then(() => fs.writeFile(decFilePath, declarationFileContent, {recursive: true}))
+                    .catch((error) => logger.error(`Failed to write declaration file: ${decFilePath}`, error))
+                })
+                .catch((error) => {
+                  logger.error(`Failed to get ${moduleDeclarationFileUrl} ${error.message}`)
+                })
+            })
+          })
+          .catch((error) => {
+            logger.error("Failed to add declaration file", error.message)
+          })
+      }
+    }
+
+    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+      compilation.hooks.beforeCodeGeneration.tap(PLUGIN_NAME, () => {
+        if (this._options.exposeTypes !== false) createTypesDefinitions(compilation)
+        if (compilation.options.mode === "development" && this._options.importTypes !== false) {
+          getTypesDefinitions()
+          // TODO - call getTypesDefinitions using setInterval
+        }
+      })
+    })
+  }
+}
+
+module.exports = FederationTypesPlugin

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Daniel Amenou
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,44 @@
+# webpack-federation-types-plugin
+
+This plugin adds type declaration for remote modules.
+It compiles the exposed files into type declaration files and shares them as public files
+On the consumer side this plugin will fetch the remote types declaration files and will add them to the "node_modules/@types" directory
+
+## Installation
+
+`npm i --save-dev webpack-federation-types-plugin`
+
+`yarn add --dev webpack-federation-types-plugin`
+
+## Usage
+
+```javascript
+const FederationTypesPlugin = require("webpack-federation-types-plugin")
+
+module.exports = {
+  // ...
+  plugins: [new FederationTypesPlugin({ignoreRemotes: ["remoteName"], importTypes: true, exposeTypes: true})],
+}
+```
+
+- This plugin should be added to the browser config
+
+## Plugin Options
+
+##### exposeTypes
+
+Type: boolean
+Default: true
+Description: create and share the declaration files
+##### importTypes
+
+Type: boolean
+Default: true
+Description: fetch the remotes declaration files and add them to the @types directory
+
+##### ignoreRemotes
+
+Type: string[]
+Default: undefined
+Description: remotes to ignore
+

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "webpack-federation-types-plugin",
+  "description": "This plugin adds type definitions for remote modules",
+  "version": "1.0.0",
+  "main": "FederationTypesPlugin.js",
+  "scripts": {
+    "publish:patch": "npm version patch -m \"patch version - %s\" && npm publish",
+    "publish:minor": "npm version minor -m \"minor version - %s\" && npm publish",
+    "publish:major": "npm version major -m \"major version - %s\" && npm publish",
+    "postpublish": "git push && git push --tags"
+  },
+  "keywords": [
+    "webpack",
+    "plugin",
+    "types",
+    "module federation"
+  ],
+  "homepage": "https://github.com/DanielAmenou/webpack-federation-types-plugin#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DanielAmenou/webpack-federation-types-plugin.git"
+  },
+  "author": "Daniel Amenou <amenou.daniel@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "axios": "^1.2.2",
+    "fs-extra": "^11.1.0",
+    "schema-utils": "^4.0.0",
+    "typescript": "^4.9.4"
+  }
+}