Remove not working umd bundle and replace with iife and cjs (#471)

* Remove not working umd bundle and replace with iife and cjs Remove unecessary configs Examples comment removed Add version remove version Information on imports * Better readme * Update CHANGELOG.md * Update CHANGELOG.md * Update README.md Co-authored-by: Clémentine Urquizar <[email protected]> * Update examples/typescript-browser/public/index.html Co-authored-by: Clémentine Urquizar <[email protected]> Co-authored-by: Clémentine Urquizar <[email protected]>
meilisearch · Jun 24, 2020 · 02aab14 · 02aab14
1 parent f0ac9db
commit 02aab14
Show file tree

Hide file tree

Showing 29 changed files with 5,642 additions and 85 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -17,6 +17,7 @@ module.exports = {
   },
   plugins: ['jsdoc', '@typescript-eslint'],
   rules: {
+    '@typescript-eslint/return-await': 'off',
     'jsdoc/check-alignment': 'error',
     'jsdoc/check-indentation': 'error',
     '@typescript-eslint/space-before-function-paren': 0,

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,10 @@
-## V0.11.1 (released)
+## V0.11.1
+- Feat: Make IndexInterface generic. createIndex and getIndex generic support #442
+- Split bundles into umd and cjs.
+  - use bundle in package.json `browser` for `umd`
+  - use bundle in package.json `main` for `cjs`
+
+## V0.11.0 (released)
 
 - BREAKING: Usage of createIndex changed `createIndex(uid: string, options: IndexOptions): Index` #436
 - BREAKING: Changes in types

diff --git a/README.md b/README.md
@@ -60,6 +60,45 @@ $ docker run -it --rm -p 7700:7700 getmeili/meilisearch:latest ./meilisearch --m
 
 NB: you can also download MeiliSearch from **Homebrew** or **APT**.
 
+## Import
+
+### Front end or ESmodule
+
+```javascript
+import MeiliSearch from 'meilisearch'
+
+const client = new MeiliSearch({
+    host: 'http://127.0.0.1:7700',
+    apiKey: 'masterKey',
+  })
+```
+
+### HTML import
+
+```javascript
+<script src="https://cdn.jsdelivr.net/npm/meilisearch@latest/dist/bundles/meilisearch.browser.js"></script>
+<script>
+  const client = new MeiliSearch({
+    host: 'http://127.0.0.1:7700',
+    apiKey: 'masterKey',
+  })
+  client.listIndexes().then(res => {
+    console.log({ res });
+  })
+</script>
+```
+
+### Back-End CommonJs
+
+```javascript
+const MeiliSearch = require('meilisearch');
+
+const client = new MeiliSearch({
+    host: 'http://127.0.0.1:7700',
+    apiKey: 'masterKey',
+  })
+```
+
 ## 🎬 Getting started
 
 Here is a quickstart for a search request

diff --git a/examples/browser/webpage.html b/examples/browser/webpage.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8'>
+  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+  <title>Page Title</title>
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+</head>
+<body>
+    hello
+</body>
+</html>
+<script src="../../dist/bundles/meilisearch.umd.js"></script>
+<script>
+  const client = new window.Meiliearch({
+    host: 'http://127.0.0.1:7700',
+    apiKey: 'masterKey',
+  })
+  client.listIndexes().then(res => {
+    console.log({ res });
+  })
+</script>
diff --git a/examples/node/search_example.js b/examples/node/search_example.js
@@ -0,0 +1,30 @@
+const MeiliSearch = require('../../')
+const dataset = require('./small_movies.json')
+
+const config = {
+  host: 'http://127.0.0.1:7700',
+  apiKey: 'masterKey',
+}
+
+const client = new MeiliSearch(config)
+const uid = 'movies'
+
+const addDataset = async () => {
+  const index = await client.getOrCreateIndex(uid)
+  const documents = await index.getDocuments()
+  if (documents.length === 0) {
+    const { updateId } = await index.addDocuments(dataset)
+    await index.waitForPendingUpdate(updateId)
+  }
+}
+
+;(async () => {
+  await addDataset()
+  const index = await client.getIndex('movies')
+  const resp = await index.search('Avengers', {
+    limit: 1,
+    attributesToHighlight: 'title',
+  })
+  console.log({ resp })
+  console.log({ hit: resp.hits[0] })
+})()
diff --git a/examples/small_index.js → examples/node/small_index.js b/examples/small_index.js → examples/node/small_index.js
@@ -1,15 +1,13 @@
-var MeiliSearch = require('../')
+const MeiliSearch = require('../../')
 
 const config = {
   host: 'http://127.0.0.1:7700',
   apiKey: 'masterKey',
 }
 
-var meili = new MeiliSearch(config)
+const client = new MeiliSearch(config)
 
-const newIndex = {
-  uid: 'movies_test',
-}
+const uid = 'movies_test'
 
 const dataset = [
   { id: 123, title: 'Pride and Prejudice', comment: 'A great book' },
@@ -31,8 +29,8 @@ const dataset = [
 
 ;(async () => {
   // This example creates an index with 7 documents
-  await meili.createIndex(index)
-  const { updateId } = await meili.getIndex(index.uid).addDocuments(dataset)
-  const res = await meili.getIndex(index.uid).waitForPendingUpdate(updateId)
-  console.log({ res });
+  const index = await client.getOrCreateIndex(uid)
+  const { updateId } = await index.addDocuments(dataset)
+  const res = await index.waitForPendingUpdate(updateId)
+  console.log({ res })
 })()
diff --git a/examples/small_movies.json → examples/node/small_movies.json b/examples/small_movies.json → examples/node/small_movies.json
diff --git a/examples/search_example.js b/examples/search_example.js
diff --git a/examples/typescript-browser/.gitignore b/examples/typescript-browser/.gitignore
@@ -0,0 +1 @@
+public/bundle.js
diff --git a/examples/typescript-browser/package.json b/examples/typescript-browser/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "typescript-demo",
+  "version": "0.1.0",
+  "description": "MeiliSearch Typescript Demo",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack"
+  },
+  "keywords": [
+    "demo",
+    "meilisearch"
+  ],
+  "author": "Charlotte Vermandel",
+  "license": "ISC",
+  "devDependencies": {
+    "webpack": "^4.43.0",
+    "ts-loader": "^7.0.5",
+    "webpack-cli": "^3.3.12"
+  }
+}
diff --git a/examples/typescript-browser/public/index.html b/examples/typescript-browser/public/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8'>
+  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+  <title>Page Title</title>
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+</head>
+<body>
+    hello
+</body>
+</html>
+<script src="./bundle.js"></script>
diff --git a/examples/typescript-browser/src/index.ts b/examples/typescript-browser/src/index.ts
@@ -0,0 +1,22 @@
+import MeiliSearch, { IndexResponse } from '../../../'
+
+const config = {
+  host: 'http://127.0.0.1:7700',
+  apiKey: 'masterKey',
+}
+
+const client = new MeiliSearch(config)
+const user = 'MeiliSearch User'
+
+function greeter(person: string) {
+  return 'Hello, ' + person
+}
+
+;(async () => {
+  const indexes = await client.listIndexes()
+  console.log({ indexes }, 'hello')
+  const uids = indexes.map((index: IndexResponse) => index.uid)
+  document.body.innerHTML = `${greeter(
+    user
+  )} this is the list of all your indexes: ${uids.join(', ')}`
+})()
diff --git a/examples/typescript-browser/tsconfig.json b/examples/typescript-browser/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "compilerOptions": {
+  }
+}
diff --git a/examples/typescript-browser/webpack.config.js b/examples/typescript-browser/webpack.config.js
@@ -0,0 +1,26 @@
+const webpack = require('webpack')
+const path = require('path')
+
+let config = {
+  entry: './src/index.ts',
+  output: {
+    path: path.resolve(__dirname, './public'),
+    filename: './bundle.js',
+  },
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+    mainFields: ['module', 'browser'], // the `module` field has priority on the browser field
+  },
+}
+
+module.exports = config