fuyutarow / solid-chrome-extension-template

Chrome Extension Boilerplate with SolidJS + Vite + TypeScript + Manifest V3 + Hot Relaod
MIT License
102 stars 18 forks source link

development build: solidjs reactivity is broken #8

Closed milahu closed 1 year ago

milahu commented 1 year ago

i have this simple src/pages/options/Options.tsx

setResults has no effect in development build, but it works in production build

probably same issue as #7

import logo from "@assets/img/logo.svg";
import "@src/styles/index.css";
import styles from "./Options.module.css";
import {createSignal} from "solid-js"
import {For} from "solid-js"

const Options = () => {
  let searchButton;
  const [getResults, setResults] = createSignal([
    "result0",
    "result0",
  ])
  setTimeout(() => {
    // update results
    console.log("update")
    setResults((old) => old.concat(["result3"]))
    setResults((old) => old.concat(["result4"]))
  }, 1000)
  function startSearch(event) {
    event.preventDefault()
    console.log("submit")
    searchButton.innerHTML = "Searching...";
    searchButton.disabled = true;
    // clear results
    console.log("clear")
    setResults([
      "result1",
      "result2",
    ])
    // update results
    console.log("update")
    setResults((old) => old.concat(["result3"]))
    setResults((old) => old.concat(["result4"]))
  }
  return (
    <div class={styles.App}>
      <form class={styles.form} onSubmit={startSearch}>
        <input/>
        <button ref={searchButton}>Search</button>
      </form>
      <ol class={styles.results}>
        <For each={getResults()}>
          {result => (
            <li>result: {JSON.stringify(result, null, 2)}</li>
          )}
        </For>
      </ol>
      <pre>{JSON.stringify(getResults(), null, 2)}</pre>
    </div>
  );
};

export default Options;
milahu commented 1 year ago

probably same issue as #7

yes