@lightningtv/solid 0.0.1

package/dist/source/solidOpts.js

@@ -0,0 +1,61 @@
+import { assertTruthy } from '@lightningjs/renderer/utils';
+import { ElementNode, log } from '@lightningtv/core';
+export default {
+    createElement(name) {
+        return new ElementNode(name);
+    },
+    createTextNode(text) {
+        // A text node is just a string - not the <text> node
+        return { type: 2 /* NodeTypes.Text */, text, parent: undefined };
+    },
+    replaceText(node, value) {
+        log('Replace Text: ', node, value);
+        node.text = value;
+        const parent = node.parent;
+        assertTruthy(parent);
+        parent.text = parent.getText();
+    },
+    setProperty(node, name, value = true) {
+        node[name] = value;
+    },
+    insertNode(parent, node, anchor) {
+        log('INSERT: ', parent, node, anchor);
+        parent.children.insert(node, anchor);
+        node._queueDelete = false;
+        if (node instanceof ElementNode) {
+            parent.rendered && node.render();
+        }
+        else if (parent.isTextNode()) {
+            // TextNodes can be placed outside of <text> nodes when <Show> is used as placeholder
+            parent.text = parent.getText();
+        }
+    },
+    isTextNode(node) {
+        return node.isTextNode();
+    },
+    removeNode(parent, node) {
+        log('REMOVE: ', parent, node);
+        parent.children.remove(node);
+        node._queueDelete = true;
+        if (node instanceof ElementNode) {
+            // Solid replacesNodes to move them (via insert and remove),
+            // so we need to wait for the next microtask to destroy the node
+            // in the event it gets a new parent.
+            queueMicrotask(() => node.destroy());
+        }
+    },
+    getParentNode(node) {
+        return node.parent;
+    },
+    getFirstChild(node) {
+        return node.children[0];
+    },
+    getNextSibling(node) {
+        const children = node.parent.children || [];
+        const index = children.indexOf(node) + 1;
+        if (index < children.length) {
+            return children[index];
+        }
+        return undefined;
+    },
+};

package/dist/source/utils.js

@@ -0,0 +1,26 @@
+import { isInteger } from '@lightningtv/core';
+/**
+ * Converts a color string to a color number value.
+ */
+export 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
+ */
+export function deg2rad(deg) {
+    return (deg * Math.PI) / 180;
+}

package/dist/types/Text.d.ts

@@ -0,0 +1,3 @@
+import { type Component } from 'solid-js';
+import { type IntrinsicTextProps } from '@lightningtv/core';
+export declare const Text: Component<IntrinsicTextProps>;

package/dist/types/View.d.ts

@@ -0,0 +1,3 @@
+import type { Component } from 'solid-js';
+import type { IntrinsicNodeProps } from '@lightningtv/core';
+export declare const View: Component<IntrinsicNodeProps>;

package/dist/types/activeElement.d.ts

@@ -0,0 +1,2 @@
+import { type ElementNode } from '@lightningtv/core';
+export declare const activeElement: import("solid-js").Accessor<ElementNode>, setActiveElement: import("solid-js").Setter<ElementNode>;

package/dist/types/index.d.ts

@@ -0,0 +1,8 @@
+import './jsx-runtime.js';
+export { For, Show, Suspense, SuspenseList, Switch, Match, Index, ErrorBoundary, } from 'solid-js';
+export * from '@lightningtv/core';
+export * from './activeElement.js';
+export { View } from './View.jsx';
+export { Text } from './Text.jsx';
+export * from './utils.js';
+export * from './render.js';

package/dist/types/jsx-runtime.d.ts

@@ -0,0 +1,10 @@
+import type { IntrinsicNodeProps, IntrinsicTextProps } from '@lightningtv/core';
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements {
+            node: Partial<IntrinsicNodeProps>;
+            view: Partial<IntrinsicNodeProps>;
+            text: Partial<IntrinsicTextProps>;
+        }
+    }
+}

package/dist/types/render.d.ts

@@ -0,0 +1,21 @@
+import { type SolidNode } from '@lightningtv/core';
+import { type JSXElement, type ValidComponent } from 'solid-js';
+import type { RendererMainSettings } from '@lightningjs/renderer';
+export declare function startLightning(options?: Partial<RendererMainSettings>, rootId?: string | HTMLElement): Promise<any>;
+export declare const render: (code: () => JSXElement, node?: HTMLElement | string) => Promise<{
+    dispose: () => void;
+    rootNode: import("@lightningtv/core").ElementNode;
+    renderer: RendererMain;
+}>;
+export declare const renderSync: (code: () => JSXElement) => () => 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;
+/**
+ * renders an arbitrary custom or native component and passes the other props
+ * ```typescript
+ * <Dynamic component={multiline() ? 'textarea' : 'input'} value={value()} />
+ * ```
+ * @description https://www.solidjs.com/docs/latest/api#dynamic
+ */
+export declare function Dynamic<T>(props: T & {
+    component?: ValidComponent;
+}): JSXElement;

package/dist/types/solidOpts.d.ts

