leva - npm Package Compare versions

Comparing version 0.9.1 to 0.9.2

CHANGELOG.md

 # leva
 
+## 0.9.2
+
+### Patch Changes
+
+- 34281d7: Add new value option `transient`. This allows opting out of the transient mode when having a `onChange` handler invoked.
+
+  ```tsx
+  const data = useControls({
+    color: {
+      value: '#7c3d3d',
+      onChange: value => {
+        console.log(value)
+      },
+      transient: false,
+    },
+  })
+
+  console.log(data) // { color: '#7c3d3d' }
+  ```
+
+  ```tsx
+  const data = useControls({
+    color: {
+      value: '#7c3d3d',
+      onChange: value => {
+        console.log(value)
+      },
+      transient: true,
+    },
+  })
+
+  console.log(data) // {}
+  ```
+
+  This is handy if you want to use the `onChange` handler for triggering a save on a remote server, while still triggering a re-render with the value.
+
 ## 0.9.1
@@ -4,0 +40,0 @@

dist/declarations/src/types/internal.d.ts

@@ -10,2 +10,3 @@ /// <reference types="react" />
     onChange: (value: any) => void;
+    transient: boolean;
 }>;
@@ -12,0 +13,0 @@ export declare type StoreType = {

dist/declarations/src/types/public.d.ts

@@ -138,6 +138,18 @@ /// <reference types="react" />
 };
-export declare type InputOptions = GenericSchemaItemOptions & {
+declare type TransientOnChangeSchemaItemOptions = {
+    onChange: (v: any) => void;
+    transient?: true;
+};
+declare type NonTransientOnChangeSchemaItemOptions = {
+    onChange: (v: any) => void;
+    transient: false;
+};
+declare type NoOnChangeSchemaItemOptions = {
+    onChange?: undefined;
+    transient?: undefined;
+};
+declare type OnChangeSchemaItemOptions = TransientOnChangeSchemaItemOptions | NonTransientOnChangeSchemaItemOptions | NoOnChangeSchemaItemOptions;
+export declare type InputOptions = GenericSchemaItemOptions & OnChangeSchemaItemOptions & {
     optional?: boolean;
     disabled?: boolean;
-    onChange?: (v: any) => void;
 };
@@ -153,31 +165,29 @@ declare type SchemaItemWithOptions = number | boolean | string | (SchemaItem & InputOptions) | (SpecialInput & GenericSchemaItemOptions) | FolderInput<unknown>;
 };
