Convert project to TypeScript (#139)

* Convert project to TypeScript

* Fix vue playground

* Fix react playground

* Build typescript before playgrounds

* Add checking playgrounds to contributing PR checks

* Use new version of meilisearch-js

* Add attibutesToRetrieve from ae950fb

* Use SearchParams to define Params

* Ignore dist in eslint of vue playground

* Revert CONTRIBUTING back to (current) master

* Add missing comma

The disadvantages of the GH web editor. Sorry 😬

* Make linter pass

Author: bb

.eslintignore

@@ -1,3 +1,9 @@
 node_modules
 dist
+examples
+scripts
+tests/env
 build
+
+# temporary fix
+playgrounds/vanilla-js

.eslintrc.js

@@ -10,11 +10,55 @@ module.exports = {
     context: true, // for jest/puppeteer tests in examples/express
     jestPuppeteer: true, // for jest/puppeteer tests in examples/express
   },
-  extends: ['standard', 'plugin:prettier/recommended'],
-  plugins: ['jest'],
+  extends: [
+    'standard',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'plugin:prettier/recommended',
+    'prettier/@typescript-eslint',
+  ],
+  parser: '@typescript-eslint/parser',
   parserOptions: {
-    ecmaVersion: 11,
+    ecmaVersion: 2020,
     sourceType: 'module',
+    project: ['tsconfig.eslint.json'],
+    projectFolderIgnoreList: ['dist'],
+  },
+  plugins: ['jsdoc', '@typescript-eslint', 'prettier', 'jest'],
+  rules: {
+    'no-dupe-class-members': 'off', // Off due to conflict with typescript overload functions
+    'prettier/prettier': ['error', {}, { usePrettierrc: true }],
+    '@typescript-eslint/array-type': ['warn', { default: 'array-simple' }],
+    '@typescript-eslint/return-await': 'off',
+    'jsdoc/check-alignment': 'error',
+    'jsdoc/check-indentation': 'error',
+    '@typescript-eslint/space-before-function-paren': 0,
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-throw-literal': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+    '@typescript-eslint/no-unsafe-call': 'off',
+    '@typescript-eslint/no-unsafe-return': 'off',
+    '@typescript-eslint/no-unsafe-module-boundary-types': 'off',
+    '@typescript-eslint/prefer-regexp-exec': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-unnecessary-type-assertion': 'off',
+    '@typescript-eslint/no-unsafe-member-access': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/member-delimiter-style': [
+      'error',
+      {
+        multiline: {
+          delimiter: 'none', // 'none' or 'semi' or 'comma'
+          requireLast: true,
+        },
+        singleline: {
+          delimiter: 'semi', // 'semi' or 'comma'
+          requireLast: false,
+        },
+      },
+    ],
+    'comma-dangle': 'off',
   },
-  rules: {},
 }

jest.config.js

@@ -1,4 +1,6 @@
 module.exports = {
   verbose: true,
   modulePathIgnorePatterns: ['<rootDir>/examples'],
+  testMatch: ['<rootDir>/tests/**/*.ts?(x)'],
+  preset: 'ts-jest',
 }

package.json

