From 813c75e8a93938494d6fd28e1f8fd48a29faf182 Mon Sep 17 00:00:00 2001
From: Cosma Alex Vergari <cosmavergari@gmail.com>
Date: Thu, 28 May 2026 14:56:46 +0200
Subject: [PATCH] fix: register canvas shaders in registerDefaultShaders

---
 src/core/shaders.ts | 118 ++++++++++++++++++++++++++++----------------
 1 file changed, 76 insertions(+), 42 deletions(-)

diff --git a/src/core/shaders.ts b/src/core/shaders.ts
index 83c164f..12e4416 100644
--- a/src/core/shaders.ts
+++ b/src/core/shaders.ts
@@ -1,5 +1,6 @@
 import * as lngr from '@solidtv/renderer';
-import * as lngr_shaders from '@solidtv/renderer/webgl/shaders';
+import * as lngr_canvas_shaders from '@solidtv/renderer/canvas/shaders';
+import * as lngr_webgl_shaders from '@solidtv/renderer/webgl/shaders';
 
 import type {
   HolePunchProps as ShaderHolePunchProps,
@@ -9,6 +10,7 @@ import type {
   ShadowProps as ShaderShadowProps,
 } from '@solidtv/renderer';
 import { type WebGlShaderType as WebGlShader } from '@solidtv/renderer/webgl';
+import { type CanvasShaderType as CanvasShader } from '@solidtv/renderer/canvas';
 export {
   ShaderHolePunchProps,
   ShaderLinearGradientProps,
@@ -17,6 +19,7 @@ export {
   ShaderShadowProps,
 };
 export { WebGlShader };
+export { CanvasShader };
 
 import { SHADERS_ENABLED, isDomRendererActive } from './config.js';
 import type { CoreShaderManager } from './intrinsicTypes.js';
@@ -50,31 +53,21 @@ export type ShaderRoundedWithBorderAndShadowProps = ShaderRoundedProps &
   ShaderShadowPrefixedProps &
   ShaderBorderPrefixedProps;
 
-export type ShaderRounded = WebGlShader<ShaderRoundedProps>;
-export type ShaderShadow = WebGlShader<ShaderShadowProps>;
-export type ShaderRoundedWithBorder = WebGlShader<ShaderRoundedWithBorderProps>;
-export type ShaderRoundedWithShadow = WebGlShader<ShaderRoundedWithShadowProps>;
-export type ShaderRoundedWithBorderAndShadow =
-  WebGlShader<ShaderRoundedWithBorderAndShadowProps>;
-export type ShaderHolePunch = WebGlShader<ShaderHolePunchProps>;
-export type ShaderRadialGradient = WebGlShader<ShaderRadialGradientProps>;
-export type ShaderLinearGradient = WebGlShader<ShaderLinearGradientProps>;
-
-export const defaultShaderRounded: ShaderRounded = lngr_shaders.Rounded;
-export const defaultShaderShadow: ShaderShadow = lngr_shaders.Shadow;
-export const defaultShaderRoundedWithShadow: ShaderRoundedWithShadow =
-  lngr_shaders.RoundedWithShadow;
-// TODO: lngr_shaders.RoundedWithBorderAndShadow doesn't support border-gap
-export const defaultShaderRoundedWithBorderAndShadow =
-  lngr_shaders.RoundedWithBorderAndShadow as ShaderRoundedWithBorderAndShadow;
-export const defaultShaderHolePunch: ShaderHolePunch = lngr_shaders.HolePunch;
-export const defaultShaderRadialGradient: ShaderRadialGradient =
-  lngr_shaders.RadialGradient;
-export const defaultShaderLinearGradient: ShaderLinearGradient =
-  lngr_shaders.LinearGradient;
+export type RendererShader<Props extends object> =
+  | WebGlShader<Props>
+  | CanvasShader<Props>;
 
-export const defaultShaderRoundedWithBorder =
-  lngr_shaders.RoundedWithBorder as ShaderRoundedWithBorder;
+export type ShaderRounded = RendererShader<ShaderRoundedProps>;
+export type ShaderShadow = RendererShader<ShaderShadowProps>;
+export type ShaderRoundedWithBorder =
+  RendererShader<ShaderRoundedWithBorderProps>;
+export type ShaderRoundedWithShadow =
+  RendererShader<ShaderRoundedWithShadowProps>;
+export type ShaderRoundedWithBorderAndShadow =
+  RendererShader<ShaderRoundedWithBorderAndShadowProps>;
+export type ShaderHolePunch = RendererShader<ShaderHolePunchProps>;
+export type ShaderRadialGradient = RendererShader<ShaderRadialGradientProps>;
+export type ShaderLinearGradient = RendererShader<ShaderLinearGradientProps>;
 
 function calcFactoredRadiusArray(
   radius: Vec4,
@@ -119,62 +112,103 @@ function toValidVec4(value: unknown): Vec4 {
   return [0, 0, 0, 0];
 }
 
+function isCanvas(
+  shManager: CoreShaderManager | IRendererShaderManager,
+): boolean {
+  return 'stage' in shManager && shManager.stage.renderer.mode === 'canvas';
+}
+
+function canUseShaders(): boolean {
+  return SHADERS_ENABLED && !isDomRendererActive();
+}
+
 export function registerDefaultShaderRounded(
   shManager: IRendererShaderManager,
 ) {
-  if (SHADERS_ENABLED && !isDomRendererActive())
-    shManager.registerShaderType('rounded', defaultShaderRounded);
+  if (canUseShaders())
+    shManager.registerShaderType(
+      'rounded',
+      isCanvas(shManager)
+        ? lngr_canvas_shaders.Rounded
+        : lngr_webgl_shaders.Rounded,
+    );
 }
 export function registerDefaultShaderShadow(shManager: CoreShaderManager) {
-  if (SHADERS_ENABLED && !isDomRendererActive())
-    shManager.registerShaderType('shadow', defaultShaderShadow);
+  if (canUseShaders())
+    shManager.registerShaderType(
+      'shadow',
+      isCanvas(shManager)
+        ? lngr_canvas_shaders.Shadow
+        : lngr_webgl_shaders.Shadow,
+    );
 }
 export function registerDefaultShaderRoundedWithBorder(
   shManager: CoreShaderManager,
 ) {
-  if (SHADERS_ENABLED && !isDomRendererActive())
+  if (canUseShaders())
     shManager.registerShaderType(
       'roundedWithBorder',
-      defaultShaderRoundedWithBorder,
+      isCanvas(shManager)
+        ? lngr_canvas_shaders.RoundedWithBorder
+        : lngr_webgl_shaders.RoundedWithBorder,
     );
 }
 export function registerDefaultShaderRoundedWithShadow(
   shManager: CoreShaderManager,
 ) {
-  if (SHADERS_ENABLED && !isDomRendererActive())
+  if (canUseShaders())
     shManager.registerShaderType(
       'roundedWithShadow',
-      defaultShaderRoundedWithShadow,
+      isCanvas(shManager)
+        ? lngr_canvas_shaders.RoundedWithShadow
+        : lngr_webgl_shaders.RoundedWithShadow,
     );
 }
 export function registerDefaultShaderRoundedWithBorderAndShadow(
   shManager: CoreShaderManager,
 ) {
-  if (SHADERS_ENABLED && !isDomRendererActive())
+  if (canUseShaders())
     shManager.registerShaderType(
       'roundedWithBorderWithShadow',
-      defaultShaderRoundedWithBorderAndShadow,
+      isCanvas(shManager)
+        ? lngr_canvas_shaders.RoundedWithBorderAndShadow
+        : lngr_webgl_shaders.RoundedWithBorderAndShadow,
     );
 }
 export function registerDefaultShaderHolePunch(shManager: CoreShaderManager) {
-  if (SHADERS_ENABLED && !isDomRendererActive())
-    shManager.registerShaderType('holePunch', defaultShaderHolePunch);
+  if (canUseShaders())
+    shManager.registerShaderType(
+      'holePunch',
+      isCanvas(shManager)
+        ? lngr_canvas_shaders.HolePunch
+        : lngr_webgl_shaders.HolePunch,
+    );
 }
 export function registerDefaultShaderRadialGradient(
   shManager: CoreShaderManager,
 ) {
-  if (SHADERS_ENABLED && !isDomRendererActive())
-    shManager.registerShaderType('radialGradient', defaultShaderRadialGradient);
+  if (canUseShaders())
+    shManager.registerShaderType(
+      'radialGradient',
+      isCanvas(shManager)
+        ? lngr_canvas_shaders.RadialGradient
+        : lngr_webgl_shaders.RadialGradient,
+    );
 }
 export function registerDefaultShaderLinearGradient(
   shManager: CoreShaderManager,
 ) {
-  if (SHADERS_ENABLED && !isDomRendererActive())
-    shManager.registerShaderType('linearGradient', defaultShaderLinearGradient);
+  if (canUseShaders())
+    shManager.registerShaderType(
+      'linearGradient',
+      isCanvas(shManager)
+        ? lngr_canvas_shaders.LinearGradient
+        : lngr_webgl_shaders.LinearGradient,
+    );
 }
 
 export function registerDefaultShaders(shManager: CoreShaderManager) {
-  if (SHADERS_ENABLED && !isDomRendererActive()) {
+  if (canUseShaders()) {
     registerDefaultShaderRounded(shManager);
     registerDefaultShaderShadow(shManager);
     registerDefaultShaderRoundedWithBorder(shManager);