design-token-editor - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

lib/cjs/Context.d.ts

 import React from 'react';
 export type TokenEditorContextType = {
-    onValueChange: (token: string, newValue: string) => void;
-    tokenValues: {
-        [key: string]: string;
-    };
+    onValueChange: (token: string[], newValue: string) => void;
+    tokenValues: Map<string[], string>;
 };
 declare const TokenEditorContext: React.Context<TokenEditorContextType | null>;
 export default TokenEditorContext;

lib/cjs/TokenEditor.js

@@ -36,2 +36,11 @@ "use strict";
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -41,3 +50,2 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var lodash_set_1 = __importDefault(require("lodash.set"));
 var react_1 = __importStar(require("react"));
@@ -50,6 +58,5 @@ var clsx_1 = __importDefault(require("clsx"));
     viewMode: 'tokens',
-    values: {},
+    values: new Map(),
 };
 var reducer = function (state, action) {
-    var _a;
     switch (action.type) {
@@ -60,8 +67,14 @@ case 'setViewMode': {
         case 'changeValue': {
-            var _b = action.payload, token = _b.token, value = _b.value;
+            var _a = action.payload, token = _a.token, value = _a.value;
             var values = state.values;
-            var newValues = __assign(__assign({}, values), (_a = {}, _a[token] = value, _a));
+            // mutate existing object, but then make sure to make a new instance since React
+            // does reference comparison, not value (!). We prefer map as a datastructure since
+            // we can use arrays as keys.
             if (value === '') {
-                delete newValues[token];
+                values.delete(token);
             }
+            else {
+                values.set(token, value);
+            }
+            var newValues = new Map(values);
             return __assign(__assign({}, state), { values: newValues });
@@ -75,26 +88,35 @@ }
     var styleDictValues = {};
-    for (var _i = 0, _a = Object.entries(values); _i < _a.length; _i++) {
-        var _b = _a[_i], key = _b[0], value = _b[1];
+    values.forEach(function (value, tokenPathBits) {
         if (value === '')
-            continue;
-        (0, lodash_set_1.default)(styleDictValues, key, { value: value });
-    }
+            return;
+        var parent = styleDictValues;
+        // deep assign for each bit in tokenPathBits
+        for (var _i = 0, tokenPathBits_1 = tokenPathBits; _i < tokenPathBits_1.length; _i++) {
+            var bit = tokenPathBits_1[_i];
+            if (!parent[bit]) {
+                parent[bit] = {};
+            }
+            parent = parent[bit];
+        }
+        parent.value = value;
+    });
     return styleDictValues;
 };
-var fromStyleDictValues = function (values) {
-    var flatMap = {};
+var fromStyleDictValues = function (values, parentPath) {
+    if (parentPath === void 0) { parentPath = []; }
+    var valueMap = new Map();
     Object.entries(values).forEach(function (_a) {
         var k = _a[0], v = _a[1];
+        var path = __spreadArray(__spreadArray([], parentPath, true), [k], false);
         if ((0, util_1.isDesignToken)(v)) {
-            flatMap[k] = v.value;
+            valueMap.set(path, v.value);
         }
         else if ((0, util_1.isContainer)(v)) {
-            var nested = fromStyleDictValues(v);
-            Object.entries(nested).forEach(function (_a) {
-                var nk = _a[0], nv = _a[1];
-                flatMap["".concat(k, ".").concat(nk)] = nv;
+            var nested = fromStyleDictValues(v, path);
+            nested.forEach(function (value, key) {
+                valueMap.set(key, value);
             });
         }
     });
-    return flatMap;
+    return valueMap;
 };
@@ -101,0 +123,0 @@ var ViewModeItem = function (_a) {

lib/cjs/TokenRow.js

@@ -54,3 +54,3 @@ "use strict";
     var tokenPath = path.join('.');
-    var currentValue = ((_b = context === null || context === void 0 ? void 0 : context.tokenValues) === null || _b === void 0 ? void 0 : _b[tokenPath]) || value;
+    var currentValue = ((_b = context === null || context === void 0 ? void 0 : context.tokenValues) === null || _b === void 0 ? void 0 : _b.get(path)) || value;
     var currentValueIsColor = (0, ColorPreview_1.isColor)(currentValue);
@@ -70,7 +70,7 @@ var originalValueIsColor = (0, ColorPreview_1.isColor)(original.value);
             inputProps = {
-                value: (context === null || context === void 0 ? void 0 : context.tokenValues[tokenPath]) || (currentValueIsColor ? currentColor : ''),
+                value: (context === null || context === void 0 ? void 0 : context.tokenValues.get(path)) || (currentValueIsColor ? currentColor : ''),
             };
             if (context) {
                 inputProps.onChange = function (e) {
-                    return context.onValueChange(tokenPath, e.target.value);
+                    return context.onValueChange(path, e.target.value);
                 };
@@ -77,0 +77,0 @@ }

lib/cjs/TokensTable.js

@@ -50,6 +50,13 @@ "use strict";
 var react_1 = __importStar(require("react"));
-var lodash_isequal_1 = __importDefault(require("lodash.isequal"));
 var TokensBlock_1 = __importDefault(require("./TokensBlock"));
 var util_1 = require("./util");
 var TokenFilter_1 = __importStar(require("./TokenFilter"));
+var areScopesEqual = function (scope1, scope2) {
+    // compare by checking if all elements are the same. An element could have a period
+    // character inside, so simply joining and comparing strings could lead to false
+    // positives.
+    if (scope1.length !== scope2.length)
+        return false;
+    return scope1.every(function (item, index) { return scope2[index] === item; });
+};
 var TokensTableRows = function (_a) {
@@ -72,5 +79,6 @@ var container = _a.container, parentScopes = _a.parentScopes, _b = _a.limitTo, limitTo = _b === void 0 ? '' : _b, _c = _a.closedScopes, closedScopes = _c === void 0 ? [] : _c, onToggle = _a.onToggle;
     var leafNodesToRender = leafNodes.filter(function (token) {
-        var tokenPath = token.path.join('.');
         var isHidden = closedScopes.some(function (closedScope) {
-            return tokenPath.startsWith(closedScope.join('.'));
+            var scopeSize = closedScope.length;
+            var tokenScopePrefix = token.path.slice(0, scopeSize);
+            return areScopesEqual(closedScope, tokenScopePrefix);
         });
@@ -91,3 +99,10 @@ return !isHidden;
         var isHidden = closedScopes.some(function (closedScope) {
-            return containerPath.startsWith("".concat(closedScope.join('.'), "."));
+            var scopeSize = closedScope.length;
+            var tokenScopePrefix = containerScope.slice(0, scopeSize);
+            if (!areScopesEqual(closedScope, tokenScopePrefix)) {
+                return false;
+            }
+            // display the nodes that are one level deeper so that they can be clicked to
+            // expand/collapse
+            return containerScope.length - scopeSize === 1;
         });
@@ -125,3 +140,3 @@ if (isHidden)
     var onToggle = function (scope) {
-        var isClosed = closedScopes.some(function (_scope) { return (0, lodash_isequal_1.default)(_scope, scope); });
+        var isClosed = closedScopes.some(function (_scope) { return areScopesEqual(_scope, scope); });
         if (!isClosed) {
@@ -146,3 +161,3 @@ setClosedScopes(__spreadArray(__spreadArray([], closedScopes, true), [scope], false));
         });
-        var newClosedScopes = __spreadArray(__spreadArray([], closedScopes.filter(function (_scope) { return !(0, lodash_isequal_1.default)(_scope, scope); }), true), nestedScopes, true);
+        var newClosedScopes = __spreadArray(__spreadArray([], closedScopes.filter(function (_scope) { return !areScopesEqual(_scope, scope); }), true), nestedScopes, true);
         setClosedScopes(newClosedScopes);
@@ -149,0 +164,0 @@ return;

lib/cjs/util.d.ts

@@ -1,6 +0,6 @@
-import { JSONType } from './types';
-export declare const isDesignToken: (node: JSONType) => boolean | "" | 0 | null;
+import { JSONType, DesignToken, DesignTokenContainer } from './types';
+export declare function isDesignToken<T extends JSONType = DesignToken>(node: JSONType): node is T;
 /**
  * Check if the node is a container that has _some_ design token leaf node.
  */
-export declare const isContainer: (node: JSONType) => boolean;
+export declare const isContainer: (node: JSONType) => node is DesignTokenContainer;

lib/cjs/util.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isContainer = exports.isDesignToken = void 0;
-var isDesignToken = function (node) {
-    return node && typeof node === 'object' && 'value' in node;
-};
+function isDesignToken(node) {
+    // rule out null, false...
+    if (!node)
+        return false;
+    // rule out primitives
+    if (typeof node !== 'object')
+        return false;
+    return 'value' in node;
+}
 exports.isDesignToken = isDesignToken;
@@ -15,3 +21,3 @@ /**
     var children = Object.values(node);
-    var hasDesignTokens = children.some(function (child) { return (0, exports.isDesignToken)(child); });
+    var hasDesignTokens = children.some(function (child) { return isDesignToken(child); });
     if (hasDesignTokens)
@@ -18,0 +24,0 @@ return true;

lib/esm/Context.d.ts

 import React from 'react';
 export type TokenEditorContextType = {
-    onValueChange: (token: string, newValue: string) => void;
-    tokenValues: {
-        [key: string]: string;
-    };
+    onValueChange: (token: string[], newValue: string) => void;
+    tokenValues: Map<string[], string>;
 };
 declare const TokenEditorContext: React.Context<TokenEditorContextType | null>;
 export default TokenEditorContext;

lib/esm/TokenEditor.js

@@ -12,3 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
-import set from 'lodash.set';
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import React, { useEffect, useReducer } from 'react';
@@ -21,6 +29,5 @@ import clsx from 'clsx';
     viewMode: 'tokens',
-    values: {},
+    values: new Map(),
 };
 var reducer = function (state, action) {
-    var _a;
     switch (action.type) {
@@ -31,8 +38,14 @@ case 'setViewMode': {
         case 'changeValue': {
-            var _b = action.payload, token = _b.token, value = _b.value;
+            var _a = action.payload, token = _a.token, value = _a.value;
             var values = state.values;
-            var newValues = __assign(__assign({}, values), (_a = {}, _a[token] = value, _a));
+            // mutate existing object, but then make sure to make a new instance since React
+            // does reference comparison, not value (!). We prefer map as a datastructure since
+            // we can use arrays as keys.
             if (value === '') {
-                delete newValues[token];
+                values.delete(token);
             }
+            else {
+                values.set(token, value);
+            }
+            var newValues = new Map(values);
             return __assign(__assign({}, state), { values: newValues });
@@ -46,26 +59,35 @@ }
     var styleDictValues = {};
-    for (var _i = 0, _a = Object.entries(values); _i < _a.length; _i++) {
-        var _b = _a[_i], key = _b[0], value = _b[1];
+    values.forEach(function (value, tokenPathBits) {
         if (value === '')
-            continue;
-        set(styleDictValues, key, { value: value });
-    }
+            return;
+        var parent = styleDictValues;
+        // deep assign for each bit in tokenPathBits
+        for (var _i = 0, tokenPathBits_1 = tokenPathBits; _i < tokenPathBits_1.length; _i++) {
+            var bit = tokenPathBits_1[_i];
+            if (!parent[bit]) {
+                parent[bit] = {};
+            }
+            parent = parent[bit];
+        }
+        parent.value = value;
+    });
     return styleDictValues;
 };
-var fromStyleDictValues = function (values) {
-    var flatMap = {};
+var fromStyleDictValues = function (values, parentPath) {
+    if (parentPath === void 0) { parentPath = []; }
+    var valueMap = new Map();
     Object.entries(values).forEach(function (_a) {
         var k = _a[0], v = _a[1];
+        var path = __spreadArray(__spreadArray([], parentPath, true), [k], false);
         if (isDesignToken(v)) {
-            flatMap[k] = v.value;
+            valueMap.set(path, v.value);
         }
         else if (isContainer(v)) {
-            var nested = fromStyleDictValues(v);
-            Object.entries(nested).forEach(function (_a) {
-                var nk = _a[0], nv = _a[1];
-                flatMap["".concat(k, ".").concat(nk)] = nv;
+            var nested = fromStyleDictValues(v, path);
+            nested.forEach(function (value, key) {
+                valueMap.set(key, value);
             });
         }
     });
-    return flatMap;
+    return valueMap;
 };
@@ -72,0 +94,0 @@ var ViewModeItem = function (_a) {

lib/esm/TokenRow.js

@@ -26,3 +26,3 @@ var __assign = (this && this.__assign) || function () {
     var tokenPath = path.join('.');
-    var currentValue = ((_b = context === null || context === void 0 ? void 0 : context.tokenValues) === null || _b === void 0 ? void 0 : _b[tokenPath]) || value;
+    var currentValue = ((_b = context === null || context === void 0 ? void 0 : context.tokenValues) === null || _b === void 0 ? void 0 : _b.get(path)) || value;
     var currentValueIsColor = isColor(currentValue);
@@ -42,7 +42,7 @@ var originalValueIsColor = isColor(original.value);
             inputProps = {
-                value: (context === null || context === void 0 ? void 0 : context.tokenValues[tokenPath]) || (currentValueIsColor ? currentColor : ''),
+                value: (context === null || context === void 0 ? void 0 : context.tokenValues.get(path)) || (currentValueIsColor ? currentColor : ''),
             };
             if (context) {
                 inputProps.onChange = function (e) {
-                    return context.onValueChange(tokenPath, e.target.value);
+                    return context.onValueChange(path, e.target.value);
                 };
@@ -49,0 +49,0 @@ }

lib/esm/TokensTable.js

@@ -22,6 +22,13 @@ var __assign = (this && this.__assign) || function () {
 import React, { useState, useReducer } from 'react';
-import isEqual from 'lodash.isequal';
 import TokensBlock from './TokensBlock';
 import { isDesignToken, isContainer } from './util';
 import TokenFilter, { applyFilters } from './TokenFilter';
+var areScopesEqual = function (scope1, scope2) {
+    // compare by checking if all elements are the same. An element could have a period
+    // character inside, so simply joining and comparing strings could lead to false
+    // positives.
+    if (scope1.length !== scope2.length)
+        return false;
+    return scope1.every(function (item, index) { return scope2[index] === item; });
+};
 var TokensTableRows = function (_a) {
@@ -44,5 +51,6 @@ var container = _a.container, parentScopes = _a.parentScopes, _b = _a.limitTo, limitTo = _b === void 0 ? '' : _b, _c = _a.closedScopes, closedScopes = _c === void 0 ? [] : _c, onToggle = _a.onToggle;
     var leafNodesToRender = leafNodes.filter(function (token) {
-        var tokenPath = token.path.join('.');
         var isHidden = closedScopes.some(function (closedScope) {
-            return tokenPath.startsWith(closedScope.join('.'));
+            var scopeSize = closedScope.length;
+            var tokenScopePrefix = token.path.slice(0, scopeSize);
+            return areScopesEqual(closedScope, tokenScopePrefix);
         });
@@ -63,3 +71,10 @@ return !isHidden;
         var isHidden = closedScopes.some(function (closedScope) {
-            return containerPath.startsWith("".concat(closedScope.join('.'), "."));
+            var scopeSize = closedScope.length;
+            var tokenScopePrefix = containerScope.slice(0, scopeSize);
+            if (!areScopesEqual(closedScope, tokenScopePrefix)) {
+                return false;
+            }
+            // display the nodes that are one level deeper so that they can be clicked to
+            // expand/collapse
+            return containerScope.length - scopeSize === 1;
         });
@@ -97,3 +112,3 @@ if (isHidden)
     var onToggle = function (scope) {
-        var isClosed = closedScopes.some(function (_scope) { return isEqual(_scope, scope); });
+        var isClosed = closedScopes.some(function (_scope) { return areScopesEqual(_scope, scope); });
         if (!isClosed) {
@@ -118,3 +133,3 @@ setClosedScopes(__spreadArray(__spreadArray([], closedScopes, true), [scope], false));
         });
-        var newClosedScopes = __spreadArray(__spreadArray([], closedScopes.filter(function (_scope) { return !isEqual(_scope, scope); }), true), nestedScopes, true);
+        var newClosedScopes = __spreadArray(__spreadArray([], closedScopes.filter(function (_scope) { return !areScopesEqual(_scope, scope); }), true), nestedScopes, true);
         setClosedScopes(newClosedScopes);
@@ -121,0 +136,0 @@ return;

lib/esm/util.d.ts

@@ -1,6 +0,6 @@
-import { JSONType } from './types';
-export declare const isDesignToken: (node: JSONType) => boolean | "" | 0 | null;
+import { JSONType, DesignToken, DesignTokenContainer } from './types';
+export declare function isDesignToken<T extends JSONType = DesignToken>(node: JSONType): node is T;
 /**
  * Check if the node is a container that has _some_ design token leaf node.
  */
-export declare const isContainer: (node: JSONType) => boolean;
+export declare const isContainer: (node: JSONType) => node is DesignTokenContainer;

lib/esm/util.js

@@ -1,4 +0,10 @@
-export var isDesignToken = function (node) {
-    return node && typeof node === 'object' && 'value' in node;
-};
+export function isDesignToken(node) {
+    // rule out null, false...
+    if (!node)
+        return false;
+    // rule out primitives
+    if (typeof node !== 'object')
+        return false;
+    return 'value' in node;
+}
 /**
@@ -5,0 +11,0 @@ * Check if the node is a container that has _some_ design token leaf node.

lib/tokens/index.js

 /**
  * Do not edit directly
- * Generated on Wed, 29 Nov 2023 11:08:43 GMT
+ * Generated on Mon, 12 Feb 2024 21:30:10 GMT
  */
@@ -5,0 +5,0 @@

lib/tokens/tokens.js

 /**
  * Do not edit directly
- * Generated on Wed, 29 Nov 2023 11:08:43 GMT
+ * Generated on Mon, 12 Feb 2024 21:30:10 GMT
  */
@@ -5,0 +5,0 @@

package.json

 {
   "name": "design-token-editor",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "A react component to view/edit design token values",
@@ -65,4 +65,2 @@ "main": "./lib/cjs/index.js",
     "@types/color": "^3.0.3",
-    "@types/lodash.isequal": "^4.5.6",
-    "@types/lodash.set": "^4.3.7",
     "@types/react": "^18.0.27",
@@ -89,6 +87,4 @@ "@types/react-dom": "^18.0.10",
     "clsx": "^1.2.1",
-    "color": "^4.2.3",
-    "lodash.isequal": "^4.5.0",
-    "lodash.set": "^4.3.2"
+    "color": "^4.2.3"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

114170

3.15%

Dependency count

4

-33.33%

Dev dependency count

25

-7.41%

Lines of code

2332

3.64%

Dependency changes

• - Removed

  lodash.isequal@^4.5.0

• - Removed

  lodash.set@^4.3.2

• - Removed

  lodash.isequal@4.5.0
  (transitive)

• - Removed

  lodash.set@4.3.2
  (transitive)