@@ -4,26 +4,36 @@
   "private": false,
   "description": "The search client to use MeiliSearch with InstantSearch.",
   "scripts": {
+    "cleanup": "shx rm -rf dist/",
     "test": "jest",
     "test:demo": "yarn build && yarn test:demo:browser && yarn test:demo:nodejs && yarn test:demo:esm",
     "test:demo:browser": "yarn --cwd examples/express && yarn --cwd examples/express test",
     "test:demo:nodejs": "node examples/node/index.js",
     "test:demo:esm": "yarn --cwd examples/esm && yarn --cwd examples/esm start",
-    "build:playground:vue": "yarn --cwd ./playgrounds/vue && yarn --cwd ./playgrounds/vue build",
-    "build:playground:react": "yarn --cwd ./playgrounds/react && yarn --cwd ./playgrounds/react build",
-    "build:playground:vanilla-js": "yarn --cwd ./playgrounds/vanilla-js && yarn --cwd ./playgrounds/vanilla-js build",
+    "build:playground:vue": "yarn build && yarn --cwd ./playgrounds/vue && yarn --cwd ./playgrounds/vue build",
+    "build:playground:react": "yarn build && yarn --cwd ./playgrounds/react && yarn --cwd ./playgrounds/react build",
+    "build:playground:vanilla-js": "yarn build && yarn --cwd ./playgrounds/vanilla-js && yarn --cwd ./playgrounds/vanilla-js build",
     "test:all": "yarn test && yarn test:demo",
     "lint": "eslint --ext .js,.ts,.tsx,.vue .",
     "lint:fix": "eslint --ext .js,.ts,.tsx,.vue --fix .",
-    "build": "rollup -c rollup.config.js && rollup --environment NODE_ENV:production -c rollup.config.js ",
-    "playground:vue": "yarn --cwd ./playgrounds/vue && yarn --cwd ./playgrounds/vue serve",
-    "playground:react": "yarn --cwd ./playgrounds/react && yarn --cwd ./playgrounds/react start",
-    "playground:vanilla-js": "yarn --cwd ./playgrounds/vanilla-js && yarn --cwd ./playgrounds/vanilla-js start"
+    "build": "yarn cleanup && rollup -c rollup.config.js && rollup --environment NODE_ENV:production -c rollup.config.js ",
+    "postbuild": "yarn typingsheader",
+    "playground:vue": "yarn build && yarn --cwd ./playgrounds/vue && yarn --cwd ./playgrounds/vue serve",
+    "playground:react": "yarn build && yarn --cwd ./playgrounds/react && yarn --cwd ./playgrounds/react start",
+    "playground:vanilla-js": "yarn build && yarn --cwd ./playgrounds/vanilla-js && yarn --cwd ./playgrounds/vanilla-js start",
+    "typingsheader": "node scripts/build.js"
   },
   "main": "./dist/instant-meilisearch.umd.js",
   "module": "./dist/instant-meilisearch.esm.js",
   "browser": "./dist/instant-meilisearch.umd.js",
   "cjs": "./dist/instant-meilisearch.cjs.js",
+  "source": "src/index.ts",
+  "typings": "./dist/types/index.d.ts",
+  "types": "./dist/types/index.d.ts",
+  "sideEffects": false,
+  "bugs": {
+    "url": "https://github.com/meilisearch/instant-meilisearch/issues"
+  },
   "files": [
     "dist",
     "src"
@@ -40,7 +50,7 @@
     "url": "https://github.com/meilisearch/instant-meilisearch.git"
   },
   "dependencies": {
-    "meilisearch": "^0.16.0"
+    "meilisearch": "^0.16.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.10.5",
@@ -59,6 +69,7 @@
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jest": "^24.0.0",
+    "eslint-plugin-jsdoc": "^30.7.7",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.1.4",
@@ -74,6 +85,9 @@
     "rollup": "^2.23.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-terser": "^7.0.0",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "shx": "^0.3.3",
+    "ts-jest": "^26.4.4",
     "typescript": "^4.0.0"
   }
 }

playgrounds/react/src/instant-meilisearch.js

@@ -1 +1 @@
-../../../src/index.js
+../../../dist/instant-meilisearch.esm.js

playgrounds/vue/.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+examples
+scripts
+tests/env

playgrounds/vue/src/App.vue

@@ -5,40 +5,43 @@
       <p class="header-subtitle">Search in Steam video games 🎮</p>
     </header>
     <p class="disclaimer">
-      This is not the official Steam dataset but only for demo purpose.
-      Enjoy searching with MeiliSearch!
+      This is not the official Steam dataset but only for demo purpose. Enjoy
+      searching with MeiliSearch!
     </p>
     <div class="container">
-      <ais-instant-search :search-client="searchClient" index-name="steam-video-games">
+      <ais-instant-search
+        :search-client="searchClient"
+        index-name="steam-video-games"
+      >
         <div class="search-panel__filters">
           <ais-clear-refinements>
             <span slot="resetLabel">Clear all filters</span>
           </ais-clear-refinements>
           <h2>Genres</h2>
-          <ais-refinement-list attribute="genres"/>
+          <ais-refinement-list attribute="genres" />
           <h2>Players</h2>
-          <ais-refinement-list attribute="players"/>
+          <ais-refinement-list attribute="players" />
           <h2>Platforms</h2>
-          <ais-refinement-list attribute="platforms"/>
+          <ais-refinement-list attribute="platforms" />
           <h2>Misc</h2>
-          <ais-refinement-list attribute="misc"/>
+          <ais-refinement-list attribute="misc" />
         </div>
 
         <div class="search-panel__results">
