DEV Community: John Winston

Conditionally add values into list or map in Nix

John Winston — Wed, 05 Feb 2025 15:44:01 +0000

I often find myself conditionally adding values into a list or map when writing configurations and derivations in Nix. In this post I want to show you how to conditionally add values into list or map in Nix.

Similar to many other functional languages, all values are immutable, and no statement exists in Nix. Instead of relying on method such as push() that would mutate an object, you have to use composition to add values into a list or map.

Conditionally add values into a list in Nix

To conditionally add values into a list in Nix, we can use the list concatenation operator ++ together with a if expression. Remember if in Nix is an expression instead of statement, therefore it can return value. The following example shows you how to add c and d into the list of foo, if acceptAdditional is true.

# example.nix
let
   acceptAdditional = true;
in {
  foo = [ "a" "b" ] ++
    (if config.bar.enable then [ "c" "d" ] else [ ]); # [!code highlight]
}

If we evaluate the above file with nix repl, we can see that the value of foo evaluated to the combination of foo and bar.

❯ nix repl --file example.nix
Welcome to Nix 2.18.1. Type :? for help.

Loading installable ''...
Added 1 variables.
nix-repl> foo
[ "a" "b" "c" "d" ]

We can simplify our code with the helper function lib.lists.optionals for the same effect, where an empty list will be returned, if the condition is not true.

# example.nix
let
   acceptAdditional = true;
in {
  foo = [ "a" "b" ] ++
    (if acceptAdditional then [ "c" "d" ] else [ ]); # [!code --]
    (lib.lists.optionals acceptAdditional [ "c" "d" ]); # [!code ++]
}

Conditionally add values into a map in Nix

To conditionally add values into a map in Nix, we can use the Update operator //. The attributes of the map in the right-hand side of the operator, will be merged into the map in the left-hand side.

# example.nix
let
    acceptAdditional = true;
in {
  foo = {
    a = "d";
    b = "e";
  } // (if acceptAdditional then {
    one = "1";
    two = "2";
  } else
    { });
}

By evaluating it, we can see that attribute one and two is now merged into foo.

❯ nix repl --file example.nix
Welcome to Nix 2.18.1. Type :? for help.

Loading installable ''...
Added 1 variables.
nix-repl> foo
{ a = "d"; b = "e"; one = "1"; two = "2"; }

If any attribute on the right-hand side's map is identical with the left-hand side's map, it will overwrite its value. This is really useful for conditionally setting value of attributes in a map.

# example.nix
let
    acceptAdditional = true;
in {
  foo = {
    a = "d";
    b = "e";
  } // (if acceptAdditional then {
    one = "1";
    two = "2";
    a = "new value";
  } else
    { });
}

As you can see, the value of a has been overwritten into the value of the same attribute of the right-hand side map.

❯ nix repl --file example.nix
Welcome to Nix 2.18.1. Type :? for help.

Loading installable ''...
Added 1 variables.
nix-repl> foo
{ a = "new value"; b = "e"; one = "1"; two = "2"; }

To simplify our code and avoid writing if expression, we can use the helper function lib.attrsets.optionalAttrs.

# example.nix
let
    acceptAdditional = true;
in {
  foo = {
    a = "d";
    b = "e";
  } // (lib.attrsets.optionalAttrs acceptAdditional {
    one = "1";
    two = "2";
    a = "new value";
  });
}

The limitation for \\ operator is that it cannot merge recursively. If you want a recursive merge, you can use the helper function lib.attrsets.recursiveUpdate.

Practical use cases for adding values conditionally

plymouth is an application that allows you to display a custom splash screen when you boot a Linux machine. To make plymouth useful and avoid disrupting the splash screen with logs, we have to set quiet and splash at boot.kernelParams.

Instead of setting it directly at boot.kernelParams, and comment it out when we disable plymouth, we can use the aforementioned technique, and add those parameters to boot.kernelParams when config.boot.plymouth.enable is true.

# configuration.nix
{ config, pkgs, lib, inputs, ... }:

{
  boot.plymouth.enable = true;
  boot.kernelParams = []
    ++ (lib.lists.optionals config.boot.plymouth.enable [ "quiet" "splash" ]);
}

End-to-end type safety with Svelte 5 and SvelteKit 2

John Winston — Mon, 27 Jan 2025 13:04:19 +0000

Back in Svelte 4 and SvelteKit 1, you can use PageData and LayoutData to annotate the type of data passed from a load function in +page.svelte and +layout.svelte respectively to achieve end-to-end type safety. These two types are generated by SvelteKit based on the value returned by the load function.

