Qwik Macros

Macros for qwik.

qwik

Macro for create a qwik component.

export const HelloWorld = () => {
  qwik: true

  return <div>Hello world</div>
};

or

export function HelloWorld() {
  qwik: true

  return <div>Hello world</div>
}

compiles to

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

export const HelloWorld = $component(() => {
  return <div>Hello world</div>
})

signal

Macro for using qwik signals.

export function Counter() {
  qwik: true
  signal: {
    var count = 0
  }
  return (
    <>
      <div>Value is: {count}</div>
      <button onClick$={() => count++}>Increment</button>
    </>
  );
}

compiles to

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

export const Counter = component$(() => {
  const count = useSignal(0);
  return (
    <>
      <div>Value is: {count.value}</div>
      <button onClick$={() => count.value++}>Increment</button>
    </>
  );
});

computed

Macro for create a reactive variable.

function ComputedExample() {
  qwik: true
  signal: {
    var count = 1
  }
  computed: {
    var doubleCount = 2 * count
  }
  return <div>{count} / {doubleCount}</div>
}

compiles to

import { useSignal } from "@builder.io/qwik";
import { useTask$ } from "@builder.io/qwik";
import { $component } from "@builder.io/qwik"

const ComputedExample = component$(() => {
  const count = useSignal(1);
  const doubleCount = useSignal(2 * count.value);
  useTask$(({ track  })=>{
    const __count = track(()=>count.value);
    doubleCount.value = 2 * __count;
  });
  return <div>{count} / {doubleCount}</div>
})

store

Macro for using qwik store.

export function LocalStateExample() {
  qwik: true
  store: {
    var state = {
      value: 0
    }
  }
  return <div>Value is: {state.value}</div>
}

compiles to

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

export const LocalStateExample = component$(() => {
  const state = useStore({
    value: 0,
  });
  return <div>Value is: {state.value}</div>;
});

resource

Macro for qwik useResource$.

function ResourceExample() {
  qwik: true
  signal: {
    var bar = 'foo'
  }
  resource: async (ctx) => {
    ctx.track(() => bar);
    ctx.track(() => props.url);
    ctx.cleanup(() => console.log('cleanup'));

    var someResource = await expensiveCompute(bar, props.url);
  }
  return <div></div>
}

compiles to

import { useSignal } from "@builder.io/qwik";
import { useResource$ } from "@builder.io/qwik";
import { component$ } from "@builder.io/qwik";

const ResourceExample = component$(() => {
  const bar = useSignal("foo");
  const someResource = useResource$(async (ctx)=>{
      ctx.track(()=>bar.value);
      ctx.track(()=>props.url);
      ctx.cleanup(()=>console.log("cleanup"));
      return await expensiveCompute(bar.value, props.url);
  });
})

task

Macro for qwik useTask$.

function DoubleCounter() {
  qwik: true
  signal: {
    var count = 1
    var doubleCount = 0
  }
  task: {
    console.log('component mounted')
  }
  task: ({track}) => {
    const newCount = track(() => count)
    doubleCount = 2 * newCount
  }
  return <div>{count} / {doubleCount}</div>
}

compiles to

import { useSignal } from "@builder.io/qwik";
import { useTask$ } from "@builder.io/qwik";
import { component$ } from "@builder.io/qwik";

const DoubleCounter = component$(() => {
  const count = useSignal(1);
  const doubleCount = useSignal(0);
  useTask$(()=>{
    console.log("component mounted");
  });
  useTask$(({ track  })=>{
    const newCount = track(()=>count.value);
    doubleCount.value = 2 * newCount;
  });
  return <div>{count} / {doubleCount}</div>;
})

vtask

Macro for qwik useVisibleTask$

export function Clock() {
  qwik: true
  signal: {
    var seconds = 0
  }
  vtask: {
    const interval = setInterval(() => {
      seconds++
    }, 1000)
    return () => clearInterval(interval)
  }
  return <div>Seconds: {seconds}</div>
}

compiles to

import { component$, useSignal, useVisibleTask$ } from "@builder.io/qwik"

export const Clock = component$(() => {
  const seconds = useSignal(0);
  useVisibleTask$(() => {
    const interval = setInterval(() => {
      seconds.value++;
    }, 1000);
    return () => clearInterval(interval);
  });

  return <div>Seconds: {seconds.value}</div>;
});

