tessl/npm-solid-js

A declarative JavaScript library for building user interfaces with fine-grained reactivity.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

SolidJS

Name: tessl/npm-solid-js
Author: tessl

SolidJS is a declarative JavaScript library for building user interfaces with fine-grained reactivity. It compiles templates to real DOM nodes and updates them with fine-grained reactions instead of using a Virtual DOM. SolidJS provides reactive state management through signals, efficient rendering through compile-time optimizations, and a component-based architecture for building modern web applications.

Package Information

Package Name: solid-js
Package Type: npm
Language: TypeScript/JavaScript
Installation: npm install solid-js
Version: 1.9.9

Core Imports

import { createSignal, createEffect, createMemo } from "solid-js";
import { createStore } from "solid-js/store";
import { render } from "solid-js/web";

For CommonJS:

const { createSignal, createEffect, createMemo } = require("solid-js");
const { createStore } = require("solid-js/store");
const { render } = require("solid-js/web");

Basic Usage

import { createSignal, createEffect } from "solid-js";
import { render } from "solid-js/web";

function Counter() {
  const [count, setCount] = createSignal(0);
  const increment = () => setCount(count() + 1);

  createEffect(() => {
    console.log("Count changed to:", count());
  });

  return (
    <div>
      <p>Count: {count()}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

render(() => <Counter />, document.getElementById("app"));

Architecture

SolidJS is built around several key architectural components:

Fine-grained Reactivity: Uses signals for state management with automatic dependency tracking
Compile-time Optimizations: Templates are compiled to optimized DOM operations
No Virtual DOM: Direct DOM updates through reactive computations
Component System: Function-based components with props and lifecycle hooks
Store System: Nested reactive state management for complex data structures
Multiple Rendering Targets: Web, SSR, and universal rendering capabilities

Capabilities

Reactive Primitives

Core reactive system including signals, effects, and memos for building reactive applications with automatic dependency tracking and fine-grained updates.

function createSignal<T>(value?: T, options?: SignalOptions<T>): Signal<T>;
function createEffect<T>(fn: EffectFunction<T>, value?: T, options?: EffectOptions): void;
function createMemo<T>(fn: EffectFunction<T>, value?: T, options?: MemoOptions<T>): Accessor<T>;

Reactive Primitives

Component System

Function-based component system with props utilities, lifecycle hooks, and component creation functions for building modular UI components.

type Component<P = {}> = (props: P) => JSX.Element;
function createComponent<T extends Component<any>>(Comp: T, props: ComponentProps<T>): JSX.Element;
function lazy<T extends Component<any>>(fn: () => Promise<{ default: T }>): T & { preload: () => Promise<{ default: T }> };

Component System

Control Flow

Built-in control flow components for conditional rendering, list rendering, and error boundaries with optimized updates and proper cleanup.

function Show<T>(props: { when: T | Accessor<T>; fallback?: JSX.Element; children: JSX.Element | ((item: NonNullable<T>) => JSX.Element) }): JSX.Element;
function For<T, U>(props: { each: T[] | Accessor<T[]>; children: (item: T, index: Accessor<number>) => U; fallback?: JSX.Element }): JSX.Element;
function ErrorBoundary(props: { fallback: (err: Error, reset: () => void) => JSX.Element; children: JSX.Element }): JSX.Element;

Control Flow

Resources and Async

Resource system for handling asynchronous data loading with built-in loading states, error handling, and automatic refetching capabilities.

function createResource<T, R = unknown>(
  fetcher: ResourceFetcher<true, T, R>,
  options?: ResourceOptions<T, true>
): ResourceReturn<T, R>;

function createResource<T, S, R = unknown>(
  source: ResourceSource<S>,
  fetcher: ResourceFetcher<S, T, R>,
  options?: ResourceOptions<T, S>
): ResourceReturn<T, R>;

Resources and Async

Context and Scoping

Context API for passing data through the component tree and scoping utilities for managing reactive ownership and cleanup.

function createContext<T>(defaultValue?: T): Context<T>;
function useContext<T>(context: Context<T>): T;
function createRoot<T>(fn: (dispose: () => void) => T, detachedOwner?: Owner): T;

Context and Scoping

Store Management

Nested reactive state management system with proxy-based stores, mutations, and advanced reconciliation for managing complex application state.

function createStore<T extends object = {}>(
  ...[store, options]: {} extends T
    ? [store?: T | Store<T>, options?: { name?: string }]
    : [store: T | Store<T>, options?: { name?: string }]
): [get: Store<T>, set: SetStoreFunction<T>];

Store Management

Web Rendering

DOM rendering utilities, web components, and hydration functions for building web applications with server-side rendering support.

function render(code: () => JSX.Element, element: MountableElement): () => void;
function hydrate(fn: () => JSX.Element, node: MountableElement): () => void;
function Portal(props: { mount?: Node; useShadow?: boolean; isSVG?: boolean; children: JSX.Element }): JSX.Element;

Web Rendering

Types

Core Types

type Accessor<T> = () => T;
type Setter<T> = ((prev?: T) => T) | T;
type Signal<T> = [get: Accessor<T>, set: Setter<T>];

interface SignalOptions<T> {
  equals?: false | ((prev: T, next: T) => boolean);
  name?: string;
  internal?: boolean;
}

interface EffectOptions {
  name?: string;
}

interface MemoOptions<T> extends EffectOptions {
  equals?: false | ((prev: T, next: T) => boolean);
}

Component Types

type Component<P = {}> = (props: P) => JSX.Element;
type VoidComponent<P = {}> = Component<VoidProps<P>>;
type ParentComponent<P = {}> = Component<ParentProps<P>>;
type FlowComponent<P, C> = Component<FlowProps<P, C>>;

type VoidProps<P> = P & { children?: never };
type ParentProps<P> = P & { children?: JSX.Element };
type FlowProps<P, C> = P & { children: C };

Resource Types

type Resource<T> = ResourceReturn<T>[0];
type ResourceActions<T> = ResourceReturn<T>[1];
type ResourceReturn<T> = [
  resource: () => T | undefined,
  actions: {
    mutate: Setter<T | undefined>;
    refetch: (info?: unknown) => T | Promise<T> | undefined | null;
  }
];

type ResourceFetcher<S, T> = (
  source: S,
  info: ResourceFetcherInfo<T>
) => T | Promise<T>;

interface ResourceOptions<T, S = unknown> {
  initialValue?: T;
  name?: string;
  deferStream?: boolean;
  ssrLoadFrom?: "initial" | "server";
  storage?: (init?: T) => [Accessor<T | undefined>, Setter<T | undefined>];
  onHydrated?: (k: S | undefined, info: ResourceFetcherInfo<T>) => void;
}

Context Types

interface Context<T> {
  id: symbol;
  Provider: ContextProviderComponent<T>;
  defaultValue: T;
}

type ContextProviderComponent<T> = Component<{
  value: T;
  children: JSX.Element;
}>;

Store Types

type Store<T> = T;
type StoreNode = string | number | bigint | boolean | symbol | object | null | undefined;

interface SetStoreFunction<T> {
  (...args: [T] | [SetterValue<T>]): void;
  <K1 extends keyof T>(
    key: K1,
    ...args: [T[K1]] | [SetterValue<T[K1]>]
  ): void;
  // Additional overloads for nested paths...
}