@lightningjs/solid
Advanced tools
@lightningjs/solid - npm Package Compare versions
Comparing version 0.10.4 to 0.11.0
@@ -187,5 +187,2 @@ import { createSignal, createEffect, mergeProps as mergeProps$1, createRoot, createRenderEffect, createMemo, createComponent as createComponent$1, untrack } from 'solid-js'; | ||
| } | ||
| function getAnimatableValue(value) { | ||
| return isArray(value) ? value[0] : value; | ||
| } | ||
@@ -462,3 +459,2 @@ /* | ||
| // Public but uses _ prefix | ||
| // Public but uses _ prefix | ||
| /** | ||
@@ -484,3 +480,3 @@ * Managed by dom-inspector | ||
| set(v) { | ||
| this[`_${key}`] = getAnimatableValue(v); | ||
| this[`_${key}`] = v; | ||
| this._sendToLightningAnimatable(key, v); | ||
@@ -572,18 +568,10 @@ } | ||
| if (this.rendered && this.lng) { | ||
| if (isArray(value)) { | ||
| return this.createAnimation({ | ||
| [name]: value[0] | ||
| }, value[1]).start(); | ||
| } | ||
| if (this._animate) { | ||
| return this.createAnimation({ | ||
| if (this.transition && this.transition[name]) { | ||
| const animationSettings = this.transition[name] === true ? undefined : this.transition[name]; | ||
| return this.animate({ | ||
| [name]: value | ||
| }).start(); | ||
| }, animationSettings).start(); | ||
| } | ||
| this.lng[name] = value; | ||
| } else { | ||
| // Need to render before animating | ||
| if (isArray(value)) { | ||
| value = value[0]; | ||
| } | ||
| this._renderProps[name] = value; | ||
@@ -599,3 +587,3 @@ } | ||
| } | ||
| createAnimation(props, animationSettings) { | ||
| animate(props, animationSettings) { | ||
| assertTruthy(this.lng, 'Node must be rendered before animating'); | ||
@@ -635,6 +623,3 @@ return this.lng.animate(props, animationSettings || this.animationSettings); | ||
| // Keys set in JSX are more important | ||
| for (let key in value) { | ||
| if (key === 'animate') { | ||
| key = '_animate'; | ||
| } | ||
| for (const key in value) { | ||
| if (!this[key]) { | ||
@@ -719,2 +704,7 @@ this[key] = value[key]; | ||
| // Apply transition first | ||
| if (newStyles.transition !== undefined) { | ||
| this.transition = newStyles.transition; | ||
| } | ||
| // Apply the styles | ||
@@ -1161,6 +1151,2 @@ Object.assign(this, { | ||
| setProperty(node, name, value = true) { | ||
| if (name === 'animate') { | ||
| node._animate = value; | ||
| return; | ||
| } | ||
| node[name] = value; | ||
@@ -1167,0 +1153,0 @@ }, |
@@ -21,3 +21,3 @@ /* | ||
| import calculateFlex from '../flex.js'; | ||
| import { log, isArray, isNumber, isFunc, keyExists, getAnimatableValue, } from '../utils.js'; | ||
| import { log, isArray, isNumber, isFunc, keyExists } from '../utils.js'; | ||
| import { config } from '../../config.js'; | ||
@@ -121,3 +121,2 @@ import { setActiveElement } from '../activeElement.js'; | ||
| _borderBottom; | ||
| _animate; // Public but uses _ prefix | ||
| _autosized; // Public but uses _ prefix | ||
@@ -143,3 +142,3 @@ _isDirty; // Public but uses _ prefix | ||
| set(v) { | ||
| this[`_${key}`] = getAnimatableValue(v); | ||
| this[`_${key}`] = v; | ||
| this._sendToLightningAnimatable(key, v); | ||
@@ -225,15 +224,11 @@ }, | ||
| if (this.rendered && this.lng) { | ||
| if (isArray(value)) { | ||
| return this.createAnimation({ [name]: value[0] }, value[1]).start(); | ||
| if (this.transition && this.transition[name]) { | ||
| const animationSettings = this.transition[name] === true | ||
| ? undefined | ||
| : this.transition[name]; | ||
| return this.animate({ [name]: value }, animationSettings).start(); | ||
| } | ||
| if (this._animate) { | ||
| return this.createAnimation({ [name]: value }).start(); | ||
| } | ||
| this.lng[name] = value; | ||
| } | ||
| else { | ||
| // Need to render before animating | ||
| if (isArray(value)) { | ||
| value = value[0]; | ||
| } | ||
| this._renderProps[name] = value; | ||
@@ -250,3 +245,3 @@ } | ||
| } | ||
| createAnimation(props, animationSettings) { | ||
| animate(props, animationSettings) { | ||
| assertTruthy(this.lng, 'Node must be rendered before animating'); | ||
@@ -285,6 +280,3 @@ return this.lng.animate(props, animationSettings || this.animationSettings); | ||
| // Keys set in JSX are more important | ||
| for (let key in value) { | ||
| if (key === 'animate') { | ||
| key = '_animate'; | ||
| } | ||
| for (const key in value) { | ||
| if (!this[key]) { | ||
@@ -368,2 +360,6 @@ this[key] = value[key]; | ||
| }, {}); | ||
| // Apply transition first | ||
| if (newStyles.transition !== undefined) { | ||
| this.transition = newStyles.transition; | ||
| } | ||
| // Apply the styles | ||
@@ -370,0 +366,0 @@ Object.assign(this, { ...stylesToUndo, ...newStyles }); |
@@ -41,6 +41,2 @@ /* | ||
| setProperty(node, name, value = true) { | ||
| if (name === 'animate') { | ||
| node._animate = value; | ||
| return; | ||
| } | ||
| node[name] = value; | ||
@@ -47,0 +43,0 @@ }, |
@@ -52,4 +52,1 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
| } | ||
| export function getAnimatableValue(value) { | ||
| return isArray(value) ? value[0] : value; | ||
| } |
| import { createShader } from '../renderer/index.js'; | ||
| import { type AnimatableNumberProp, type IntrinsicCommonProps, type NodeStyles, type TextStyles } from '../../index.js'; | ||
| import { type IntrinsicCommonProps, type NodeStyles, type TextStyles } from '../../index.js'; | ||
| import Children from './children.js'; | ||
@@ -53,3 +53,2 @@ import States, { type NodeStates } from './states.js'; | ||
| private _borderBottom?; | ||
| _animate?: boolean; | ||
| _autosized?: boolean; | ||
@@ -69,5 +68,5 @@ _isDirty?: boolean; | ||
| set shader(v: Parameters<typeof createShader> | ShaderRef | undefined); | ||
| _sendToLightningAnimatable(name: string, value: AnimatableNumberProp | number | string): any; | ||
| _sendToLightningAnimatable(name: string, value: number | string): any; | ||
| _sendToLightning(name: string, value: unknown): void; | ||
| createAnimation(props: Partial<INodeAnimatableProps>, animationSettings?: Partial<AnimationSettings>): any; | ||
| animate(props: Partial<INodeAnimatableProps>, animationSettings?: Partial<AnimationSettings>): any; | ||
| setFocus(): void; | ||
@@ -74,0 +73,0 @@ isTextNode(): boolean; |
@@ -1,2 +0,1 @@ | ||
| import type { AnimatableNumberProp } from '../index.js'; | ||
| import type { SolidNode } from './node/index.js'; | ||
@@ -11,2 +10,1 @@ export declare function log(msg: string, node: SolidNode, ...args: any[]): void; | ||
| export declare function keyExists(obj: Record<string, unknown>, keys: (string | number | symbol)[]): boolean; | ||
| export declare function getAnimatableValue(value: number | AnimatableNumberProp | undefined): number | undefined; |
@@ -1,2 +0,2 @@ | ||
| import { type AnimationSettings, type Dimensions, type INode, type INodeAnimatableProps, type INodeWritableProps, type ITextNodeWritableProps, type NodeFailedPayload, type NodeLoadedPayload } from '@lightningjs/renderer'; | ||
| import { type AnimationSettings, type Dimensions, type INode, type INodeWritableProps, type ITextNodeWritableProps, type NodeFailedPayload, type NodeLoadedPayload } from '@lightningjs/renderer'; | ||
| import { type JSX } from 'solid-js'; | ||
@@ -8,9 +8,2 @@ import { type ElementNode } from './core/node/index.js'; | ||
| }; | ||
| type TransformAnimatableNumberProps<T> = { | ||
| [K in keyof T]?: number extends T[K] ? number | AnimatableNumberProp : T[K]; | ||
| }; | ||
| export type AnimatableNumberProp = [ | ||
| value: number, | ||
| settings: Partial<AnimationSettings> | ||
| ]; | ||
| export interface BorderStyleObject { | ||
@@ -22,3 +15,2 @@ width: number; | ||
| export interface IntrinsicNodeCommonProps { | ||
| animate?: boolean; | ||
| animationSettings?: Partial<AnimationSettings>; | ||
@@ -56,2 +48,3 @@ autofocus?: boolean; | ||
| marginTop?: number; | ||
| transition?: Record<string, Partial<AnimationSettings> | true>; | ||
| } | ||
@@ -65,4 +58,3 @@ export interface IntrinsicTextStyleCommonProps { | ||
| export type IntrinsicCommonProps = IntrinsicNodeCommonProps & IntrinsicNodeStyleCommonProps & IntrinsicTextStyleCommonProps; | ||
| export type TransformableNodeWritableProps = TransformAnimatableNumberProps<Omit<INodeAnimatableProps, 'zIndex' | 'zIndexLocked'>>; | ||
| export interface IntrinsicNodeStyleProps extends Partial<Omit<INodeWritableProps, 'parent' | 'shader' | keyof TransformableNodeWritableProps>>, TransformableNodeWritableProps, IntrinsicNodeStyleCommonProps { | ||
| export interface IntrinsicNodeStyleProps extends Partial<Omit<INodeWritableProps, 'parent' | 'shader'>>, IntrinsicNodeStyleCommonProps { | ||
| [key: string]: unknown; | ||
@@ -69,0 +61,0 @@ } |
| { | ||
| "name": "@lightningjs/solid", | ||
| "version": "0.10.4", | ||
| "version": "0.11.0", | ||
| "description": "Lightning renderer for solid universal", | ||
@@ -5,0 +5,0 @@ "type": "module", |
@@ -9,5 +9,2 @@ <p> | ||
| ## Hello World | ||
| For a Hello World type guide go to this [Page](HelloWorld.md) | ||
| ## Quick Start | ||
@@ -40,2 +37,4 @@ | ||
| For a more detailed Hello World guide check out the [Hello World](HelloWorld.md) guide. | ||
| ## Built In Components | ||
@@ -197,3 +196,3 @@ | ||
| <Text style={Subline}>{data().release_date}</Text> | ||
| <View width={30} height={30} src={'/assets/rt-popcorn.png'}></View> | ||
| <View width={30} height={30} src={'/assets/rt-popcorn.png'} /> | ||
| <Text style={Subline}>90%</Text> | ||
@@ -206,5 +205,5 @@ </View> | ||
| ## Animations | ||
| ## Transitions / Animations | ||
| Adding an `animate` attribute to a <View> component will cause any property changes (after initial render) to be animated. This is useful for simple animations where you want to resize, move, or change alpha of a component. You can set `animationSettings` with an object to control the duration and easing function of property changes. | ||
| You can define which properties will animate via the transition property along with setting custom `animationSettings`. If you wish to reuse or use the default `animationSettings`, you can set the property value to `true`. | ||
@@ -216,16 +215,5 @@ ```jsx | ||
| <FocusRing animate animationSettings={{duration: 1500}} ref={focusRingRef} /> | ||
| <FocusRing animationSettings={{duration: 1500}} ref={focusRingRef} transition={{ x: true, scale: { duration: 1500, easing: 'ease-in-out'} }} /> | ||
| ``` | ||
| You can also animate elements by setting their value to an array [newValue, animationSettings]; The second param is optional and will use the animationSettings on the JSX element or Config.animationSettings. | ||
| ```jsx | ||
| let button; | ||
| onMount(() => { | ||
| button.alpha = [1, { duration: 500 }]; | ||
| }); | ||
| <Button ref={button}>Movies</Button>; | ||
| ``` | ||
| For more complicated animations, you can access the Lightning renderer animate API directly: | ||
@@ -242,2 +230,4 @@ | ||
| To find out more about animations check out the [renderer example](https://github.com/lightning-js/renderer/blob/main/examples/tests/animation.ts#L70). | ||
| ### Global Animation Settings | ||
@@ -251,2 +241,6 @@ | ||
| duration: 250, | ||
| delay: 0, | ||
| repeat: 0, | ||
| loop: false, | ||
| stopMethod: false, | ||
| easing: 'ease-in-out', | ||
@@ -338,6 +332,10 @@ }; | ||
| scale: 1, | ||
| transition: { | ||
| scale: { duration: 1500, delay: 200, easing: 'easy-in' }, | ||
| alpha: { duration: 1500, delay: 200, easing: 'easy-in' }, | ||
| }, | ||
| focus: { | ||
| color: [0x58807dff, { duration: 2000 }], | ||
| scale: 1.2, | ||
| alpha: [1, { duration: 1500, delay: 200, easing: 'easy-in' }], | ||
| alpha: 1, | ||
| }, | ||
@@ -361,3 +359,3 @@ }; | ||
| return ( | ||
| <View {...props} forwardStates animate style={ButtonContainer}> | ||
| <View {...props} forwardStates style={ButtonContainer}> | ||
| <Text style={ButtonText}>{props.children}</Text> | ||
@@ -392,3 +390,2 @@ </View> | ||
| forwardStates | ||
| animate | ||
| style={buttonStyles.container} | ||
@@ -395,0 +392,0 @@ shader={RoundedRectangle} |
@@ -20,3 +20,2 @@ /* | ||
| import { | ||
| type AnimatableNumberProp, | ||
| type BorderStyleObject, | ||
@@ -30,10 +29,3 @@ type IntrinsicCommonProps, | ||
| import calculateFlex from '../flex.js'; | ||
| import { | ||
| log, | ||
| isArray, | ||
| isNumber, | ||
| isFunc, | ||
| keyExists, | ||
| getAnimatableValue, | ||
| } from '../utils.js'; | ||
| import { log, isArray, isNumber, isFunc, keyExists } from '../utils.js'; | ||
| import { config } from '../../config.js'; | ||
@@ -188,3 +180,2 @@ import { setActiveElement } from '../activeElement.js'; | ||
| private _borderBottom?: BorderStyleObject; | ||
| public _animate?: boolean; // Public but uses _ prefix | ||
| public _autosized?: boolean; // Public but uses _ prefix | ||
@@ -211,4 +202,4 @@ public _isDirty?: boolean; // Public but uses _ prefix | ||
| }, | ||
| set(v: number | AnimatableNumberProp) { | ||
| this[`_${key}`] = getAnimatableValue(v); | ||
| set(v: number) { | ||
| this[`_${key}`] = v; | ||
| this._sendToLightningAnimatable(key, v); | ||
@@ -301,21 +292,14 @@ }, | ||
| _sendToLightningAnimatable( | ||
| name: string, | ||
| value: AnimatableNumberProp | number | string, | ||
| ) { | ||
| _sendToLightningAnimatable(name: string, value: number | string) { | ||
| if (this.rendered && this.lng) { | ||
| if (isArray(value)) { | ||
| return this.createAnimation({ [name]: value[0] }, value[1]).start(); | ||
| if (this.transition && this.transition[name]) { | ||
| const animationSettings = | ||
| this.transition[name] === true | ||
| ? undefined | ||
| : (this.transition[name] as undefined | AnimationSettings); | ||
| return this.animate({ [name]: value }, animationSettings).start(); | ||
| } | ||
| if (this._animate) { | ||
| return this.createAnimation({ [name]: value }).start(); | ||
| } | ||
| (this.lng[name as keyof INode] as number | string) = value; | ||
| } else { | ||
| // Need to render before animating | ||
| if (isArray(value)) { | ||
| value = value[0]; | ||
| } | ||
| this._renderProps[name] = value; | ||
@@ -333,3 +317,3 @@ } | ||
| createAnimation( | ||
| animate( | ||
| props: Partial<INodeAnimatableProps>, | ||
@@ -380,7 +364,3 @@ animationSettings?: Partial<AnimationSettings>, | ||
| // Keys set in JSX are more important | ||
| for (let key in value) { | ||
| if (key === 'animate') { | ||
| key = '_animate'; | ||
| } | ||
| for (const key in value) { | ||
| if (!this[key as keyof SolidStyles]) { | ||
@@ -482,2 +462,7 @@ this[key as keyof SolidStyles] = value[key as keyof SolidStyles]; | ||
| // Apply transition first | ||
| if ((newStyles as any).transition !== undefined) { | ||
| this.transition = (newStyles as any).transition; | ||
| } | ||
| // Apply the styles | ||
@@ -484,0 +469,0 @@ Object.assign(this, { ...stylesToUndo, ...newStyles }); |
@@ -47,7 +47,2 @@ /* | ||
| setProperty(node: ElementNode, name: string, value: any = true): void { | ||
| if (name === 'animate') { | ||
| node._animate = value as boolean; | ||
| return; | ||
| } | ||
| node[name] = value; | ||
@@ -54,0 +49,0 @@ }, |
@@ -20,3 +20,2 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
| import { config, isDev } from '../config.js'; | ||
| import type { AnimatableNumberProp } from '../index.js'; | ||
| import type { SolidNode } from './node/index.js'; | ||
@@ -69,7 +68,1 @@ | ||
| } | ||
| export function getAnimatableValue( | ||
| value: number | AnimatableNumberProp | undefined, | ||
| ): number | undefined { | ||
| return isArray(value) ? (value as AnimatableNumberProp)[0] : value; | ||
| } |
@@ -22,3 +22,2 @@ /* | ||
| type INode, | ||
| type INodeAnimatableProps, | ||
| type INodeWritableProps, | ||
@@ -37,12 +36,2 @@ type ITextNodeWritableProps, | ||
| // Type that transforms all number typed properties to a tuple | ||
| type TransformAnimatableNumberProps<T> = { | ||
| [K in keyof T]?: number extends T[K] ? number | AnimatableNumberProp : T[K]; | ||
| }; | ||
| export type AnimatableNumberProp = [ | ||
| value: number, | ||
| settings: Partial<AnimationSettings>, | ||
| ]; | ||
| export interface BorderStyleObject { | ||
@@ -56,3 +45,2 @@ width: number; | ||
| export interface IntrinsicNodeCommonProps { | ||
| animate?: boolean; | ||
| animationSettings?: Partial<AnimationSettings>; | ||
@@ -96,2 +84,3 @@ autofocus?: boolean; | ||
| marginTop?: number; | ||
| transition?: Record<string, Partial<AnimationSettings> | true>; | ||
| } | ||
@@ -110,14 +99,4 @@ | ||
| export type TransformableNodeWritableProps = TransformAnimatableNumberProps< | ||
| Omit<INodeAnimatableProps, 'zIndex' | 'zIndexLocked'> | ||
| >; | ||
| export interface IntrinsicNodeStyleProps | ||
| extends Partial< | ||
| Omit< | ||
| INodeWritableProps, | ||
| 'parent' | 'shader' | keyof TransformableNodeWritableProps | ||
| > | ||
| >, | ||
| TransformableNodeWritableProps, | ||
| extends Partial<Omit<INodeWritableProps, 'parent' | 'shader'>>, | ||
| IntrinsicNodeStyleCommonProps { | ||
@@ -124,0 +103,0 @@ [key: string]: unknown; |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-1.06%
285233
- Lines of code
- decreased by-1.75%
4432
- Number of lines in readme file
- decreased by-0.69%
430