Hello my people! I was wondering: Is there a way t...

# javascript

[Joost Klitsie]

Hello my people! I was wondering: Is there a way to improve compilation speed with (with using browserDevelopmentRun -- continuous)? Now it is 30 seconds if I am lucky, 1 minute if I am less lucky.
I was wondering: would more modules work? I could split things up in feature modules, this works great for android development.
Also, is it common that my app reloads twice when a change is detected? Usually when a change is detected and a build is executed, my app directly reloads (without any changes of course). Then after the build is done, it reloads again (with the changes)

[rocketraman]

I found disabling source maps "fixes" the reload-twice problem. Not sure why.

[Big Chungus]

As for speed, you could try enabling incremental compilation, but I found that it breaks more often than not on my compose projects

[Cheick Kante]

Can somebody please share to how get React-Markdown to work with remark plugins
my markdown looks like this

@file:JsModule("react-markdown")
@file:JsNonModule
package <http://components.blog|components.blog>


import react.ComponentClass
import react.Props
import react.PropsWithChildren

@JsName("default")
external val ReactMarkdown: ComponentClass<MarkdownProps>

external interface MarkdownProps : PropsWithChildren{
    var remarkPlugins : Array<dynamic> 
}

and my remark file looks like

@file:JsModule("remark-gfm")
@file:JsNonModule

package <http://components.blog|components.blog>

@JsName("default")
external val RemarkGfm: dynamic

and I hook them up as below, I get the rendered content however remark does not get applied.

ReactMarkdown {
    remarkPlugins = arrayOf(RemarkGfm)

    +content
}

[Cheick Kante]

I solved my issue, for anyone else who gets same issue :
this what my reactMarkdown file looks like :

@file:JsModule("react-markdown")
@file:JsNonModule

package xxxx


import react.ComponentClass
import react.Props
import react.PropsWithChildren

@JsName("default")
external val ReactMarkdown:ComponentClass<MarkdownProps>

external interface MarkdownProps : Props {

    var children: String
    var className: String
    var allowedElements: Array<String>
    var disallowedElements: Array<String>
    var unwrapDisallowed: Boolean

    var remarkPlugins: Array<dynamic>


    var rehypePlugins : Array<dynamic>
}

the first 3 lines are all that is needed to bring remarkGfm into the kotlin/js world.

@file:JsNonModule

package xxxx

import react.ComponentClass
import react.FC
import react.Props
import react.PropsWithChildren

@JsName("default")
external val remarkGfm:ComponentClass<Props>

external interface GfmOptions {
    var singleTilde: Boolean
    var tableCellPadding: Boolean
    var tablePipeAlign: Boolean
    var stringLength: (String)-> Int
    var sourcePos: Boolean
    var rawSourcePos: Boolean
    var skipHtml: Boolean
    var includeElementIndex: Boolean
    var transformLinkUri: Boolean
    var linkTarget: String
    var transformImageUri: () -> Unit
    var components: Map<String, FC<PropsWithChildren>>
}

This is how it’ll be used with ReactMarkdown:

ReactMarkdown {
    rehypePlugins = arrayOf(rehypeRaw)
    remarkPlugins = arrayOf(
        arrayOf(remarkGfm, (Any() as GfmOptions).apply {
            singleTilde = false
        })
    )
    children = post.contentMarkdown
}