Home

Welcome to the research-and-demos wiki!

We keep notes on plugins and proof of concepts here.

Rendering or Deployment Contexts (distinct package types)

known consuming contexts

Desktop/node app

// "Headless" (Mirador Desktop, server-side only, mobile app)
import {m3core} from 'mirador'
// ... mirador desktop stuff here

Parent/host react app using webpack or another build system

// React type interface
import {Mirador, m3core} from 'mirador'
import 'mirador-plugin-video';
import 'mirador-plugin-kitchen-sink';

<Mirador
  plugins=[
    mirador-plugin-kitchen-sink,
    mirador-plugin-video
  ],
  config=config
/>

React host/parent app in jsfiddle or webpage

In this case, the developer must include react as a script tag on their own. This has implications for how plugins export themselves to be used in these other environments.

// React w/out webpack
return React.createElement('Mirador', plugins: [mirador-plugin-kitchen-sink]);

Vanilla JS with Jquery-esque interface

// jQuery like Interface
Mirador.viewer(id: '123334')

Plugin Notes

1. State management and sharing

Plugin API Integration for different rendering contexts

Proof-of-Concept Notes (in order of importance)

• Core redux actions/store POC. This is done.
• Spin up minimal core Redux store and write tests and reducers. We can see what falls out and use this as a basis for PoC components.
• Test async with Redux
• Wrap redux core in exportable package for view demos (umd build with export/import example, npm package, etc.)
  • Bundle up in an npm package later
• Simple view example that imports the redux core (react+connect, vue.js on a host web page).
  • Basic javascript
  • React
  • Connect
  • Vue.js
• Two components updating from the same change to the state
• State change from child component updates multiple other child components
• Add basic CSS module support #28
• Layered CSS styling can provide a default and take an alternative theme (separate "minimal" styles needed for a component to render from more presentational styles)
• How to make OSD/Three.js respond functionally to state changes (obey)
• Reflect changes in internal state -- across paradigms (OSD, immediate mode, redux, evented-canvas) -- of components in the top-level redux state.gma
• Three.js for all the things??? looks like smallest build of 3.js we can get is ~400-500kb
• How do we add multiple items into the redux state that each have their own deep state trees?