react-vac - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/index.js

@@ -57,2 +57,4 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+var _excluded = ["name", "data", "trace", "listTrace", "customEvent", "hidden", "maxWidth", "maxHeight", "useValue", "useDefaultValue", "useList", "useEach"];
+
 var VAC = function VAC(_ref) {
@@ -81,3 +83,3 @@ var name = _ref.name,
       useEach = _ref$useEach === void 0 ? null : _ref$useEach,
-      modeEvents = _objectWithoutPropertiesLoose(_ref, ["name", "data", "trace", "listTrace", "customEvent", "hidden", "maxWidth", "maxHeight", "useValue", "useDefaultValue", "useList", "useEach"]);
+      modeEvents = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -88,3 +90,3 @@ if (hidden || !name && data === undefined) {
 
-  var dataIsArray = data instanceof Array;
+  var dataIsArray = Array.isArray(data);
   var validData = typeof data === 'object' && !dataIsArray && data !== null;
@@ -100,2 +102,4 @@
 
+  var targetList = dataIsArray ? data : propList;
+
   var _genCallbacks = genCallbacks(modeEvents, propsData),
@@ -105,8 +109,8 @@ callbacksMap = _genCallbacks[0],
 
-  var validList = propList instanceof Array;
-  var lengthInfo = validList ? " (length : " + propList.length + ")" : '';
+  var validList = Array.isArray(targetList);
+  var lengthInfo = !dataIsArray && validList ? " (length : " + targetList.length + ")" : '';
   var validName = typeof name === 'string' && name !== '';
   var viewName = "" + (validName ? name : '') + lengthInfo;
   var viewData = validData ? propsData : data;
-  var viewPrefix = validList ? 'List Props' : validData ? 'Props' : 'Log';
+  var viewPrefix = !dataIsArray && validList ? 'List Props' : validData ? 'Props' : 'Log';
   var viewTrace = getTraceList(trace);
@@ -128,4 +132,7 @@ var validViewName = Boolean(viewName);
   }, validViewName && /*#__PURE__*/React.createElement("h5", {
-    style: style.title
-  }, viewName), /*#__PURE__*/React.createElement("div", {
+    style: style.title,
+    dangerouslySetInnerHTML: {
+      __html: viewName
+    }
+  }), /*#__PURE__*/React.createElement("div", {
     style: viewScrollStyle
@@ -142,3 +149,3 @@ }, /*#__PURE__*/React.createElement(View, {
     callbackNames: callbackNames
-  }), loop(View, propList, eachView, emptyList, !validList)));
+  }), loop(View, targetList, eachView, emptyList, !validList)));
 };
@@ -164,3 +171,3 @@
   var jsonData = validData ? jsonFilter(data, trace) : data;
-  var json = JSON.stringify(jsonData) || (data === '' ? '' : String(data));
+  var json = beautifyJson(JSON.stringify(jsonData) || (data === '' ? '' : String(data)));
 
@@ -196,3 +203,3 @@ var checkCallback = function checkCallback(_ref4) {
   var showLine = useLine && hasContents;
-  var viewPrefix = prefix !== '' && "[" + prefix + "]: ";
+  var viewPrefix = prefix !== '' ? "[" + prefix + "]: " : '';
   return /*#__PURE__*/React.createElement("div", {
@@ -211,4 +218,11 @@ style: style.ui
   }, loop(Btn, callbacks, eachBtn)), showJson && /*#__PURE__*/React.createElement("p", {
-    style: style.json
-  }, viewPrefix, json));
+    style: style.json,
+    dangerouslySetInnerHTML: {
+      __html: "" + viewPrefix + json
+    },
+    role: "button",
+    onClick: function onClick() {
+      return console && typeof console.log === 'function' && console.log(jsonData);
+    }
+  }));
 };
@@ -221,6 +235,18 @@
     style: style.button,
-    onClick: onClick
+    onClick: onClick,
+    onMouseDown: onActiveBtn,
+    onTouchStart: onActiveBtn,
+    onMouseUp: onInactiveBtn,
+    onTouchEnd: onInactiveBtn
   }, label);
 };
 
