Freek wrote about cleaning up inactive user data from Oh Dear:

You want to keep only as little personal data as needed for privacy reasons. You should only collect and keep the absolute minimum of data needed to run your application. This keeps your user’s privacy safe and minimizes the risks for you as a company if a security breach happens.

This is a really good initiative, I can’t even imagine how much data I have scattered across hundreds of trial accounts on the internet…

I can’t count the amount of times I’ve defined an object type with unknown string keys and a specific value type.

type Scores = {
[key: string]: number;
}

And despite using it all the time, I can’t for the life of me remember the [key: string] syntax.

Today, my problems are solved. Apparently TypeScript has a built in Record type that does exactly that:

type Scores = Record<string, number>;

I’ve used HasOne relationships for 1:1 relationships, but those are rare. I haven’t considered using them to scope down relationships, like having one default payment method in a set of n methods.

<?php
class User extends Model
{
public function paymentMethods(): HasMany
{
return $this->hasMany(PaymentMethod::class);
}
public function defaultPaymentMethod(): ?HasOne
{
return $this->hasOne(PaymentMethod::class)
->whereDefault();
}
}
$user->defaultPaymentMethod;

After reading Tim’s post, I have a feeling there are some places where I needed this but didn’t think of it at the time…

Time for the last—and my favorite—post in the Vite series: using Inertia.js.

Inertia suggests two ways to resolve views in the docs: with require or with import.

• require bundles all your pages in a single file, it’s a Webpack-specific implementation
• import code splits your pages to multiple chunks, and is part of ECMAScript

Because import is a standard, it’s supported our of the box. One little catch compared to usign it with Webpack: with Vite, you must specify the extension in the import template literal.

resolveComponent: async (name) => {
return (await import(`./Pages/${name}.vue`)).default;
},

This setup will code split and emit a JavaScript file per page in the final build.

Without code splitting

If you’d rather bundle your pages in a single file (similar to using require with Webpack) you can use import.meta.globEager instead.

resolveComponent: (name) => {
const pages = import.meta.globEager(`./Pages/${name}.vue`);
return pages[`./Pages/${name}.vue`].default;
},

Advanced imports

import.meta.globEager and its sibling import.meta.glob are also useful for advanced import patterns, similar to Webpack require.context.

In one of our projects, we use the following structure:

resources/
js/
app/
posts/
components/
views/
Edit.vue
Index.vue
Show.vue
profile/
components/
views/
Edit.vue
Show.vue
app.js

In this case, we only want to bundle components in views folders as pages. Files in components aren’t meant to be rendered by Inertia.

A setup like this can be bundled with a glob:

resolveComponent: async (name) => {
const pages = import.meta.glob('./app/**/views/*.vue');
return (await pages[`${name}.vue`]()).default;
},

That concludes the Vite with Laravel series! If you have questions or requests for more posts, talk to me on Twitter.

Path aliases

From Anne-Laure Le Cunff:

An antilibrary is a private collection of unread books. […]

The goal of an antilibrary is not to collect books you have read so you can proudly display them on your shelf; instead, it is to curate a highly personal collection of resources around themes you are curious about. Instead of a celebration of everything you know, an antilibrary is an ode to everything you want to explore. […]

An antilibrary creates a humble relationship with knowledge. It reminds us that our knowledge is finite and imperfect.

I have more unread books than read, and at some point I decided to stop buying books until I read more of the ones I owned.

After learning about the antilibrary, I lifted my own restriction and started to buy books again. The result: I’ve been reading more than ever.