For example, assuming we fetch data from an API in a load function as the following.

import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params, route, parent }) => {
    const { cat, dog } = await getAnimals() // cat has type Cat, dog has type Dog

    return {
        cat: cat,
        dog: dog
    };
};

You can then import PageData to annotate the data props in your component.

<script context="module" lang="ts">
    import type { PageData } from './$types';
</script>

<script lang="ts">
    export let data: PageData; // the type here will be { cat: Cat, dog: Dog }
</script>

Type safety with `$props()` rune in Svelte 5

In Svelte 5, with the introduction of $props() rune, every Svelte component only accepts a single object as its props. Since the type of $props() returns any by default, and does not accept type parameters, you have to add a type annotation to the variable to achieve type safety.

<script context="module" lang="ts">
    import type { PageData } from './$types';
</script>

<script lang="ts">
    let { data }: { data: PageData } = $props();
</script>

Simplify type annotation with `PageProps`

With the release of SvelteKit 2.16.0, new types PageProps and LayoutProps are introduced to simplify the type annotation for props in +page.svelte and +layout.svelte respectively.

<script context="module" lang="ts">
    import type { PageProps } from './$types';
</script>

<script lang="ts">
    let { data }: PageProps = $props();
</script>

Under the hood, PageProps and LayoutProps reuse PageData and LayoutData in their definition, nothing too special there.

export type PageProps = { data: PageData; form: ActionData };

Minifying HTML response in SvelteKit

John Winston — Thu, 16 Jan 2025 08:29:00 +0000

By default, SvelteKit only minifies CSS and JavaScript, leaving HTML untouched.

To enable HTML minification regardless of the adapter in use, you can process the HTML response in hooks.server.js or hooks.server.ts using an HTML minification library. Below is an example that demonstrates how to achieve this with the html-minifier library.

// src/hooks.server.ts
import { minify } from 'html-minifier';
import { type Handle } from '@sveltejs/kit';

const minifyOpts = {
  collapseBooleanAttributes: true,
  collapseWhitespace: true,
  conservativeCollapse: true,
  decodeEntities: true,
  html5: true,
  ignoreCustomComments: [/^#/],
  minifyCSS: true,
  minifyJS: false,
  removeAttributeQuotes: true,
  removeComments: false,
  removeOptionalTags: true,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  sortAttributes: true,
  sortClassName: true,
};

export const handle: Handle = async ({ event, resolve }) => {
  return resolve(event, {
    transformPageChunk: ({ html, done }) => {
      return minify(html, minifyOpts);
    },
  });
};

If you like these performance tweaks, be sure to visit my guide on optimizing the performance of your SvelteKit project.

Optimize SvelteKit performance with brotli compression

John Winston — Sun, 12 Jan 2025 12:34:20 +0000

In my post of building Docker image for static SvelteKit application with nginx, I have covered almost everything, except serving brotli compressed assets. brotli generally compress files better than traditional gzip.

Today I want to share how to optimize SvelteKit's performance with brotli compression, and serve those pre-compressed assets with nginx.

Enable pre-compression in SvelteKit

As we are building a static site, we can compress all our assets with brotli during the build time. To enable pre-compression, you need to set precompress: true in your adapter.

// svelte.config.js
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter({
      precompress: true
    }),
  },
};

export default config;

Enable `brotli` support in `nginx`

By default, nginx does not support brotli compression, and it won't serve pre-compressed brotli assets as well. To enable that, you have to install ngx_brotli module.

Luckily there is a Docker image with ngx_brotli pre-installed. We are going to modify our Docker image that build SvelteKit with static adapter and serve with nginx, and use that image.

# omitted for brevity
FROM base AS prerelease
COPY --from=install /temp/dev/node_modules node_modules
COPY . .

ENV NODE_ENV=production
RUN npm run build

# the nginx Docker image with brotli modules installed
FROM KiweeEu/nginx-brotli AS release
COPY --from=prerelease --chown=nginx:nginx /usr/src/app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

And finally we just need to allow nginx to serve brotli compressed content, by modifying nginx.conf.

# nginx.conf
# load the ngx_brotli module
load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

server {
    # some usual nginx config
    listen 8080;
    listen [::]:8080;
    root /usr/share/nginx/html;
    server_name _;
    try_files $uri $uri.html $uri/ =404;

    brotli_static on; # allow serving brotli compressed files
}