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;

PatrickJS

const machine = useConst(() => {
  return {
    state: 'off',
    _machine: undefined,
    send: $((newState) => {
      return this._machine ||= noSerialize(createMachine(this))).send(newState)
    )
  };
})

PatrickJS

import type { HTMLAttributes, JSXOutput, Signal } from '@builder.io/qwik';
import {
  Slot,
  component$
} from '@builder.io/qwik';
import {
  Link as QwikLink
} from '@builder.io/qwik-city';

export function getBaseUrl(base?: string) {

PatrickJS

const getData = server$((myArg) => {
  console.log(myArg)
});

getData(new ServerConfig({
  method: 'get'
}), myArg)

getData(serverConfig({
  method: 'get'

PatrickJS

import { isBrowser } from '@builder.io/qwik/build';

serverOnly();

export function serverOnly() {
  if (isBrowser) {
    console.log('SERVER ONLY');
    throw new Error(
      'This module cannot be imported from the Client.' +
        'It should only be used from the Server.',

PatrickJS

{
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

PatrickJS

Qwik
Deprecated functions and their replacements
Deprecated	            Replacements
useWatch$	             useTask$
useMount$	             useTask$
useServerMount	         useTask$ + isServer
useClientMount	         useTask$ + isBrowser
useClientEffect          useVisibleTask$
useClientEffectQrl       useVisibleTask$
useBrowserVisibleTask    useVisibleTask$

PatrickJS

/*
What happens?
- `new Type().what` is looked up with a call to `get` on the proxy
- a function is returned that will look up `METHOD_NAME` when called
- `METHOD_NAME` is called because of the `()` behind `new Type().what`
- if `METHOD_NAME` exists on you object, your own function is called
- if not, because of prototypal inheritance, `get` is called again
- `name` is now `METHOD_NAME` and we can throw as we know `METHOD_NAME` is not implemented on the type

credits http://soft.vub.ac.be/~tvcutsem/proxies/