env: update tui-code-snippet (nhn#688)

* env: update `tui-code-snippet`

* refactor: apply `tui-code-snippet` v2.3.3

* test: fix broken test

* chore: improve `forEach`

apps/image-editor/package.json

@@ -46,7 +46,7 @@
   ],
   "dependencies": {
     "fabric": "^4.2.0",
-    "tui-code-snippet": "^1.5.0",
+    "tui-code-snippet": "^2.3.3",
     "tui-color-picker": "^2.2.6"
   }
 }

apps/image-editor/src/js/action.js

@@ -1,4 +1,4 @@
-import { extend } from 'tui-code-snippet';
+import extend from 'tui-code-snippet/object/extend';
 import Imagetracer from '@/helper/imagetracer';
 import { isSupportFileApi, base64ToBlob, toInteger, isEmptyCropzone, includes } from '@/util';
 import { eventNames, historyNames, drawingModes, drawingMenuNames, zoomModes } from '@/consts';

apps/image-editor/src/js/command/applyFilter.js

@@ -1,8 +1,4 @@
-/**
- * @author NHN. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Apply a filter into an image
- */
-import snippet from 'tui-code-snippet';
+import extend from 'tui-code-snippet/object/extend';
 import commandFactory from '@/factory/command';
 import { componentNames, rejectMessages, commandNames } from '@/consts';
 
@@ -55,7 +51,7 @@ const command = {
         return Promise.reject(rejectMessages.invalidParameters);
       }
 
