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/croquet@1.0.5"></script>
<script type="module">
import {makeMain, Library} from "https://unpkg.com/@croquet/virtual-dom@1.0.5";
...
</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.
- add
devDependencies
to yourpackage.json
, (or runnpm 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"
}
- 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;
- 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.