Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not available in tauri #23

Open
wangxg422 opened this issue Sep 2, 2024 · 1 comment
Open

Not available in tauri #23

wangxg422 opened this issue Sep 2, 2024 · 1 comment

Comments

@wangxg422
Copy link

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
Copy link
Owner

lxsmnsyc commented Sep 2, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants