@lightningjs/solid - npm Package Compare versions

Comparing version 0.12.11 to 0.12.12

dist/esm/index.js

@@ -1,2 +0,2 @@
-import { createSignal, mergeProps as mergeProps$1, createRoot, createRenderEffect, createMemo, createComponent as createComponent$1, untrack, onMount } from 'solid-js';
+import { createSignal, mergeProps as mergeProps$1, createRoot, createRenderEffect, createMemo, createComponent as createComponent$1, untrack, onMount, splitProps } from 'solid-js';
 export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch } from 'solid-js';
@@ -618,12 +618,16 @@ import { MainCoreDriver, RendererMain } from '@lightningjs/renderer';
     if (this.rendered) {
+      // can be 0
       if (this.forwardFocus !== undefined) {
         if (isFunc(this.forwardFocus)) {
-          return this.forwardFocus.call(this);
+          if (this.forwardFocus.call(this, this) !== false) {
+            return;
+          }
+        } else {
+          const focusedIndex = typeof this.forwardFocus === 'number' ? this.forwardFocus : null;
+          if (focusedIndex !== null && focusedIndex < this.children.length) {
+            const child = this.children[focusedIndex];
+            child instanceof ElementNode && child.setFocus();
+            return;
+          }
         }
-        const focusedIndex = typeof this.forwardFocus === 'number' ? this.forwardFocus : null;
-        if (focusedIndex !== null && focusedIndex < this.children.length) {
-          const child = this.children[focusedIndex];
-          child instanceof ElementNode && child.setFocus();
-          return;
-        }
       }
@@ -1414,2 +1418,27 @@ // Delay setting focus so children can render (useful for Row + Column)
 
+/**
+ * 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
+ */
+function Dynamic(props) {
+  const [p, others] = splitProps(props, ['component']);
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  const cached = createMemo(() => p.component);
+  return createMemo(() => {
+    const component = cached();
+    switch (typeof component) {
+      case 'function':
+        return untrack(() => component(others));
+      case 'string':
+        // eslint-disable-next-line no-case-declarations
+        const el = createElement(component);
+        spread(el, others);
+        return el;
+    }
+  });
+}
+
 var intrinsicTypes = /*#__PURE__*/Object.freeze({
@@ -1464,3 +1493,3 @@ __proto__: null
 
-export { Canvas, config as Config, ElementNode, Text, intrinsicTypes as Types, View, activeElement, createComponent, createElement, createShader, createTextNode, deg2rad, effect, hexColor, insert, insertNode, memo, mergeProps, render, renderer, setActiveElement, setProp, spread, startLightningRenderer, use };
+export { Canvas, config as Config, Dynamic, ElementNode, Text, intrinsicTypes as Types, 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

@@ -283,11 +283,16 @@ /*
         if (this.rendered) {
+            // can be 0
             if (this.forwardFocus !== undefined) {
                 if (isFunc(this.forwardFocus)) {
-                    return this.forwardFocus.call(this);
+                    if (this.forwardFocus.call(this, this) !== false) {
+                        return;
+                    }
                 }
-                const focusedIndex = typeof this.forwardFocus === 'number' ? this.forwardFocus : null;
-                if (focusedIndex !== null && focusedIndex < this.children.length) {
-                    const child = this.children[focusedIndex];
-                    child instanceof ElementNode && child.setFocus();
-                    return;
+                else {
+                    const focusedIndex = typeof this.forwardFocus === 'number' ? this.forwardFocus : null;
+                    if (focusedIndex !== null && focusedIndex < this.children.length) {
+                        const child = this.children[focusedIndex];
+                        child instanceof ElementNode && child.setFocus();
+                        return;
+                    }
                 }
@@ -294,0 +299,0 @@ }

dist/source/core/render.js

@@ -21,2 +21,3 @@ /* eslint-disable @typescript-eslint/unbound-method */
 import universalInspector, { attachInspector, } from './universal/dom-inspector.js';
+import { splitProps, createMemo, untrack } from 'solid-js';
 import { isDev } from '../config.js';
@@ -32,1 +33,27 @@ const loadInspector = isDev;
 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(props) {
+    const [p, others] = splitProps(props, ['component']);
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const cached = createMemo(() => p.component);
+    return createMemo(() => {
+        const component = cached();
+        switch (typeof component) {
+            case 'function':
+                return untrack(() => component(others));
+            case 'string':
+                // eslint-disable-next-line no-case-declarations
+                const el = createElement(component);
+                spread(el, others);
+                return el;
+            default:
+                break;
+        }
+    });
+}

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

@@ -38,3 +38,3 @@ import { createShader } from '../renderer/index.js';
     autofocus: boolean;
-    forwardFocus?: number | ((this: ElementNode) => void);
+    forwardFocus?: number | ((this: ElementNode, elm: ElementNode) => boolean | void);
     private _undoStates?;
@@ -79,3 +79,3 @@ private _renderProps?;
     start(): Promise<void>;
-    setFocus(): any;
+    setFocus(): void;
     isTextNode(): boolean;
@@ -82,0 +82,0 @@ _resizeOnTextLoad(): void;

dist/types/core/render.d.ts

 import type { SolidNode } from './node/index.js';
-import type { JSX } from 'solid-js';
+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;
+/**
+ * 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 extends Record<any, any> ? T : never): SolidNode;

dist/types/intrinsicTypes.d.ts

@@ -23,3 +23,3 @@ import { type AnimationSettings, type Dimensions, type INode, type INodeWritableProps, type ITextNodeWritableProps, type NodeFailedPayload, type NodeLoadedPayload } from '@lightningjs/renderer';
     onLayout?: (child: ElementNode, dimensions: Dimensions) => void;
-    forwardFocus?: number | ((this: ElementNode) => void);
+    forwardFocus?: number | ((this: ElementNode, elm: ElementNode) => boolean | void);
     ref?: ElementNode | ((node: ElementNode) => void) | undefined;
@@ -26,0 +26,0 @@ selected?: number;

package.json

 {
   "name": "@lightningjs/solid",
-  "version": "0.12.11",
+  "version": "0.12.12",
   "description": "Lightning renderer for solid universal",
@@ -5,0 +5,0 @@ "type": "module",

src/core/node/index.ts

@@ -165,3 +165,5 @@ /*
   autofocus: boolean;
-  forwardFocus?: number | ((this: ElementNode) => void);
+  forwardFocus?:
+    | number
+    | ((this: ElementNode, elm: ElementNode) => boolean | void);
 
@@ -373,13 +375,17 @@ private _undoStates?: Record<string, any>;
     if (this.rendered) {
+      // can be 0
       if (this.forwardFocus !== undefined) {
         if (isFunc(this.forwardFocus)) {
-          return this.forwardFocus.call(this);
+          if (this.forwardFocus.call(this, this) !== false) {
+            return;
+          }
+        } else {
+          const focusedIndex =
+            typeof this.forwardFocus === 'number' ? this.forwardFocus : null;
+          if (focusedIndex !== null && focusedIndex < this.children.length) {
+            const child = this.children[focusedIndex];
+            child instanceof ElementNode && child.setFocus();
+            return;
+          }
         }
-        const focusedIndex =
-          typeof this.forwardFocus === 'number' ? this.forwardFocus : null;
-        if (focusedIndex !== null && focusedIndex < this.children.length) {
-          const child = this.children[focusedIndex];
-          child instanceof ElementNode && child.setFocus();
-          return;
-        }
       }
@@ -386,0 +392,0 @@ // Delay setting focus so children can render (useful for Row + Column)

src/core/render.ts

@@ -25,3 +25,3 @@ /* eslint-disable @typescript-eslint/unbound-method */
 import type { SolidNode } from './node/index.js';
-import type { JSX } from 'solid-js';
+import { splitProps, type JSX, createMemo, untrack } from 'solid-js';
 import { isDev } from '../config.js';
@@ -57,1 +57,32 @@
 } = 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 extends Record<any, any> ? T : never,
+): SolidNode {
+  const [p, others] = splitProps(props, ['component']);
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  const cached = createMemo<Function | string>(() => p.component);
+  return createMemo(() => {
+    const component = cached();
+    switch (typeof component) {
+      case 'function':
+        return untrack(() => component(others));
+
+      case 'string':
+        // eslint-disable-next-line no-case-declarations
+        const el = createElement(component);
+        spread(el, others);
+        return el;
+
+      default:
+        break;
+    }
+  }) as unknown as SolidNode;
+}

src/intrinsicTypes.ts

@@ -52,3 +52,5 @@ /*
   onLayout?: (child: ElementNode, dimensions: Dimensions) => void;
-  forwardFocus?: number | ((this: ElementNode) => void);
+  forwardFocus?:
+    | number
+    | ((this: ElementNode, elm: ElementNode) => boolean | void);
   ref?: ElementNode | ((node: ElementNode) => void) | undefined;
@@ -55,0 +57,0 @@ selected?: number;

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

291641

increased by1.91%

Lines of code

4738

increased by2.24%

No dependency changes