# @croquet/virtual-dom

> # Introduction

Latest version **1.0.10** (published 2025-06-12) · Apache 2.0 License license · 0 weekly downloads

## Install

```sh
npm install @croquet/virtual-dom
pnpm add @croquet/virtual-dom
yarn add @croquet/virtual-dom
bun add @croquet/virtual-dom
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2025-06-12 |
| First published | 2021-08-24 |
| Weekly downloads | 0 |
| License | Apache 2.0 License |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 92.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Croquet Corporation |
| Maintainers | codefrau, aranlunzer, yoshikiohshima |
| Keywords | croquet, real-time, collaboration, framework |

## Links

- npm: https://www.npmjs.com/package/@croquet/virtual-dom
- npm.io page: https://npm.io/package/@croquet/virtual-dom

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.0.10 (latest) — 2025-06-12
- 1.0.9 — 2022-01-14
- 1.0.8 — 2021-11-15
- 1.0.7 — 2021-10-20
- 1.0.6 — 2021-09-15
- 1.0.5 — 2021-08-31
- 1.0.4 — 2021-08-31
- 1.0.3 — 2021-08-31
- 1.0.2 — 2021-08-24
- 1.0.1 — 2021-08-24
- 1.0.0 — 2021-08-24

## README

# Croquet Virtual DOM Framework

# Introduction

Please refer to the [document](https://croquet.io/docs/virtual-dom/index.html) and the [source code](https://github.com/croquet/virtual-dom) for general information on the Croquet Virtual DOM Framework.

A released version of Croquet (later than 2.0.4 release) is used to run Virtual DOM applications.

You can simply include

~~~~~~~~ HTML
<script src="https://cdn.jsdelivr.net/npm/@croquet/croquet"></script>

<script type="module">
   import {makeMain, Library} from "https://cdn.jsdelivr.net/npm/@croquet/virtual-dom@1.0.10";
   ...
</script>
~~~~~~~~

in your HTML file to load the Croquet library and the Virtual DOM framework. In general, you don't need to use JS packager or bundlers.

## Deployment

When you prefer to create a deployment where a fewer files are loaded, you can roll up your Virtual DOM expander files into one. However, for expanders to function properly, the class and method names need to be preserved, therefore the way they are bundled needs some care.  The following describes the suggested way to bundle your expander files.

1) add `devDependencies` to your `package.json`, (or run `npm install` for those packages):

~~~~~~~~
"devDependencies": {
    "@babel/core": "^7.14.6",
    "rollup": "^2.52.7",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-terser": "^7.0.2"
}
~~~~~~~~

2) create a rollup.config.js file:

~~~~~~~~
import { terser } from 'rollup-plugin-terser';

const config = {
    plugins: [
        terser({
            mangle: {
                module: true,
            },
            keep_classnames: true,
            keep_fnames: true,
        }),
    ]
};

export default config;
~~~~~~~~

3) create the entry point file  (say, app.js) of all your expander files:

~~~~~~~~
export {a} from "./a.js";
export {b} from "./b.js";
...
~~~~~~~~

where `a.js`, `b.js`, etc. are the Virtual DOM expander files.

You can then create a single file (dist/app.js) that includes all expander files:

~~~~~~~~
npx rollup app.js --config rollup.config.js --file dist/app.js --format es
~~~~~~~~

The HTML or other files that loads `app.js` does not have to be changed.

---
_Source: https://npm.io/package/@croquet/virtual-dom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._