leva - npm Package Compare versions

Comparing version 0.3.5 to 0.4.0

dist/declarations/src/components/Control/ControlInput.d.ts

@@ -6,2 +6,3 @@ /// <reference types="react" />
     valueKey: string;
+    path: string;
     value: V;
@@ -11,3 +12,3 @@ settings: Settings;
 };
-export declare function ControlInput<V, Settings extends object>({ type, label, valueKey, value, settings, setValue, }: ControlInputProps<V, Settings>): JSX.Element;
+export declare function ControlInput<V, Settings extends object>({ type, label, path, valueKey, value, settings, setValue, }: ControlInputProps<V, Settings>): JSX.Element;
 export {};

dist/declarations/src/components/Leva/Leva.d.ts

 /// <reference types="react" />
 import { LevaRootProps } from './LevaRoot';
-declare type LevaProps = Omit<Partial<LevaRootProps>, 'store'>;
-export declare function Leva({ theme, detached, collapsed, oneLineLabels, hideTitleBar, hidden, }: LevaProps): JSX.Element;
+declare type LevaProps = Omit<Partial<LevaRootProps>, 'store'> & {
+    isRoot?: boolean;
+};
+export declare function Leva({ theme, isRoot, detached, collapsed, oneLineLabels, hideTitleBar, hidden, }: LevaProps): JSX.Element | null;
 /**
@@ -6,0 +8,0 @@ * This hook is used by Leva useControls, and ensures that we spawn a Leva Panel

dist/declarations/src/components/Number/Number.d.ts

@@ -5,4 +5,6 @@ /// <reference types="react" />
 declare type NumberProps = LevaInputProps<number, InternalNumberSettings>;
-export declare function Number({ label, displayValue, onUpdate, onChange, settings }: NumberProps): JSX.Element;
+export declare function Number({ label, id, displayValue, onUpdate, onChange, settings }: NumberProps & {
+    id?: string;
+}): JSX.Element;
 export declare function NumberComponent(): JSX.Element;
 export {};

dist/declarations/src/components/ValueInput/ValueInput.d.ts

 import React from 'react';
 declare type ValueInputProps = {
+    id: string;
     value: string;
@@ -10,4 +11,4 @@ children?: React.ReactNode;
 } & React.ComponentProps<any>;
-export declare function ValueInput({ children, value, onUpdate, onChange, onKeyDown, type, ...props }: ValueInputProps): JSX.Element;
-export declare function NumberInput({ children, value, onUpdate, onChange }: ValueInputProps): JSX.Element;
+export declare function ValueInput({ children, value, onUpdate, onChange, onKeyDown, type, id, ...props }: ValueInputProps): JSX.Element;
+export declare function NumberInput({ children, id, value, onUpdate, onChange }: ValueInputProps): JSX.Element;
 export {};

dist/declarations/src/store.d.ts

@@ -10,3 +10,3 @@ import { UseStore } from 'zustand';
     setOrderedPaths: (newPaths: string[]) => void;
-    disposePaths: (paths: string[], removeOnDispose?: boolean) => void;
+    disposePaths: (paths: string[]) => void;
     dispose: () => void;
@@ -13,0 +13,0 @@ getVisiblePaths: () => string[];

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

@@ -24,2 +24,3 @@ /// <reference types="react" />
     label: string;
+    path?: string;
     displayValue: DisplayValue;
@@ -26,0 +27,0 @@ value: V;

package.json

 {
   "name": "leva",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "main": "dist/leva.cjs.js",
   "module": "dist/leva.esm.js",
+  "types": "dist/leva.cjs.d.ts",
   "license": "MIT",
@@ -17,3 +18,3 @@ "peerDependencies": {
       "index.ts",
-      "utilities.ts",
+      "utilities/index.ts",
       "plugins/index.ts"
@@ -20,0 +21,0 @@ ]

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

@@ -5,4 +5,4 @@ 'use strict';
 
-var Vector = require('../../dist/Vector-382d006f.cjs.dev.js');
-var vectorPlugin = require('../../dist/vector-plugin-ef77e8c1.cjs.dev.js');
+var Vector = require('../../dist/Vector-81ee2092.cjs.dev.js');
+var vectorPlugin = require('../../dist/vector-plugin-a5ff08c1.cjs.dev.js');
 require('dequal/lite');
@@ -9,0 +9,0 @@ require('react');

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

@@ -5,4 +5,4 @@ 'use strict';
 
-var Vector = require('../../dist/Vector-81b87c3b.cjs.prod.js');
-var vectorPlugin = require('../../dist/vector-plugin-62201701.cjs.prod.js');
+var Vector = require('../../dist/Vector-8db3cd35.cjs.prod.js');
+var vectorPlugin = require('../../dist/vector-plugin-1e40ad07.cjs.prod.js');
 require('dequal/lite');
@@ -9,0 +9,0 @@ require('react');

plugins/dist/leva-plugins.esm.js

@@ -1,3 +0,3 @@
-export { L as Label, P as Portal, R as Row, V as ValueInput, b as Vector, B as createPlugin, s as styled, p as useCanvas2d, e as useDrag, D as useDragNumber, a as useInputContext, d as useTh } from '../../dist/Vector-e6e938dd.esm.js';
-export { g as getVectorPlugin } from '../../dist/vector-plugin-f3eaf6e6.esm.js';
+export { L as Label, P as Portal, R as Row, V as ValueInput, b as Vector, B as createPlugin, s as styled, p as useCanvas2d, e as useDrag, D as useDragNumber, a as useInputContext, d as useTh } from '../../dist/Vector-37c95db0.esm.js';
+export { g as getVectorPlugin } from '../../dist/vector-plugin-9c1373b5.esm.js';
 import 'dequal/lite';
@@ -4,0 +4,0 @@ import 'react';

src/components/UI/StyledUI.ts

@@ -31,12 +31,8 @@ import { styled } from '../../styles'
   position: 'relative',
-  cursor: 'pointer',
   overflow: 'hidden',
 
-  '> label': {
-    cursor: 'pointer',
-  },
-
   '> svg': {
     display: 'none',
     marginLeft: '$colGap',
+    cursor: 'pointer',
     width: 15,
@@ -43,0 +39,0 @@ minWidth: 15,

src/hooks/useVisiblePaths.ts

@@ -9,11 +9,11 @@ import { useState, useEffect } from 'react'
 export const useVisiblePaths = (store: StoreType) => {
-  const [state, setState] = useState(store.getVisiblePaths())
+  const [paths, setPaths] = useState(store.getVisiblePaths())
 
   useEffect(() => {
-    setState(store.getVisiblePaths())
-    const unsub = store.useStore.subscribe(setState, store.getVisiblePaths, shallow)
+    setPaths(store.getVisiblePaths())
+    const unsub = store.useStore.subscribe(setPaths, store.getVisiblePaths, shallow)
     return () => unsub()
   }, [store])
 
-  return state
+  return paths
 }

src/store.ts

@@ -13,3 +13,3 @@ import { useMemo } from 'react'
   setOrderedPaths: (newPaths: string[]) => void
-  disposePaths: (paths: string[], removeOnDispose?: boolean) => void
+  disposePaths: (paths: string[]) => void
   dispose: () => void
@@ -107,11 +107,15 @@ getVisiblePaths: () => string[]
    */
