PatrickJS

RFC: Server Function Graphs and Coordinated Caching for Qwik v2

Summary

This proposal adds a Qwik-native optimization path for server data, rendered component output, optimizer-produced component render symbols, and resumable execution state.

The simple authoring model is:

server$(fn)

PatrickJS

// Types for the result object with discriminated union
type Success<T> = {
  data: T;
  error: null;
};

type Failure<E> = {
  data: null;
  error: E;
};

PatrickJS

#!/usr/bin/env bash

# Inspired from:
# - https://blog.wesleyac.com/posts/simple-deploy-script
# - https://gist.github.com/WesleyAC/b3aaa0292579158ad566c140415c875d
# - https://caddyserver.com/docs/running#using-the-service

set -e
# cd $(dirname $0)

PatrickJS

CULTURE   SPEC.CULTURE  ENGLISH NAME
--------------------------------------------------------------
                        Invariant Language (Invariant Country)
af          af-ZA       Afrikaans
af-ZA       af-ZA       Afrikaans (South Africa)
ar          ar-SA       Arabic
ar-AE       ar-AE       Arabic (U.A.E.)
ar-BH       ar-BH       Arabic (Bahrain)
ar-DZ       ar-DZ       Arabic (Algeria)
ar-EG       ar-EG       Arabic (Egypt)

PatrickJS

# save this file in ~/.gitignore_global
# set this file as the global .gitignore
# > git config --global core.excludesFile ~/.gitignore_global
# verify by running
# > git config --global core.excludesfile

.DS_Store
._.DS_Store
**/.DS_Store
**/._.DS_Store

PatrickJS

// Lists of countries with ISO 3166 codes, presented in various formats.
// Last Updated: July 30, 2020

// If you're using PHP, I suggest checking out:
// https://github.com/thephpleague/iso3166
// or Laravel: https://github.com/squirephp/squire
// 
// JS developers can check out:
// https://www.npmjs.com/package/iso3166-2-db
//

PatrickJS

import { component$, useStore, useSignal, useTask$ } from '@builder.io/qwik';

// Define the Node type
type Node = {
  id: string;
  name: string;
  type: string;
  tags: string[];
  children?: Node[];
  attributes?: Record<string, unknown>;

PatrickJS

import { component$, Slot, useSignal, useVisibleTask$ } from '@builder.io/qwik';

export const ResumeBrowser = component$(() => {
  const csr = useSignal(false);
  // eslint-disable-next-line qwik/no-use-visible-task
  useVisibleTask$(() => {
    csr.value = true;
  });
  return csr.value ? <Slot /> : null;
});

PatrickJS

/* Features */
// - remove cache headers for /q-data.json
export const handler = async (event, context) => {
  try {
    const [req, res, ctx, target] = eventNormalize(event, context); // 'ctx' is the context object

    // Your business logic here
    // Example of modifying the response based on URI
    if (req.uri.endsWith('/q-data.json')) {
      res.headers['cache-control'] = 'no-cache';

PatrickJS

const { readable, writable } = new TransformStream();

fetch('/send?channel=123', method: 'POST',
  headers: { 'Content-Type': 'text/plain' },
  body: readable,
});

const response = await fetch('/receive?channel=123');
const response_readable = response.body;