apollo79 Posts - Answer Overflow

apollo79

Explore posts from servers

•Created by apollo79 on 8/9/2023 in #support

exclude specific file from getting bundled

I'm using nanolith (https://github.com/mstephen19/nanolith) in my solid-start app for loading some work off to a different thread. However, it is not possible with this library to define and run the tasks in the same file, which I do not do in my code, but happens. Is there a way to somehow exclude the file from being bundled?

1 replies

SSolidJS

•Created by apollo79 on 1/29/2023 in #support

SolidStart on Plesk

Is it possible to host a SolidStart app at a hoster who supports Node.js via the Plesk "panel"? I have to specify a file to execute, would that just be dist/server.js?

1 replies

SSolidJS

•Created by apollo79 on 1/2/2023 in #support

Solid Start run createServerData$ once

Is there a way to run createServerData$ only once?

2 replies

SSolidJS

•Created by apollo79 on 12/25/2022 in #support

problem with canvas

I'm having a quite weird problem currently. I am trying to port react-snowfall to solid (https://github.com/apollo79/solid-snowfall) and therefore working with a canvas. The code is, simplified like this:

const [canvasRef, setCanvasRef] = createSignal<HTMLCanvasElement>(null as unknown as HTMLCanvasElement);
const ctx = () => canvasRef().getContext("2d");

let animationFrame = 0;
let lastUpdate = Date.now();

const snowflakes = createSnowFlakes(canvasRef, snowflakeCount as Accessor<number>, config);

const render = (framesPassed = 1) => {
  if (canvasRef()) {
    // Update the positions of the snowflakes
    snowflakes.forEach((snowflake) => {
      snowflake.update(canvasRef, framesPassed as number);
    });

    // Render them if the canvas is available
    if (ctx()) {
      ctx()!.setTransform(1, 0, 0, 1, 0, 0);
      ctx()!.clearRect(0, 0, canvasRef().offsetWidth, canvasRef().offsetHeight);

      snowflakes.forEach((snowflake) => snowflake.draw(ctx()!));
    }
  }
};

const loop = () => {
  // Update based on time passed so that a slow frame rate won't slow down the snowflake
  const now = Date.now();
  const msPassed = Date.now() - lastUpdate;
  lastUpdate = now;

  // Frames that would have passed if running at 60 fps
  const framesPassed = msPassed / targetFrameTime;

  render(framesPassed);

  animationFrame = requestAnimationFrame(loop);
};

createEffect(() => {
  loop();
  onCleanup(() => cancelAnimationFrame(animationFrame));
});

const [canvasRef, setCanvasRef] = createSignal<HTMLCanvasElement>(null as unknown as HTMLCanvasElement);
const ctx = () => canvasRef().getContext("2d");

let animationFrame = 0;
let lastUpdate = Date.now();

const snowflakes = createSnowFlakes(canvasRef, snowflakeCount as Accessor<number>, config);

const render = (framesPassed = 1) => {
  if (canvasRef()) {
    // Update the positions of the snowflakes
    snowflakes.forEach((snowflake) => {
      snowflake.update(canvasRef, framesPassed as number);
    });

    // Render them if the canvas is available
    if (ctx()) {
      ctx()!.setTransform(1, 0, 0, 1, 0, 0);
      ctx()!.clearRect(0, 0, canvasRef().offsetWidth, canvasRef().offsetHeight);

      snowflakes.forEach((snowflake) => snowflake.draw(ctx()!));
    }
  }
};

const loop = () => {
  // Update based on time passed so that a slow frame rate won't slow down the snowflake
  const now = Date.now();
  const msPassed = Date.now() - lastUpdate;
  lastUpdate = now;

  // Frames that would have passed if running at 60 fps
  const framesPassed = msPassed / targetFrameTime;

  render(framesPassed);

  animationFrame = requestAnimationFrame(loop);
};

createEffect(() => {
  loop();
  onCleanup(() => cancelAnimationFrame(animationFrame));
});

Where the createSnowFlakes function just creates an array of snowflakes and handles config updates. The weird thing now is, that everything gets executed, the loop works and the snowflake.draw() methods is called, but nothing appears on the screen. Maybe this is a problem with the context or the canvas ref? I don't get it

2 replies

SSolidJS

•Created by apollo79 on 12/24/2022 in #support

useDeepCompareEffect in solid

How would I do something like this in solid-js (would I do this)?

/**
 * Same as `React.useEffect` but uses a deep comparison on the dependency array. This should only
 * be used when working with non-primitive dependencies.
 *
 * @param effect Effect callback to run
 * @param deps Effect dependencies
 */
export function useDeepCompareEffect(effect: React.EffectCallback, deps: React.DependencyList) {
  const ref = useRef<React.DependencyList>(deps)

  // Only update the current dependencies if they are not deep equal
  if (!isEqual(deps, ref.current)) {
    ref.current = deps
  }

  // eslint-disable-next-line react-hooks/exhaustive-deps
  return useEffect(effect, ref.current)
}

/**
 * Same as `React.useEffect` but uses a deep comparison on the dependency array. This should only
 * be used when working with non-primitive dependencies.
 *
 * @param effect Effect callback to run
 * @param deps Effect dependencies
 */
export function useDeepCompareEffect(effect: React.EffectCallback, deps: React.DependencyList) {
  const ref = useRef<React.DependencyList>(deps)

  // Only update the current dependencies if they are not deep equal
  if (!isEqual(deps, ref.current)) {
    ref.current = deps
  }

  // eslint-disable-next-line react-hooks/exhaustive-deps
  return useEffect(effect, ref.current)
}

13 replies

SSolidJS

•Created by apollo79 on 12/13/2022 in #support

SolidStart render page from POST function

I have a form in SolidStart with method="post" and action="". To validate the form on server side, I export a POST function. However I am wondering how I could, if the data I got isn't valid, show the form again with the data the user already submitted (and maybe additional error messages) from this POST function?

10 replies

Gaming

Programming