{ "name": "@garfish/remote-module", "version": "1.19.12", "description": "remote-module module.", "keywords": [ "garfish", "remote-module" ], "author": "chentao.arthur ", "homepage": "https://github.com/bytedance/garfish", "license": "MIT", "repository": { "type": "git", "url": "git+https://github.com/bytedance/garfish.git" }, "bugs": { "url": "https://github.com/bytedance/garfish/issues" }, "exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/esm/index.js", "require": "./dist/index.js" }, "./*": "./*" }, "main": "dist/index.js", "module": "dist/esm/index.js", "types": "./dist/index.d.ts", "dependencies": { "@garfish/loader": "1.19.12", "@garfish/utils": "1.19.12", "@garfish/hooks": "1.19.12" }, "publishConfig": { "registry": "https://registry.npmjs.org", "access": "public" }, "gitHead": "da33dd16bb9e99588f34079f8b961d0cf9f059fc", "scripts": { "build": "rimraf dist && tsup src/index.ts", "dev": "cross-env WATCH=true tsup src/index.ts" }, "readme": "# `@garfish/remote-module`\n\n[![NPM version](https://img.shields.io/npm/v/@garfish/remote-module.svg?style=flat-square)](https://www.npmjs.com/package/@garfish/remote-module)\n\n`@garfish/remote-module` can be used alone or combined with Garfish.\n\n## Usage\n\n```js\n// module\nconst React = require('React');\n\nexports.One = function (props) {\n return React.createElement('div', null, [props.text]);\n};\n\nexports.Two = function () {\n return React.createElement('span');\n};\n```\n\n```jsx\nimport React from 'React';\nimport {\n hooks,\n preload,\n esModule,\n loadModule,\n loadModuleSync,\n setModuleConfig,\n cacheModules,\n} from '@garfish/remote-module';\n\nconsole.log(hooks); // See the documentation for `@garfish/hooks`\n\nsetModuleConfig({\n externals: { React }, // Environment variables required by remoteModules\n alias: { Component: 'https://xx.js' },\n});\n\nconst RemoteCm = React.lazy(() =>\n loadModule('https://xx.js').then((modules) => {\n console.log(modules); // One, Two\n return esModule(modules.One);\n }),\n);\n\n// Or\nconst RemoteCm = React.lazy(() => {\n return loadModule('@Component.One').then(esModule);\n});\n\n// Use `React.Suspense` to use components\nloading}>\n

\n \n

\n;\n```\n\nOther usage\n\n```js\n// Or\nloadModule('https://xx.js', {\n cache: true, // This will cache the module instance, default value is `true`\n externals: { React },\n error: (err, info, alias) => {\n console.error(err);\n return 'render error content';\n },\n}).then((modules) => {\n console.log(modules); // One, Two\n});\n\n// Or load the remote modules synchronously\npreload(['https://1.js', 'https://2.js']).then(() => {\n const modules = loadModuleSync('https://1.js');\n console.log(modules); // One, Two\n});\n\n// View already cached modules\nconsole.log(cacheModules);\n```\n\n## Combined with Garfish\n\nIf you are using \"garfish\" micro frontend.\n\n```jsx\n// Child app\nimport { preload } from '@garfish/remote-module';\n\nexport const provider = () => {\n render({ dom }) {\n // When the resources of the remote module are preloaded,\n // You can use synchronous syntax to load remote modules in the current application.\n // You can combine \"webpack5 module federation\" or other \"component markets\"\n preload(menu.remoteModules).then(() => {\n ReactDom.render(, dom)\n })\n },\n\n destroy() {\n ...\n }\n}\n```\n\nYou can also configure the information of remote modules in the template, so that these modules can be used synchronously when the child application is initialized.\n\n```html\n\n\n \n \n \n \n \n \n \n\n```\n\n```jsx\nimport { loadModuleSync } from '@garfish/remote-module';\n\nfunction App() {\n // const One = loadModuleSync('@Component.One');\n const { One } = loadModuleSync('http://localhost:3000/remoteModule1');\n\n return (\n

\n \n

\n );\n}\n```\n\n# Alias\n\nYou can simplify the long url with the `alias` config.\n\n```js\nimport { loadModule, setModuleConfig } from '@garfish/remote-module';\n\nsetModuleConfig({\n alias: { utils: 'http://localhost:3000/remoteModule' },\n});\n\nloadModule('@utils').then((utils) => {\n console.log(utils);\n});\n\nloadModule('@utils.isObject').then((isObject) => {\n console.log(isObject);\n});\n```\n\n# Remote module\n\nThe remote module only supports the `commonjs` format, but you can also package the module in the `umd` format.\n\n```js\nmodule.exports = {\n a() {},\n b() {},\n};\n```\n\nIf the module wants to return asynchronous content.\n\n> When the module exports a promise, you can only use the `RemoteModule.loadModule` method, otherwise an error will be reported.\n\n```js\n// The loadModule method is provided by default\nconst loadModule = require('loadModule');\n\nmodule.exports = new Promise((resolve) => {\n loadModule('@otherModules').then((modules) => {\n resolve({\n a() {},\n b() {},\n ...modules,\n });\n });\n});\n```\n" }