Croquet Virtual DOM Framework

Introduction

Please refer to the document and the source code for general information on the Croquet Virtual DOM Framework.

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

You can simply include

<script src="https://unpkg.com/@croquet/[email protected]"></script>

<script type="module">
   import {makeMain, Library} from "https://unpkg.com/@croquet/[email protected]";
   ...
</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.