defuss

3.4.5 verified Fri May 01 auth: no javascript

Defuss is a minimalistic web framework (~2 KiB gzip) that provides JSX rendering, DOM manipulation via a jQuery-like API, and SSR/SSG capabilities. Current version 3.4.5. It emphasizes explicit code over magic, with a tiny codebase (~500 LoC for core packages). Released under MIT. Key differentiators: isomorphic rendering with only three functions (jsx, render, renderToString), tree-shakable, TypeScript-first, and replaces complex state management with simple reactive patterns.

Common errors

error TypeError: Cannot read properties of undefined (reading 'current') ↓

cause Trying to use ref.current before the component has mounted.

fix

Access ref.current only inside onMount callback or after render.

error Error: renderToString must be called with a valid JSX element. ↓

cause Passed an invalid argument (e.g., a function instead of JSX).

fix

Ensure you pass JSX like <App />, not a function reference.

error Module not found: Error: Can't resolve 'defuss/render' ↓

cause Missing package or incorrect import path.

fix

Run 'npm install defuss' and verify import path: 'defuss/render' (not 'defuss/renderer').

error Uncaught ReferenceError: process is not defined ↓

cause Using a Node.js specific API (like process.env) in browser code without polyfill.

fix

Use import.meta.env instead for Vite, or replace process.env with static values.

Warnings

breaking Removed default export from 'defuss/render' in v3.0. Use named exports instead. ↓

fix Change 'import render from "defuss/render"' to 'import { render } from "defuss/render"

gotcha defuss/render is ESM-only. CommonJS require() will fail in Node.js ↓

fix Use ESM imports (import syntax) or set type: module in package.json

deprecated The 'defuss/dom' package is deprecated since v2.5. Use 'defuss/dequery' instead. ↓

fix Replace import from 'defuss/dom' with 'defuss/dequery'

gotcha Event listeners registered via dequery's on() are not automatically cleaned up on component unmount. ↓

fix Manually remove listeners using off() before unmount, or use a lifecycle hook to clean up.

Install

npm install defuss

yarn add defuss

pnpm add defuss

Imports

jsx

wrong

import { jsx } from 'defuss'

correct

import { jsx } from 'defuss/render'

jsx is in the 'defuss/render' subpath since v3.

render

wrong

const render = require('defuss/render')

correct

import { render } from 'defuss/render'

ESM-only package. CommonJS require is not supported.

$
wrong
```
import $ from 'defuss'
```
correct
```
import { $ } from 'defuss/dequery'
```
dequery is a separate subpath. Default export is not provided.

renderToString

wrong

import { renderToString } from 'defuss/ssr'

correct

import { renderToString } from 'defuss/render'

renderToString is part of 'defuss/render' since v3.1.

Quickstart

Shows basic component definition, client-side render, SSR string generation, and dequery DOM selection with default exports.

import { jsx, render, renderToString } from 'defuss/render';
import { $ } from 'defuss/dequery';

const App = () => (
  <div>
    <h1>Hello defuss!</h1>
    <button ref={btnRef} onMount={(el) => console.log('Mounted', el)}>
      Click me
    </button>
  </div>
);

// Client-side render
const root = document.getElementById('root');
root && render(<App />, root);

// SSR renderToString
const html = renderToString(<App />);
console.log(html);

// DOM manipulation
const items = $('li');
items.forEach(el => el.classList.add('highlight'));