Thread
#compose-web
    Big Chungus

    Big Chungus

    1 year ago
    Has anyone tried using compose-web with mdc yet?
    jim

    jim

    1 year ago
    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!
    Big Chungus

    Big Chungus

    1 year ago
    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.
    Will be wrapping lots more as I go with my UI rebuild with compose-web. Might even have enough for a standalone library eventualy
    With webcomponents it would've been even easier, as you can then just render a custom tag and be done with it
    Colton Idle

    Colton Idle

    1 year ago
    @Big Chungus that link 404s for me
    d

    Daniele B

    1 year ago
    the file moved to here
    Big Chungus

    Big Chungus

    1 year ago
    Yeah, force-pushed some updates that overridden commit history 😅
    g

    Greg Steckman

    1 year ago
    @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:
    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?
    Big Chungus

    Big Chungus

    1 year ago
    I was looking how to theme, thanks!
    As for sass, drawback is that older browsers require pollyfils to support css variables
    g

    Greg Steckman

    1 year ago
    Additional variables are described here
    r

    rocketraman

    10 months ago
    6 months later, any updates to this? Has anyone gotten a start on wrapping MDC components for compose-web?
    Big Chungus

    Big Chungus

    10 months ago
    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
    r

    rocketraman

    10 months ago
    Big Chungus

    Big Chungus

    10 months ago
    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

    10 months ago
    @Big Chungus My team and I would be interested in that
    Big Chungus

    Big Chungus

    10 months ago
    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.
    hfhbd

    hfhbd

    10 months ago
    r

    rocketraman

    10 months ago
    Oh nice, thank you
    Ah these are wrappers around React Material-UI, not MDC
    hfhbd

    hfhbd

    10 months ago
    Yes, but a good start
    Big Chungus

    Big Chungus

    10 months ago
    Ok, here it is. Also released it to mavenCentral as a preview with what I got under 0.0.1
    Oliver.O

    Oliver.O

    10 months ago
    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.
    Big Chungus

    Big Chungus

    10 months ago
    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.
    Oliver.O

    Oliver.O

    10 months ago
    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).
    Big Chungus

    Big Chungus

    10 months ago
    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.
    r

    rocketraman

    9 months ago
    @Oliver.O I've got the sass integration with kmdc working, if you are still interested.
    Big Chungus

    Big Chungus

    9 months ago
    I'm interested too. Can you share your setup?
    hfhbd

    hfhbd

    9 months ago
    Me too! 😄
    Big Chungus

    Big Chungus

    9 months ago
    If it can be simplified to require minimal input from consumer projects, I'd love to switch kmdc to scss altogether.
    Oliver.O

    Oliver.O

    9 months ago
    I’m definitely still interested! 😃
    r

    rocketraman

    9 months ago
    Ok, here goes. First, in
    webpack.config.d
    , add
    sass.js
    to inject this configuration into the webpack setup for Kotlin/JS:
    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:
    // 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:
    external fun require(o: String)
    // resources contains `ccs/whatever.scss`
    require("./css/whatever.scss")
    Example scss files:
    resources/css/custom-theme.scss
    @use "@material/theme" with (
      $primary: #5bb019,
      $secondary: #215221,
      $background: #fff,
      $on-primary: #2053d5,
      $on-secondary: #a2bbec,
    );
    resources/css/textfield-theme.scss
    @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)
    }
    Oliver.O

    Oliver.O

    9 months ago
    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.