+var onActiveBtn = function onActiveBtn(event) {
+  return event.target.style.backgroundColor = BTN_ACTIVE;
+};
+
+var onInactiveBtn = function onInactiveBtn(event) {
+  return event.target.style.backgroundColor = BTN_BG_COLOR;
+};
+
 var eachBtn = function eachBtn(_ref7) {
@@ -285,2 +311,19 @@ var label = _ref7[0],
 
+var beautifyJson = function beautifyJson(json) {
+  return stripTag(json).replace(REG_KEY, callbackKey).replace(REG_VALUE, callbackValue).replace(REG_ARRAY, callbackValue);
+};
+
+var stripTag = function stripTag(str) {
+  return str.replace(REG_QUOAT, '"').replace(REG_LT, '<').replace(REG_GT, '>');
+};
+
+var callbackKey = function callbackKey(str, before, key, after) {
+  return before + "<span style=\"color:#9bdeb5;\">" + key + "</span>" + after;
+};
+
+var callbackValue = function callbackValue(str, before, value) {
+  var color = value.charAt(0) === '"' ? '#ffb061' : '#b598d6';
+  return before + "<span style=\"color:" + color + ";\">" + value + "</span>";
+};
+
 var EMPTY_DATA = {};
@@ -293,2 +336,8 @@ var EMPTY_ARRAY = [];
 
+var REG_QUOAT = /\\"/g;
+var REG_LT = /</g;
+var REG_GT = />/g;
+var REG_KEY = /([{,]\s*)("[^"]+")(\s*:)/g;
+var REG_VALUE = /(<\/span>\s*:\s*)("[^"]*"|[^{[,}]*)/g;
+var REG_ARRAY = /([[,])("[^"]*"|[^",]+)(?=[,\]])/g;
 var REG_SPLIT = /[\s,]+/;
@@ -299,14 +348,2 @@ var INPUT_EVENTS = "\nonKeyDown\nonKeyUp\nonKeyPress\nonChange\nonFocus\nonBlur\nonSelect\n".trim().split(REG_SPLIT).reduce(function (events, event) {
 }, {});
-var VACList = function VACList(props) {
-  return /*#__PURE__*/React.createElement(VAC, _extends({
-    useList: "list",
-    useEach: "each"
-  }, props));
-};
-var VACInput = function VACInput(props) {
-  return /*#__PURE__*/React.createElement(VAC, _extends({
-    useValue: "value",
-    useDefaultValue: "defaultValue"
-  }, INPUT_EVENTS, props));
-};
 
@@ -336,3 +373,3 @@ var loop = function loop(Item, list, each, instead, hidden) {
 
-  var datas = list instanceof Array ? list : null;
+  var datas = Array.isArray(list) ? list : null;
   return Item && datas && datas.length > 0 ? datas.map(function (data, index) {
@@ -346,7 +383,9 @@ var props = each(data, index);
 
-var TITLE_COLOR = '#fffdba';
-var BORDER_COLOR = '#354f63';
+var TITLE_COLOR = '#ede080';
+var BORDER_COLOR = '#00111f';
+var LINE_COLOR = '#354f63';
 var BG_COLOR = '#0c2233';
 var BTN_BG_COLOR = '#4ebded';
-var JSON_COLOR = '#ffc478';
+var BTN_ACTIVE = '#0074a6';
+var JSON_COLOR = '#aaa';
 var JSON_BG_COLOR = '#05070d';
@@ -375,2 +414,3 @@ var FONT_SIZE = 14;
     fontSize: FONT_SIZE + 3 + "px",
+    textAlign: 'left',
     color: TITLE_COLOR
@@ -397,3 +437,3 @@ },
     border: 'none',
-    backgroundColor: BORDER_COLOR
+    backgroundColor: LINE_COLOR
   },
@@ -407,3 +447,3 @@ textarea: {
     borderRadius: '4px',
-    border: "1px solid " + BORDER_COLOR,
+    border: "1px solid " + LINE_COLOR,
     outline: 'none',
@@ -451,9 +491,30 @@ color: '#444',
     textAlign: 'left',
-    wordBreak: 'break-all'
+    wordBreak: 'break-all',
+    cursor: 'pointer'
   }
 };
 
