react-vac - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

dist/index.js

@@ -164,3 +164,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
   var jsonData = validData ? jsonFilter(data, trace) : data;
-  var json = beautifyJson(JSON.stringify(jsonData) || (data === '' ? '' : String(data)));
+  var json = highlightJson(JSON.stringify(jsonData) || (data === '' ? '' : String(data)));
 
@@ -301,6 +301,10 @@ var checkCallback = function checkCallback(_ref4) {
 
-var beautifyJson = function beautifyJson(json) {
+var highlightJson = function highlightJson(json) {
   return stripTag(json).replace(REG_KEY, callbackKey).replace(REG_VALUE, callbackValue).replace(REG_ARRAY, callbackValue);
 };
 
+var stripSpecialChar = function stripSpecialChar(str) {
+  return str.replace(REG_COMMA, ',').replace(REG_BRACKET, '[').replace(REG_BRACE, '{');
+};
+
 var stripTag = function stripTag(str) {
@@ -315,4 +319,6 @@ return str.replace(REG_QUOAT, '"').replace(REG_LT, '<').replace(REG_GT, '>');
 var callbackValue = function callbackValue(str, before, value) {
-  var color = value.charAt(0) === '"' ? '#ffb061' : '#b598d6';
-  return before + "<span style=\"color:" + color + ";\">" + value + "</span>";
+  var isString = value.charAt(0) === '"';
+  var color = isString ? '#ffb061' : '#b598d6';
+  var result = isString ? stripSpecialChar(value) : value;
+  return before + "<span style=\"color:" + color + ";\">" + result + "</span>";
 };
@@ -328,2 +334,5 @@
 var REG_QUOAT = /\\"/g;
+var REG_COMMA = /,/g;
+var REG_BRACE = /{/g;
+var REG_BRACKET = /\[/g;
 var REG_LT = /</g;
@@ -333,3 +342,3 @@ var REG_GT = />/g;
 var REG_VALUE = /(<\/span>\s*:\s*)("[^"]*"|[^{[,}]*)/g;
-var REG_ARRAY = /([[,])("[^"]*"|[^",]+)(?=[,\]])/g;
+var REG_ARRAY = /([[,])("[^"]*"|[^",\]}]+)(?=[,\]}])/g;
 var REG_SPLIT = /[\s,]+/;
@@ -336,0 +345,0 @@ var INPUT_EVENTS = "\nonKeyDown\nonKeyUp\nonKeyPress\nonChange\nonFocus\nonBlur\nonSelect\n".trim().split(REG_SPLIT).reduce(function (events, event) {

dist/index.modern.js

@@ -162,3 +162,3 @@ import React from 'react';
   var jsonData = validData ? jsonFilter(data, trace) : data;
-  var json = beautifyJson(JSON.stringify(jsonData) || (data === '' ? '' : String(data)));
+  var json = highlightJson(JSON.stringify(jsonData) || (data === '' ? '' : String(data)));
 
@@ -299,6 +299,10 @@ var checkCallback = function checkCallback(_ref4) {
 
-var beautifyJson = function beautifyJson(json) {
+var highlightJson = function highlightJson(json) {
   return stripTag(json).replace(REG_KEY, callbackKey).replace(REG_VALUE, callbackValue).replace(REG_ARRAY, callbackValue);
 };
 
+var stripSpecialChar = function stripSpecialChar(str) {
+  return str.replace(REG_COMMA, ',').replace(REG_BRACKET, '[').replace(REG_BRACE, '{');
+};
+
 var stripTag = function stripTag(str) {
@@ -313,4 +317,6 @@ return str.replace(REG_QUOAT, '"').replace(REG_LT, '<').replace(REG_GT, '>');
 var callbackValue = function callbackValue(str, before, value) {
-  var color = value.charAt(0) === '"' ? '#ffb061' : '#b598d6';
-  return before + "<span style=\"color:" + color + ";\">" + value + "</span>";
+  var isString = value.charAt(0) === '"';
+  var color = isString ? '#ffb061' : '#b598d6';
+  var result = isString ? stripSpecialChar(value) : value;
+  return before + "<span style=\"color:" + color + ";\">" + result + "</span>";
 };
@@ -326,2 +332,5 @@
 var REG_QUOAT = /\\"/g;
+var REG_COMMA = /,/g;
+var REG_BRACE = /{/g;
+var REG_BRACKET = /\[/g;
 var REG_LT = /</g;
@@ -331,3 +340,3 @@ var REG_GT = />/g;
 var REG_VALUE = /(<\/span>\s*:\s*)("[^"]*"|[^{[,}]*)/g;
-var REG_ARRAY = /([[,])("[^"]*"|[^",]+)(?=[,\]])/g;
+var REG_ARRAY = /([[,])("[^"]*"|[^",\]}]+)(?=[,\]}])/g;
 var REG_SPLIT = /[\s,]+/;
