env: update tui-code-snippet (#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 <[email protected]>
- * @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 <[email protected]>
- * @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 <[email protected]>
- * @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 <[email protected]>
- * @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 <[email protected]>
- * @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 <[email protected]>
- * @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 <[email protected]>
- * @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 <[email protected]>
- * @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 <[email protected]>
- * @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 <[email protected]>
- * @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 <[email protected]>
- * @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 <[email protected]>
- * @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 <[email protected]>
- * @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();