{"id":25162,"library":"defuss","title":"defuss","description":"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.","status":"active","version":"3.4.5","language":"javascript","source_language":"en","source_url":"https://github.com/kyr0/defuss","tags":["javascript","jsx","render","ssr","ssg","isomorphic","jquery-like","defuss","react-like","typescript"],"install":[{"cmd":"npm install defuss","lang":"bash","label":"npm"},{"cmd":"yarn add defuss","lang":"bash","label":"yarn"},{"cmd":"pnpm add defuss","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"For TypeScript type definitions and JSX support","package":"typescript","optional":true}],"imports":[{"note":"jsx is in the 'defuss/render' subpath since v3.","wrong":"import { jsx } from 'defuss'","symbol":"jsx","correct":"import { jsx } from 'defuss/render'"},{"note":"ESM-only package. CommonJS require is not supported.","wrong":"const render = require('defuss/render')","symbol":"render","correct":"import { render } from 'defuss/render'"},{"note":"dequery is a separate subpath. Default export is not provided.","wrong":"import $ from 'defuss'","symbol":"$","correct":"import { $ } from 'defuss/dequery'"},{"note":"renderToString is part of 'defuss/render' since v3.1.","wrong":"import { renderToString } from 'defuss/ssr'","symbol":"renderToString","correct":"import { renderToString } from 'defuss/render'"}],"quickstart":{"code":"import { jsx, render, renderToString } from 'defuss/render';\nimport { $ } from 'defuss/dequery';\n\nconst App = () => (\n  <div>\n    <h1>Hello defuss!</h1>\n    <button ref={btnRef} onMount={(el) => console.log('Mounted', el)}>\n      Click me\n    </button>\n  </div>\n);\n\n// Client-side render\nconst root = document.getElementById('root');\nroot && render(<App />, root);\n\n// SSR renderToString\nconst html = renderToString(<App />);\nconsole.log(html);\n\n// DOM manipulation\nconst items = $('li');\nitems.forEach(el => el.classList.add('highlight'));","lang":"typescript","description":"Shows basic component definition, client-side render, SSR string generation, and dequery DOM selection with default exports."},"warnings":[{"fix":"Change 'import render from \"defuss/render\"' to 'import { render } from \"defuss/render\"","message":"Removed default export from 'defuss/render' in v3.0. Use named exports instead.","severity":"breaking","affected_versions":">=3.0"},{"fix":"Use ESM imports (import syntax) or set type: module in package.json","message":"defuss/render is ESM-only. CommonJS require() will fail in Node.js","severity":"gotcha","affected_versions":"*"},{"fix":"Replace import from 'defuss/dom' with 'defuss/dequery'","message":"The 'defuss/dom' package is deprecated since v2.5. Use 'defuss/dequery' instead.","severity":"deprecated","affected_versions":">=2.5 <3.0"},{"fix":"Manually remove listeners using off() before unmount, or use a lifecycle hook to clean up.","message":"Event listeners registered via dequery's on() are not automatically cleaned up on component unmount.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Access ref.current only inside onMount callback or after render.","cause":"Trying to use ref.current before the component has mounted.","error":"TypeError: Cannot read properties of undefined (reading 'current')"},{"fix":"Ensure you pass JSX like <App />, not a function reference.","cause":"Passed an invalid argument (e.g., a function instead of JSX).","error":"Error: renderToString must be called with a valid JSX element."},{"fix":"Run 'npm install defuss' and verify import path: 'defuss/render' (not 'defuss/renderer').","cause":"Missing package or incorrect import path.","error":"Module not found: Error: Can't resolve 'defuss/render'"},{"fix":"Use import.meta.env instead for Vite, or replace process.env with static values.","cause":"Using a Node.js specific API (like process.env) in browser code without polyfill.","error":"Uncaught ReferenceError: process is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}