Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 00:42

    shadaj on v0.6.3

    (compare)

  • 00:40

    shadaj on master

    Fix publish GitHub Action (compare)

  • Oct 17 17:43

    shadaj on v0.6.3

    (compare)

  • Oct 17 05:55

    shadaj on master

    Release v0.6.3 (compare)

  • Oct 13 12:58
    phdoerfler opened #298
  • Oct 13 01:40

    shadaj on master

    Use Sonatype bundle release (compare)

  • Oct 13 01:39

    shadaj on master

    Use Sonatype bundle release (compare)

  • Oct 13 00:22

    shadaj on master

    Use Sonatype bundle release (compare)

  • Oct 12 22:51

    shadaj on master

    Use Sonatype bundle release (compare)

  • Oct 12 21:58

    shadaj on master

    Use Sonatype bundle release (compare)

  • Oct 12 21:04

    shadaj on master

    Use Sonatype bundle release (compare)

  • Oct 12 20:29

    shadaj on master

    Use Sonatype bundle release (compare)

  • Oct 12 18:14

    shadaj on master

    Use Sonatype bundle release (compare)

  • Oct 12 17:58

    shadaj on master

    Use Sonatype bundle release (compare)

  • Oct 11 18:44
    shadaj closed #273
  • Oct 11 18:44
    shadaj commented #273
  • Oct 11 18:42

    shadaj on update-intellij-version

    (compare)

  • Oct 11 18:42

    shadaj on master

    Update IntelliJ support plugin … (compare)

  • Oct 11 18:42
    shadaj closed #297
  • Oct 11 18:42
    shadaj closed #276
evbo
@evbo

@shadaj any general reason why .prototype might need to available? Just for performance? Or for access to public/private fields in certain cases?

Curious why react would strip out something that's useful like that!

Øyvind Raddum Berg
@oyvindberg
it's because afaiu react clones/rewrites the prop objects (for instance by adding key, ref, children), you should really just treat them as a collection of things instead of as an object which can have a prototype
so the direct consequence is that an instance of a scala type will come back in a way scala.js won't recognize, and you'll get a ClassCastException or whatever it is
and most scala.js wrappers like slinky work around this by wrapping it like you see here
Zak Patterson
@zakpatterson
HI, I was trying to create a touchable view that dismisses the keyboard on ios, is there support for the keyboard API? I wasn't able to find it in the source https://facebook.github.io/react-native/docs/keyboard
Zak Patterson
@zakpatterson
I think it just doesn't exist, I'll add the facade and a PR.
Zak Patterson
@zakpatterson
Shadaj Laddad
@shadaj
Yep, there are a fair number of React Native APIs (mostly the imperative ones) that don't have facades yet. My main use for Slinky is for websites, so many of the React Native definitions have been contributed by community members like you who are using it for mobile projects!
Zak Patterson
@zakpatterson
Sounds good, I'll try to add more PRs as I find the need for those APIs then.
Matt Hicks
@darkfrog26
is there any documentation about React Native with Slinky?
Also, anyone looking for some contract work to help us build a new UI for our application using React Native in Slinky?
it's for https://app.courio.com which is written entirely in Scala and Scala.js currently
Zak Patterson
@zakpatterson
I don't know about slinky react native documentation, but just looking at react-native's documentation, there's a one-to-one correspondence so far between what's in the 'react-native' js module and what's in the slinky.native namespace. so far except for that PR I put in yesterday.
Matt Hicks
@darkfrog26
@zakpatterson thanks, I'm a bit of a noob to React in general, so forgive my ignorance
Zak Patterson
@zakpatterson
no no, no forgiveness necessary. I think the best part about this library for me so far is to just expect that I can have the same power in scala as I would have in JS. that part is pretty good. documenting excessively on the slinky end would be duplication of effort or copy-pasting from react-native.
Matt Hicks
@darkfrog26
I think the best part is not having to write JavaScript. ;)
Zak Patterson
@zakpatterson
people have different priorities, no hate here for js.
static typing ftw though indeed.
mcallisto
@mcallisto
@darkfrog26 you might be interested in this demo (and related facades) https://github.com/mcallisto/slinky-antd-native.g8
Matt Hicks
@darkfrog26
@mcallisto, awesome, thanks!
Matt Hicks
@darkfrog26
@mcallisto the only thing missing from that is ReactNativeWeb support. ;)
Zak Patterson
@zakpatterson