@@ -0,0 +1,17 @@
+import type { SolidNode, TextNode } from '@lightningtv/core';
+import { ElementNode } from '@lightningtv/core';
+import type { createRenderer } from 'solid-js/universal';
+export type SolidRendererOptions = Parameters<typeof createRenderer<SolidNode>>[0];
+declare const _default: {
+    createElement(name: string): ElementNode;
+    createTextNode(text: string): TextNode;
+    replaceText(node: TextNode, value: string): void;
+    setProperty<T>(node: ElementNode, name: string, value?: any): void;
+    insertNode(parent: ElementNode, node: SolidNode, anchor: SolidNode): void;
+    isTextNode(node: ElementNode): boolean;
+    removeNode(parent: ElementNode, node: SolidNode): void;
+    getParentNode(node: SolidNode): ElementNode | undefined;
+    getFirstChild(node: ElementNode): SolidNode | undefined;
+    getNextSibling(node: SolidNode): SolidNode | undefined;
+};
+export default _default;

package/dist/types/utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Converts a color string to a color number value.
+ */
+export declare function hexColor(color?: string | number): number;
+/**
+ * Converts degrees to radians
+ */
+export declare function deg2rad(deg: number): number;

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@lightningtv/solid",
+  "version": "0.0.1",
+  "description": "Lightning Renderer for Solid Universal",
+  "type": "module",
+  "source": "src/index.ts",
+  "main": "./dist/esm/index.js",
+  "browser": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "start": "npm run watch",
+    "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",
+    "prepare": "husky",
+    "prepack": "npm run build"
+  },
+  "keywords": [
+    "lightning",
+    "javascript",
+    "canvas",
+    "web",
+    "tv"
+  ],
+  "author": "Chris Lorenzo",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@lightningtv/core": "^0.0.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.5",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.4",
+    "prettier": "^3.2.5",
+    "rollup": "^4.18.0",
+    "rollup-preset-solid": "^2.0.1",
+    "solid-js": "^1.8.17",
+    "typescript": "^5.4.5"
+  },
+  "lint-staged": {
+    "*.ts": [
+      "prettier --write",
+      "eslint --fix"
+    ],
+    "*.{js,cjs,md}": "prettier --write"
+  },
+  "peerDependencies": {
+    "@lightningjs/renderer": "^0.9.1",
+    "solid-js": "*"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lightning-js/solid.git"
+  },
+  "files": [
+    "dist",
+    "src",
+    "jsx-runtime.d.ts",
+    "LICENSE",
+    "NOTICE",
+    "README.md"
+  ]
+}

package/src/Text.tsx

@@ -0,0 +1,6 @@
+import { type Component } from 'solid-js';
+import { type IntrinsicTextProps } from '@lightningtv/core';
+
+export const Text: Component<IntrinsicTextProps> = (props) => (
+  <text {...props}></text>
+);

package/src/View.tsx

@@ -0,0 +1,6 @@
+import type { Component } from 'solid-js';
+import type { IntrinsicNodeProps } from '@lightningtv/core';
+
+export const View: Component<IntrinsicNodeProps> = (props) => (
+  <node {...props}></node>
+);

package/src/activeElement.ts

@@ -0,0 +1,7 @@
+import { createSignal } from 'solid-js';
+import { Config, type ElementNode } from '@lightningtv/core';
+export const [activeElement, setActiveElement] = createSignal<
+  ElementNode | undefined
+>(undefined);
+
+Config.setActiveElement = setActiveElement;

package/src/index.ts

@@ -0,0 +1,17 @@
+import './jsx-runtime.js';
+export {
+  For,
+  Show,
+  Suspense,
+  SuspenseList,
+  Switch,
+  Match,
+  Index,
+  ErrorBoundary,
+} from 'solid-js';
+export * from '@lightningtv/core';
+export * from './activeElement.js';
+export { View } from './View.jsx';
+export { Text } from './Text.jsx';
+export * from './utils.js';
+export * from './render.js';

package/src/jsx-runtime.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-namespace */
+import type { IntrinsicNodeProps, IntrinsicTextProps } from '@lightningtv/core';
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements {
+      node: Partial<IntrinsicNodeProps>;
+      view: Partial<IntrinsicNodeProps>;
+      text: Partial<IntrinsicTextProps>;
+    }
+  }
+}

package/src/render.ts

