Added eslint and prettier

.eslintignore

@@ -0,0 +1,2 @@
+lib/
+node_modules/

.eslintrc

@@ -0,0 +1,11 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ]
+}

.github/workflows/lint.yaml

@@ -0,0 +1,14 @@
+name: Lint CI
+
+on: [push, pull_request]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+      - run: npm install
+      - run: npm run lint

.github/workflows/test.yaml

@@ -9,6 +9,6 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: "14"
+          node-version: '14'
       - run: npm install
       - run: npm test

.prettierignore

@@ -0,0 +1,2 @@
+lib/
+node_modules/

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2
+}

README.md

@@ -9,11 +9,11 @@ It is a plugin for HTML document pagination to fit fixed-sized container. This o
 In a browser environment import `HTMLPagination` class and create it's instance:
 
 ```js
-import { HTMLPagination } from "html-pagination";
+import { HTMLPagination } from 'html-pagination';
 
 const pg = new HTMLPagination(
-  document.getElementById("content"), // HTML element with html content you want to paginate in it
-  document.getElementById("container"), // HTML element which will display page content. It must add scrollbar on overflow
+  document.getElementById('content'), // HTML element with html content you want to paginate in it
+  document.getElementById('container'), // HTML element which will display page content. It must add scrollbar on overflow
   100 // Initial number of characters per page. Good value will increase speed of first page computation
 );
 ```

package.json

@@ -10,6 +10,8 @@
   "scripts": {
     "test:browser": "npm run build -- --module 'esnext' && cp ./src/__tests__/index.html ./lib/ && bash -c 'for module in \".\\/cache\" \".\\/types\" \".\\/utils\"; do sed -i \"s/$module/$module.js/g\" ./lib/index.js; done' && serve -s lib",
     "build": "rm -rf lib && tsc",
+    "lint": "eslint .",
+    "format": "prettier --write .",
     "test": "jest --config jestconfig.json --passWithNoTests",
     "prepare": "npm run build",
     "prepublishOnly": "npm test && npm run lint",
@@ -33,9 +35,15 @@
   "homepage": "https://github.com/dm1sh/html-pagination#readme",
   "devDependencies": {
     "@types/jest": "^26.0.24",
+    "@typescript-eslint/eslint-plugin": "^4.29.0",
+    "@typescript-eslint/parser": "^4.29.0",
     "esbuild": "^0.12.17",
     "esbuild-jest": "^0.5.0",
+    "eslint": "^7.32.0",
     "jest": "^27.0.6",
-    "typescript": "^4.3.5"
+    "typescript": "^4.3.5",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "prettier": "^2.3.2"
   }
 }

src/__tests__/index.html

@@ -26,24 +26,25 @@
       }
     </style>
     <div id="content">
