defuss

library3.4.5jsnpmunverified

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.

web-framework serialization

npm install defuss

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · DEFUSS

defuss

web-frameworkjavascriptv3.4.5

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

jsx

✓ import { jsx } from 'defuss/render'

✗ import { jsx } from 'defuss'

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

render

✓ import { render } from 'defuss/render'

✗ const render = require('defuss/render')

ESM-only package. CommonJS require is not supported.

✓ import { $ } from 'defuss/dequery'

✗ import $ from 'defuss'

dequery is a separate subpath. Default export is not provided.

renderToString

✓ import { renderToString } from 'defuss/render'

✗ import { renderToString } from 'defuss/ssr'

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

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'));

Debug

Known issues

breakingRemoved 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"

affects: >=3.0

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

fix

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

affects: *

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

fix

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

affects: >=2.5 <3.0

gotchaEvent 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.

affects: *

Errors

Common errors & fixes

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

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

fix

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

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

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

fix

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

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

Missing package or incorrect import path.

fix

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

Uncaught ReferenceError: process is not defined

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.

Upgrade

Version history

3.4.5latest on npm

Audit

Dependencies

typescriptoptionalFor TypeScript type definitions and JSX support

Agent activity

9 hits · last 30 days

node

Resources

githubhttps://github.com/kyr0/defuss ↗

packagehttps://www.npmjs.com/package/defuss ↗

homepagehttps://defuss.dev ↗