I've noticed that anything that can be represented as a ReactElement is implicitly convertible to a TagMod[Nothing]. but:

def group(els: TagMod[Nothing]*) = ???

// 1. This works:
group(Button(...), Button(...))

// 2. This doesn't:
buttons = List(Button(...), Button(...))
group(buttons: _*)

// 3. Given list of elements, one must:
group(buttons.map(_.asInstanceOf[TagMod[Nothing]]): _*)

Can anyone think of a way to make the second case work?

Zak Patterson
@zakpatterson
Actually the third case compiles but fails at runtime. so that's not great.
Øyvind Raddum Berg
@oyvindberg
@zakpatterson 2. looks like a classic type inference trap where types are inferred/converted in different ways based on expected type. If you annotate val buttons with the type List[TagMod[Nothing]] you should be good
Zak Patterson
@zakpatterson
Yeah it's tough here though because Button is a ReactElement I think, which is converted to a TagMod[Nothing] via an implicit conversion. So the asInstanceOf is still required when defining each button in the list of buttons in my example. This might be #285 actually
Zak Patterson
@zakpatterson
Ah sorry, I oversimplified my example... my Button was actually a TouchableOpacity, which is an ExternalComponent. annotating my TouchableOpacity with ReactElement made it work. thanks for your advice @oyvindberg.
Shadaj Laddad
@shadaj
Yeah, elements unfortunately have a few implicit hoops to jump through before they can be used as TagMods, but #285 should help a lot with situations like this. I made a change in #263 to help improve this by defining an actual type hierarchy instead of depending on conversions (https://github.com/shadaj/slinky/pull/263/files#diff-bb19fdbf54abb277fcff78ce25743a71R14), but that PR also includes a lot of bundle-size optimizations through improved tag building macros that are blocked by a Scala compiler bug (https://github.com/scala/bug/issues/11628).
Until the compiler bug can be fixed, I'm going to try and extract out the changes that don't depend on the new macros, which will probably include this ReactElement => TagMod fix.
evbo
@evbo

Has anyone had any luck getting "why did you render" monkey patch working?

Really useful for tracking unnecessary renders, but I'm not sure how compatible it is with slinky.

Since react devtools can't report on why slink props re-rendered (they get summarized as __). This is a nice tool to be able to use

my attempt crashes:
@js.native
@JSImport("react", JSImport.Default)
object ReactLib extends js.Object

@js.native
@JSImport("@welldone-software/why-did-you-render", JSImport.Default)
class whyDidYouRender(reactRaw: js.Object, options: js.Object) extends js.Object

trait RenderTracker {
  val renderTracker = if (env != "prod") {
    println("WHY DID YOU RENDER ACTIVATED")
    new whyDidYouRender(
      ReactLib,
      options = js.Dynamic.literal(
        "include" -> List(RegExp(".*"))
      )
    );
  } else {
    null
  }
}
evbo
@evbo

@shadaj so I'm able to get this working thanks to scalajs just needing a js.Array instead of List, but does Slinky implicitly load a monkey patched react library?

Reason I ask is because I notice none of my Slinky components are getting picked up when re-renders occur as expected, but all other react components from js.native imports are correctly getting renders detected.

So is there a way to pass my monkey patched version of react to slinky?

Shadaj Laddad
@shadaj
@evbo Hmm, Slinky just uses regular @JSImport to load React. If the monkey-patching depends on requires happening after it runs, that won't work in Scala.js since all @JSImports are put at the top of the file.
evbo
@evbo