+var withPreset = function withPreset(presetName, presetProps) {
+  var namePrefix = presetName ? "<span style=\"color:#ff745c;\">" + presetName + "</span>" : '';
+  return function (props) {
+    return VAC(_extends({}, presetProps, props, {
+      name: "" + namePrefix + (namePrefix && props.name ? ' | ' : '') + stripTag(props.name)
+    }));
+  };
+};
+
+var VACList = withPreset('@List', {
+  useList: 'list',
+  useEach: 'each'
+});
+var VACInput = withPreset('@Input', _extends({
+  useValue: 'value',
+  useDefaultValue: 'defaultValue'
+}, INPUT_EVENTS));
+
+exports.VAC = VAC;
 exports.VACInput = VACInput;
 exports.VACList = VACList;
 exports.default = VAC;
+exports.withPreset = withPreset;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -55,2 +55,4 @@ import React from 'react';
 
+var _excluded = ["name", "data", "trace", "listTrace", "customEvent", "hidden", "maxWidth", "maxHeight", "useValue", "useDefaultValue", "useList", "useEach"];
+
 var VAC = function VAC(_ref) {
@@ -79,3 +81,3 @@ var name = _ref.name,
       useEach = _ref$useEach === void 0 ? null : _ref$useEach,
-      modeEvents = _objectWithoutPropertiesLoose(_ref, ["name", "data", "trace", "listTrace", "customEvent", "hidden", "maxWidth", "maxHeight", "useValue", "useDefaultValue", "useList", "useEach"]);
+      modeEvents = _objectWithoutPropertiesLoose(_ref, _excluded);
 
@@ -86,3 +88,3 @@ if (hidden || !name && data === undefined) {
 
-  var dataIsArray = data instanceof Array;
+  var dataIsArray = Array.isArray(data);
   var validData = typeof data === 'object' && !dataIsArray && data !== null;
@@ -98,2 +100,4 @@
 
+  var targetList = dataIsArray ? data : propList;
+
   var _genCallbacks = genCallbacks(modeEvents, propsData),
@@ -103,8 +107,8 @@ callbacksMap = _genCallbacks[0],
 
-  var validList = propList instanceof Array;
-  var lengthInfo = validList ? " (length : " + propList.length + ")" : '';
+  var validList = Array.isArray(targetList);
+  var lengthInfo = !dataIsArray && validList ? " (length : " + targetList.length + ")" : '';
   var validName = typeof name === 'string' && name !== '';
   var viewName = "" + (validName ? name : '') + lengthInfo;
   var viewData = validData ? propsData : data;
-  var viewPrefix = validList ? 'List Props' : validData ? 'Props' : 'Log';
+  var viewPrefix = !dataIsArray && validList ? 'List Props' : validData ? 'Props' : 'Log';
   var viewTrace = getTraceList(trace);
@@ -126,4 +130,7 @@ var validViewName = Boolean(viewName);
   }, validViewName && /*#__PURE__*/React.createElement("h5", {
-    style: style.title
-  }, viewName), /*#__PURE__*/React.createElement("div", {
+    style: style.title,
+    dangerouslySetInnerHTML: {
+      __html: viewName
+    }
+  }), /*#__PURE__*/React.createElement("div", {
     style: viewScrollStyle
@@ -140,3 +147,3 @@ }, /*#__PURE__*/React.createElement(View, {
     callbackNames: callbackNames
-  }), loop(View, propList, eachView, emptyList, !validList)));
+  }), loop(View, targetList, eachView, emptyList, !validList)));
 };
@@ -162,3 +169,3 @@
   var jsonData = validData ? jsonFilter(data, trace) : data;
-  var json = JSON.stringify(jsonData) || (data === '' ? '' : String(data));
+  var json = beautifyJson(JSON.stringify(jsonData) || (data === '' ? '' : String(data)));
 
@@ -194,3 +201,3 @@ var checkCallback = function checkCallback(_ref4) {
   var showLine = useLine && hasContents;
-  var viewPrefix = prefix !== '' && "[" + prefix + "]: ";
+  var viewPrefix = prefix !== '' ? "[" + prefix + "]: " : '';
   return /*#__PURE__*/React.createElement("div", {
@@ -209,4 +216,11 @@ style: style.ui
   }, loop(Btn, callbacks, eachBtn)), showJson && /*#__PURE__*/React.createElement("p", {
-    style: style.json
-  }, viewPrefix, json));
+    style: style.json,
+    dangerouslySetInnerHTML: {
+      __html: "" + viewPrefix + json
+    },
+    role: "button",
+    onClick: function onClick() {
+      return console && typeof console.log === 'function' && console.log(jsonData);
+    }
+  }));
 };
@@ -219,6 +233,18 @@
     style: style.button,
