[Feature]: Transform useState/useEffect of ReactJS to createSignal/onCleanup of SolidJS.

[trivikr]

Input code

import React, { useState, useEffect } from "react";
import { render } from "react-dom";

const CountingComponent = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => setCount(count + 1), 1000);
    return () => {
      clearInterval(interval);
    };
  }, []);
  return <div>Count value is {count}</div>;
};

render(() => <CountingComponent />, document.getElementById("app"));

Expected Output

import { createSignal, onCleanup, onMount } from "solid-js";
import { render } from "solid-js/web";

const CountingComponent = () => {
  const [count, setCount] = createSignal(0);
  onMount(() => {
    const interval = setInterval(() => setCount(count + 1), 1000);
    onCleanup(() => clearInterval(interval));
  });
  return <div>Count value is {count()}</div>;
};

render(() => <CountingComponent />, document.getElementById("app"));

Additional context

Example transform to convert useState/useEffect of ReactJS to createSignal/onCleanup of SolidJS.

[lxsmnsyc]

It's also interesting if we can convert "unlisted dependencies" and transform them into untrack calls. For example:

const [count, setCount] = useState(0);

useEffect(() => {
  console.log(count); // passively  read count
}, []);

into

const [count, setCount] = createSignal(0);

createEffect(() => {
  console.log(untrack(count)); // passively  read count
});

[N0tExisting]

I would actually expect the useEffect code to be placed in an onMount block:

import { createSignal, onMount, onCleanup } from "solid-js";
import { render } from "solid-js/web";

const CountingComponent = () => {
  const [count, setCount] = createSignal(0);
  onMount(() => {
    const interval = setInterval(() => setCount(count + 1), 1000);
    onCleanup(() => clearInterval(interval));
  });
  return <div>Count value is {count()}</div>;
};

render(() => <CountingComponent />, document.getElementById("app"));

[trivikr]

I would actually expect the useEffect code to be placed in an onMount block

Thanks, @N0tExisting!
I've updated the issue description, and the feature request template in 021dde0

[lxsmnsyc]

I would actually expect the useEffect code to be placed in an onMount block:

Well actually it doesn't have to

[edemaine]

It's also interesting if we can convert "unlisted dependencies" and transform them into untrack calls.

I agree this would be cool. Simpler to implement though (much more "like React") would be to transform into on:

[name, setName] = useState('');
[debug, setDebug] = useState(false);
useEffect(() => {
  if (debug) console.log(`Hello ${name}!`);
}, [name]);

→

[name, setName] = createSignal('');
[debug, setDebug] = createSignal(false);
useEffect(on([name], () => {
  if (debug()) console.log(`Hello ${name()}!`);
}));

This seems like a natural first goal; then we can output nicer things when the list is empty or complete, or use untrack which is maybe more Solid-like. Though in both the complete and untrack case, I worry that it's hard to tell whether the code actually depends on things in the Solid sense at compile time, because of conditionals etc. Converting to on actually has the same semantics so is preferable if we want correctness (as opposed to near-correctness that requires hand-editing).