@lightningjs/solid - npm Package Compare versions

Comparing version 0.6.10 to 0.7.0

dist/esm/index.js

@@ -287,17 +287,2 @@ import { createSignal, createEffect, mergeProps as mergeProps$1, createRoot, createRenderEffect, createMemo, createComponent as createComponent$1, untrack } from 'solid-js';
 
-function normalizeColor(color = '') {
-  if (isInteger(color)) {
-    return color;
-  }
-  if (typeof color === 'string') {
-    // Renderer expects RGBA values
-    if (color.startsWith('#')) {
-      return color.replace('#', '0x') + (color.length === 7 ? 'ff' : '');
-    }
-    if (color.startsWith('0x')) {
-      return color;
-    }
-    return '0x' + (color.length === 6 ? color + 'ff' : color);
-  }
-}
 const isDev = import.meta?.env?.MODE === 'development';
@@ -485,5 +470,2 @@ function log(msg, node, ...args) {
   for (const [type, props] of Object.entries(styleEffects)) {
-    if (props.color) {
-      props.color = normalizeColor(props.color);
-    }
     effects.push({
@@ -500,8 +482,8 @@ type,
   return {
-    set(props) {
+    set(value) {
       // Format: width || { width, color }
-      if (isNumber(props)) {
-        props = {
-          width: props,
-          color: '#000000'
+      if (isNumber(value)) {
+        value = {
+          width: value,
+          color: 0x000000ff
         };
@@ -512,6 +494,6 @@ }
         ...{
-          [`border${direction}`]: props
+          [`border${direction}`]: value
         }
       };
-      this[`_border${direction}`] = props;
+      this[`_border${direction}`] = value;
     },
@@ -523,4 +505,3 @@ get() {
 }
-const LightningRendererNumberProps = ['alpha', 'height', 'fontSize', 'lineHeight', 'mount', 'mountX', 'mountY', 'pivot', 'pivotX', 'pivotY', 'rotation', 'scale', 'width', 'worldX', 'worldY', 'x', 'y', 'zIndex', 'zIndexLocked'];
-const LightningRendererColorProps = ['color', 'colorTop', 'colorRight', 'colorLeft', 'colorBottom', 'colorTl', 'colorTr', 'colorBl', 'colorBr'];
+const LightningRendererNumberProps = ['alpha', 'color', 'colorTop', 'colorRight', 'colorLeft', 'colorBottom', 'colorTl', 'colorTr', 'colorBl', 'colorBr', 'height', 'fontSize', 'lineHeight', 'mount', 'mountX', 'mountY', 'pivot', 'pivotX', 'pivotY', 'rotation', 'scale', 'width', 'worldX', 'worldY', 'x', 'y', 'zIndex', 'zIndexLocked'];
 const LightningRendererNonAnimatingProps = ['clipping', 'contain', 'fontFamily', 'src', 'text', 'textAlign', 'texture'];
@@ -564,18 +545,2 @@
     }
-    for (const key of LightningRendererColorProps) {
-      Object.defineProperty(this, key, {
-        get() {
-          return this[`_${key}`] || this.lng && this.lng[key];
-        },
-        set(v) {
-          this[`_${key}`] = v;
-          if (isArray(v)) {
-            v[0] = normalizeColor(v[0]);
-          } else {
-            v = normalizeColor(v);
-          }
-          this._sendToLightningAnimatable(key, v);
-        }
-      });
-    }
     for (const key of LightningRendererNonAnimatingProps) {
@@ -621,5 +586,2 @@ Object.defineProperty(this, key, {
           this._linearGradient = props;
-          if (props.colors) {
-            props.colors = props.colors.map(c => normalizeColor(c));
-          }
           this.effects = {
@@ -1298,3 +1260,2 @@ ...(this.effects || {}),
   setTimeout(function () {
-    // @ts-expect-error Remove when Renderer publicizes `canvas`
     updateRootStyleFromCanvas(renderer.canvas);
@@ -1309,3 +1270,3 @@ }, 1000);
       dom.id = 'linspector';
-      // @ts-expect-error Remove when Renderer publicizes `canvas`
+      assertTruthy(renderer.canvas.parentNode);
       renderer.canvas.parentNode.appendChild(dom);
@@ -1405,4 +1366,7 @@ } else {
 const solidRenderer = createRenderer(loadInspector ? universalInspector : universalLightning);
+
+// TODO: This is a hack to get the `render()` function to work as it is used now in the demo app
+// There's gotta be a better way to fix it
+const render = solidRenderer.render;
 const {
-  render,
   effect,
@@ -1421,3 +1385,48 @@ memo,
 
-export { Canvas, config as Config, ElementNode, Text, View, activeElement, createComponent, createElement, createShader, createTextNode, effect, insert, insertNode, memo, mergeProps, render, renderer, setActiveElement, setProp, spread, startLightningRenderer, use };
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+/**
+ * Converts a color string to a color number value.
+ */
+function hexColor(color = '') {
+  if (isInteger(color)) {
+    return color;
+  }
+  if (typeof color === 'string') {
+    // Renderer expects RGBA values
+    if (color.startsWith('#')) {
+      return Number(color.replace('#', '0x') + (color.length === 7 ? 'ff' : ''));
+    }
+    if (color.startsWith('0x')) {
+      return Number(color);
+    }
+    return Number('0x' + (color.length === 6 ? color + 'ff' : color));
+  }
+  return 0x00000000;
+}
+
+/**
+ * Converts degrees to radians
+ */
+function deg2rad(deg) {
+  return deg * Math.PI / 180;
+}
+
+export { Canvas, config as Config, ElementNode, Text, View, activeElement, createComponent, createElement, createShader, createTextNode, deg2rad, effect, hexColor, insert, insertNode, memo, mergeProps, render, renderer, setActiveElement, setProp, spread, startLightningRenderer, use };
 //# sourceMappingURL=index.js.map

dist/source/core/node/index.js

@@ -21,3 +21,3 @@ /*
 import calculateFlex from '../flex.js';
-import { normalizeColor, log, isArray, isNumber, isFunc, keyExists, } from '../utils.js';
+import { log, isArray, isNumber, isFunc, keyExists } from '../utils.js';
 import { config } from '../../config.js';
@@ -30,5 +30,2 @@ import { setActiveElement } from '../activeElement.js';
     for (const [type, props] of Object.entries(styleEffects)) {
-        if (props.color) {
-            props.color = normalizeColor(props.color);
-        }
         effects.push({ type, props });
@@ -40,12 +37,12 @@ }
     return {
-        set(props) {
+        set(value) {
             // Format: width || { width, color }
-            if (isNumber(props)) {
-                props = { width: props, color: '#000000' };
+            if (isNumber(value)) {
+                value = { width: value, color: 0x000000ff };
             }
             this.effects = {
                 ...(this.effects || {}),
-                ...{ [`border${direction}`]: props },
+                ...{ [`border${direction}`]: value },
             };
-            this[`_border${direction}`] = props;
+            this[`_border${direction}`] = value;
         },
@@ -59,2 +56,11 @@ get() {
     'alpha',
+    'color',
+    'colorTop',
+    'colorRight',
+    'colorLeft',
+    'colorBottom',
+    'colorTl',
+    'colorTr',
+    'colorBl',
+    'colorBr',
     'height',
@@ -79,13 +85,2 @@ 'fontSize',
 ];
-const LightningRendererColorProps = [
-    'color',
-    'colorTop',
-    'colorRight',
-    'colorLeft',
-    'colorBottom',
-    'colorTl',
-    'colorTr',
-    'colorBl',
-    'colorBr',
-];
 const LightningRendererNonAnimatingProps = [
@@ -118,2 +113,3 @@ 'clipping',
     _color;
+    _borderRadius;
     _border;
@@ -150,19 +146,2 @@ _borderLeft;
         }
-        for (const key of LightningRendererColorProps) {
-            Object.defineProperty(this, key, {
-                get() {
-                    return this[`_${key}`] || (this.lng && this.lng[key]);
-                },
-                set(v) {
-                    this[`_${key}`] = v;
-                    if (isArray(v)) {
-                        v[0] = normalizeColor(v[0]);
-                    }
-                    else {
-                        v = normalizeColor(v);
-                    }
-                    this._sendToLightningAnimatable(key, v);
-                },
-            });
-        }
         for (const key of LightningRendererNonAnimatingProps) {
@@ -203,5 +182,2 @@ Object.defineProperty(this, key, {
                     this._linearGradient = props;
-                    if (props.colors) {
-                        props.colors = props.colors.map((c) => normalizeColor(c));
-                    }
                     this.effects = {
@@ -208,0 +184,0 @@ ...(this.effects || {}),

dist/source/core/render.js

@@ -26,2 +26,5 @@ /* eslint-disable @typescript-eslint/unbound-method */
 const solidRenderer = createRenderer(loadInspector ? universalInspector : universalLightning);
-export const { render, effect, memo, createComponent, createElement, createTextNode, insertNode, insert, spread, setProp, mergeProps, use, } = solidRenderer;
+// TODO: This is a hack to get the `render()` function to work as it is used now in the demo app
+// There's gotta be a better way to fix it
+export const render = solidRenderer.render;
+export const { effect, memo, createComponent, createElement, createTextNode, insertNode, insert, spread, setProp, mergeProps, use, } = solidRenderer;

dist/source/core/universal/dom-inspector.js

@@ -19,2 +19,3 @@ /*
 import { renderer } from '../renderer/index.js';
+import { assertTruthy } from '@lightningjs/renderer/utils';
 const injectCSS = (css) => {
@@ -56,3 +57,2 @@ const el = document.createElement('style');
     setTimeout(function () {
-        // @ts-expect-error Remove when Renderer publicizes `canvas`
         updateRootStyleFromCanvas(renderer.canvas);
@@ -67,3 +67,3 @@ }, 1000);
             dom.id = 'linspector';
-            // @ts-expect-error Remove when Renderer publicizes `canvas`
+            assertTruthy(renderer.canvas.parentNode);
             renderer.canvas.parentNode.appendChild(dom);
@@ -70,0 +70,0 @@ }

dist/source/core/utils.js

@@ -19,17 +19,2 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
 import { config } from '../config.js';
-export function normalizeColor(color = '') {
-    if (isInteger(color)) {
-        return color;
-    }
-    if (typeof color === 'string') {
-        // Renderer expects RGBA values
-        if (color.startsWith('#')) {
-            return color.replace('#', '0x') + (color.length === 7 ? 'ff' : '');
-        }
-        if (color.startsWith('0x')) {
-            return color;
-        }
-        return '0x' + (color.length === 6 ? color + 'ff' : color);
-    }
-}
 const isDev = import.meta?.env?.MODE === 'development';
@@ -36,0 +21,0 @@ export function log(msg, node, ...args) {

dist/source/index.js

@@ -26,1 +26,2 @@ /*
 export * from './intrinsicTypes.js';
+export * from './utils.js';

dist/source/intrinsicTypes.js

@@ -0,1 +1,17 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
 export {};

dist/source/jsx-runtime.js

@@ -0,1 +1,17 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
 export {};

dist/types/components/Canvas.d.ts

@@ -7,5 +7,5 @@ import { type SolidRendererOptions } from '../core/renderer/index.js';
 export interface CanvasProps {
-    options?: SolidRendererOptions;
+    options?: Partial<SolidRendererOptions>;
     children?: any;
 }
 export declare const Canvas: (props: CanvasProps) => import("solid-js").JSX.Element;

dist/types/config.d.ts

@@ -0,13 +1,9 @@
+import type { AnimationSettings } from '@lightningjs/renderer';
+import type { IntrinsicTextNodeStyleProps } from './intrinsicTypes.js';
 interface Config {
     debug: boolean;
-    animationSettings: {
-        duration: number;
-        easing: string;
-    };
-    fontSettings: {
-        fontFamily: string;
-        fontSize: number;
-    };
+    animationSettings: Partial<AnimationSettings>;
+    fontSettings: Partial<IntrinsicTextNodeStyleProps>;
 }
 export declare const config: Config;
 export {};

dist/types/core/node/index.d.ts

@@ -5,3 +5,3 @@ import { createShader } from '../renderer/index.js';
 import States from './states.js';
-import type { INode, INodeAnimatableProps, ShaderRef, Dimensions } from '@lightningjs/renderer';
+import type { INode, INodeAnimatableProps, ShaderRef, Dimensions, AnimationSettings } from '@lightningjs/renderer';
 export interface TextNode {
@@ -46,2 +46,3 @@ name: string;
     private _color?;
+    private _borderRadius?;
     private _border?;
@@ -67,3 +68,3 @@ private _borderLeft?;
     set shader(v: Parameters<typeof createShader> | ShaderRef | undefined);
-    _sendToLightningAnimatable(name: string, value: [value: number | string, settings: any] | number | string): any;
+    _sendToLightningAnimatable(name: string, value: [value: number | string, settings: AnimationSettings] | number | string): any;
     _sendToLightning(name: string, value: unknown): void;
@@ -70,0 +71,0 @@ createAnimation(props: Partial<INodeAnimatableProps>, animationSettings?: any): any;

dist/types/core/render.d.ts

 import type { SolidNode } from './node/index.js';
-export declare const render: (code: () => SolidNode, node: SolidNode) => () => void, effect: <T>(fn: (prev?: T) => T, init?: T) => void, memo: <T>(fn: () => T, equal: boolean) => () => T, createComponent: <T>(Comp: (props: T) => SolidNode, props: T) => SolidNode, createElement: (tag: string) => SolidNode, createTextNode: (value: string) => SolidNode, insertNode: (parent: SolidNode, node: SolidNode, anchor?: SolidNode) => void, insert: <T>(parent: any, accessor: T | (() => T), marker?: any) => SolidNode, spread: <T>(node: any, accessor: T | (() => T), skipChildren?: Boolean) => void, setProp: <T>(node: SolidNode, name: string, value: T, prev?: T) => T, mergeProps: (...sources: unknown[]) => unknown, use: <A, T>(fn: (element: SolidNode, arg: A) => T, element: SolidNode, arg: A) => T;
+import type { JSX } from 'solid-js';
+export declare const render: (code: () => JSX.Element, node?: SolidNode) => () => void;
+export declare const effect: <T>(fn: (prev?: T) => T, init?: T) => void, memo: <T>(fn: () => T, equal: boolean) => () => T, createComponent: <T>(Comp: (props: T) => SolidNode, props: T) => SolidNode, createElement: (tag: string) => SolidNode, createTextNode: (value: string) => SolidNode, insertNode: (parent: SolidNode, node: SolidNode, anchor?: SolidNode) => void, insert: <T>(parent: any, accessor: T | (() => T), marker?: any) => SolidNode, spread: <T>(node: any, accessor: T | (() => T), skipChildren?: Boolean) => void, setProp: <T>(node: SolidNode, name: string, value: T, prev?: T) => T, mergeProps: (...sources: unknown[]) => unknown, use: <A, T>(fn: (element: SolidNode, arg: A) => T, element: SolidNode, arg: A) => T;

dist/types/core/utils.d.ts

 import type { SolidNode } from './node/index.js';
-export declare function normalizeColor(color?: string | number): string | number;
 export declare function log(msg: string, node: SolidNode, ...args: any[]): void;
@@ -4,0 +3,0 @@ export declare function isFunc(item: unknown): item is (...args: unknown[]) => unknown;

dist/types/index.d.ts

@@ -10,1 +10,2 @@ import './jsx-runtime.js';
 export * from './intrinsicTypes.js';
+export * from './utils.js';

dist/types/intrinsicTypes.d.ts

 import { type Dimensions, type INode, type INodeWritableProps, type ITextNodeWritableProps } from '@lightningjs/renderer';
 import { type ElementNode } from './core/node/index.js';
+export interface BorderStyleObject {
+    width: number;
+    color: number;
+}
+export type BorderStyle = number | BorderStyleObject;
 export interface IntrinsicCommonProps {
@@ -21,8 +26,18 @@ ref?: any;
     selected?: number | null;
+    borderRadius?: number;
+    border?: BorderStyle;
+    borderLeft?: BorderStyle;
+    borderRight?: BorderStyle;
+    borderTop?: BorderStyle;
+    borderBottom?: BorderStyle;
 }
-export interface IntrinsicTextProps extends Partial<Omit<ITextNodeWritableProps, 'parent' | 'shader'>>, IntrinsicCommonProps {
-    style?: Partial<Omit<ITextNodeWritableProps, 'parent' | 'shader'>>;
+export interface IntrinsicNodeStyleProps extends Partial<Omit<INodeWritableProps, 'parent' | 'shader'>>, IntrinsicCommonProps {
 }
-export interface IntrinsicNodeProps extends Partial<Omit<INodeWritableProps, 'parent' | 'shader'>>, IntrinsicCommonProps {
-    style?: Partial<Omit<INodeWritableProps, 'parent' | 'shader'>>;
+export interface IntrinsicTextNodeStyleProps extends Partial<Omit<ITextNodeWritableProps, 'parent' | 'shader'>>, IntrinsicCommonProps {
 }
+export interface IntrinsicNodeProps extends IntrinsicNodeStyleProps {
+    style?: IntrinsicNodeStyleProps;
+}
+export interface IntrinsicTextProps extends IntrinsicTextNodeStyleProps {
+    style?: IntrinsicTextNodeStyleProps;
+}

package.json

 {
   "name": "@lightningjs/solid",
-  "version": "0.6.10",
+  "version": "0.7.0",
   "description": "Lightning renderer for solid universal",
@@ -19,2 +19,19 @@ "type": "module",
   "sideEffects": false,
+  "scripts": {
+    "start": "npm run dev",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "npm run lint:prettier && npm run lint:eslint",
+    "lint:fix": "npm run lint:fix:prettier && npm run lint:fix:eslint",
+    "lint:prettier": "prettier --check \"**/*.{ts,js,cjs,md}\"",
+    "lint:fix:prettier": "prettier --write \"**/*.{ts,js,cjs,md}\"",
+    "lint:eslint": "eslint .",
+    "lint:fix:eslint": "eslint --fix .",
+    "build": "npm run tsc && rollup -c",
+    "tsc": "tsc",
+    "watch": "tsc -w",
+    "dev": "concurrently -c \"auto\" \"npm:watch\" \"npm:vite\"",
+    "vite": "vite --open \"/test/index.html\" --host",
+    "prepare": "husky install",
+    "prepack": "npm run build"
+  },
   "keywords": [
@@ -52,4 +69,4 @@ "lightning",
   "dependencies": {
-    "@lightningjs/solid": "file:./",
-    "@lightningjs/renderer": "^0.3.6"
+    "@lightningjs/renderer": "^0.4.0",
+    "@lightningjs/solid": "file:./"
   },
@@ -70,18 +87,3 @@ "peerDependencies": {
     "README.md"
-  ],
-  "scripts": {
-    "start": "npm run dev",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "npm run lint:prettier && npm run lint:eslint",
-    "lint:fix": "npm run lint:fix:prettier && npm run lint:fix:eslint",
-    "lint:prettier": "prettier --check \"**/*.{ts,js,cjs,md}\"",
-    "lint:fix:prettier": "prettier --write \"**/*.{ts,js,cjs,md}\"",
-    "lint:eslint": "eslint .",
-    "lint:fix:eslint": "eslint --fix .",
-    "build": "rollup -c",
-    "tsc": "tsc",
-    "watch": "tsc -w",
-    "dev": "concurrently -c \"auto\" \"npm:watch\" \"npm:vite\"",
-    "vite": "vite --open \"/test/index.html\" --host"
-  }
-}
+  ]
+}

src/config.ts

@@ -20,12 +20,9 @@ /*
 
+import type { AnimationSettings } from '@lightningjs/renderer';
+import type { IntrinsicTextNodeStyleProps } from './intrinsicTypes.js';
+
 interface Config {
   debug: boolean;
-  animationSettings: {
-    duration: number;
-    easing: string;
-  };
-  fontSettings: {
-    fontFamily: string;
-    fontSize: number;
-  };
+  animationSettings: Partial<AnimationSettings>;
+  fontSettings: Partial<IntrinsicTextNodeStyleProps>;
 }
@@ -32,0 +29,0 @@

src/core/node/index.ts

@@ -19,14 +19,10 @@ /*
 import { renderer, createShader } from '../renderer/index.js';
-import { type IntrinsicTextProps } from '../../index.js';
+import {
+  type BorderStyleObject,
+  type IntrinsicTextProps,
+} from '../../index.js';
 import Children from './children.js';
 import States from './states.js';
 import calculateFlex from '../flex.js';
-import {
-  normalizeColor,
-  log,
-  isArray,
-  isNumber,
-  isFunc,
-  keyExists,
-} from '../utils.js';
+import { log, isArray, isNumber, isFunc, keyExists } from '../utils.js';
 import { config } from '../../config.js';
@@ -40,2 +36,3 @@ import { setActiveElement } from '../activeElement.js';
   Dimensions,
+  AnimationSettings,
 } from '@lightningjs/renderer';
@@ -52,5 +49,2 @@ import { assertTruthy } from '@lightningjs/renderer/utils';
   )) {
-    if (props.color) {
-      props.color = normalizeColor(props.color);
-    }
     effects.push({ type, props });
@@ -65,12 +59,12 @@ }
   return {
-    set(this: ElementNode, props: any) {
+    set(this: ElementNode, value: number | { width: number; color: number }) {
       // Format: width || { width, color }
-      if (isNumber(props)) {
-        props = { width: props, color: '#000000' };
+      if (isNumber(value)) {
+        value = { width: value, color: 0x000000ff };
       }
       this.effects = {
         ...(this.effects || {}),
-        ...{ [`border${direction}`]: props },
+        ...{ [`border${direction}`]: value },
       };
-      this[`_border${direction}`] = props;
+      this[`_border${direction}`] = value;
     },
@@ -85,2 +79,11 @@ get(this: ElementNode) {
   'alpha',
+  'color',
+  'colorTop',
+  'colorRight',
+  'colorLeft',
+  'colorBottom',
+  'colorTl',
+  'colorTr',
+  'colorBl',
+  'colorBr',
   'height',
@@ -106,14 +109,2 @@ 'fontSize',
 
-const LightningRendererColorProps = [
-  'color',
-  'colorTop',
-  'colorRight',
-  'colorLeft',
-  'colorBottom',
-  'colorTl',
-  'colorTr',
-  'colorBl',
-  'colorBr',
-];
-
 const LightningRendererNonAnimatingProps = [
@@ -173,7 +164,8 @@ 'clipping',
   private _color?: number;
-  private _border?: number;
-  private _borderLeft?: number;
-  private _borderRight?: number;
-  private _borderTop?: number;
-  private _borderBottom?: number;
+  private _borderRadius?: number;
+  private _border?: BorderStyleObject;
+  private _borderLeft?: BorderStyleObject;
+  private _borderRight?: BorderStyleObject;
+  private _borderTop?: BorderStyleObject;
+  private _borderBottom?: BorderStyleObject;
   public _animate?: boolean; // Public but uses _ prefix
@@ -201,3 +193,3 @@ public _autosized?: boolean; // Public but uses _ prefix
         },
-        set(v) {
+        set(v: number) {
           this[`_${key}`] = v;
@@ -209,19 +201,2 @@ this._sendToLightningAnimatable(key, v);
 
-    for (const key of LightningRendererColorProps) {
-      Object.defineProperty(this, key, {
-        get() {
-          return this[`_${key}`] || (this.lng && this.lng[key]);
-        },
-        set(v) {
-          this[`_${key}`] = v;
-          if (isArray(v)) {
-            v[0] = normalizeColor(v[0]);
-          } else {
-            v = normalizeColor(v);
-          }
-          this._sendToLightningAnimatable(key, v);
-        },
-      });
-    }
-
     for (const key of LightningRendererNonAnimatingProps) {
@@ -242,3 +217,3 @@ Object.defineProperty(this, key, {
       borderRadius: {
-        set(radius) {
+        set(this: ElementNode, radius) {
           this._borderRadius = radius;
@@ -250,3 +225,3 @@ this.effects = {
         },
-        get() {
+        get(this: ElementNode) {
           return this._borderRadius;
@@ -266,7 +241,2 @@ },
           this._linearGradient = props;
-          if (props.colors) {
-            props.colors = props.colors.map((c: string | number) =>
-              normalizeColor(c),
-            );
-          }
           this.effects = {
@@ -319,3 +289,6 @@ ...(this.effects || {}),
     name: string,
-    value: [value: number | string, settings: any] | number | string,
+    value:
+      | [value: number | string, settings: AnimationSettings]
+      | number
+      | string,
   ) {
@@ -322,0 +295,0 @@ if (this.rendered && this.lng) {

src/core/render.ts

@@ -25,2 +25,3 @@ /* eslint-disable @typescript-eslint/unbound-method */
 import type { SolidNode } from './node/index.js';
+import type { JSX } from 'solid-js';
 
@@ -34,4 +35,11 @@ const loadInspector = import.meta?.env?.MODE === 'development';
 );
+
+// TODO: This is a hack to get the `render()` function to work as it is used now in the demo app
+// There's gotta be a better way to fix it
+export const render = solidRenderer.render as unknown as (
+  code: () => JSX.Element,
+  node?: SolidNode,
+) => () => void;
+
 export const {
-  render,
   effect,
@@ -38,0 +46,0 @@ memo,

src/core/universal/dom-inspector.ts

@@ -21,2 +21,3 @@ /*
 import type { ElementNode, SolidNode, TextNode } from '../node/index.js';
+import { assertTruthy } from '@lightningjs/renderer/utils';
 
@@ -62,3 +63,2 @@ const injectCSS = (css: string) => {
   setTimeout(function () {
-    // @ts-expect-error Remove when Renderer publicizes `canvas`
     updateRootStyleFromCanvas(renderer.canvas);
@@ -75,3 +75,3 @@ }, 1000);
       dom.id = 'linspector';
-      // @ts-expect-error Remove when Renderer publicizes `canvas`
+      assertTruthy(renderer.canvas.parentNode);
       renderer.canvas.parentNode.appendChild(dom);
@@ -78,0 +78,0 @@ } else {

src/core/utils.ts

@@ -22,19 +22,2 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
 
-export function normalizeColor(color: string | number = '') {
-  if (isInteger(color)) {
-    return color;
-  }
-
-  if (typeof color === 'string') {
-    // Renderer expects RGBA values
-    if (color.startsWith('#')) {
-      return color.replace('#', '0x') + (color.length === 7 ? 'ff' : '');
-    }
-
-    if (color.startsWith('0x')) {
-      return color;
-    }
-    return '0x' + (color.length === 6 ? color + 'ff' : color);
-  }
-}
 const isDev = import.meta?.env?.MODE === 'development';
@@ -41,0 +24,0 @@ export function log(msg: string, node: SolidNode, ...args: any[]) {

src/index.ts

@@ -35,1 +35,2 @@ /*
 export * from './intrinsicTypes.js';
+export * from './utils.js';

src/intrinsicTypes.ts

@@ -0,2 +1,20 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import {
+  type AnimationSettings,
   type Dimensions,
@@ -9,2 +27,9 @@ type INode,
 
+export interface BorderStyleObject {
+  width: number;
+  color: number;
+}
+
+export type BorderStyle = number | BorderStyleObject;
+
 export interface IntrinsicCommonProps {
@@ -33,14 +58,32 @@ ref?: any;
   selected?: number | null;
+  borderRadius?: number;
+  border?: BorderStyle;
+  borderLeft?: BorderStyle;
+  borderRight?: BorderStyle;
+  borderTop?: BorderStyle;
+  borderBottom?: BorderStyle;
 }
 
-export interface IntrinsicTextProps
+// TODO: Add this concept back in and come up with a way to properly type it so it works
+// internally and externally.
+//
+// Type that transforms all number typed properties to a tuple
+// type TransformAnimatableNumberProps<T> = {
+//   [K in keyof T]: number extends T[K] ? (number | [value: number, settings: AnimationSettings]) : T[K];
+// };
+
+export interface IntrinsicNodeStyleProps
+  extends Partial<Omit<INodeWritableProps, 'parent' | 'shader'>>,
+    IntrinsicCommonProps {}
+
+export interface IntrinsicTextNodeStyleProps
   extends Partial<Omit<ITextNodeWritableProps, 'parent' | 'shader'>>,
-    IntrinsicCommonProps {
-  style?: Partial<Omit<ITextNodeWritableProps, 'parent' | 'shader'>>;
+    IntrinsicCommonProps {}
+
+export interface IntrinsicNodeProps extends IntrinsicNodeStyleProps {
+  style?: IntrinsicNodeStyleProps;
 }
 
-export interface IntrinsicNodeProps
-  extends Partial<Omit<INodeWritableProps, 'parent' | 'shader'>>,
-    IntrinsicCommonProps {
-  style?: Partial<Omit<INodeWritableProps, 'parent' | 'shader'>>;
+export interface IntrinsicTextProps extends IntrinsicTextNodeStyleProps {
+  style?: IntrinsicTextNodeStyleProps;
 }

src/jsx-runtime.ts

@@ -0,1 +1,18 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -2,0 +19,0 @@ import {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

274854

increased by2.19%

Number of package files

65

increased by4.84%

Lines of code

4355

increased by3%

Dependency changes

• + Added@lightningjs/renderer@0.4.2(transitive)

• - Removed@lightningjs/renderer@0.3.6(transitive)

• Updated@lightningjs/renderer@^0.4.0