Create macro

[untlsn-old]

I had a chance to deal with Vue 3 recently and got curious about their vue/macro. Is it possible to create a macro for solidjs?

Helper:

const createRefSignal = <T>(value: T, options?: SignalOptions<T> | undefined) => {
  const [signal, setSignal] = createSignal(value, options);

  return {
    get value() { return signal() },
    set value(newVal: any) {
      setSignal(newVal)
    },
  }
}

And compile:

let value = $signal(0);

const increment = () => {
  value += 1;
}

const clear = () => {
  value = 0;
}

console.log(value);

to:

const value = createRefSignal(0);

const increment = () => {
  value.value += 1;
}

const clear = () => {
  value.value = 0;
}

console.log(value.value);

or (probably harder)

const [value, setValue] = createSignal(0);

const increment = () => {
  setValue(value()+1);
}

const clear = () => {
  setValue(0);
}

console.log(value());

[ryansolid]

People have been writing babel plugins to do this sort of thing. Check out:

https://github.com/LXSMNSYC/babel-plugin-solid-labels
https://github.com/orenelbaum/babel-plugin-reactivars-solid