https://kotlinlang.org logo
#compose-web
Title
# compose-web
b

Big Chungus

05/23/2021, 7:10 PM
Has anyone tried using compose-web with mdc yet?
j

jim

05/23/2021, 10:00 PM
Not that I know of, but it should totally work. Let us know if you run into any issues. Assuming you do try, and assuming you wrap the widgets in composable functions, please do share those functions on github so we can point others to your wrappers!
2
b

Big Chungus

05/23/2021, 10:07 PM
Couldn't figure out how to setup webcomponents wrappers as a klib, so just did a regular mdc wrapper here. Only TextButton with optional Ripple side-effect, but works like a charm so far.
👍 1
Will be wrapping lots more as I go with my UI rebuild with compose-web. Might even have enough for a standalone library eventualy
K 3
🎉 1
With webcomponents it would've been even easier, as you can then just render a custom tag and be done with it
👍 1
c

Colton Idle

05/24/2021, 2:00 AM
@Big Chungus that link 404s for me
d

Daniele B

05/24/2021, 6:08 AM
the file moved to here
b

Big Chungus

05/24/2021, 9:30 AM
Yeah, force-pushed some updates that overridden commit history 😅
g

Greg Steckman

05/25/2021, 2:50 AM
@Big Chungus This looks really nice. I noticed that the styles injected into the served page had base64 encoded text appended to them - I think webpack is encoding the sourcemaps referenced from the CSS. Adding sourceMaps = false in the commonWebpackConfig section of build.gradle.kts prevents that.
and to change the theme colors, they can be added to the AppStyle object, for example:
Copy code
object AppStyle : StyleSheet() {
  init {
    CSSSelector.PseudoClass.root {
      variable("mdc-theme-primary", StylePropertyValue("green"))
      variable("mdc-theme-on-primary", StylePropertyValue("white"))
    }
  }
}
Are there any drawbacks to doing this vs running through sass first?
K 1
b

Big Chungus

05/25/2021, 7:17 AM
I was looking how to theme, thanks!
As for sass, drawback is that older browsers require pollyfils to support css variables
g

Greg Steckman

05/25/2021, 2:50 PM
Additional variables are described here
r

rocketraman

11/22/2021, 4:50 PM
6 months later, any updates to this? Has anyone gotten a start on wrapping MDC components for compose-web?
b

Big Chungus

11/22/2021, 4:59 PM
I've made some progress with kmdc, but it's still not even halfway there. Feel free to copy what I have and wrap the missing components that you need by example
👍 1
r

rocketraman

11/22/2021, 5:00 PM
b

Big Chungus

11/22/2021, 5:03 PM
If anyone wants to collab on this, ping me and I will extract that module into its own repo prematurely to facilitate that. At this point it's just shitloads of dumb and tedious code to write. All the quirks are already ironed out...
r

rocketraman

11/22/2021, 5:03 PM
@Big Chungus My team and I would be interested in that
b

Big Chungus

11/22/2021, 5:04 PM
Sweet, I'll prepare the repo tomorrow. We can then have a quick chat/call to bring you up to speed on lessons learned so far with wrapping.
👍 1
h

hfhbd

11/22/2021, 5:25 PM
r

rocketraman

11/22/2021, 5:26 PM
Oh nice, thank you
Ah these are wrappers around React Material-UI, not MDC
h

hfhbd

11/22/2021, 5:28 PM
Yes, but a good start
b

Big Chungus

11/22/2021, 9:45 PM
Ok, here it is. Also released it to mavenCentral as a preview with what I got under 0.0.1
4
❤️ 1
o

Oliver.O

11/25/2021, 11:23 PM
I'm a bit late to the party, but I'm also interested in Compose+MDC. I had already extracted kamp/kmdc stuff into a local library, but so far it was merely experimental. To use this productively in forms-based scenarios, it seems that I'll need more flexibility, which currently only Sass-based customization provides. For example, I need to set the density scale for text fields, which can be accomplished via the
density($density-scale)
mixin: https://material.io/components/text-fields/web#api I'll be happy to drop my local experimental library, switch to KMDC and test what's already there. Additionally, I'll be happy to contribute whatever I might come up with, though it might take some time to bubble up my priority list.
👍 1
b

Big Chungus

11/26/2021, 12:20 AM
Hmm, sass support might be hard with current kmdc implicit loading. I'll see if I can unlock it somehow over the weekend.
But if you do find some spare time, feel free to select a module from mdc and contribute a wrapper module for kmdc.
I'd also be happy to discuss anything you might've found from your experience that you think kmdc could benefit from
Created some issues in case anyone decides to give it a go.
o

