mutableJS / DOM

DOM elements, brought to life by @mutableJS/core.

Now with JSX support !!!

Since version 0.2.0 you can! Just check out our mutableJS / Demo repository or clone our mutableJS / typescript-starter-template repository for the correct setup. Although the lib is written in TypeScript, the type support for JSX-elements is only partially supported.

FAQ

Can mutableJS / DOM be used as standalone?

Nope.
Its reactivity depends on the @mutableJS/core activated variables.

Is it ready to use?

At the current stage mutableJS is mostly a proof of concept... But there are already a few projects in the making.

Demo?

Sure, there is a demo app with super simple code available. Be sure to clone and play with our mutableJS / Demo repository!
Also we have a mutableJS / typescript-starter-template repository to provide a correct project setup.

Installation

Install with npm:

    npm install @mutablejs/core @mutablejs/dom

Install with yarn:

    yarn add @mutablejs/core @mutablejs/dom

Keep in mind the repository depends on @mutablejs/core.

Usage/Examples

JSX JS/ TS

import mutable, { mutableFn } from '@mutablejs/core';
import { mutableElement } from '@mutablejs/dom';

const root = document.body;

const count = mutable(0);

const makeText = mutableFn(
	({ pre, count }: { pre: string; count: number }) => `${pre}: ${count}`,
);

root?.append(
	<div>
		<button
			onclick={() => {
				count.value++;
			}}
		>
			{makeText({ pre: 'Clicks', count })}
		</button>
		<div>{makeText({ pre: 'Clicks made', count })}</div>
	</div>,
);

Plain JS/ TS

import mutable, { mutableFn } from '@mutablejs/core';
import { mutableElement } from '@mutablejs/dom';

const root = document.body;

const count = mutable(0);

const makeText = mutableFn(
	({ pre, count }: { pre: string; count: number }) => `${pre}: ${count}`,
);

root?.append(
	mutableElement(
		'button',
		{
			onclick() {
				count.value++;
			},
		},
		makeText({ pre: 'Clicks', count }),
	),
	mutableElement('div', null, makeText({ pre: 'Clicks made', count })),
);

More complex todo-app demo in our demo repository.

Or start right away with your own project: Starter-Template repository.

Authors

• @donnikitos

Feedback

Any feedback? Join our Discord server and reach out to us.
We are open to suggestions, ideas and collaboration.

Support

Love open source? Enjoying my project?
Your support can keep the momentum going! Consider a donation to fuel the creation of more innovative open source software.

| via Ko-Fi | Buy me a coffee | via PayPal | | --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | | |