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/

PatrickJS

 <div
  class={`flex aspect-square w-full grow flex-col items-center justify-center rounded-3xl ${
    props.useBorder ? 'border-4 border-gray-200' : ''
  } p-5 max-md:mt-10 max-md:max-w-full`}
>
  <Lottie
    path={props.lottie}
    loop={props.loop}
    speed={props.speed}
  />

PatrickJS

import { component$, sync$, Slot } from "@builder.io/qwik";
import { twMerge } from "tailwind-merge";

// save it's Tailwind
export const LoadingSpinner = () => (
  <div class="absolute bottom-[2px] left-[2px] right-[2px] top-[2px] flex items-center justify-center rounded-3xl  backdrop-blur-[1px]">
    <svg
      aria-hidden="true"
      class="h-8 w-8 animate-spin fill-blue-600 text-gray-200 dark:text-gray-600"
      viewBox="0 0 100 101"

PatrickJS

# 1.install gource using HomeBrew
$ brew install gource

# 2.install avconv
git clone git://git.libav.org/libav.git
cd libav 
# it will take 3-5 minutes to complie, be patient.
./configure --disable-yasm
make && make install 

PatrickJS

import { component$, sync$ } from "@builder.io/qwik";

export const RefreshButton = component$(({loading, onClick$, ...props}: any) => {
  const loading$ = sync$((_e: Event, target: HTMLButtonElement) => {
    const span = target.querySelector("span");
    target.disabled = span!.hidden;
    span!.hidden = !span!.hidden;
  });
  let clickListener = {};
  if (onClick$) {