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({

PatrickJS

let data = Array.from({ length: 10 }, (_, i) => `item${i + 1}`);
let packageNameCounter = 0;

// Function to group array elements into packages
function groupArrayElements(list, groupSize) {
  // Base case: if the list is small enough, return it as a single package
  if (list.length <= groupSize) {
    return [{
      packageName: 'Pkg' + packageNameCounter++,
      items: list

PatrickJS

{
  "name": "everything",
  "version": "2.0.0",
  "description": "npm install undefined",
  "main": "index.js",
  "contributors": [
    "PatrickJS <[email protected]>",
    "uncenter <[email protected]>"
  ],
  "keywords": [

PatrickJS

const fs = require('fs');

// Function to get a file size
function getFileSize(filePath) {
    return new Promise((resolve, reject) => {
        fs.stat(filePath, (err, stats) => {
            if(err) {
                reject(err);
            } else {
                let fileSizeInBytes = stats.size;  // size in bytes

PatrickJS

const isNode = (value) => {
  return value && typeof value.nodeType === 'number';
};

const isDocument = (value) => {
  return value.nodeType === 9;
};

const isElement = (value) => {
  return value.nodeType === 1;

PatrickJS

import { component$, useSignal } from '@builder.io/qwik';
import { server$ } from '@builder.io/qwik-city';
import { worker$ } from '@builder.io/qwik-worker';

function streamFileToServer() {
  throw new Error('Function not implemented.');
}

export default component$(() => {
  const fileRef = useSignal<HTMLInputElement>();

PatrickJS

/TileTemplate.tsx
  15:23  warning  Using "onDragStart$" as an event handler, however functions are not serializable.
Did you mean to wrap it in `$()`?

Fix the type of onDragStart$ to be PropFunction
Check out https://qwik.builder.io/docs/advanced/dollar/ for more details  qwik/valid-lexical-scope
  16:21  warning  Using "onDragEnd$" as an event handler, however functions are not serializable.
Did you mean to wrap it in `$()`?

Fix the type of onDragEnd$ to be PropFunction