-          <ais-search-box placeholder="Search here…"/>
+          <ais-search-box placeholder="Search here…" />
 
           <ais-hits>
             <template slot="item" slot-scope="{ item }">
               <div>
                 <div class="hit-name">
-                  <ais-highlight :hit="item" attribute="name"/>
+                  <ais-highlight :hit="item" attribute="name" />
                 </div>
-                <img :src="item.image" align="left" :alt="item.image">
+                <img :src="item.image" align="left" :alt="item.image" />
                 <div class="hit-description">
-                  <ais-snippet :hit="item" attribute="description"/>
+                  <ais-snippet :hit="item" attribute="description" />
                 </div>
-                <div class="hit-info">price: {{item.price}}</div>
-                <div class="hit-info">release date: {{item.releaseDate}}</div>
+                <div class="hit-info">price: {{ item.price }}</div>
+                <div class="hit-info">release date: {{ item.releaseDate }}</div>
               </div>
             </template>
           </ais-hits>
@@ -57,19 +60,19 @@
 </template>
 
 <script>
-import "instantsearch.css/themes/algolia-min.css";
-import instantMeiliSearch from "../../../src/index.js";
+import 'instantsearch.css/themes/algolia-min.css'
+import instantMeiliSearch from '../../../dist/instant-meilisearch.cjs.js'
 
 export default {
   data() {
     return {
       searchClient: instantMeiliSearch(
-        "https://demos.meilisearch.com",
-        "dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25"
-      )
-    };
-  }
-};
+        'https://demos.meilisearch.com',
+        'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25'
+      ),
+    }
+  },
+}
 </script>
 
 <style>
@@ -80,8 +83,8 @@ h1 {
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 }
 
 .ais-Hits-item {
@@ -96,7 +99,8 @@ body {
   margin-bottom: 0.5em;
 }
 
-.ais-Highlight-highlighted, .ais-Snippet-highlighted {
+.ais-Highlight-highlighted,
+.ais-Snippet-highlighted {
   background: cyan;
   font-style: normal;
 }
@@ -135,7 +139,7 @@ body {
 }
 
 .header-title::after {
-  content: " ▸ ";
+  content: ' ▸ ';
   padding: 0 0.5rem;
 }
 

rollup.config.js

@@ -1,9 +1,11 @@
+import commonjs from '@rollup/plugin-commonjs'
 import nodeResolve from '@rollup/plugin-node-resolve'
 import { resolve } from 'path'
-import commonjs from '@rollup/plugin-commonjs'
 import babel from 'rollup-plugin-babel'
-import pkg from './package.json'
 import { terser } from 'rollup-plugin-terser'
+import typescript from 'rollup-plugin-typescript2'
+
+import pkg from './package.json'
 
 function getOutputFileName(fileName, isProd = false) {
   return isProd ? fileName.replace(/\.js$/, '.min.js') : fileName
@@ -13,10 +15,21 @@ const env = process.env.NODE_ENV || 'development'
 const LIB_NAME = 'instantMeiliSearch'
 const ROOT = resolve(__dirname, '.')
 
+const PLUGINS = [
+  typescript({
+    useTsconfigDeclarationDir: true,
+    tsconfigOverride: {
+      allowJs: false,
+      includes: ['src'],
+      exclude: ['tests', 'examples', '*.js', 'scripts'],
+      esModuleInterop: true,
+    },
+  }),
+]
 module.exports = [
   // browser-friendly IIFE build
   {
-    input: 'src/index.js', // directory to transpilation of typescript
+    input: 'src/index.ts', // directory to transpilation of typescript
     output: {
       name: LIB_NAME,
       file: getOutputFileName(
@@ -31,6 +44,7 @@ module.exports = [
       },
     },
     plugins: [
+      ...PLUGINS,
       nodeResolve({
         mainFields: ['jsnext', 'browser', 'main'],
         preferBuiltins: true,
@@ -43,7 +57,7 @@ module.exports = [
     ],
   },
   {
-    input: 'src/index.js',
+    input: 'src/index.ts',
     external: ['meilisearch'],
     output: [
       {
@@ -68,6 +82,7 @@ module.exports = [
     ],
     plugins: [
       env === 'production' ? terser() : {}, // will minify the file in production mode
+      ...PLUGINS,
     ],
   },
 ]