docs/docs/navigation/getting-started.md

Getting started (TBD)

Traditionally, you need to add dependency to your project. Currently, there are two types of artifacts:

• Core - only necessary tools for your projects
• MVVM - Model-View-ViewModel architecture tools + Core components

Artifact	Purpose	Dependency
Core	Only necessary tools for your projects	implementation "dev.inmo:navigation.core:$navigation_version"
MVVM	Model-View-ViewModel architecture tools + Core components	implementation "dev.inmo:navigation.mvvm:$navigation_version"

Get started

After you have added your dependency, you should initialize navigation. There are several important things:

1. Config - it is an instance of any class which extending the NavigationNodeDefaultConfig in common case
2. Factory - usually object which may create a node or some required part for node

For example: lets imagine that we have a node Main. Here what should we do to create a node and make it workable in navigation:

data class MainConfig(
    // this id will be used to search an html element by id in JS
    // and Fragment by tag in Android
    override val id: String = "main"
) : NavigationNodeDefaultConfig

Both JS and Android platforms require ViewModel for their MVVM node variants, but it can be common as well as MainConfig:

class MainViewModel(
    node: NavigationNode<MainConfig, NavigationNodeDefaultConfig>
) : ViewModel(
    node
)

JS part

// Core variant without MVVM or Compose
class MainNode(
    config: MainConfig,
    chain: NavigationChain<NavigationNodeDefaultConfig>,
) : JsNavigationNode<MainConfig, NavigationNodeDefaultConfig>(
    chain,
    config
) {
    // Some code
    // In htmlElementStateFlow will be found `HTMLElement` where node should be binded
}
// MVVM Compose variant
class MainNodeView(
    config: MainConfig,
    chain: NavigationChain<NavigationNodeDefaultConfig>,
) : View<MainConfig, MainViewModel>(
    config,
    chain
) {
    // Some code
    // In htmlElementStateFlow will be found `HTMLElement` where node should be binded
    
    @Composable
    override onDraw() {
        Text("Hello world")
    }
}

object MainNodeFactory : NavigationNodeFactory<NavigationNodeDefaultConfig> {
    override fun createNode(
        navigationChain: NavigationChain<Base>,
        config: Base
    ): NavigationNode<out Base, Base>? = if (config is MainConfig) {
        MainNode(config, chain) // Or `MainNodeView(config, chain)` for MVVM
    } else {
        null
    }
}

---

Data below is under TBD

Android

In Android there is one important note: you will not directly work with nodes. In fact it will be required to create special NodeFragment:

// Core variant
class MainFragment : NodeFragment<MainConfig, NavigationNodeDefaultConfig>() {
    // Your code
    // Here will be available: node with type `AndroidFragmentNode`, config: `MainConfig`
}
// MVVM Variant
class MainViewFragment : ViewFragment<MainViewModel, MainConfig>() {
    // Will be available also `viewModel` via koin `lazyInject`
    override val viewModelClass
        get() = MainViewModel::class
}

Initialization is different on the platforms, so, lets take a look at each one.

JS

In JavaScript it looks like:

initNavigation(
    
)