lxsmnsyc / solid-labels

Simple, reactive labels for SolidJS
MIT License
243 stars 8 forks source link

Not available in tauri #23

Open wangxg422 opened 1 month ago

wangxg422 commented 1 month ago

When using tauri v2 + solidjs + vite to develop app, solidjs-labels does not work.

My configuration is as follows:

import { defineConfig } from "vite";
import solid from "vite-plugin-solid";
import solidPlugin from "vite-plugin-solid";
import solidLabels from "babel-plugin-solid-labels";
import path from "path";

const host = process.env.TAURI_DEV_HOST;

// https://vitejs.dev/config/
export default defineConfig(async () => ({
  plugins: [
    solid(),
    solidPlugin({
      babel: {
        plugins: [
          [
            solidLabels,
            {
              dev: false,
              disabled: {
                labels: {
                  signal: true,
                },
                pragma: {
                  "@signal": true,
                },
                ctf: {
                  $signal: false,
                },
              },
              filter: {
                include: 'src/**/*.{ts,js,tsx,jsx}',
                exclude: 'node_modules/**/*.{ts,js,tsx,jsx}',
              },
            },
          ],
        ],
      },
    }),
  ],

My component is as follows:

import { createSignal, type Component } from "solid-js";

const Home: Component = () => {
  let [process, setProcess] = createSignal(10);
  let process2 = $signal(10);

  const changeProcess = (e: Event) => {
    const target = e.target as HTMLInputElement;
    setProcess(parseInt(target.value));
  };

  const clickBtn = () => {
    setProcess(process() + 10);
  };

  const changeProcess2 = (e: Event) => {
    const target = e.target as HTMLInputElement;
    console.log(target.value)
    process2 = parseInt(target.value);
  };

  const clickBtn2 = () => {
    process2 = process2 + 10;
  };

  return (
    <div class="w-full h-full flex justify-center items-center">
      <div class="w-full h-1/4">
        <button class="btn btn-success" onClick={clickBtn}>
          确定
        </button>
        <input
          type="range"
          min="0"
          max="100"
          value={process()}
          class="range"
          onChange={changeProcess}
        />
        <div>
          <span>{process()}</span>
        </div>
      </div>
      <div class="w-full h-1/4">
        <button class="btn btn-success" onClick={clickBtn2}>
          确定
        </button>
        <input
          type="range"
          min="0"
          max="100"
          value={process2}
          class="range"
          onChange={changeProcess2}
        />
        <span>{"process2:" + process2}</span>
      </div>
    </div>
  );
};

export default Home;
lxsmnsyc commented 1 month ago

I would just recommend using the vite plugin rather than the babel plugin directly.