Easiest routing for compose-jb

Overview

Easiest routing for compose-jb

Supported targets:

  • Jvm
  • Js

Installation

repositories {
    mavenCentral()
}

dependencies {
    implementation("io.github.artemmey:compose-jb-routing:0.9.2-a2")
}

Usage

  1. Declare your app routes:
object MyAppRoute {
    const val Home = "/"
    
    const val Articles = "/articles"

    // {id} is route param
    const val Article = "$Articles/{id}"
}
  1. Configure routing
@Composable
fun App() {
    initRouting(MyAppRoute.Home)
    Router {
        // `exact = true` means that current location matches exactly the given route.
        route(MyAppRoute.Home, exact = true) { Home() }
        // Default value of `exact` (false) means that current location can be any of those that starts with the given route. In this example location matches "/articles.*"
        route(MyAppRoute.Articles) { Articles() }
    }
}

@Composable
fun Articles() {
    // Nested routing
    Router {
        route(MyAppRoute.Articles, exact = true) { ArticleList() }
        // Obtaining {id} param
        route(MyAppRoute.Article) { Article(param("id")) }
    }
}
  1. Perform routing
@Composable
fun ArticleList() {
    articles.forEach {
        ArticlePreview(onClick = {
            // Navigate to next location and add current to the back stack
            routing.push(MyAppRoute.Article, "id" to it.id)

            // Here we can see the back stack
            println(routing.history)
        })
    }
}

@Composable
fun Article(id: String) {
    BackButton(onClick = {
        // Navigate to prev location
        routing.pop()
    })
}
  1. Make redirects
@Composable
fun PrivateRoute() {
    if (!auth) {
        // Redirecting to login and setting current location as ref
        Redirect("${MyAppRoute.Login}?ref=${routing.location}")
        return
    }
}

@Composable
fun Login() {
    LoginButton(onClick = {
        performLogin()
        // If have ref - redirecting back to it, else - just navigate back
        routing.location.query()["ref"]
            ?.let { routing.redirect(it) }
            ?: routing.pop()
    })
}
You might also like...
Built with Jetpack compose, multi modules MVVM clean architecture, coroutines + flow, dependency injection, jetpack navigation and other jetpack components

RickAndMortyCompose - Work in progress A simple app using Jetpack compose, clean architecture, multi modules, coroutines + flows, dependency injection

GraphQL based Jetpack Compose and SwiftUI Kotlin Multiplatform sample
GraphQL based Jetpack Compose and SwiftUI Kotlin Multiplatform sample

GraphQL based Jetpack Compose and SwiftUI Kotlin Multiplatform sample

πŸ”– A Quotes Application built to Demonstrate the Compose for Desktop UI
πŸ”– A Quotes Application built to Demonstrate the Compose for Desktop UI

A Quotes Application built to Demonstrate the use of Jetpack Compose for building declarative UI in Desktop

An experimental tool for building console UI in Kotlin using the Jetpack Compose compiler/runtime

An experimental tool for building console UI in Kotlin using the Jetpack Compose compiler/runtime

Netflix inspired OTT Home Screen, Contains implementation in Reactjs, Kotlin React Wrapper, Jetpack Compose Web

Netflix-Clone-React Practising React by building Netflix Clone Requirements TMDB api key : Add TMDB API key to AppApi.kt Learning Resourcce Build Netf

Dependency Injection library for Compose Multiplatform, Koin wrapper.

πŸ₯₯ Cokoin Injection library for Compose (Multiplatform and Jetpack), Koin wrapper. It uses @Composable functions to configure KoinContext and Scopes.

Native android app made with Kotlin & Compose with example usage of Ktor, SqlDelight.
Native android app made with Kotlin & Compose with example usage of Ktor, SqlDelight.

Delight-Playground πŸŽ‰ Native Android application built with Kotlin and Jetpack Compose. This app also illustrates the usage of advance libraries such

Kotlin Multiplatform Mobile + Mobile Declarative UI Framework (Jetpack Compose and SwiftUI)

Kotlin Multiplatform Mobile + Mobile Declarative UI Framework (Jetpack Compose and SwiftUI)

An example of a test task for creating a simple currency converter application for the Android platform. The app is developed using Kotlin, MVI, Dagger Hilt, Retrofit, Jetpack Compose.
An example of a test task for creating a simple currency converter application for the Android platform. The app is developed using Kotlin, MVI, Dagger Hilt, Retrofit, Jetpack Compose.

Simple Currency Converter Simple Currency Converter Android App by Isaev Semyon An example of a test task for creating a simple currency converter app