-  this.disposePaths = (paths, removeOnDispose = false) => {
+  this.disposePaths = (paths) => {
     store.setState((s) => {
       const data = s.data
       paths.forEach((path) => {
-        if (path in data)
-          if (removeOnDispose) {
+        if (path in data) {
+          const input = data[path]
+          input.count--
+          if (input.count === 0 && input.type in SpecialInputTypes) {
+            // this makes sure special inputs such as buttons are proprely
+            // refreshed. This might need some attention though.
             delete data[path]
-            orderedPaths.delete(path)
-          } else data[path].count--
+          }
+        }
       })
@@ -118,0 +122,0 @@ return { data }

src/types/internal.ts

@@ -26,2 +26,3 @@ import { SpecialInput, RenderFn } from './public-types'
   label: string
+  path?: string
   displayValue: DisplayValue
@@ -36,3 +37,2 @@ value: V
   component: React.ComponentType
-
   format?: (value: any, settings: InternalSettings) => any
@@ -39,0 +39,0 @@ normalize?: (input: Input) => { value: Value; settings?: InternalSettings }

utilities/dist/leva-utilities.cjs.d.ts

@@ -1,1 +0,1 @@
-export * from "../../dist/declarations/src/utilities";
+export * from "../../dist/declarations/src/utilities/index";

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

@@ -6,3 +6,3 @@ 'use strict';
 var tc = require('tinycolor2');
-var vectorPlugin = require('../../dist/vector-plugin-ef77e8c1.cjs.dev.js');
+var vectorPlugin = require('../../dist/vector-plugin-a5ff08c1.cjs.dev.js');
 require('dequal/lite');
@@ -9,0 +9,0 @@ require('v8n');

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

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

utilities/dist/leva-utilities.esm.js

 export { default as tinycolor2 } from 'tinycolor2';
-export { e as clamp, h as debounce, x as formatVector, g as getVectorPlugin, q as getVectorSchema, t as getVectorType, n as normalizeKeyedNumberSettings, y as normalizeVector, o as orderKeys, m as pad, u as sanitizeVector, v as validateVector } from '../../dist/vector-plugin-f3eaf6e6.esm.js';
+export { c as clamp, d as debounce, m as formatVector, g as getVectorPlugin, h as getVectorSchema, j as getVectorType, n as normalizeKeyedNumberSettings, q as normalizeVector, o as orderKeys, f as pad, k as sanitizeVector, v as validateVector } from '../../dist/vector-plugin-9c1373b5.esm.js';
 import 'dequal/lite';
 import 'v8n';

No alert changes

Worsened metrics

Total package byte prevSize

1475787

decreased by-3.88%

Lines of code

24633

decreased by-3%

No dependency changes