{"id":15288431,"url":"https://github.com/peternaydenov/visual-controller-for-svelte3","last_synced_at":"2026-03-10T13:05:00.475Z","repository":{"id":79800675,"uuid":"366250762","full_name":"PeterNaydenov/visual-controller-for-svelte3","owner":"PeterNaydenov","description":"visual controller for svelte3","archived":false,"fork":false,"pushed_at":"2025-04-16T06:45:50.000Z","size":790,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-07T04:45:39.766Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/PeterNaydenov.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-05-11T04:05:01.000Z","updated_at":"2025-04-16T06:45:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"bc19e3b8-9a4b-46f5-89e5-66a8d8148147","html_url":"https://github.com/PeterNaydenov/visual-controller-for-svelte3","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PeterNaydenov%2Fvisual-controller-for-svelte3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PeterNaydenov%2Fvisual-controller-for-svelte3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PeterNaydenov%2Fvisual-controller-for-svelte3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PeterNaydenov%2Fvisual-controller-for-svelte3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PeterNaydenov","download_url":"https://codeload.github.com/PeterNaydenov/visual-controller-for-svelte3/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252816520,"owners_count":21808702,"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":[],"created_at":"2024-09-30T15:48:46.417Z","updated_at":"2026-03-10T13:05:00.425Z","avatar_url":"https://github.com/PeterNaydenov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Visual Controller for Svelte (@peter.naydenov/visual-controller-for-svelte3)\n\n*NOTE: After version 2.0.2 the library works with `Svelte 4`. Product is not changed, just the dependency. If you need version 3 of Svelte, use version 2.0.1 of this library.*\n\n![version](https://img.shields.io/github/package-json/v/peterNaydenov/visual-controller-for-svelte3)\n![license](https://img.shields.io/github/license/peterNaydenov/visual-controller-for-svelte3)\n\n\n\nTool for building a micro-frontends(MFE) based on Svelte components - Start multiple Svelte applications in the same HTML page and control them.\n\nInstall visual controller:\n```\nnpm i @peter.naydenov/visual-controller-for-svelte3\n```\n\nInitialization process:\n```js\n// for es6 module projects:\nimport notice from '@peter.naydenov/notice' // event emitter by your personal choice.\nimport VisualController from '@peter.naydenov/visual-controller-for-svelte3'\n\n// for commonjs projects:\nconst notice = require('@peter.naydenov/notice')\nconst VisualController = require('@peter.naydenov/visual-controller-for-svelte3')\n\n\n\nlet \n      eBus = notice ()\n    , dependencies = { eBus }  // Provide everything that should be exposed to components \n    , html = new VisualController ( dependencies ) \n    ;\n// Ready for use...\n```\n\nLet's show something on the screen:\n```js\n// Let's have svelte component 'Hello' with prop 'greeting'\n\nhtml.publish ( Hello, {greeting:'Hi'}, 'app' )\n//arguments are: ( component, props, containerID )\n```\n\n## Inside of the Components\n\n*Note: If your component should be displayed only, that section can be skipped.*\n\nAll provided libraries during visualController initialization are available if you export variable with name `dependencies`. Export also `setupUpdates` if you need to manipulate component \n\n```js\n\nlet msg = 'Vite + Svelte'\nexport let dependencies, setupUpdates;\nconst { eBus } = dependencies\n\nsetupUpdates ({   // Provides to visualContoller method 'changeMessage' \n          changeMessage (update) {\n                  msg = update\n              }\n    })\n```\n\nThe external call will look like this:\n\n```js\nhtml.getApp ( 'app' ).changeMessage ( 'New message content' )\n```\n\n\n\n\n## Visual Controller Methods\n```js\n  publish : 'Render svelte app in container. Associate app instance with the container.'\n, getApp  : 'Returns app instance by container name'\n, destroy : 'Destroy app by using container name '\n, has     : 'Checks if app with specific \"id\" was published'\n```\n\n\n\n### VisualController.publish ()\nPublish a svelte app.\n```js\nhtml.publish ( component, props, containerID )\n```\n- **component**: *object*. Svelte component\n- **props**: *object*. Svelte components props\n- **containerID**: *string*. Id of the container where svelte-app will live.\n- **returns**: *Promise\u003cObject\u003e*. Update methods library if defined. Else will return a empty object;\n\nExample:\n```js\n let html = new VisualController ();\n html.publish ( Hi, { greeting: 'hi'}, 'app' )\n```\n\nRender component 'Hi' with prop 'greeting' and render it in html element with id \"app\".\n\n\n\n\n\n### VisualController.getApp ()\nReturns the library of functions provided from method `setupUpdates`. If svelte-app never called `setupUpdates`, result will be an empty object.\n\n```js\n let controls = html.getApp ( containerID )\n```\n- **containerID**: *string*. Id of the container.\n\nExample:\n```js\nlet \n      id = 'videoControls'\n    , controls = html.getApp ( id )\n    ;\n    // if app with 'id' doesn't exist -\u003e returns false, \n    // if app exists and 'setupUpdates' was not used -\u003e returns {}\n    // in our case -\u003e returns { changeMessage:f }\nif ( !controls )   console.error ( `App for id:\"${id}\" is not available` )\nelse {\n        if ( controls.changeMessage )   controls.changeMessage ('new title') \n   }\n```\nIf visual controller(html) has a svelte app associated with this name will return it. Otherwise will return **false**.\n\n\n\n\n\n### VisualController.destroy ()\nWill destroy svelte app associated with this container name and container will become empty. Function will return 'true' on success and 'false' on failure. \nFunction will not delete content of provided container if there is no svelte app associated with it.\n\n```js\nhtml.destroy ( containerID )\n```\n- **containerID**: *string*. Id name.\n\n\n\n### Extra\n\nVisual Controller has versions for few other front-end frameworks:\n- [React](https://github.com/PeterNaydenov/visual-controller-for-react) \n- [Vue 3](https://github.com/PeterNaydenov/visual-controller-for-vue3)\n- [Vue 2](https://github.com/PeterNaydenov/visual-controller-for-vue)\n\n\n\n\n\n## Links\n\n- [History of changes](https://github.com/PeterNaydenov/visual-controller-for-svelte3/blob/master/Changelog.md)\n- [License](https://github.com/PeterNaydenov/visual-controller-for-svelte3/blob/master/LICENSE)\n\n\n\n## Credits\n'visual-controller-for-svelte3' is created and supported by Peter Naydenov\n\n\n\n## License\n\n'visual-controller-for-svelte3' is released under the [MIT license](https://github.com/PeterNaydenov/visual-controller-for-svelte3/blob/master/LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeternaydenov%2Fvisual-controller-for-svelte3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeternaydenov%2Fvisual-controller-for-svelte3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeternaydenov%2Fvisual-controller-for-svelte3/lists"}