Problems with composite component

[slavap]

I'm testing vue-gwt with very simple test case.
And there are some strange things I cannot figure out.

@Component
public class BoilingVerdict extends VueComponent {
    @Prop @JsProperty String celsius;

    @JsMethod double parseFloat(String value) {
        if (value == null) return 0;
        String s = value.trim();
        if (s.isEmpty()) return 0;
        try {
            return Double.parseDouble(s);
        } catch (Exception e) {
            return 0;
        }
    }
}

BoilingVerdict.html

<p v-if="parseFloat(celsius) >= 100">The water would boil.</p>
<p v-else>The water would not boil.</p>

@Component
public class TemperatureInput extends VueComponent {
    @Prop @JsProperty String value;
    @Prop @JsProperty String scale;

    private static final Map<String, String> scaleNames = new HashMap<String, String>() {{
        put("c", "Celsius");
        put("f", "Fahrenheit");
    }};

    @Computed public void setVal(String val) {
        this.$emit("input", val);
    }

    @Computed public String getVal() {
        return value;
    }

    @Computed public String getScaleName() {
      return scaleNames.get(scale);
    }
}

TemperatureInput.html

<fieldset>
  <legend>Enter temperature in {{scaleName}}:</legend>
  <input v-model="val" />
</fieldset>

@Component(components = { BoilingVerdict.class, TemperatureInput.class })
public class TemperatureCalc extends VueComponent {

    @JsProperty String temperature = "";
    @JsProperty String scale = "c";

    private static final Function<Double, Double> toCelsius = fahrenheit -> (fahrenheit - 32) * 5 / 9;
    private static final Function<Double, Double> toFahrenheit = celsius -> (celsius * 9 / 5) + 32;

    private static String tryConvert(String temperature, Function<Double, Double> convert) {
      if (temperature == null || temperature.isEmpty()) return "";
      try {
        double input = Double.parseDouble(temperature);
        double output = convert.apply(input);
        double rounded = Math.round(output * 1000) / 1000;
        return String.valueOf(rounded);
      } catch (Exception e) {
          return "";
      }
    }

    @Computed public String getCelsius() {
        return "f".equals(scale) ? tryConvert(temperature, toCelsius) : temperature;
    }

    @Computed public void setCelsius(String value) {
      scale = "c";
      temperature = value;
    }

    @Computed public String getFahrenheit() {
        return "c".equals(scale) ? tryConvert(temperature, toFahrenheit) : temperature;
    }

    @Computed public void setFahrenheit(String value) {
        scale = "f";
        temperature = value;
    }
}

TemperatureCalc.html

<div>
  <div>
    <TemperatureInput scale="c" v-model="celsius" />
  </div>
  <div>
    <TemperatureInput scale="f" v-model="fahrenheit" />
  </div>
  <div>
    <BoilingVerdict :celsius="celsius" />
  </div>
</div>

First question: Why I have to put every child component to separate div?

In app class I have the following code:

    Vue.component("TemperatureInput", TemperatureInput.class);
    Vue.component("BoilingVerdict", BoilingVerdict.class);
    Vue.component("TemperatureCalc", TemperatureCalc.class);
    Vue.attach("#temperatureCalcContainer", TemperatureCalc.class);

Second question: Why I have to register all components manually?

[adrienbaron]

Hi!

For you first component: BoilingVerdict.html, it must have a single root element (that's a Vue.js constraint), maybe we should fire an error when it's not the case.

First question: You don't have to! This should work just fine:

<div>
    <TemperatureInput scale="c" v-model="celsius" />
    <TemperatureInput scale="f" v-model="fahrenheit" />
    <BoilingVerdict :celsius="celsius" />
</div>

Second question: You also don't have to 😉, just declaring the dependency locally in @Component(components = { BoilingVerdict.class, TemperatureInput.class }) should be enough.

You can change your app class to:

    Vue.attach("#temperatureCalcContainer", TemperatureCalc.class);

If you have other questions you can also ask them on our Gitter: https://gitter.im/Axellience/vue-gwt

[slavap]

@adrienbaron Strange, but I have components = { BoilingVerdict.class, TemperatureInput.class ) in my code, and have to register all components manually anyway.

[adrienbaron]

Oh! I see what's happing, sorry I'm not awake yet ;). So the name in your template is not the name of your java class but that name converted to kebab-case.
See How Is the Component HTML Name Set? in https://axellience.github.io/vue-gwt/introduction/#composing-with-components
So:

<div>
    <temperature-input scale="c" v-model="celsius" />
    <temperature-input scale="f" v-model="fahrenheit" />
    <boiling-verdict :celsius="celsius" />
</div>

[slavap]

@adrienbaron Thanks! Will try it in the morning.

[slavap]

@adrienbaron Just checked your proposed solution. It works, and yes, it was HTML naming convention problem.
And I have NOT added single root for BoilingVerdict.html, so not sure "it must have a single root element (that's a Vue.js constraint)" is really mandatory.

[slavap]

@adrienbaron Answering to myself :-) Yes, single root is mandatory, in my case:

<p v-if="parseFloat(celsius) >= 100">The water would boil.</p>
<p v-else>The water would not boil.</p>

works without single root only because one of paragraphs could be visible, not both.
If I add another element, then single root is immediately required, for example:

<div>
  <div>Decision:</div>
  <p v-if="parseFloat(celsius) >= 100">The water would boil.</p>
  <p v-else>The water would not boil.</p>
</div>

[adrienbaron]

Great! Thanks for the details 😊! Closing the issue 😉