@lightningjs/renderer 1.0.0-rc.0 → 1.0.0-rc.1

package/exports/index.ts

@@ -39,6 +39,8 @@
 
 export * from '../src/main-api/INode.js';
 export * from '../src/main-api/Renderer.js';
+export * from '../src/main-api/ShaderController.js';
+export * from '../src/main-api/DynamicShaderController.js';
 export * from '../src/common/IAnimationController.js';
 export * from '../src/common/CommonTypes.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/renderer",
-  "version": "1.0.0-rc.0",
+  "version": "1.0.0-rc.1",
   "description": "Lightning 3 Renderer",
   "type": "module",
   "main": "./dist/exports/index.js",

package/src/core/CoreNode.ts

@@ -644,7 +644,7 @@ export interface CoreNodeAnimateProps extends NumberProps<CoreNodeProps> {
 export class CoreNode extends EventEmitter {
   readonly children: CoreNode[] = [];
   protected _id: number = getNewId();
-  readonly props: Required<CoreNodeProps>;
+  readonly props: CoreNodeProps;
 
   public updateType = UpdateType.All;
 
@@ -673,7 +673,6 @@ export class CoreNode extends EventEmitter {
   public calcZIndex = 0;
   public hasRTTupdates = false;
   public parentHasRenderTexture = false;
-  private _src = '';
 
   constructor(readonly stage: Stage, props: CoreNodeProps) {
     super();
@@ -682,19 +681,14 @@ export class CoreNode extends EventEmitter {
       ...props,
       parent: null,
       texture: null,
-      shader: stage.defShaderCtr,
-      src: '',
+      src: null,
       rtt: false,
-      data: props.data || {},
     };
 
     // Assign props to instance
     this.parent = props.parent;
-    this.shader = props.shader;
     this.texture = props.texture;
-    this.src = props.src || '';
-    // FIXME
-    // this.data = props.data;
+    this.src = props.src;
     this.rtt = props.rtt;
 
     this.updateScaleRotateTransform();
@@ -1062,7 +1056,7 @@ export class CoreNode extends EventEmitter {
       return false;
     }
 
-    if (this.props.shader === this.stage.defShaderCtr) {
+    if (this.props.shader !== this.stage.defShaderCtr) {
       return true;
     }
 
@@ -1312,12 +1306,19 @@ export class CoreNode extends EventEmitter {
     this.props.texture = null;
     this.props.shader = this.stage.defShaderCtr;
 
+    const children = [...this.children];
+    for (let i = 0; i < children.length; i++) {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      children[i]!.destroy();
+    }
+    // This very action will also remove the node from the parent's children array
+    this.parent = null;
+
     if (this.rtt) {
       this.stage.renderer.removeRTTNode(this);
     }
 
     this.removeAllListeners();
-    this.parent = null;
   }
 
   renderQuads(renderer: CoreRenderer): void {
@@ -1823,21 +1824,19 @@ export class CoreNode extends EventEmitter {
 
     this.props.shader = value;
 
-    if (value === this.stage.defShaderCtr) {
-      this.setUpdateType(UpdateType.IsRenderable);
-    }
+    this.setUpdateType(UpdateType.IsRenderable);
   }
 
-  get src(): string {
-    return this._src;
+  get src(): string | null {
+    return this.props.src;
   }
 
-  set src(imageUrl: string) {
-    if (this._src === imageUrl) {
+  set src(imageUrl: string | null) {
+    if (this.props.src === imageUrl) {
       return;
     }
 
-    this._src = imageUrl;
+    this.props.src = imageUrl;
 
     if (!imageUrl) {
       this.texture = null;

package/src/core/CoreShaderManager.ts

@@ -230,7 +230,7 @@ export class CoreShaderManager {
   }
 
   loadDynamicShader<
-    T extends DynamicEffects<[...{ name: string; type: keyof EffectMap }[]]>,
+    T extends DynamicEffects<[...{ name?: string; type: keyof EffectMap }[]]>,
   >(props: DynamicShaderProps): DynamicShaderController<T> {
     if (!this.renderer) {
       throw new Error(`Renderer is not been defined`);
@@ -270,7 +270,7 @@ export class CoreShaderManager {
   }
 
   private _createDynShaderCtr<
-    T extends DynamicEffects<[...{ name: string; type: keyof EffectMap }[]]>,
+    T extends DynamicEffects<[...{ name?: string; type: keyof EffectMap }[]]>,
   >(
     shader: InstanceType<ShaderMap['DynamicShader']>,
     props: ExtractProps<ShaderMap['DynamicShader']>,

package/src/core/Stage.ts

@@ -548,7 +548,7 @@ export class Stage {
       shader: props.shader ?? this.defShaderCtr,
       // Since setting the `src` will trigger a texture load, we need to set it after
       // we set the texture. Otherwise, problems happen.
-      src: props.src ?? '',
+      src: props.src ?? null,
       scale: props.scale ?? null,
       scaleX: props.scaleX ?? props.scale ?? 1,
       scaleY: props.scaleY ?? props.scale ?? 1,

package/src/core/animations/CoreAnimation.ts

@@ -45,7 +45,7 @@ export class CoreAnimation extends EventEmitter {
   private timingFunction: (t: number) => number | undefined;
 
   propValuesMap: PropValuesMap = {};
-  dynPropValuesMap: PropValuesMap = {};
+  dynPropValuesMap: PropValuesMap | undefined = undefined;
 
   constructor(
     private node: CoreNode,
@@ -76,16 +76,15 @@ export class CoreAnimation extends EventEmitter {
       } else {
         const shaderPropKeys = Object.keys(props.shaderProps!);
         const spLength = shaderPropKeys.length;
-        let j = 0;
-        for (; j < spLength; j++) {
+        this.dynPropValuesMap = {};
+        for (let j = 0; j < spLength; j++) {
           const effectName = shaderPropKeys[j]!;
           const effect = props.shaderProps![effectName]!;
           this.dynPropValuesMap[effectName] = {};
           const effectProps = Object.entries(effect);
           const eLength = effectProps.length;
 
-          let k = 0;
-          for (; k < eLength; k++) {
+          for (let k = 0; k < eLength; k++) {
             const [key, value] = effectProps[k]!;
             this.dynPropValuesMap[effectName]![key] = {
               start: node.shader.props[effectName][key],
@@ -145,16 +144,17 @@ export class CoreAnimation extends EventEmitter {
       );
     }
 
-    const dynEntries = Object.keys(this.dynPropValuesMap);
-    const dynEntriesL = dynEntries.length;
-    if (dynEntriesL > 0) {
-      let i = 0;
-      for (; i < dynEntriesL; i++) {
-        const key = dynEntries[i]!;
-        this.restoreValues(
-          this.node.shader.props[key],
-          this.dynPropValuesMap[key]!,
-        );
+    if (this.dynPropValuesMap !== undefined) {
+      const dynEntries = Object.keys(this.dynPropValuesMap);
+      const dynEntriesL = dynEntries.length;
+      if (dynEntriesL > 0) {
+        for (let i = 0; i < dynEntriesL; i++) {
+          const key = dynEntries[i]!;
+          this.restoreValues(
+            this.node.shader.props[key],
+            this.dynPropValuesMap[key]!,
+          );
+        }
       }
     }
   }
@@ -182,13 +182,14 @@ export class CoreAnimation extends EventEmitter {
       this.reverseValues(this.propValuesMap['shaderProps']);
     }
 
-    const dynEntries = Object.keys(this.dynPropValuesMap);
-    const dynEntriesL = dynEntries.length;
-    if (dynEntriesL > 0) {
-      let i = 0;
-      for (; i < dynEntriesL; i++) {
-        const key = dynEntries[i]!;
-        this.reverseValues(this.dynPropValuesMap[key]!);
+    if (this.dynPropValuesMap !== undefined) {
+      const dynEntries = Object.keys(this.dynPropValuesMap);
+      const dynEntriesL = dynEntries.length;
+      if (dynEntriesL > 0) {
+        for (let i = 0; i < dynEntriesL; i++) {
+          const key = dynEntries[i]!;
+          this.reverseValues(this.dynPropValuesMap[key]!);
+        }
       }
     }
 
@@ -309,17 +310,18 @@ export class CoreAnimation extends EventEmitter {
       );
     }
 
-    const dynEntries = Object.keys(this.dynPropValuesMap);
-    const dynEntriesL = dynEntries.length;
-    if (dynEntriesL > 0) {
-      let i = 0;
-      for (; i < dynEntriesL; i++) {
-        const key = dynEntries[i]!;
-        this.updateValues(
-          this.node.shader.props[key],
-          this.dynPropValuesMap[key]!,
-          easing,
-        );
+    if (this.dynPropValuesMap !== undefined) {
+      const dynEntries = Object.keys(this.dynPropValuesMap);
+      const dynEntriesL = dynEntries.length;
+      if (dynEntriesL > 0) {
+        for (let i = 0; i < dynEntriesL; i++) {
+          const key = dynEntries[i]!;
+          this.updateValues(
+            this.node.shader.props[key],
+            this.dynPropValuesMap[key]!,
+            easing,
+          );
+        }
       }
     }
 

package/src/core/renderers/webgl/shaders/DynamicShader.ts

@@ -16,7 +16,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { ExtractProps } from '../../../CoreTextureManager.js';
 import type { WebGlCoreRenderer } from '../WebGlCoreRenderer.js';
 import {
   WebGlCoreShader,
@@ -27,70 +26,14 @@ import type { UniformInfo } from '../internal/ShaderUtils.js';
 import type { WebGlCoreCtxTexture } from '../WebGlCoreCtxTexture.js';
 import {
   ShaderEffect,
+  type EffectDescUnion,
   type ShaderEffectUniform,
   type ShaderEffectValueMap,
+  type BaseEffectDesc,
 } from './effects/ShaderEffect.js';
 import type { EffectMap } from '../../../CoreShaderManager.js';
 import { assertTruthy } from '../../../../utils.js';
 
-export interface BaseEffectDesc {
-  name: string;
-  type: keyof EffectMap;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  props: Record<string, any>;
-}
-
-export interface EffectDesc<
-  T extends { name: string; type: keyof EffectMap } = {
-    name: string;
-    type: keyof EffectMap;
-  },
-> extends BaseEffectDesc {
-  name: T['name'];
-  type: T['type'];
-  props: ExtractProps<EffectMap[T['type']]>;
-}
-
-/**
- * Allows the `keyof EffectMap` to be mapped over and form an discriminated
- * union of all the EffectDescs structures individually.
- *
- * @remarks
- * When used like the following:
- * ```
- * MapEffectDescs<keyof EffectMap>[]
- * ```
- * The resultant type will be a discriminated union like so:
- * ```
- * (
- *   {
- *     name: 'effect1',
- *     type: 'radius',
- *     props?: {
- *       radius?: number | number[];
- *     }
- *   } |
- *   {
- *     name: 'effect2',
- *     type: 'border',
- *     props?: {
- *       width?: number;
- *       color?: number;
- *     }
- *   } |
- *   // ...
- * )[]
- * ```
- * Which means TypeScript will now base its type checking on the `type` field
- * and will know exactly what the `props` field should be based on the `type`
- * field.
- */
-type MapEffectDescs<T extends keyof EffectMap> = T extends keyof EffectMap
-  ? EffectDesc<{ type: T; name: string }>
-  : never;
-
-export type EffectDescUnion = MapEffectDescs<keyof EffectMap>;
-
 export interface DynamicShaderProps
   extends DimensionsShaderProp,
     AlphaShaderProp {

package/src/core/renderers/webgl/shaders/effects/ShaderEffect.ts

@@ -1,3 +1,5 @@
+import type { EffectMap } from '../../../../CoreShaderManager.js';
+import type { ExtractProps } from '../../../../CoreTextureManager.js';
 import type {
   AlphaShaderProp,
   DimensionsShaderProp,
@@ -7,6 +9,64 @@ import type {
   UniformMethodMap,
 } from '../../internal/ShaderUtils.js';
 
+export interface BaseEffectDesc {
+  name?: string;
+  type: keyof EffectMap;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  props: Record<string, any>;
+}
+
+export interface EffectDesc<
+  T extends { name?: string; type: keyof EffectMap } = {
+    name?: string;
+    type: keyof EffectMap;
+  },
+> extends BaseEffectDesc {
+  name?: T['name'];
+  type: T['type'];
+  props: ExtractProps<EffectMap[T['type']]>;
+}
+
+/**
+ * Allows the `keyof EffectMap` to be mapped over and form an discriminated
+ * union of all the EffectDescs structures individually.
+ *
+ * @remarks
+ * When used like the following:
+ * ```
+ * MapEffectDescs<keyof EffectMap>[]
+ * ```
+ * The resultant type will be a discriminated union like so:
+ * ```
+ * (
+ *   {
+ *     name: 'effect1',
+ *     type: 'radius',
+ *     props?: {
+ *       radius?: number | number[];
+ *     }
+ *   } |
+ *   {
+ *     name: 'effect2',
+ *     type: 'border',
+ *     props?: {
+ *       width?: number;
+ *       color?: number;
+ *     }
+ *   } |
+ *   // ...
+ * )[]
+ * ```
+ * Which means TypeScript will now base its type checking on the `type` field
+ * and will know exactly what the `props` field should be based on the `type`
+ * field.
+ */
+type MapEffectDescs<T extends keyof EffectMap> = T extends keyof EffectMap
+  ? EffectDesc<{ type: T; name: string }>
+  : never;
+
+export type EffectDescUnion = MapEffectDescs<keyof EffectMap>;
+
 export interface ShaderEffectUniform {
   value: number | number[] | boolean | string;
   type: string;

package/src/main-api/DynamicShaderController.ts

@@ -5,23 +5,27 @@ import type {
   ShaderMap,
 } from '../core/CoreShaderManager.js';
 import type { ExtractProps } from '../core/CoreTextureManager.js';
-import type { EffectDesc } from '../core/renderers/webgl/shaders/DynamicShader.js';
+import type { EffectDesc } from '../core/renderers/webgl/shaders/effects/ShaderEffect.js';
 import type { BaseShaderController } from './ShaderController.js';
 
+type OptionalName<T> = T extends string ? T : never;
+
 type MapEffectProps<
-  Effects extends [...{ name: string; type: keyof EffectMap }[]],
+  Effects extends [...{ name?: string; type: keyof EffectMap }[]],
 > = {
-  [K in Effects[number] as K['name']]: ExtractProps<EffectMap[K['type']]>;
+  [K in Effects[number] as OptionalName<K['name']>]: ExtractProps<
+    EffectMap[K['type']]
+  >;
 };
 
 export type DynamicEffects<
-  T extends [...{ name: string; type: keyof EffectMap }[]],
+  T extends [...{ name?: string; type: keyof EffectMap }[]],
 > = {
   [K in keyof T]: EffectDesc<T[K]>;
 };
 
 export class DynamicShaderController<
-  Effects extends [...{ name: string; type: keyof EffectMap }[]],
+  Effects extends [...{ name?: string; type: keyof EffectMap }[]],
 > implements BaseShaderController
 {
   private resolvedProps: ExtractProps<ShaderMap['DynamicShader']>;
@@ -47,6 +51,9 @@ export class DynamicShaderController<
         props: effectProps,
         type: effectType,
       } = effects[i]!;
+      if (effectName === undefined) {
+        continue;
+      }
       const definedEffectProps = {};
       const propEntries = Object.keys(effectProps);
       const propEntriesLength = propEntries.length;

package/src/main-api/INode.ts

@@ -57,8 +57,9 @@ export interface INode<SC extends BaseShaderController = BaseShaderController>
 /**
  * Properties used to animate() a Node
  */
-export interface INodeAnimateProps<SC extends BaseShaderController>
-  extends Omit<CoreNodeAnimateProps, 'shaderProps'> {
+export interface INodeAnimateProps<
+  SC extends BaseShaderController = BaseShaderController,
+> extends Omit<CoreNodeAnimateProps, 'shaderProps'> {
   shaderProps: Partial<SC['props']>;
 }
 

package/src/main-api/Renderer.ts

@@ -29,7 +29,7 @@ import { Inspector } from './Inspector.js';
 import { assertTruthy, isProductionEnvironment } from '../utils.js';
 import { Stage } from '../core/Stage.js';
 import { CoreNode, type CoreNodeProps } from '../core/CoreNode.js';
-import { CoreTextNode, type CoreTextNodeProps } from '../core/CoreTextNode.js';
+import { type CoreTextNodeProps } from '../core/CoreTextNode.js';
 import type {
   BaseShaderController,
   ShaderController,
@@ -42,7 +42,7 @@ import type {
 import type {
   EffectDesc,
   EffectDescUnion,
-} from '../core/renderers/webgl/shaders/DynamicShader.js';
+} from '../core/renderers/webgl/shaders/effects/ShaderEffect.js';
 import type { TextureMemoryManagerSettings } from '../core/TextureMemoryManager.js';
 
 /**
@@ -470,18 +470,61 @@ export class RendererMain extends EventEmitter {
     return this.stage.shManager.loadShader(shaderType, props);
   }
 
+  /**
+   * Create a new Dynamic Shader controller
+   *
+   * @remarks
+   * A Dynamic Shader is a shader that can be composed of an array of mulitple
+   * effects. Each effect can be animated or changed after creation (provided
+   * the effect is given a name).
+   *
+   * Example:
+   * ```ts
+   * renderer.createNode({
+   *   shader: renderer.createDynamicShader([
+   *     renderer.createEffect('radius', {
+   *       radius: 0
+   *     }, 'effect1'),
+   *     renderer.createEffect('border', {
+   *       color: 0xff00ffff,
+   *       width: 10,
+   *     }, 'effect2'),
+   *   ]),
+   * });
+   * ```
+   *
+   * @param effects
+   * @returns
+   */
   createDynamicShader<
-    T extends DynamicEffects<[...{ name: string; type: keyof EffectMap }[]]>,
+    T extends DynamicEffects<[...{ name?: string; type: keyof EffectMap }[]]>,
   >(effects: [...T]): DynamicShaderController<T> {
     return this.stage.shManager.loadDynamicShader({
       effects: effects as EffectDescUnion[],
     });
   }
 
-  createEffect<Name extends string, Type extends keyof EffectMap>(
-    name: Name,
+  /**
+   * Create an effect to be used in a Dynamic Shader
+   *
+   * @remark
+   * The {name} parameter is optional but required if you want to animate the effect
+   * or change the effect's properties after creation.
+   *
+   * See {@link createDynamicShader} for an example.
+   *
+   * @param type
+   * @param props
+   * @param name
+   * @returns
+   */
+  createEffect<
+    Type extends keyof EffectMap,
+    Name extends string | undefined = undefined,
+  >(
     type: Type,
     props: EffectDesc<{ name: Name; type: Type }>['props'],
+    name?: Name,
   ): EffectDesc<{ name: Name; type: Type }> {
     return {
       name,