{"id":18549310,"url":"https://github.com/sanyavertolet/kotlin-js-preview-idea-plugin","last_synced_at":"2025-04-09T21:32:35.712Z","repository":{"id":196244958,"uuid":"668488437","full_name":"sanyavertolet/kotlin-js-preview-idea-plugin","owner":"sanyavertolet","description":"IDEA plugin for Kotlin/JS React FC preview","archived":false,"fork":false,"pushed_at":"2025-01-13T05:01:38.000Z","size":2793,"stargazers_count":5,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T11:56:54.353Z","etag":null,"topics":["idea-plugin","intellij","intellij-plugin","kotlin","kotlin-js-react"],"latest_commit_sha":null,"homepage":"https://sanyavertolet.github.io/kotlin-js-preview-idea-plugin/","language":"Kotlin","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/sanyavertolet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2023-07-19T23:57:19.000Z","updated_at":"2024-10-11T20:41:40.000Z","dependencies_parsed_at":"2023-11-06T06:23:54.823Z","dependency_job_id":"5cf30b96-6fb2-40f8-bdfc-643ec92865a4","html_url":"https://github.com/sanyavertolet/kotlin-js-preview-idea-plugin","commit_stats":null,"previous_names":["sanyavertolet/kotlin-js-preview-idea-plugin"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanyavertolet%2Fkotlin-js-preview-idea-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanyavertolet%2Fkotlin-js-preview-idea-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanyavertolet%2Fkotlin-js-preview-idea-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sanyavertolet%2Fkotlin-js-preview-idea-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sanyavertolet","download_url":"https://codeload.github.com/sanyavertolet/kotlin-js-preview-idea-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248114870,"owners_count":21050133,"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":["idea-plugin","intellij","intellij-plugin","kotlin","kotlin-js-react"],"created_at":"2024-11-06T20:38:38.045Z","updated_at":"2025-04-09T21:32:34.207Z","avatar_url":"https://github.com/sanyavertolet.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Kotlin Js Preview\n\n![[Version](https://plugins.jetbrains.com/plugin/22801-kotlin-js-preview)](https://img.shields.io/jetbrains/plugin/v/22801)\n\nKotlin Js Preview is a `Intellij Idea` plugin that provides a mechanism for previewing `Kotlin/JS` `React` functional components.\n\n![demo-gif](screenshots/demo.gif)\n\n## Table of Contents\n\n1. [Features](#features)\n2. [Screenshots](#screenshots)\n3. [Installation](#installation)\n4. [Configuration](#configuration)\n5. [Usage](#usage)\n6. [Contributing](#contributing)\n7. [Support](#support)\n8. [License](#license)\n\n## Features\n * __Live Preview__: Display a live preview of the `Kotlin/JS` `React` functional component as it's being developed.\n * __No Source Code Corruption__: Ensures that your source code remains unaltered.\n * __Settings__: Configure the plugin by navigating to `Settings -\u003e Tools -\u003e Kotlin JS Preview`.\n\n### Planned\n * __Theme Toggle__: Switch between different themes or styles seamlessly to see how the component appears under various themes.\n * __Interactive Prop Edits__: Allow developers to modify props on-the-fly in the preview pane, seeing how the component reacts to different prop values.\n * __Component Tree Visualization__: Show a tree structure of the component, including its children, helping developers understand its composition.\n * __Dependency Graph__: Showcase the dependencies of the component, including state, props, and other components it relies on.\n * __Hot Reloading__\n\n## Screenshots\n![general-preview](screenshots/general.png)\n![settings-preview](screenshots/settings.png)\n\n## Installation\n1. Download the plugin via `GitHub` or `JetBrains Marketplace`.\n2. Add GitHub maven repository to your `settings.gradle.kts` file:\n```kotlin\n   dependencyResolutionManagement { \n       repositories { \n           mavenCentral()\n           maven { \n               name = \"sanyavertolet/kotlin-js-preview-idea-plugin\"\n               url = uri(\"https://maven.pkg.github.com/sanyavertolet/kotlin-js-preview-idea-plugin\")\n               credentials { \n                   username = providers.gradleProperty(\"gpr.user\").orNull ?: System.getenv(\"GITHUB_ACTOR\")\n                   password = providers.gradleProperty(\"gpr.key\").orNull ?: System.getenv(\"GITHUB_TOKEN\") \n               } \n           } \n       }\n   }\n```\nFor more information, read [GitHub Docs](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-gradle-registry).\n\n3. Add `com.sanyavertolet.kotlinjspreview:core:{PLUGIN_VERSION}` to JS SourceSet dependencies in your `build.gradle.kts` file:\n```kotlin\n   kotlin {\n    sourceSets {\n        val jsMain by getting {\n            dependencies {\n                // other dependencies\n                implementation(\"com.sanyavertolet.kotlinjspreview:core:${PLUGIN-VERSION}\")\n            }\n        }\n    }\n}\n```\n\n4. Create a wrapper for your JS entrypoint:\n```kotlin\n@RootWrapper\nfun wrapper(fc: FC\u003c*\u003e) {\n    val mainDiv = document.getElementById(\"wrapper\")!!\n    createRoot(mainDiv).render(\n        fc.create(),\n    )\n}\n\n// Here is how you should use the wrapper \nfun main() = wrapper(default)\n```\nMake sure it is marked with `@com.sanyavertolet.kotlinjspreview.RootWrapper` annotation.\nThe first argument of your wrapper __must__ be an `FC` to render.\n\n5. Mark the `FC` you want to preview with `@com.sanyavertolet.kotlinjspreview.JsPreview` annotation:\n```kotlin\n@JsPreview\nval Welcome = FC {\n    var name by useState(\"sanyavertolet\")\n    div {\n        +\"Hello, $name\"\n    }\n    input {\n        type = InputType.text\n        value = name\n        onChange = { event -\u003e\n            name = event.target.value\n        }\n    }\n}\n```\n\n6. Click on `Run` icon that appears near the `val Welcome = FC {` string. Your project will be copied, modified and built.\n\n## Usage\nFor more information see [example project](https://github.com/sanyavertolet/kotlin-js-preview-idea-plugin-example).\n\n## Configuration\nPlugin configuration is available. To configure it, go to `Settings -\u003e Tools -\u003e Kotlin JS Preview`.\n\n## Contributing\nAll the contributions are welcomed! Please see [CONTRIBUTING.md](CONTRIBUTING.md) file for details on how to get started.\n\n## Support\nFor support or to report bugs, please open an issue on [kotlin-js-preview-idea-plugin issues](https://github.com/sanyavertolet/kotlin-js-preview-idea-plugin/issues) page.\n\n## License\n`Kotlin Js Preview` is licensed under the `MIT Licence`. See the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanyavertolet%2Fkotlin-js-preview-idea-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsanyavertolet%2Fkotlin-js-preview-idea-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanyavertolet%2Fkotlin-js-preview-idea-plugin/lists"}