leva - npm Package Compare versions

Comparing version 0.6.2 to 0.6.3

CHANGELOG.md

 # leva
 
+## 0.6.3
+
+### Patch Changes
+
+- fa909f0: Allow useControls to update settings and input options when dependency array changes. (See #124)
+
 ## 0.6.2
@@ -4,0 +10,0 @@

dist/declarations/src/components/Select/select-plugin.d.ts

@@ -1,4 +0,3 @@
-import type { InternalSelectSettings, SelectInput } from './select-types';
+import type { SelectInput } from './select-types';
 export declare const schema: (_o: any, s: any) => boolean;
-export declare const format: (value: any, { values }: InternalSelectSettings) => number;
 export declare const normalize: (input: SelectInput) => {
@@ -5,0 +4,0 @@ value: unknown;

dist/declarations/src/components/Select/StyledSelect.d.ts

@@ -86,3 +86,3 @@ export declare const SelectContainer: import("@stitches/react").StitchesComponentWithAutoCompleteForJSXElements<"div", {}, import("@stitches/core").TConditions & {
 }, import("@stitches/core").CSSPropertiesToTokenScale>;
-export declare const StyledSelect: import("@stitches/react").StitchesComponentWithAutoCompleteForJSXElements<"select", {}, import("@stitches/core").TConditions & {
+export declare const NativeSelect: import("@stitches/react").StitchesComponentWithAutoCompleteForJSXElements<"select", {}, import("@stitches/core").TConditions & {
     initial: "";
@@ -172,1 +172,86 @@ }, {
 }, import("@stitches/core").CSSPropertiesToTokenScale>;
+export declare const PresentationalSelect: import("@stitches/react").StitchesComponentWithAutoCompleteForJSXElements<"div", {}, import("@stitches/core").TConditions & {
+    initial: "";
+}, {
+    colors: {
+        leva__elevation1: string;
+        leva__elevation2: string;
+        leva__elevation3: string;
+        leva__accent1: string;
+        leva__accent2: string;
+        leva__accent3: string;
+        leva__highlight1: string;
+        leva__highlight2: string;
+        leva__highlight3: string;
+        leva__toolTipBackground: string;
+        leva__toolTipText: string;
+    };
+    radii: {
+        leva__xs: string;
+        leva__sm: string;
+        leva__lg: string;
+    };
+    space: {
+        leva__xs: string;
+        leva__sm: string;
+        leva__md: string;
+        leva__rowGap: string;
+        leva__colGap: string;
+    };
+    fonts: {
+        leva__mono: string;
+        leva__sans: string;
+    };
+    fontSizes: {
+        leva__root: string;
+        leva__toolTip: string;
+    };
+    sizes: {
+        leva__rootWidth: string;
+        leva__controlWidth: string;
+        leva__numberInputMinWidth: string;
+        leva__scrubberWidth: string;
+        leva__scrubberHeight: string;
+        leva__rowHeight: string;
+        leva__folderTitleHeight: string;
+        leva__checkboxSize: string;
+        leva__joystickWidth: string;
+        leva__joystickHeight: string;
+        leva__colorPickerWidth: string;
+        leva__colorPickerHeight: string;
+        leva__imagePreviewWidth: string;
+        leva__imagePreviewHeight: string;
+        leva__monitorHeight: string;
+        leva__titleBarHeight: string;
+    };
+    shadows: {
+        leva__level1: string;
+        leva__level2: string;
+    };
+    borderWidths: {
+        leva__root: string;
+        leva__input: string;
+        leva__focus: string;
+        leva__hover: string;
+        leva__active: string;
+        leva__folder: string;
+    };
+    fontWeights: {
+        leva__label: string;
+        leva__folder: string;
+        leva__button: string;
+    };
+}, {
+    $leva__flex: unknown;
+    $leva__flexCenter: unknown;
+    $leva__reset: unknown;
+    $leva__draggable: unknown;
+    $leva__focus: string;
+    $leva__focusWithin: string;
+    $leva__hover: string;
+    $leva__active: string;
+    $leva__inputStyle: string;
+    $leva__focusStyle: string;
+    $leva__hoverStyle: string;
+    $leva__activeStyle: string;
+}, import("@stitches/core").CSSPropertiesToTokenScale>;

dist/declarations/src/hooks/useInput.d.ts

 import type { DataItem } from '../types';
-declare type Input = Omit<DataItem, 'count'>;
+declare type Input = Omit<DataItem, '__refCount'>;
 /**
@@ -4,0 +4,0 @@ * Return all input (value and settings) properties at a given path.

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

@@ -15,3 +15,3 @@ import type { UseStore } from 'zustand';
     getData: () => Data;
-    addData: (newData: Data) => void;
+    addData: (newData: Data, override: boolean) => void;
     setValueAtPath: (path: string, value: any) => void;
@@ -25,3 +25,3 @@ setSettingsAtPath: (path: string, settings: any) => void;
 declare type Decorators = {
-    count: number;
+    __refCount: number;
     key: string;
@@ -28,0 +28,0 @@ label: string;

dist/declarations/src/utils/log.d.ts

@@ -9,5 +9,6 @@ export declare enum LevaErrors {
     THEME_ERROR = 6,
-    PATH_DOESNT_EXIST = 7
+    PATH_DOESNT_EXIST = 7,
+    INPUT_TYPE_OVERRIDE = 8
 }
-export declare const warn: (...args: [errorType: LevaErrors, type: string, path: string] | [errorType: LevaErrors, type: string, path: string] | [errorType: LevaErrors, path: string, value: unknown] | [errorType: LevaErrors, key: string, path: string, prevPath: string] | [errorType: LevaErrors, type: string] | [errorType: LevaErrors, value: unknown] | [errorType: LevaErrors, category: string, key: string] | [errorType: LevaErrors, path: string]) => void;
-export declare const log: (...args: [errorType: LevaErrors, type: string, path: string] | [errorType: LevaErrors, type: string, path: string] | [errorType: LevaErrors, path: string, value: unknown] | [errorType: LevaErrors, key: string, path: string, prevPath: string] | [errorType: LevaErrors, type: string] | [errorType: LevaErrors, value: unknown] | [errorType: LevaErrors, category: string, key: string] | [errorType: LevaErrors, path: string]) => void;
+export declare const warn: (...args: [errorType: LevaErrors, type: string, path: string] | [errorType: LevaErrors, type: string, path: string] | [errorType: LevaErrors, path: string, value: unknown] | [errorType: LevaErrors, key: string, path: string, prevPath: string] | [errorType: LevaErrors, type: string] | [errorType: LevaErrors, value: unknown] | [errorType: LevaErrors, category: string, key: string] | [errorType: LevaErrors, path: string] | [errorType: LevaErrors, type: string]) => void;
+export declare const log: (...args: [errorType: LevaErrors, type: string, path: string] | [errorType: LevaErrors, type: string, path: string] | [errorType: LevaErrors, path: string, value: unknown] | [errorType: LevaErrors, key: string, path: string, prevPath: string] | [errorType: LevaErrors, type: string] | [errorType: LevaErrors, value: unknown] | [errorType: LevaErrors, category: string, key: string] | [errorType: LevaErrors, path: string] | [errorType: LevaErrors, type: string]) => void;

dist/leva.esm.js

@@ -1,3 +0,3 @@
-import { p as pick, s as styled, u as useInputContext, R as Row, L as Label, C as Chevron, c as createInternalPlugin, _ as _objectSpread2, o as omit, V as ValueInput, P as Portal, O as Overlay, a as Vector, g as getVectorPlugin, b as useTransform, d as useTh, e as _extends, m as multiplyStep, f as clamp, h as _objectWithoutProperties, n as normalizeKeyedNumberSettings, i as useDrag$1, j as invertedRange, k as sanitizeStep, r as range, l as RangeWrapper, q as Range, I as Indicator, S as Scrubber, t as SpecialInputTypes, v as updateInput, w as warn, x as LevaErrors, y as normalizeInput, z as StyledTitle, A as useValue, B as Plugins, D as log, E as InputContext, F as StyledInputWrapper$1, G as useCanvas2d, H as useInput, J as StyledWrapper, K as StyledContent, M as useStoreContext, N as StyledFolder, Q as StyledInputRow, T as debounce, U as PanelSettingsContext, W as StoreContext, X as ThemeContext, Y as mergeTheme, Z as register, $ as number$1 } from './vector-plugin-e5d62763.esm.js';
-export { a0 as LevaStoreProvider, M as useStoreContext } from './vector-plugin-e5d62763.esm.js';
+import { p as pick, s as styled, u as useInputContext, R as Row, L as Label, C as Chevron, c as createInternalPlugin, _ as _objectSpread2, o as omit, V as ValueInput, P as Portal, O as Overlay, a as Vector, g as getVectorPlugin, b as useTransform, d as useTh, e as _extends, m as multiplyStep, f as clamp, h as _objectWithoutProperties, n as normalizeKeyedNumberSettings, i as useDrag$1, j as invertedRange, k as sanitizeStep, r as range, l as RangeWrapper, q as Range, I as Indicator, S as Scrubber, t as SpecialInputTypes, w as warn, v as LevaErrors, x as updateInput, y as normalizeInput, z as StyledTitle, A as useValue, B as Plugins, D as log, E as InputContext, F as StyledInputWrapper$1, G as useCanvas2d, H as useInput, J as StyledWrapper, K as StyledContent, M as useStoreContext, N as StyledFolder, Q as StyledInputRow, T as debounce, U as PanelSettingsContext, W as StoreContext, X as mergeTheme, Y as ThemeContext, Z as register, $ as number$1 } from './vector-plugin-2bfe46a4.esm.js';
+export { a0 as LevaStoreProvider, M as useStoreContext } from './vector-plugin-2bfe46a4.esm.js';
 import v8n from 'v8n';
@@ -51,6 +51,2 @@ import React, { useRef, useMemo, useLayoutEffect, useEffect, useState, useCallback, forwardRef, useImperativeHandle } from 'react';
 
-function useShallowMemo(fn, deps) {
-  return useMemo(fn, useCompareMemoize(deps, false));
-}
-
 function useToggle(toggled) {
@@ -165,7 +161,2 @@ const wrapperRef = useRef(null);
 }).test(s);
-const format$2 = (value, {
-  values
-}) => {
-  return values.indexOf(value);
-};
 const normalize$4 = input => {
@@ -204,3 +195,2 @@ let {
   schema: schema$5,
-  format: format$2,
   normalize: normalize$4
@@ -218,14 +208,25 @@ });
 });
-const StyledSelect = styled('select', {
-  $leva__reset: '',
+const NativeSelect = styled('select', {
+  position: 'absolute',
+  top: 0,
+  left: 0,
   width: '100%',
+  height: '100%',
+  opacity: 0
+});
+const PresentationalSelect = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
   height: '$leva__rowHeight',
   backgroundColor: '$leva__elevation3',
-  color: 'inherit',
-  borderStyle: 'none',
   borderRadius: '$leva__sm',
   padding: '0 $leva__sm',
   cursor: 'pointer',
-  $leva__hover: '',
-  $leva__focus: ''
+  [`${NativeSelect}:focus + &`]: {
+    $leva__focusStyle: ''
+  },
+  [`${NativeSelect}:hover + &`]: {
+    $leva__hoverStyle: ''
+  }
 });
@@ -240,13 +241,12 @@
   const {
-    keys,
-    values
+    keys
   } = settings;
-  return React.createElement(SelectContainer, null, React.createElement(StyledSelect, {
+  return React.createElement(SelectContainer, null, React.createElement(NativeSelect, {
     id: id,
     value: displayValue,
-    onChange: e => onUpdate(values[+e.currentTarget.value])
-  }, keys.map((key, index) => React.createElement("option", {
+    onChange: e => onUpdate(e.currentTarget.value)
+  }, keys.map(key => React.createElement("option", {
     key: key,
-    value: index
-  }, key))), React.createElement(Chevron, {
+    value: key
+  }, key))), React.createElement(PresentationalSelect, null, displayValue), React.createElement(Chevron, {
     toggled: true
@@ -1286,3 +1286,3 @@ }));
     orderedPaths.forEach(path => {
-      if (path in data && data[path].count > 0 && hiddenFolders.every(p => path.indexOf(p) === -1) && (!data[path].render || data[path].render(this.get))) visiblePaths.push(path);
+      if (path in data && data[path].__refCount > 0 && hiddenFolders.every(p => path.indexOf(p) === -1) && (!data[path].render || data[path].render(this.get))) visiblePaths.push(path);
     });
@@ -1307,5 +1307,5 @@ return visiblePaths;
           const input = data[path];
-          input.count--;
+          input.__refCount--;
 
-          if (input.count === 0 && input.type in SpecialInputTypes) {
+          if (input.__refCount === 0 && input.type in SpecialInputTypes) {
             delete data[path];
@@ -1337,10 +1337,30 @@ }
 
-  this.addData = newData => {
+  this.addData = (newData, override) => {
     store.setState(s => {
       const data = s.data;
-      Object.entries(newData).forEach(([path, value]) => {
-        const input = data[path];
-        if (!!input) input.count++;else data[path] = _objectSpread2(_objectSpread2({}, value), {}, {
-            count: 1
+      Object.entries(newData).forEach(([path, newInputData]) => {
+        let input = data[path];
+
+        if (!!input) {
+          const _ref = newInputData,
+                {
+            type,
+            value
+          } = _ref,
+                rest = _objectWithoutProperties(_ref, ["type", "value"]);
+
+          if (type !== input.type) {
+            warn(LevaErrors.INPUT_TYPE_OVERRIDE, type);
+          } else {
+            if (input.__refCount === 0 || override) {
+              Object.assign(input, rest);
+            }
+
+            input.__refCount++;
+          }
+        } else {
+          data[path] = _objectSpread2(_objectSpread2({}, newInputData), {}, {
+            __refCount: 1
           });
+        }
       });
@@ -2339,4 +2359,7 @@ return {
   const schemaIsFunction = typeof schema === 'function';
+  const depsChanged = useRef(false);
+  const firstRender = useRef(true);
 
-  const _schema = useShallowMemo(() => {
+  const _schema = useDeepMemo(() => {
+    depsChanged.current = true;
     const s = typeof schema === 'function' ? schema() : schema;
@@ -2362,3 +2385,6 @@ return folderName ? {
   useEffect(() => {
-    store.addData(initialData);
+    const shouldOverrideSettings = !firstRender.current && depsChanged.current;
+    store.addData(initialData, shouldOverrideSettings);
+    firstRender.current = false;
+    depsChanged.current = false;
     return () => store.disposePaths(paths);
@@ -2365,0 +2391,0 @@ }, [store, paths, initialData]);

package.json

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

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

@@ -6,3 +6,3 @@ 'use strict';
 var tc = require('tinycolor2');
-var vectorPlugin = require('../../dist/vector-plugin-16616ae5.cjs.dev.js');
+var vectorPlugin = require('../../dist/vector-plugin-19a8a46a.cjs.dev.js');
 require('dequal/lite');
@@ -9,0 +9,0 @@ require('react');

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

@@ -6,3 +6,3 @@ 'use strict';
 var tc = require('tinycolor2');
-var vectorPlugin = require('../../dist/vector-plugin-c3d481ff.cjs.prod.js');
+var vectorPlugin = require('../../dist/vector-plugin-a9c1be6c.cjs.prod.js');
 require('dequal/lite');
@@ -9,0 +9,0 @@ require('react');

plugin/dist/leva-plugin.esm.js

 export { default as tinycolor2 } from 'tinycolor2';
-export { L as Label, P as Portal, R as Row, t as SpecialInputTypes, V as ValueInput, a as Vector, f as clamp, a3 as createPlugin, T as debounce, a2 as evaluate, a8 as formatVector, g as getVectorPlugin, a5 as getVectorSchema, a6 as getVectorType, n as normalizeKeyedNumberSettings, a9 as normalizeVector, a1 as pad, a7 as sanitizeVector, s as styled, G as useCanvas2d, i as useDrag, a4 as useDragNumber, H as useInput, u as useInputContext, d as useTh, b as useTransform } from '../../dist/vector-plugin-e5d62763.esm.js';
+export { L as Label, P as Portal, R as Row, t as SpecialInputTypes, V as ValueInput, a as Vector, f as clamp, a3 as createPlugin, T as debounce, a2 as evaluate, a8 as formatVector, g as getVectorPlugin, a5 as getVectorSchema, a6 as getVectorType, n as normalizeKeyedNumberSettings, a9 as normalizeVector, a1 as pad, a7 as sanitizeVector, s as styled, G as useCanvas2d, i as useDrag, a4 as useDragNumber, H as useInput, u as useInputContext, d as useTh, b as useTransform } from '../../dist/vector-plugin-2bfe46a4.esm.js';
 import 'dequal/lite';
@@ -4,0 +4,0 @@ import 'react';

src/components/Select/select-plugin.ts

 import v8n from 'v8n'
-import type { InternalSelectSettings, SelectInput } from './select-types'
+import type { SelectInput } from './select-types'
 
@@ -12,6 +12,2 @@ // the options attribute is either an key value object or an array
 
-export const format = (value: any, { values }: InternalSelectSettings) => {
-  return values.indexOf(value)
-}
-
 export const normalize = (input: SelectInput) => {
@@ -18,0 +14,0 @@ let { value, options } = input

src/components/Select/StyledSelect.ts

@@ -13,14 +13,26 @@ import { styled } from '../../styles'
 
-export const StyledSelect = styled('select', {
-  $leva__reset: '',
+export const NativeSelect = styled('select', {
+  position: 'absolute',
+  top: 0,
+  left: 0,
   width: '100%',
+  height: '100%',
+  opacity: 0,
+})
+
+export const PresentationalSelect = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
   height: '$leva__rowHeight',
   backgroundColor: '$leva__elevation3',
-  color: 'inherit',
-  borderStyle: 'none',
   borderRadius: '$leva__sm',
   padding: '0 $leva__sm',
   cursor: 'pointer',
-  $leva__hover: '',
-  $leva__focus: '',
+  [`${NativeSelect}:focus + &`]: {
+    $leva__focusStyle: '',
+  },
+  [`${NativeSelect}:hover + &`]: {
+    $leva__hoverStyle: '',
+  },
 })

src/hooks/useInput.ts

@@ -8,7 +8,7 @@ import { useCallback, useState, useEffect } from 'react'
   if (!data[path]) return null
-  const { count, ...input } = data[path]
+  const { __refCount, ...input } = data[path]
   return input
 }
 
-type Input = Omit<DataItem, 'count'>
+type Input = Omit<DataItem, '__refCount'>
 
@@ -15,0 +15,0 @@ /**

src/store.ts

 import { useMemo } from 'react'
 import create from 'zustand'
 import { normalizeInput, join, updateInput, warn, LevaErrors } from './utils'
-import { SpecialInputTypes } from './types'
+import { DataInput, SpecialInputTypes } from './types'
 import type { Data, FolderSettings, State, StoreType } from './types'
@@ -25,3 +25,3 @@
    * For a given data structure, gets all paths for which inputs have
-   * a reference count superior to zero. This function is used by the
+   * a reference __refCount superior to zero. This function is used by the
    * root pane to only display the inputs that are consumed by mounted
@@ -58,3 +58,3 @@ * components.
         // if input is mounted
-        data[path].count > 0 &&
+        data[path].__refCount > 0 &&
         // if it's not included in a hidden folder
@@ -84,3 +84,3 @@ hiddenFolders.every((p) => path.indexOf(p) === -1) &&
    * When the useControls hook unmmounts, it will call this function that will
-   * decrease the count of all the inputs. When an input count reaches 0, it
+   * decrease the __refCount of all the inputs. When an input __refCount reaches 0, it
    * should no longer be displayed in the panel.
@@ -96,4 +96,4 @@ *
           const input = data[path]
-          input.count--
-          if (input.count === 0 && input.type in SpecialInputTypes) {
+          input.__refCount--
+          if (input.__refCount === 0 && input.type in SpecialInputTypes) {
             // this makes sure special inputs such as buttons are properly
@@ -127,18 +127,33 @@ // refreshed. This might need some attention though.
    * If an input path from the data already exists in the store,
-   * the function doesn't update the data but increments count
+   * the function doesn't update the data but increments __refCount
    * to keep track of how many components use that input key.
    *
+   * Uses depsChanged to trigger a recompute and update inputs
+   * settings if needed.
+   *
    * @param newData the data to update
+   * @param depsChanged to keep track of dependencies
    */
-  this.addData = (newData) => {
+  // TODO: TS errors.
+  this.addData = (newData, override) => {
     store.setState((s) => {
       const data = s.data
+      Object.entries(newData).forEach(([path, newInputData]) => {
+        let input = data[path]
 
-      Object.entries(newData).forEach(([path, value]) => {
-        const input = data[path]
-        // if an input already exists at the path, increment
-        // the reference count.
-        if (!!input) input.count++
-        // if not, create a path for the input.
-        else data[path] = { ...value, count: 1 }
+        // If an input already exists compare its values and increase the reference __refCount.
+        if (!!input) {
+          const { type, value, ...rest } = newInputData as DataInput
+          if (type !== input.type) {
+            warn(LevaErrors.INPUT_TYPE_OVERRIDE, type)
+          } else {
+            if (input.__refCount === 0 || override) {
+              Object.assign(input, rest)
+            }
+            // Else we increment the ref count
+            input.__refCount++
+          }
+        } else {
+          data[path] = { ...newInputData, __refCount: 1 }
+        }
       })
@@ -145,0 +160,0 @@

src/types/internal.ts

@@ -15,3 +15,3 @@ import type { UseStore } from 'zustand'
   getData: () => Data
-  addData: (newData: Data) => void
+  addData: (newData: Data, override: boolean) => void
   setValueAtPath: (path: string, value: any) => void
@@ -27,3 +27,3 @@ setSettingsAtPath: (path: string, settings: any) => void
 type Decorators = {
-  count: number
+  __refCount: number
   key: string
@@ -30,0 +30,0 @@ label: string

src/useControls.ts

@@ -1,5 +0,5 @@
-import { useEffect, useMemo, useCallback, useState } from 'react'
+import { useEffect, useMemo, useCallback, useState, useRef } from 'react'
 import { levaStore } from './store'
 import { folder } from './helpers'
-import { useShallowMemo, useValuesForPath } from './hooks'
+import { useDeepMemo, useValuesForPath } from './hooks'
 import { useRenderRoot } from './components/Leva'
@@ -95,5 +95,12 @@ import type { FolderSettings, Schema, SchemaToValues, StoreType } from './types'
 
+  // Keep track of deps to see if they changed and if there's need to recompute.
+  const depsChanged = useRef(false)
+  // We will only override the store settings and options when deps have changed
+  // and it isn't the first render
+  const firstRender = useRef(true)
+
   // Since the schema object would change on every render, we let the user have
   // control over when it should trigger a reset of the hook inputs.
-  const _schema = useShallowMemo(() => {
+  const _schema = useDeepMemo(() => {
+    depsChanged.current = true
     const s = typeof schema === 'function' ? schema() : schema
@@ -146,3 +153,9 @@ return folderName ? { [folderName]: folder(s, folderSettings) } : s
     // it breaks the ref from Monitor.
-    store.addData(initialData)
+
+    // we override the settings when deps have changed and this isn't the first
+    // render
+    const shouldOverrideSettings = !firstRender.current && depsChanged.current
+    store.addData(initialData, shouldOverrideSettings)
+    firstRender.current = false
+    depsChanged.current = false
     return () => store.disposePaths(paths)
@@ -149,0 +162,0 @@ }, [store, paths, initialData])

src/utils/log.ts

@@ -10,2 +10,3 @@ export enum LevaErrors {
   PATH_DOESNT_EXIST,
+  INPUT_TYPE_OVERRIDE,
 }
@@ -34,2 +35,4 @@
   ],
+  [LevaErrors.PATH_DOESNT_EXIST]: (path: string) => [`Error accessing the value at path \`${path}\``],
+  [LevaErrors.INPUT_TYPE_OVERRIDE]: (type: string) => [`Type cannot be overwritten on update (\`${type}\`)`],
 }
@@ -36,0 +39,0 @@

No alert changes

Improved metrics

Total package byte prevSize

927387

increased by1.09%

Lines of code

24729

increased by1.1%

No dependency changes