@@ -0,0 +1,104 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import { createRenderer } from 'solid-js/universal';
+import {
+  Config,
+  startLightningRenderer,
+  type SolidNode,
+} from '@lightningtv/core';
+import nodeOpts from './solidOpts.js';
+import {
+  splitProps,
+  createMemo,
+  untrack,
+  type JSXElement,
+  type ValidComponent,
+} from 'solid-js';
+import type { RendererMain, RendererMainSettings } from '@lightningjs/renderer';
+
+const solidRenderer = createRenderer<SolidNode>(nodeOpts);
+
+let renderer: RendererMain;
+export async function startLightning(
+  options?: Partial<RendererMainSettings>,
+  rootId?: string | HTMLElement,
+) {
+  renderer = startLightningRenderer(
+    options || Config.rendererOptions,
+    rootId || 'app',
+  );
+  return await renderer.init();
+}
+
+export const render = async function (
+  code: () => JSXElement,
+  node?: HTMLElement | string,
+) {
+  const rootNode = nodeOpts.createElement('App');
+
+  await startLightning(undefined, node);
+  rootNode.lng = renderer.root!;
+  rootNode.rendered = true;
+  // @ts-expect-error - code is jsx element and not SolidElement yet
+  const dispose = solidRenderer.render(code, rootNode);
+  return {
+    dispose,
+    rootNode,
+    renderer,
+  };
+};
+
+// used for playground - must be sync so user must await startLightning
+export const renderSync = function (code: () => JSXElement) {
+  const rootNode = nodeOpts.createElement('App');
+  rootNode.lng = renderer.root!;
+  // @ts-expect-error - code is jsx element and not SolidElement yet
+  return solidRenderer.render(code, rootNode);
+};
+
+export const {
+  effect,
+  memo,
+  createComponent,
+  createElement,
+  createTextNode,
+  insertNode,
+  insert,
+  spread,
+  setProp,
+  mergeProps,
+  use,
+} = solidRenderer;
+
+/**
+ * renders an arbitrary custom or native component and passes the other props
+ * ```typescript
+ * <Dynamic component={multiline() ? 'textarea' : 'input'} value={value()} />
+ * ```
+ * @description https://www.solidjs.com/docs/latest/api#dynamic
+ */
+export function Dynamic<T>(
+  props: T & {
+    component?: ValidComponent;
+  },
+): JSXElement {
+  const [p, others] = splitProps(props, ['component']);
+
+  const cached = createMemo(() => p.component);
+
+  return createMemo(() => {
+    const component = cached();
+    switch (typeof component) {
+      case 'function':
+        return untrack(() => component(others));
+
+      case 'string': {
+        const el = createElement(component);
+        spread(el, others);
+        return el;
+      }
+
+      default:
+        break;
+    }
+  }) as unknown as JSXElement;
+}

package/src/solidOpts.ts

@@ -0,0 +1,69 @@
+import { assertTruthy } from '@lightningjs/renderer/utils';
+import type { SolidNode, TextNode } from '@lightningtv/core';
+import { ElementNode, NodeTypes, log } from '@lightningtv/core';
+import type { createRenderer } from 'solid-js/universal';
+
+export type SolidRendererOptions = Parameters<
+  typeof createRenderer<SolidNode>
+>[0];
+
+export default {
+  createElement(name: string): ElementNode {
+    return new ElementNode(name);
+  },
+  createTextNode(text: string): TextNode {
+    // A text node is just a string - not the <text> node
+    return { type: NodeTypes.Text, text, parent: undefined };
+  },
+  replaceText(node: TextNode, value: string): void {
+    log('Replace Text: ', node, value);
+    node.text = value;
+    const parent = node.parent;
+    assertTruthy(parent);
+    parent.text = parent.getText();
+  },
+  setProperty(node: ElementNode, name: string, value: any = true): void {
+    node[name] = value;
+  },
+  insertNode(parent: ElementNode, node: SolidNode, anchor: SolidNode): void {
+    log('INSERT: ', parent, node, anchor);
+
+    parent.children.insert(node, anchor);
+    node._queueDelete = false;
+
+    if (node instanceof ElementNode) {
+      parent.rendered && node.render();
+    } else if (parent.isTextNode()) {
+      // TextNodes can be placed outside of <text> nodes when <Show> is used as placeholder
+      parent.text = parent.getText();
+    }
+  },
+  isTextNode(node: ElementNode): boolean {
+    return node.isTextNode();
+  },
+  removeNode(parent: ElementNode, node: SolidNode): void {
+    log('REMOVE: ', parent, node);
+    parent.children.remove(node);
+    node._queueDelete = true;
+    if (node instanceof ElementNode) {
+      // Solid replacesNodes to move them (via insert and remove),
+      // so we need to wait for the next microtask to destroy the node
+      // in the event it gets a new parent.
+      queueMicrotask(() => node.destroy());
+    }
+  },
+  getParentNode(node: SolidNode): ElementNode | undefined {
+    return node.parent;
+  },
+  getFirstChild(node: ElementNode): SolidNode | undefined {
+    return node.children[0];
+  },
+  getNextSibling(node: SolidNode): SolidNode | undefined {
+    const children = node.parent!.children || [];
+    const index = children.indexOf(node) + 1;
+    if (index < children.length) {
+      return children[index];
+    }
+    return undefined;
+  },
+} satisfies SolidRendererOptions;

package/src/utils.ts

@@ -0,0 +1,33 @@
+import { isInteger } from '@lightningtv/core';
+
+/**
+ * Converts a color string to a color number value.
+ */
+export function hexColor(color: string | number = ''): number {
+  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
+ */
+export function deg2rad(deg: number) {
+  return (deg * Math.PI) / 180;
+}