Kotlin Js Preview

Kotlin Js Preview is a Intellij Idea plugin that provides a mechanism for previewing Kotlin/JS React functional components.

Table of Contents

1. Features
2. Screenshots
3. Installation
4. Configuration
5. Usage
6. Contributing
7. Support
8. License

Features

• Live Preview: Display a live preview of the Kotlin/JS React functional component as it's being developed.
• No Source Code Corruption: Ensures that your source code remains unaltered.
• Settings: Configure the plugin by navigating to Settings -> Tools -> Kotlin JS Preview.

Planned

• Theme Toggle: Switch between different themes or styles seamlessly to see how the component appears under various themes.
• Interactive Prop Edits: Allow developers to modify props on-the-fly in the preview pane, seeing how the component reacts to different prop values.
• Component Tree Visualization: Show a tree structure of the component, including its children, helping developers understand its composition.
• Dependency Graph: Showcase the dependencies of the component, including state, props, and other components it relies on.
• Hot Reloading

Screenshots

Installation

1. Download the plugin via GitHub or JetBrains Marketplace.
2. Add GitHub maven repository to your settings.gradle.kts file:

   dependencyResolutionManagement { 
       repositories { 
           mavenCentral()
           maven { 
               name = "sanyavertolet/kotlin-js-preview-idea-plugin"
               url = uri("https://maven.pkg.github.com/sanyavertolet/kotlin-js-preview-idea-plugin")
               credentials { 
                   username = providers.gradleProperty("gpr.user").orNull ?: System.getenv("GITHUB_ACTOR")
                   password = providers.gradleProperty("gpr.key").orNull ?: System.getenv("GITHUB_TOKEN") 
               } 
           } 
       }
   }

For more information, read GitHub Docs.

3. Add com.sanyavertolet.kotlinjspreview:core:{PLUGIN_VERSION} to JS SourceSet dependencies in your build.gradle.kts file:

   kotlin {
    sourceSets {
        val jsMain by getting {
            dependencies {
                // other dependencies
                implementation("com.sanyavertolet.kotlinjspreview:core:${PLUGIN-VERSION}")
            }
        }
    }
}

4. Create a wrapper for your JS entrypoint:

@RootWrapper
fun wrapper(fc: FC<*>) {
    val mainDiv = document.getElementById("wrapper")!!
    createRoot(mainDiv).render(
        fc.create(),
    )
}

// Here is how you should use the wrapper 
fun main() = wrapper(default)

Make sure it is marked with @com.sanyavertolet.kotlinjspreview.RootWrapper annotation. The first argument of your wrapper must be an FC to render.

5. Mark the FC you want to preview with @com.sanyavertolet.kotlinjspreview.JsPreview annotation:

@JsPreview
val Welcome = FC {
    var name by useState("sanyavertolet")
    div {
        +"Hello, $name"
    }
    input {
        type = InputType.text
        value = name
        onChange = { event ->
            name = event.target.value
        }
    }
}

6. Click on Run icon that appears near the val Welcome = FC { string. Your project will be copied, modified and built.

Usage

For more information see example project.

Configuration

Plugin configuration is available. To configure it, go to Settings -> Tools -> Kotlin JS Preview.

Contributing

All the contributions are welcomed! Please see CONTRIBUTING.md file for details on how to get started.

Support

For support or to report bugs, please open an issue on kotlin-js-preview-idea-plugin issues page.

License

Kotlin Js Preview is licensed under the MIT Licence. See the LICENSE file for details.