tessl/npm-builder-io--qwik

An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and resumable architecture for instant-loading web applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

JSX & Elements

Name: tessl/npm-builder-io--qwik
Author: tessl

JSX runtime and element creation with Qwik-specific optimizations and server-side rendering support. This covers JSX transformation, special components, and SSR utilities.

Capabilities

JSX Runtime Functions

Core JSX transformation and element creation functions.

/**
 * Create JSX element (production runtime)
 * @param type - Element type or component
 * @param props - Element properties
 * @param key - Optional key for reconciliation
 * @returns JSX node
 */
function jsx(type: string | Function, props: any, key?: string): JSXNode;

/**
 * Create JSX element with static children (production)
 * @param type - Element type or component
 * @param props - Element properties including children
 * @param key - Optional key
 * @returns JSX node
 */
function jsxs(type: string | Function, props: any, key?: string): JSXNode;

/**
 * Development JSX element creation with debugging info
 * @param type - Element type or component
 * @param props - Element properties
 * @param key - Optional key
 * @returns JSX node with development metadata
 */
function jsxDEV(type: string | Function, props: any, key?: string): JSXNode;

Fragment Components

Components for grouping elements without wrapper elements.

/**
 * JSX Fragment for grouping elements
 */
const Fragment: FunctionComponent<{ children?: any }>;

/**
 * HTML Fragment for raw HTML content
 */
const HTMLFragment: FunctionComponent<{ children?: any }>;

/**
 * Render once optimization component
 */
const RenderOnce: FunctionComponent<{ children?: any }>;

SSR Components

Special components for server-side rendering optimizations.

/**
 * SSR streaming block component
 */
const SSRStreamBlock: FunctionComponent<{ children: any }>;

/**
 * Raw HTML injection in SSR
 * @param props - Props with data property
 */
const SSRRaw: FunctionComponent<{ data: string }>;

/**
 * SSR stream component with streaming options
 * @param props - Stream configuration props
 */
const SSRStream: FunctionComponent<SSRStreamProps>;

/**
 * SSR comment injection
 * @param props - Props with comment data
 */
const SSRComment: FunctionComponent<{ data: string }>;

/**
 * SSR optimization hint
 * @param props - Hint configuration props
 */
const SSRHint: FunctionComponent<SSRHintProps>;

/**
 * Skip rendering component
 */
const SkipRender: FunctionComponent<{}>;

// SSR stream props
interface SSRStreamProps {
  children: any;
}

// SSR hint props  
interface SSRHintProps {
  strategy?: string;
}

Content Projection

Components for content projection and slot-based composition.

/**
 * Content projection slot
 * @param props - Slot configuration
 */
const Slot: FunctionComponent<{
  name?: string;
  children?: any;
}>;

Usage Examples:

import { 
  component$, 
  Slot, 
  Fragment, 
  SSRStream,
  $
} from "@builder.io/qwik";

// Component with slot-based content projection
export const Card = component$<{
  title?: string;
  children?: any;
}>((props) => {
  return (
    <div class="card">
      <header class="card-header">
        <Slot name="header">{props.title}</Slot>
      </header>
      <main class="card-content">
        <Slot>{props.children}</Slot>
      </main>
      <footer class="card-footer">
        <Slot name="footer" />
      </footer>
    </div>
  );
});

// Usage with named slots
export const App = component$(() => {
  return (
    <Card title="Default Title">
      <Fragment q:slot="header">
        <h2>Custom Header</h2>
      </Fragment>
      
      <p>This goes in the default slot</p>
      
      <Fragment q:slot="footer">
        <button>Action</button>
      </Fragment>
    </Card>
  );
});

// SSR streaming example
export const StreamingComponent = component$(() => {
  const loadData = $(async () => {
    // Simulate async data loading
    await new Promise(resolve => setTimeout(resolve, 1000));
    return { message: "Data loaded!" };
  });

  return (
    <div>
      <h1>Streaming Content</h1>
      <SSRStream>
        {loadData().then(data => (
          <div>{data.message}</div>
        ))}
      </SSRStream>
    </div>
  );
});

Install with Tessl CLI