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";

// 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"
      fill="none"

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$) {

PatrickJS

import { component$, type Signal, type JSXOutput } from "@builder.io/qwik";

export function Show(props: {
  when: boolean;
  "bind:when": Signal<boolean | undefined>;
  children?: JSXOutput;
  else?: JSXOutput;
}) {
  if (props["bind:when"] !== undefined) {
    return props["bind:when"].value ? props.children : props.else;

PatrickJS

<BlogIndex> <-- readDir
  <RefreshButton />
  <Toggle>
    <ArticlePreview filename="something.mdx"> <-- read file
      first 50 chars
    </ArticlePreview>
  </Toggle>

  <Toggle>
    <ArticlePreview filename="something.mdx"> <-- read file

PatrickJS

import {
  Slot,
  component$,
  createContextId,
  useContextProvider,
  useSignal,
  useStore,
  type Signal,
} from '@builder.io/qwik';

PatrickJS

import { component$, useVisibleTask$, useStore, useSignal, noSerialize } from '@builder.io/qwik';
import lottie from 'lottie-web';
import { Options } from './types';

export interface OptionsProps {
  options: Options;
}

export const QwikLottie = component$(({ options }: OptionsProps) => {
  const store = useStore({