{"id":11951,"library":"rijs","title":"Ripple Fullstack (rijs)","description":"rijs (Ripple Fullstack) is a JavaScript framework designed for building realtime, full-stack applications with a focus on simplicity and efficiency. It aims to eliminate boilerplate, complex build pipelines, and excessive transpilation by streaming fine-grained resources directly to clients, enabling lazy loading and preventing over-fetching. The current stable version is 0.9.1. Ripple synchronizes client and server states by replicating an immutable log of actions, with views or other modules reactively updating when the local store changes. Key differentiators include its no-bundling approach, automatic client/server synchronization, and a minimal API for resource management. It promotes a component-based architecture where components are idempotent render functions and can declare their data dependencies for reactive updates. Ripple's core acts as a module map, efficiently resolving resources from a local cache or making new requests. The project appears to have a consistent, though not extremely rapid, release cadence with several notable changes between minor versions, indicating ongoing active development.","status":"active","version":"0.9.1","language":"javascript","source_language":"en","source_url":"git://github.com/rijs/fullstack","tags":["javascript"],"install":[{"cmd":"npm install rijs","lang":"bash","label":"npm"},{"cmd":"yarn add rijs","lang":"bash","label":"yarn"},{"cmd":"pnpm add rijs","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"For server-side usage with Node.js, CommonJS `require` is typically used for the main `ripple` instance. While modern Node.js supports ESM, `rijs` examples often use `require` for its entry point.","wrong":"import ripple from 'rijs'","symbol":"ripple","correct":"const ripple = require('rijs')"},{"note":"On the client, the `ripple` core is typically loaded as a global via a script tag, which is served by the `rijs` server. It's not usually imported as an npm module directly in client-side bundles unless using `rijs/minimal`.","wrong":"import { ripple } from 'rijs'","symbol":"ripple.js (client-side script)","correct":""},{"note":"Client-side components (in the `resources` directory) are expected to be ES Module defaults, allowing `rijs` to automatically discover and serve them. CommonJS exports are not recognized for components.","wrong":"module.exports = function(node, data){ /* ... */ }","symbol":"Component export","correct":"export default (node, data) => { /* ... */ }"},{"note":"The `pull` function is a global utility on the client for dynamically importing resources, similar to `import()`. It's often used directly without prefixing `ripple.`.","wrong":"const dependency = await ripple.pull('dependency')","symbol":"pull","correct":"const dependency = await pull('dependency')"}],"quickstart":{"code":"const ripple = require('rijs')({ port: 3000, dir: __dirname });\nconst path = require('path');\nconst fs = require('fs');\n\n// Create a pages directory if it doesn't exist\nconst pagesDir = path.join(__dirname, 'pages');\nif (!fs.existsSync(pagesDir)) {\n fs.mkdirSync(pagesDir);\n}\n\n// Create an index.html file\nconst indexPath = path.join(pagesDir, 'index.html');\nfs.writeFileSync(indexPath, `\n \n \n \n Ripple App\n \n \n Welcome to Ripple!
\n \n \n \n \n`);\n\n// Create a resources directory if it doesn't exist\nconst resourcesDir = path.join(__dirname, 'resources');\nif (!fs.existsSync(resourcesDir)) {\n fs.mkdirSync(resourcesDir);\n}\n\n// Define a simple component\nconst componentPath = path.join(resourcesDir, 'my-app.js');\nfs.writeFileSync(componentPath, `\n export default (node, { greeting = 'Default Greeting' }) => {\n node.innerHTML = `Component says: ${greeting}
`;\n };\n`);\n\n// Define a data resource\nconst dataPath = path.join(resourcesDir, 'greeting.js');\nfs.writeFileSync(dataPath, `\n export default 'Hello from Ripple Data!';\n`);\n\nconsole.log('Ripple server starting on http://localhost:3000');\nconsole.log('Open your browser to http://localhost:3000/pages/index.html');\n","lang":"javascript","description":"This quickstart sets up a basic `rijs` server, serves an `index.html` page, and defines a client-side component that displays data reactively loaded from a `rijs` resource."},"warnings":[{"fix":"Update component functions to accept `(node, data)` or use destructuring for data, e.g., `export default (node, { prop1, prop2 }) => { ... }`.","message":"The component signature changed in v0.6.3. Components now receive `node` and `data` directly as parameters, making arrow functions for simple components more idiomatic. Older component definitions using a different signature will break.","severity":"breaking","affected_versions":">=0.6.3"},{"fix":"Remove `rijs`-specific DB module imports and replace them with standard npm packages for your chosen database (e.g., `mysql`, `pg`, `mongodb`) and integrate directly into your server-side logic.","message":"DB and MySQL modules were deprecated in v0.6.3. Ripple no longer provides specific modules for each database/service; users are encouraged to use any standard Node.js database modules directly.","severity":"deprecated","affected_versions":">=0.6.3"},{"fix":"Replace calls to `stream` with `send` on the server for responding to requests. On the client, `ripple.send` returns an awaitable stream.","message":"The `sync` module's API for sending data changed significantly in v0.6.0. The `stream` function was replaced by `send` for a cleaner paradigm.","severity":"breaking","affected_versions":">=0.6.0"},{"fix":"Verify that any custom WebSocket or real-time communication logic doesn't directly depend on `socket.io` internals. The `rijs` `send`/`pull` APIs should abstract this change.","message":"`socket.io` was replaced by `uws` and `nanosocket` in v0.8.0. While this primarily impacts internal WebSocket handling, custom integrations or direct `socket.io` usage within a `rijs` application might require adjustments.","severity":"breaking","affected_versions":">=0.8.0"},{"fix":"Leverage Ripple's 'Automatic Push' (v0.9.1+) where possible. For older versions or specific performance-critical paths, ensure module graphs are optimized or consider manual preloading if necessary, although this goes against Ripple's philosophy.","message":"Ripple aims for no bundling and lazy loading, which means client-side ES Modules (`import ... from './module.js'`) might incur multiple network round-trips for dependencies in the browser, impacting initial load performance. Version 0.9.1 introduced 'Automatic Push' to mitigate this, but developers should be aware of browser module loading characteristics.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure all client-side components are defined using `export default` and are located within the configured `dir`'s `resources` subdirectory.","message":"Client-side component files (e.g., `my-app.js`) are expected to be ES Module exports (`export default ...`) and reside in the `resources` directory for automatic discovery and hot-reloading. Using CommonJS (`module.exports`) or placing them elsewhere will prevent them from being served and recognized by Ripple.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Client-side code should use ES Module `import` syntax or rely on `ripple.pull()` for dynamic resource loading. The main `ripple.js` client script provides globals, not `require`.","cause":"Attempting to use `require()` in a client-side component or a browser environment where CommonJS is not natively supported or transpiled.","error":"ReferenceError: require is not defined"},{"fix":"Ensure `` is present in your HTML before any scripts that attempt to use `ripple` globals. It's often placed at the end of ``.","cause":"The client-side `ripple.js` script was not loaded in the HTML page, or custom client-side code is trying to access `ripple` before the script has executed.","error":"Uncaught ReferenceError: ripple is not defined"},{"fix":"Ensure that client-side components use `export default`. If manually bundling or using `rijs/minimal`, verify your bundler's configuration for handling ES Modules and default exports correctly.","cause":"Incorrectly importing a `rijs` component or resource that expects `export default` as a named import, or vice-versa, in a bundled client-side setup (not typical for `rijs`'s philosophy but possible in hybrid setups).","error":"TypeError: (0 , ripple_js__WEBPACK_IMPORTED_MODULE_0__.default) is not a function"}],"ecosystem":"npm"}