iari
03/13/2022, 1:50 PMProvideProps
interface - I don't remember know what exactly it used to do, but it appears in the components that I wrote that act as context providersiari
03/14/2022, 11:58 AMpublic fun <T : kotlin.Any, P : react.PropsWithRef<T>> forwardRef(handler: react.RBuilder.(P, react.Ref<T>?) -> kotlin.Unit): react.ComponentType<P> { /* compiled code */ }
?Dirk
03/14/2022, 3:08 PM@JsName("default")
external object ButtonComponent : Component<ButtonProps, ButtonState> {
val Group: ButtonGroupComponent
override fun render(): ReactElement? // Has to be ReactNode
}
fun RBuilder.aButton(handler: RHandler<ButtonProps>) = child(ButtonComponent::class, handler)
iari
03/15/2022, 8:49 AMiari
03/15/2022, 12:11 PMpackage css
// ... imports
val GlobalStyle = CssBuilder().apply {
// my global css goes here
}
and then did
import css.GlobalStyle
in my main components file App.ktiari
03/15/2022, 2:27 PMclassName
?
Something between pre.294 and pre-320 changed, before I could jsut assign a string
className = "content-heading"
but now it expects a ClassName?
instance - whats the idiomatic way to instanciate them?
Do I just do
className = ClassName("content-heading")
?Dirk
03/16/2022, 11:02 AMdiv {
dangerouslySetInnerHTML = object : DangerouslySetInnerHTML {
override var __html: String
get() = """<div id="test"><b>Hallo</b></div>"""
set(HtmlAttributesvalue) {}
}
}
iari
03/16/2022, 11:04 AMRuleBuilder
instances?
With the old syntax I had these extensions
operator fun TagSelector.plus(other: TagSelector): TagSelector = TagSelector("$tagName, ${other.tagName}")
operator fun TagSelector.plus(other: String): TagSelector = TagSelector("$tagName, ${other}")
2. How do I generally specify complex css values?
Many expect types that are interfaces and there is no apparent constructor for them.
gridTemplateColumns = GridTemplateColumns(160.px, 1.fr)
gridTemplateRows = GridTemplateRows(72.px, 64.px, 1.fr)
gridColumn = "1 / 2" //GridColumn("1 / 2")
gridRow = GridRow("2 / span 2")
background = "linear-gradient(20deg, ${MyColors.GreenDark}, ${MyColors.Green2})"
Also I keep finding missing values like
overflowY = Overflow.auto
outline = Outline.none
textDecoration = TextDecoration.none
which used to work and now dow not exist
3. How Do I declare a fontFamily which includes custom fonts?
How do I do fontFace declarations?
I used to have this working
for ((fw, fwName) in listOf(
"100" to "Thin",
"300" to "Light",
"normal" to "Regular",
"500" to "Medium",
"600" to "SemiBold",
"bold" to "Bold",
"900" to "Black"
)) {
fontFace {
fontFamily = Goldplay.quoted.toString()
fontWeight = FontWeight(fw)
val srcValue = listOf(
"Goldplay-$fwName.woff2" to FontFormat.woff2,
"Goldplay-$fwName.woff" to FontFormat.woff
)
.map { (src, format) ->
"url('$src') format('$format')"
}.joinToString(",")
put("src", srcValue)
this.fontStyle = FontStyle.normal
}
}
4. How do I do keyframes declarations for animations?iari
03/16/2022, 12:50 PMobject ComponentStyles : StyleSheet("common") {
val framed by css {
border(1.px, BorderStyle.solid, Green.color)
}
// a lot more css classes ...
}
How can I do this with emotion Stylesheets?Dirk
03/16/2022, 4:29 PMCaused by: java.lang.IllegalStateException: Module parse failed: Unexpected token (83298:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See <https://webpack.js.org/concepts#loaders>
| var element_2 = tmp0_iterator_1.next_0_k$();
| {
> var tmp = default;
| $this$invoke.invoke_r3wsxp_k$(tmp, _no_name_provided_$factory_467(element_2));
| }
at org.jetbrains.kotlin.gradle.internal.ExecKt$execWithErrorLogger$1.invoke(exec.kt:83)
at org.jetbrains.kotlin.gradle.internal.ExecKt$execWithErrorLogger$1.invoke(exec.kt:76)
at org.jetbrains.kotlin.gradle.internal.ProgressKt.operation(progress.kt:21)
at org.jetbrains.kotlin.gradle.internal.ProgressKt.operation$default(progress.kt:12)
at org.jetbrains.kotlin.gradle.internal.ExecKt.execWithErrorLogger(exec.kt:76)
at org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackRunner.execute(KotlinWebpackRunner.kt:31)
at org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpack.doExecute(KotlinWebpack.kt:287)
at org.gradle.internal.reflect.JavaMethod.invoke(JavaMethod.java:104)
iari
03/16/2022, 7:21 PMiari
03/16/2022, 8:39 PMbrowserDevelopmentRun
Task works fine, webpack starts and I can debug the app
However, as soon as I run browserProductionWebpack
I get a Problem while processDceKotlinJs
is running
error: at ... (1546, 185): invalid property id
error: at ... (3946, 181): invalid property idThis looks pretty much like Issue 1077 where the use of the legacy-union package is suggested. Before trying that however, I wanted to check out, if by now I couldn't just switch from LEGACY to IR. However as soon as I change to IR, when gradle is confiured all the browser... tasks are gone - without any error. What could be the issue? here's the relevant part of build.gradle.kts:
Sam Stone
03/23/2022, 4:00 PMiari
04/01/2022, 11:34 AM"fontFace" {
fontFamily = FontFamily(Goldplay)
fontWeight = fw.unsafeCast<IntegerType>()
fontStyle = FontStyle.normal
src = "myfont-400.woff2"
}
Piotr Krzemiński
04/07/2022, 9:42 AMmargin = Margin("0 auto")
Margin
cannot take raw string. How can I achieve it in the new API, best if avoiding assigning each margin separately (4 statements) and doing it in a single type-safe statement like margin = margin(0.integer, Auto)
?Richard Wardin
04/11/2022, 1:15 PMRobert Jaros
04/14/2022, 11:08 AMRobert Jaros
04/14/2022, 11:48 AMrender(element, container)
into createRoot(container).render(element)
my tests failed. Had to change my synchronous tests to asynchronous to make it work again. I'm not really JS React expert but is this expected?Luc Girardin
05/02/2022, 3:25 PMReact.createElement: type is invalid
. If this hasn’t been tested yet, then I will try to create a test case…Anil Kumar
05/13/2022, 7:26 PMPartho Paul
05/18/2022, 4:38 AMModule not found: Error: Can't resolve '@mui/base/BackdropUnstyled'
. I’m using kotlin version 1.6.10.
Can someone please help?Sean Keane
06/03/2022, 9:16 PMStyleSheet
from Styled CSS to Emotion CSS.
Example:
object Main : StyleSheet("MainStyle") {
val headingBoldGrey by css {
color = Colors.darkGrey
+Font.quicksandBold
fontSize = titleFontSizeMobile
}
}
}
What would be the best way to convert something like this?William Persall
06/05/2022, 3:55 PMvar mymap = mapOf<String, List<Strings>>("hello" to listOf("world 1", "world 2"), "Goodbye", listOf())
val mykeys = mymap.keys
In the broswer this will error with a typeerror of cannot getKeys
if I do
val mypairs= mymap.toList() I get a type error of getsizeDirk
06/10/2022, 1:44 PMDirk
06/13/2022, 9:50 AMzeugederunity
06/14/2022, 10:13 AMFlorent Martin
06/20/2022, 12:13 PMvar name by useContext(name1)
Mihai Voicescu
06/28/2022, 3:30 PMUnresolved reference: react
and the line is
import react.useState
I am using the IR compiler... with kotlin_version=1.6.20
moltendorf
07/05/2022, 8:36 AMexternal interface Auth0ContextInterface : AuthState {
fun logout(options: Object? = definedExternally): Void
}
and I call it like so: auth0.logout(object { val localOnly = true })
only it (unlike the documentation implies) adds localOnly_1 to the url and redirects me (whereas that option should not perform anything with urls)
https://auth0.github.io/auth0-react/interfaces/Auth0ContextInterface.html#logoutBjörn Lilleike
07/29/2022, 3:48 PMval RecursiveRenderer = FC<ArticyObjectProps> { props ->
Typography {
+"${props.articy.Id} of ${props.articy.Type}"
}
props.articy.Children?.forEach { sub: ArticyObject ->
RecursiveRenderer { articy = sub }
}
}
The compiler error is "Type checking has run into a recursive problem. Easiest workaround: specify types of your declarations explicitly".
But what types I could declare more explicitly I have no idea.
I have seen examples in Typescript so this should be possible, but there is no ignore option for this, is there?