{"id":15735302,"url":"https://github.com/kornfactory/svelte-injector","last_synced_at":"2025-04-13T14:54:25.082Z","repository":{"id":52677440,"uuid":"333591442","full_name":"KoRnFactory/svelte-injector","owner":"KoRnFactory","description":"Go Svelte incrementally and use Svelte components in any frontend framework.","archived":false,"fork":false,"pushed_at":"2024-04-28T13:00:17.000Z","size":267,"stargazers_count":38,"open_issues_count":3,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-13T14:54:18.813Z","etag":null,"topics":["angularjs","injector","react","svelte","svelte-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KoRnFactory.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-27T23:44:52.000Z","updated_at":"2024-10-01T21:44:41.000Z","dependencies_parsed_at":"2024-04-28T13:46:40.594Z","dependency_job_id":"deeb4b7d-9969-4d47-a04b-350e02edb50e","html_url":"https://github.com/KoRnFactory/svelte-injector","commit_stats":{"total_commits":119,"total_committers":2,"mean_commits":59.5,"dds":"0.025210084033613467","last_synced_commit":"bc839434ec9e21f5798b771880e38a2039260c1f"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KoRnFactory%2Fsvelte-injector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KoRnFactory%2Fsvelte-injector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KoRnFactory%2Fsvelte-injector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KoRnFactory%2Fsvelte-injector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KoRnFactory","download_url":"https://codeload.github.com/KoRnFactory/svelte-injector/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248732512,"owners_count":21152851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs","injector","react","svelte","svelte-components"],"created_at":"2024-10-04T01:12:08.690Z","updated_at":"2025-04-13T14:54:25.061Z","avatar_url":"https://github.com/KoRnFactory.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svelte Injector\n\n\u003e 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: --\u003e [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\u003cscript\u003e\n    import { InjectedComponents } from \"svelte-injector\";\n\u003c/script\u003e\n\n\u003cInjectedComponents/\u003e\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 () =\u003e {\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\u003cdiv data-component-name=\"hello\"\u003e\n  \u003ctemplate class=\"props\"\"\u003e\n    \u003c!--JSON formatted--\u003e\n    {\"name\": \"hello\"}\n  \u003c/template\u003e\n\u003c/div\u003e\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\u003cdiv data-component-name=\"hello\" data-to-render\"true\"\u003e\n  \u003ctemplate class=\"props\"\"\u003e\n    \u003c!--JSON formatted--\u003e\n    {\"name\": \"hello\"}\n  \u003c/template\u003e\n\u003c/div\u003e\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 \u003cSvelteComponent component={Component} props={{ name: 'world' }} /\u003e;\n}\n\n// Using the registered name\nfunction YourComponent(props) {\n\treturn \u003cSvelteComponent component={'hello'} props={{ name: 'world' }} /\u003e;\n}\n\n// Conditional rendering\nfunction YourComponent(props) {\n\treturn \u003cSvelteComponent component={'hello'} props={{ name: 'world' }} to-render={props.render} /\u003e;\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) =\u003e 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\u003csvelte-component component=\"component-name\" props=\"$ctrl.svelteProps\" /\u003e\n```\n\n#### Bindings:\n\n```typescript\nconst bindings = {\n\tcomponent: '@', // Registered component name\n\tprops: '?\u003c', // Props object\n\ttoRender: '?\u003c', // Ng-if\n\toptions: '?\u003c', // HydrateOptions\n\tencode: '?\u003c', // encode props?\n\tonMount: '?\u0026' // 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\u003cSvelteElement\u003e`\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\u003cSvelteElement[]\u003e`\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 -\u003e 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_ --\u003e **_create_**\n\n_createElementFromTemplate_, _syncTemplate_ --\u003e **_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\u003cdiv data-component-name=\"hello\" data-to-render\"true\"\u003e\n  \u003ctemplate class=\"props\"\"\u003e\n    \u003c!--JSON formatted--\u003e\n    {\"name\": \"hello\"}\n  \u003c/template\u003e\n\u003c/div\u003e\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkornfactory%2Fsvelte-injector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkornfactory%2Fsvelte-injector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkornfactory%2Fsvelte-injector/lists"}