-    onClick: onClick
+    onClick: onClick,
+    onMouseDown: onActiveBtn,
+    onTouchStart: onActiveBtn,
+    onMouseUp: onInactiveBtn,
+    onTouchEnd: onInactiveBtn
   }, label);
 };
 
+var onActiveBtn = function onActiveBtn(event) {
+  return event.target.style.backgroundColor = BTN_ACTIVE;
+};
+
+var onInactiveBtn = function onInactiveBtn(event) {
+  return event.target.style.backgroundColor = BTN_BG_COLOR;
+};
+
 var eachBtn = function eachBtn(_ref7) {
@@ -283,2 +309,19 @@ var label = _ref7[0],
 
+var beautifyJson = function beautifyJson(json) {
+  return stripTag(json).replace(REG_KEY, callbackKey).replace(REG_VALUE, callbackValue).replace(REG_ARRAY, callbackValue);
+};
+
+var stripTag = function stripTag(str) {
+  return str.replace(REG_QUOAT, '"').replace(REG_LT, '<').replace(REG_GT, '>');
+};
+
+var callbackKey = function callbackKey(str, before, key, after) {
+  return before + "<span style=\"color:#9bdeb5;\">" + key + "</span>" + after;
+};
+
+var callbackValue = function callbackValue(str, before, value) {
+  var color = value.charAt(0) === '"' ? '#ffb061' : '#b598d6';
+  return before + "<span style=\"color:" + color + ";\">" + value + "</span>";
+};
+
 var EMPTY_DATA = {};
@@ -291,2 +334,8 @@ var EMPTY_ARRAY = [];
 
+var REG_QUOAT = /\\"/g;
+var REG_LT = /</g;
+var REG_GT = />/g;
+var REG_KEY = /([{,]\s*)("[^"]+")(\s*:)/g;
+var REG_VALUE = /(<\/span>\s*:\s*)("[^"]*"|[^{[,}]*)/g;
+var REG_ARRAY = /([[,])("[^"]*"|[^",]+)(?=[,\]])/g;
 var REG_SPLIT = /[\s,]+/;
@@ -297,14 +346,2 @@ var INPUT_EVENTS = "\nonKeyDown\nonKeyUp\nonKeyPress\nonChange\nonFocus\nonBlur\nonSelect\n".trim().split(REG_SPLIT).reduce(function (events, event) {
 }, {});
-var VACList = function VACList(props) {
-  return /*#__PURE__*/React.createElement(VAC, _extends({
-    useList: "list",
-    useEach: "each"
-  }, props));
-};
-var VACInput = function VACInput(props) {
-  return /*#__PURE__*/React.createElement(VAC, _extends({
-    useValue: "value",
-    useDefaultValue: "defaultValue"
-  }, INPUT_EVENTS, props));
-};
 
@@ -334,3 +371,3 @@ var loop = function loop(Item, list, each, instead, hidden) {
 
-  var datas = list instanceof Array ? list : null;
+  var datas = Array.isArray(list) ? list : null;
   return Item && datas && datas.length > 0 ? datas.map(function (data, index) {
@@ -344,7 +381,9 @@ var props = each(data, index);
 
-var TITLE_COLOR = '#fffdba';
-var BORDER_COLOR = '#354f63';
+var TITLE_COLOR = '#ede080';
+var BORDER_COLOR = '#00111f';
+var LINE_COLOR = '#354f63';
 var BG_COLOR = '#0c2233';
 var BTN_BG_COLOR = '#4ebded';
-var JSON_COLOR = '#ffc478';
+var BTN_ACTIVE = '#0074a6';
+var JSON_COLOR = '#aaa';
 var JSON_BG_COLOR = '#05070d';
@@ -373,2 +412,3 @@ var FONT_SIZE = 14;
     fontSize: FONT_SIZE + 3 + "px",
+    textAlign: 'left',
     color: TITLE_COLOR
@@ -395,3 +435,3 @@ },
     border: 'none',
-    backgroundColor: BORDER_COLOR
+    backgroundColor: LINE_COLOR
   },
@@ -405,3 +445,3 @@ textarea: {
     borderRadius: '4px',
-    border: "1px solid " + BORDER_COLOR,
+    border: "1px solid " + LINE_COLOR,
     outline: 'none',
@@ -449,8 +489,27 @@ color: '#444',
     textAlign: 'left',
-    wordBreak: 'break-all'
+    wordBreak: 'break-all',
+    cursor: 'pointer'
   }
 };
 