@@ -334,0 +343,0 @@ var INPUT_EVENTS = "\nonKeyDown\nonKeyUp\nonKeyPress\nonChange\nonFocus\nonBlur\nonSelect\n".trim().split(REG_SPLIT).reduce(function (events, event) {

package.json

 {
   "name": "react-vac",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "This component is a debugging tool that helps you develop components without View(JSX).",
@@ -31,14 +31,16 @@ "author": "Park U-yeong <[e-mail]>",
   "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.31.1",
+    "@typescript-eslint/parser": "^4.31.1",
     "babel-eslint": "^10.0.3",
     "cross-env": "^7.0.2",
     "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-config-standard-react": "^9.2.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-standard": "^4.0.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-config-standard-react": "^11.0.1",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-react": "^7.25.2",
+    "eslint-plugin-standard": "^5.0.0",
     "gh-pages": "^2.2.0",
@@ -45,0 +47,0 @@ "microbundle-crl": "^0.13.10",

README.md

@@ -5,4 +5,2 @@ # react-vac (prototype)
 
-![vac pattern](./docs/readme_assets/vac_pattern_s1.png?raw=true)
-
 [![NPM](https://img.shields.io/npm/v/react-vac.svg)](https://www.npmjs.com/package/react-vac) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
@@ -22,6 +20,2 @@
 
-## Demo
-
-- [TodoList VAC Debugger](https://coxcore.github.io/react-vac/demo/todo/vac/)
-
 ## Usage
@@ -31,2 +25,4 @@
 
+See [[VAC Debugger Usage]](./docs/VAC_USAGE.md) for more details.
+
 ![basic usage](./docs/readme_assets/example_vac_basic_s2.png?raw=true)
@@ -57,8 +53,6 @@
 
-> `VAC Debugger` also has functions related to input and list.
->
-> [Learn More >](./docs/VAC_USAGE.md)
-
 ## Development Process (for View Asset Component)
 
+#### View Asset Component
+
 View Asset Component(`VAC`) is a rendering component to manage JSX and Style, and is isolated from UI functionality or business logic.
@@ -72,2 +66,6 @@
 
+#### VAC Pattern
+
+![vac pattern](./docs/readme_assets/vac_pattern_s1.png?raw=true)
+
 #### Step1
@@ -157,4 +155,20 @@
 
+## Examples
+
+#### Demo
+
+- [Todo List](https://coxcore.github.io/react-vac/demo/todo/vac/)
+
+#### Codes
+
+- [VAC](https://github.com/coxcore/examples-react-ts/blob/todo-list/src/components/TodoContainer.tsx#L31)
+- [VACInput](https://github.com/coxcore/examples-react-ts/blob/todo-list/src/components/TodoInput.tsx#L34)
+- [VACList](https://github.com/coxcore/examples-react-ts/blob/todo-list/src/components/TodoList.tsx#L39)
+
+## Changelog
+
+[Releases](https://github.com/coxcore/react-vac/releases)
+
 ## License
 
 MIT © [Park U-yeong](https://github.com/coxcore)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

95706

increased by2.94%

Lines of code

928

increased by1.75%

Number of lines in readme file

169

increased by9.03%

Worsened metrics

Dev dependency count

21

increased by10.53%

No dependency changes