Extensions
An extension is a separate file you load after the framework. It adds something the core leaves out, such as running a store on a worker or drawing data with three.js, and it works through the same public API your own code uses. A page that does not load an extension pays nothing for it.
You do not need one
WildflowerJS is plain JavaScript on plain HTML, so libraries and browser APIs work with it directly, and that includes three.js and Web Workers.
The Stellar Flock demo uses three.js with no extension: a component's tick() steps the flock and writes each ship's position into a three.js InstancedMesh, and the controls around the scene are ordinary bindings.
A worker works the same way: post it the data, and write what it sends back into a store.
An extension takes over the code that connects the two. Trillium writes a pool into a mesh and reports what is under the pointer, so the drawing loop and the picking code are gone. Threads runs a store's definition in the worker and keeps a mirror of it on the page, so there are no messages to design.
Available extensions
Threads
A store that runs on a Web Worker. Its state and computed properties are evaluated off the main thread, and the page reads a mirror that bindings, subscriptions and methods use like any store. For filtering a large dataset on every keystroke, parsing a big file, or a simulation with an expensive step.
wildflower.thread() · every tier · Using Threads
Trillium
The three.js connector. It draws stores, pools and queries into your three.js scene, and the view is a store, so what is hovered and selected, the canvas size and the frame rate are fields you bind in markup. For data shown in 3D: markers on a globe, a molecule, thousands of moving points.
wildflower.three · tiers with pools · Using Trillium
Loading one
Load the framework first, then the extension, then the code that uses it. The extension installs itself on the framework as it loads.
<script defer src="https://cdn.jsdelivr.net/npm/wildflowerjs@1/dist/wildflower.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@wildflowerjs/threads@0.1/dist/threads.wf.min.js"></script>
<script defer src="/js/app.js"></script>Each extension's page gives its own loading steps and the tiers it runs on. Trillium also needs three.js, which you load yourself and hand to it once.
How extensions relate to the core
- Separate packages. Each extension is its own npm package under
@wildflowerjs/, with its own version number and changelog, and states the range of framework versions it works with. - Public API only. An extension uses what an application can use: stores, pools, plugins and hooks. Production builds shorten the framework's internal names, so an extension that relied on them would break there; none do.
- Their own error codes. Threads reports
TH-codes and Trillium3D-codes, listed with the framework's on the error code reference. - Development and production builds. Like the framework, each extension ships a development build with warnings and a smaller production build without them.
The demos have an Extensions section with pages built on each one.