add react-markdown example

[mvillafuertem]

Hi @oyvindberg, I'm trying create a simple react-markdown example, but i don't know why it doesn't highlight the code. :(

[oyvindberg]

Try something like this:

package demo

import japgolly.scalajs.react.raw.React.Node
import japgolly.scalajs.react.vdom.html_<^._
import org.scalablytyped.runtime.StringDictionary
import org.scalajs.dom
import typings.reactMarkdown.components.ReactMarkdown
import typings.reactMarkdown.mod.{ReactMarkdownProps, ReactMarkdownPropsBase}
import typings.reactSyntaxHighlighter.components.{Light => SyntaxHighligther}
import typings.reactSyntaxHighlighter.mod.Light
import typings.reactSyntaxHighlighter.{javascriptMod, stylesHljsMod}

import scala.scalajs.js

// https://stackblitz.com/edit/react-syntax-highlighter-issue-js
// https://github.com/remarkjs/react-markdown#use-custom-renderers-syntax-highlight
object Main {
  Light.registerLanguage("javascript", javascriptMod.default)

  class LanguageValue(val language: String, val value: String) extends js.Object

  val codeRender: js.Function1[LanguageValue, Node] =
    rp => SyntaxHighligther.style(stylesHljsMod.ascetic).language(rp.language)(rp.value).build.rawElement

  def main(args: Array[String]): Unit = {

    val markdown = """Here is some JavaScript code:

~~~javascript
const a = 1;
console.log('It works!')
~~~
"""

    // This is rather awkward, but ReactMarkdownProps is modelled in a way ST can't make sense of yet
    // The workaround is to construct the props object like this
    val props = ReactMarkdownPropsBase()
      .setRenderers(StringDictionary("code" -> codeRender))
      .asInstanceOf[ReactMarkdownProps]

    ReactMarkdown(props)(markdown).renderIntoDOM(dom.document.getElementById("container"))
  }

}

[mvillafuertem]

Is it possible that with the latest version 1.0.0-beta30 the component is not generated for this reason that you comment?

With the previous version 1.0.0-beta29.2 I get this facade but with some comments.

package typings.reactMarkdown.components

import typings.StBuildingComponent.Default
import typings.reactMarkdown.mod.ReactMarkdownProps
import scala.scalajs.js
import scala.scalajs.js.`|`
import scala.scalajs.js.annotation.{JSGlobalScope, JSGlobal, JSImport, JSName, JSBracketAccess}

/* The props of this component has an unsupported shape. You can use `set` manually to use it, but with no compiler support :/ . Couldn't find props for typings.reactMarkdown.mod.ReactMarkdownProps because: IArray(Couldn't find props for typings.reactMarkdown.mod.ChildrenProp with typings.reactMarkdown.reactMarkdownStrings.Not with js.Any because: IArray(Could't extract props from js.Any because couldn't resolve ClassTree.), Couldn't find props for typings.reactMarkdown.mod.SourceProp with typings.reactMarkdown.reactMarkdownStrings.Not with js.Any because: IArray(Could't extract props from js.Any because couldn't resolve ClassTree.)), IArray(Couldn't find props for typings.reactMarkdown.mod.AllowedTypesProp with typings.reactMarkdown.reactMarkdownStrings.Not with js.Any because: IArray(Could't extract props from js.Any because couldn't resolve ClassTree.), Couldn't find props for typings.reactMarkdown.mod.DisallowedTypesProp with typings.reactMarkdown.reactMarkdownStrings.Not with js.Any because: IArray(Could't extract props from js.Any because couldn't resolve ClassTree.)), IArray(Couldn't find props for typings.reactMarkdown.mod.EscapeHtmlProp with typings.reactMarkdown.reactMarkdownStrings.Not with js.Any because: IArray(Could't extract props from js.Any because couldn't resolve ClassTree.), Couldn't find props for ((typings.reactMarkdown.mod.SkipHtmlProp with typings.reactMarkdown.reactMarkdownStrings.Not with js.Any) | (typings.reactMarkdown.mod.AllowDangerousHtmlProp with typings.reactMarkdown.reactMarkdownStrings.Not with js.Any)) with typings.reactMarkdown.reactMarkdownStrings.Not with js.Any because: IArray(Couldn't find props for typings.reactMarkdown.mod.SkipHtmlProp with typings.reactMarkdown.reactMarkdownStrings.Not with js.Any because: IArray(Could't extract props from js.Any because couldn't resolve ClassTree.), Couldn't find props for typings.reactMarkdown.mod.AllowDangerousHtmlProp with typings.reactMarkdown.reactMarkdownStrings.Not with js.Any because: IArray(Could't extract props from js.Any because couldn't resolve ClassTree.)), IArray(Could't extract props from js.Any because couldn't resolve ClassTree.)) */
object ReactMarkdown {
  
  @JSImport("react-markdown", JSImport.Namespace)
  @js.native
  object component extends js.Object
  
  def apply(p: ReactMarkdownProps): Default[js.Object] = new Default[js.Object](js.Array(this.component, p.asInstanceOf[js.Any]))
  
  implicit def make(companion: ReactMarkdown.type): Default[js.Object] = new Default[js.Object](js.Array(this.component, js.Dictionary.empty))()
}

[mvillafuertem]

Forget what I said. I just found out that this facade has been created with the latest version.

package typings.reactMarkdown

object mod {
  
  @JSImport("react-markdown", JSImport.Namespace)
  @js.native
  def apply(props: ReactMarkdownProps): Element = js.native
  
// other methods and variables  ... 

[mvillafuertem]

With this last facade how do I render the component? :(

[oyvindberg]

The code I pasted above worked for me. was that not with beta30? did something break?

[oyvindberg]

Nevermind, I'll start it up locally and check

[oyvindberg]

Ok, yeah you're right. I'll see about why it's no longer generated. for now you can just copy the old generated component into source code I guess

[oyvindberg]

This will bring the component back ScalablyTyped/Converter#264

[mvillafuertem]

I'm going to test it with the 1.0.0-beta31 version. Thanks for the fix.