events

Apply for all labels that starts with on, add event listener for qwik component.

export function ClickableComponent() {
  qwik: true
  onclick: {
    alert('Alert from Clickable Component.');
  }

  return <div>click from other component 1</div>;
}

compiles to

import { component$ } from "@builder.io/qwik";
import { $ } from "@builder.io/qwik";
import { useOn } from "@builder.io/qwik";
export const ClickableComponent = component$(()=>{
  useOn("click", $(()=>{
    alert("Alert from Clickable Component.");
  }));
  return <div>click from other component 1</div>;
});

document

function KeyBoard() {
  qwik: true
  signal: {
    var keyPressed = ''
  }
  onkeydown: (event) => {
    document: true
    keyPressed = keyPressed + event.key;
  }

  return <div>{keyPressed}</div>;
}

or

function KeyBoard() {
  qwik: true
  signal: {
    var keyPressed = ''
  }
  document: {
    onkeydown: (event) => {
      keyPressed = keyPressed + event.key;
    }
    onkeyup: (event) => {
      console.log('keyup')
    }
  }

  return <div>{keyPressed}</div>;
}

compiles to

import { component$ } from "@builder.io/qwik";
import { useSignal } from "@builder.io/qwik";
import { $ } from "@builder.io/qwik";
import { useOnDocument } from "@builder.io/qwik";
const KeyBoard = component$(()=>{
  const keyPressed = useSignal("");
  useOnDocument("keydown", $((event)=>{
    keyPressed.value = keyPressed.value + event.key;
  }));
  return <div>{keyPressed.value}</div>;
});

window

export function Online() {
  qwik: true
  window: {
    ononline: {
      alert('Your Device is now Online')
    }
    onoffline: {
      alert('Your Device is now Offline')
    }
  }

  return <div></div>
};

or

export function Online() {
  qwik: true
  ononline: {
    window: true
    alert('Your Device is now Online')
  }
  onoffline: {
    window: true
    alert('Your Device is now Offline')
  }

  return <div></div>
}

compiles to

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

export const Online = component$(()=>{
  useOnWindow("online", $(()=>{
    alert("Your Device is now Online");
  }));
  useOnWindow("offline", $(()=>{
    alert("Your Device is now Offline");
  }));
  return <div></div>;
})

link

Macro for import a css file.

single

export const CmpStyles = () => {
  qwik: true
  link: './code-block.css?inline'

  return <span class="my-text">Some text</span>
}

compiles to

import { component$ } from "@builder.io/qwik";
import { useStyles$ } from "@builder.io/qwik";
import __link0 from "./code-block.css?inline";

export const CmpStyles = component$(()=>{
  useStyles$(__link0);
  return <span class="my-text">Some text</span>;
});

multiple

export const CmpStyles = () => {
  qwik: true
  link: [
    './code-block.css?inline',
    './font-style.css?inline',
  ]

  return <span class="my-text">Some text</span>
}

compiles to

import { component$ } from "@builder.io/qwik";
import { useStyles$ } from "@builder.io/qwik";
import __link0 from "./code-block.css?inline";
import __link1 from "./font-style.css?inline";

export const CmpStyles = component$(()=>{
  useStyles$(__link0);
  useStyles$(__link1);
  return <span class="my-text">Some text</span>;
});

css

Macro for use inline css.

export const CmpStyles = () => {
  qwik: true
  css: `
    .my-text {
      color: red;
    }
  `
  return <span class="my-text">Some text</span>
}

compiles to

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

export const CmpStyles = component$(()=>{
  useStyle$(`
    .my-text {
      color: red;
    }
  `);
  return <span class="my-text">Some text</span>;
});

scoped

Macro for use scoped css link or string.

export const CmpStyles = () => {
  qwik: true
  scoped: {
    link: './code-block.css?inline'

    css: `
      .my-text {
        color: red;
      }
    `
  }

  return <span class="my-text">Some text</span>
}

compiles to

import { component$ } from "@builder.io/qwik";
import { useStyleScoped$ } from "@builder.io/qwik";
import __link0 from "./code-block.css?inline";

export const CmpStyles = component$(()=>{
  useStyleScoped$(__link0);
  useStyleScoped$(`
    .my-text {
      color: red;
    }
  `);
  return <span class="my-text">Some text</span>;
});