@shadaj I had a hunch that was the case. Yeah I noticed there's no way to conditionally import libraries like in native javascript.

I know monkey patches are out of scope (by definition), so this is extracurricular and I appreciate your thoughts on this. Would be really cool to be able to gain insights into extraneous rendering using this tool, especially since react devtools doesn't handle exploding Slinky's __ prop containter.

Milan Satala
@msatala
Hi guys,
@shadaj is there a plan to support hot reload in hooks? useState hook could be updated quite nicely to include RW def useState[T](default: T)(implicit r: Reader[T], w: Writer[T])
On ony of my projects which is done in typescript I'm using hooks + hot reload via https://www.npmjs.com/package/react-hot-loader#hot-loaderreact-dom
Christian Hessenbruch
@bastaware
A real noob question. I've installed sbt, executed sbt new shadaj/create-react-scala-app.g8. Now I try sbt run but get No main class detected
Christian Hessenbruch
@bastaware
ok. so I figured out that sbt dev appears to be the right way start it. But nothing appears when I visit http://localhost:8080/
evbo
@evbo

is the novalidate attribute available in Slinky form?:

not found: value noValidate
[error]         form(className := "col-10 px-1", noValidate := true)(

I see it here, but it doesn't compile with error shown above:
https://github.com/shadaj/slinky/blob/fba7de821c1cfd3071b4a8db2216d71442e51b6b/generator/src/main/scala/slinky/generator/HTMLToJSMapping.scala#L86

Shadaj Laddad
@shadaj
@msatala yes! The React team is actually working right now on a built-in implementation of hot reloading that's compatible with hooks. I'm planning on using that to replace the current hot reloading implementation in Slinky.
@evbo it looks like it wasn't defined in the JSON description for HTML attributes (https://github.com/shadaj/slinky/blob/master/web/html.json), which is what the generator uses. PRs are welcome to fix this, just needs another attribute description at the bottom of the file!
reibitto
@reibitto

All the examples I've tried give warnings like:

Timer.scala:13:2: Classes, traits and objects inheriting from js.Any should be annotated with @js.native, unless they have @ScalaJSDefined. The default will switch to Scala.js-defined in the next major version of Scala.js.
Timer.scala:17:7: Members of traits, classes and objects extending js.Any may only contain members that call js.native. This will be enforced in 1.0.

The annotations aren't helping. Is it complaining about StatelessComponent which is a js.Object? Not sure what to make of these, or if it's safe to ignore for now?

Oleg Pyzhcov
@oleg-py

@reibitto you should use the config option to opt-in into this new behavior:

scalacOptions += "-P:scalajs:sjsDefinedByDefault"

It should be set up this way from the beginning if you use a template to start your project: shadaj/create-react-scala-app.g8

reibitto
@reibitto
Ah, I missed that. I wasn't using a template. Thanks!
Yeah, that worked
Oleg Pyzhcov
@oleg-py
:+1:
evbo
@evbo
@shadaj thanks, I'll keep this fix in mind. I owe it to Slinky - such a fantastic abstraction.
Just curious, has anyone has ever gotten react linters working with Slinky? I'm about to start using reflection in unit tests to determine common functional component mistakes, like whether watchedObjects are referencing non-primitive types (potentially causing infinite render loops). Would be good to use a well maintained 3rd party library for this instead, but so far I've noticed many react tools have a hard time parsing scalajs components.
Milan Satala
@msatala
@shadaj Thank you for reply. Good to hear. Makes sens to wait for official implementation of hot reload.
Dan Di Spaltro
@dispalt
@shadaj any chance you can cut a release so the macro works with the new intellij?
Shadaj Laddad
@shadaj
@dispalt yes! planning on doing that later today (have a physics lab first :smile:)
Dan Di Spaltro
@dispalt
good luck!