deminearchiver Posts - Answer Overflow

deminearchiver

Explore posts from servers

•Created by deminearchiver on 8/8/2024 in #support

Need help debugging animations

I had a brilliant idea for implementing an animated responsive tab bar component, but I need help debugging animations. Explanation The idea is as follows: instead of making the indicator reside in the tab bar element, move it inside the currently active tab. This way if the tab changes its width the indicator will resize as well. To animate it, we need to calculate offsets (left and right) of the previous tab relative to the current tab. If there are multiple ongoing animations we need to readjust each single one (create a new animation relative to the current tab and set its currentTime to the time of the animation we are adjusting). The problem If I have 2 simulatenous animations, everything works as expected, but with 3 or more the indicator starts shifting. (see attachment) I'm not that good at doing maths in coordinate space, so I must have miscalculated something. I hope someone can point me in the right direction. Minimal, reproducible example To observe the problem, quickly click through 3 or more different tabs (the animation will break) Here's the link to a MRE (heavily simplified): https://codesandbox.io/p/devbox/tab-bar-36kj36

33 replies

SSolidJS

•Created by deminearchiver on 7/25/2024 in #support

Cannot build for Vercel

For context So far I'm not satisfied with Solid Start because I wasn't able to deploy the app at least anywhere (I tried Vercel, Netlify and Cloudflare). But Vercel is my main target so this question is about deploying to Vercel specifically. Also I haven't really seen anyone to have the same problem as I do. How to reproduce 1. Create a new Solid Start project

npm init solid@latest

npm init solid@latest

2. Choose any template (I chose hackernews) 3. Edit your app.config.ts as follows:

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  server: {
    preset: "vercel-edge",
  },
});

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  server: {
    preset: "vercel-edge",
  },
});

4. Run npm run build Error

ERROR  Cannot read properties of undefined (reading 'split')
  at /F:/repos/hackernews/node_modules/@rollup/plugin-inject/dist/es/index.js:74:74
  at Map.forEach (<anonymous>)
  at inject (/F:/repos/hackernews/node_modules/@rollup/plugin-inject/dist/es/index.js:71:16)
  at getRollupConfig (/F:/repos/hackernews/node_modules/nitropack/dist/nitro.mjs:2036:29)
  at build (/F:/repos/hackernews/node_modules/nitropack/dist/nitro.mjs:2349:24)
  at createBuild (/F:/repos/hackernews/node_modules/vinxi/lib/build.js:306:8)
  at async Object.run (/F:/repos/hackernews/node_modules/vinxi/bin/cli.mjs:227:5)
  at async runCommand (/F:/repos/hackernews/node_modules/citty/dist/index.mjs:316:16)
  at async runCommand (/F:/repos/hackernews/node_modules/citty/dist/index.mjs:307:11)
  at async runMain (/F:/repos/hackernews/node_modules/citty/dist/index.mjs:445:7)



ERROR  Cannot read properties of undefined (reading 'split')

ERROR  Cannot read properties of undefined (reading 'split')
  at /F:/repos/hackernews/node_modules/@rollup/plugin-inject/dist/es/index.js:74:74
  at Map.forEach (<anonymous>)
  at inject (/F:/repos/hackernews/node_modules/@rollup/plugin-inject/dist/es/index.js:71:16)
  at getRollupConfig (/F:/repos/hackernews/node_modules/nitropack/dist/nitro.mjs:2036:29)
  at build (/F:/repos/hackernews/node_modules/nitropack/dist/nitro.mjs:2349:24)
  at createBuild (/F:/repos/hackernews/node_modules/vinxi/lib/build.js:306:8)
  at async Object.run (/F:/repos/hackernews/node_modules/vinxi/bin/cli.mjs:227:5)
  at async runCommand (/F:/repos/hackernews/node_modules/citty/dist/index.mjs:316:16)
  at async runCommand (/F:/repos/hackernews/node_modules/citty/dist/index.mjs:307:11)
  at async runMain (/F:/repos/hackernews/node_modules/citty/dist/index.mjs:445:7)



ERROR  Cannot read properties of undefined (reading 'split')

55 replies

SSolidJS

•Created by deminearchiver on 7/10/2024 in #support

Cloudflare Pages deployment route content not loaded

7 replies

SSolidJS

•Created by deminearchiver on 7/8/2024 in #support

Per-route CSS when using FileRoutes

If I want to have a CSS file for an individual route (i.e. that route has unique page flow compared to others), where should I put the CSS file? It seems incredibly inconvenient to have CSS files in a separate folder.

// routes/index.tsx
import "./index.css"; // Where should this file be?!

export default function Home() {
  return (
    <main>
      <div class="hero">...</div>
    </main>
  );
}

// routes/index.tsx
import "./index.css"; // Where should this file be?!

export default function Home() {
  return (
    <main>
      <div class="hero">...</div>
    </main>
  );
}

11 replies

SSolidJS

•Created by deminearchiver on 5/8/2024 in #support

Ref's parentElement

Is it safe to do this? How do I make the parent reactive?

export const Child: Component = (props) => {
  let ref!: HTMLElement;

  onMount(() => {
    ref.parentElement.addEventListener(/*... */);
  });

  return (
    <div ref={ref} />
  );
}

export const Child: Component = (props) => {
  let ref!: HTMLElement;

  onMount(() => {
    ref.parentElement.addEventListener(/*... */);
  });

  return (
    <div ref={ref} />
  );
}

59 replies

Gaming

Programming