-      snippet.extend(options, { mask: maskObj });
+      extend(options, { mask: maskObj });
       graphics.remove(options.mask);
     }
     if (!this.isRedo) {

apps/image-editor/src/js/command/changeShape.js

@@ -1,8 +1,4 @@
-/**
- * @author NHN. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview change a shape
- */
-import snippet from 'tui-code-snippet';
+import forEachOwnProperties from 'tui-code-snippet/collection/forEachOwnProperties';
 import commandFactory from '@/factory/command';
 import { componentNames, rejectMessages, commandNames } from '@/consts';
 
@@ -26,7 +22,7 @@ function makeUndoData(options, targetObj) {
     options: {},
   };
 
-  snippet.forEachOwnProperties(options, (value, key) => {
+  forEachOwnProperties(options, (value, key) => {
     undoData.options[key] = targetObj[key];
   });
 

apps/image-editor/src/js/command/changeTextStyle.js

@@ -1,8 +1,4 @@
-/**
- * @author NHN. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Change text styles
- */
-import snippet from 'tui-code-snippet';
+import forEachOwnProperties from 'tui-code-snippet/collection/forEachOwnProperties';
 import commandFactory from '@/factory/command';
 import { componentNames, rejectMessages, commandNames } from '@/consts';
 
@@ -25,7 +21,7 @@ function makeUndoData(styles, targetObj) {
     object: targetObj,
     styles: {},
   };
-  snippet.forEachOwnProperties(styles, (value, key) => {
+  forEachOwnProperties(styles, (value, key) => {
     const undoValue = targetObj[key];
     undoData.styles[key] = undoValue;
   });

apps/image-editor/src/js/command/setObjectProperties.js

@@ -1,8 +1,4 @@
-/**
- * @author NHN. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Set object properties
- */
-import snippet from 'tui-code-snippet';
+import forEachOwnProperties from 'tui-code-snippet/collection/forEachOwnProperties';
 import commandFactory from '@/factory/command';
 import { commandNames, rejectMessages } from '@/consts';
 
@@ -31,7 +27,7 @@ const command = {
     }
 
     this.undoData.props = {};
-    snippet.forEachOwnProperties(props, (value, key) => {
+    forEachOwnProperties(props, (value, key) => {
       this.undoData.props[key] = targetObj[key];
     });
 

apps/image-editor/src/js/component/cropper.js

@@ -1,9 +1,5 @@
-/**
- * @author NHN. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Image crop module (start cropping, end cropping)
- */
-import snippet from 'tui-code-snippet';
 import { fabric } from 'fabric';
+import extend from 'tui-code-snippet/object/extend';
 import Component from '@/interface/component';
 import Cropzone from '@/extension/cropzone';
 import { keyCodes, componentNames, CROPZONE_DEFAULT_OPTIONS } from '@/consts';
@@ -87,7 +83,7 @@ class Cropper extends Component {
 
     this._cropzone = new Cropzone(
       canvas,
-      snippet.extend(
+      extend(
         {
           left: 0,
           top: 0,
@@ -341,12 +337,10 @@ class Cropper extends Component {
     let height = standardSize;
 
     const scaleWidth = getScale(width, originalWidth);
-    [width, height] = snippet.map([width, height], (sizeValue) => sizeValue * scaleWidth);
+    [width, height] = [width, height].map((sizeValue) => sizeValue * scaleWidth);
 
     const scaleHeight = getScale(height, originalHeight);
-    [width, height] = snippet.map([width, height], (sizeValue) =>
-      fixFloatingPoint(sizeValue * scaleHeight)
-    );
+    [width, height] = [width, height].map((sizeValue) => fixFloatingPoint(sizeValue * scaleHeight));
 
     return {
       presetRatio,

apps/image-editor/src/js/component/filter.js

@@ -1,8 +1,6 @@
-/**
- * @author NHN. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Add filter module
- */
-import { isUndefined, extend, forEach, filter } from 'tui-code-snippet';
+import isUndefined from 'tui-code-snippet/type/isUndefined';
+import extend from 'tui-code-snippet/object/extend';
+import forEach from 'tui-code-snippet/collection/forEach';
 import { fabric } from 'fabric';
 import Component from '@/interface/component';
 import { rejectMessages, componentNames } from '@/consts';
@@ -213,7 +211,7 @@ class Filter extends Component {
    */
   _removeFilter(sourceImg, type) {
     const fabricType = this._getFabricFilterType(type);
-    sourceImg.filters = filter(sourceImg.filters, (value) => value.type !== fabricType);
+    sourceImg.filters = sourceImg.filters.filter((value) => value.type !== fabricType);
   }
 
   /**

apps/image-editor/src/js/component/flip.js

@@ -1,8 +1,4 @@
-/**
- * @author NHN. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Image flip module
- */
-import snippet from 'tui-code-snippet';
+import extend from 'tui-code-snippet/object/extend';
 import Component from '@/interface/component';
 import { componentNames, rejectMessages } from '@/consts';
 
@@ -45,7 +41,7 @@ class Flip extends Component {
       return Promise.reject(rejectMessages.flip);
     }
 
-    snippet.extend(setting, newSetting);
+    extend(setting, newSetting);
     this.setImageProperties(setting, true);
     this._invertAngle(isChangingFlipX, isChangingFlipY);
     this._flipObjects(isChangingFlipX, isChangingFlipY);

apps/image-editor/src/js/component/icon.js

@@ -1,9 +1,6 @@
-/**
- * @author NHN. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Add icon module
- */
-import snippet from 'tui-code-snippet';
 import { fabric } from 'fabric';
+import extend from 'tui-code-snippet/object/extend';
+import forEach from 'tui-code-snippet/collection/forEach';
 import Component from '@/interface/component';
 import { eventNames as events, rejectMessages, componentNames, fObjectOptions } from '@/consts';
 
@@ -119,7 +116,7 @@ class Icon extends Component {
       }
 
       icon.set(
-        snippet.extend(
+        extend(
           {
             type: 'icon',
             fill: this._oColor,
@@ -141,7 +138,7 @@ class Icon extends Component {
    * @param {{key: string, value: string}} pathInfos - Path infos
    */
   registerPaths(pathInfos) {
-    snippet.forEach(
+    forEach(
       pathInfos,
       (path, type) => {
         this._pathMap[type] = path;

apps/image-editor/src/js/component/line.js

@@ -1,9 +1,5 @@
-/**
- * @author NHN. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Free drawing module, Set brush
- */
-import snippet from 'tui-code-snippet';
 import { fabric } from 'fabric';
+import extend from 'tui-code-snippet/object/extend';
 import Component from '@/interface/component';
 import ArrowLine from '@/extension/arrowLine';
 import { eventNames, componentNames, fObjectOptions } from '@/consts';
@@ -193,7 +189,7 @@ class Line extends Component {
     const params = this.graphics.createObjectProperties(this._line);
     const { x1, x2, y1, y2 } = this._line;
 
-    return snippet.extend({}, params, {
+    return extend({}, params, {
       startPosition: {
         x: x1,
         y: y1,

apps/image-editor/src/js/component/shape.js

@@ -1,9 +1,5 @@
-/**
- * @author NHN. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Shape component
- */
-import { extend } from 'tui-code-snippet';
 import { fabric } from 'fabric';
+import extend from 'tui-code-snippet/object/extend';
 import Component from '@/interface/component';
 import resizeHelper from '@/helper/shapeResizeHelper';
 import {

apps/image-editor/src/js/component/text.js

@@ -1,10 +1,9 @@
-/**
- * @author NHN. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Text module
- */
-import snippet from 'tui-code-snippet';
 import { fabric } from 'fabric';
+import extend from 'tui-code-snippet/object/extend';
+import isExisty from 'tui-code-snippet/type/isExisty';
+import forEach from 'tui-code-snippet/collection/forEach';
 import Component from '@/interface/component';
+import { stamp } from '@/util';
 import { componentNames, eventNames as events, fObjectOptions } from '@/consts';
 
 const defaultStyles = {
@@ -201,15 +200,15 @@ class Text extends Component {
       this._setInitPos(options.position);
 
       if (options.styles) {
-        styles = snippet.extend(styles, options.styles);
+        styles = extend(styles, options.styles);
       }
 
-      if (!snippet.isExisty(options.autofocus)) {
+      if (!isExisty(options.autofocus)) {
         options.autofocus = true;
       }
 
       newText = new fabric.IText(text, styles);
-      selectionStyle = snippet.extend({}, selectionStyle, {
+      selectionStyle = extend({}, selectionStyle, {
         originX: 'left',
         originY: 'top',
       });
@@ -265,7 +264,7 @@ class Text extends Component {
    */
   setStyle(activeObj, styleObj) {
     return new Promise((resolve) => {
-      snippet.forEach(
+      forEach(
         styleObj,
         (val, key) => {
           if (activeObj[key] === val && key !== 'fontSize') {
@@ -276,7 +275,7 @@ class Text extends Component {
       );
 
       if ('textDecoration' in styleObj) {
-        snippet.extend(styleObj, this._getTextDecorationAdaptObject(styleObj.textDecoration));
+        extend(styleObj, this._getTextDecorationAdaptObject(styleObj.textDecoration));
       }
 
       activeObj.set(styleObj);
@@ -423,7 +422,7 @@ class Text extends Component {
       this.getCanvas().add(editingObj);
 
       const params = {
-        id: snippet.stamp(editingObj),
+        id: stamp(editingObj),
         type: editingObj.type,
         text: textContent,
       };

apps/image-editor/src/js/extension/cropzone.js

@@ -1,9 +1,5 @@
-/**
- * @author NHN. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Cropzone extending fabric.Rect
- */
-import snippet from 'tui-code-snippet';
 import { fabric } from 'fabric';
+import extend from 'tui-code-snippet/object/extend';
 import { clamp } from '@/util';
 import { eventNames as events, keyCodes } from '@/consts';
 
@@ -67,7 +63,7 @@ const Cropzone = fabric.util.createClass(
      * @override
      */
     initialize(canvas, options, extendsOptions) {
-      options = snippet.extend(options, extendsOptions);
+      options = extend(options, extendsOptions);
       options.type = 'cropzone';
 
       this.callSuper('initialize', options);
@@ -266,24 +262,18 @@ const Cropzone = fabric.util.createClass(
       const canvasWidth = canvas.getWidth(); // fabric object
 
       return {
-        x: snippet.map(
-          [
-            -(halfWidth + left), // x0
-            -halfWidth, // x1
-            halfWidth, // x2
-            halfWidth + (canvasWidth - left - width), // x3
-          ],
-          Math.ceil
-        ),
-        y: snippet.map(
-          [
-            -(halfHeight + top), // y0
-            -halfHeight, // y1
-            halfHeight, // y2
-            halfHeight + (canvasHeight - top - height), // y3
-          ],
-          Math.ceil
-        ),
+        x: [
+          -(halfWidth + left), // x0
+          -halfWidth, // x1
+          halfWidth, // x2
+          halfWidth + (canvasWidth - left - width), // x3
+        ].map(Math.ceil),
+        y: [
+          -(halfHeight + top), // y0
+          -halfHeight, // y1
+          halfHeight, // y2
+          halfHeight + (canvasHeight - top - height), // y3
+        ].map(Math.ceil),
       };
     },
 

apps/image-editor/src/js/factory/errorMessage.js

@@ -1,8 +1,4 @@
-/**
- * @author NHN. FE Development Team <dl_javascript@nhn.com>
- * @fileoverview Error-message factory
- */
-import snippet from 'tui-code-snippet';
+import extend from 'tui-code-snippet/object/extend';
 import { keyMirror } from '@/util';
 
 const types = keyMirror('UN_IMPLEMENTATION', 'NO_COMPONENT_NAME');
@@ -20,7 +16,7 @@ const map = {
 };
 
 export default {
-  types: snippet.extend({}, types),
+  types: extend({}, types),
 
   create(type, ...args) {
     type = type.toLowerCase();