July Releases

Rom

brillout

August 1, 2024

What we have been working on in July 2024.

💚
We are looking for sponsors.

Fixes: 40

Features

Improved head management
vike-react-apollo
vike-node
Improved URL handling
injectScriptsAt
clientOnly()
New Bati integrations

Project

Internal refactoring
New marketing

Improved head management

We've made a ton of improvements to <head> management when using vike-{react,vue,solid}.

See Guides > <head> tags.

It's already implemented and released for vike-react. For vike-{vue,solid} the ETA is this week (first August days).

💚
Author: brillout

`vike-react-apollo`

We released a new Vike extension vike-react-apollo to seamlessly use vike-react with GraphQL Apollo.

Like other extensions, vike-react-apollo is lightweight (only 202 lines of code!). This means that, instead of using vike-react-apollo, you can easily integrate GraphQL Apollo (or any other GraphQL client) yourself.

Both vike-react and vike-react-apollo are lightweight thanks to the heavy lifting done by Vike and react-streaming. This showcases Vike's philosophy of having a sturdy core with lightweight extensions.

💚
Author: nitedani

`vike-node`

One fundamental feature missing for releasing Vike 1.0.0 is being able to use Vite to transpile server code such as Express.js or Hono code (#562).

We released a new package vike-node for that purpose.

It's somewhat experimental so expect issues here and there. We may built it directly into Vike (instead of being a separate package).

💚
Author: nitedani

Improved URL handling

Vike exports a new modifyUrl() utility, which is convenient for internationalization as shown in the example at Guides > Internationalization (i18n).

Also, pageContext.urlParsed has new properties:

http://localhost:3000/some-base-url/hello/s%C3%A9bastien

{
  pathname: '/hello/sébastien',
  pathnameOriginal: '/some-base-url/hello/s%C3%A9bastien',
  search: {},
  searchAll: {},
  searchOriginal: null,
  hash: '',
  hashOriginal: null,
  origin: 'http://localhost:3000',
  // Without Base URL, doesn't decode escaped characters
  href: 'http://localhost:3000/hello/s%C3%A9bastien',
  protocol: 'http://',
  hostname: 'localhost',
  port: 3000
}

💚
Author: brillout

`injectScriptsAt`

The new injectScriptsAt setting allows you to control where Vike injects scripts.

It was already possible with injectFilter() but only partially: injectScriptsAt allows you to inject scripts at the beginning of the HTML stream. It's also simpler to use than injectFilter() and it can be used by Vike extensions.

💚
Author: phonzammi

`clientOnly()`

Not only Vue and Solid users, but now also React users can use the clientOnly() helper which has the same functionality as the <ClientOnly> wrapper (now deprecated) but with a much improved DX.

💚
Author: nitedani

New Bati integrations

New Bati integrations:

Cloudflare

💚
Author: phonzammi, magne4000

Internal refactoring

We continuously work on internal improvements. They aren't visible to the user but they have a foundational impact on Vike and its ecosystem.

For example:

We are making progress on Universal Middlewares, in order to enable Vike extensions to automatically and seamlessly integrate server middlewares.
💚
Author: magne4000
We refactored the stream chunk orchestration logic of react-streaming (which powers vike-react and other projects). The logic is now crystal clear and robust (it was somewhat messy and buggy).
💚
Authors: nitedani, brillout
We refactored Vike's URL handling. (The logic is now crystal clear with lots of explanatory comments.)
💚
Authors: brillout

New marketing

We've been talking with the community to gather feedback for the upcoming new marketing. For example:

💚
Author: brillout

July Releases

Improved head management

vike-react-apollo

vike-node

Improved URL handling

injectScriptsAt

clientOnly()

New Bati integrations

Internal refactoring

New marketing

See also

`vike-react-apollo`

`vike-node`

`injectScriptsAt`

`clientOnly()`