-declare type PrimitiveToValue<S> = S extends CustomInput<infer I> ? BeautifyUnionType<I> : S extends ImageInput ? string | undefined : S extends SelectWithValueInput<infer T, infer K> ? T | K : S extends SelectWithoutValueInput<infer T> ? T : S extends IntervalInput ? [number, number] : S extends {
-    value: infer G;
-} ? PrimitiveToValue<G> : S extends VectorObj ? S : S extends Vector3dArray ? [number, number, number] : S extends Vector2dArray ? [number, number] : S extends number ? number : S extends string ? string : S extends boolean ? boolean : NotAPrimitiveType;
-export declare type SchemaToValues<Schema, IncludeTransient extends boolean = false> = BeautifyUnionType<UnionToIntersection<Leaves<IncludeTransient, Schema>>>;
-declare type Leaf = {
+declare type PrimitiveToValue<P> = P extends CustomInput<infer CustomValue> ? BeautifyUnionType<CustomValue> : P extends ImageInput ? string | undefined : P extends SelectWithValueInput<infer SelectValue, infer Options> ? SelectValue | Options : P extends SelectWithoutValueInput<infer Options> ? Options : P extends IntervalInput ? [number, number] : P extends {
+    value: infer Value;
+} ? PrimitiveToValue<Value> : P extends VectorObj ? P : P extends Vector3dArray ? [number, number, number] : P extends Vector2dArray ? [number, number] : P extends number ? number : P extends string ? string : P extends boolean ? boolean : NotAPrimitiveType;
+export declare type SchemaToValues<Schema, IncludeTransient extends boolean = false> = BeautifyUnionType<UnionToIntersection<Tree<IncludeTransient, Schema>>>;
+declare type EndLeaf = {
     ___leaf: 'leaf';
 };
-declare type Join<T, K extends keyof T, P> = Leaf extends P ? {
-    [i in K]: T[K];
-} : P;
-export declare type Leaves<IncludeTransient extends boolean, T, P extends string | number | symbol = ''> = {
-    0: T extends {
-        schema: infer F;
+declare type Join<Leaf1, Leaf1Key extends keyof Leaf1, Leaf2> = EndLeaf extends Leaf2 ? {
+    [i in Leaf1Key]: Leaf1[Leaf1Key];
+} : Leaf2;
+declare type Tree<IncludeTransient extends boolean, Leaf, LeafKey extends string | number | symbol = ''> = {
+    0: Leaf extends {
+        schema: infer Schema;
     } ? {
-        [K in keyof F]: Join<F, K, F[K]>;
+        [Key in keyof Schema]: Join<Schema, Key, Schema[Key]>;
     } : never;
     1: never;
     2: {
-        [i in P]: T extends {
+        [Key in LeafKey]: Leaf extends {
             optional: true;
-        } ? PrimitiveToValue<T> | undefined : PrimitiveToValue<T>;
+        } ? PrimitiveToValue<Leaf> | undefined : PrimitiveToValue<Leaf>;
     };
     3: {
-        [K in keyof T]: Join<T, K, Leaves<IncludeTransient, T[K], K>>;
-    }[keyof T];
-    4: Leaf;
-}[P extends '' ? 3 : T extends FolderInput<unknown> ? 0 : T extends SpecialInput ? 1 : PrimitiveToValue<T> extends NotAPrimitiveType ? T extends object ? 3 : 4 : T extends {
-    onChange: any;
-} ? IncludeTransient extends true ? 2 : 1 : 2];
+        [Key in keyof Leaf]: Join<Leaf, Key, Tree<IncludeTransient, Leaf[Key], Key>>;
+    }[keyof Leaf];
+    4: EndLeaf;
+}[LeafKey extends '' ? 3 : Leaf extends FolderInput<unknown> ? 0 : Leaf extends SpecialInput ? 1 : PrimitiveToValue<Leaf> extends NotAPrimitiveType ? Leaf extends object ? 3 : 4 : Leaf extends TransientOnChangeSchemaItemOptions ? IncludeTransient extends true ? 2 : 1 : 2];
 /**
@@ -184,0 +194,0 @@ * If P is '' then T is the whole schema and we shouldn't run any type check

dist/leva.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var vectorPlugin = require('./vector-plugin-f8b21687.cjs.dev.js');
+var vectorPlugin = require('./vector-plugin-11fc2382.cjs.dev.js');
 var v8n = require('v8n');
@@ -1192,5 +1192,6 @@ var tc = require('tinycolor2');
           const {
-            onChange
+            onChange,
+            transient
           } = options,
-                _options = vectorPlugin._objectWithoutProperties(options, ["onChange"]);
+                _options = vectorPlugin._objectWithoutProperties(options, ["onChange", "transient"]);
 
@@ -1202,3 +1203,4 @@ data[newPath] = vectorPlugin._objectSpread2(vectorPlugin._objectSpread2({
             path: newPath,
-            onChange
+            onChange,
+            transient
           };
@@ -2149,6 +2151,16 @@ } else {
       path,
-      onChange
+      onChange,
+      transient
     }) => {
       allPaths.push(path);
-      if (!!onChange) onChangePaths[path] = onChange;else renderPaths.push(path);
+
+      if (!!onChange) {
+        onChangePaths[path] = onChange;
+
+        if (!transient) {
+          renderPaths.push(path);
+        }
+      } else {
+        renderPaths.push(path);
+      }
     });
@@ -2155,0 +2167,0 @@ return [allPaths, renderPaths, onChangePaths];

dist/leva.cjs.prod.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var vectorPlugin = require('./vector-plugin-8f7a38a7.cjs.prod.js');
+var vectorPlugin = require('./vector-plugin-f20761e4.cjs.prod.js');
 var v8n = require('v8n');
@@ -1192,5 +1192,6 @@ var tc = require('tinycolor2');
           const {
-            onChange
+            onChange,
+            transient
           } = options,
-                _options = vectorPlugin._objectWithoutProperties(options, ["onChange"]);
+                _options = vectorPlugin._objectWithoutProperties(options, ["onChange", "transient"]);
 
@@ -1202,3 +1203,4 @@ data[newPath] = vectorPlugin._objectSpread2(vectorPlugin._objectSpread2({
             path: newPath,
-            onChange
+            onChange,
+            transient
           };
@@ -2145,6 +2147,16 @@ } else {
       path,
-      onChange
+      onChange,
+      transient
     }) => {
       allPaths.push(path);
-      if (!!onChange) onChangePaths[path] = onChange;else renderPaths.push(path);
+
+      if (!!onChange) {
+        onChangePaths[path] = onChange;
+
+        if (!transient) {
+          renderPaths.push(path);
+        }
+      } else {
+        renderPaths.push(path);
+      }
     });
@@ -2151,0 +2163,0 @@ return [allPaths, renderPaths, onChangePaths];

dist/leva.esm.js

@@ -1,3 +0,3 @@
-import { p as pick, _ as _objectSpread2, o as omit, s as styled, u as useInputContext, R as Row, L as Label, V as ValueInput, P as Portal, O as Overlay, c as createInternalPlugin, a as Vector, g as getVectorPlugin, b as useTransform, d as useTh, e as useDrag, f as _extends, m as multiplyStep, h as clamp, i as _objectWithoutProperties, n as normalizeKeyedNumberSettings, j as invertedRange, k as sanitizeStep, r as range, l as RangeWrapper, q as Range, I as Indicator, S as Scrubber, t as getUid, v as SpecialInputs, w as warn, x as LevaErrors, y as updateInput, z as normalizeInput, A as StyledTitle, C as Chevron, B as useInputSetters, D as Plugins, E as InputContext, F as StyledInputWrapper, G as useCanvas2d, H as useInput, J as log, K as StyledWrapper, M as StyledContent, N as useStoreContext, Q as StyledFolder, T as StyledInputRow, U as debounce, W as PanelSettingsContext, X as StoreContext, Y as mergeTheme, Z as ThemeContext, $ as register, a0 as LevaInputs, a1 as select, a2 as number$1, a3 as string, a4 as boolean } from './vector-plugin-30dc83ff.esm.js';
-export { a5 as LevaStoreProvider, N as useStoreContext } from './vector-plugin-30dc83ff.esm.js';
+import { p as pick, _ as _objectSpread2, o as omit, s as styled, u as useInputContext, R as Row, L as Label, V as ValueInput, P as Portal, O as Overlay, c as createInternalPlugin, a as Vector, g as getVectorPlugin, b as useTransform, d as useTh, e as useDrag, f as _extends, m as multiplyStep, h as clamp, i as _objectWithoutProperties, n as normalizeKeyedNumberSettings, j as invertedRange, k as sanitizeStep, r as range, l as RangeWrapper, q as Range, I as Indicator, S as Scrubber, t as getUid, v as SpecialInputs, w as warn, x as LevaErrors, y as updateInput, z as normalizeInput, A as StyledTitle, C as Chevron, B as useInputSetters, D as Plugins, E as InputContext, F as StyledInputWrapper, G as useCanvas2d, H as useInput, J as log, K as StyledWrapper, M as StyledContent, N as useStoreContext, Q as StyledFolder, T as StyledInputRow, U as debounce, W as PanelSettingsContext, X as StoreContext, Y as mergeTheme, Z as ThemeContext, $ as register, a0 as LevaInputs, a1 as select, a2 as number$1, a3 as string, a4 as boolean } from './vector-plugin-c48ae24e.esm.js';
+export { a5 as LevaStoreProvider, N as useStoreContext } from './vector-plugin-c48ae24e.esm.js';
 import v8n from 'v8n';
@@ -1178,5 +1178,6 @@ import tc from 'tinycolor2';
           const {
-            onChange
+            onChange,
+            transient
           } = options,
-                _options = _objectWithoutProperties(options, ["onChange"]);
+                _options = _objectWithoutProperties(options, ["onChange", "transient"]);
 
@@ -1188,3 +1189,4 @@ data[newPath] = _objectSpread2(_objectSpread2({
             path: newPath,
-            onChange
+            onChange,
+            transient
           };
@@ -2135,6 +2137,16 @@ } else {
       path,
-      onChange
+      onChange,
+      transient
     }) => {
       allPaths.push(path);
-      if (!!onChange) onChangePaths[path] = onChange;else renderPaths.push(path);
+
+      if (!!onChange) {
+        onChangePaths[path] = onChange;
+
+        if (!transient) {
+          renderPaths.push(path);
+        }
+      } else {
+        renderPaths.push(path);
+      }
     });
@@ -2141,0 +2153,0 @@ return [allPaths, renderPaths, onChangePaths];

package.json

 {
   "name": "leva",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "main": "dist/leva.cjs.js",
@@ -5,0 +5,0 @@ "module": "dist/leva.esm.js",

plugin/dist/leva-plugin.cjs.dev.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var vectorPlugin = require('../../dist/vector-plugin-f8b21687.cjs.dev.js');
+var vectorPlugin = require('../../dist/vector-plugin-11fc2382.cjs.dev.js');
 var tc = require('tinycolor2');
@@ -8,0 +8,0 @@ var lite = require('dequal/lite');

plugin/dist/leva-plugin.cjs.prod.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var vectorPlugin = require('../../dist/vector-plugin-8f7a38a7.cjs.prod.js');
+var vectorPlugin = require('../../dist/vector-plugin-f20761e4.cjs.prod.js');
 var tc = require('tinycolor2');
@@ -8,0 +8,0 @@ var lite = require('dequal/lite');

plugin/dist/leva-plugin.esm.js

@@ -1,3 +0,3 @@
-import { N as useStoreContext, R as Row, L as Label, P as Portal, O as Overlay, a6 as String, a7 as Number, a8 as Boolean, a9 as Select, a as Vector, aa as InnerLabel } from '../../dist/vector-plugin-30dc83ff.esm.js';
-export { a0 as LevaInputs, v as SpecialInputs, h as clamp, ad as createPlugin, U as debounce, ac as evaluate, ai as formatVector, g as getVectorPlugin, af as getVectorSchema, ag as getVectorType, j as invertedRange, ae as keyframes, n as normalizeKeyedNumberSettings, aj as normalizeVector, ab as pad, r as range, ah as sanitizeVector, s as styled, G as useCanvas2d, e as useDrag, H as useInput, u as useInputContext, B as useInputSetters, N as useStoreContext, d as useTh, b as useTransform } from '../../dist/vector-plugin-30dc83ff.esm.js';
+import { N as useStoreContext, R as Row, L as Label, P as Portal, O as Overlay, a6 as String, a7 as Number, a8 as Boolean, a9 as Select, a as Vector, aa as InnerLabel } from '../../dist/vector-plugin-c48ae24e.esm.js';
+export { a0 as LevaInputs, v as SpecialInputs, h as clamp, ad as createPlugin, U as debounce, ac as evaluate, ai as formatVector, g as getVectorPlugin, af as getVectorSchema, ag as getVectorType, j as invertedRange, ae as keyframes, n as normalizeKeyedNumberSettings, aj as normalizeVector, ab as pad, r as range, ah as sanitizeVector, s as styled, G as useCanvas2d, e as useDrag, H as useInput, u as useInputContext, B as useInputSetters, N as useStoreContext, d as useTh, b as useTransform } from '../../dist/vector-plugin-c48ae24e.esm.js';
 export { default as tinycolor2 } from 'tinycolor2';
@@ -4,0 +4,0 @@ export { dequal } from 'dequal/lite';

src/store.ts

@@ -251,5 +251,5 @@ import { useMemo } from 'react'
           // @ts-ignore
-          const { onChange, ..._options } = options
+          const { onChange, transient, ..._options } = options
           data[newPath] = { type, ..._options, ...input }
-          mappedPaths[key] = { path: newPath, onChange }
+          mappedPaths[key] = { path: newPath, onChange, transient }
         } else {
@@ -256,0 +256,0 @@ warn(LevaErrors.UNKNOWN_INPUT, newPath, rawInput)

src/types/internal.ts

@@ -6,3 +6,3 @@ import type { UseStore } from 'zustand'
 
-export type MappedPaths = Record<string, { path: string; onChange: (value: any) => void }>
+export type MappedPaths = Record<string, { path: string; onChange: (value: any) => void; transient: boolean }>
 
@@ -9,0 +9,0 @@ export type StoreType = {

src/types/public.test.ts

@@ -15,2 +15,10 @@ /* eslint-disable react-hooks/rules-of-hooks */
 expectType<{ a: number }>(useControls({ a: 3 }))
+// b shouldn't be returned by useControls when transient
+expectType<{ a: number }>(useControls({ a: 3, b: { value: '#fff', onChange: () => {} } }))
+// b shouldn't be returned by useControls when transient
+expectType<{ a: number }>(useControls({ a: 3, b: { value: '#fff', onChange: () => {}, transient: true } }))
+// @ts-expect-error transient shouldn't be usable alone
+expectType<{ a: number }>(useControls({ a: 3, b: { value: '#fff', transient: true } }))
+// b should be returned when transient is false
+expectType<{ a: number; b: string }>(useControls({ a: 3, b: { value: '#fff', onChange: () => {}, transient: false } }))
 expectType<[{ a: number }, (value: { a?: number }) => void]>(useControls(() => ({ a: 3 })))
@@ -17,0 +25,0 @@ expectType<[{ a: number }, (value: { a?: number; color?: string }) => void]>(

src/types/public.ts

@@ -130,8 +130,28 @@ /**
 
-export type InputOptions = GenericSchemaItemOptions & {
-  optional?: boolean
-  disabled?: boolean
-  onChange?: (v: any) => void
+type TransientOnChangeSchemaItemOptions = {
+  onChange: (v: any) => void
+  transient?: true
 }
 
+type NonTransientOnChangeSchemaItemOptions = {
+  onChange: (v: any) => void
+  transient: false
+}
+
+type NoOnChangeSchemaItemOptions = {
+  onChange?: undefined
+  transient?: undefined
+}
+
+type OnChangeSchemaItemOptions =
+  | TransientOnChangeSchemaItemOptions
+  | NonTransientOnChangeSchemaItemOptions
+  | NoOnChangeSchemaItemOptions
+
+export type InputOptions = GenericSchemaItemOptions &
+  OnChangeSchemaItemOptions & {
+    optional?: boolean
+    disabled?: boolean
+  }
+
 type SchemaItemWithOptions =
@@ -153,25 +173,25 @@ | number
 
-type PrimitiveToValue<S> = S extends CustomInput<infer I>
-  ? BeautifyUnionType<I>
-  : S extends ImageInput
+type PrimitiveToValue<P> = P extends CustomInput<infer CustomValue>
+  ? BeautifyUnionType<CustomValue>
+  : P extends ImageInput
   ? string | undefined
-  : S extends SelectWithValueInput<infer T, infer K>
-  ? T | K
-  : S extends SelectWithoutValueInput<infer T>
-  ? T
-  : S extends IntervalInput
+  : P extends SelectWithValueInput<infer SelectValue, infer Options>
+  ? SelectValue | Options
+  : P extends SelectWithoutValueInput<infer Options>
+  ? Options
+  : P extends IntervalInput
   ? [number, number]
-  : S extends { value: infer G }
-  ? PrimitiveToValue<G>
-  : S extends VectorObj
-  ? S
-  : S extends Vector3dArray
+  : P extends { value: infer Value }
+  ? PrimitiveToValue<Value>
+  : P extends VectorObj
+  ? P
+  : P extends Vector3dArray
   ? [number, number, number]
-  : S extends Vector2dArray
+  : P extends Vector2dArray
   ? [number, number]
-  : S extends number
+  : P extends number
   ? number
-  : S extends string
+  : P extends string
   ? string
-  : S extends boolean
+  : P extends boolean
   ? boolean
@@ -181,31 +201,35 @@ : NotAPrimitiveType
 export type SchemaToValues<Schema, IncludeTransient extends boolean = false> = BeautifyUnionType<
-  UnionToIntersection<Leaves<IncludeTransient, Schema>>
+  UnionToIntersection<Tree<IncludeTransient, Schema>>
 >
 
-type Leaf = { ___leaf: 'leaf' }
-type Join<T, K extends keyof T, P> = Leaf extends P ? { [i in K]: T[K] } : P
+type EndLeaf = { ___leaf: 'leaf' }
 
-export type Leaves<IncludeTransient extends boolean, T, P extends string | number | symbol = ''> = {
+type Join<Leaf1, Leaf1Key extends keyof Leaf1, Leaf2> = EndLeaf extends Leaf2
+  ? { [i in Leaf1Key]: Leaf1[Leaf1Key] }
+  : Leaf2
+
+type Tree<IncludeTransient extends boolean, Leaf, LeafKey extends string | number | symbol = ''> = {
   // if it's a folder we run the type check on it's schema key
-  0: T extends { schema: infer F } ? { [K in keyof F]: Join<F, K, F[K]> } : never
+  0: Leaf extends { schema: infer Schema } ? { [Key in keyof Schema]: Join<Schema, Key, Schema[Key]> } : never
   1: never
   // if the leaf is an object, we run the type check on each of its keys
   2: {
-    [i in P]: T extends { optional: true } ? PrimitiveToValue<T> | undefined : PrimitiveToValue<T>
+    [Key in LeafKey]: Leaf extends { optional: true } ? PrimitiveToValue<Leaf> | undefined : PrimitiveToValue<Leaf>
   }
   // recursivity
-  3: { [K in keyof T]: Join<T, K, Leaves<IncludeTransient, T[K], K>> }[keyof T]
+  3: { [Key in keyof Leaf]: Join<Leaf, Key, Tree<IncludeTransient, Leaf[Key], Key>> }[keyof Leaf]
   // dead end
-  4: Leaf
-}[P extends ''
+  4: EndLeaf
+}[LeafKey extends ''
   ? 3
-  : T extends FolderInput<unknown>
+  : Leaf extends FolderInput<unknown>
   ? 0
-  : T extends SpecialInput
+  : Leaf extends SpecialInput
   ? 1
-  : PrimitiveToValue<T> extends NotAPrimitiveType
-  ? T extends object
+  : PrimitiveToValue<Leaf> extends NotAPrimitiveType
+  ? Leaf extends object
     ? 3
     : 4
-  : T extends { onChange: any } // if an input has the onChange property then it's transient and isn't returned
+  : // if an input has the onChange property then it's transient and isn't returned
+  Leaf extends TransientOnChangeSchemaItemOptions
   ? IncludeTransient extends true
@@ -212,0 +236,0 @@ ? 2

src/useControls.ts

@@ -136,6 +136,12 @@ import { useEffect, useMemo, useCallback, useState, useRef } from 'react'
     const onChangePaths: Record<string, (v: any) => void> = {}
-    Object.values(mappedPaths).forEach(({ path, onChange }) => {
+    Object.values(mappedPaths).forEach(({ path, onChange, transient }) => {
       allPaths.push(path)
-      if (!!onChange) onChangePaths[path] = onChange
-      else renderPaths.push(path)
+      if (!!onChange) {
+        onChangePaths[path] = onChange
+        if (!transient) {
+          renderPaths.push(path)
+        }
+      } else {
+        renderPaths.push(path)
+      }
     })
@@ -142,0 +148,0 @@ return [allPaths, renderPaths, onChangePaths]

src/utils/input.ts

@@ -41,4 +41,4 @@ import { dequal } from 'dequal/lite'
   // parse generic options from input object
-  const { render, label, optional, disabled, hint, onChange, ...inputWithType } = _input
-  const commonOptions = { render, key, label: label ?? key, hint, ...mergedOptions }
+  const { render, label, optional, disabled, hint, onChange, transient, ...inputWithType } = _input
+  const commonOptions = { render, key, label: label ?? key, hint, transient: transient ?? !!onChange, ...mergedOptions }
 
@@ -75,3 +75,2 @@ let { type, ...input } = inputWithType
   const { type, input: parsedInput, options } = parsedInputAndOptions
-
   if (type) {
@@ -78,0 +77,0 @@ if (type in SpecialInputs)

No alert changes

Improved metrics

Total package byte prevSize

852504

increased by0.53%

Lines of code

25497

increased by0.41%

No dependency changes