+var withPreset = function withPreset(presetName, presetProps) {
+  var namePrefix = presetName ? "<span style=\"color:#ff745c;\">" + presetName + "</span>" : '';
+  return function (props) {
+    return VAC(_extends({}, presetProps, props, {
+      name: "" + namePrefix + (namePrefix && props.name ? ' | ' : '') + stripTag(props.name)
+    }));
+  };
+};
+
+var VACList = withPreset('@List', {
+  useList: 'list',
+  useEach: 'each'
+});
+var VACInput = withPreset('@Input', _extends({
+  useValue: 'value',
+  useDefaultValue: 'defaultValue'
+}, INPUT_EVENTS));
+
 export default VAC;
-export { VACInput, VACList };
+export { VAC, VACInput, VACList, withPreset };
 //# sourceMappingURL=index.modern.js.map

index.d.ts

 import React from 'react';
 
 export interface VACProps {
-  name?: string,
-  data?: any,
-  trace?: string,
-  listTrace?: string,
-  customEvent?: { [key: string]: Function },
-  hidden?: boolean,
-  maxWidth?: number | string,
-  maxHeight?: number | string,
-  useValue?: string,
-  useDefaultValue?: string,
-  useList?: string,
-  useEach?: string,
-  [key: string]: string | any
+    name?: string;
+    data?: any;
+    trace?: string;
+    listTrace?: string;
+    customEvent?: { [key: string]: Function };
+    hidden?: boolean;
+    maxWidth?: number | string;
+    maxHeight?: number | string;
+    useValue?: string;
+    useDefaultValue?: string;
+    useList?: string;
+    useEach?: string;
+    [key: string]: string | any;
 }
@@ -21,5 +21,7 @@
 
-export const VACList: React.FC<VACProps>;
-export const VACInput: React.FC<VACProps>;
+export const withPreset: (presetName: string, presetProps?: VACProps) => VAC;
 
-export default VAC;
+export const VACList: VAC;
+export const VACInput: VAC;
+
+export { VAC, VAC as default };

package.json

 {
   "name": "react-vac",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "This component is a debugging tool that helps you develop components without View(JSX).",
@@ -5,0 +5,0 @@ "author": "Park U-yeong <[e-mail]>",

README.md

@@ -21,2 +21,6 @@ # react-vac (prototype)
 
+## Demo
+
+- [TodoList VAC Debugger](https://coxcore.github.io/react-vac/demo/todo/vac/)
+
 ## Usage
@@ -26,23 +30,25 @@
 
-![basic usage](./docs/readme_assets/example_vac_basic_s1.png?raw=true)
+![basic usage](./docs/readme_assets/example_vac_basic_s2.png?raw=true)
 
 ```jsx
-import VAC from "react-vac";
+import { VAC } from "react-vac";
 
-// props object of VAC
-const viewComponentProps = {
-  // properties
-  value: "test value",
-  someValue: { foo: "var" },
+const ExampleView = () => {
+  // props object of VAC
+  const viewComponentProps = {
+    // properties
+    value: "test value",
+    someValue: { foo: "var" },
 
-  // callbacks
-  onClick: (event) => console.log("click!"),
-  onSomeEvent: (event) => console.log("onSomeEvent!"),
-};
+    // callbacks
+    onClick: (event) => console.log("click!"),
+    onSomeEvent: (event) => console.log("onSomeEvent!"),
+  };
 
-// VAC Debugger
-<VAC name="Dummy View" data={viewComponentProps} />;
+  // VAC Debugger
+  return <VAC name="Dummy View" data={viewComponentProps} />;
 
-// real VAC
-// <ViewComponent {...viewComponentProps} />
+  // real VAC
+  // return <ViewComponent {...viewComponentProps} />
+};
 ```
@@ -105,3 +111,3 @@
 
-![basic example](./docs/readme_assets/example_vac_spinbox_s1.png?raw=true)
+![basic example](./docs/readme_assets/example_vac_spinbox_s2.png?raw=true)
 
@@ -108,0 +114,0 @@ #### Step3

No alert changes

Improved metrics

Total package byte prevSize

92924

17.21%

Lines of code

911

12.47%

Number of lines in readme file

155

4.03%

No dependency changes