Is the builder pattern or similar possible?

[spikespaz]

I am making custom widgets and have multiple supported styles. A button can have the following styling:

export struct ButtonStyle {
  border-width: length,
  border-radius: length,
  filled: bool,
  font-family: string,
  font-size: length,
  font-weight: int,
  accent-text: bool,
  margin-x: length,
  margin-y: length,
  padding-x: length,
  padding-y: length,
  depress: length,
  shadow-blur: length,
}

export struct AccentScheme {
  fg0: brush,
  fg1: brush,
  fg2: brush,
  fg3: brush,
  fg4: brush,
  bg0: brush,
  bg1: brush,
  bg2: brush,
  bg3: brush,
  bg4: brush,
  light: brush,
  saturated: brush,
  vibrant: brush,
  rich: brush,
}

Button takes these as properties:

export component Button {
  in property <AccentScheme> base-accent: MaterialScheme.base-accent;
  in property <AccentScheme> accent: MaterialScheme.teal;
  in property <ButtonStyle> style: GlobalStyle.button-normal;

Now, I may wish to provide several styles for Button. I can export these as more components that are named, such as ButtonLarge, Button, ButtonSmall, ButtonLargeFilled, ButtonFilled, ButtomSmallFilled, etc. I would rather not. So I have come up with the following solution:

export enum ControlSize {
  Large, Normal, Small
}

export enum ControlTheme {
  Rounded, Boxy
}

export component Button {
  in property <AccentScheme> base-accent: MaterialScheme.base-accent;
  in property <AccentScheme> accent: MaterialScheme.teal;

  in property <bool> filled: false;

  in property <ControlSize> size: ControlSize.Normal;
  in property <ControlTheme> theme: ControlTheme.Rounded;

  in property <ButtonStyle> style: StyleFactory.button(filled, size, theme);

Now, I have to make the StyleFactory and the button function:

export global StyleFactory {
  private property <ButtonStyle> button-style: {
    border-width: length,
    border-radius: length,
    filled: bool,
    font-family: string,
    font-size: length,
    font-weight: int,
    accent-text: bool,
    margin-x: length,
    margin-y: length,
    padding-x: length,
    padding-y: length,
    depress: length,
    shadow-blur: length,
  };

  public function button(filled: bool, size: ControlSize, theme: ControlTheme) -> ButtonStyle {
    if (filled) {
      button-style.filled: true;
    }
    if (size == ControlSize.L) {
      button-style.font-size: 12px;
      button-style.font-weight: 600;
      button-style.border-width: 3px;
      button-style.border-radius: 7px;
      button-style.margin-x: 8px;
      button-style.margin-y: 8px;
      button-style.padding-x: 18px;
      button-style.padding-y: 10px;
      button-style.depress: 8px;
      button-style.shadow-blur: 4px;
    } else if (size == ControlSize.M) {
      font-size: 16px;
      font-weight: 500;
      border-width: 2px;
      border-radius: 5px;
      margin-x: 4px;
      margin-y: 4px;
      padding-x: 14px;
      padding-y: 6px;
      depress: 4px;
      shadow-blur: 2px;
    }
    button-style // attempted expression return
  }
}

It's not finished, because I don't know how to finish it, but you get the idea. How can I "build" the ButtonStyle struct from the arguments to StyleFactory.button? I was trying to use a private property as state, but can't. I don't see a way to make temporary variables either.

[ogoffart]

This is an interesting concept. I'm not used to work with struct so big, but i see why we have the need of this.
Without temporary local variables (which we may want to add?) this is getting difficult.

I was trying to use a private property as state, but can't.

This should work though (unless you also want the function to be pure?)
example

[spikespaz]

The function would need to be pure

[spikespaz]

@ogoffart
Fixed up code, sparse comments.

import { ControlSize, ControlTheme } from "metrics.slint";

export struct ButtonStyle {
  border-width: length,
  border-radius: length,
  filled: bool,
  font-family: string,
  font-size: length,
  font-weight: int,
  accent-text: bool,
  margin-x: length,
  margin-y: length,
  padding-x: length,
  padding-y: length,
  depress: length,
  // depress-easing: easing,
  depress-duration: duration,
  shadow-blur: length,
}

export global StyleFactory {
  private property <ButtonStyle> button-style;

  // This needs to be pure to be used in a property default.
  // Meaning `Button` cannot call this function to get a default style
  // generated by this function.
  // This cannot mutate global state, and I believe the only logical solution
  // is to introduce local variables.
  public function button(filled: bool, size: ControlSize, theme: ControlTheme) -> ButtonStyle {
    button-style = {
      filled: false,
      font-size: 0,
      font-weight: 0,
      border-width: 0,
      border-radius: 0,
      margin-x: 0,
      margin-y: 0,
      padding-x: 0,
      padding-y: 0,
      font-family: "",
      accent-text: false,
      depress: 0,
      shadow-blur: 0,
    };

    button-style.filled = filled;

    // This is fine for a simple language,
    // only gripe is that it isn't forced to be exhaustive on variants.
    // Since you usually want to fulfill behavior for each variant,
    // perhaps a compromie should be investigated.
    if (size == ControlSize.Large) {
      button-style.font-size = 18px;
      button-style.font-weight = 600;
      button-style.border-width = 3px; // unset later
      button-style.border-radius = 7px; // unset later
      button-style.margin-x = 8px;
      button-style.margin-y = 8px;
      button-style.padding-x = 18px;
      button-style.padding-y = 10px;
      button-style.depress = 8px;
      button-style.shadow-blur = 4px;
    } else if (size == ControlSize.Medium) {
      button-style.font-size = 16px;
      button-style.font-weight = 500;
      button-style.border-width = 2px; // unset later
      button-style.border-radius = 5px; // unset later
      button-style.margin-x = 4px;
      button-style.margin-y = 4px;
      button-style.padding-x = 14px;
      button-style.padding-y = 6px;
      button-style.depress = 4px;
      button-style.shadow-blur = 2px;
    } else if (size == ControlSize.Small) {
      button-style.font-size = 12px;
      button-style.font-weight = 400;
      button-style.border-width = 1px; // unset later
      button-style.border-radius = 3px; // unset later
      button-style.margin-x = 3px;
      button-style.margin-y = 3px;
      button-style.padding-x = 10px;
      button-style.padding-y = 3px;
      button-style.depress = 2px;
      button-style.shadow-blur = 2px;
    }

    if (theme == ControlTheme.Rounded) {
      button-style.border-width = 0;
    } else if (theme == ControlTheme.Boxy) {
      button-style.border-radius = 0;
    }

    button-style; // I don't like the semicolon on expression return
  }
}