Svelte Adds Asynchronous Sync Inside Components
This week, Svelte published a roundup of new feature upgrades and bug fixes. The big news is that Asynchronous Svelte is now available in Svelte’s full-stack web application framework, SvelteKit.
In its GitHub repository, the project explained that this is actually an old idea reborn in a more efficient manner.
“In olden times, we did asynchronous work like fetching data inside onMount or an {#await ...} block. This works, but it’s quite verbose and offers no coordination — if two components are both fetching stuff, then they will likely have independently managed error/loading states, often resulting in a janky UI with multiple spinners,” Rich Harris, creator of Svelte, wrote.
Many frameworks opt to forego this function and perform asynchronous work outside the component in load functions, as one example. That leads to a better user experience but creates other problems, such as “prop-drilling, type shenanigans, coarse-grained invalidation, and logic that’s hard to delete because it’s often not obvious whether something in your load function is even being used,” he said.
This has lead to a third option in recent years, which is to put the asynchronous work back inside components — hey, everything old is new again — but in a coordinated way.
React has a number of primitives that support async updates, such as startTransition, useTransition, use and React Server Components, Harris pointed out. Solid and Vue have similar functionalities.
“We believe Svelte’s compiler-centric nature offers us a way to have component-level async work with significantly better ergonomics and fewer drawbacks than existing approaches,” he wrote.
He explained how this works; but in brief, it uses the await keyword, which can be placed:
- At the top level of a component
script - Inside
$derivedexpressions - In a template expression (i.e. in a component’s markup)
But be forewarned — this is not production-ready and developers will find bugs.
Use cases for this include:
- Load data;
- Demo preloading images to avoid jank;
- Demo lazily importing modules and components as needed;
- Demo moving expensive computation to a web worker;
- Avoid waterfalls.
The explanation is quite long — Harris advises you to grab a cup of tea before you start reading it — but it’s detailed and worth the time. Plus, he included demos.
While that was the team’s main focus last month, Svelte also worked on a few other issues. For instance, the Svelte CLI (sv) now offers an --install flag to specify which package manager to use when running. They also merged two separate CloudFlare adapters into one: adapter-cloudflare. Also, the adapter-vercel will now create symlink functions for each route, for better observability.
One of my favorite things about Svelte’s recent post, though, is that they’ve moved beyond listing framework updates to add resources that showcase the community and help developers learn more about using the framework. Astro also does this. You’ll now find a showcase of apps and sites built with Svelte, a list of new libraries, tools and components, as well as links to learning resources created by Svelte contributors and ambassadors.
Web Search Added to Claude Code and Anthropic, Messages APIs
Anthropic made web search available on its Anthropic API this week. This will give Claude access to current information from the web.
It also made web search available when making requests to the Messages API and available to developers in the Claude Code.
“When Claude receives a request that would benefit from up-to-date information or specialized knowledge, it uses its reasoning capabilities to determine whether the web search tool would help provide a more accurate response,” the post explained. “If searching the web would be beneficial, Claude generates a targeted search query, retrieves relevant results, analyzes them for key information, and provides a comprehensive answer with citations back to the source material.”
It’s quite robust: Claude can perform multiple progressive searches with earlier results informing subsequent searches.
Developers can control it by adjusting the max_uses parameter. Claude may refine the query to create a more accurate response, the post added.
You can probably extrapolate your own use cases, but Anthropic lists a few ideas, including that developers could enable Claude to reference the latest API documentation, GitHub releases and technology updates.
The search results include citations to the source material, which has become a best practice for LLMs. There are also additional control features that developers can access with admin settings, including an allow list and a block list.
Web search is available on the Anthropic API for Claude 3.7 Sonnet, the upgraded Claude 3.5 Sonnet, and Claude 3.5 Haiku at $10 per 1,000 searches plus standard token costs. Here’s the documentation.
OPSWAT: Rack Ruby and a Major Security Flaw
OPSWAT’s Red Team security identified multiple vulnerabilities in Rack Ruby in late April.
Rack is a modular interface that connects web servers to Ruby-based web applications. It’s used by many web frameworks and libraries, including Ruby on Rails and Sinatra. It’s available as a Ruby Gem. Its reach is extensive, with more than one billion downloads globally, the team noted.
“Due to this extensive integration, vulnerabilities discovered within Rack present substantial security implications, potentially affecting numerous applications and systems worldwide,” the team stated.
Researchers Thai Do and Minh Pham found three problems:
- Attackers can use a vulnerability to perform log injection via CRLF (Carriage Return Line Feed) characters, potentially manipulating log entries.
- A security flaw allows attackers to inject and manipulate log content through malicious header values.
- A Path Traversal vulnerability could allow attackers to gain unauthorized access to files located outside the designated static file directory, posing a significant security threat. This is a particularly bad problem, since it allows unauthenticated attackers to access sensitive information, including configuration files, credentials and confidential data, which can lead to data breaches, they noted.
Ruby fixed the bugs in the newest versions of their software, so if you’re using Rack, be sure to update. OPSWAT also recommended developers:
- Audit your Web frameworks. To do this, scan the Software Bill of Materials (SBOM) — a list of all the tools and code used — to make sure nothing else contains any bugs.
- Protect your data. “Regularly scanning web frameworks for changes or vulnerabilities helps maintain security and tools such as sandboxing and file scanning are effective in identifying suspicious activities,” the team wrote.
