refactor: update tui-code-snippet@2.2.0 (#16)

* chore: set webpack optimization

* chore: apply toast-ui.release-notes

* refactor: apply tui-code-snippet@2.1.0

* refactor: remove jquery from test

* chore: convert examples in README and getting-started to ES6

* chore: apply code review

* docs: add guide for className of the wrapper element

* chore: apply code review

.eslintignore

@@ -0,0 +1 @@
+tui-note.config.js

.eslintrc.js

@@ -1,12 +1,11 @@
 module.exports = {
-  extends: 'tui',
+  extends: ['tui', 'plugin:prettier/recommended'],
   parserOptions: {
     ecmaVersion: 3
   },
   env: {
     browser: true,
     jasmine: true,
-    jquery: true,
     commonjs: true
   },
   globals: {

README.md

@@ -33,15 +33,15 @@ It also serves as important index to determine the future course of projects.
  To disable GA, use the following `usageStatistics` option when creating the instance.
 
 ```js
-var options = {
-    ...
-    usageStatistics: false
+const options = {
+  ...
+  usageStatistics: false
 }
 
-var instance = new Pagination(container, options);
+const instance = new Pagination(container, options);
 ```
 
-Or, include [`tui-code-snippet`](https://github.com/nhn/tui.code-snippet)(**v1.5.0** or **later**) and then immediately write the options as follows:
+Or, include [`tui-code-snippet`](https://github.com/nhn/tui.code-snippet)(**v2.2.0** or **later**) and then immediately write the options as follows:
 
 ```js
 tui.usageStatistics = false;
@@ -114,6 +114,7 @@ tui.pagination/
 ├─ latest/
 │  ├─ tui-pagination.css
 │  ├─ tui-pagination.js
+│  ├─ tui-pagination.min.css
 │  └─ tui-pagination.min.js
 ├─ v3.2.0/
 │  ├─ ...
@@ -128,7 +129,7 @@ tui.pagination/
 
 ### HTML
 
-Add the container element to create the component.
+Add the container element to create the component. A wrapper element should have `tui-pagination` as a class name to apply tui-pagination's style.
 
 ``` html
 <div id="tui-pagination-container" class="tui-pagination"></div>
@@ -141,12 +142,12 @@ To get the constructor function, you should import the module using one of the f
 
 #### Using namespace in browser environment
 ``` javascript
-var Pagination = tui.Pagination;
+const Pagination = tui.Pagination;
 ```
 
 #### Using module format in node environment
 ``` javascript
-var Pagination = require('tui-pagination'); /* CommonJS */
+const Pagination = require('tui-pagination'); /* CommonJS */
 ```
 
 ``` javascript
@@ -156,8 +157,8 @@ import Pagination from 'tui-pagination'; /* ES6 */
 You can create an instance with [options](https://nhn.github.io/tui.pagination/latest/Pagination) and call various APIs after creating an instance.
 
 ``` javascript
-var container = document.getElementById('tui-pagination-container');
-var instance = new Pagination(container, { ... });
+const container = document.getElementById('tui-pagination-container');
+const instance = new Pagination(container, { ... });
 
 instance.getCurrentPage();
 ```
@@ -166,7 +167,7 @@ For more information about the API, please see [here](https://nhn.github.io/tui.
 
 
 ## 🔩 Dependency
-* [tui-code-snippet](https://github.com/nhn/tui.code-snippet) >=1.5.0
+* [tui-code-snippet](https://github.com/nhn/tui.code-snippet) >=2.2.0
 
 
 ## 🌏 Browser Support

bower.json

@@ -15,13 +15,11 @@
         "examples",
         "src",
         "test",
-        "jsdoc.conf.json",
         "karma.conf.js",
-        "webpack.config.js",
+        "package-lock.json",
         "package.json",
-        "package-lock.json"
-    ],
-    "dependencies": {
-        "tui-code-snippet": "^1.5.0"
-    }
+        "tui-note.config.js",
+        "tuidoc.config.json",
+        "webpack.config.js"
+    ]
 }

docs/getting-started.md

@@ -1,48 +1,51 @@
-## Add dependency files
+## Install
 
-To use a pagination component, you must include CSS and JavaScript files.
-These files can be downloaded from the `dist` folder in this repository.
-
-#### CSS File
-
-```html
-<link rel="stylesheet" href="tui-pagination.css">
+``` sh
+$ npm install --save tui-pagination # Latest version
+$ npm install --save tui-pagination@<version> # Specific version
 ```
 
-#### JS Files
-```html
-<script type="text/javascript" src="tui-code-snippet.js"></script>
-<script type="text/javascript" src="tui-pagination.js"></script>
-```
+It can also be installed by using bower or downloaded by CDN. Please refer to the [💾 Install](https://github.com/nhn/tui.pagination#-install).
 
-## Create a pagination component
+## Usage
 
-### Step 1. Add a container element that the pagination component will be created.
+### Write a wrapper element
+
+A wrapper element should have `tui-pagination` as a class name to apply tui-pagination's style.
 
 ```html
 <div id="pagination" class="tui-pagination"></div>
 ```
 
-### Step 2. Create instance.
+### Import a component
+
+```javascript
+import Pagination from 'tui-pagination';
+import 'tui-pagination/dist/tui-pagination.css';
+```
+
+It can also be used by namespace or CommonJS module. Please refer to the [🔨 Usage](https://github.com/nhn/tui.pagination#-usage).
+
+### Create an instance
 
 Create an instance by passing the container element and option values as parameters.
 
 * Create with the id selector of the container element
 ```js
-var pagination = new tui.Pagination('pagination', options);
+const pagination = new Pagination('pagination');
 ```
 
 * Create with a container element
 
 ```js
-var container = document.getElementById('pagination');
-var pagination = new tui.Pagination(container, options);
+const container = document.getElementById('pagination');
+const pagination = new Pagination(container);
 ```
 
 * Create with options
 
 ```js
-var options = {
+const options = {
   totalItems: 10,
   itemsPerPage: 10,
   visiblePages: 10,
@@ -51,24 +54,24 @@ var options = {
   firstItemClassName: 'tui-first-child',
   lastItemClassName: 'tui-last-child',
   template: {
-      page: '<a href="#" class="tui-page-btn">{{page}}</a>',
-      currentPage: '<strong class="tui-page-btn tui-is-selected">{{page}}</strong>',
-      moveButton:
-          '<a href="#" class="tui-page-btn tui-{{type}}">' +
-              '<span class="tui-ico-{{type}}">{{type}}</span>' +
-          '</a>',
-      disabledMoveButton:
-          '<span class="tui-page-btn tui-is-disabled tui-{{type}}">' +
-              '<span class="tui-ico-{{type}}">{{type}}</span>' +
-          '</span>',
-      moreButton:
-          '<a href="#" class="tui-page-btn tui-{{type}}-is-ellip">' +
-              '<span class="tui-ico-ellip">...</span>' +
-          '</a>'
-   }
+    page: '<a href="#" class="tui-page-btn">{{page}}</a>',
+    currentPage: '<strong class="tui-page-btn tui-is-selected">{{page}}</strong>',
+    moveButton:
+      '<a href="#" class="tui-page-btn tui-{{type}}">' +
+        '<span class="tui-ico-{{type}}">{{type}}</span>' +
+      '</a>',
+    disabledMoveButton:
+      '<span class="tui-page-btn tui-is-disabled tui-{{type}}">' +
+        '<span class="tui-ico-{{type}}">{{type}}</span>' +
+      '</span>',
+    moreButton:
+      '<a href="#" class="tui-page-btn tui-{{type}}-is-ellip">' +
+        '<span class="tui-ico-ellip">...</span>' +
+      '</a>'
+  }
 };
 
-var pagination = new tui.Pagination('pagination', options);
+const pagination = new Pagination('pagination', options);
 ```
 
 Information about each option is as follows:
@@ -101,16 +104,18 @@ The example below uses the template option to customize the more button.
 
 ### Using string template
 
+If you use string templates, it should be converted by [tui-code-snippet's template](https://nhn.github.io/tui.code-snippet/2.2.0/domUtil#template).
+
 ```js
 ...
 template: {
-    ...
-    moveButton:
-        '<div class="custom-page-btn custom-{{type}}">' +
-            '<span class="custom-ico-{{type}}"></span>' +
-        '</div>'
-    },
-    ...
+  ...
+  moveButton:
+    '<div class="custom-page-btn custom-{{type}}">' +
+      '<span class="custom-ico-{{type}}"></span>' +
+    '</div>'
+  },
+  ...
 ...
 ```
 
@@ -119,19 +124,20 @@ template: {
 ```js
 ...
 template: {
-    ...
-    moveButton: function(type) {
-        var template = '';
-
-        if (type === 'first') {
-            template = '<div class="custom-page-btn">' +
-                           '<span class="custom-ico"></span>' +
-                       '</div>';
-        }
-
-        return template;
-    },
-    ...
+  ...
+  moveButton: type => {
+    let template = '';
+
+    if (type === 'first') {
+      template =
+        '<div class="custom-page-btn">' +
+          '<span class="custom-ico"></span>' +
+        '</div>';
+    }
+
+    return template;
+  },
+  ...
 ...
 ```
 
@@ -154,21 +160,18 @@ For each custom event, the `page` number is returned in the` eventData` object,
 
 
 ```js
-pagination.on('beforeMove', function(evt) {
-    var ePage = evt.page;
-    var result = ajax.call({page: ePage});
-
-    if(result) {
-        pagination.movePageTo(ePage);
-    } else {
-        return false;
-    }
+pagination.on('beforeMove', evt => {
+  const { page } = evt;
+  const result = ajax.call({page});
+
+  if(result) {
+    pagination.movePageTo(page);
+  } else {
+    return false;
+  }
 });
 
-pagination.on('afterMove', function(evt) {
-    var ePage = evt.page;
-    console.log(ePage);
-});
+pagination.on('afterMove', ({ page }) => console.log(page));
 ```
 
-For more information, see the [API](https://nhn.github.io/tui.pagination/latest/).
+For more information about the API, please see [here](https://nhn.github.io/tui.pagination/latest/Pagination).

docs/v3.0.0-migration-guide.md

@@ -21,7 +21,7 @@ The API of creating instance of `Pagination` is changed by naming change.
 ``` js
 // create instance of Pagination
 // before using 'tui.component.Pagination' namespace
-var instance = new tui.pagination(selector, options);
+const instance = new tui.pagination(selector, options);
 ```
 
 ## 3\. New branches
@@ -42,6 +42,6 @@ $ npm install tui-pagination@<version>
 You can use the component by calling `require` function as follows, and it is recommended to develop by `CommonJS` method instead of namespace.
 
 ``` js
-var Pagination = require('tui-pagination');
-var instance = new Pagination(options);
+const Pagination = require('tui-pagination');
+const instance = new Pagination(options);
 ```

examples/example01-basic.html

@@ -18,7 +18,6 @@ <h3>Default</h3>
         <h3>Center the current page</h3>
         <div id="pagination2" class="tui-pagination"></div>
     </div>
-    <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
     <script type="text/javascript" src="../dist/tui-pagination.js"></script>
     <script class="code-js">
     var pagination1 = new tui.Pagination('pagination1', {

examples/example02-custom-event.html

@@ -11,7 +11,6 @@
     <div class="code-html">
         <div id="pagination" class="tui-pagination"></div>
     </div>
-    <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
     <script type="text/javascript" src="../dist/tui-pagination.js"></script>
     <script class="code-js">
     var pagination = new tui.Pagination('pagination', {

examples/example03-using-template.html

@@ -11,7 +11,6 @@
     <div class="code-html">
         <div id="pagination" class="tui-pagination"></div>
     </div>
-    <script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.min.js"></script>
     <script type="text/javascript" src="../dist/tui-pagination.js"></script>
     <script class="code-js">
     var pagination = new tui.Pagination('pagination', {

karma.conf.js

@@ -5,6 +5,8 @@
 
 'use strict';
 
+var path = require('path');
+
 var webdriverConfig = {
   hostname: 'fe.nhnent.com',
   port: 4444,
@@ -102,7 +104,7 @@ function setConfig(defaultConfig, server) {
 module.exports = function(config) {
   var defaultConfig = {
     basePath: './',
-    frameworks: ['jquery-1.8.3', 'jasmine', 'es5-shim'],
+    frameworks: ['jasmine', 'es5-shim'],
     files: ['test/index.js'],
     preprocessors: {
       'test/index.js': ['webpack', 'sourcemap']
@@ -134,6 +136,11 @@ module.exports = function(config) {
             loader: 'url-loader'
           }
         ]
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, './src/js')
+        }
       }
     },
     port: 9876,