kotlin-react

useEffect

useEffect(myDynamicVariable) {
     //EffectBuilder
}

Uncaught TypeError: collection.iterator is not a function

myDynamicValue

routeLink("/contact") {
    ref {
        it?.style?.textDecoration = "none"
        it?.style?.color = "inherit"
    }
    +"Jane Rogers"
}

kotlin-wrappers-bom:0.0.1-pre.213-kotlin-1.5.10

compileKotlinJs

Unresolved reference: react

1.5.21

7.1.1

renderOption={(option) => (
        <React.Fragment>
          <span>
            {option.label}
          </span>
        </React.Fragment>
      )}

renderOption = { option, _ ->
    Fragment {
        span {
            +option.label
        }
    }
}

BrowserDevelopmentRun in continuous mode

localhost:8080

This site can't be reached

:3000

[webpack-cli] Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property '_assetEmittingWrittenFiles'. These properties are valid:
   object { bonjour?, client?, compress?, dev?, firewall?, headers?, historyApiFallback?, host?, hot?, http2?, https?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, public?, setupExitSignals?, static?, transportMode?, watchFiles? }

kotlin-react.

interface RBuilder {
    // . . . 
    fun <P : Props> child(
        klazz: KClass<out Component<P, *>>,
        handler: RHandler<P>,
    )
    // . . .
}

interface RBuilder {
    // . . . 
    fun <P : Props> child(
        klazz: KClass<out Component<P, *>>,
        props: P,
        handler: RHandler<P>,
    )
    // . . .
}

child(Hellow::class,jsObject{
  param1 = 1
  param2 = 2
  param3 = "three"
  // . . . 
})

child(Hellow::class) {
 attrs {
  param1 = 1
  param2 = 2
  param3 = "three"    
 }
}

peerDependency

val MainScreen = fc<MainProps> { props ->
...
    sidebar { // has props with children
        when (child) { // this causes crash
            is Main.Child.Chat ->  p{attrs.text("heloooo test")}
            else -> p{attrs.text("heloooo error")}
        }
    }
}

external interface SidebarProps : PropsWithChildren {
}

val sidebar = fc<SidebarProps> { props ->
    props.children?.forEach {
                    child(it)
                }
}

child(MyClassComponent::class) {
  child(SomeFunctionalComponent)
}

if (...) {
  props.children()
}

run

TypeError: _.render is not a function

StateInstance

Props

this.setState(state => ({
      ...state,
      stack: [...state.stack, state.sceneConfig[sceneName]],
    }), () => {
      // Do something here
    });

val chatSidebar = fc<ChatProps> { props -> // the fc that I want to pass 
-----
external interface SidebarProps : PropsWithChildren {
    var sidebarContent: FunctionComponent<Props> // want to pass it here
}

val sidebar = fc<SidebarProps> { props ->
   div { props.sidebarContent } // somehow do something like this
   props.children() //already using children for the main content

sidebar {
        when (child) {
            is Main.Child.Chat -> {
                attrs.sidebarContent = chatSidebar{} // add the corresponding content to the props alongside the main content
                chat { attrs.component = child.component} // the child/ main content

PropsWithChildren

ReactNode.unaryPlus()

RBuilder

react-hook-form

form {
    attrs.onSubmitFunction = {
        console.log("Submit")
    }
    attrs.onSubmit = {
        console.log("Submit")
    }

    input(classes = defaultButtonStyle, type = InputType.submit) {
    }
}

fun getDefaultValuesFromProfile(profile: ProfileModel): dynamic {
    val d : dynamic = js("{ defaultValues : {...profile}}")
    return d
}

function test(profile: IProfile) {
  const test = { defaultValues: { ...profile } };
}

console.log(props.text.language?.id)

val updateText = { newText: String ->
    console.log("updateText ${props.text.language?.id}")
    props.update(props.text.copy(body = newText))
}

val cm = useCodeMirror(jsObject {
    console.log("jsObject ${props.text.language?.id}")
    container = editor.current
    basicSetup = false
    extensions = arrayOf(
        StreamLanguage.define(mai),
        defaultHighlightStyle.fallback as Any
    )
    onChange = { text, _ ->
        console.log("onChange ${props.text.language?.id}")
        updateText(text)
    }
    height = "300px"
    value = props.text.body ?: ""
})

1

2
jsObject 2
onChange 1
updateText 1

onChange

updateText

SnackContext.Provider {
    attrs.value.showError = { errorSnack = true}

Uncaught TypeError: Cannot set properties of undefined (setting 'showError')

var chats by useState(listOf<String>("first"))

    useEffectOnce {
        GlobalScope.launch {
            client.rtmStream().collect {
                val current = chats // always initial value
                println(current)
                chats = current + it.message
            }
        }
    }