🚀 useScroll is now hardware-accelerated in Motion 12.34.
No new APIs to learn: If you're already using useScroll + useTransform with opacity, clipPath, filter, or transform, enjoy your GPU performance boost!
The long due update to our locomotive-scroll library is finally here.
Now built on top of Lenis (@LenisSmooth), plus our detection and animation layer.
Happy scrolling → https://t.co/dQ9BC2MKBB
Use `element.setPointerCapture` when building UI with draggable interactions.
Avoids losing the pointer events for the currently active element when the mouse moves out of the elements bounding box.
TypeScript monorepo
IMO the most conveniet monorepo setup without needing a build step:
- pnpm workspaces and install from `workspace:*`
- internal packages that export `*.ts` files
- (optional) pnpm publishConfig to change exports to `*.js` on publishing
How do you set up monorepos and keep TypeScript fast, without requiring local builds all the time?
I'm very confused! Let's say you are building a monorepo with multiple packages, and an example app within the monorepo that consumes the packages. The packages have a build step for publishing, and each package defines their `exports` in package.json.
I see these options:
1. Do nothing. Just `tsdown` to build packages and d.ts files on every change. This is simple, but slow for development. `--watch` could work, but I've run into issues doing `pnpm -r build --watch` where it was only rebuilding a subset of packages each time. I'd much rather just have my devserver take care of this for me than running yet another tool locally.
2. Use a "development" condition for source files, and set Vite and TypeScript to resolve "development" in dev. This way you don't need to build during dev, but you also need to ship the source files to npm, otherwise tooling will fail looking up "development" conditions pointing to missing files in production.
3. Use resolver aliases for each tool: Similar to the development condition, without the production downside, but somewhat annoying to manage a list of aliases for each tool. In my experience, when using aliases heavily, there will always be tooling problems since they don't all support aliases, or have different config etc. I guess Vite 8's tsconfig support simplifies this a bit, but that's opt-in for now.
For all three, TypeScript checks something different. In some versions it checks the source, and the compiled output in others. If you only check the source, you can't guarantee that the published package's types will be correct. Nothing will stop you from publishing packages with missing types, unless you set up yet another CI job to check for this specifically. If you only check the compiled output, you have to build it all the time during development. How do you handle this for a repo where some packages are published and some are not?
Yet another solution could be to compile a project into `src` for publishing as well, so that `exports` are the same for development and published packages. That way no special config is needed. It requires a bit of custom setup for publishing, though.
Examples:
* https://t.co/tGexL75M8l at https://t.co/iYT5JpRDt5 currently requires `pnpm build` each time a package is changed.
* https://t.co/0OwN9doMDp at https://t.co/tvCpDW28bl currently uses aliases for Vite, but requires a `pnpm build` for TypeScript when the public interface of a package changes.
* Athena Crisis at https://t.co/Wp8vzGOSuu just uses everything from source as the packages are not published to npm.
However, inevitably, with any of the three solutions, tools will become slow as the repo grows. Now what do you do? `isolatedDeclarations` + checking in d.ts files for each repo? A `tsconfig` for each package, which makes everything even slower since TypeScript will now do overlapping typechecks across your project? Then paper over with Turborepo to make it feel ok? I think Project References in TypeScript are supposed to be the solution, but somehow that hasn't worked well for me and hasn't sped up TypeScript that much.
What do you do? What do you suggest? What am I missing?
Animating layout isn't always bad. Global CSS variables are a performance killer. Hardware accelerated blurs can crash sites.
Surprised? We go into all this and more, in the first Web Animation Performance Tier List: https://t.co/SqBbeA5rDc