{"_id":"@antik-web/vue-import-federation","_rev":"3-6070e68a9e11b4132fc6d81c4857f329","name":"@antik-web/vue-import-federation","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@antik-web/vue-import-federation","version":"1.0.0","description":"A facade for importing vite-module-federation federated modules with catching clause and callback.","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"keywords":["util","vue","vite","module","federation","import"],"author":{"name":"Jakub Frankovic"},"license":"ISC","devDependencies":{"typescript":"~5.2.2","vue":"~3.3.4"},"_id":"@antik-web/vue-import-federation@1.0.0","gitHead":"0b1aadda0bc3d3d4abbd53b96f9321f86f838cbe","_nodeVersion":"18.18.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-M8zU4wfuREPqX9ucP15bDd9XuOHvDh2gkAlcrq97WkNS+Y7wq4I06u8scY7p1vRRtRzF6SUCNp8t0Ywhqfs6eA==","shasum":"2335af013365c2e484599b45db50dd0b48fbbacc","tarball":"https://registry.npmjs.org/@antik-web/vue-import-federation/-/vue-import-federation-1.0.0.tgz","fileCount":5,"unpackedSize":5245,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHWQGtP2xXAZzTiRBOzsBnwiJPyudIa2Dh27yucDmC7rAiEA/X25lNhkmGi4/+D45ZqifclD1BQyBkT2s+KFqub6N6Q="}]},"_npmUser":{"name":"antik-web","email":"devs@antik.sk"},"directories":{},"maintainers":[{"name":"antik-web","email":"devs@antik.sk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-import-federation_1.0.0_1698392906214_0.9747823072267219"},"_hasShrinkwrap":false},"1.0.1":{"name":"@antik-web/vue-import-federation","version":"1.0.1","description":"A facade for importing vite-module-federation federated modules with catching clause and callback.","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"keywords":["util","vue","vite","module","federation","import"],"author":{"name":"Jakub Frankovic"},"license":"ISC","devDependencies":{"typescript":"~5.2.2","vue":"~3.3.4"},"repository":{"type":"git","url":"git+https://github.com/ANTIK-Telecom/vue-import-federation.git"},"_id":"@antik-web/vue-import-federation@1.0.1","gitHead":"bfec1c15777d2543e7cd9f95aa9cf4b90448d4cd","bugs":{"url":"https://github.com/ANTIK-Telecom/vue-import-federation/issues"},"homepage":"https://github.com/ANTIK-Telecom/vue-import-federation#readme","_nodeVersion":"18.18.0","_npmVersion":"10.2.1","dist":{"integrity":"sha512-PVzo4ah+juGbu9EbwzsXWJzPnffviE2hcmaiiJcB7729CjNbK5QfWKgVbSBKKRWc1lzrSpCHkmlxXUR1Sveh7Q==","shasum":"2b9a4af2ecd08a37716edc241db99d3f7a7f7237","tarball":"https://registry.npmjs.org/@antik-web/vue-import-federation/-/vue-import-federation-1.0.1.tgz","fileCount":5,"unpackedSize":5375,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEnrgkL34P9eWSxgZEtwdPWrSH/+T3MnmIIhdaGa6b8gIgGJ/NmVFhc2fpvWdZKt9G9r12nDwGtxk9JBkHCC+RU/A="}]},"_npmUser":{"name":"antik-web","email":"devs@antik.sk"},"directories":{},"maintainers":[{"name":"antik-web","email":"devs@antik.sk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-import-federation_1.0.1_1698396933885_0.2748982285662529"},"_hasShrinkwrap":false},"1.0.2":{"name":"@antik-web/vue-import-federation","version":"1.0.2","description":"A facade for importing vite-module-federation federated modules with catching clause and callback.","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"keywords":["util","vue","vite","module","federation","import"],"author":{"name":"Jakub Frankovic"},"license":"ISC","devDependencies":{"typescript":"~5.2.2","vue":"~3.3.4"},"repository":{"type":"git","url":"git+https://github.com/ANTIK-Telecom/vue-import-federation.git"},"_id":"@antik-web/vue-import-federation@1.0.2","gitHead":"bfec1c15777d2543e7cd9f95aa9cf4b90448d4cd","bugs":{"url":"https://github.com/ANTIK-Telecom/vue-import-federation/issues"},"homepage":"https://github.com/ANTIK-Telecom/vue-import-federation#readme","_nodeVersion":"18.17.1","_npmVersion":"10.1.0","dist":{"integrity":"sha512-rGGbVyfOyiEAjrp6596MGbtv70rgqMOO4o1/XzreoVDYuLyhdHO2sk3o0IPgYFOId7CZ5uLJHQPDsuCnHU0uBw==","shasum":"22b94b486882ac99629c5bcb5dcb037d8e8eef9c","tarball":"https://registry.npmjs.org/@antik-web/vue-import-federation/-/vue-import-federation-1.0.2.tgz","fileCount":5,"unpackedSize":5695,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE86XPd0J11AdcTbRKq8i/Lpw2tKfnRzrANTw61twdbRAiADy2cje9HbUbofsG7FqlRsTVzAZaBHIuterRGeANWwHA=="}]},"_npmUser":{"name":"antik-web","email":"devs@antik.sk"},"directories":{},"maintainers":[{"name":"antik-web","email":"devs@antik.sk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-import-federation_1.0.2_1698660289011_0.18594079033977762"},"_hasShrinkwrap":false},"1.0.3":{"name":"@antik-web/vue-import-federation","version":"1.0.3","description":"A facade for importing vite-module-federation federated modules with catching clause and callback.","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"keywords":["util","vue","vite","module","federation","import"],"author":{"name":"Jakub Frankovic"},"license":"ISC","devDependencies":{"typescript":"~5.2.2","vue":"~3.3.4"},"repository":{"type":"git","url":"git+https://github.com/ANTIK-Telecom/vue-import-federation.git"},"_id":"@antik-web/vue-import-federation@1.0.3","gitHead":"bfec1c15777d2543e7cd9f95aa9cf4b90448d4cd","bugs":{"url":"https://github.com/ANTIK-Telecom/vue-import-federation/issues"},"homepage":"https://github.com/ANTIK-Telecom/vue-import-federation#readme","_nodeVersion":"18.17.1","_npmVersion":"10.1.0","dist":{"integrity":"sha512-gXoH36zKoMQi6AYIP1FkjnPWGyJc06Trg55VWRJNOT4jtw34SakIxYRoPf5jd0tXRZo2QjemKnkgwSNAQP1ZSA==","shasum":"f3c1ad104d1aae95d9179b18125cd4dfdfbaaee0","tarball":"https://registry.npmjs.org/@antik-web/vue-import-federation/-/vue-import-federation-1.0.3.tgz","fileCount":5,"unpackedSize":5695,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFBMct7bBbdzMYT6CRYtjBauz0iHeJ5xMwYdVCjdgPbMAiBsJF+uU4A4BwvbfS6tr+NYCP4nXmb16nuxv2hHzdBgDw=="}]},"_npmUser":{"name":"antik-web","email":"devs@antik.sk"},"directories":{},"maintainers":[{"name":"antik-web","email":"devs@antik.sk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-import-federation_1.0.3_1698662186182_0.9446364346903355"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-27T07:48:26.140Z","1.0.0":"2023-10-27T07:48:26.432Z","modified":"2023-10-30T10:36:26.534Z","1.0.1":"2023-10-27T08:55:34.190Z","1.0.2":"2023-10-30T10:04:49.192Z","1.0.3":"2023-10-30T10:36:26.396Z"},"maintainers":[{"name":"antik-web","email":"devs@antik.sk"}],"description":"A facade for importing vite-module-federation federated modules with catching clause and callback.","keywords":["util","vue","vite","module","federation","import"],"author":{"name":"Jakub Frankovic"},"license":"ISC","readme":"# @antik-web/vue-import-federation\r\n\r\nThis library is targeting developers who use vite-module-federaion within Vue 3 typescript project. It is a facade for importing federated modules, but it prevents from killing your JS code when you try to import non-existent module. Also, this provides you complete typing (assuming the Vue team can fix [this issue](https://github.com/vuejs/language-tools/issues/3616)).\r\n\r\n## Installation\r\n\r\n**npm**:\r\n```\r\nnpm i @antik-web/vue-import-federation\r\n```\r\n\r\n**pnpm**:\r\n```\r\npnpm add @antik-web/vue-import-federation\r\n```\r\n\r\n## Importing\r\n\r\n**ESM import**:\r\n```\r\nimport { importFederation } from '@antik-web/vue-import-federation';\r\n```\r\n\r\n## Example code / Usage\r\n\r\nIn below examples, you can see how easily you can use the library to import federated component.\r\n\r\n### Useful type info\r\n\r\nIf you want to have typing provided, it is important to declare type of the federated component you want to import. This can be done by creating `someComponent.d.ts` file in your typeRoots directory (defined by *compilerOptions.typeRoots* array in *tsconfig.json*) and obtaining it with alike code:\r\n\r\n```ts\r\ndeclare module 'appRemote/SomeComponent' {\r\n    import type { DefineComponent } from 'vue';\r\n    interface Props {\r\n        someTypedProp: boolean;\r\n    }\r\n    const SomeComponent: DefineComponent<Props>;\r\n    export default SomeComponent;\r\n}\r\n```\r\n\r\nAfter that, you can import type of it easily like this:\r\n\r\n```ts\r\nimport type SomeComponentType from 'appRemote/SomeComponent';\r\n```\r\n\r\nand provide it as generic parameter for *importFederation* function.\r\n\r\nIt is important that the module is of type `DefineComponent<SomePropInteface>` where the *SomePropInteface* is containing prop types you want to use for the component.\r\n\r\n### Import federation function prototype\r\n\r\nThe function has 4 parameters:\r\n\r\n1. lazy import() function for importing remote component\r\n\r\n2. *beforeFetchCallback* which is **optional** function called when the component is prompted to be shown in any template, before anything is fetched from remote.\r\n\r\n3. *beforeMountCallback* which is **optional** function called whenever the component is successfully fetched from remote (but before it is shown in the template).\r\n\r\n4. *errorCallback* which is **optional** function called whenever error happened during the module fetching. This callback will be provided with the exception that happened in the parameter. \r\n\r\n\r\n### Example\r\n\r\n```html\r\n<script setup lang=\"ts\">\r\nimport { importFederation } from '@antik-web/vue-import-federation';\r\nimport type SomeComponentType from 'appRemote/SomeComponent';\r\n\r\n\r\nconst emit = defineEmits(['someEvent']);\r\nconst SomeComponent = importFederation<typeof SomeComponentType>(\r\n    () => import('appRemote/SomeComponent'),\r\n    () => {\r\n        console.log('Do something after component is about to show but before it is fetched from remote');\r\n    },\r\n    () => {\r\n        console.log('Do something right before the component is shown');\r\n    },\r\n    (e: Error) => {\r\n        console.error(e);\r\n        emit('someEvent');\r\n    },\r\n);\r\n</script>\r\n\r\n<template>\r\n    <EventRoot :some-typed-prop=\"true\" />\r\n</template>\r\n```\r\n\r\n## Authors and acknowledgment\r\nJakub Frankovic - Web developer ANTIK Telecom | [Send Mail](mailto:web@antik.sk)","readmeFilename":"README.md","homepage":"https://github.com/ANTIK-Telecom/vue-import-federation#readme","repository":{"type":"git","url":"git+https://github.com/ANTIK-Telecom/vue-import-federation.git"},"bugs":{"url":"https://github.com/ANTIK-Telecom/vue-import-federation/issues"}}