Comments
  • TypeError: this.route$composable is not a function

    TypeError: this.route$composable is not a function

    I have created a empty project using Intellij project wizard, updated deps

    kotlin("multiplatform") version "1.6.10"
    id("org.jetbrains.compose") version "1.0.1"
    

    main.kt

    fun main() {
      renderComposable(rootElementId = "root") {
        Router {
          initRouting("/")
          route("/") { Text("home") }
          route("/test") { Text("test") }
        }
      }
    }
    

    This occurs in browser (chrome)

    Uncaught TypeError: this.route$composable_n6d7bi_k$ is not a function	components.kt?b101:30
     at _no_name_provided__217.RouterScope.route$composable$default_onzyoe_k$ (webpack-internal:///./kotlin/testprojectrouting.js:70587:36)
        at _no_name_provided__221.invoke_9m2agf_k$ (webpack-internal:///./kotlin/testprojectrouting.js:70710:30)
        at eval (webpack-internal:///./kotlin/testprojectrouting.js:70816:9)
        at ComposableLambdaImpl.invoke_oku154_k$ (webpack-internal:///./kotlin/testprojectrouting.js:66220:92)
        at _no_name_provided__198.invoke_5vwf3d_k$ (webpack-internal:///./kotlin/testprojectrouting.js:67073:44)
        at eval (webpack-internal:///./kotlin/testprojectrouting.js:67148:9)
        at ComposableLambdaImpl.invoke_uhotyh_k$ (webpack-internal:///./kotlin/testprojectrouting.js:66204:92)
        at invokeComposable$composable (webpack-internal:///./kotlin/testprojectrouting.js:65588:15)
        at _no_name_provided__122.invoke_sv8swh_k$ (webpack-internal:///./kotlin/testprojectrouting.js:43303:7)
        at eval (webpack-internal:///./kotlin/testprojectrouting.js:45321:9)
    

    Tested with compose 1.0.1 and 1.1.0-alpha05 and webpack 4 and 5

    opened by DVDAndroid 0
Releases(v0.9.5)
Owner
null
A lightweight alternative to Android's ViewModels. The easiest way to retain instances in Activities, Fragments or Composables.

A lightweight alternative to Android's ViewModels. The easiest way to retain instances in Activities, Fragments or Composables.

Marcello Galhardo 264 Dec 27, 2022
Kotlin Multiplatform lifecycle-aware business logic components (aka BLoCs) with routing functionality and pluggable UI (Jetpack Compose, SwiftUI, JS React, etc.), inspired by Badoos RIBs fork of the Uber RIBs framework

Decompose Please see the project website for documentation and APIs. Decompose is a Kotlin Multiplatform library for breaking down your code into life

Arkadii Ivanov 819 Dec 29, 2022
Android routing library

link-router This library contains the basic infrastructure for routing deepLinks, activities and fragments within a multi-module application in a way

Open-Source by Veepee 42 Sep 22, 2022
A lightweight, simple, smart and powerful Android routing library.

RxRouter Read this in other languages: δΈ­ζ–‡, English A lightweight, simple, smart and powerful Android routing library. Getting started Setting up the d

Season 323 Nov 10, 2022
GardenKollektion - Kademlia routing for forum based IPFS Agents

Kademlia in 30 seconds all gossip nodes have guid all guid pair's have hamming distance (number of XOR bits that are '1') all distances have buckets a

Jim Northrup 1 Feb 28, 2022
Funstuff - Minimal Kotlin Multiplatform project with SwiftUI, Jetpack Compose, Compose for Wear OS, Compose for Desktop

PeopleInSpace Minimal Kotlin Multiplatform project with SwiftUI, Jetpack Compose

Shivam Dhuria 2 Feb 15, 2022
A minimal notes application in Jetpack Compose with MVVM architecture. Built with components like DataStore, Coroutines, ViewModel, LiveData, Room, Navigation-Compose, Coil, koin etc.

Paper - A Minimal Notes App A minimal notes application in Jetpack Compose with MVVM architecture. Built with components like DataStore, Coroutines, V

Akshay Sharma 139 Jan 2, 2023
Paper-ui - A Multiplatform Compose Theme for your Compose app

paper-ui (WIP) Screen.Recording.2022-02-13.at.8.14.45.PM.mov A Multiplatform Com

theapache64 45 Oct 5, 2022
A beautiful Fashion Store like Android App Mock built on Jetpack Compose with compose navigation, hilt, dark theme support and google's app architecture found on uplabs Here

A beautiful Fashion Store like Android App Mock built on Jetpack Compose with compose navigation, hilt, dark theme support and google's app architecture found on uplabs Here

Puncz 87 Nov 30, 2022
A collaborative list of awesome jetpack compose resources.

Awesome Jetpack compose A collaborative list of awesome jetpack compose resources. Featured in Content Official Documentation Conference talks Article

Naveen T P 289 Nov 15, 2022