Oliver.O

11/26/2021, 3:46 PM
Regarding additional components, my first idea would be to create some documentation on how to create those manually. As I'm not too familiar with the details of style-loader and such, I might be a good guinea pig to question some stuff (and discuss possible explanations), like: Why is there a style variable referenced at the beginning of each component (like
MDCTextFieldStyle
)? Probably to make the loader aware. Why is the unused variable not eliminated by the Kotlin compiler? – The idea is that some additional documentation might make it easier for others to contribute, and thus attract more contributors. Does that sound reasonable? Regarding Sass, here is one density example that illustrates what I'm looking for: https://material-density.glitch.me/. A working Sass-based implementation would be excellent, so I'd appreciate your efforts towards this goal. Please let me know if I can assist with testing. Additionally, I have been looking at generator-based approaches like kotlin-mui for React-MUI. I'm not sure whether that might be feasible here (probably it's not).
b

Big Chungus

11/26/2021, 4:01 PM
Lots of good points! Gonna be a busy weekend 😄 To answer some of your queries now: • Style variable referenced in each component are required to load "side effects" as kotlin has no build-in way to do it properly and unused variables are removed by DCE. So this is basically a hack to load css via style-loader if that component is used. • Generator aproach for mui (and other react frameworks) works nicely, because both, react and compose, are declarative frameworks so APIs can match quite closely. This is not the case for MDC, unfortunatelly, as it is imperative framework and there's a lot of edge-cases to handle when mapping that to declarative compose (Have a look at MDCTopAppBar if you're curious) I'll try to document my approach so far in some .md to hopefully make it a bit more transparent.
🙏 1
❤️ 1
r

rocketraman

11/29/2021, 5:37 AM
@Oliver.O I've got the sass integration with kmdc working, if you are still interested.
1
b

Big Chungus

11/29/2021, 8:36 AM
I'm interested too. Can you share your setup?
h

hfhbd

11/29/2021, 8:53 AM
Me too! 😄
b

Big Chungus

11/29/2021, 8:56 AM
If it can be simplified to require minimal input from consumer projects, I'd love to switch kmdc to scss altogether.
o

Oliver.O

11/29/2021, 10:43 AM
I’m definitely still interested! 😃
r

rocketraman

11/29/2021, 5:47 PM
Ok, here goes. First, in
webpack.config.d
, add
sass.js
to inject this configuration into the webpack setup for Kotlin/JS:
Copy code
config.module.rules.push({
  test: /\.(scss|sass)$/,
  use: [
    /**
     *  fallback to style-loader in development
     *  "style-loader" creates style nodes from JS strings
     */
    "style-loader",   // translates CSS into CommonJS
    "css-loader",   // translates CSS into CommonJS
    "sass-loader"   // compiles Sass to CSS, using Node Sass by default
  ]
});
In
build.gradle.kts
, in the JS dependencies, add:
Copy code
// for theming mdc
implementation(npm("@material/theme", "^13.0.0"))
// for sass support
implementation(devNpm("sass", "^1.42.1"))
implementation(devNpm("sass-loader", "^12.3.0"))
Add `scss`/`sass` files in the JS resources, and then
require
them in your Kotlin/JS code:
Copy code
external fun require(o: String)
// resources contains `ccs/whatever.scss`
require("./css/whatever.scss")
🙏 1
Example scss files:
resources/css/custom-theme.scss
Copy code
@use "@material/theme" with (
  $primary: #5bb019,
  $secondary: #215221,
  $background: #fff,
  $on-primary: #2053d5,
  $on-secondary: #a2bbec,
);
resources/css/textfield-theme.scss
Copy code
@use './custom-theme.scss';
@use "@material/floating-label/mdc-floating-label";
@use "@material/line-ripple/mdc-line-ripple";
@use "@material/notched-outline/mdc-notched-outline";
@use "@material/textfield";

@include textfield.core-styles;

.mdc-text-field {
  @include textfield.ink-color(#307e0b)
}
o

Oliver.O

11/29/2021, 6:02 PM
Thanks for sharing! I'll be looking into it. Will be interesting to find a way of integrating Sass into the kmdc library with as little configuration as possible on the library consumer side. Maybe it boils down to just another Gradle plugin.
👍 1
K 1
6 Views