Skip to content

Add lightning renderer v2, v3 and dom renderer #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
thetarnav wants to merge 2 commits into
base: rc3
Choose a base branch
from
+207 −137
Draft

Add lightning renderer v2, v3 and dom renderer #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c7d5f43
Add lightning renderer v2, v3 and dom renderer
thetarnav Aug 18, 2025
92700fc
Enable inspector in dev
thetarnav Aug 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
"dependencies": {
"@firebolt-js/sdk": "^1.5.0",
"@lightningjs/l3-ui-theme-base": "^0.3.3",
"@lightningjs/renderer": "3.0.0-beta7",
"@lightningtv/core": "3.0.0-2",
"@lightningtv/l3-ui-theme-base": "^1.0.0",
"@lightningtv/solid": "3.0.0-2",
Expand Down Expand Up @@ -57,8 +56,7 @@
"pnpm": {
"overrides": {
"@lightningtv/core": "$@lightningtv/core",
"@lightningtv/solid": "$@lightningtv/solid",
"@lightningjs/renderer": "$@lightningjs/renderer"
"@lightningtv/solid": "$@lightningtv/solid"
}
},
"lint-staged": {
Expand Down
8 changes: 2 additions & 6 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 5 additions & 1 deletion src/api/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,11 @@ function _get(path: string, params: RequestInit = {}) {
function loadConfig() {
return _get("/configuration").then((data) => {
tmdbConfig = data;
baseImageUrl = data.images?.secure_base_url;
if (__LIGHTNING_DOM_RENDERING__ && import.meta.env.DEV) {
baseImageUrl = '/image_tmdb/'
} else {
baseImageUrl = data.images?.secure_base_url;
}
return data;
});
}
Expand Down
160 changes: 73 additions & 87 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,60 +5,13 @@ import {elementInterface} from "@lightningtv/solid/devtools";

setElementInterface(elementInterface)

import { createRenderer, Config, loadFonts } from "@lightningtv/solid";
import {
WebGlCoreRenderer,
SdfTextRenderer
} from "@lightningjs/renderer/webgl";
import {
CanvasCoreRenderer,
CanvasTextRenderer
} from "@lightningjs/renderer/canvas";

import { Inspector } from "@lightningjs/renderer/inspector";
import { HashRouter, FocusStackProvider } from "@lightningtv/solid/primitives";
import { Route } from "@solidjs/router";
import { lazy } from "solid-js";
import App from "./pages/App";
import Browse from "./pages/Browse";
import TMDB from "./pages/TMDB";
import DestroyPage from "./pages/Destroy";
import { tmdbData, destroyData } from "./api/tmdbData";
import NotFound from "./pages/NotFound";
import * as s from "solid-js";
import * as router from "@solidjs/router";
import * as lng from "@lightningtv/solid";
import * as lngp from "@lightningtv/solid/primitives";

import fonts from "./fonts";
import { browsePreload } from "./api/browsePreload";
import { entityPreload } from "./api/entityPreload";
import Player from "./pages/Player";
import LeftNavWrapper from "./pages/LeftNavWrapper";

const Grid = lazy(() => import("./pages/Grid"));
const Loops = lazy(() => import("./pages/Loops"));
const Infinite = lazy(() => import("./pages/Infinite"));
const TMDBGrid = lazy(() => import("./pages/TMDBGrid"));
const Portal = lazy(() => import("./pages/Portal"));
const TextPage = lazy(() => import("./pages/Text"));
const TextPosterPage = lazy(() => import("./pages/TextPoster"));
const CreatePage = lazy(() => import("./pages/Create"));
const ViewportPage = lazy(() => import("./pages/Viewport"));
const PositioningPage = lazy(() => import("./pages/Positioning"));
const LayoutPage = lazy(() => import("./pages/Layout"));
const FocusBasicsPage = lazy(() => import("./pages/FocusBasics"));
const KeyHandlingPage = lazy(() => import("./pages/KeyHandling"));
const TransitionsPage = lazy(() => import("./pages/Transitions"));
const ComponentsPage = lazy(() => import("./pages/Components"));
const FocusHandlingPage = lazy(() => import("./pages/FocusHandling"));
const GradientsPage = lazy(() => import("./pages/Gradients"));
const FlexPage = lazy(() => import("./pages/Flex"));
const FlexGrowPage = lazy(() => import("./pages/FlexGrow"));
const FlexMenuPage = lazy(() => import("./pages/FlexMenu"));
const FlexSizePage = lazy(() => import("./pages/FlexSize"));
const FlexColumnSizePage = lazy(() => import("./pages/FlexColumnSize"));
const FlexColumnPage = lazy(() => import("./pages/FlexColumn"));
const ButtonsMaterialPage = lazy(() => import("./pages/ButtonsMaterial"));
const SuperFlexPage = lazy(() => import("./pages/SuperFlex"));
const Entity = lazy(() => import("./pages/Entity"));
const People = lazy(() => import("./pages/People"));
const FireboltPage = lazy(() => import("./pages/Firebolt"));

let numImageWorkers = 3;
const urlParams = new URLSearchParams(window.location.search);
Expand All @@ -79,17 +32,16 @@ const deviceLogicalPixelRatio = {
}[screenSize];

const logFps = true;
Config.debug = false;
lng.Config.debug = false;
// Config.keyDebug = true;
Config.animationsEnabled = animationsEnabled === "true";
Config.fontSettings.fontFamily = "Roboto";
Config.fontSettings.color = "#f6f6f6";
Config.fontSettings.fontSize = 32;
lng.Config.animationsEnabled = animationsEnabled === "true";
lng.Config.fontSettings.fontFamily = "Roboto";
lng.Config.fontSettings.color = "#f6f6f6";
lng.Config.fontSettings.fontSize = 32;
// Config.focusDebug = true;

Config.rendererOptions = {
lng.Config.rendererOptions = {
fpsUpdateInterval: logFps ? 1000 : 0,
inspector: import.meta.env.DEV ? Inspector : undefined,
// textureMemory: {
// criticalThreshold: 80e6,
// },
Expand All @@ -103,36 +55,70 @@ Config.rendererOptions = {

// Ideally you'd do two separate builds for canvas and webgl to reduce bundle size.
if (rendererMode === "canvas") {
Config.rendererOptions.fontEngines = [CanvasTextRenderer];
Config.rendererOptions.renderEngine = CanvasCoreRenderer;
lng.useCanvasFontEngine()
lng.useCanvasRenderEngine()
} else {
Config.rendererOptions.fontEngines = [SdfTextRenderer];
Config.rendererOptions.renderEngine = WebGlCoreRenderer;
lng.useSdfFontEngine()
lng.useWebglRenderEngine()
}

if (import.meta.env.DEV) {
lng.useInspector()
}

const { renderer, render } = createRenderer();
loadFonts(fonts);
// Prepare for RC3 of Renderer
import {
Rounded,
RoundedWithBorder,
RoundedWithShadow,
RoundedWithBorderAndShadow,
RadialGradient,
LinearGradient,
HolePunch,
} from '@lightningjs/renderer/webgl/shaders';
const shManager = renderer.stage.shManager;
shManager.registerShaderType('rounded', Rounded)
shManager.registerShaderType('roundedWithBorder', RoundedWithBorder)
shManager.registerShaderType('roundedWithShadow', RoundedWithShadow)
shManager.registerShaderType('roundedWithBorderWithShadow', RoundedWithBorderAndShadow)
shManager.registerShaderType('radialGradient', RadialGradient)
shManager.registerShaderType('linearGradient', LinearGradient)
shManager.registerShaderType('holePunch', HolePunch)
const { renderer, render } = lng.createRenderer();

lng.loadFonts(fonts);

lng.registerDefaultShaders(renderer.stage.shManager);


const Route = router.Route;
const lazy = s.lazy;

import App from "./pages/App";
import Browse from "./pages/Browse";
import TMDB from "./pages/TMDB";
import DestroyPage from "./pages/Destroy";
import { tmdbData, destroyData } from "./api/tmdbData";
import NotFound from "./pages/NotFound";
import { browsePreload } from "./api/browsePreload";
import { entityPreload } from "./api/entityPreload";
import Player from "./pages/Player";
import LeftNavWrapper from "./pages/LeftNavWrapper";

const Grid = lazy(() => import("./pages/Grid"));
const Loops = lazy(() => import("./pages/Loops"));
const Infinite = lazy(() => import("./pages/Infinite"));
const TMDBGrid = lazy(() => import("./pages/TMDBGrid"));
const Portal = lazy(() => import("./pages/Portal"));
const TextPage = lazy(() => import("./pages/Text"));
const TextPosterPage = lazy(() => import("./pages/TextPoster"));
const CreatePage = lazy(() => import("./pages/Create"));
const ViewportPage = lazy(() => import("./pages/Viewport"));
const PositioningPage = lazy(() => import("./pages/Positioning"));
const LayoutPage = lazy(() => import("./pages/Layout"));
const FocusBasicsPage = lazy(() => import("./pages/FocusBasics"));
const KeyHandlingPage = lazy(() => import("./pages/KeyHandling"));
const TransitionsPage = lazy(() => import("./pages/Transitions"));
const ComponentsPage = lazy(() => import("./pages/Components"));
const FocusHandlingPage = lazy(() => import("./pages/FocusHandling"));
const GradientsPage = lazy(() => import("./pages/Gradients"));
const FlexPage = lazy(() => import("./pages/Flex"));
const FlexGrowPage = lazy(() => import("./pages/FlexGrow"));
const FlexMenuPage = lazy(() => import("./pages/FlexMenu"));
const FlexSizePage = lazy(() => import("./pages/FlexSize"));
const FlexColumnSizePage = lazy(() => import("./pages/FlexColumnSize"));
const FlexColumnPage = lazy(() => import("./pages/FlexColumn"));
const ButtonsMaterialPage = lazy(() => import("./pages/ButtonsMaterial"));
const SuperFlexPage = lazy(() => import("./pages/SuperFlex"));
const Entity = lazy(() => import("./pages/Entity"));
const People = lazy(() => import("./pages/People"));
const FireboltPage = lazy(() => import("./pages/Firebolt"));

render(() => (
<FocusStackProvider>
<HashRouter root={(props) => <App {...props} />}>
<lngp.FocusStackProvider>
<router.HashRouter root={(props) => <App {...props} />}>
<Route path="" component={LeftNavWrapper}>
<Route path="" component={Browse} preload={browsePreload} />
<Route path="examples" component={Portal}>
Expand Down Expand Up @@ -175,6 +161,6 @@ render(() => (
<Route path="player">
<Route path=":id" component={Player} />
</Route>
</HashRouter>
</FocusStackProvider>
</router.HashRouter>
</lngp.FocusStackProvider>
));
Loading