+      <!-- prettier-ignore -->
       <main><h1>About me</h1><p>Hello, I'm Shishkov Dmitriy. I'm 17 years old computer programmer. I'm also do photography as a hobby. As for spring 2021, I'm studying in "Ugra physico-mathematical boarding school" in Khanty-Mansiysk. </p><p>My specialization is frontend web development. All web services and application I deploy on my own. For it I've used <a href="https://www.docker.com">Docker</a>and <a href="https://docs.docker.com/compose">docker-compose</a>for deployment on my VPS. Currently my server is powered with <a href="https://dokku.com">Dokku</a>. For smaller projects I also used some PaaS like <a href="https://heroku.com">Heroku</a>and <a href="https://vercel.com">Vercel Now</a>. </p><p>I also do in for C development. In <a href="/projects">projects</a>section you can see some of my developments in this langualge. Even this site is powered by page generator written in C. </p><p>More formally, this is my stack:</p><ul><li>JS <ul><li><a href="https://nodejs.org">NodeJS</a></li><li><a href="https://www.typescriptlang.org">TypeScript</a></li><li><a href="https://reactjs.org">React</a>: <ul><li><a href="https://reactrouter.com">React Router</a></li><li><a href="https://github.com/molefrog/wouter">Wouter</a></li><li><a href="https://www.framer.com/motion">Framer Motion</a></li><li><a href="https://styled-components.com" >Styled Components</a ></li></ul></li><li><a href="https://nextjs.org">Next.js</a></li><li><a href="https://graphql.org">Graphql</a>: <ul><li><a href="https://www.apollographql.com">Apollo</a></li></ul></li><li><a href="https://www.prisma.io">Prisma</a></li><li><a href="https://www.mongodb.com">MongoDB</a><ul><li><a href="https://mongoosejs.com">Mongoose</a></li></ul></li><li><a href="https://www.postgresql.org">PostgreSQL</a><ul><li><a href="https://node-postgres.com">Node-postgres</a></li></ul></li><li><a href="https://www.npmjs.com/package/jsonwebtoken" >jsonwebtoken</a ></li><li><a href="https://sendgrid.com">SendGrid</a></li><li><a href="https://github.com/jakearchibald/idb">IndexedDB</a></li><li><a href="https://immerjs.github.io/immer">Immer</a></li><li><a href="https://expressjs.com">ExpressJS</a></li><li>Dev environment: <ul><li><a href="https://eslint.org">ESLint</a></li><li><a href="https://prettier.io">Prettier</a></li><li><a href="https://jestjs.io">Jest</a></li><li><a href="https://mochajs.org">Mocha</a></li><li><a href="https://webpack.js.org">Webpack</a></li><li><a href="https://www.snowpack.dev">Snowpack</a></li><li><a href="https://esbuild.github.io">Esbuild</a></li><li><a href="https://storybook.js.org">Storybook</a></li><li><a href="https://babeljs.io">Babel</a></li></ul></li></ul></li><li>Deployment: <ul><li><a href="https://www.docker.com">Docker</a></li><li><a href="https://docs.docker.com/compose">docker-compose</a></li><li><a href="https://dokku.com">Dokku</a></li><li><a href="https://heroku.com">Heroku</a></li><li><a href="https://www.oracle.com/cloud" >Oracle Cloud Infrastructure</a ></li><li><a href="https://vercel.com">Vercel Now</a></li></ul></li><li>C</li><li><a href="https://www.python.org">Python</a><ul><li><a href="https://fastapi.tiangolo.com">FastAPI</a></li></ul></li><li><a href="http://www.lua.org">Lua</a></li></ul><p>See <a href="/contacts">contacts</a>to get in touch with me.</p><p>You can reach my resume following <a href="https://github.com/dm1sh/dm1sh/blob/main/resume.md" >this link</a ></p></main>
     </div>
     <div class="appContainer">
       <div id="container"></div>
     </div>
     <script type="module">
-      import { HTMLPagination } from "./index.js";
+      import { HTMLPagination } from './index.js';
 
-      const content = document.getElementById("content");
-      const container = document.getElementById("container");
+      const content = document.getElementById('content');
+      const container = document.getElementById('container');
 
       class ci {
         g(key) {
-          localStorage.setItem("book" + key);
+          localStorage.setItem('book' + key);
         }
 
         s(key, value) {
-          localStorage.getItem("book" + key, value);
+          localStorage.getItem('book' + key, value);
         }
       }
 

src/__tests__/index.test.ts

@@ -2,12 +2,12 @@
  * @jest-environment jsdom
  */
 
-import { CacheInterface, HTMLPagination } from "../index";
+import { CacheInterface, HTMLPagination } from '../index';
 
 let hp: HTMLPagination;
 
