create-van-app@1.0.0

Major Changes

• ae65269: Scaffold Your First Van Project using create-van-app

  Compatibility Note:
  Create Van App requires Node.js version 20.19+, 22.12+. However, some templates require a higher Node.js version to work, please upgrade if your package manager warns about it.

  With NPM:

  npm create van-app@latest

  With Yarn:

  yarn create van-app

  With PNPM:

  pnpm create van-app

  With Bun:

  bun create van-app

  With Deno:

  deno init --npm van-app

  Then follow the prompts!

  You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a VanJS + Tailwind project, run:

  # npm 7+, extra double-dash is needed:
  npm create van-app@latest my-van-app -- --template vanjs-ts-tailwind
  
  # yarn
  yarn create van-app my-van-app --template vanjs-ts-tailwind
  
  # pnpm
  pnpm create van-app my-van-app --template vanjs-ts-tailwind
  
  # Bun
  bun create van-app my-van-app --template vanjs-ts-tailwind
  
  # Deno
  deno init --npm van-app my-van-app --template vanjs-ts-tailwind

  Currently supported template presets include:

  • vanjs-ts + tailwind ← default
  • vanjs-ts + css
  • vanjs + tailwind
  • vanjs + css

  You can use . for the project name to scaffold in the current directory.

@michthemaker/vite-plugin-vanjs@0.2.0

Minor Changes

• ae65269: Improved error display during hot module replacement

  Error messages during development now display in a better-styled container during hot module replacement, making debugging issues easier to spot and read.

• ae65269: Improved context support during Hot Module Replacement (HMR)

  • Stable contexts across reloads: createContext() is intercepted and keyed by hmrId, so the same context object is reused between HMR updates.
  • Context snapshot + replay: active context stacks are captured on registerRender and replayed on rerender, allowing useContext to keep working even when called outside the original render call tree.

• ae65269: Better handling for multiple and aliased exports

  • Multiple named exports like export { Foo, Bar } are now correctly preserved during transformation.
  • Aliased exports such as export { Foo as Bar } now generate the correct wrapper and transform logic.

Patch Changes

• ae65269: Fixed duplicate export statements during hot reload

  The Vite plugin was incorrectly duplicating export statements like export { App } when processing components for hot module replacement. This has been resolved, ensuring clean exports without duplication.

@michthemaker/vanjs@0.4.0

Minor Changes

• ae65269: Added dedicated SVG and MathML element support

  VanJS now provides specialized tag creation for SVG and MathML elements through van.svgTags and van.mathmlTags, giving you proper type safety and element creation for graphics and mathematical markup alongside regular HTML elements.

  const { svg, path, circle } = van.svgTags;
  const { div, h1, button } = van.tags;
  const { math, mi, mo } = van.mathmlTags;
  
  // Create SVG graphics
  svg(
    {
      viewBox: "0 0 24 24",
      width: "24",
      height: "24",
    },
    path({ d: "M12 2L2 7v10c0 5.55 3.84 10 9 10s9-4.45 9-10V7l-10-5z" })
  );
  
  // Create mathematical notation
  math(mi("x"), mo("+"), mi("y"));

• ae65269: Improved type definitions for DOM element properties

  Rewrote the VanJS type system to provide better type resolution when setting attributes and properties on DOM elements. This gives you more accurate autocompletion and compile-time checks when using van.tags.

@michthemaker/vanjs@0.3.0

Minor Changes

• c03c2e5: Add Context API for logical state sharing across component trees

  Introduces createContext and useContext functions that enable sharing reactive state without prop drilling. Context uses logical scoping (not DOM-based) and integrates seamlessly with VanJS's reactive state system.

  New exports:

  • createContext<T>(): Creates a new context object with a Provider method
  • useContext<T>(context): Retrieves the current context value (must be called within a Provider)

  Example usage:

  import van, { createContext, useContext } from "@michthemaker/vanjs";
  
  const { div, button } = van.tags;
  const ThemeContext = createContext<{ color: string }>();
  
  const theme = van.state({ color: "blue" });
  
  ThemeContext.Provider(theme, () => {
    const currentTheme = useContext(ThemeContext);
    return div(
      () => `Theme: ${currentTheme.val.color}`,
      button(
        {
          onclick: () => (theme.val = { color: "red" }),
        },
        "Change Theme"
      )
    );
  });

  Features:

  • Shallow reactivity: context values must be VanJS state objects
  • Supports nested providers of the same context
  • Type-safe with TypeScript generics
  • Throws helpful errors when used incorrectly

Patch Changes

• c03c2e5: Add JSDoc documentation for Context API

create-van-app@0.3.0

Minor Changes

• cc76ab9: Update vite-plugin-vanjs dep version

create-van-app@0.2.1

Patch Changes

• dfbe3a0: Added correct dependencies for inclusion in registry downloads

create-van-app@0.2.0

Minor Changes

• fc2d487: Bumped vite-plugin-vanjs version in templates for scaffolder

@michthemaker/vite-plugin-vanjs@0.1.2

Patch Changes

• dfbe3a0: Added vite to dependency for inclusion in registry downloads

@michthemaker/vite-plugin-vanjs@0.1.0

Minor Changes

• 3570fc5: Initial release of the official VanJS Vite plugin providing Hot Module Replacement for VanJS components.
  • Automatic HMR wiring for named exports, default exports, and export { } syntax including aliases
  • State preservation across hot reloads using van.state() identity tracking
  • Shape-based state reset — when state initial value type changes across reloads, stale state is discarded automatically
  • van.derive() always re-runs fresh on every HMR update
  • Supports async arrow functions, TypeScript return type annotations, and generic components
  • Error overlay with DOM preservation when a component throws during HMR
  • Automatic GC for disconnected render slots
  • Entry file and submodule transforms handled separately

@michthemaker/vanjs@0.1.0

Minor Changes

• 3570fc5: Initial release of VanJS — a lightweight reactive UI framework that works directly with the real DOM.
  • Fine-grained reactivity via van.state() and van.derive()
  • Real DOM element creation via van.tags proxy
  • Reactive list bindings with efficient DOM diffing using start/end comment markers
  • van.add() for mounting children to existing DOM elements
  • Automatic GC — disconnected nodes stop tracking state changes automatically
  • Reactive lists support
  • Strong types for attributes and event handlers
  • No virtual DOM, no compiler, no lifecycle hooks, no build step required