`\r\n\r\nA promise array for each created component that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n### findComponentByName(name)\r\n\r\n#### name `string`\r\n\r\nname of the component as previously linked with `link()`\r\n\r\n#### RETURN `typeof SvelteComponent`\r\n\r\nThe Class of the linked component, if any\r\n\r\n### findLinkNameByClass(Class)\r\n\r\n#### Class `typeof SvelteComponent`\r\n\r\nClass of the component as previously linked with `link()`\r\n\r\n#### RETURN `string`\r\n\r\nThe name of the linked component, if any\r\n\r\n# Credits\r\n\r\n- [Svelte](https://svelte.dev/)\r\n- Portals implementation was inspired by @romkor's work on [svelte-portal](https://github.com/romkor/svelte-portal).\r\n\r\n# License\r\n\r\n[MIT](LICENSE)\r\n","readmeFilename":"README.md","gitHead":"afe6253d9912ec3de3b174f6978dcc57b88200e3","_id":"svelte-injector@1.2.0-beta.4","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-oShTpc4LCLeHg/dXKZpGD7II3dU4IXNoiCCr5M4lclraGYW0R/1tMo8yBUQ7UsKPC0qaDfLD9ABIuaTfBR2oDQ==","shasum":"f09ba59b2b293f9ade7a609c1f4c78e6f2412318","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-1.2.0-beta.4.tgz","fileCount":12,"unpackedSize":50059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXhPMCRA9TVsSAnZWagAANU8P/0DynZSZBnRbWy3XtwWc\n9buBRBKcQvNOkYBCoxIHStQW/ZEA6fpWVX+sN13eOVxzbncUZj7w4MsFX5X5\n2SguXXI/p5Xdg3Pdhvo1CoZ1E4VVXjQnlaD61fIzazH4YPMQ4TJ8bBN2wl+y\n4XhRvueWCSnlNPKijgtVzvLBBq5+Ysyrc0nQLhXZqW+/HopTSlXoZ2zElNvx\n/EgvOEA6es7Jql4Da0qckjqZx81L7WsuwGOTprqPbroujutHW3ehush+jBek\nZO77H0ChXq6sR31c/hwPb0IXB4FQlYLLQEW+wKkCxHh/1mZKRrhEZJaDDPOU\nTtzjn80R1CpfB/O4+H/56dfIEniqCm+bEW/vVb9Y/H1ng8ZY9uswqMuifkbi\nTow7L7Ps+i4hpQtSp57RCxopz1o6xoC7UguYXaGC/ggNXfE+FqZ+8bXYLD8b\n7tlASwaaVsZF0APretr50ikflm4J/9VW23wyVfKynwtwZ+A8neWHEYZm1Lzc\nmouBMvMN+kEPT4b4lHP28vsKwie8oqnUccH9iNwnQ33cAUHtBGFM9Bb9XAq1\nfN20+KG+1wzJgRvdXRCHCUOKfHP5Teurr/3QMCoBUeX2HalT7GD/QwKnno67\ncg/GKGhM5mzzg1Y8/gJ2ObvCmAGusvdmVCu4vZ3BldA2y+Xs1Jv2Ye3Cy+Mr\n+DT+\r\n=wQfO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIFtdVGCWM9vaRRUVW12PG3URNxCKFlaTL03gM3x+lWSTAh8xLa3eOJi7ecPwCs/7H/jhThYrXJZANB0o/eBgHVOZ"}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_1.2.0-beta.4_1616778188089_0.8861504832652989"},"_hasShrinkwrap":false},"1.2.0-beta.5":{"name":"svelte-injector","version":"1.2.0-beta.5","main":"lib/index.js","types":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"devDependencies":{"cpy-cli":"^3.1.1","cross-env":"^7.0.3","del-cli":"^3.0.1","prettier":"^2.2.1","prettier-plugin-svelte":"^2.1.1","svelte":"^3.32.0","svelte-loader":"^3.0.0","ts-loader":"^8.0.14","tslint":"^6.1.3","tslint-config-prettier":"^1.18.0","typescript":"^4.1.3","webpack":"^5.18.0","webpack-cli":"^4.4.0"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","scripts":{"clean":"del-cli lib","test":"echo \"Error: no test specified\" && exit 1","copy":"cpy **/*.svelte ../lib/ --cwd=src --parents","build":"npm run clean && tsc && npm run copy","dev":"npm run clean && webpack","prepare":"npm run build","format":"prettier --write \"src/**/*.ts\"","lint":"tslint -p tsconfig.json","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"readme":"# Svelte Injector\r\n\r\n> Tool to integrate Svelte components into other frontend frameworks\r\n\r\n## Features\r\n>\r\n> - **Inject** Svelte components in React, Angular, Vue, jQuery, Vanilla JS.\r\n> - Easily **migrate** to Svelte while keeping older code running.\r\n> - Write **agnostic** Svelte components. _They will never know what hit them_.\r\n> - Uses **Portals** to render components where you want them.\r\n> - The main Svelte App is in your control. Use contexts/store/head/window as you wish.\r\n> - **Typescript** <3\r\n\r\n# Table of contents\r\n\r\n- [Installing](#installing)\r\n- [Usage](#usage)\r\n - [Setup](#setup)\r\n - [Injecting](#injecting-components)\r\n- [Framework Integration](#framework-integration)\r\n - [AngularJs](#angularjs)\r\n - [React](#react)\r\n - [Angular](#angular)\r\n- [JS API](#js-api)\r\n- [Credits](#credits)\r\n\r\n# Installing\r\n\r\n```sh\r\nnpm install --save-dev svelte-injector svelte\r\n```\r\n\r\nThen configure your bundler of choice to accept Svelte files.\r\n\r\n# Usage\r\n\r\n## Setup\r\n\r\nCreate your Svelte App: --> [reference](https://svelte.dev/tutorial/making-an-app)\r\n\r\n`src/svelte/main`\r\n\r\n```typescript\r\nimport App from \"./App.svelte\";\r\n\r\nconst svelteEntrypoint = document.createElement(\"div\");\r\nsvelteEntrypoint.id = \"svelte-entrypoint\";\r\ndocument.body.prepend(svelteEntrypoint);\r\n\r\n// Create Svelte App\r\nnew App({\r\n\ttarget: svelteEntrypoint,\r\n});\r\n```\r\n\r\n_Note: Svelte needs to share the DOM with your existing app. It's recommended you don't use `document.body` as the App target._\r\n\r\n`App.svelte`\r\n\r\n```sveltehtml\r\n\r\n\r\n\r\n```\r\n\r\nUse `svelte-loader` or `rollup-plugin-svelte` in your bundler. NOT excluding `node_modules`\r\n\r\n## Injecting Components\r\n\r\n### Imported components\r\n\r\nImport the component class into your framework controller, then use `createElement()` to create it.\r\n\r\n```typescript\r\nimport Hello from \"./Hello.svelte\";\r\n\r\nSvelteInjector.createElement(target, Hello, props);\r\n```\r\n\r\n### Linked components\r\n\r\nLink component class with a string to use it anywhere.\r\n\r\nImport your components somewhere in your bundle (es: create an `index.module` file)\r\n\r\n```typescript\r\nimport Hello from \"./Hello.svelte\";\r\n\r\nSvelteInjector.link(target, \"hello\", Hello);\r\n```\r\n\r\nthen in your controller use `createLinkedElement()`\r\n\r\n```typescript\r\nSvelteInjector.createLinkedElement(target, \"hello\", props);\r\n```\r\n\r\n### Template parsing\r\n\r\nIf you have multiple components under a single dom node you can use `syncTemplate`\r\n\r\n_However for better performance I'd recommend creating a wrapper component in Svelte and placing an {each} there._\r\n\r\nUse this notation in the template:\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\nThen call `syncTemplate` to update the components tree in Svelte.\r\n\r\n```typescript\r\nSvelteInjector.syncTemplate(target);\r\n```\r\n\r\nYou can use `data-to-render` attribute as an `{if}` block in Svelte\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\n### Backend requested components\r\n\r\nyou can create components that are requested in your source HTML.\r\n\r\nIf your HTML contains any component markup like so:\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\nJust run `createElementsFromTemplate()` once to render them.\r\n\r\n```typescript\r\nSvelteInjector.createElementsFromTemplate(document.body);\r\n```\r\n\r\n_NOTE: the component with the requested name needs to be linked first._\r\n\r\n# Framework integration\r\n\r\nThis project was created to easily migrate apps from AngularJs to Svelte, but it is not framework specific.\r\n\r\nSvelte components should NOT be aware of the fact that they were used by another framework.\r\n\r\n## AngularJs\r\n\r\nUse `SvelteInjector` functions at the end of the `$onInit` or `$onChanges` lifecycle methods\r\n\r\nFor performance reasons it is recommended that these funcions are wrapped by a `$timeout`\r\n\r\n### createElement()\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\";\r\n\r\n$onInit();\r\n{\r\n\t//Your onInit\r\n\r\n\tlet props = {\r\n\t\tname: \"world\",\r\n\t};\r\n\r\n\tthis.$timeout(async () => {\r\n\t\tthis.svelteChild = await SvelteInjector.createElement(this.$element[0], Component, props);\r\n\t});\r\n}\r\n```\r\n\r\n### createLinkedElement()\r\n\r\n`index.module.ts`\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\";\r\n\r\nSvelteInjector.link(\"component-name\", Component);\r\n```\r\n\r\nThen in your controller:\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\n\r\n$onInit(){\r\n //Your onInit\r\n\r\n let props = {\r\n name: \"world\"\r\n }\r\n\r\n this.$timeout(async () => {\r\n this.svelteChild = await SvelteInjector.createLinkedElement(this.$element[0],\r\n 'component-name', props);\r\n });\r\n}\r\n```\r\n\r\n### syncTemplate()\r\n\r\nThe `$onChanges` function won't be triggered if your INTERNAL state has changed. Only if your component props have.\r\nIf your component uses internal state management, put the above snippet at the end of every state management function.\r\n\r\nHowever for better performance I'd recommend creating a wrapper component in Svelte and placing an {each} there.\r\n\r\n_WARNING: if an angular element with an ng-if has a svelte child, it will create a new component every time the ng-if expression is evaluated to true.\r\nUse \"toRender\" prop if you want to reuse the component._\r\n\r\n#### 1. Use the funcion in a recurring lifecycle method\r\n\r\n```typescript\r\nthis.svelteChildren = await SvelteInjector.syncTemplate(this.$element[0]);\r\n```\r\n\r\n#### 2. Use the component in your markup like so:\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n\r\nConditional rendering: you can use {data-to-render} as the condition in an {#if}\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\n**Don't forget** to use `destroyAll()` in your `$onDestroy` to optimize memory usage\r\n\r\n## React\r\n\r\nDocumentation refers to **Class Components**, but can be applied to Functional Components with **hooks**.\r\n\r\nUse `SvelteInjector` functions at the end of the `componentDidMount` or `componentDidUpdate` lifecycle methods\r\n\r\n### createElement()\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\"\r\n\r\ncomponentDidMount() {\r\n //Your onInit\r\n\r\n let props = {\r\n name: \"world\"\r\n }\r\n\r\n // You can use async/await too\r\n SvelteInjector.createElement(ref, Component, props).then(component => {\r\n this.svelteChild = component;\r\n });\r\n}\r\n```\r\n\r\n### updateProps()\r\n\r\n```typescript\r\ncomponentDidUpdate() {\r\n this.svelteChild.updateProps({name: \"universe\"})\r\n}\r\n```\r\n\r\n### createLinkedElement()\r\n\r\n`index.module.ts`\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\";\r\n\r\nSvelteInjector.link(\"component-name\", Component);\r\n```\r\n\r\nThen in your controller:\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\n\r\ncomponentDidMount(){\r\n //Your onInit\r\n\r\n let props = {\r\n name: \"world\"\r\n }\r\n\r\n this.svelteChild = await SvelteInjector.createLinkedElement(ref, 'component-name', props);\r\n}\r\n```\r\n\r\n### syncTemplate()\r\n\r\nUseful if you need to place many Svelte components in a single div.\r\nUse `syncTemplate()` in your `componentDidUpdate`.\r\n\r\nHowever for better performance I'd recommend creating a wrapper component in Svelte and placing an {each} there.\r\n\r\n_WARNING: if an HTMLElement that has a svelte child is rendered conditionally, it will create a new component every time the conditional expression is evaluated to true.\r\nUse \"toRender\" parameter if you want to reuse the component._\r\n\r\n#### 1. Use the funcion in a recurring lifecycle method\r\n\r\n```typescript\r\nthis.svelteChildren = await SvelteInjector.syncTemplate(ref);\r\n```\r\n\r\n#### 2. Use the component in your markup like so:\r\n\r\n```typescript jsx\r\n\r\n \r\n {JSON.stringify(props)}\r\n \r\n
\r\n\r\n// Conditional rendering: you can use {data-to-render} as the condition in an {#if}\r\n\r\n \r\n {JSON.stringify(props)}\r\n \r\n
\r\n```\r\n\r\n**Don't forget** to use `destroyAll()` in your `componentWillUnmount` to optimize memory usage\r\n\r\n\r\n## Angular\r\n\r\nDocs in progress\r\n\r\n# JS API\r\n\r\n## Elements\r\n\r\nInterface `SvelteElement`\r\n\r\n### updateProps(props)\r\n\r\n#### props `object`\r\n\r\nThe new props object. All previous props will be dropped.\r\n\r\n### updateToRender(toRender)\r\n\r\n#### toRender `boolean`\r\n\r\nThe new props object.\r\n\r\n### destroy()\r\n\r\nDestroys the component.\r\n\r\n## Injector\r\n\r\n### createElement(target, Component, props[,toRender])\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the component will be rendered\r\n\r\n#### Component `SvelteComponent`\r\n\r\nThe Svelte component Class\r\n\r\n#### props `object`\r\n\r\nAn object with props compatible with the Svelte Component\r\n\r\n#### toRender `boolean` (default = true)\r\n\r\nBoolean that indicates if the component should render immediately.\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n### createLinkedElement(target, componentName, props[,toRender])\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the component will be rendered\r\n\r\n#### componentName `string`\r\n\r\nThe name of the component as linked with `link()`\r\n\r\n#### props `object`\r\n\r\nAn object with props compatible with the Svelte Component\r\n\r\n#### toRender `boolean` (default = true)\r\n\r\nBoolean that indicates if the component should render immediately\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n### syncTemplate(target)\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the components will be looked for.\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise array for each created component that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n_NOTE: this method is NOT synchronous_\r\n\r\n### createElementsFromTemplate(target)\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the components will be looked for.\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise array for each created component that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n### findComponentByName(name)\r\n\r\n#### name `string`\r\n\r\nname of the component as previously linked with `link()`\r\n\r\n#### RETURN `typeof SvelteComponent`\r\n\r\nThe Class of the linked component, if any\r\n\r\n### findLinkNameByClass(Class)\r\n\r\n#### Class `typeof SvelteComponent`\r\n\r\nClass of the component as previously linked with `link()`\r\n\r\n#### RETURN `string`\r\n\r\nThe name of the linked component, if any\r\n\r\n# Credits\r\n\r\n- [Svelte](https://svelte.dev/)\r\n- Portals implementation was inspired by @romkor's work on [svelte-portal](https://github.com/romkor/svelte-portal).\r\n\r\n# License\r\n\r\n[MIT](LICENSE)\r\n","readmeFilename":"README.md","gitHead":"30e4dece0567028be6a439fdbaff547bb3715a7a","_id":"svelte-injector@1.2.0-beta.5","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-09iS68duLYne87Zx+1m25sUOrmVPir6XjHyvWY2w3yVxVa2D8LVdM6kRbTdiVU/gUF50AVdV8u1iNavdplue1Q==","shasum":"ba89d243014265bfe169cb60f1fdca332a7276e8","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-1.2.0-beta.5.tgz","fileCount":13,"unpackedSize":51758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY0CvCRA9TVsSAnZWagAA8SgP/jjbFGsD43iEion9wHdj\n1rQ0scMYa8BJa6AiWAKidKWACIjbAcSmUnRJyiQrY1NKMXWUCD4Icd/VX4O7\nznkxf4WhDptFHCyQKNwIKGQI89ZtNd6ko6i3Qqa3VyMu1dM113bNcP66MjX7\nLYVPjJjckmGu9Skfu/Rci5MTtpiBp8K2wdn6jZ9M7mXnHmDyftJODs8nJNSo\nX/q48zMoUe0NJjcAActXaf6DfD+3VqzuEtrCTg3cLnRSMq+yK+qnA14iT3SS\n1ZyKQV2wFOmPU1y5bPjBUjynSf3gsmQsB5M/iUv58zI97rdkIx5kz1RDoITa\nE5Z/H4WGJqr3s9NUNrLIsThh7iUvTf6kc0bV0AG4mU6u0QHFsHRV6IYN/qJz\nxzLZjEvb6lXXIL8rjH8oPPWpjpVKhv21RfGS0uDyHwTnv+l/41/uogh2uWfP\nY2sQuFyIrCeyrPQm4qiSbT3e0LliP6CiWOZu6tEiEuqQsUSmeM3Ebd9m8UkM\nQ3hdyVv1AXRGxfVvWwCWri3xhqIqt5Yn4EGommosKa/6zA7xcgMGSL5Zu/aU\n6zFLNHOHYmBx8YUEorYNdZwCPBw7vBCv0fxmXJUnNGOovMpPQYY0FLrE9cRZ\nUlUEYf7iH6yXwoSaYe6k5rR7svOx2iDacn588fh6f5wptbTmUBLmoc+w8xge\nyW8n\r\n=XNPD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDudKHVR55KOkpdqAtZ91ZZt4vvLWnqUjpuSZthjFczwQIhAPWxy20fQDM/TfYa2UXYp/IfiNMPxYPG5frix79a8Gc5"}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_1.2.0-beta.5_1617117359500_0.5842462872216334"},"_hasShrinkwrap":false},"1.2.0-beta.6":{"name":"svelte-injector","version":"1.2.0-beta.6","main":"lib/index.js","types":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"devDependencies":{"cpy-cli":"^3.1.1","cross-env":"^7.0.3","del-cli":"^3.0.1","prettier":"^2.2.1","prettier-plugin-svelte":"^2.1.1","svelte":"^3.32.0","svelte-loader":"^3.0.0","ts-loader":"^8.0.14","tslint":"^6.1.3","tslint-config-prettier":"^1.18.0","typescript":"^4.1.3","webpack":"^5.18.0","webpack-cli":"^4.4.0"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","scripts":{"clean":"del-cli lib","test":"echo \"Error: no test specified\" && exit 1","copy":"cpy **/*.svelte ../lib/ --cwd=src --parents","build":"npm run clean && tsc && npm run copy","dev":"npm run clean && webpack","prepare":"npm run build","format":"prettier --write \"src/**/*.ts\"","lint":"tslint -p tsconfig.json","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"readme":"# Svelte Injector\r\n\r\n> Tool to integrate Svelte components into other frontend frameworks\r\n\r\n## Features\r\n>\r\n> - **Inject** Svelte components in React, Angular, Vue, jQuery, Vanilla JS.\r\n> - Easily **migrate** to Svelte while keeping older code running.\r\n> - Write **agnostic** Svelte components. _They will never know what hit them_.\r\n> - Uses **Portals** to render components where you want them.\r\n> - The main Svelte App is in your control. Use contexts/store/head/window as you wish.\r\n> - **Typescript** <3\r\n\r\n# Table of contents\r\n\r\n- [Installing](#installing)\r\n- [Usage](#usage)\r\n - [Setup](#setup)\r\n - [Injecting](#injecting-components)\r\n- [Framework Integration](#framework-integration)\r\n - [AngularJs](#angularjs)\r\n - [React](#react)\r\n - [Angular](#angular)\r\n- [JS API](#js-api)\r\n- [Credits](#credits)\r\n\r\n# Installing\r\n\r\n```sh\r\nnpm install --save-dev svelte-injector svelte\r\n```\r\n\r\nThen configure your bundler of choice to accept Svelte files.\r\n\r\n# Usage\r\n\r\n## Setup\r\n\r\nCreate your Svelte App: --> [reference](https://svelte.dev/tutorial/making-an-app)\r\n\r\n`src/svelte/main`\r\n\r\n```typescript\r\nimport App from \"./App.svelte\";\r\n\r\nconst svelteEntrypoint = document.createElement(\"div\");\r\nsvelteEntrypoint.id = \"svelte-entrypoint\";\r\ndocument.body.prepend(svelteEntrypoint);\r\n\r\n// Create Svelte App\r\nnew App({\r\n\ttarget: svelteEntrypoint,\r\n});\r\n```\r\n\r\n_Note: Svelte needs to share the DOM with your existing app. It's recommended you don't use `document.body` as the App target._\r\n\r\n`App.svelte`\r\n\r\n```sveltehtml\r\n\r\n\r\n\r\n```\r\n\r\nUse `svelte-loader` or `rollup-plugin-svelte` in your bundler. NOT excluding `node_modules`\r\n\r\n## Injecting Components\r\n\r\n### Imported components\r\n\r\nImport the component class into your framework controller, then use `createElement()` to create it.\r\n\r\n```typescript\r\nimport Hello from \"./Hello.svelte\";\r\n\r\nSvelteInjector.createElement(target, Hello, props);\r\n```\r\n\r\n### Linked components\r\n\r\nLink component class with a string to use it anywhere.\r\n\r\nImport your components somewhere in your bundle (es: create an `index.module` file)\r\n\r\n```typescript\r\nimport Hello from \"./Hello.svelte\";\r\n\r\nSvelteInjector.link(target, \"hello\", Hello);\r\n```\r\n\r\nthen in your controller use `createLinkedElement()`\r\n\r\n```typescript\r\nSvelteInjector.createLinkedElement(target, \"hello\", props);\r\n```\r\n\r\n### Template parsing\r\n\r\nIf you have multiple components under a single dom node you can use `syncTemplate`\r\n\r\n_However for better performance I'd recommend creating a wrapper component in Svelte and placing an {each} there._\r\n\r\nUse this notation in the template:\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\nThen call `syncTemplate` to update the components tree in Svelte.\r\n\r\n```typescript\r\nSvelteInjector.syncTemplate(target);\r\n```\r\n\r\nYou can use `data-to-render` attribute as an `{if}` block in Svelte\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\n### Backend requested components\r\n\r\nyou can create components that are requested in your source HTML.\r\n\r\nIf your HTML contains any component markup like so:\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\nJust run `createElementsFromTemplate()` once to render them.\r\n\r\n```typescript\r\nSvelteInjector.createElementsFromTemplate(document.body);\r\n```\r\n\r\n_NOTE: the component with the requested name needs to be linked first._\r\n\r\n# Framework integration\r\n\r\nThis project was created to easily migrate apps from AngularJs to Svelte, but it is not framework specific.\r\n\r\nSvelte components should NOT be aware of the fact that they were used by another framework.\r\n\r\n## AngularJs\r\n\r\nUse `SvelteInjector` functions at the end of the `$onInit` or `$onChanges` lifecycle methods\r\n\r\nFor performance reasons it is recommended that these funcions are wrapped by a `$timeout`\r\n\r\n### createElement()\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\";\r\n\r\n$onInit();\r\n{\r\n\t//Your onInit\r\n\r\n\tlet props = {\r\n\t\tname: \"world\",\r\n\t};\r\n\r\n\tthis.$timeout(async () => {\r\n\t\tthis.svelteChild = await SvelteInjector.createElement(this.$element[0], Component, props);\r\n\t});\r\n}\r\n```\r\n\r\n### createLinkedElement()\r\n\r\n`index.module.ts`\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\";\r\n\r\nSvelteInjector.link(\"component-name\", Component);\r\n```\r\n\r\nThen in your controller:\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\n\r\n$onInit(){\r\n //Your onInit\r\n\r\n let props = {\r\n name: \"world\"\r\n }\r\n\r\n this.$timeout(async () => {\r\n this.svelteChild = await SvelteInjector.createLinkedElement(this.$element[0],\r\n 'component-name', props);\r\n });\r\n}\r\n```\r\n\r\n### syncTemplate()\r\n\r\nThe `$onChanges` function won't be triggered if your INTERNAL state has changed. Only if your component props have.\r\nIf your component uses internal state management, put the above snippet at the end of every state management function.\r\n\r\nHowever for better performance I'd recommend creating a wrapper component in Svelte and placing an {each} there.\r\n\r\n_WARNING: if an angular element with an ng-if has a svelte child, it will create a new component every time the ng-if expression is evaluated to true.\r\nUse \"toRender\" prop if you want to reuse the component._\r\n\r\n#### 1. Use the funcion in a recurring lifecycle method\r\n\r\n```typescript\r\nthis.svelteChildren = await SvelteInjector.syncTemplate(this.$element[0]);\r\n```\r\n\r\n#### 2. Use the component in your markup like so:\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n\r\nConditional rendering: you can use {data-to-render} as the condition in an {#if}\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\n**Don't forget** to use `destroyAll()` in your `$onDestroy` to optimize memory usage\r\n\r\n## React\r\n\r\nDocumentation refers to **Class Components**, but can be applied to Functional Components with **hooks**.\r\n\r\nUse `SvelteInjector` functions at the end of the `componentDidMount` or `componentDidUpdate` lifecycle methods\r\n\r\n### createElement()\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\"\r\n\r\ncomponentDidMount() {\r\n //Your onInit\r\n\r\n let props = {\r\n name: \"world\"\r\n }\r\n\r\n // You can use async/await too\r\n SvelteInjector.createElement(ref, Component, props).then(component => {\r\n this.svelteChild = component;\r\n });\r\n}\r\n```\r\n\r\n### updateProps()\r\n\r\n```typescript\r\ncomponentDidUpdate() {\r\n this.svelteChild.updateProps({name: \"universe\"})\r\n}\r\n```\r\n\r\n### createLinkedElement()\r\n\r\n`index.module.ts`\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\";\r\n\r\nSvelteInjector.link(\"component-name\", Component);\r\n```\r\n\r\nThen in your controller:\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\n\r\ncomponentDidMount(){\r\n //Your onInit\r\n\r\n let props = {\r\n name: \"world\"\r\n }\r\n\r\n this.svelteChild = await SvelteInjector.createLinkedElement(ref, 'component-name', props);\r\n}\r\n```\r\n\r\n### syncTemplate()\r\n\r\nUseful if you need to place many Svelte components in a single div.\r\nUse `syncTemplate()` in your `componentDidUpdate`.\r\n\r\nHowever for better performance I'd recommend creating a wrapper component in Svelte and placing an {each} there.\r\n\r\n_WARNING: if an HTMLElement that has a svelte child is rendered conditionally, it will create a new component every time the conditional expression is evaluated to true.\r\nUse \"toRender\" parameter if you want to reuse the component._\r\n\r\n#### 1. Use the funcion in a recurring lifecycle method\r\n\r\n```typescript\r\nthis.svelteChildren = await SvelteInjector.syncTemplate(ref);\r\n```\r\n\r\n#### 2. Use the component in your markup like so:\r\n\r\n```typescript jsx\r\n\r\n \r\n {JSON.stringify(props)}\r\n \r\n
\r\n\r\n// Conditional rendering: you can use {data-to-render} as the condition in an {#if}\r\n\r\n \r\n {JSON.stringify(props)}\r\n \r\n
\r\n```\r\n\r\n**Don't forget** to use `destroyAll()` in your `componentWillUnmount` to optimize memory usage\r\n\r\n\r\n## Angular\r\n\r\nDocs in progress\r\n\r\n# JS API\r\n\r\n## Elements\r\n\r\nInterface `SvelteElement`\r\n\r\n### updateProps(props)\r\n\r\n#### props `object`\r\n\r\nThe new props object. All previous props will be dropped.\r\n\r\n### updateToRender(toRender)\r\n\r\n#### toRender `boolean`\r\n\r\nThe new props object.\r\n\r\n### destroy()\r\n\r\nDestroys the component.\r\n\r\n## Injector\r\n\r\n### createElement(target, Component, props[,toRender])\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the component will be rendered\r\n\r\n#### Component `SvelteComponent`\r\n\r\nThe Svelte component Class\r\n\r\n#### props `object`\r\n\r\nAn object with props compatible with the Svelte Component\r\n\r\n#### toRender `boolean` (default = true)\r\n\r\nBoolean that indicates if the component should render immediately.\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n### createLinkedElement(target, componentName, props[,toRender])\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the component will be rendered\r\n\r\n#### componentName `string`\r\n\r\nThe name of the component as linked with `link()`\r\n\r\n#### props `object`\r\n\r\nAn object with props compatible with the Svelte Component\r\n\r\n#### toRender `boolean` (default = true)\r\n\r\nBoolean that indicates if the component should render immediately\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n### syncTemplate(target)\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the components will be looked for.\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise array for each created component that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n_NOTE: this method is NOT synchronous_\r\n\r\n### createElementsFromTemplate(target)\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the components will be looked for.\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise array for each created component that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n### findComponentByName(name)\r\n\r\n#### name `string`\r\n\r\nname of the component as previously linked with `link()`\r\n\r\n#### RETURN `typeof SvelteComponent`\r\n\r\nThe Class of the linked component, if any\r\n\r\n### findLinkNameByClass(Class)\r\n\r\n#### Class `typeof SvelteComponent`\r\n\r\nClass of the component as previously linked with `link()`\r\n\r\n#### RETURN `string`\r\n\r\nThe name of the linked component, if any\r\n\r\n# Credits\r\n\r\n- [Svelte](https://svelte.dev/)\r\n- Portals implementation was inspired by @romkor's work on [svelte-portal](https://github.com/romkor/svelte-portal).\r\n\r\n# License\r\n\r\n[MIT](LICENSE)\r\n","readmeFilename":"README.md","gitHead":"69bd70b9181e3a609160890796ce4f4ff1101cfa","_id":"svelte-injector@1.2.0-beta.6","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-hoh/ItsgFpzGllCElNyxpGzLOMOdkWsKBjuQb94tL20+gudCVG2c2SXwIHhPvdoGy2JSthu7XAgbgf6BEWa6cA==","shasum":"72c729c0e4d85ca9167b91edfc3feedfd1f8c9bd","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-1.2.0-beta.6.tgz","fileCount":13,"unpackedSize":51746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY0R4CRA9TVsSAnZWagAAEzgP/ikyIajEiKTQwS32cL/b\n1P4pRlyO3jIdhIzCHuomOPVvOEcKUqImvKafMKZRaF27rSn1qRacuSnGSG0V\ncl2oNA8AoE41NzBehVIJ6Zoc24KPqFclOkA9itcY3i4B0w/PFGkX9l2ZsMRk\nwh/Yz327KJ4KwsXsQKnwKxAuF581KugCjxC1e/z6CkrcHiDhr2I46kmE6Aj7\n6Y3WMnJWYEuJf6yVjTXdWxluNH1eXHLXT05t9YqsapstWXhoKQl4G4JIk/5v\nqonjEeMKZzWVqSOyrYvX7iFi+PIdtdA4OOxj6sVB8fDeQAUzgl3TzglZT86L\n3an7WJxWHuizynnkIGCW1aO87WqAEDFRVsLue2VItfpeEEd+SVY4u+6CLa1H\nIr53vfwjlPieTVvkILRDU3f5pKlx5w4Fpu2NGBS52bdR9kkqV7dn1ujZFt56\ncT09z62E3OmWsordq2NK2i9B9BdBOldQhcTc+041htj8AN2h8PFBQ59MV/8F\nBemML8Igxpab1lGZlDhKtWiI+7UsU2gnkyUh+Y/utfDvhlQA7cXK9WlVjsN7\nD6QFewE5bK1NKZa6HShFxnXu0wuEpClbrLo9H+M8FpcPzGnoUsH6USmbD0AT\nA8fauXTPAPEurohcK1Zfmuo3tVUPx0l6Fu4v3SwbZolgj2eNcBa0s3ZgWINq\n89mL\r\n=+i+a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEj9a3E/PTGPl4nvB6YUu6xcSgFy+4irOBOfw/SPcDQhAiEA02tR0kdwZBcxY+gsyOGlyIKRi6SLIJHkH7uJ1EzarkI="}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_1.2.0-beta.6_1617118328167_0.8838132630212274"},"_hasShrinkwrap":false},"1.2.0-beta.7":{"name":"svelte-injector","version":"1.2.0-beta.7","main":"lib/index.js","types":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"devDependencies":{"cpy-cli":"^3.1.1","cross-env":"^7.0.3","del-cli":"^3.0.1","prettier":"^2.2.1","prettier-plugin-svelte":"^2.1.1","svelte":"^3.32.0","svelte-loader":"^3.0.0","ts-loader":"^8.0.14","tslint":"^6.1.3","tslint-config-prettier":"^1.18.0","typescript":"^4.1.3","webpack":"^5.18.0","webpack-cli":"^4.4.0"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","scripts":{"clean":"del-cli lib","test":"echo \"Error: no test specified\" && exit 1","copy":"cpy **/*.svelte ../lib/ --cwd=src --parents","build":"npm run clean && tsc && npm run copy","dev":"npm run clean && webpack","prepare":"npm run build","format":"prettier --write \"src/**/*.ts\"","lint":"tslint -p tsconfig.json","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"readme":"# Svelte Injector\r\n\r\n> Tool to integrate Svelte components into other frontend frameworks\r\n\r\n## Features\r\n>\r\n> - **Inject** Svelte components in React, Angular, Vue, jQuery, Vanilla JS.\r\n> - Easily **migrate** to Svelte while keeping older code running.\r\n> - Write **agnostic** Svelte components. _They will never know what hit them_.\r\n> - Uses **Portals** to render components where you want them.\r\n> - The main Svelte App is in your control. Use contexts/store/head/window as you wish.\r\n> - **Typescript** <3\r\n\r\n# Table of contents\r\n\r\n- [Installing](#installing)\r\n- [Usage](#usage)\r\n - [Setup](#setup)\r\n - [Injecting](#injecting-components)\r\n- [Framework Integration](#framework-integration)\r\n - [AngularJs](#angularjs)\r\n - [React](#react)\r\n - [Angular](#angular)\r\n- [JS API](#js-api)\r\n- [Credits](#credits)\r\n\r\n# Installing\r\n\r\n```sh\r\nnpm install --save-dev svelte-injector svelte\r\n```\r\n\r\nThen configure your bundler of choice to accept Svelte files.\r\n\r\n# Usage\r\n\r\n## Setup\r\n\r\nCreate your Svelte App: --> [reference](https://svelte.dev/tutorial/making-an-app)\r\n\r\n`src/svelte/main`\r\n\r\n```typescript\r\nimport App from \"./App.svelte\";\r\n\r\nconst svelteEntrypoint = document.createElement(\"div\");\r\nsvelteEntrypoint.id = \"svelte-entrypoint\";\r\ndocument.body.prepend(svelteEntrypoint);\r\n\r\n// Create Svelte App\r\nnew App({\r\n\ttarget: svelteEntrypoint,\r\n});\r\n```\r\n\r\n_Note: Svelte needs to share the DOM with your existing app. It's recommended you don't use `document.body` as the App target._\r\n\r\n`App.svelte`\r\n\r\n```sveltehtml\r\n\r\n\r\n\r\n```\r\n\r\nUse `svelte-loader` or `rollup-plugin-svelte` in your bundler. NOT excluding `node_modules`\r\n\r\n## Injecting Components\r\n\r\n### Imported components\r\n\r\nImport the component class into your framework controller, then use `createElement()` to create it.\r\n\r\n```typescript\r\nimport Hello from \"./Hello.svelte\";\r\n\r\nSvelteInjector.createElement(target, Hello, props);\r\n```\r\n\r\n### Linked components\r\n\r\nLink component class with a string to use it anywhere.\r\n\r\nImport your components somewhere in your bundle (es: create an `index.module` file)\r\n\r\n```typescript\r\nimport Hello from \"./Hello.svelte\";\r\n\r\nSvelteInjector.link(target, \"hello\", Hello);\r\n```\r\n\r\nthen in your controller use `createLinkedElement()`\r\n\r\n```typescript\r\nSvelteInjector.createLinkedElement(target, \"hello\", props);\r\n```\r\n\r\n### Template parsing\r\n\r\nIf you have multiple components under a single dom node you can use `syncTemplate`\r\n\r\n_However for better performance I'd recommend creating a wrapper component in Svelte and placing an {each} there._\r\n\r\nUse this notation in the template:\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\nThen call `syncTemplate` to update the components tree in Svelte.\r\n\r\n```typescript\r\nSvelteInjector.syncTemplate(target);\r\n```\r\n\r\nYou can use `data-to-render` attribute as an `{if}` block in Svelte\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\n### Backend requested components\r\n\r\nyou can create components that are requested in your source HTML.\r\n\r\nIf your HTML contains any component markup like so:\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\nJust run `createElementsFromTemplate()` once to render them.\r\n\r\n```typescript\r\nSvelteInjector.createElementsFromTemplate(document.body);\r\n```\r\n\r\n_NOTE: the component with the requested name needs to be linked first._\r\n\r\n# Framework integration\r\n\r\nThis project was created to easily migrate apps from AngularJs to Svelte, but it is not framework specific.\r\n\r\nSvelte components should NOT be aware of the fact that they were used by another framework.\r\n\r\n## AngularJs\r\n\r\nUse `SvelteInjector` functions at the end of the `$onInit` or `$onChanges` lifecycle methods\r\n\r\nFor performance reasons it is recommended that these funcions are wrapped by a `$timeout`\r\n\r\n### createElement()\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\";\r\n\r\n$onInit();\r\n{\r\n\t//Your onInit\r\n\r\n\tlet props = {\r\n\t\tname: \"world\",\r\n\t};\r\n\r\n\tthis.$timeout(async () => {\r\n\t\tthis.svelteChild = await SvelteInjector.createElement(this.$element[0], Component, props);\r\n\t});\r\n}\r\n```\r\n\r\n### createLinkedElement()\r\n\r\n`index.module.ts`\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\";\r\n\r\nSvelteInjector.link(\"component-name\", Component);\r\n```\r\n\r\nThen in your controller:\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\n\r\n$onInit(){\r\n //Your onInit\r\n\r\n let props = {\r\n name: \"world\"\r\n }\r\n\r\n this.$timeout(async () => {\r\n this.svelteChild = await SvelteInjector.createLinkedElement(this.$element[0],\r\n 'component-name', props);\r\n });\r\n}\r\n```\r\n\r\n### syncTemplate()\r\n\r\nThe `$onChanges` function won't be triggered if your INTERNAL state has changed. Only if your component props have.\r\nIf your component uses internal state management, put the above snippet at the end of every state management function.\r\n\r\nHowever for better performance I'd recommend creating a wrapper component in Svelte and placing an {each} there.\r\n\r\n_WARNING: if an angular element with an ng-if has a svelte child, it will create a new component every time the ng-if expression is evaluated to true.\r\nUse \"toRender\" prop if you want to reuse the component._\r\n\r\n#### 1. Use the funcion in a recurring lifecycle method\r\n\r\n```typescript\r\nthis.svelteChildren = await SvelteInjector.syncTemplate(this.$element[0]);\r\n```\r\n\r\n#### 2. Use the component in your markup like so:\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n\r\nConditional rendering: you can use {data-to-render} as the condition in an {#if}\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\n**Don't forget** to use `destroyAll()` in your `$onDestroy` to optimize memory usage\r\n\r\n## React\r\n\r\nDocumentation refers to **Class Components**, but can be applied to Functional Components with **hooks**.\r\n\r\nUse `SvelteInjector` functions at the end of the `componentDidMount` or `componentDidUpdate` lifecycle methods\r\n\r\n### createElement()\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\"\r\n\r\ncomponentDidMount() {\r\n //Your onInit\r\n\r\n let props = {\r\n name: \"world\"\r\n }\r\n\r\n // You can use async/await too\r\n SvelteInjector.createElement(ref, Component, props).then(component => {\r\n this.svelteChild = component;\r\n });\r\n}\r\n```\r\n\r\n### updateProps()\r\n\r\n```typescript\r\ncomponentDidUpdate() {\r\n this.svelteChild.updateProps({name: \"universe\"})\r\n}\r\n```\r\n\r\n### createLinkedElement()\r\n\r\n`index.module.ts`\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\";\r\n\r\nSvelteInjector.link(\"component-name\", Component);\r\n```\r\n\r\nThen in your controller:\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\n\r\ncomponentDidMount(){\r\n //Your onInit\r\n\r\n let props = {\r\n name: \"world\"\r\n }\r\n\r\n this.svelteChild = await SvelteInjector.createLinkedElement(ref, 'component-name', props);\r\n}\r\n```\r\n\r\n### syncTemplate()\r\n\r\nUseful if you need to place many Svelte components in a single div.\r\nUse `syncTemplate()` in your `componentDidUpdate`.\r\n\r\nHowever for better performance I'd recommend creating a wrapper component in Svelte and placing an {each} there.\r\n\r\n_WARNING: if an HTMLElement that has a svelte child is rendered conditionally, it will create a new component every time the conditional expression is evaluated to true.\r\nUse \"toRender\" parameter if you want to reuse the component._\r\n\r\n#### 1. Use the funcion in a recurring lifecycle method\r\n\r\n```typescript\r\nthis.svelteChildren = await SvelteInjector.syncTemplate(ref);\r\n```\r\n\r\n#### 2. Use the component in your markup like so:\r\n\r\n```typescript jsx\r\n\r\n \r\n {JSON.stringify(props)}\r\n \r\n
\r\n\r\n// Conditional rendering: you can use {data-to-render} as the condition in an {#if}\r\n\r\n \r\n {JSON.stringify(props)}\r\n \r\n
\r\n```\r\n\r\n**Don't forget** to use `destroyAll()` in your `componentWillUnmount` to optimize memory usage\r\n\r\n\r\n## Angular\r\n\r\nDocs in progress\r\n\r\n# JS API\r\n\r\n## Elements\r\n\r\nInterface `SvelteElement`\r\n\r\n### updateProps(props)\r\n\r\n#### props `object`\r\n\r\nThe new props object. All previous props will be dropped.\r\n\r\n### updateToRender(toRender)\r\n\r\n#### toRender `boolean`\r\n\r\nThe new props object.\r\n\r\n### destroy()\r\n\r\nDestroys the component.\r\n\r\n## Injector\r\n\r\n### createElement(target, Component, props[,toRender])\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the component will be rendered\r\n\r\n#### Component `SvelteComponent`\r\n\r\nThe Svelte component Class\r\n\r\n#### props `object`\r\n\r\nAn object with props compatible with the Svelte Component\r\n\r\n#### toRender `boolean` (default = true)\r\n\r\nBoolean that indicates if the component should render immediately.\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n### createLinkedElement(target, componentName, props[,toRender])\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the component will be rendered\r\n\r\n#### componentName `string`\r\n\r\nThe name of the component as linked with `link()`\r\n\r\n#### props `object`\r\n\r\nAn object with props compatible with the Svelte Component\r\n\r\n#### toRender `boolean` (default = true)\r\n\r\nBoolean that indicates if the component should render immediately\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n### syncTemplate(target)\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the components will be looked for.\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise array for each created component that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n_NOTE: this method is NOT synchronous_\r\n\r\n### createElementsFromTemplate(target)\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the components will be looked for.\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise array for each created component that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n### findComponentByName(name)\r\n\r\n#### name `string`\r\n\r\nname of the component as previously linked with `link()`\r\n\r\n#### RETURN `typeof SvelteComponent`\r\n\r\nThe Class of the linked component, if any\r\n\r\n### findLinkNameByClass(Class)\r\n\r\n#### Class `typeof SvelteComponent`\r\n\r\nClass of the component as previously linked with `link()`\r\n\r\n#### RETURN `string`\r\n\r\nThe name of the linked component, if any\r\n\r\n# Credits\r\n\r\n- [Svelte](https://svelte.dev/)\r\n- Portals implementation was inspired by @romkor's work on [svelte-portal](https://github.com/romkor/svelte-portal).\r\n\r\n# License\r\n\r\n[MIT](LICENSE)\r\n","readmeFilename":"README.md","gitHead":"47cea5ff92a89f5e20d8eb0b50b70a9b0c34eee7","_id":"svelte-injector@1.2.0-beta.7","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-bb/SngAF2tQUKCZQSf9Aoh3PKsVj30gEbeK1+2dLqGOvvpubP0AUvDwKoO+vT/E1KA7kUvDjo1Tqo2gN9oKTYw==","shasum":"72e3a5bf58582e4ffdec84a75c8711175d4cf151","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-1.2.0-beta.7.tgz","fileCount":13,"unpackedSize":51791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyXvCRA9TVsSAnZWagAAtlUQAJ/KLjqZD5zaHH2eSGf3\ng9/4KTLYGBC90F1cPplSg52mx+EBeCni5XZnUAJ2lBTlKW1FUnHTuLbbu6TL\n5jWu9/IkNh9vtY3/cDddxgeO+FtDkCVSUI8yvjcrGb25+s8sY4EtBPiVZZr+\nTsjJxlS0qIOGlOpvv4mxqB+hrmXQ3iimRGWRztUGIkA1uVDzwiPKptSsQCcL\nWkA/33ncKCQ7VPO5usA/RehO7uLmzedTD1Xesl9xF/oZRjxr+r95vHEYVItL\nf7tCDdOEShP04SI7S84YIwI0I8P4ODL9pcSYJU64/cWULyRE2uF2PTpKPH4E\ntkMyatx5ihN8C7a5m01x1lCF3nrod85V47foOuCPPAlvEC7H0ERR1S+KxKvC\nakUR9jg/UJtwoMseptSOj3bP5SKStJoUyYtiB8qk+PB0s6WXJwyG1ixpFgpP\naa/fmSHV4IQ8FQaGVwzHSAA4LHTAm1rhomxGRl1ShIozCAcS9h+LNoMmC1Bm\nsx6aSsrhM98pHUPxXmFtvzeTWvPDrfMiPcP0MmVXZzrcISqkyqqOLP0UV6EW\n8mSH5OZS1LXlD6vDU4a8A9syEnYUepS1JSuzE45Y6c/0SeJ5d1SjSyT4/41E\na8503lXjACboXpUJMuQzt+HdUnkzJhvCvXCHutcR/b7FWWO5Hs9w/wXiIkbP\ngA7k\r\n=41Sm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIFNC5FJZ9KGT5W63w2Dp8Hl155mqrrVKRvxjLarIHdQIhAIEqYcZGikqjkdsK2luC6CrmvQliCZ+ETuKaIcvMbmu9"}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_1.2.0-beta.7_1617896943040_0.16437016193969844"},"_hasShrinkwrap":false},"1.2.0-beta.8":{"name":"svelte-injector","version":"1.2.0-beta.8","main":"lib/index.js","types":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"devDependencies":{"cpy-cli":"^3.1.1","cross-env":"^7.0.3","del-cli":"^3.0.1","prettier":"^2.2.1","prettier-plugin-svelte":"^2.1.1","svelte":"^3.32.0","svelte-loader":"^3.0.0","ts-loader":"^8.0.14","tslint":"^6.1.3","tslint-config-prettier":"^1.18.0","typescript":"^4.1.3","webpack":"^5.18.0","webpack-cli":"^4.4.0"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","scripts":{"clean":"del-cli lib","test":"echo \"Error: no test specified\" && exit 1","copy":"cpy **/*.svelte ../lib/ --cwd=src --parents","build":"npm run clean && tsc && npm run copy","dev":"npm run clean && webpack","prepare":"npm run build","format":"prettier --write \"src/**/*.ts\"","lint":"tslint -p tsconfig.json","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"readme":"# Svelte Injector\r\n\r\n> Tool to integrate Svelte components into other frontend frameworks\r\n\r\n## Features\r\n>\r\n> - **Inject** Svelte components in React, Angular, Vue, jQuery, Vanilla JS.\r\n> - Easily **migrate** to Svelte while keeping older code running.\r\n> - Write **agnostic** Svelte components. _They will never know what hit them_.\r\n> - Uses **Portals** to render components where you want them.\r\n> - The main Svelte App is in your control. Use contexts/store/head/window as you wish.\r\n> - **Typescript** <3\r\n\r\n# Table of contents\r\n\r\n- [Installing](#installing)\r\n- [Usage](#usage)\r\n - [Setup](#setup)\r\n - [Injecting](#injecting-components)\r\n- [Framework Integration](#framework-integration)\r\n - [AngularJs](#angularjs)\r\n - [React](#react)\r\n - [Angular](#angular)\r\n- [JS API](#js-api)\r\n- [Credits](#credits)\r\n\r\n# Installing\r\n\r\n```sh\r\nnpm install --save-dev svelte-injector svelte\r\n```\r\n\r\nThen configure your bundler of choice to accept Svelte files.\r\n\r\n# Usage\r\n\r\n## Setup\r\n\r\nCreate your Svelte App: --> [reference](https://svelte.dev/tutorial/making-an-app)\r\n\r\n`src/svelte/main`\r\n\r\n```typescript\r\nimport App from \"./App.svelte\";\r\n\r\nconst svelteEntrypoint = document.createElement(\"div\");\r\nsvelteEntrypoint.id = \"svelte-entrypoint\";\r\ndocument.body.prepend(svelteEntrypoint);\r\n\r\n// Create Svelte App\r\nnew App({\r\n\ttarget: svelteEntrypoint,\r\n});\r\n```\r\n\r\n_Note: Svelte needs to share the DOM with your existing app. It's recommended you don't use `document.body` as the App target._\r\n\r\n`App.svelte`\r\n\r\n```sveltehtml\r\n\r\n\r\n\r\n```\r\n\r\nUse `svelte-loader` or `rollup-plugin-svelte` in your bundler. NOT excluding `node_modules`\r\n\r\n## Injecting Components\r\n\r\n### Imported components\r\n\r\nImport the component class into your framework controller, then use `createElement()` to create it.\r\n\r\n```typescript\r\nimport Hello from \"./Hello.svelte\";\r\n\r\nSvelteInjector.createElement(target, Hello, props);\r\n```\r\n\r\n### Linked components\r\n\r\nLink component class with a string to use it anywhere.\r\n\r\nImport your components somewhere in your bundle (es: create an `index.module` file)\r\n\r\n```typescript\r\nimport Hello from \"./Hello.svelte\";\r\n\r\nSvelteInjector.link(target, \"hello\", Hello);\r\n```\r\n\r\nthen in your controller use `createLinkedElement()`\r\n\r\n```typescript\r\nSvelteInjector.createLinkedElement(target, \"hello\", props);\r\n```\r\n\r\n### Template parsing\r\n\r\nIf you have multiple components under a single dom node you can use `syncTemplate`\r\n\r\n_However for better performance I'd recommend creating a wrapper component in Svelte and placing an {each} there._\r\n\r\nUse this notation in the template:\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\nThen call `syncTemplate` to update the components tree in Svelte.\r\n\r\n```typescript\r\nSvelteInjector.syncTemplate(target);\r\n```\r\n\r\nYou can use `data-to-render` attribute as an `{if}` block in Svelte\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\n### Backend requested components\r\n\r\nyou can create components that are requested in your source HTML.\r\n\r\nIf your HTML contains any component markup like so:\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\nJust run `createElementsFromTemplate()` once to render them.\r\n\r\n```typescript\r\nSvelteInjector.createElementsFromTemplate(document.body);\r\n```\r\n\r\n_NOTE: the component with the requested name needs to be linked first._\r\n\r\n# Framework integration\r\n\r\nThis project was created to easily migrate apps from AngularJs to Svelte, but it is not framework specific.\r\n\r\nSvelte components should NOT be aware of the fact that they were used by another framework.\r\n\r\n## AngularJs\r\n\r\nUse `SvelteInjector` functions at the end of the `$onInit` or `$onChanges` lifecycle methods\r\n\r\nFor performance reasons it is recommended that these funcions are wrapped by a `$timeout`\r\n\r\n### createElement()\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\";\r\n\r\n$onInit();\r\n{\r\n\t//Your onInit\r\n\r\n\tlet props = {\r\n\t\tname: \"world\",\r\n\t};\r\n\r\n\tthis.$timeout(async () => {\r\n\t\tthis.svelteChild = await SvelteInjector.createElement(this.$element[0], Component, props);\r\n\t});\r\n}\r\n```\r\n\r\n### createLinkedElement()\r\n\r\n`index.module.ts`\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\";\r\n\r\nSvelteInjector.link(\"component-name\", Component);\r\n```\r\n\r\nThen in your controller:\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\n\r\n$onInit(){\r\n //Your onInit\r\n\r\n let props = {\r\n name: \"world\"\r\n }\r\n\r\n this.$timeout(async () => {\r\n this.svelteChild = await SvelteInjector.createLinkedElement(this.$element[0],\r\n 'component-name', props);\r\n });\r\n}\r\n```\r\n\r\n### syncTemplate()\r\n\r\nThe `$onChanges` function won't be triggered if your INTERNAL state has changed. Only if your component props have.\r\nIf your component uses internal state management, put the above snippet at the end of every state management function.\r\n\r\nHowever for better performance I'd recommend creating a wrapper component in Svelte and placing an {each} there.\r\n\r\n_WARNING: if an angular element with an ng-if has a svelte child, it will create a new component every time the ng-if expression is evaluated to true.\r\nUse \"toRender\" prop if you want to reuse the component._\r\n\r\n#### 1. Use the funcion in a recurring lifecycle method\r\n\r\n```typescript\r\nthis.svelteChildren = await SvelteInjector.syncTemplate(this.$element[0]);\r\n```\r\n\r\n#### 2. Use the component in your markup like so:\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n\r\nConditional rendering: you can use {data-to-render} as the condition in an {#if}\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\n**Don't forget** to use `destroyAll()` in your `$onDestroy` to optimize memory usage\r\n\r\n## React\r\n\r\nDocumentation refers to **Class Components**, but can be applied to Functional Components with **hooks**.\r\n\r\nUse `SvelteInjector` functions at the end of the `componentDidMount` or `componentDidUpdate` lifecycle methods\r\n\r\n### createElement()\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\"\r\n\r\ncomponentDidMount() {\r\n //Your onInit\r\n\r\n let props = {\r\n name: \"world\"\r\n }\r\n\r\n // You can use async/await too\r\n SvelteInjector.createElement(ref, Component, props).then(component => {\r\n this.svelteChild = component;\r\n });\r\n}\r\n```\r\n\r\n### updateProps()\r\n\r\n```typescript\r\ncomponentDidUpdate() {\r\n this.svelteChild.updateProps({name: \"universe\"})\r\n}\r\n```\r\n\r\n### createLinkedElement()\r\n\r\n`index.module.ts`\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\";\r\n\r\nSvelteInjector.link(\"component-name\", Component);\r\n```\r\n\r\nThen in your controller:\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\n\r\ncomponentDidMount(){\r\n //Your onInit\r\n\r\n let props = {\r\n name: \"world\"\r\n }\r\n\r\n this.svelteChild = await SvelteInjector.createLinkedElement(ref, 'component-name', props);\r\n}\r\n```\r\n\r\n### syncTemplate()\r\n\r\nUseful if you need to place many Svelte components in a single div.\r\nUse `syncTemplate()` in your `componentDidUpdate`.\r\n\r\nHowever for better performance I'd recommend creating a wrapper component in Svelte and placing an {each} there.\r\n\r\n_WARNING: if an HTMLElement that has a svelte child is rendered conditionally, it will create a new component every time the conditional expression is evaluated to true.\r\nUse \"toRender\" parameter if you want to reuse the component._\r\n\r\n#### 1. Use the funcion in a recurring lifecycle method\r\n\r\n```typescript\r\nthis.svelteChildren = await SvelteInjector.syncTemplate(ref);\r\n```\r\n\r\n#### 2. Use the component in your markup like so:\r\n\r\n```typescript jsx\r\n\r\n \r\n {JSON.stringify(props)}\r\n \r\n
\r\n\r\n// Conditional rendering: you can use {data-to-render} as the condition in an {#if}\r\n\r\n \r\n {JSON.stringify(props)}\r\n \r\n
\r\n```\r\n\r\n**Don't forget** to use `destroyAll()` in your `componentWillUnmount` to optimize memory usage\r\n\r\n\r\n## Angular\r\n\r\nDocs in progress\r\n\r\n# JS API\r\n\r\n## Elements\r\n\r\nInterface `SvelteElement`\r\n\r\n### updateProps(props)\r\n\r\n#### props `object`\r\n\r\nThe new props object. All previous props will be dropped.\r\n\r\n### updateToRender(toRender)\r\n\r\n#### toRender `boolean`\r\n\r\nThe new props object.\r\n\r\n### destroy()\r\n\r\nDestroys the component.\r\n\r\n## Injector\r\n\r\n### createElement(target, Component, props[,toRender])\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the component will be rendered\r\n\r\n#### Component `SvelteComponent`\r\n\r\nThe Svelte component Class\r\n\r\n#### props `object`\r\n\r\nAn object with props compatible with the Svelte Component\r\n\r\n#### toRender `boolean` (default = true)\r\n\r\nBoolean that indicates if the component should render immediately.\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n### createLinkedElement(target, componentName, props[,toRender])\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the component will be rendered\r\n\r\n#### componentName `string`\r\n\r\nThe name of the component as linked with `link()`\r\n\r\n#### props `object`\r\n\r\nAn object with props compatible with the Svelte Component\r\n\r\n#### toRender `boolean` (default = true)\r\n\r\nBoolean that indicates if the component should render immediately\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n### syncTemplate(target)\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the components will be looked for.\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise array for each created component that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n_NOTE: this method is NOT synchronous_\r\n\r\n### createElementsFromTemplate(target)\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the components will be looked for.\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise array for each created component that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n### findComponentByName(name)\r\n\r\n#### name `string`\r\n\r\nname of the component as previously linked with `link()`\r\n\r\n#### RETURN `typeof SvelteComponent`\r\n\r\nThe Class of the linked component, if any\r\n\r\n### findLinkNameByClass(Class)\r\n\r\n#### Class `typeof SvelteComponent`\r\n\r\nClass of the component as previously linked with `link()`\r\n\r\n#### RETURN `string`\r\n\r\nThe name of the linked component, if any\r\n\r\n# Credits\r\n\r\n- [Svelte](https://svelte.dev/)\r\n- Portals implementation was inspired by @romkor's work on [svelte-portal](https://github.com/romkor/svelte-portal).\r\n\r\n# License\r\n\r\n[MIT](LICENSE)\r\n","readmeFilename":"README.md","gitHead":"35158683275ffdcb882de2a661876626bc0e837a","_id":"svelte-injector@1.2.0-beta.8","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-1no4jYan4DvwHFfxjCmax8Zma31/1YOOcWAYvvDGKly1nWzVOjfXXU/s7nlOZtoJENb7+4VjuyeMpRgj4tbaAw==","shasum":"096b9a90331f2c85404c8421edff001266413914","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-1.2.0-beta.8.tgz","fileCount":13,"unpackedSize":51997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggAFfCRA9TVsSAnZWagAAIvMQAJ5/YSOlRQf8FoPM/fHX\nCW/qzeArvn3p3+W227fs1QUHt2m4DNYZB3WT6ne7jwtOABAommZksq5ws3kd\nVVYjo/6HRse+59Tqpl+/xmYxvfXSTOMirCgtbY4Zu0CG6Kgp49uWyOwCSbVh\ny+lywg7XSFOq5c/wTebCRz5Yw+aT45QVv6D4pahgrI+ap73/gBka4V0woqpT\nSlGYi/FudmihEHZ5Nk+lNHHxRe6mvcQcrXsqQF5GhKIsV0NjZeLa7ZcrNG/l\nd2pE5RWCLFf96DIlXbStydMkkZ4JmPWyYnlCWLqqIpRPhLp/uPapOJTUxlGy\nIFAcWlwy05m8B/x53Wor6OuG5hdQjLOhFQ5ZuEs1Qw4thuO/bpNizYnjc0af\nKmlDF4V3UNbew0bK0hMld35p5eUGRH+VTycuahNQ887PDwaQCvzlJu0fgHim\nHWLL1bVJp9aujsVSLVfmAtJ2gwtQz9i3IaHrvCrT1hn+17ji9H6mHNPHOiKd\n/WqpHm156SnHiE/Q2P/0O9EZ5RUX5o7RLDAZT4IcYPIXINNAuSU3iUvRYE6S\ny7RUbynjKrHvxe2c4qWrA8VSjXZJ16PixCtMk8N7GejZo36y8rfMcYGU6D6L\nNkYTwoaqYA4t+Qeh4rUGdSAmoJZTyo0RFDTPxB/En+OMRaxBih+4gn+hCprK\nBsAY\r\n=+KDs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFzqCqOBXjZLtdB2nEYQkSkq0trw483M/qfp3/XLK4NJAiAKXx8Ine6OlsvJ6eKG2o2zgeAV6DoXBwZs6XO4CVDqhQ=="}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_1.2.0-beta.8_1619001694960_0.48467781856278425"},"_hasShrinkwrap":false},"2.0.0-beta.0":{"name":"svelte-injector","version":"2.0.0-beta.0","main":"lib/index.js","types":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"devDependencies":{"cpy-cli":"^3.1.1","cross-env":"^7.0.3","del-cli":"^3.0.1","prettier":"^2.2.1","prettier-plugin-svelte":"^2.1.1","svelte":"^3.32.0","svelte-loader":"^3.0.0","ts-loader":"^8.0.14","tslint":"^6.1.3","tslint-config-prettier":"^1.18.0","typescript":"^4.1.3","webpack":"^5.18.0","webpack-cli":"^4.4.0"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","scripts":{"clean":"del-cli lib","test":"echo \"Error: no test specified\" && exit 1","copy":"cpy **/*.svelte ../lib/ --cwd=src --parents","build":"npm run clean && tsc && npm run copy","dev":"npm run clean && webpack","prepare":"npm run build","format":"prettier --write \"src/**/*.ts\"","lint":"tslint -p tsconfig.json","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"readme":"# Svelte Injector\r\n\r\n> Tool to integrate Svelte components into other frontend frameworks\r\n\r\n## Features\r\n>\r\n> - **Inject** Svelte components in React, Angular, Vue, jQuery, Vanilla JS.\r\n> - Easily **migrate** to Svelte while keeping older code running.\r\n> - Write **agnostic** Svelte components. _They will never know what hit them_.\r\n> - Uses **Portals** to render components where you want them.\r\n> - The main Svelte App is in your control. Use contexts/store/head/window as you wish.\r\n> - **Typescript** <3\r\n\r\n# Table of contents\r\n\r\n- [Installing](#installing)\r\n- [Usage](#usage)\r\n - [Setup](#setup)\r\n - [Injecting](#injecting-components)\r\n- [Framework Integration](#framework-integration)\r\n - [AngularJs](#angularjs)\r\n - [React](#react)\r\n - [Angular](#angular)\r\n- [JS API](#js-api)\r\n- [Credits](#credits)\r\n\r\n# Installing\r\n\r\n```sh\r\nnpm install --save-dev svelte-injector svelte\r\n```\r\n\r\nThen configure your bundler of choice to accept Svelte files.\r\n\r\n# Usage\r\n\r\n## Setup\r\n\r\nCreate your Svelte App: --> [reference](https://svelte.dev/tutorial/making-an-app)\r\n\r\n`src/svelte/main`\r\n\r\n```typescript\r\nimport App from \"./App.svelte\";\r\n\r\nconst svelteEntrypoint = document.createElement(\"div\");\r\nsvelteEntrypoint.id = \"svelte-entrypoint\";\r\ndocument.body.prepend(svelteEntrypoint);\r\n\r\n// Create Svelte App\r\nnew App({\r\n\ttarget: svelteEntrypoint,\r\n});\r\n```\r\n\r\n_Note: Svelte needs to share the DOM with your existing app. It's recommended you don't use `document.body` as the App target._\r\n\r\n`App.svelte`\r\n\r\n```sveltehtml\r\n\r\n\r\n\r\n```\r\n\r\nUse `svelte-loader` or `rollup-plugin-svelte` in your bundler. NOT excluding `node_modules`\r\n\r\n## Injecting Components\r\n\r\n### Imported components\r\n\r\nImport the component class into your framework controller, then use `createElement()` to create it.\r\n\r\n```typescript\r\nimport Hello from \"./Hello.svelte\";\r\n\r\nSvelteInjector.createElement(target, Hello, props);\r\n```\r\n\r\n### Linked components\r\n\r\nLink component class with a string to use it anywhere.\r\n\r\nImport your components somewhere in your bundle (es: create an `index.module` file)\r\n\r\n```typescript\r\nimport Hello from \"./Hello.svelte\";\r\n\r\nSvelteInjector.link(target, \"hello\", Hello);\r\n```\r\n\r\nthen in your controller use `createLinkedElement()`\r\n\r\n```typescript\r\nSvelteInjector.createLinkedElement(target, \"hello\", props);\r\n```\r\n\r\n### Template parsing\r\n\r\nIf you have multiple components under a single dom node you can use `syncTemplate`\r\n\r\n_However for better performance I'd recommend creating a wrapper component in Svelte and placing an {each} there._\r\n\r\nUse this notation in the template:\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\nThen call `syncTemplate` to update the components tree in Svelte.\r\n\r\n```typescript\r\nSvelteInjector.syncTemplate(target);\r\n```\r\n\r\nYou can use `data-to-render` attribute as an `{if}` block in Svelte\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\n### Backend requested components\r\n\r\nyou can create components that are requested in your source HTML.\r\n\r\nIf your HTML contains any component markup like so:\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\nJust run `createElementsFromTemplate()` once to render them.\r\n\r\n```typescript\r\nSvelteInjector.createElementsFromTemplate(document.body);\r\n```\r\n\r\n_NOTE: the component with the requested name needs to be linked first._\r\n\r\n# Framework integration\r\n\r\nThis project was created to easily migrate apps from AngularJs to Svelte, but it is not framework specific.\r\n\r\nSvelte components should NOT be aware of the fact that they were used by another framework.\r\n\r\n## AngularJs\r\n\r\nUse `SvelteInjector` functions at the end of the `$onInit` or `$onChanges` lifecycle methods\r\n\r\nFor performance reasons it is recommended that these funcions are wrapped by a `$timeout`\r\n\r\n### createElement()\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\";\r\n\r\n$onInit();\r\n{\r\n\t//Your onInit\r\n\r\n\tlet props = {\r\n\t\tname: \"world\",\r\n\t};\r\n\r\n\tthis.$timeout(async () => {\r\n\t\tthis.svelteChild = await SvelteInjector.createElement(this.$element[0], Component, props);\r\n\t});\r\n}\r\n```\r\n\r\n### createLinkedElement()\r\n\r\n`index.module.ts`\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\";\r\n\r\nSvelteInjector.link(\"component-name\", Component);\r\n```\r\n\r\nThen in your controller:\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\n\r\n$onInit(){\r\n //Your onInit\r\n\r\n let props = {\r\n name: \"world\"\r\n }\r\n\r\n this.$timeout(async () => {\r\n this.svelteChild = await SvelteInjector.createLinkedElement(this.$element[0],\r\n 'component-name', props);\r\n });\r\n}\r\n```\r\n\r\n### syncTemplate()\r\n\r\nThe `$onChanges` function won't be triggered if your INTERNAL state has changed. Only if your component props have.\r\nIf your component uses internal state management, put the above snippet at the end of every state management function.\r\n\r\nHowever for better performance I'd recommend creating a wrapper component in Svelte and placing an {each} there.\r\n\r\n_WARNING: if an angular element with an ng-if has a svelte child, it will create a new component every time the ng-if expression is evaluated to true.\r\nUse \"toRender\" prop if you want to reuse the component._\r\n\r\n#### 1. Use the funcion in a recurring lifecycle method\r\n\r\n```typescript\r\nthis.svelteChildren = await SvelteInjector.syncTemplate(this.$element[0]);\r\n```\r\n\r\n#### 2. Use the component in your markup like so:\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n\r\nConditional rendering: you can use {data-to-render} as the condition in an {#if}\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\n**Don't forget** to use `destroyAll()` in your `$onDestroy` to optimize memory usage\r\n\r\n## React\r\n\r\nDocumentation refers to **Class Components**, but can be applied to Functional Components with **hooks**.\r\n\r\nUse `SvelteInjector` functions at the end of the `componentDidMount` or `componentDidUpdate` lifecycle methods\r\n\r\n### createElement()\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\"\r\n\r\ncomponentDidMount() {\r\n //Your onInit\r\n\r\n let props = {\r\n name: \"world\"\r\n }\r\n\r\n // You can use async/await too\r\n SvelteInjector.createElement(ref, Component, props).then(component => {\r\n this.svelteChild = component;\r\n });\r\n}\r\n```\r\n\r\n### updateProps()\r\n\r\n```typescript\r\ncomponentDidUpdate() {\r\n this.svelteChild.updateProps({name: \"universe\"})\r\n}\r\n```\r\n\r\n### createLinkedElement()\r\n\r\n`index.module.ts`\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\";\r\n\r\nSvelteInjector.link(\"component-name\", Component);\r\n```\r\n\r\nThen in your controller:\r\n\r\n```typescript\r\nimport SvelteInjector from \"svelte-injector\";\r\n\r\ncomponentDidMount(){\r\n //Your onInit\r\n\r\n let props = {\r\n name: \"world\"\r\n }\r\n\r\n this.svelteChild = await SvelteInjector.createLinkedElement(ref, 'component-name', props);\r\n}\r\n```\r\n\r\n### syncTemplate()\r\n\r\nUseful if you need to place many Svelte components in a single div.\r\nUse `syncTemplate()` in your `componentDidUpdate`.\r\n\r\nHowever for better performance I'd recommend creating a wrapper component in Svelte and placing an {each} there.\r\n\r\n_WARNING: if an HTMLElement that has a svelte child is rendered conditionally, it will create a new component every time the conditional expression is evaluated to true.\r\nUse \"toRender\" parameter if you want to reuse the component._\r\n\r\n#### 1. Use the funcion in a recurring lifecycle method\r\n\r\n```typescript\r\nthis.svelteChildren = await SvelteInjector.syncTemplate(ref);\r\n```\r\n\r\n#### 2. Use the component in your markup like so:\r\n\r\n```typescript jsx\r\n\r\n \r\n {JSON.stringify(props)}\r\n \r\n
\r\n\r\n// Conditional rendering: you can use {data-to-render} as the condition in an {#if}\r\n\r\n \r\n {JSON.stringify(props)}\r\n \r\n
\r\n```\r\n\r\n**Don't forget** to use `destroyAll()` in your `componentWillUnmount` to optimize memory usage\r\n\r\n\r\n## Angular\r\n\r\nDocs in progress\r\n\r\n# JS API\r\n\r\n## Elements\r\n\r\nInterface `SvelteElement`\r\n\r\n### updateProps(props)\r\n\r\n#### props `object`\r\n\r\nThe new props object. All previous props will be dropped.\r\n\r\n### updateToRender(toRender)\r\n\r\n#### toRender `boolean`\r\n\r\nThe new props object.\r\n\r\n### destroy()\r\n\r\nDestroys the component.\r\n\r\n## Injector\r\n\r\n### createElement(target, Component, props[,toRender])\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the component will be rendered\r\n\r\n#### Component `SvelteComponent`\r\n\r\nThe Svelte component Class\r\n\r\n#### props `object`\r\n\r\nAn object with props compatible with the Svelte Component\r\n\r\n#### toRender `boolean` (default = true)\r\n\r\nBoolean that indicates if the component should render immediately.\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n### createLinkedElement(target, componentName, props[,toRender])\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the component will be rendered\r\n\r\n#### componentName `string`\r\n\r\nThe name of the component as linked with `link()`\r\n\r\n#### props `object`\r\n\r\nAn object with props compatible with the Svelte Component\r\n\r\n#### toRender `boolean` (default = true)\r\n\r\nBoolean that indicates if the component should render immediately\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n### syncTemplate(target)\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the components will be looked for.\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise array for each created component that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n_NOTE: this method is NOT synchronous_\r\n\r\n### createElementsFromTemplate(target)\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the components will be looked for.\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise array for each created component that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n### findComponentByName(name)\r\n\r\n#### name `string`\r\n\r\nname of the component as previously linked with `link()`\r\n\r\n#### RETURN `typeof SvelteComponent`\r\n\r\nThe Class of the linked component, if any\r\n\r\n### findLinkNameByClass(Class)\r\n\r\n#### Class `typeof SvelteComponent`\r\n\r\nClass of the component as previously linked with `link()`\r\n\r\n#### RETURN `string`\r\n\r\nThe name of the linked component, if any\r\n\r\n# Credits\r\n\r\n- [Svelte](https://svelte.dev/)\r\n- Portals implementation was inspired by @romkor's work on [svelte-portal](https://github.com/romkor/svelte-portal).\r\n\r\n# License\r\n\r\n[MIT](LICENSE)\r\n","readmeFilename":"README.md","gitHead":"023be7d310dcc53330527e66b4cf65f2fc531822","_id":"svelte-injector@2.0.0-beta.0","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-E74Eg7FwXEni6slm71qZVOttpJGjqn512x0eZzIuX80XHdvA4oDUTwUqXz1HfiLGdMrDVCudQdEkASDEbHMx4g==","shasum":"a0d4f1b78825fcc3c671e7f657a3d2889b80bcd8","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.0-beta.0.tgz","fileCount":21,"unpackedSize":75592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggr6PCRA9TVsSAnZWagAA23kP/j0UGz0mpkeEx5GO5GSN\ny6GyMVq18VhucvqNNo8RPnvAhfaOnKAFgi9xLg4JX1NklZNNA54GVrLGHv/k\nezg7T0z+/EZcFz7izeV2WPA7ifsBt1JvL5XDhyE6ksPzaiN6hopsqALrLb0V\n8UkHUGPGI0lAVEDKFEM4MII/TdXFuOIQ5t88DCK2BLY4rt8iVQbrAC/OyQ/8\nhRlM6yvdaVzeMTmJEexI3cBjzsp7oMmceJW6ZrLaXJEC/gYFXlKLajp0wdD/\nYhxOeHAxV+LRAuO0MnPAYYaG7PsT7PaChuS6cUP9oWNOpK2K0LNQvr0z/b2F\nUeXiMAIcxcYBwLIhOFli4hhTasFAFl38YoBe7dI502Fs3CZVlsY91iECGFqu\n4GckKilao7KHqawqHBfWdFsImlOPeb0cEoiJnpxDNDFBwYCILeMm1sc/5mUA\nHwXW5dOmhLmHztiMPFr5DzLFRPkDlO09e1SACXUIbDQUFX35/XlYwJNz+NFb\n687DxK3iQQI5MKZdx/rJPT9iDwYslu78qicyXUmztQyLYRpeRIuu1PuZWZyb\nX8wPeUEysUtSvEZsrpuZGibQGKXpVHam+B45Pm3xEgYd1QrkWTcrN031/sqK\nQe+Wgj4FjokZzKj4uK8LGcT3NGpOhxOuv8Xp+B32u7RY38nT42Z6qOoQQ/Va\nwA/p\r\n=KVml\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICYNuae3TOkjQh1ZDcQCKHysKpcvydn6Pi5HOsL1ufQ/AiEA0XU96MafG4b7Rg18MBPUSpP1v6Y9RquEH9g0KX/tUrg="}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.0-beta.0_1619181198567_0.10935556146798375"},"_hasShrinkwrap":false},"2.0.0-alpha.0":{"name":"svelte-injector","version":"2.0.0-alpha.0","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","readme":"ERROR: No README data found!","_id":"svelte-injector@2.0.0-alpha.0","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-cPvzMytukkp9G3Bq4nd3qu2YjVEq4WPyi1mwISIVHU+xFWOTWsLBZ+lO51s9yrHSr8AkHG85ePI2vKR11CXJ2Q==","shasum":"f9eb863752194be8217b8c2f7bbac2cbb52d1f5d","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.0-alpha.0.tgz","fileCount":18,"unpackedSize":60317,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghay0CRA9TVsSAnZWagAAkykP/jFqMd2SRQqbpCkMhpNj\nJFYyNtgw2KizQamKBFKCBVLHE9ETzocFtlN02kDz6ovZ49QiyL3FT1HRzi0p\nul3d3M3vMZexbz/dHGZgQW3PsUXWRo35CIzyDZHg0VXzg/QTnrxb1UYCh/UF\ndGB/7Mt5OCszZ3FqUyx3sQijRY/+NZ03YFezQCfoo179HCJWcwFJrp49MJR1\nk607bw4of1bTexGFY9Zqwjri14TvirnHxduooRzRYiijtGcMfDsLB4dhGKGr\n7DqKmg1+iYJk4/2itYMCujdOJWZ4na1RDyN5nJ2l4np3wqyf6P3WAvoUdP6v\ndH14Rl7UFm/YJ/YjmnY2cG0sAsatu1txSKGEwy95uoTW+6CEan7R6gXzD8mA\nqKDYxunvmJGPL3sDeqJfTsI99i0Gblbwj/v7wQ1IlnLCP/K19VJqAfFg1NoU\nVuedlCVdXvejJPpnnl6znuKyyadEqKEA+qeIG9nol5C+IlLAnka1beBvCZvS\n2DgE6WPXYjVX1zXPrhKoHUOzoPlSecqQ8w3PgV1WrOG3zJ603KHQeqZWvC38\nJA80FNYpX1TtgxILSPVvy8mIKeOHSqfmogmYhKPW00D++D3hFcUIR5+FW8S1\n5V4ScGutmDG6qYc0J7eP/WH7jiuMR9pU5A6fwGG28M4MyvVVO0/nm/pHMElK\nprQi\r\n=Gn8I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDO9xSSxhaknQIQh7lYq2lABemfL//uteu6ABdrci55jAIgL3MIVLxcsLOswGwvo1p6fGtxxv9tuidFuGsZvlZxSGA="}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.0-alpha.0_1619373236301_0.11415084287757482"},"_hasShrinkwrap":false},"2.0.0-alpha.1":{"name":"svelte-injector","version":"2.0.0-alpha.1","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","readme":"ERROR: No README data found!","_id":"svelte-injector@2.0.0-alpha.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-boTLPidmV4LCvf7mhMBupH6VRtJ2zmg3gY4NWnIVFZkFIHZLYxc7Y1dlsfvaKOM8eknoEDCsoYrUvzlMbcSNfw==","shasum":"f53d9b08f002186f83013433a0a0a33d080c94cf","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.0-alpha.1.tgz","fileCount":18,"unpackedSize":51074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghd9hCRA9TVsSAnZWagAAqH8P/jN6sIL/YbUIMB/2i7mM\nA2fUBs7hOmuWsSxhCOP3SzYSvZILyTFKt+rEmn5thKs02MbyZ1K8O6Yz4GxE\nqQYTmN6pDGt7uve6GYMcnYgNOH9dH3d/U5LSxSNy/KjKX8Q/K/a+wsB3Xy2Y\n1U+8aBx8h4B4xCBctlk6LpacFjs1OzAX7Yb0dLiQ14tk//CxyQd5bbD7cudJ\nWbfWDZwqeSr9+qrrt4qPBmk+SoeqGBRwK/yMv0JsQvTRoT5raoL3gIC5d58v\nCsDMMp2mOPHaGgY301bm/jex4giWaHed+0b+S5Ks6lnW9LqzlBCKq7fBPJ8Y\nG+OpFHUz0qZU6N8lj8bxvmsSObG0jkT9x2nkYypJ6rt4XjST20EG05SoaJP3\njiKMH1Mn0FItmgjggMmFInWmSa80IX9cNi8mMrcBIHvEdC0xiBqAcROIzwaO\n5RpCqbmYDWgZ7+xldDPTAROOsn+VqCWik/4vvi8WHmuXWLe61FcZ7O5+SZTZ\nWduI1b1PxxupF+dZkRyqUKW6T5XLr2Sh8acjlOwYzZ7TgPl9ZXINHCD3iOfw\nn17Ixe2aA7fF+JqIa/G74j3laZrYFoHCxGqguOc0tBtyJIaUjXnM7TFYNV1f\n+9qLhxNLGBsA6D1PCgvC0+tSOy8MZR+o45SCRm0h4Uw/SLXL7LY9AdCi4aHv\nPqIS\r\n=I7mH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDde0g1Gh+M04be3mxlpjjC7KGMMJ7+LctV1BjYSvbMdgIhANOknmdBP3yO2k9vq8yCDLML4/b0hypYFwaXvz3nGirc"}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.0-alpha.1_1619386208630_0.14109607700793592"},"_hasShrinkwrap":false},"2.0.0-alpha.2":{"name":"svelte-injector","version":"2.0.0-alpha.2","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","readme":"ERROR: No README data found!","_id":"svelte-injector@2.0.0-alpha.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-jvokgI7LG0VXkTYs3aalhvJBNRjV0etiOwTImsJq7qwjZ1oJMaZsa071M+kxQ8fTHiQFBCp7szjxEuiwSMDt3g==","shasum":"9be9695b8c5cb345f083183ad460c52365ce7af3","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.0-alpha.2.tgz","fileCount":18,"unpackedSize":51074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgheH0CRA9TVsSAnZWagAA1R4P/3DUuL84eFfEPpEVKJHJ\nx/2BOY4Mtq9KJMr6C0G+ZRPSnfvbjsEJMPplqlf5ITKrLCVE1UYP0coJKMjE\nTopDfR/J7AJX0rlLfLqJ/rDqoZeOIcOD0Y5mRlICk1jXiHjLZl9iYXYMm0kj\nb5ccBW86p17u09rp0Ka0DflZ4/KpDEGSh/Ry/9kSHoHgTOCs0qgu7sR7CNpo\nIjRDfqjre8wh1JMthHlxl9T1IldEgNoQJdG6t7HWcJMuMUCd0tilnGHcby32\ntrGbjoHkM3LCqnKWP6v/k6AThwEhcYNWSVCsmEZqdaRJH6EsGVFhFhAul0WR\nZcau6xhQ93vsDRw9hw8ifxxDlo/amUSPQEEcmQ+Tg4WNLaltteVbdTvLe47o\n9Y9u8d0QBnGYEZhwUhpZ9ZsyRZnnoUQ2H1ifph5FpitKKRvqv/zBYfW5MPhH\nKa+n5ZciWF936k6kxaPI6323G7uiHEMwfcbK1TJxEqMOyAOfuztbR8Odxy3w\nvgosUdBEOUyZ5ugQ83SNgjDuIFvBKUSEE8xMCk5IikP4WfK9OS9DLJUVF5vR\nhtyN7VJjWcCwcli+CBJBry8UpcgHuErv0nLSgAiFlNmtikJSxE9CQ+EEZKYd\nA4qNB6dl/gM7ofVKQ8W7iCp2Egujz6gzw3qB5pSCDWZQ91iXkrDkRZpiAY8D\n70Hl\r\n=lMnv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQQF1uMAPFlGzMZTDFzH5+fRG8+L/buOzytNPk8+fkDwIgKanLst1ER7eZvftBdObPa/0nvcxfKCbC+FfZfCP0I5w="}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.0-alpha.2_1619386868435_0.9475376865494096"},"_hasShrinkwrap":false},"2.0.0-alpha.3":{"name":"svelte-injector","version":"2.0.0-alpha.3","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","readme":"ERROR: No README data found!","_id":"svelte-injector@2.0.0-alpha.3","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-dydOQOqiHzBea4VsjvFcxJLWa52f79OrZ1hKmClmnWKmgwYCFCW+WpUY2CJ9DI7da3n9+tWKBANRZMmkGGo4Og==","shasum":"c3294e15971434299569ee2f2b87e799b7e4541f","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.0-alpha.3.tgz","fileCount":18,"unpackedSize":44262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgheNRCRA9TVsSAnZWagAAH2gP/AmHnx3TaGdRepDhRsR2\nSBuxGw2OXBGq1Yy/E0kld5Ko2gVsbGtQEnH8nBN8dhV8TjndJexVMxAWr/CW\nl77O1U7EmC/MdT4Ng9crsfyKkMRQvGluYgixzSBjdOHx47BWPMmLnd5VF9qn\nnY/kk5PbeRC+WNw473fvrUc0CtNlJe8T7d83x0PNHqWh9NV22RzXJkkBIrUx\nqUhQ5uXKl1QRy2wz/Cc8t3o7Ieq3betTXtUw0pcizA2OKt+gGE9PGNM1HF6d\nI36jL75lvs+e6wLcg1Z3ppayJjozkEhZ+VE2eKGFEUjZf+7tyfJ6JaL7ARIq\nvdA4psL+BFHKECen7Q6E/BoCj0xtwjMoeMOQAGHKVpbf4lVyym0BlpNNNT6K\nsFXwY2xbEfP+NChImReL46tLQSOJQEQTMcyxRESznegcjfF5twhgZJKLF9ID\nPVcZNdWEhu5Ei7JmhHrULvczdqd5l6B7YDv/p1j/tVCp9xo324GJ6KuLx7mX\nY20sXEey09C955aTZcXPOYfQ1wOIamc126iIdKnD50Rc+GUaNdyu6xMQYFxD\nK0rdlWCF4udr9TzAYYvKwBFFWyNCHAFHnmk+7NnN9PN4aTO/iofu/Nweu7wj\noCaEkYtFEpf3Z4nQeYgEZyKX7ov/5EVfMCGrGh7/SUMdh5TlNjnwL4tuCiqL\nMOzD\r\n=DTXt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrnGpwibiJhX4JpySh+xjAqf7M8YtyBWclOvGsVHY0qwIgMCdt+TU1gk9Yc+xnwhbGu9TSeySc5vulwVWQPsGMUb4="}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.0-alpha.3_1619387216960_0.5522110325436465"},"_hasShrinkwrap":false},"2.0.0":{"name":"svelte-injector","version":"2.0.0","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","_id":"svelte-injector@2.0.0","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-K+iAfZQwlhKxkSD+HiGVROVe4o5GFsr8dZVbNYdp2MiVCdJXeSk8+c3A/KFEqaBFambbWaAgQVabzt1zsFkShA==","shasum":"9424519b8514a154baf7de7d5a8edf093e7e5861","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.0.tgz","fileCount":18,"unpackedSize":44796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghg60CRA9TVsSAnZWagAAho4P/iSlo3S+A3/ZssshQ6r/\nezr9kcuk8moLK8a1amKf8WzqdkOhI7e1BOBtSjQvMB3QqKhfgH69Oe7c5m7L\nOYU8gl8U2AKkeOnJRZJjfD/Fesmq+DnnY4qC1c8S76urE2q7dCjaXf91TiUO\nVXKFqNvUOSsLjD2tRdePbWE6U2ZrUMkwDTs0pP7+hPsvqYTSkhuHvcwXYqmQ\noslrmLo/IAB/GOGlOKi9833ltOMSIqgmKtBJsdci6vLJCY7fTAIAWyhBW5df\nrqYxjqQ5+2xkh9ChBzBFCelJJUm4KnJFhv0W2hFAPrJXIuodAkGkSMVxQEpm\n06dMa13+cx9NYdY080up6EAL07rsh/It0vLUoZSu/JmaNXyK6Ih5RXarcNmh\nMaSsYkGsLYgB1OJlsW/qmhpgT66PS/uj42RVyPIsauSXcXFtULOTtXuLl09i\nAlf7cnuY1vJg+MRczYz8zWargLfO7FixDDxyKxAhtAUyAVSTOQwtIq+XIpgh\neuWisHqGNC1Np10b21oi07akvdijFj0Z4B8RE4c0dtwOBDP7j8GoKtBGuZi7\nzlSz7a6rRAiHoKPJKAxBn3cYo+xdDzIdaaJo+K5BlJIwKTMO66Se+H2bWlAF\n0SbT3ziwOwS5DpB4TilusXPb2tK4TTXdGxlTvYcIlJ4a9XiKSZ9J40jQkz0u\nt4H8\r\n=UBco\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDH2lhvQo+dlOC3PK3xHevzJyK1GJvzHJfNRYLPqrzpAIhAL/Ke6MMkhLO/IHNu6SXut8TtUZQuI0m/hxLi4eWpA96"}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.0_1619398323940_0.0756385674040092"},"_hasShrinkwrap":false},"2.0.1":{"name":"svelte-injector","version":"2.0.1","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","_id":"svelte-injector@2.0.1","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-b0P4OrS93dI0NQY17CSA5qi/8eFMLD6y1to8X70Cet4XpQYK3cs33iS78D3+uP2rzY5vctV5bpu7FTE7fOwTmg==","shasum":"ea371dbb9333cbd23578d681191761a7aee69a68","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.1.tgz","fileCount":19,"unpackedSize":53948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghg9FCRA9TVsSAnZWagAAE40P/2NoWlXa5uC+EjKRIVVS\ncQbBAgcgV+ezR+q7F0/dMgtyCIsKa4OonG+Esh4izZlaDNpuY5vxEtMkBlwM\n/+NElvWZl6euGhOHNvfCz75EXUGW/UUy7t/I4u19d6b+2+lkzz7czzwCY74O\nNckklnNksPYO7wPa05240GnP0jcR0oYvi7kovOFJr1KyZxDZe1DtN8HOSifZ\ntOuYWdJ6QxOuCtWcmvV8WoxWJMkQDrRJRAWSa5KSz+OgfYTOsV7fNqVWDdHN\nuNAfo5RGBZrJX1tqev85bKYH/dr39gWokfcl9oiw4fGToZQeTsHto6ckaWlM\nM9b2F73AjwjlGJ+YHLvwVX3um/z+4chT6eF2tgyqzqbPq8QnxjXHOBnfxkVQ\nvhn28HkRfqWWxTW/bUirZA3XVGV7TSyT52ceFOeR5MomiTIyeAoUEesHyD3t\nuxNDEvD4Hs0IoOMAJoyQ/G+ZgT7ouOBOoN0jDVeCb51AboXMX+OyS1Q12epK\n9dEUMB3XLtYIVEy35W8I2jeei7Q8OWBoMvqH+Nu4O5vtns3W3W+XfIYYYc13\nohzTGpBCrQMqaemWWmK2ttTiNZIoF2ZD2wyHm+79nkkHSxIbqFuL1FQASNsY\nBqQhyGzhghjI0eBfP17R6yGeIHy8WqUvcX4ieTSn2aBqZ5TuDqt/LoJgOoWY\nXSi/\r\n=eb+6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVK3UOMSQJSh+SOgXzT8OhVmzvodG5pLfbbqLldG3Y9wIgWKg0kRdSq3DAHjbjUc5Qp99NPeWWQ1Sd0EOqKV/PnKQ="}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.1_1619398468934_0.5376780990240821"},"_hasShrinkwrap":false},"2.0.2":{"name":"svelte-injector","version":"2.0.2","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","_id":"svelte-injector@2.0.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-MiQsYESrCxaj9DrIsyS0rsoof6109rMwfojr/m3ZVqsEE9m9h8JerFDZ7h3FU80oCfJe9EosT+3JS8cacwW1Jg==","shasum":"cac6a9ee2e9a32978b3cddc3866769022a5d77fc","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.2.tgz","fileCount":20,"unpackedSize":54582,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghpovCRA9TVsSAnZWagAAPFEP+wbgQpXBw2ufx+M7/qC0\nqTxaqVHad6jN7yVP+1besq5acO2sHF+0ILqOLZeSzabd1SIO+V1BZigxuCjj\n/fQSOx40LnfWIVnbsr+wtae1ixxeUIyT5xbEpVgkwWzu3jcRi47DDkx4VG/s\ntsDz8MvEIwtK5vDpdy8Df7BIVY9OFTnRgjg9oCUdxFOmuzkEsRN8SrGa+k6y\n9jZOJP3QA6wKEMYVgKW6S6dMg2GCy6kSrC/HFSRV3sItv95tp7ddzcgNduCC\nv/KPezGmNpNCFH9TvwXJMFrj3V9dr0xBmBMCxrqJHI3OgZs6BfzFSZbr3zPp\nuxzrhrBN+Y4RjeiN95cMxg9yYZSuUePx1wCkf3Q4iGMwJ3nMSZJh6zpcy0ao\n56d9veZXkiKqAqUrjdTUha1mp3UI3ElYoBSE64P9UPaKE42axXQZe6rCaT38\nMdRDmGehXkU/EfsmATNPXEo2jBC3FxOsryhVriQ+IV/Q7LdBdjh3affLnQ1O\nZOashBghpwy/y72aWpVeYvBNp6ppImOQ/wTRluxPhG/o08jAeWdWEZ7f/2Sl\ngysIN1BJGFGsn/gY8Oxqp1Dy7vs9THm0iKvUNNlHJ77q31vyX7kyBbrT/MHt\nKgllfnDd2DEIMHyQh/GfWocSGKa/s6/TeRybC0kKt5P023uUBBOErKTpkdi7\nr6QJ\r\n=VM9f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFR0Sounjq9C0uA8LKrtji8UbX2kedyc487r94H1zIhkAiEA8QH6hOm8UxVrVIGQqJjQnYflqwGFEmetV2oLoo+I4VM="}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.2_1619434030341_0.4772867928349436"},"_hasShrinkwrap":false},"2.0.3":{"name":"svelte-injector","version":"2.0.3","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","_id":"svelte-injector@2.0.3","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-Iy6tPf/QgiTzBreyziCSwFK6dXM5F1mB5Gwz2dvLErcE35mI390n87075kNffln9War0CVxAbFFJq62bJ5ppeA==","shasum":"b65a1dbc52f7fe74b2c197019f0e91a4c8d8b03d","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.3.tgz","fileCount":20,"unpackedSize":56767,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiE/fCRA9TVsSAnZWagAA360P/2QBa25CeSej7/8pbhYi\nL5Ot7O49lPkIAcZXNIsGNWJSEG0RlPbkj7f6in+FnoE46d8UVlcmR0NFh4o9\nyBlA6WcO7VY2nnaa1Yoan2FPOcsxYRzFGYXDUxzUuZHfGsuLA0KCN+Rfy8he\nZh0/zAxtq1UCnTqeS8XPhvJwCy+vSjiBgwvJO5ciijmcQVj4wa7dH50LxGdl\nBE8yIbbTur3phU6vPn3seGMeC1Zt9tOOVQCenQ7gfQw26YDQ215Fm7314zVF\n2IK/jhxKX6CIYPCFLNlw1Svru3GSYoo3Yooth91sg9yitOLT6S2UzxywoVMo\n1VEXzLWG1ZJawP2mzVXItrvUWwfJM/5hOf6BbzxO71dA0gp99HMV+pt8YkwJ\nGQzqwiUmltPAzu3k5GtXvFQb9H61LTvioRy+w0yvT0CQVHZY1ULwRFg1R89P\ns8VPQTuzHnKJcPeH70UUEIPVBDlrbovUpgnmqIKGrfMYy5FWXTW3NglKSuQJ\nyjKLGGrMAwUmiFoudALgSNO2zels7pZVg/s61RynihisgDOdf/tzLDZysbw9\nyxqbQsKzmV+LMe6ycmG9+F5Ryn6FiLDBJ3Vxw0BHhEKEYs4KB2SCSHKLhgvZ\nhJFN99jVEg9AIBfp54STPyrCgUZtvP0XL596sq41TPMXA+Df9QVKCQiRaDvx\n53MU\r\n=VIIH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGvTfWhPw2U7pmi52dz1OZl4Sk5pWpmh+TUB+vOPGI27AiAz+eM1spCJuCHD9bqJOQD8NJgycdpb/h0cIYX+d37pcg=="}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.3_1619546079232_0.8496745787526536"},"_hasShrinkwrap":false},"2.0.4":{"name":"svelte-injector","version":"2.0.4","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","_id":"svelte-injector@2.0.4","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-PdO3TrSI4U0kg8xF25gX94F1FGBMsIIoYE+1GFTc07XSPi5R07YDGS8OLtq6dD3OTTVklQzKLj59LcPLeug5+Q==","shasum":"473483bbac4b679d9d61c8eb92bddfb9d5cdcff0","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.4.tgz","fileCount":20,"unpackedSize":56872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgistACRA9TVsSAnZWagAAaqgP+weOzQRadkM5VOqvRPof\nJZXDIj6jVukEKdv9Z09C4p2ZuvALB10DmXpQNubZ7NRbtLRUyYqxIqFh51V6\nL6ieXsXr5qtsrgUQxn9Ry5vboVNp0++OSg0R68IqJVbMuoFknJkaksdkVyeB\nUD4E55XSrWlaOAWvkgos0t/gGuMdNNxBP8wRDh711qNxqSw9HcxAadpattWD\nDNOXQbyzoHAXbBEYQIX6sWQiwJZcwB82zgSCvMb8ipDtY+wnQRd5vG1n8Nbf\n/7CHLveA/V23qjLIj2ahbAhL9z8N0rq1IYKnCKELMzZAGQ2Yi7M8APWaq/50\n+7L3URTH+eHaG7LZ9uIgN/Lfhz+ePfBJsuQlMMc1YE4txyKeM2+vhmZ6H9Fq\noOwaDqSVvs83PL6Cn+yjMt0RR3J0kJmEPaveQmX6P4pNKRUfUtFBOW0561Wt\nqIsutB5ICdKsFHY1tjuvahgYwix0isNJ8xA6pnwOqUTMkaFQ9itVFQ31vN+k\nxUt325nchtJis8Bw08m7Y8qJ5ujQTXjt4ZX1ZyBytJGHBxfx8n8StSqGJCf7\nFMUjbSKbwOnpEo/wN9l2AJOMf67jPvA9VqmLTvTIDGwTIPqFoHwEbIa4w2PE\nAxkYZzBTY2s7h1ce6vobrdDPjRYbplSVof8BID/nglpWmLh1hp4vSXEKj5ls\nqt+J\r\n=AFKS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBxTH1n6R3OyFaJbPHYLH4oytp5h5qgKZULTTBLePLdCAiByOpW8HwV1SPeMBmEbYAEAw2ZVhiqIzjO6nqU+zLs8aA=="}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.4_1619708735478_0.6537567912868054"},"_hasShrinkwrap":false},"2.0.5":{"name":"svelte-injector","version":"2.0.5","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","_id":"svelte-injector@2.0.5","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-hpaaq4jB89e3xfyaf1Xq0EpXf0jQ+6aLJqXVb4kWjAAd76kekRJH6oecRGRgLc8TBRDEeUN2xONx/k4LbdxubA==","shasum":"7f47a5da025b1b5eed03ccada7db1b5cc8f539d2","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.5.tgz","fileCount":20,"unpackedSize":56872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgis11CRA9TVsSAnZWagAAEJQP/ji8wujOIgtLCHiNIaqc\nKl1vqLiC/J5BMLxct+TcaTrHQLInYeqIamNRp+/ZAgXINnphcP7wqLfKaDUr\nAZKVCwMi9YLk2UMHjk5BfG2VNVMIyCoVgqp58Um3ufQfFCtFdAEHoYpbuD/R\numtr9hD5spygQw4ZWepcge4eowxKXOn2FpZzIudLPUhi1eTXg8oStm2ZmbIO\nDAAPiX9rBQTbvb+lU6xqTau420BtRkFKFsGyp+6KwmlNklY8QRcoqHcTsWPV\n1sN/LZeFe9/HIBimO2ZxxXghE0jtveQeSME7cYZD+KfPg4rLo105XzOHbxu4\nqNe390E1SC60dCvFxKzknPJQjYgCgxEvpS1C6FN31aFGx2Bo0yyol/Xv2TKa\nNf70m+zRFe7+pBWAFkOHpHt1KHaxXWsmr9tKj84RyeZf8/H97GBlaHfdxP22\nyJhkYG8lznW1VytoE6zLuClcxlMLhbopevnr4I+x45kYv+iPB72QLby2rsJc\nuCZ2CTT7RV+C8F+AzLpVetzCQudJLQQBTyVJAstoSPcBaxmlG6IMx7SGzHvL\nik6AWzTsWO2kZCd4QnH5tGnsyn4ZLHhGr5iB9zKOjC5gd84i1+36EhWQaB7X\nU6mlg43jAjatGcUTHmcexGRRKLk5gj/qvpHPnMl0zQfxRGvV89fjgmQiZ5OY\nufZx\r\n=d2gA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTStafPkuZAUNh8CCrVNBZTgMHcZYAnxWJ5mwCrDhnZwIhAPbkiY6c94RpWUxpKA0XnwyXwV96+QY8mwVlL9201fsF"}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.5_1619709300975_0.12412334799196367"},"_hasShrinkwrap":false},"2.0.6":{"name":"svelte-injector","version":"2.0.6","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","_id":"svelte-injector@2.0.6","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-xuQiKOiV1o3oIKD8srbLfXx+l8bQNtOKrYnMOrzbfESvJgV/nID5eg+D2cFln3sojceInFdZ3qzy8cOnApP7RQ==","shasum":"f24eb56791c1f3e3e80e7f345ca864e0ff06cbc8","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.6.tgz","fileCount":20,"unpackedSize":57147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgis4fCRA9TVsSAnZWagAAMscP/3T221Cuq8OmiZ5zvTIQ\nxScGtRQzuDc34XL6rQ8d0/nQbgGgiihFk1K+M1g5uMZWxa2Q49t0wU9wLV8r\nuKmWxFdP+9yFZcwfwUAu2ca8pXDYQWvN0pgyKGvXNcqnDYfZJErjiLlxqlSn\n+UPcGIsmFQHelxABlmpT82lE1z3MpJexYgGrfcjWx2PMCiLPcxjHHTWWeNbT\n8wpT1AOvPwwtTG9pWXn+hxc8fFQFqb6OPvrAVM3VqvJ7IlX6EaRcvZDJFGdZ\ngZa6c/nS+xG1VbSXoVgE+Vm46n67L+LCx+y2UfgB3ieAzgGSvXDMrDWMN7id\nJnL9/h+qAaQIsVdSEcK8SvUNkL3AmFqFguwgPtLH5ONh1PARSmYpqEUUcXz/\nfWWzwqKCxk7TkDDAeufX6m1W4SCLoGaa7L3Em6PBeczRCsdahLipbdpRjh1X\nd9sfl31UYIqUKbm4FCY+JJIofRcPH1ENZuoH3rWBrMqT/Apat8PPxKXOwxsh\nTKcXq/DkZWDh0sv11+wB4VPy6v9mfdKi65uJHqslEv/SU6RZFHRlq63dsL0T\nTa9MNpfmcGrNRtp5k4J0i5qoWkVlaOBakTlOEpyF3C5f9/q4Th4CgO4qFfoi\nLhEkBFR+8gLz2V85flc5UYW2jCSCuk+tvP5VsX4WLkcCFb5aO7pp138ILpl+\nhhgz\r\n=lZ8U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGdwPy4UqFYioJRlsqcBOoIDIf4OMXBqLUrr+CE+BGJvAiBlrOxRJlExKdthas5sXXGbzdVDsOsZhSWZMfLVRyVcfQ=="}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.6_1619709471429_0.30189681663558066"},"_hasShrinkwrap":false},"2.0.7":{"name":"svelte-injector","version":"2.0.7","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","_id":"svelte-injector@2.0.7","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-9SunQe0eal7pGS8Ix+cueaBX8eqyXBOkWf57IJ023ukxrDFUIOHtsEke5i2kq/R6Qnjv6sXAvD57YRYXgD90Vw==","shasum":"219cb1ab83fe8f0b1e1712a3d4b141050e142f44","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.7.tgz","fileCount":20,"unpackedSize":57335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmPdICRA9TVsSAnZWagAAMskQAIkR/csiI52NVtU5omD1\ncURF/f6PG7tEszvsfPgF3GLhAepVenU/5DyEJNg2r4XQTFUPonmFz0Xjmzzz\nYpR//uAjODs69pows4KzcowduEMUQuxtTVkLv+nfHjVuoYdiYX6BUpYEl7RE\n7ygaHgK04Ew9yCyIt8/mqsn7Y+H1byd0IzikMTekPQDr4HSs1Fe0P4hTI4zL\nIhozOeQCgHbmBJzoDnncf3PlS0QRxEjHne30j4l4a0lED9vUvTijQHjpJqNM\nh25swo8I1nYyfvgxCbXwH1lzaf6b27s8d4TrFxopB53k3ZMbeqGyRwUS180e\nezi8/rmXdOXk0iU/1nIix8IQxmTN/qYV+OH5cIbTqbQ9Dy5MAKbh4Upd3moh\n6fNlE47dcLHd8pajTY3RualiavPQEAv94zYXcN3qRN1JBbBGecl4SkDv59xB\nhP9yWWZ4+IqAKBzbqby4CMo375sRQgFJ3EwZ9aXuZenMmrRvNREZdPu1fdll\nCyNhqKdWq7ArxEaaNOr+Yeq/KPlETb+t+6STDD0KG7idpYuUZVcKpQhz9qxg\ncmAsq6gLBDKroltX+qc63z+q9EGYuosNwhApKeBq//m9Cik/+cVZvHBgyV7Q\nvf+IctUfle67KzvUISnmekYt3I56Ky/dr5A+t1r6FwjEAAvx2KyxvwQdQI6Y\n3Tu1\r\n=ArBj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDX/eOPmLYbxGcURvV/XvLCDHTjtJSBr9FHYKxEyJl8VgIhAK9rJRXreq+gaQ6IB3tyMF4wt7omXjRZQ8jW1EIdLnrn"}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.7_1620637511903_0.04649705710583496"},"_hasShrinkwrap":false},"2.0.8":{"name":"svelte-injector","version":"2.0.8","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","_id":"svelte-injector@2.0.8","_nodeVersion":"16.2.0","_npmVersion":"7.13.0","dist":{"integrity":"sha512-VqL60VuBK9IhNJQJ6vaI3EusoM88Pcm2euzkIl6Uuro3fmGPBqLd9KEzve6z0BdXhLiM9W0YGKB5ACB8xHeVEg==","shasum":"ae48eafe3b37764d10590b4cf6123fdf3f763b2a","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.8.tgz","fileCount":20,"unpackedSize":57398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhADd6CRA9TVsSAnZWagAArn0P/3fgdJsks+SHxzk5VqTi\nza6B4muFE+x0E9b43lPue8JRvjyZtnZO9V7s75ZrzVxwwHav4dvOf8G9W8fh\nNKzrwVJ20YBtxsjFhQRydZ6y8MghplfrldYfJhMXWJy4xqKwka09cHdf6rml\nB5U2QcO5UVUOfVGUgjRhg8o2EwoHfPNgQGjcz4cN2yONz1SlS9+IoAZUeRXI\nwZBqPNULcWV7zf3nmyoTBdPDsbmM34+xTcdSOdmeGE3LLMtAQ9y9ywep+Dxz\nkqBrADwMgJNmsgNhd0HEiogY59kH1d5SgHDSwxBTb4VjAGvHXSV9M5XRWwS6\n1h1miFPIl5hFiBfCbNlmsn3X4O7pp/7UpS1Rw+gZ46GKASe11+FK+mEGIxbm\nEYSmrn+FeyQicDkdKe0NZNfZkpo+AAmhmjEaCelkp2UTeTeE4qpA7cDQLk9+\nXwQ6l7nkFKzXvFa9dk2m3pDhkptPr2QZCKz+Ap4+35yS5jJB3b9FPQpaWyr1\nbx7b0L//RUZDv2CRA7MClRbW2Z+M2vT9wZxBNuWUk+znvZBOV9Z1iPrvokA0\nfHKqlI5X2tjlziGOoHFQx6PIq3oJe792gditAcqFM+t6OH0DeJwyo3rOdGW0\nzzvsxgNMugBGrpGGikL1jzvoLB0tPrXXiFyN780BaP+x5IsSoyX/nt1tAV6k\n4X8w\r\n=0zYu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAWZZbNAvF7NvJ/BQ6vBWydLJQMbzbz0tXjwrQpkwA8AIgYEZQsk3/RyJ3bR+toPrEQHxOJpZD4WQWaQ0kVreOmKE="}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.8_1627404154310_0.36153883254287744"},"_hasShrinkwrap":false},"2.0.9":{"name":"svelte-injector","version":"2.0.9","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","_id":"svelte-injector@2.0.9","_nodeVersion":"16.2.0","_npmVersion":"7.13.0","dist":{"integrity":"sha512-+Kn5z0NgjQbCW5aEa5UOQQ3t1UuJyrYpfBJRHuwYcppZu4454yv7Bd2f1e3YLDPCH62G85wQdJMhMavRomlKag==","shasum":"5ff2c67401e1341986f4b22d0d81909c6ec16230","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.9.tgz","fileCount":20,"unpackedSize":57587,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRSPzbcT7lEKyYRezWf1lhnRdoeUf2mhM9tYUToMUs7AIgAlTxuK5IZkSKVQru2wQNf/ZAH3Ygj19ARMKcbkl7PfE="}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.9_1635853544856_0.7731527870096493"},"_hasShrinkwrap":false},"2.0.10":{"name":"svelte-injector","version":"2.0.10","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","_id":"svelte-injector@2.0.10","_nodeVersion":"16.2.0","_npmVersion":"7.13.0","dist":{"integrity":"sha512-xP3h3FcgZlNBt3Zk7dOYQa7VXC0Flq3Xtg4abr52oPAToJ6ep/Mb16XBkAOCHf4ywZAXaBnJ6a013ucvvoHSXg==","shasum":"6163151bfcc67c0efc9993c9a8e1a2ef9eb63c8e","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.10.tgz","fileCount":20,"unpackedSize":57681,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEsme7dbkWRVh2dz0/EobXySXRCIq1I1e/wiCxwRlFNYAiEAzdLF3v8ljl820MH55+KxbK2+NvzxLXpd5EpjfCSHNqg="}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.10_1635854570902_0.9793311173050903"},"_hasShrinkwrap":false},"2.0.11":{"name":"svelte-injector","version":"2.0.11","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","_id":"svelte-injector@2.0.11","_nodeVersion":"16.2.0","_npmVersion":"7.13.0","dist":{"integrity":"sha512-bq0x8y6Ov0P9MOWeWa1XnUQkbI0yRNjgika8vwFRxAo893qnx47Hpyz3HmvWr3RkBztSuujHplih7v6I+hk7pA==","shasum":"f8fe8f2055772bdf5e858ee1f6ae589f1bec4991","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.11.tgz","fileCount":20,"unpackedSize":57950,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6oqD93ny+iVmcjqM3Y+/5XSfDRns6V2wIGGgm/ilECwIgDb6acYtCjlQX3d/OCZQ2TtjD+g47W6soPxCcnU4VOck="}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.11_1635862422014_0.20889507481895775"},"_hasShrinkwrap":false},"2.0.12":{"name":"svelte-injector","version":"2.0.12","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","_id":"svelte-injector@2.0.12","_nodeVersion":"16.2.0","_npmVersion":"7.13.0","dist":{"integrity":"sha512-0OmSbaGY1kS97QZ0aDqaSK3f9b2sDaK/yeDkqnPk6e/xjwHPkBqg+K9oYQP3e03+i3suaPV5wo0iBIi1rnpF6Q==","shasum":"b26a7a30eb52a49d230ff8ea70e68c0defdd70e2","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.12.tgz","fileCount":20,"unpackedSize":58027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpNZwCRA9TVsSAnZWagAAcakP/i8pyf68/C+mGbonUoHK\nHbG5E/CgbyFVYjddxW2xWUY80JXl1NnpVg4WuqLMZ3CMc6xGnbAcZSC+/ZAW\nUyEl9Y69s+5uDY3YQAo5INz9+uae0sEmglczFqrKrBP9GTPLb7PbdpeRtru2\nXQsfXtNDem06YNRIkZK8p7HovSxGYwVbVZ/xafux/A+Gyhl+jlp0M3BodqP+\neydmWEsOG7j6uXVn5qTe224YX5qDn543tyPCTrEdxmNMsSg0/MRRJhsLMJB2\nly3WimvtKpVJRnbWjxU+VMKAh75cWBWSgFaPlEdiUEfvoxTGCdtxJonEgdDv\n8dgzai8myi4AhHphSDZSX6v3B8e1IhFJidkA2qSn2ZBxPFN82zNOoTmXLOQ6\nOy1O36zwz2QNaIGFO23CR2HfxUOGSyAW4oAJcAgVekT0wq+0J+ZI0+2VFrUV\naeYLjgSZrS1hR8qftAss00lpB7k11/y6LWGNPY9D9EXHNBN0KIaJWkYbTmuV\nGblpnhPZ6kH1nMZ94PtD+f9XEfhhCjdcxF9promZwnnJVR9HYgpyttd3I5gd\nheNU1Ja/bgPLt1lkxSendbCzmOL7PSnaQrFsiGhJ82D9qzsfpWKnzd/vt6OR\n6wNQPIgqkz5NhDMahTMrLTTtaEUzoSpgVuEq/x4DNtDqL+ach9x4tz7PWrE5\nrQ4Z\r\n=DNsg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGhIARvGQEsnMlIzSD+mTUr3ZbKShH2jK4+yLAqh1qiKAiB+qSzOqXzTKT6FKkzp9d3rQtWUfwpl6/oFOWs1oHR6ZQ=="}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.12_1638192752751_0.5587488993178571"},"_hasShrinkwrap":false},"2.0.13-beta.0":{"name":"svelte-injector","version":"2.0.13-beta.0","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","readme":"# Svelte Injector\r\n\r\n> Go Svelte one component at a time\r\n\r\n## Features\r\n\r\n- Use Svelte components in any framework: React, Angular, Vue, jQuery, Vanilla JS.\r\n- Easily **migrate** to Svelte while keeping older code running.\r\n- Built in **React** and **AngularJS** components for ease of use.\r\n- Write **agnostic** Svelte components. No workarounds needed.\r\n- Uses **Portals** to render components where you want them.\r\n- The Svelte App is in your control. Use _contexts/store/head/window_.\r\n- Support for **dynamic imports** and **lazy loading**.\r\n\r\n# Table of contents\r\n\r\n- [Installing](#installing)\r\n- [Usage](#usage)\r\n - [Setup](#setup)\r\n - [Injecting](#injecting-components)\r\n- [Framework Integration](#framework-integration)\r\n - [AngularJs](#angularjs)\r\n - [React](#react)\r\n - [Angular](#angular)\r\n- [JS API](#js-api)\r\n- [Migrating from v1](#migrating-from-v1)\r\n- [Credits](#credits)\r\n\r\n# Installing\r\n\r\n```sh\r\nnpm install --save-dev svelte-injector svelte\r\n```\r\n\r\nThen configure your bundler of choice to accept Svelte files.\r\n\r\n# Usage\r\n\r\n## Setup\r\n\r\nCreate your Svelte App: --> [reference](https://svelte.dev/tutorial/making-an-app)\r\n\r\n`src/svelte/main`\r\n\r\n```typescript\r\nimport App from \"./App.svelte\";\r\n\r\nconst svelteEntrypoint = document.createElement(\"div\");\r\nsvelteEntrypoint.id = \"svelte-entrypoint\";\r\ndocument.body.prepend(svelteEntrypoint);\r\n\r\n// Create Svelte App\r\nnew App({\r\n\ttarget: svelteEntrypoint,\r\n});\r\n```\r\n\r\n_Note: Svelte needs to share the DOM with your existing app. It's recommended you don't use `document.body` as the App target while you are migrating._\r\n\r\n`App.svelte`\r\n\r\n```sveltehtml\r\n\r\n\r\n\r\n```\r\n\r\nUse `svelte-loader` or `rollup-plugin-svelte` in your bundler. Make sure you are not excluding `/svelte-injector/` as it lives in your `/node-modules/`\r\n\r\n## Injecting Components\r\n\r\n### Creating\r\n#### Imported components\r\n\r\nImport the component class into your framework controller, then use `create()`.\r\n\r\n```typescript\r\nimport Hello from \"./Hello.svelte\";\r\n\r\nSvelteInjector.create(target, Hello, props);\r\n```\r\n\r\n#### Linked components\r\n\r\nLink component class with a string to use it anywhere.\r\n\r\nImport your components somewhere in your bundle (es: create an `index.module` file)\r\n\r\n```typescript\r\nimport Hello from \"./Hello.svelte\";\r\nSvelteInjector.link(\"hello\", Hello);\r\n\r\n// OR for lazy loading\r\nSvelteInjector.link(\"hello\", async () => {\r\n return (await import(\"./Hello.svelte\")).default\r\n})\r\n```\r\n\r\nthen use this string as the second argument of `create()`\r\n\r\n```typescript\r\nSvelteInjector.create(target, \"hello\", props);\r\n```\r\n\r\n### Hydrating\r\n\r\nPlace HTML placeholders and then `hydrate` them\r\n\r\nUse this notation in the template:\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\nThen call `hydrate()` to update the components tree in Svelte.\r\n\r\n```typescript\r\nSvelteInjector.hydrate(target);\r\n```\r\n\r\nYou can use `data-to-render` attribute as an `{if}` block in Svelte\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\n#### Hydrating source HTML\r\n\r\nOn multi page applications you can create components directly from the source HTML.\r\n\r\nIf any page of your source contains component markup, just `hydrate` the body to render them.\r\n\r\n```typescript\r\nSvelteInjector.hydrate(document.body);\r\n```\r\n\r\n_NOTE: make sure to hydrate the body only after linking your components._\r\n\r\n# Framework integration\r\n\r\nThis project was created to easily migrate apps from AngularJs to Svelte, but it is not framework specific.\r\n\r\nSvelte components should NOT be aware of the fact that they were used by another framework.\r\n\r\n## AngularJs\r\n\r\nUse the ***built-in AngularJS component***.\r\n\r\nLink your Svelte component\r\n\r\n```typescript\r\n// /svelte/index.module.ts\r\n\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\";\r\n\r\nSvelteInjector.link(\"component-name\", Component);\r\n```\r\n\r\n\r\n```typescript\r\n// /angularjs/index.module.ts\r\n\r\nimport { svelteComponent } from \"svelte-injector/angularjs\";\r\n\r\nangular.component(\"svelteComponent\", svelteComponent);\r\n```\r\n\r\nNow in any AngularJS component you can use:\r\n\r\n```html\r\n\r\n```\r\n\r\n#### Bindings:\r\n```typescript\r\nconst bindings = {\r\n component: \"@\", // Link name\r\n props: \"?<\", // Props object\r\n toRender: \"?<\", // Ng-if\r\n options: \"?<\", // HydrateOptions\r\n encode: \"?<\", // encode props?\r\n onMount: \"?&\", // Function called with \"element\" param on mount\r\n}\r\n```\r\n\r\n\r\n## React\r\n\r\nUse the ***built-in React component***.\r\n\r\n```jsx\r\nimport { SvelteComponent } from \"svelte-injector/react\"\r\n\r\n// Using the class\r\nimport Component from \"src/Component.svelte\";\r\nfunction YourComponent(props){\r\n return \r\n}\r\n\r\n// Using the link name\r\nfunction YourComponent(props){\r\n return \r\n}\r\n\r\n// Conditional rendering\r\nfunction YourComponent(props){\r\n return \r\n}\r\n```\r\n\r\n#### Props:\r\n```typescript\r\nexport type SvelteComponentProps = {\r\n\tcomponent: string | typeof SvelteComponentClass;\r\n\tprops?: any;\r\n\ttoRender?: boolean;\r\n\toptions?: CreateOptions;\r\n\tonMount?: (element: SvelteElement) => void;\r\n};\r\n```\r\n\r\n\r\n\r\n## Angular\r\n\r\nDocs in progress\r\n\r\n# JS API\r\n\r\n## Elements\r\n\r\nInterface `SvelteElement`\r\n\r\n### ***updateProps(props)***\r\n\r\n#### props `object`\r\n\r\nThe new props object. All previous props will be dropped.\r\n\r\n### ***setToRender(toRender)***\r\n\r\n#### toRender `boolean`\r\n\r\nSet if the component should render of not. Useful for conditional rendering.\r\n\r\n### destroy()\r\n\r\nDestroys the component.\r\n\r\n## Injector\r\n\r\n### ***create(target, Component, props[,toRender], [options])***\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the component will be rendered\r\n\r\n#### Component `SvelteComponent | string`\r\n\r\nThe Svelte component Class or the link name\r\n\r\n#### props `object`\r\n\r\nAn object with props compatible with the Svelte Component\r\n\r\n#### toRender `boolean` (default = true)\r\n\r\nBoolean that indicates if the component should render immediately.\r\n\r\n#### options `CreateOptions` (defaults)\r\n\r\nObject with options\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n### ***link(linkName, svelteComponent)***\r\n\r\n#### linkName `string`\r\n\r\nThe name of the link\r\n\r\n#### svelteComponent `SvelteComponent | function`\r\n\r\nThe Svelte Component class or an async functions that returns one (useful for dynamic imports and lazy loading).\r\n\r\n### ***hydrate(target[,options])***\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the components will be looked for.\r\n\r\n#### options `HydrateOptions` (defaults)\r\n\r\nObject with options\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise array for each created component that resolves the `SvelteElement` when the component is mounted or created (when data-to-render = false)\r\n\r\n### ***findComponentByName(name)***\r\n\r\n#### name `string`\r\n\r\nname of the component as previously linked with `link()`\r\n\r\n#### RETURN `typeof SvelteComponent`\r\n\r\nThe Class of the linked component, if any\r\n\r\n### ***findLinkNameByClass(Class)***\r\n\r\n#### Class `typeof SvelteComponent`\r\n\r\nClass of the component as previously linked with `link()`\r\n\r\n#### RETURN `string`\r\n\r\nThe name of the linked component, if any\r\n\r\n### ***generatePropsBlock(props)***\r\nReturns an HTML string representing the props template HTML element, as expected from ```hydrate```.\r\n\r\n### ***serializeProps(props)*** \r\nReturns stringified (and encoded?) string from a props object, as expected from the parser.\r\n\r\n\r\n## Options\r\nOptions object are the opional last argument of ```create``` and ```hydrate``` methods.\r\n### CreateOptions:\r\n####observeParents\r\nCreate a MutationObserver on the element parent and destroy the component if no longer in the DOM\r\n\r\n### HydrateOptions:\r\n####observeParents (default: true)\r\nCreate a MutationObserver on the element parent and destroy the component if no longer in the DOM\r\n\r\n####observe (default: true)\r\nCreate a MutationObserver on the props element and update the component on props updates.\r\n\r\n# Migrating from v1\r\n\r\n### Methods:\r\nThe main methods have been renamed\r\n\r\n_createElement_ --> ***create***\r\n\r\n_createElementFromTemplate_, _syncTemplate_ --> ***hydrate***\r\n\r\n### Template\r\nUse of ```data-props``` attribute is no longer supported. Props should be expressed in the new template format:\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\n\r\n# Credits\r\n\r\n- [Svelte](https://svelte.dev/)\r\n- Portals implementation was inspired by @romkor's work on [svelte-portal](https://github.com/romkor/svelte-portal).\r\n\r\n# License\r\n\r\n[MIT](LICENSE)\r\n","readmeFilename":"README.md","gitHead":"786e0a07b9c878142976bab579356346829aa9ec","_id":"svelte-injector@2.0.13-beta.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-k2eLGRe5f2e6fBVeoUaokoRF5rJ+nYG31q4SCaPM6zzsMT7xxLH/6LniQvuKHxat0DdwfRT++dbpsbGhV/qiQw==","shasum":"31b7cf401146e53043d9a1154f87f62cbc66e798","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.13-beta.0.tgz","fileCount":20,"unpackedSize":57644,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwyj4HR2XIHRUKd2OH8v8zj4uaAsb3CJh765G5GuN61gIhAITmsc6IzAURVa1G+HH5hE8L9D8nlAS4eiFrKWiLYhxU"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJij6oNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmot/w//SqG1yvC6+M3Dt+4ny/ziixc7U1kBTni+DmWuisRKxKxIIxsL\r\nepwf2ShCvgHrZPBxk5cdRM+NSiuNhJ3VanmsVf0HvULWvofxyOhk76Vsz9EY\r\nb2mX9tiMrbHaOtdrGLupXi34hUktmCrvdtBIF9skljYbG6erffiMo82f8NJQ\r\nUGMCY4K0NVu3G6rUMeA5NSynEE5DhFLas8M6bPpUxsmVDrM3SUtk6ufdkCcj\r\nVsiZWQ1VbaOJaqzM4Qzm1b9BtcnuRZnNvfwuzGHpUOPfpPedIdc3NZMzQBo/\r\nyDEMBfM8O+ZawplvDxk0IJP4M4mgXYREDDOmycyFoY+mEgaBVKWYxiL5U6Tr\r\nPCRAjgvybSGRtfy+l46N0Q3WBLkUYmuGUjOynF++8tdY8KpsGxYfyBAf6X3F\r\njBrmbPWIVPL5unHNeQ31MvfPuxD0Qyi0FN74DX3wTgK8ulH1JSanEWedOLrb\r\n5BUV+tWkh8FUuTx7jjYkRgac8idu4bb4mdXlBPyexP72+0wbxugDvsBX73L4\r\nNhPvwi0FrHrVlcBLxofpwP5RV04Ueg2yaRbKuyHfq6mGYViZ4MczW2ucXcVm\r\nZa/JR6Hl9chv41zTWi/UXaq9G8IO6aYhCqtotzt1AADgud9VaA5PL2Z9DBMl\r\ndtSHWlMzTsbZ30Fjm9697NGPJa7pXlxD4Ec=\r\n=zvKX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.13-beta.0_1653582349265_0.4834071461964251"},"_hasShrinkwrap":false},"2.0.14":{"name":"svelte-injector","version":"2.0.14","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","gitHead":"bfe17ed519121c455471b6546c91e2628b9ac4aa","_id":"svelte-injector@2.0.14","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-/K1M40eHSZ5kbmT/ewomVVmDklcwwfHEqhFz3IfYedR3+OAQ975Cnk5S3pqz+ppKjneviBTxHyONADyJz0RsrA==","shasum":"f5e302a0b0779a2d9af793d454e356db0abf9c4f","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.0.14.tgz","fileCount":20,"unpackedSize":57637,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAIHvksA/IID/5NGdLtkK3hG0jzf5LfgoQG29cDwe1TyAiBQSyRmaNZb+R4z5WzRA/pkyza0l/v+pdgUhbD/9ox4cA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJij7cPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHUQ/+PKWGyWwlgzzNACGmRSxAVGZLh6gqbcb+Bn1d6Vu9TiYdZhjU\r\n0pWGlE85AY9mwuWivywwXVNC47wHl0q0pKlRnAn4eVqMxFr4rGWW5/uaRqqz\r\ntA/FYGxEKn4+AsLwQcLS5Y2oBz9MK2iovmLwAqvbrwYmyGYMcKB+HZg3vJg2\r\nXXJAzS5xw2PB+Lx+i3gccWykjawC04NXvGFl4ga6v3LaDtYeFyCKuzaFyScG\r\nK7gT8WNxbjwmebCEov7NKomWYbDRGZOfNImkBQQ1C/IzJarxsEc1ORtl3+KZ\r\nvdC7WkiSOCWFgKO7Nz9hAdvM2YTdVXWH1CU6OZKR9MLjSD736FvTBSWIRGkI\r\n25H3yQj0O+iv7MkSaEoqorvtFLYhSNBLDYbXAB91HAeAZrCJv7Bft2EM+ONX\r\nMY0ICGSIK/10rJLiHteEZmyAs2GzF1aDSBmq97aJfUblV3V060lSxUoqsv1n\r\nVxGwJTjJDtyZFWD4FxMSo9JS5AA1x3XORuavnU5n2wG3pKU12QNqrWC1RWNF\r\nH7Tqm2ML3McSkynuk9HXXvBtq+yNAv0YDA1p+LZcXl/CQaxdQ0Z2ahPETucr\r\nGYM8XKIJoK7DBTLvkGXBSWKpwjCwgSmyOo2iv2QOF11+9FzBGnN/sprEo7dX\r\nxKqpSZURe2fzm5Vyv302GcjGvhbqER79QYQ=\r\n=PzJN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.0.14_1653585679585_0.22829833932326782"},"_hasShrinkwrap":false},"2.1.0-beta.0":{"name":"svelte-injector","version":"2.1.0-beta.0","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","readme":"# Svelte Injector\r\n\r\n> Go Svelte one component at a time\r\n\r\n## Features\r\n\r\n- Use Svelte components in any framework: React, Angular, Vue, jQuery, Vanilla JS.\r\n- Easily **migrate** to Svelte while keeping older code running.\r\n- Built in **React** and **AngularJS** components for ease of use.\r\n- Write **agnostic** Svelte components. No workarounds needed.\r\n- Uses **Portals** to render components where you want them.\r\n- The Svelte App is in your control. Use _contexts/store/head/window_.\r\n- Support for **dynamic imports** and **lazy loading**.\r\n\r\n# Table of contents\r\n\r\n- [Installing](#installing)\r\n- [Usage](#usage)\r\n - [Setup](#setup)\r\n - [Injecting](#injecting-components)\r\n- [Framework Integration](#framework-integration)\r\n - [AngularJs](#angularjs)\r\n - [React](#react)\r\n - [Angular](#angular)\r\n- [JS API](#js-api)\r\n- [Migrating from v1](#migrating-from-v1)\r\n- [Credits](#credits)\r\n\r\n# Installing\r\n\r\n```sh\r\nnpm install --save-dev svelte-injector svelte\r\n```\r\n\r\nThen configure your bundler of choice to accept Svelte files.\r\n\r\n# Usage\r\n\r\n## Setup\r\n\r\nCreate your Svelte App: --> [reference](https://svelte.dev/tutorial/making-an-app)\r\n\r\n`src/svelte/main`\r\n\r\n```typescript\r\nimport App from \"./App.svelte\";\r\n\r\nconst svelteEntrypoint = document.createElement(\"div\");\r\nsvelteEntrypoint.id = \"svelte-entrypoint\";\r\ndocument.body.prepend(svelteEntrypoint);\r\n\r\n// Create Svelte App\r\nnew App({\r\n\ttarget: svelteEntrypoint,\r\n});\r\n```\r\n\r\n_Note: Svelte needs to share the DOM with your existing app. It's recommended you don't use `document.body` as the App target while you are migrating._\r\n\r\n`App.svelte`\r\n\r\n```sveltehtml\r\n\r\n\r\n\r\n```\r\n\r\nUse `svelte-loader` or `rollup-plugin-svelte` in your bundler. Make sure you are not excluding `/svelte-injector/` as it lives in your `/node-modules/`\r\n\r\n## Injecting Components\r\n\r\n### Creating\r\n#### Imported components\r\n\r\nImport the component class into your framework controller, then use `create()`.\r\n\r\n```typescript\r\nimport Hello from \"./Hello.svelte\";\r\n\r\nSvelteInjector.create(target, Hello, props);\r\n```\r\n\r\n#### Linked components\r\n\r\nLink component class with a string to use it anywhere.\r\n\r\nImport your components somewhere in your bundle (es: create an `index.module` file)\r\n\r\n```typescript\r\nimport Hello from \"./Hello.svelte\";\r\nSvelteInjector.link(\"hello\", Hello);\r\n\r\n// OR for lazy loading\r\nSvelteInjector.link(\"hello\", async () => {\r\n return (await import(\"./Hello.svelte\")).default\r\n})\r\n```\r\n\r\nthen use this string as the second argument of `create()`\r\n\r\n```typescript\r\nSvelteInjector.create(target, \"hello\", props);\r\n```\r\n\r\n### Hydrating\r\n\r\nPlace HTML placeholders and then `hydrate` them\r\n\r\nUse this notation in the template:\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\nThen call `hydrate()` to update the components tree in Svelte.\r\n\r\n```typescript\r\nSvelteInjector.hydrate(target);\r\n```\r\n\r\nYou can use `data-to-render` attribute as an `{if}` block in Svelte\r\n\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\n#### Hydrating source HTML\r\n\r\nOn multi page applications you can create components directly from the source HTML.\r\n\r\nIf any page of your source contains component markup, just `hydrate` the body to render them.\r\n\r\n```typescript\r\nSvelteInjector.hydrate(document.body);\r\n```\r\n\r\n_NOTE: make sure to hydrate the body only after linking your components._\r\n\r\n# Framework integration\r\n\r\nThis project was created to easily migrate apps from AngularJs to Svelte, but it is not framework specific.\r\n\r\nSvelte components should NOT be aware of the fact that they were used by another framework.\r\n\r\n## AngularJs\r\n\r\nUse the ***built-in AngularJS component***.\r\n\r\nLink your Svelte component\r\n\r\n```typescript\r\n// /svelte/index.module.ts\r\n\r\nimport SvelteInjector from \"svelte-injector\";\r\nimport Component from \"src/Component.svelte\";\r\n\r\nSvelteInjector.link(\"component-name\", Component);\r\n```\r\n\r\n\r\n```typescript\r\n// /angularjs/index.module.ts\r\n\r\nimport { svelteComponent } from \"svelte-injector/angularjs\";\r\n\r\nangular.component(\"svelteComponent\", svelteComponent);\r\n```\r\n\r\nNow in any AngularJS component you can use:\r\n\r\n```html\r\n\r\n```\r\n\r\n#### Bindings:\r\n```typescript\r\nconst bindings = {\r\n component: \"@\", // Link name\r\n props: \"?<\", // Props object\r\n toRender: \"?<\", // Ng-if\r\n options: \"?<\", // HydrateOptions\r\n encode: \"?<\", // encode props?\r\n onMount: \"?&\", // Function called with \"element\" param on mount\r\n}\r\n```\r\n\r\n\r\n## React\r\n\r\nUse the ***built-in React component***.\r\n\r\n```jsx\r\nimport { SvelteComponent } from \"svelte-injector/react\"\r\n\r\n// Using the class\r\nimport Component from \"src/Component.svelte\";\r\nfunction YourComponent(props){\r\n return \r\n}\r\n\r\n// Using the link name\r\nfunction YourComponent(props){\r\n return \r\n}\r\n\r\n// Conditional rendering\r\nfunction YourComponent(props){\r\n return \r\n}\r\n```\r\n\r\n#### Props:\r\n```typescript\r\nexport type SvelteComponentProps = {\r\n\tcomponent: string | typeof SvelteComponentClass;\r\n\tprops?: any;\r\n\ttoRender?: boolean;\r\n\toptions?: CreateOptions;\r\n\tonMount?: (element: SvelteElement) => void;\r\n};\r\n```\r\n\r\n\r\n\r\n## Angular\r\n\r\nDocs in progress\r\n\r\n# JS API\r\n\r\n## Elements\r\n\r\nInterface `SvelteElement`\r\n\r\n### ***updateProps(props)***\r\n\r\n#### props `object`\r\n\r\nThe new props object. All previous props will be dropped.\r\n\r\n### ***setToRender(toRender)***\r\n\r\n#### toRender `boolean`\r\n\r\nSet if the component should render of not. Useful for conditional rendering.\r\n\r\n### destroy()\r\n\r\nDestroys the component.\r\n\r\n## Injector\r\n\r\n### ***create(target, Component, props[,toRender], [options])***\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the component will be rendered\r\n\r\n#### Component `SvelteComponent | string`\r\n\r\nThe Svelte component Class or the link name\r\n\r\n#### props `object`\r\n\r\nAn object with props compatible with the Svelte Component\r\n\r\n#### toRender `boolean` (default = true)\r\n\r\nBoolean that indicates if the component should render immediately.\r\n\r\n#### options `CreateOptions` (defaults)\r\n\r\nObject with options\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\r\n\r\n### ***link(linkName, svelteComponent)***\r\n\r\n#### linkName `string`\r\n\r\nThe name of the link\r\n\r\n#### svelteComponent `SvelteComponent | function`\r\n\r\nThe Svelte Component class or an async functions that returns one (useful for dynamic imports and lazy loading).\r\n\r\n### ***hydrate(target[,options])***\r\n\r\n#### target `HTMLElement`\r\n\r\nThe element in which the components will be looked for.\r\n\r\n#### options `HydrateOptions` (defaults)\r\n\r\nObject with options\r\n\r\n#### RETURN `Promise`\r\n\r\nA promise array for each created component that resolves the `SvelteElement` when the component is mounted or created (when data-to-render = false)\r\n\r\n### ***findComponentByName(name)***\r\n\r\n#### name `string`\r\n\r\nname of the component as previously linked with `link()`\r\n\r\n#### RETURN `typeof SvelteComponent`\r\n\r\nThe Class of the linked component, if any\r\n\r\n### ***findLinkNameByClass(Class)***\r\n\r\n#### Class `typeof SvelteComponent`\r\n\r\nClass of the component as previously linked with `link()`\r\n\r\n#### RETURN `string`\r\n\r\nThe name of the linked component, if any\r\n\r\n### ***generatePropsBlock(props)***\r\nReturns an HTML string representing the props template HTML element, as expected from ```hydrate```.\r\n\r\n### ***serializeProps(props)*** \r\nReturns stringified (and encoded?) string from a props object, as expected from the parser.\r\n\r\n\r\n## Options\r\nOptions object are the opional last argument of ```create``` and ```hydrate``` methods.\r\n### CreateOptions:\r\n####observeParents\r\nCreate a MutationObserver on the element parent and destroy the component if no longer in the DOM\r\n\r\n### HydrateOptions:\r\n####observeParents (default: true)\r\nCreate a MutationObserver on the element parent and destroy the component if no longer in the DOM\r\n\r\n####observe (default: true)\r\nCreate a MutationObserver on the props element and update the component on props updates.\r\n\r\n# Migrating from v1\r\n\r\n### Methods:\r\nThe main methods have been renamed\r\n\r\n_createElement_ --> ***create***\r\n\r\n_createElementFromTemplate_, _syncTemplate_ --> ***hydrate***\r\n\r\n### Template\r\nUse of ```data-props``` attribute is no longer supported. Props should be expressed in the new template format:\r\n```html\r\n\r\n \r\n \r\n {\"name\": \"hello\"}\r\n \r\n
\r\n```\r\n\r\n\r\n# Credits\r\n\r\n- [Svelte](https://svelte.dev/)\r\n- Portals implementation was inspired by @romkor's work on [svelte-portal](https://github.com/romkor/svelte-portal).\r\n\r\n# License\r\n\r\n[MIT](LICENSE)\r\n","readmeFilename":"README.md","gitHead":"74051c81bb9230bb5cc22c5c7404eae69f164e35","_id":"svelte-injector@2.1.0-beta.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-dmVu8dfb1kbKZzsZ8lqUI7m+XcL5c5kY3vsKMr1ioZxgW1PCtJYNj9bg33llPuuIvbePapEVHDmD3/OjsbdM5w==","shasum":"6b2901e867e33d150f528e08f86c9f7bb32a6e2e","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.1.0-beta.0.tgz","fileCount":20,"unpackedSize":58555,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2IjSyQ4tczFuAZh/Myqb2JduLbn+y6FH7NguBn441wQIhAM8So8r3FCn9VJRtYrvN+HDDLmdgrbEYd2X7NWubE0Ev"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioMW3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdew/+J476+RRwcmPXLjek6g+g/Cb2FITWvSgnGIyaveJYXYmcYS2q\r\nuUkpP7CJYD+SoOHh+EDT3oE+usuVaaH0notMHx4rX6259I/UeGFtGWOTCMJo\r\n370e1ktb0dUDmdxwJF+M03c1WqysPe6ieu0MsUzEQNcwgLDQZmgxlWlYXxlw\r\n/jgUF/YJLlP4aBGPFa+4ZjRfweAgAOOWiX7CvCJVDLaoqGmfm/cNzo3998wL\r\ntckSqhpNFETW1f9DBNGPeiDR7fBfmMWB6jXvm4yKjDjuUllolq36XcSsXVPW\r\nDY4hR2DGEdCbUwSom1YcMZMCoLGxv9v3KJJL1+n2IOnXhhsrvV8EAQQIEywF\r\nOfOwkWuItex4UISeeODv11DQ9/imkZ5iEOapgth8bU/ks+yc1sENFM8lUq3M\r\nP1K7J9vIVkso6YOgifhxheOxxb0LKnO5MqEEz8VozgWLQiTYetq34e0AHjzX\r\nkJrQSd25qAGieKz588y85mgwTgpigVfHF1ViklRtjG44lGuhpCIdDWxI0ViE\r\n+JN2xkqNoXpNzif6dWzpamQoWuNGUe2YMT1BtwF8WeCjuTR4Err8/Y7+QJ2v\r\n2H2moHP6dbVoIWa7HIEt/R8bboyN0A98SYuk3HQ2sYueJoIJ1nKNzDwBuCLh\r\nkriSIGXCeiH0B3jrN2kJ6rXthSDBbWVIitE=\r\n=FFp2\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.1.0-beta.0_1654703543026_0.6381214156594723"},"_hasShrinkwrap":false},"2.1.0":{"name":"svelte-injector","version":"2.1.0","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","gitHead":"f0618f4600342cb925f66b0197c0aab197131c93","_id":"svelte-injector@2.1.0","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Fay3Iiriqjn6iDosf4AB0aNy4KBREeZE1gEVVbmSnarWUy5yFXKhxKOCibYyx1VS2rJCq/wQ0aigy0Px1YJIeA==","shasum":"738fb3c323fd486f47ab9c9b2548540863f502ff","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.1.0.tgz","fileCount":20,"unpackedSize":58548,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFAHqpDSd8ruzfXEFuMXFTGc0T2lUjYkj55tRfk2U+vgAiEAhVsacdVizxiPOTpyLd08ODOIYPcHhkgQoEaLVy4XBgo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioMirACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrghA/9EPAKkuc2pzlefa7x9P0wFowbvOMtBtsZ1aQwuzOEGHd7kHD5\r\neaM0phZB+cACNnWuAxGtfZto9R4VicMrDG5zqQqPU+o8wf56C59m79kSlOpu\r\nGmAafr8oR1hV5vfCZyuEMQxKFnVnDxjgwDWY5uAqDQdtCX1w0mJ/qI5slJHj\r\no9l+h2g5N+9/6XcGzgqyR5aWI0hT1BZqbwRyN117C6p2Xj6cLXk9Y//CqEbk\r\ntJCxlm0pIrg7ehw7tgRWxs3iVNXO0Rj0xkRUzumSQkJMYFyvde8/QlbBHzre\r\nDpOWRAw1TUPDiBl66qr3zjenOc5QkbVYRYO+n6bzHlQijFgumkzEfEG6fgcV\r\n/MFe6yehKFTRoi7Hmi9fhR70EeLPyWRa6vwEqgMbBeuH3wozXsv6FuBe2H61\r\nvE/z6VRzMgInTebT7AW0gBRrv0B8ps3GFqnW5A8NDAftRSLdSWbZq8QyjWtT\r\nWKjJRWRnl0RMeBuw6g0a/eaPMnUYbgdUqomjjggyZ/noQB5NPf4xB2mf7ZZj\r\npm70xjfht0TIb+SolQ587b+tPYWPyr3pgPybmNWTzpIaOr1UtIImbJj7zD3i\r\n/m01mPtHmbyngGtsFsgFXYV+ko5lVEkOLycV8iWKoVjkx6sbWAIJMHRA+YVW\r\nPkEofI6JNKO6xED2Ka7M0yVeZU9O2reaWLo=\r\n=QaQP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.1.0_1654704299112_0.9957931518585077"},"_hasShrinkwrap":false},"2.1.1":{"name":"svelte-injector","version":"2.1.1","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","gitHead":"ca73ea7cab4c43eccc42ee7716f46353b6642512","_id":"svelte-injector@2.1.1","_nodeVersion":"16.13.2","_npmVersion":"8.1.2","dist":{"integrity":"sha512-KniUCCXJNaZ3qGchIQPd1oXFxgeV6X6YWMD19oE+hqkpDze61bNPxPr8vtzjJsHuS4bDRzeR9zX6HR+iBW2P4w==","shasum":"89c8b9a18dd940c468f874e2a6b1db7ba5024ee1","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.1.1.tgz","fileCount":20,"unpackedSize":58715,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDCHuJRhnWfBar4ovmTrBlIPSHOhL366dE7nG5OUXSoXAiEA+3JuSJ7DRnNwJrJdyo+LnzdI4w/tf5BJWZ5RCrFY9LM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJipvmOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBdBAAn7PvCF7IjyexXt8BXWCo9MEUSqdfsrlJIEPTTireSzcWrUoH\r\nXvtCFwAETSpuyvfgY/4CDWvb3UIkuU6CNjhM04vk9F1HavE0YNHL+LQcpgYU\r\nFa6pAFl8BqY6g9S82mNlkg0Skao2Vs4gQOVByiZiABV1NZEcTynvF4Wl7cfh\r\nfXtuONOuGbE4+btBBAfUaqKlUcDSmsZ4wLhO8cAILNW529H3bBC87pO3srJ1\r\nHLXk0Cc0N88wfHeFjQ/mEQyi5dQv7yzJyx0cQZfX//rOYO6yz7Yhee8T3BIs\r\ngZ227G7ijGHyXXEWvJaUo3HXcMrqerDwglAcKvTy3cG9pEYksWJcXdZwrh8C\r\ndenRbZ8UMu9WQ8kP+NzlrUHq3eA74qFiXmqmbTykhw6cYUBpgVujCAH9r9LU\r\nNiMHwmXJGPMBvnsHH+6DAC/mxJXnJFdh7S1t0sjpYj8/ifOXtUIvR6FsoeAl\r\nqnoFW3zDt67wqFmC/M0sr67NVS477ReZiAqLxRGTA0brMo4dqxa1Sx0DWoOU\r\nEHv7VPnxvfdxEaDhpnm8YAj6DkhMkee2Nq4BxvD6aXKxV3PqajEySKg1ZBGu\r\nD/KgEIiM3B1QE4CDkPdXUQ+YNlON8xBm/H5g/cRx3cXzvkEXoMmZmKqgIIQB\r\nHVzwsIJwR2bMUN4/BL2+XSxr+dn1KEbPmes=\r\n=LyOW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.1.1_1655110030499_0.6542415700602704"},"_hasShrinkwrap":false},"2.1.2":{"name":"svelte-injector","version":"2.1.2","main":"index.js","types":"index.d.ts","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"keywords":["svelte","injector","angularjs","framework","react","components","portal","framework","migrate","migration"],"author":{"name":"Federico Varano"},"license":"MIT","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","gitHead":"f3ca699567507b36bfcc42c2ed17d53b35e1698b","_id":"svelte-injector@2.1.2","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-3lp3k0YG26/l7UWMysDvUomk0aeFhBD/w+gZrat0NI0CUHXyEK35vmhaliqNl9SO35PoGx67jo/BP7VTOwGtoQ==","shasum":"de392ced9b4340ef93685d0c2520377707a39538","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-2.1.2.tgz","fileCount":20,"unpackedSize":59104,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIArJ9SHOnf7l1ygb8dQjtg4jHweBQm+29vsZNRG3Jlz5AiEArdaVFFAOuKrAs272168OEhOqwOIwNJRZfa88A+16Gso="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivV5TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozHA//fWiAldxarWYnnsGLTJYUDzor/iD/M7f2Jd95uSCF4L8xqcVS\r\n56tEaEoHWmQe0xbRc1E2BSthB8Whs5Cp/5JvAIqHEyuNk7k2G0C6cA2ujr8V\r\nTrcHC7oE3tgwVPb4S/yTYsDb/wiHJYWSP7oI8w0dVhh/cS6OPXSDDhjC/vwl\r\naBMcNg/ZhjRg2Fzd5BOZ+VPmK46u66CwLC4wHjN/0c2xixQKnGLIHbShS4+u\r\n7jt8UlWue/Zx2qrpRYMuxdu95W11apfvjN4n0I4qjLyL35qBJ/VwR/8eOgop\r\ntFcD8up55hUDDiOg0It//RPD2HRi3pUgUVEC8q/MK9GLfxQwcGS4hOoDq6aZ\r\n8FRv6i/QYSVMnSuwiGlsIYusL2+gy7P0btBcNxGpuZxIFa9gisvj1LQzlYaX\r\ne1wO/lTXADOXJKX0+xnOC0ukIYd2Uu4llcMVKt2z9/IBDdUoGxqBqTrzJ0Md\r\nGOnD5Oc10WH9Ds1Fz7l6Epfe7iBIBh2SYAdc9upSpS+x8POP4TiBSKYPH3h1\r\nyCrIdA3hSRE1usbXIuyoak+XovBkWCzPFE4Mb04HHlwd3drC1Rzs8iAOmvfM\r\nGJNAHXVt3a4p/Igd55KbjdyJWX0XbWJZ2CvGCfP07T6njrY9jQhOrd+wcAgw\r\nw45t5494jhUDe3MUOU1nAB8zLZ5t/Ld9iRg=\r\n=qrJq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_2.1.2_1656577619604_0.36597848066590055"},"_hasShrinkwrap":false},"3.0.0-beta.0":{"name":"svelte-injector","version":"3.0.0-beta.0","scripts":{"dev":"vite dev","build":"vite build && npm run package","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","package:w":"svelte-kit sync && svelte-package --watch","prepublishOnly":"npm run package","test":"npm run test:integration && npm run test:unit","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","test:integration":"playwright test","test:unit":"vitest","lint":"prettier --plugin-search-dir . --check .","format":"prettier --plugin-search-dir . --write .","postversion":"git push origin --follow-tags HEAD & npm publish"},"exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"},"./*":{"types":["./dist/*","./dist/*.d.ts","./dist/*/index.d.ts"],"svelte":["./dist/*","./dist/*.js","./dist/*/index.js"]}},"peerDependencies":{"svelte":"^3.44.0 || ^4.0.0"},"optionalDependencies":{"angular":"^1.5.11","react":">=16.14.0"},"devDependencies":{"@playwright/test":"^1.39.0","@sveltejs/adapter-auto":"^2.0.0","@sveltejs/kit":"^1.26.0","@sveltejs/package":"^2.2.2","@types/react":"^16.14.43","prettier":"^3.0.3","prettier-plugin-svelte":"^3.0.3","publint":"^0.2.5","svelte":"^4.2.2","svelte-check":"^3.5.2","tslib":"^2.6.2","typescript":"^5.2.2","vite":"^4.5.0","vitest":"^0.34.6"},"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","_id":"svelte-injector@3.0.0-beta.0","readme":"# Svelte Injector\n\n> Go Svelte one component at a time\n\n## Features\n\n- Use Svelte components in any framework: React, Angular, Vue, jQuery, Vanilla JS.\n- Easily **migrate** to Svelte while keeping older code running.\n- Built in **React** and **AngularJS** components for ease of use.\n- Write **agnostic** Svelte components. No workarounds needed.\n- Renders your components where you want them while keeping the context.\n- The Svelte App is in your control. Use _contexts/store/head/window_.\n- Support for **dynamic imports** and **lazy loading**.\n\n# Table of contents\n\n- [Installing](#installing)\n- [Usage](#usage)\n - [Setup](#setup)\n - [Injecting](#injecting-components)\n- [Framework Integration](#framework-integration)\n - [React](#react)\n - [AngularJs](#angularjs)\n - [Angular](#angular)\n- [JS API](#js-api)\n- [Migrating from earlier versions](#migrating-from-earlier-versions)\n - [Migrating from v2](#migrating-from-v2)\n - [Migrating from v1](#migrating-from-v1)\n- [Examples](#examples)\n- [Credits](#credits)\n\n# Installing\n\n```sh\nnpm install --save-dev svelte-injector svelte\n```\n\nThen configure your bundler of choice to accept Svelte files.\n\n# Usage\n\n## Setup\n\nCreate your Svelte App: --> [reference](https://svelte.dev/tutorial/making-an-app)\n\n`src/svelte/main`\n\n```typescript\nimport App from './App.svelte';\n\nconst svelteEntrypoint = document.createElement('div');\nsvelteEntrypoint.id = 'svelte-entrypoint';\ndocument.body.prepend(svelteEntrypoint);\n\n// Create Svelte App\nnew App({\n\ttarget: svelteEntrypoint\n});\n```\n\n_Note: Svelte needs to share the DOM with your existing app. It's recommended you don't use `document.body` as the App target while you are migrating._\n\n`App.svelte`\n\n```sveltehtml\n\n\n\n```\n\nUse `svelte-loader` or `rollup-plugin-svelte` in your bundler. Make sure you are not excluding `/svelte-injector/` as it lives in your `/node-modules/`\n\n## Injecting Components\n\n### Creating\n\n#### Imported components\n\nImport the component class into your framework controller, then use `create()`.\n\n```typescript\nimport Hello from './Hello.svelte';\nimport { create } from 'svelte-injector';\n\ncreate(target, Hello, props);\n```\n\n#### Registered components\n\nRegister component class to use it anywhere.\n\nImport your components somewhere in your bundle (es: create an `index.module` file)\n\n```typescript\nimport Hello from './Hello.svelte';\nimport { registerComponent } from 'svelte-injector';\n\nregisterComponent('hello', Hello);\n\n// OR for lazy loading dynamic imports\nregisterComponent('hello', async () => {\n\treturn (await import('./Hello.svelte')).default; //The given function will only be called when *hydrate* finds a component with the name \"hello\"\n});\n```\n\nthen use this string as the second argument of `create()`\n\n```typescript\nimport { create } from 'svelte-injector';\n\ncreate(target, 'hello', props);\n```\n\n### Hydrating\n\nPlace HTML placeholders and then `hydrate` them\n\nUse this notation in the template:\n\n```html\n\n \n \n {\"name\": \"hello\"}\n \n
\n```\n\nThen call `hydrate()` to update the components tree in Svelte.\n\n```typescript\nimport { hydrate } from 'svelte-injector';\n\nhydrate(target);\n```\n\nYou can use `data-to-render` attribute as an `{if}` block in Svelte\n\n```html\n\n \n \n {\"name\": \"hello\"}\n \n
\n```\n\n#### Hydrating source HTML\n\nOn multi page applications you can create components directly from the source HTML.\n\nIf any page of your source contains component markup, just `hydrate` the body to render them.\n\n```typescript\nimport { hydrate } from 'svelte-injector';\n\nhydrate(document.body);\n```\n\n_NOTE: make sure to hydrate the body only after registering your components._\n\n# Framework integration\n\nThis project was created to easily migrate apps from AngularJs to Svelte, but it is not framework specific.\n\nSvelte components should NOT be aware of the fact that they were used by another framework.\n\n## React\n\nUse the **_built-in React component_**.\n\n```jsx\nimport { SvelteComponent } from 'svelte-injector/react';\n\n// Using the class\nimport Component from 'src/Component.svelte';\nfunction YourComponent(props) {\n\treturn ;\n}\n\n// Using the registered name\nfunction YourComponent(props) {\n\treturn ;\n}\n\n// Conditional rendering\nfunction YourComponent(props) {\n\treturn ;\n}\n```\n\n#### Props:\n\n```typescript\nexport type SvelteComponentProps = {\n\tcomponent: string | typeof SvelteComponentClass;\n\tprops?: any;\n\ttoRender?: boolean;\n\toptions?: CreateOptions;\n\tonMount?: (element: SvelteElement) => void;\n};\n```\n\n## AngularJs\n\nUse the **_built-in AngularJS component_**.\n\nRegister your Svelte component\n\n```typescript\n// /svelte/index.module.ts\n\nimport { registerComponent } from 'svelte-injector';\nimport Component from 'src/Component.svelte';\n\nregisterComponent('component-name', Component);\n```\n\n```typescript\n// /angularjs/index.module.ts\n\nimport { svelteComponent } from 'svelte-injector/angularjs';\n\nangular.component('svelteComponent', svelteComponent);\n```\n\nNow in any AngularJS component you can use:\n\n```html\n\n```\n\n#### Bindings:\n\n```typescript\nconst bindings = {\n\tcomponent: '@', // Registered component name\n\tprops: '?<', // Props object\n\ttoRender: '?<', // Ng-if\n\toptions: '?<', // HydrateOptions\n\tencode: '?<', // encode props?\n\tonMount: '?&' // Function called with \"element\" param on mount\n};\n```\n\n## Angular\n\nDocs in progress\n\n# JS API\n\n## Elements\n\nInterface `SvelteElement`\n\n### **_updateProps(props)_**\n\n#### props `object`\n\nThe new props object. All previous props will be dropped.\n\n### **_setToRender(toRender)_**\n\n#### toRender `boolean`\n\nSet if the component should render of not. Useful for conditional rendering.\n\n### destroy()\n\nDestroys the component.\n\n## Functions\n\n### **_create(target, Component, props[,toRender], [options])_**\n\n#### target `HTMLElement`\n\nThe element in which the component will be rendered\n\n#### Component `SvelteComponent | string`\n\nThe Svelte component Class or the registered component name\n\n#### props `object`\n\nAn object with props compatible with the Svelte Component\n\n#### toRender `boolean` (default = true)\n\nBoolean that indicates if the component should render immediately.\n\n#### options `CreateOptions` (defaults)\n\nObject with options\n\n#### RETURN `Promise`\n\nA promise that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\n\n### **_registerComponent(name, svelteComponent)_**\n\n#### name `string`\n\nThe name of the link\n\n#### svelteComponent `SvelteComponent | function`\n\nThe Svelte Component class or an async functions that returns one (useful for dynamic imports and lazy loading).\n\n### **_hydrate(target[,options])_**\n\n#### target `HTMLElement`\n\nThe element in which the components will be looked for.\n\n#### options `HydrateOptions` (defaults)\n\nObject with options\n\n#### RETURN `Promise`\n\nA promise array for each created component that resolves the `SvelteElement` when the component is mounted or created (when data-to-render = false)\n\n### **_findComponentByName(name)_**\n\n#### name `string`\n\nname of the component as previously registered with `registerComponent()`\n\n#### RETURN `typeof SvelteComponent`\n\nThe Class of the registered component, if any\n\n### **_findRegisteredComponentNameByClass(Class)_**\n\n#### Class `typeof SvelteComponent`\n\nClass of the component as previously registered with `registerComponent()`\n\n#### RETURN `string`\n\nThe name of the registered component, if any\n\n### **_generatePropsBlock(props)_**\n\nReturns an HTML string representing the props template HTML element, as expected from `hydrate`.\n\n### **_serializeProps(props)_**\n\nReturns stringified (and encoded?) string from a props object, as expected from the parser.\n\n## Options\n\nOptions object are the optional last argument of `create` and `hydrate` methods.\n\n### CreateOptions:\n\n#### observeParents\n\nCreate a MutationObserver on the element parent and destroy the component if no longer in the DOM\n\n### HydrateOptions:\n\n#### observeParents (default: true)\n\nCreate a MutationObserver on the element parent and destroy the component if no longer in the DOM\n\n#### observe (default: true)\n\nCreate a MutationObserver on the props element and update the component on props updates.\n\n# Migrating from earlier versions\n\n## Migrating from v2\n\n### Imports:\n\nAll functions from SvelteInjector are now named exports.\n\n```typescript\nimport { create } from 'svelte-injector';\ncreate(target, Component, props);\n\n// or\nimport * as SvelteInjector from 'svelte-injector';\nSvelteInjector.create(target, Component, props);\n```\n\n### Link -> RegisterComponent\n\nThe `link` function has been renamed to `registerComponent`.\n\n## Migrating from v1\n\n### Methods:\n\nThe main methods have been renamed\n\n_createElement_ --> **_create_**\n\n_createElementFromTemplate_, _syncTemplate_ --> **_hydrate_**\n\n### Template\n\nUse of `data-props` attribute is no longer supported. Props should be expressed in the new template format:\n\n```html\n\n \n \n {\"name\": \"hello\"}\n \n
\n```\n\n# Examples\n\n- [React](https://codesandbox.io/p/sandbox/svelteinjector-react-example-8nufl1)\n- [AngularJs](https://codesandbox.io/p/sandbox/svelteinjector-angularjs-example-5ds3mf)\n\n# Credits\n\n- [Svelte](https://svelte.dev/)\n- Portals implementation was inspired by @romkor's work on [svelte-portal](https://github.com/romkor/svelte-portal).\n\n# License\n\n[MIT](LICENSE)\n","readmeFilename":"README.md","gitHead":"ac9ca281ae0e40396751695d4c0c2ad58ac1ccfd","description":"> Go Svelte one component at a time","_nodeVersion":"20.8.1","_npmVersion":"10.1.0","dist":{"integrity":"sha512-X0A1baE+XOiQAomqY8iM22It5jDb8fDiCCg7nXZB/bomal1eFqRb3leU7dNhKhyD7Mu0hK5R6lFvOwXXslL+IA==","shasum":"dba96c6042bd265b17d763668b03130ba980158c","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-3.0.0-beta.0.tgz","fileCount":23,"unpackedSize":45163,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVJ91xgrBQnlhAMfclAMADGsd9UkyR7R6Ne4XO/iocwQIhAJuxydkX4HDqexLEsBUseOUyZPx1+KDOPUVhVbBr7nfP"}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_3.0.0-beta.0_1698498906572_0.4819621383816295"},"_hasShrinkwrap":false},"3.0.0-beta.1":{"name":"svelte-injector","version":"3.0.0-beta.1","homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"author":{"name":"Federico Varano","email":"lars.gordon@gmail.com","url":"KoRnFactory"},"scripts":{"dev":"vite dev","build":"vite build && npm run package","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","package:w":"svelte-kit sync && svelte-package --watch","prepublishOnly":"npm run package","test":"npm run test:integration && npm run test:unit","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","test:integration":"playwright test","test:unit":"vitest","lint":"prettier --plugin-search-dir . --check .","format":"prettier --plugin-search-dir . --write .","postversion":"git push origin --follow-tags HEAD & npm publish"},"exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"},"./*":{"types":["./dist/*","./dist/*.d.ts","./dist/*/index.d.ts"],"svelte":["./dist/*","./dist/*.js","./dist/*/index.js"]}},"peerDependencies":{"svelte":"^3.44.0 || ^4.0.0"},"optionalDependencies":{"angular":"^1.5.11","react":">=16.14.0"},"devDependencies":{"@playwright/test":"^1.39.0","@sveltejs/adapter-auto":"^2.0.0","@sveltejs/kit":"^1.26.0","@sveltejs/package":"^2.2.2","@types/react":"^16.14.43","prettier":"^3.0.3","prettier-plugin-svelte":"^3.0.3","publint":"^0.2.5","svelte":"^4.2.2","svelte-check":"^3.5.2","tslib":"^2.6.2","typescript":"^5.2.2","vite":"^4.5.0","vitest":"^0.34.6"},"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","_id":"svelte-injector@3.0.0-beta.1","readme":"# Svelte Injector\n\n> Go Svelte one component at a time\n\n## Features\n\n- Use Svelte components in any framework: React, Angular, Vue, jQuery, Vanilla JS.\n- Easily **migrate** to Svelte while keeping older code running.\n- Built in **React** and **AngularJS** components for ease of use.\n- Write **agnostic** Svelte components. No workarounds needed.\n- Renders your components where you want them while keeping the context.\n- The Svelte App is in your control. Use _contexts/store/head/window_.\n- Support for **dynamic imports** and **lazy loading**.\n\n# Table of contents\n\n- [Installing](#installing)\n- [Usage](#usage)\n - [Setup](#setup)\n - [Injecting](#injecting-components)\n- [Framework Integration](#framework-integration)\n - [React](#react)\n - [AngularJs](#angularjs)\n - [Angular](#angular)\n- [JS API](#js-api)\n- [Migrating from earlier versions](#migrating-from-earlier-versions)\n - [Migrating from v2](#migrating-from-v2)\n - [Migrating from v1](#migrating-from-v1)\n- [Examples](#examples)\n- [Credits](#credits)\n\n# Installing\n\n```sh\nnpm install --save-dev svelte-injector svelte\n```\n\nThen configure your bundler of choice to accept Svelte files.\n\n# Usage\n\n## Setup\n\nCreate your Svelte App: --> [reference](https://svelte.dev/tutorial/making-an-app)\n\n`src/svelte/main`\n\n```typescript\nimport App from './App.svelte';\n\nconst svelteEntrypoint = document.createElement('div');\nsvelteEntrypoint.id = 'svelte-entrypoint';\ndocument.body.prepend(svelteEntrypoint);\n\n// Create Svelte App\nnew App({\n\ttarget: svelteEntrypoint\n});\n```\n\n_Note: Svelte needs to share the DOM with your existing app. It's recommended you don't use `document.body` as the App target while you are migrating._\n\n`App.svelte`\n\n```sveltehtml\n\n\n\n```\n\nUse `svelte-loader` or `rollup-plugin-svelte` in your bundler. Make sure you are not excluding `/svelte-injector/` as it lives in your `/node-modules/`\n\n## Injecting Components\n\n### Creating\n\n#### Imported components\n\nImport the component class into your framework controller, then use `create()`.\n\n```typescript\nimport Hello from './Hello.svelte';\nimport { create } from 'svelte-injector';\n\ncreate(target, Hello, props);\n```\n\n#### Registered components\n\nRegister component class to use it anywhere.\n\nImport your components somewhere in your bundle (es: create an `index.module` file)\n\n```typescript\nimport Hello from './Hello.svelte';\nimport { registerComponent } from 'svelte-injector';\n\nregisterComponent('hello', Hello);\n\n// OR for lazy loading dynamic imports\nregisterComponent('hello', async () => {\n\treturn (await import('./Hello.svelte')).default; //The given function will only be called when *hydrate* finds a component with the name \"hello\"\n});\n```\n\nthen use this string as the second argument of `create()`\n\n```typescript\nimport { create } from 'svelte-injector';\n\ncreate(target, 'hello', props);\n```\n\n### Hydrating\n\nPlace HTML placeholders and then `hydrate` them\n\nUse this notation in the template:\n\n```html\n\n \n \n {\"name\": \"hello\"}\n \n
\n```\n\nThen call `hydrate()` to update the components tree in Svelte.\n\n```typescript\nimport { hydrate } from 'svelte-injector';\n\nhydrate(target);\n```\n\nYou can use `data-to-render` attribute as an `{if}` block in Svelte\n\n```html\n\n \n \n {\"name\": \"hello\"}\n \n
\n```\n\n#### Hydrating source HTML\n\nOn multi page applications you can create components directly from the source HTML.\n\nIf any page of your source contains component markup, just `hydrate` the body to render them.\n\n```typescript\nimport { hydrate } from 'svelte-injector';\n\nhydrate(document.body);\n```\n\n_NOTE: make sure to hydrate the body only after registering your components._\n\n# Framework integration\n\nThis project was created to easily migrate apps from AngularJs to Svelte, but it is not framework specific.\n\nSvelte components should NOT be aware of the fact that they were used by another framework.\n\n## React\n\nUse the **_built-in React component_**.\n\n```jsx\nimport { SvelteComponent } from 'svelte-injector/react';\n\n// Using the class\nimport Component from 'src/Component.svelte';\nfunction YourComponent(props) {\n\treturn ;\n}\n\n// Using the registered name\nfunction YourComponent(props) {\n\treturn ;\n}\n\n// Conditional rendering\nfunction YourComponent(props) {\n\treturn ;\n}\n```\n\n#### Props:\n\n```typescript\nexport type SvelteComponentProps = {\n\tcomponent: string | typeof SvelteComponentClass;\n\tprops?: any;\n\ttoRender?: boolean;\n\toptions?: CreateOptions;\n\tonMount?: (element: SvelteElement) => void;\n};\n```\n\n## AngularJs\n\nUse the **_built-in AngularJS component_**.\n\nRegister your Svelte component\n\n```typescript\n// /svelte/index.module.ts\n\nimport { registerComponent } from 'svelte-injector';\nimport Component from 'src/Component.svelte';\n\nregisterComponent('component-name', Component);\n```\n\n```typescript\n// /angularjs/index.module.ts\n\nimport { svelteComponent } from 'svelte-injector/angularjs';\n\nangular.component('svelteComponent', svelteComponent);\n```\n\nNow in any AngularJS component you can use:\n\n```html\n\n```\n\n#### Bindings:\n\n```typescript\nconst bindings = {\n\tcomponent: '@', // Registered component name\n\tprops: '?<', // Props object\n\ttoRender: '?<', // Ng-if\n\toptions: '?<', // HydrateOptions\n\tencode: '?<', // encode props?\n\tonMount: '?&' // Function called with \"element\" param on mount\n};\n```\n\n## Angular\n\nDocs in progress\n\n# JS API\n\n## Elements\n\nInterface `SvelteElement`\n\n### **_updateProps(props)_**\n\n#### props `object`\n\nThe new props object. All previous props will be dropped.\n\n### **_setToRender(toRender)_**\n\n#### toRender `boolean`\n\nSet if the component should render of not. Useful for conditional rendering.\n\n### destroy()\n\nDestroys the component.\n\n## Functions\n\n### **_create(target, Component, props[,toRender], [options])_**\n\n#### target `HTMLElement`\n\nThe element in which the component will be rendered\n\n#### Component `SvelteComponent | string`\n\nThe Svelte component Class or the registered component name\n\n#### props `object`\n\nAn object with props compatible with the Svelte Component\n\n#### toRender `boolean` (default = true)\n\nBoolean that indicates if the component should render immediately.\n\n#### options `CreateOptions` (defaults)\n\nObject with options\n\n#### RETURN `Promise`\n\nA promise that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\n\n### **_registerComponent(name, svelteComponent)_**\n\n#### name `string`\n\nThe name of the link\n\n#### svelteComponent `SvelteComponent | function`\n\nThe Svelte Component class or an async functions that returns one (useful for dynamic imports and lazy loading).\n\n### **_hydrate(target[,options])_**\n\n#### target `HTMLElement`\n\nThe element in which the components will be looked for.\n\n#### options `HydrateOptions` (defaults)\n\nObject with options\n\n#### RETURN `Promise`\n\nA promise array for each created component that resolves the `SvelteElement` when the component is mounted or created (when data-to-render = false)\n\n### **_findComponentByName(name)_**\n\n#### name `string`\n\nname of the component as previously registered with `registerComponent()`\n\n#### RETURN `typeof SvelteComponent`\n\nThe Class of the registered component, if any\n\n### **_findRegisteredComponentNameByClass(Class)_**\n\n#### Class `typeof SvelteComponent`\n\nClass of the component as previously registered with `registerComponent()`\n\n#### RETURN `string`\n\nThe name of the registered component, if any\n\n### **_generatePropsBlock(props)_**\n\nReturns an HTML string representing the props template HTML element, as expected from `hydrate`.\n\n### **_serializeProps(props)_**\n\nReturns stringified (and encoded?) string from a props object, as expected from the parser.\n\n## Options\n\nOptions object are the optional last argument of `create` and `hydrate` methods.\n\n### CreateOptions:\n\n#### observeParents\n\nCreate a MutationObserver on the element parent and destroy the component if no longer in the DOM\n\n### HydrateOptions:\n\n#### observeParents (default: true)\n\nCreate a MutationObserver on the element parent and destroy the component if no longer in the DOM\n\n#### observe (default: true)\n\nCreate a MutationObserver on the props element and update the component on props updates.\n\n# Migrating from earlier versions\n\n## Migrating from v2\n\n### Imports:\n\nAll functions from SvelteInjector are now named exports.\n\n```typescript\nimport { create } from 'svelte-injector';\ncreate(target, Component, props);\n\n// or\nimport * as SvelteInjector from 'svelte-injector';\nSvelteInjector.create(target, Component, props);\n```\n\n### Link -> RegisterComponent\n\nThe `link` function has been renamed to `registerComponent`.\n\n## Migrating from v1\n\n### Methods:\n\nThe main methods have been renamed\n\n_createElement_ --> **_create_**\n\n_createElementFromTemplate_, _syncTemplate_ --> **_hydrate_**\n\n### Template\n\nUse of `data-props` attribute is no longer supported. Props should be expressed in the new template format:\n\n```html\n\n \n \n {\"name\": \"hello\"}\n \n
\n```\n\n# Examples\n\n- [React](https://codesandbox.io/p/sandbox/svelteinjector-react-example-8nufl1)\n- [AngularJs](https://codesandbox.io/p/sandbox/svelteinjector-angularjs-example-5ds3mf)\n\n# Credits\n\n- [Svelte](https://svelte.dev/)\n- Portals implementation was inspired by @romkor's work on [svelte-portal](https://github.com/romkor/svelte-portal).\n\n# License\n\n[MIT](LICENSE)\n","readmeFilename":"README.md","gitHead":"9d0fc506bca862f33a8ace171931f57f5f7cc5c8","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"_nodeVersion":"20.8.1","_npmVersion":"10.1.0","dist":{"integrity":"sha512-5CFPXiQ4BH8qVbpXhP/urPYf1puJYB7FsgjZALXjsXlS8kxR6QmQau4DDhM9WsmCQDOVsYVlm/myKomVshvZ1w==","shasum":"5178ffa9acec6fe357468a75e8d89be77a4c724e","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-3.0.0-beta.1.tgz","fileCount":23,"unpackedSize":45707,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHeM0bz1b8ubFJtMVqPj4eHtrdP0ojiMkmuQz0fC3AXvAiAU5rAlR26vKcHdoxOz+Q8xqNAmnJ4xJIY+IdYiQxgZIg=="}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_3.0.0-beta.1_1698514895893_0.5199546559965273"},"_hasShrinkwrap":false},"3.0.0":{"name":"svelte-injector","version":"3.0.0","homepage":"https://github.com/KoRnFactory/svelte-injector#readme","description":"Tool to integrate svelte components into other frontend frameworks","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"author":{"name":"Federico Varano","email":"lars.gordon@gmail.com","url":"KoRnFactory"},"scripts":{"dev":"vite dev","build":"vite build && npm run package","preview":"vite preview","package":"svelte-kit sync && svelte-package && publint","package:w":"svelte-kit sync && svelte-package --watch","prepublishOnly":"npm run package","test":"npm run test:integration && npm run test:unit","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","test:integration":"playwright test","test:unit":"vitest","lint":"prettier --plugin-search-dir . --check .","format":"prettier --plugin-search-dir . --write .","postversion":"git push origin --follow-tags HEAD & npm publish"},"exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"},"./*":{"types":["./dist/*","./dist/*.d.ts","./dist/*/index.d.ts"],"svelte":["./dist/*","./dist/*.js","./dist/*/index.js"]}},"peerDependencies":{"svelte":"^3.44.0 || ^4.0.0"},"optionalDependencies":{"angular":"^1.5.11","react":">=16.14.0"},"devDependencies":{"@playwright/test":"^1.39.0","@sveltejs/adapter-auto":"^2.0.0","@sveltejs/kit":"^1.26.0","@sveltejs/package":"^2.2.2","@types/react":"^16.14.43","prettier":"^3.0.3","prettier-plugin-svelte":"^3.0.3","publint":"^0.2.5","svelte":"^4.2.2","svelte-check":"^3.5.2","tslib":"^2.6.2","typescript":"^5.2.2","vite":"^4.5.0","vitest":"^0.34.6"},"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","_id":"svelte-injector@3.0.0","gitHead":"bc839434ec9e21f5798b771880e38a2039260c1f","bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"_nodeVersion":"20.9.0","_npmVersion":"10.1.0","dist":{"integrity":"sha512-CbtQmPx7/kiRXoQbbfnCTFb8v8Zks2cf/nE9yzWUBx2cmyl62m3IurFlY4ZMsl0dVkE/Olf52Pb+lfVMEULmpQ==","shasum":"3f95a9bf955758f789da14669713b2a2ef42161c","tarball":"https://registry.npmjs.org/svelte-injector/-/svelte-injector-3.0.0.tgz","fileCount":23,"unpackedSize":45700,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3Wj1umFCMTuBlbclT92px2vQwUNweo1yqqK8nK2YEgwIhANaD9lktnvdYnqQ89tYSDHObap9lGEWqdsfZA7ZG4dGA"}]},"_npmUser":{"name":"kornfactory","email":"lars.gordon@gmail.com"},"directories":{},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/svelte-injector_3.0.0_1714309160091_0.11732608963726765"},"_hasShrinkwrap":false}},"time":{"created":"2021-01-28T10:37:16.109Z","1.0.0":"2021-01-28T10:37:16.220Z","modified":"2024-04-28T12:59:20.431Z","1.0.1":"2021-01-28T11:19:08.070Z","1.0.2":"2021-01-28T12:22:09.350Z","1.0.3":"2021-01-28T13:54:02.487Z","1.0.4":"2021-01-28T14:05:14.478Z","1.0.5":"2021-01-28T14:12:07.359Z","1.1.0-beta1":"2021-01-28T18:29:33.342Z","1.1.0-beta2":"2021-01-28T18:38:48.133Z","1.1.0-beta3":"2021-01-28T19:22:42.682Z","1.1.0":"2021-01-28T20:43:47.707Z","1.1.1":"2021-01-29T12:56:00.944Z","1.1.2-beta1":"2021-01-29T21:52:48.477Z","1.1.2":"2021-01-29T22:07:09.241Z","1.1.3":"2021-03-09T20:12:56.171Z","1.1.4":"2021-03-12T18:38:05.909Z","1.1.5-beta.0":"2021-03-15T21:37:19.658Z","1.2.0-beta.0":"2021-03-21T18:10:01.385Z","1.2.0-beta.1":"2021-03-21T18:14:38.455Z","1.2.0-beta.2":"2021-03-22T14:02:25.102Z","1.2.0-beta.3":"2021-03-23T23:16:20.241Z","1.2.0-beta.4":"2021-03-26T17:03:08.282Z","1.2.0-beta.5":"2021-03-30T15:15:59.606Z","1.2.0-beta.6":"2021-03-30T15:32:08.341Z","1.2.0-beta.7":"2021-04-08T15:49:03.194Z","1.2.0-beta.8":"2021-04-21T10:41:35.143Z","2.0.0-beta.0":"2021-04-23T12:33:18.822Z","2.0.0-alpha.0":"2021-04-25T17:53:56.463Z","2.0.0-alpha.1":"2021-04-25T21:30:08.817Z","2.0.0-alpha.2":"2021-04-25T21:41:08.560Z","2.0.0-alpha.3":"2021-04-25T21:46:57.123Z","2.0.0":"2021-04-26T00:52:04.051Z","2.0.1":"2021-04-26T00:54:29.122Z","2.0.2":"2021-04-26T10:47:10.505Z","2.0.3":"2021-04-27T17:54:39.402Z","2.0.4":"2021-04-29T15:05:35.625Z","2.0.5":"2021-04-29T15:15:01.147Z","2.0.6":"2021-04-29T15:17:51.547Z","2.0.7":"2021-05-10T09:05:12.060Z","2.0.8":"2021-07-27T16:42:34.467Z","2.0.9":"2021-11-02T11:45:45.007Z","2.0.10":"2021-11-02T12:02:51.084Z","2.0.11":"2021-11-02T14:13:42.211Z","2.0.12":"2021-11-29T13:32:32.904Z","2.0.13-beta.0":"2022-05-26T16:25:49.406Z","2.0.13":"2022-05-26T17:14:26.996Z","2.0.14":"2022-05-26T17:21:19.793Z","2.1.0-beta.0":"2022-06-08T15:52:23.184Z","2.1.0":"2022-06-08T16:04:59.297Z","2.1.1":"2022-06-13T08:47:10.665Z","2.1.2":"2022-06-30T08:26:59.760Z","3.0.0-beta.0":"2023-10-28T13:15:06.814Z","3.0.0-beta.1":"2023-10-28T17:41:36.209Z","3.0.0":"2024-04-28T12:59:20.241Z"},"maintainers":[{"name":"kornfactory","email":"lars.gordon@gmail.com"}],"description":"Tool to integrate svelte components into other frontend frameworks","homepage":"https://github.com/KoRnFactory/svelte-injector#readme","repository":{"type":"git","url":"git+https://github.com/KoRnFactory/svelte-injector.git"},"author":{"name":"Federico Varano","email":"lars.gordon@gmail.com","url":"KoRnFactory"},"bugs":{"url":"https://github.com/KoRnFactory/svelte-injector/issues"},"readme":"# Svelte Injector\n\n> Go Svelte one component at a time\n\n## Features\n\n- Use Svelte components in any framework: React, Angular, Vue, jQuery, Vanilla JS.\n- Easily **migrate** to Svelte while keeping older code running.\n- Built in **React** and **AngularJS** components for ease of use.\n- Write **agnostic** Svelte components. No workarounds needed.\n- Renders your components where you want them while keeping the context.\n- The Svelte App is in your control. Use _contexts/store/head/window_.\n- Support for **dynamic imports** and **lazy loading**.\n\n# Table of contents\n\n- [Installing](#installing)\n- [Usage](#usage)\n - [Setup](#setup)\n - [Injecting](#injecting-components)\n- [Framework Integration](#framework-integration)\n - [React](#react)\n - [AngularJs](#angularjs)\n - [Angular](#angular)\n- [JS API](#js-api)\n- [Migrating from earlier versions](#migrating-from-earlier-versions)\n - [Migrating from v2](#migrating-from-v2)\n - [Migrating from v1](#migrating-from-v1)\n- [Examples](#examples)\n- [Credits](#credits)\n\n# Installing\n\n```sh\nnpm install --save-dev svelte-injector svelte\n```\n\nThen configure your bundler of choice to accept Svelte files.\n\n# Usage\n\n## Setup\n\nCreate your Svelte App: --> [reference](https://svelte.dev/tutorial/making-an-app)\n\n`src/svelte/main`\n\n```typescript\nimport App from './App.svelte';\n\nconst svelteEntrypoint = document.createElement('div');\nsvelteEntrypoint.id = 'svelte-entrypoint';\ndocument.body.prepend(svelteEntrypoint);\n\n// Create Svelte App\nnew App({\n\ttarget: svelteEntrypoint\n});\n```\n\n_Note: Svelte needs to share the DOM with your existing app. It's recommended you don't use `document.body` as the App target while you are migrating._\n\n`App.svelte`\n\n```sveltehtml\n\n\n\n```\n\nUse `svelte-loader` or `rollup-plugin-svelte` in your bundler. Make sure you are not excluding `/svelte-injector/` as it lives in your `/node-modules/`\n\n## Injecting Components\n\n### Creating\n\n#### Imported components\n\nImport the component class into your framework controller, then use `create()`.\n\n```typescript\nimport Hello from './Hello.svelte';\nimport { create } from 'svelte-injector';\n\ncreate(target, Hello, props);\n```\n\n#### Registered components\n\nRegister component class to use it anywhere.\n\nImport your components somewhere in your bundle (es: create an `index.module` file)\n\n```typescript\nimport Hello from './Hello.svelte';\nimport { registerComponent } from 'svelte-injector';\n\nregisterComponent('hello', Hello);\n\n// OR for lazy loading dynamic imports\nregisterComponent('hello', async () => {\n\treturn (await import('./Hello.svelte')).default; //The given function will only be called when *hydrate* finds a component with the name \"hello\"\n});\n```\n\nthen use this string as the second argument of `create()`\n\n```typescript\nimport { create } from 'svelte-injector';\n\ncreate(target, 'hello', props);\n```\n\n### Hydrating\n\nPlace HTML placeholders and then `hydrate` them\n\nUse this notation in the template:\n\n```html\n\n \n \n {\"name\": \"hello\"}\n \n
\n```\n\nThen call `hydrate()` to update the components tree in Svelte.\n\n```typescript\nimport { hydrate } from 'svelte-injector';\n\nhydrate(target);\n```\n\nYou can use `data-to-render` attribute as an `{if}` block in Svelte\n\n```html\n\n \n \n {\"name\": \"hello\"}\n \n
\n```\n\n#### Hydrating source HTML\n\nOn multi page applications you can create components directly from the source HTML.\n\nIf any page of your source contains component markup, just `hydrate` the body to render them.\n\n```typescript\nimport { hydrate } from 'svelte-injector';\n\nhydrate(document.body);\n```\n\n_NOTE: make sure to hydrate the body only after registering your components._\n\n# Framework integration\n\nThis project was created to easily migrate apps from AngularJs to Svelte, but it is not framework specific.\n\nSvelte components should NOT be aware of the fact that they were used by another framework.\n\n## React\n\nUse the **_built-in React component_**.\n\n```jsx\nimport { SvelteComponent } from 'svelte-injector/react';\n\n// Using the class\nimport Component from 'src/Component.svelte';\nfunction YourComponent(props) {\n\treturn ;\n}\n\n// Using the registered name\nfunction YourComponent(props) {\n\treturn ;\n}\n\n// Conditional rendering\nfunction YourComponent(props) {\n\treturn ;\n}\n```\n\n#### Props:\n\n```typescript\nexport type SvelteComponentProps = {\n\tcomponent: string | typeof SvelteComponentClass;\n\tprops?: any;\n\ttoRender?: boolean;\n\toptions?: CreateOptions;\n\tonMount?: (element: SvelteElement) => void;\n};\n```\n\n## AngularJs\n\nUse the **_built-in AngularJS component_**.\n\nRegister your Svelte component\n\n```typescript\n// /svelte/index.module.ts\n\nimport { registerComponent } from 'svelte-injector';\nimport Component from 'src/Component.svelte';\n\nregisterComponent('component-name', Component);\n```\n\n```typescript\n// /angularjs/index.module.ts\n\nimport { svelteComponent } from 'svelte-injector/angularjs';\n\nangular.component('svelteComponent', svelteComponent);\n```\n\nNow in any AngularJS component you can use:\n\n```html\n\n```\n\n#### Bindings:\n\n```typescript\nconst bindings = {\n\tcomponent: '@', // Registered component name\n\tprops: '?<', // Props object\n\ttoRender: '?<', // Ng-if\n\toptions: '?<', // HydrateOptions\n\tencode: '?<', // encode props?\n\tonMount: '?&' // Function called with \"element\" param on mount\n};\n```\n\n## Angular\n\nDocs in progress\n\n# JS API\n\n## Elements\n\nInterface `SvelteElement`\n\n### **_updateProps(props)_**\n\n#### props `object`\n\nThe new props object. All previous props will be dropped.\n\n### **_setToRender(toRender)_**\n\n#### toRender `boolean`\n\nSet if the component should render of not. Useful for conditional rendering.\n\n### destroy()\n\nDestroys the component.\n\n## Functions\n\n### **_create(target, Component, props[,toRender], [options])_**\n\n#### target `HTMLElement`\n\nThe element in which the component will be rendered\n\n#### Component `SvelteComponent | string`\n\nThe Svelte component Class or the registered component name\n\n#### props `object`\n\nAn object with props compatible with the Svelte Component\n\n#### toRender `boolean` (default = true)\n\nBoolean that indicates if the component should render immediately.\n\n#### options `CreateOptions` (defaults)\n\nObject with options\n\n#### RETURN `Promise`\n\nA promise that resolves the `SvelteElement` when the component is mounted or created (when toRender = false)\n\n### **_registerComponent(name, svelteComponent)_**\n\n#### name `string`\n\nThe name of the link\n\n#### svelteComponent `SvelteComponent | function`\n\nThe Svelte Component class or an async functions that returns one (useful for dynamic imports and lazy loading).\n\n### **_hydrate(target[,options])_**\n\n#### target `HTMLElement`\n\nThe element in which the components will be looked for.\n\n#### options `HydrateOptions` (defaults)\n\nObject with options\n\n#### RETURN `Promise`\n\nA promise array for each created component that resolves the `SvelteElement` when the component is mounted or created (when data-to-render = false)\n\n### **_findComponentByName(name)_**\n\n#### name `string`\n\nname of the component as previously registered with `registerComponent()`\n\n#### RETURN `typeof SvelteComponent`\n\nThe Class of the registered component, if any\n\n### **_findRegisteredComponentNameByClass(Class)_**\n\n#### Class `typeof SvelteComponent`\n\nClass of the component as previously registered with `registerComponent()`\n\n#### RETURN `string`\n\nThe name of the registered component, if any\n\n### **_generatePropsBlock(props)_**\n\nReturns an HTML string representing the props template HTML element, as expected from `hydrate`.\n\n### **_serializeProps(props)_**\n\nReturns stringified (and encoded?) string from a props object, as expected from the parser.\n\n## Options\n\nOptions object are the optional last argument of `create` and `hydrate` methods.\n\n### CreateOptions:\n\n#### observeParents\n\nCreate a MutationObserver on the element parent and destroy the component if no longer in the DOM\n\n### HydrateOptions:\n\n#### observeParents (default: true)\n\nCreate a MutationObserver on the element parent and destroy the component if no longer in the DOM\n\n#### observe (default: true)\n\nCreate a MutationObserver on the props element and update the component on props updates.\n\n# Migrating from earlier versions\n\n## Migrating from v2\n\n### Imports:\n\nAll functions from SvelteInjector are now named exports.\n\n```typescript\nimport { create } from 'svelte-injector';\ncreate(target, Component, props);\n\n// or\nimport * as SvelteInjector from 'svelte-injector';\nSvelteInjector.create(target, Component, props);\n```\n\n### Link -> RegisterComponent\n\nThe `link` function has been renamed to `registerComponent`.\n\n## Migrating from v1\n\n### Methods:\n\nThe main methods have been renamed\n\n_createElement_ --> **_create_**\n\n_createElementFromTemplate_, _syncTemplate_ --> **_hydrate_**\n\n### Template\n\nUse of `data-props` attribute is no longer supported. Props should be expressed in the new template format:\n\n```html\n\n \n \n {\"name\": \"hello\"}\n \n
\n```\n\n# Examples\n\n- [React](https://codesandbox.io/p/sandbox/svelteinjector-react-example-8nufl1)\n- [AngularJs](https://codesandbox.io/p/sandbox/svelteinjector-angularjs-example-5ds3mf)\n\n# Credits\n\n- [Svelte](https://svelte.dev/)\n- Portals implementation was inspired by @romkor's work on [svelte-portal](https://github.com/romkor/svelte-portal).\n\n# License\n\n[MIT](LICENSE)\n","readmeFilename":"README.md"}