-const content = document.createElement("div");
-const container = document.createElement("div");
+const content = document.createElement('div');
+const container = document.createElement('div');
 class Cache extends CacheInterface {
   g(key: string) {
     return localStorage.getItem(key);
@@ -17,33 +17,33 @@ class Cache extends CacheInterface {
   }
 }
 
-describe("Text position stuff", () => {
+describe('Text position stuff', () => {
   beforeEach(() => {
-    content.innerHTML = "";
-    content.innerHTML = "<div><p>aa</p><p>bb<span>cc</span>dd</p></div>";
+    content.innerHTML = '';
+    content.innerHTML = '<div><p>aa</p><p>bb<span>cc</span>dd</p></div>';
 
-    container.innerHTML = "";
+    container.innerHTML = '';
 
     hp = new HTMLPagination(content, container, 100, new Cache());
   });
 
-  it("computes positions for each text node", () => {
+  it('computes positions for each text node', () => {
     expect(hp.elementPositions.map((el) => el[0])).toEqual([0, 2, 4, 6]);
   });
 
-  it("gets element by position", () => {
+  it('gets element by position', () => {
     expect(hp.getElementForPosition(0)[0]).toBe(0);
     expect(hp.getElementForPosition(1)[0]).toBe(0);
     expect(hp.getElementForPosition(2)[0]).toBe(2);
     expect(hp.getElementForPosition(3)[0]).toBe(2);
   });
 
-  it("gets html content for range of text", () => {
+  it('gets html content for range of text', () => {
     expect(hp.getContentFromRange(0, 8)).toEqual(
-      "<p>aa</p><p>bb<span>cc</span>dd</p>"
+      '<p>aa</p><p>bb<span>cc</span>dd</p>'
     );
-    expect(hp.getContentFromRange(0, 3)).toEqual("<p>aa</p><p>b</p>");
-    expect(hp.getContentFromRange(5, 7)).toEqual("<span>c</span>d");
+    expect(hp.getContentFromRange(0, 3)).toEqual('<p>aa</p><p>b</p>');
+    expect(hp.getContentFromRange(5, 7)).toEqual('<span>c</span>d');
   });
 });
 

src/index.ts

@@ -1,6 +1,6 @@
-import { CacheInterface } from "./cache";
-import { isElementNode, isTextNode, TextNode } from "./types";
-import { binSearch } from "./utils";
+import { CacheInterface } from './cache';
+import { isElementNode, isTextNode } from './types';
+import { binSearch } from './utils';
 
 class HTMLPagination {
   content: HTMLElement;
@@ -33,7 +33,7 @@ class HTMLPagination {
     this.cache = cache;
     this.initialJump = initialJump;
 
-    this.elementPositions = new Array();
+    this.elementPositions = [];
     this.idPositions = new Map();
     this.pages = [0];
 
@@ -51,10 +51,10 @@ class HTMLPagination {
       (n > this.pages.length - 1 &&
         this.pages[this.pages.length - 1] === this.getMaxPosition)
     )
-      return "";
+      return '';
 
-    let from: number = 0,
-      to: number = 0;
+    let from = 0,
+      to = 0;
 
     if (n <= this.pages.length - 1) {
       from = this.pages[n - 1];
@@ -99,7 +99,7 @@ class HTMLPagination {
   /**
    * Finds position for next page break
    */
-  getPageBreak(start: number) {
+  getPageBreak(start: number): number {
     let previousEnd = this.getMaxPosition;
     let end = this.getNextSpaceForPosition(
       Math.min(start + this.initialJump, this.getMaxPosition)
@@ -128,7 +128,7 @@ class HTMLPagination {
   /**
    * Tries to predict number of pages if not calculated exaclty yet
    */
-  get pagesNumber() {
+  get pagesNumber(): number {
     if (this.pages[this.pages.length - 1] === this.getMaxPosition)
       return this.pages.length - 1;
     else return Math.round(this.getMaxPosition / this.initialJump);
@@ -142,8 +142,8 @@ class HTMLPagination {
     const [nodePosition, node] = this.elementPositions[nodeIndex];
 
     let nodeOffset = startPos - nodePosition;
-    const str = node.nodeValue || "";
-    while (nodeOffset < str.length && str.charAt(nodeOffset) !== " ")
+    const str = node.nodeValue || '';
+    while (nodeOffset < str.length && str.charAt(nodeOffset) !== ' ')
       nodeOffset++;
 
     if (nodeOffset === str.length) {
@@ -163,8 +163,8 @@ class HTMLPagination {
     const [nodePosition, node] = this.elementPositions[nodeIndex];
 
     let nodeOffset = startPos - nodePosition;
-    const str = node.nodeValue || "";
-    while (nodeOffset > 0 && str.charAt(nodeOffset) !== " ") nodeOffset--;
+    const str = node.nodeValue || '';
+    while (nodeOffset > 0 && str.charAt(nodeOffset) !== ' ') nodeOffset--;
 
     return this.elementPositions[nodeIndex][0] + nodeOffset;
   }
@@ -218,7 +218,7 @@ class HTMLPagination {
    * return as string html content between `from` and `to`
    */
   getContentFromRange(from: number, to: number): string {
-    this.container.innerHTML = "";
+    this.container.innerHTML = '';
     const range = new Range();
 
     const [startPosition, startElement] = this.getElementForPosition(from);