v0.15.0 - Breaking Changes

Whats Changed

• Removed Canvas tag
• Removed stateMapperHook
• Batched Shader effects on initial creation
• styles now support nested arrays (optimized performance of parsing styles)
• Added getChildById(id) to find children nodes
• Added searchChildrenById(id) to find any child node matching id
• Move Canvas options into Config.rendererOptions

Lightning now inits the renderer synchronously before rendering the app. This will make it much easier to do unit testing as you can await render in setup and then test a component.

Why Remove Canvas

Removing the canvas tag makes it so all nodes have a parent reducing overhead on managing nodes (slightly better performance). Also we can now render nodes as soon as they are inserted into a parent making onMount with refs work as expected (no timing issues). Lastly, I wanted to remove Canvas so the base index page can easily be reused between a Web + Lightning environment as most page and API calls are the same.

To Upgrade

Remove Canvas tag from Render
Set Config.renderOptions = to the Canvas options

import { Config, render } from "@lightningjs/solid";
Config.rendererOptions = {
  coreExtensionModule: coreExtensionModuleUrl,
  enableInspector: false,
  appWidth: 1920,
  appHeight: 1080,
  deviceLogicalPixelRatio: 1,
};

const dispose = await render(() => (
  <HashRouter root={(props) => <App {...props} />}>
    <Route path="" component={LiveGuide} load={loadEPGData} />
    <Route path="guide" component={() => <Navigate href="/" />} />;
    <Route path="movies" component={Vod} load={loadMovies} />
    <Route path="tvShows" component={Vod} load={loadTvShows} />
    <Route path="networks" component={Networks} load={loadNetworks} />
    <Route path="episodeGuide/:id" component={EpisodeGuide} load={loadTvShow} />
    <Route path="movie/:id" component={Movie} load={loadMovieEntity} />
    <Route path="vodPlayer" component={VodPlayer} />
    <Route path="linearPlayer" component={LinearPlayer} />
    <Route path="settings" component={Settings} />
  </HashRouter>
), //second param is HTML element to insert into DOM, same as SolidJS );

Please note that render is now an async function due to renderer init being an async process which returns dispose function.