Rethink API and DX

[alvarosabu]

The current API is far from ideal, we initially followed the same DX as https://github.com/pmndrs/leva
but encountered number of issues"

• Need to use value.value for multiple controls Rethink value.value for multiple controls #92
• Shared useControls composable, impossible to have multiple distinct instances Leches shares useControls; can't have multiple, distinct instances #98

I will copy the different suggestions from @andretchen0

Example: Tweakpane

Tweakpane | Bindings

Tweakpane uses .addBinding(stateObject, key, params).

const PARAMS = {
  speed: 50,
};

const pane = new Pane();
pane.addBinding(PARAMS, 'speed', {
  min: 0,
  max: 100,
});

With this setup, there's no need for a watch and so no value.value. The value is already being "watched" with the configuration above.

Example: v-tweakpane

A variation of Tweakpane, this time with Vue. Like Tweakpane, it uses a specific method for creating a widget and binding at the same time. This avoids the need to watch and avoids .value.value.

const onPaneTwoCreated = (pane: any) => {
  pane.registerPlugin(CamerakitPlugin);
  const PARAMS = {
    flen: 55,
    fnum: 1.8,
    iso: 100,
  };
  pane.addInput(PARAMS, 'flen', {
    view: 'cameraring',
    series: 0,
    unit: { pixels: 50, ticks: 10, value: 0.2 },
    min: 1,
    step: 0.02,
  });

The example uses some callbacks for setup, which Leches doesn't need. Personally, I'd like to avoid having those.

Example: Vuetify

In this Vuetify example, most of the config that Leches does in <setup> is handled in <template>. Bindings are created using v-model in the <template>.

<template>
  <v-slider
    v-model="slider"
    class="align-center"
    :max="max"
    :min="min"
    hide-details
  >
    <template v-slot:append>
      <v-text-field
        v-model="slider"
        hide-details
        single-line
        density="compact"
        type="number"
        style="width: 70px"
      ></v-text-field>
    </template>
  </v-slider>
</template>

<script>
  export default {
    data () {
      return {
        min: -50,
        max: 90,
        slider: 40,
      }
    },
  }
</script>