S
SolidJS•3mo ago
binajmen

Why do I end up with a server-fns for a number input component?

I noticed in the build log these lines (see attachment). I do not understand why I have the InputNumber component in the server fns assets: .vinxi/build/server-fns/_server/number-input.mjs 0.90 kB This is the component itself: 
import { Show, splitProps, type ComponentProps } from "solid-js";
import { Input } from "./input";

interface NumberInputProps
  extends Omit<ComponentProps<typeof Input>, "onChange"> {
  suffix?: string;
  range?: [number, number];
  onChange?: (value: number) => void;
}

export function NumberInput(props: NumberInputProps) {
  const [local, others] = splitProps(props, ["suffix", "onChange"]);
  let ref!: HTMLInputElement;

  function parse(input: string) {
    let number = Number.parseFloat(input.replace(",", "."));

    if (Number.isNaN(number)) {
      console.error("Invalid number format");
      ref.value = String(0);
      return;
    }

    if (props.range) {
      const [min, max] = props.range;
      number = Math.max(min, Math.min(max, number));
    }

    ref.value = String(number);
    local.onChange?.(number);
  }

  return (
    <div class="flex items-center gap-2">
      <Input
        {...others}
        ref={ref}
        type="text"
        inputmode="decimal"
        pattern="[\+\-]?[0-9]*[.,]?[0-9]+([eE][\+\-]?[0-9]+)?"
        onChange={(e) => parse(e.currentTarget.value)}
      />
      <Show when={local.suffix}>
        <span class="text-gray-500 pointer-events-none">{local.suffix}</span>
      </Show>
    </div>
  );
}
import { Show, splitProps, type ComponentProps } from "solid-js";
import { Input } from "./input";

interface NumberInputProps
  extends Omit<ComponentProps<typeof Input>, "onChange"> {
  suffix?: string;
  range?: [number, number];
  onChange?: (value: number) => void;
}

export function NumberInput(props: NumberInputProps) {
  const [local, others] = splitProps(props, ["suffix", "onChange"]);
  let ref!: HTMLInputElement;

  function parse(input: string) {
    let number = Number.parseFloat(input.replace(",", "."));

    if (Number.isNaN(number)) {
      console.error("Invalid number format");
      ref.value = String(0);
      return;
    }

    if (props.range) {
      const [min, max] = props.range;
      number = Math.max(min, Math.min(max, number));
    }

    ref.value = String(number);
    local.onChange?.(number);
  }

  return (
    <div class="flex items-center gap-2">
      <Input
        {...others}
        ref={ref}
        type="text"
        inputmode="decimal"
        pattern="[\+\-]?[0-9]*[.,]?[0-9]+([eE][\+\-]?[0-9]+)?"
        onChange={(e) => parse(e.currentTarget.value)}
      />
      <Show when={local.suffix}>
        <span class="text-gray-500 pointer-events-none">{local.suffix}</span>
      </Show>
    </div>
  );
}
This feels wrong. Am I misinterpreting the build output logs? What should I search to understand what is happening?

message.txt

4 Replies
Birk Skyum
Birk Skyum•3mo ago
@binajmen , what do you see if you instead use this version of start? npm i https://pkg.pr.new/@solidjs/start@1715 We recently did a refactor of how the server functions work https://github.com/solidjs/solid-start/pull/1715
GitHub
refactor: adopt @tanstack/server-functions-plugin by brenelz · Pull...
Resolves #1735 Replace @vinxi/server-functions with @tanstack/server-functions-plugin
binajmen
binajmenOP•3mo ago
I might need to stop using "use server" in classes before transitioning:

message.txt

Birk Skyum
Birk Skyum•3mo ago
Was that the new "release candidate" version of solid start?
binajmen
binajmenOP•3mo ago
with the one you suggested me: npm i https://pkg.pr.new/@solidjs/start@1715

Did you find this page helpful?