ripple

library0.0.1jsnpmunverified

Ripple is an elegant TypeScript UI framework, currently at version 0.3.19, designed to facilitate the creation of user interfaces with a strong emphasis on type safety and developer experience. It leverages TypeScript extensively, allowing developers to define components as functions returning JSX elements and manage state reactively. While a precise release cadence isn't explicitly detailed, the frequent patch updates across its comprehensive ecosystem (including a CLI, Vite, Rollup, ESLint, and Prettier plugins, plus a language server) indicate active and ongoing development. Ripple differentiates itself through its integrated, TypeScript-first approach, offering a cohesive environment for modern frontend development that covers everything from component authoring to tooling integration.

web-framework testing

npm install ripple

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · RIPPLE

ripple

web-frameworkjavascriptv0.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

createComponent

✓ import { createComponent } from 'ripple';

✗ const createComponent = require('ripple').createComponent;

Ripple is primarily consumed via ESM imports in modern TypeScript projects. CommonJS 'require' syntax is not officially supported for the core package and is explicitly broken for some associated tooling since v0.3.19.

html

✓ import { html } from 'ripple';

✗ const html = require('ripple').html;

The `html` tag function is essential for defining JSX elements within Ripple components and for accessing state management utilities like `html.state`.

html.state

✓ import { html } from 'ripple'; const count = html.state(0);

State management within Ripple components is handled via `html.state`, which is accessed as a property of the imported `html` object. It's not a direct top-level import.

Demonstrates defining a reactive counter component and mounting it to the DOM using Ripple's `createComponent`, `html`, and `html.state`.

import { createComponent, html } from 'ripple'; const CounterComponent = createComponent(() => { // Define reactive state using html.state const count = html.state(0); // Return JSX using the html tag function return html` <div> <h1>Counter: ${count.value}</h1> <button onclick=${() => count.value++}> Increment </button> <button onclick=${() => count.value--}> Decrement </button> </div> `; }); // Mount the component to an element in the DOM // Ensure a target element exists in your HTML, e.g., <div id="app"></div> const appRoot = document.getElementById('app'); if (appRoot) { CounterComponent.mount(appRoot); } else { console.error('Target element #app not found in the DOM.'); }

ripple --version

Debug

Known issues

breakingSeveral associated Ripple-TS tooling packages, including `@ripple-ts/typescript-plugin` and `@ripple-ts/language-server`, converted their source files and distribution entrypoints from CommonJS to ESM (`type: module`). This change may break existing builds or setups that rely on CommonJS `require()` syntax for these specific packages, necessitating an update to ESM-compatible import statements and build configurations.

fix

Update your project's build system and import statements to use ESM syntax (e.g., `import ... from '...'`) for Ripple-TS tooling packages. Ensure your `tsconfig.json` and build configurations are set for ESM output where appropriate.

affects: >=0.3.19

gotchaRipple is a TypeScript-first framework. While JavaScript usage is technically possible, many examples and best practices assume a TypeScript environment. Using plain JavaScript might lead to a loss of type-checking benefits and a less robust development experience.

fix

Utilize TypeScript for your Ripple projects to fully leverage the framework's type safety and integrated development tools. Ensure you have `typescript` installed and configured correctly.

affects: >=0.1.0

gotchaRipple components are designed to be mounted to an existing DOM element. Attempting to mount a component to a non-existent or null target element will result in runtime errors or the component not appearing. Always ensure your target element is available when `component.mount()` is called.

fix

Verify that the DOM element you intend to mount your Ripple component to exists before calling `.mount()`. This often involves waiting for `DOMContentLoaded` or ensuring your script runs after the target element is rendered in HTML.

affects: >=0.1.0

Errors

Common errors & fixes

Error: Cannot find module 'ripple'

The 'ripple' package is not installed or the import path is incorrect. This can also happen if attempting to use CommonJS `require()` syntax in an ESM-only context.

fix

Run `npm install ripple` or `yarn add ripple`. Ensure your import statements are using ESM syntax (e.g., `import { createComponent } from 'ripple';`) and your environment supports ESM.

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

This usually indicates that `createComponent` did not return a valid component object, or you are trying to call `mount` on something that isn't a Ripple component instance. This can happen if the component definition is malformed or if `createComponent` was not correctly imported.

fix

Verify that `createComponent` is correctly imported and that your component function is structured properly, returning valid JSX. Ensure you're calling `.mount()` on the component instance (e.g., `MyComponent.mount(document.body)`), not directly on `createComponent`.

Upgrade

Version history

0.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/Ripple-TS/ripple ↗

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

homepagehttps://ripple.solidn.xyz ↗