Change to named export

Add both named and default export tests in env

Update samples and examples

Improve readme for multiple env

Change html title

Clarification on import

Change code block language

Add module to es

Improving code samples

Author: bidoubiwa

.code-samples.meilisearch.yaml

@@ -293,10 +293,22 @@ getting_started_add_documents_md: |-
   $ yarn add meilisearch
   ```
 
+  **Import**
+
+  `require` syntax:
   ```js
-  const MeiliSearch = require('meilisearch')
+  const { MeiliSearch } = require('meilisearch')
   const movies = require('./movies.json')
+  ```
+
+  `import` syntax:
+  ```js
+  import { MeiliSearch } from 'meilisearch'
+  import movies from '../small_movies.json'
+  ```
 
+  **Use**
+  ```js
   const client = new MeiliSearch({ host: 'http://127.0.0.1:7700' })
   client.index('movie').addDocuments(movies)
     .then((res) => console.log(res))

README.md

@@ -70,36 +70,41 @@ NB: you can also download MeiliSearch from **Homebrew** or **APT**.
 
 ### Import <!-- omit in toc -->
 
-#### Front End or ESmodule <!-- omit in toc -->
+Depending on the environment on which you are using MeiliSearch, imports may differ.
+
+#### Import Syntax <!-- omit in toc -->
+
+Usage in a ES module environment:
 
 ```javascript
-import MeiliSearch from 'meilisearch'
+import { MeiliSearch } from 'meilisearch'
 
 const client = new MeiliSearch({
   host: 'http://127.0.0.1:7700',
   apiKey: 'masterKey',
 })
 ```
 
-#### HTML Import <!-- omit in toc -->
+#### Include Script Tag <!-- omit in toc -->
 
-```javascript
+Usage in an HTML (or alike) file:
+
+```html
 <script src="https://cdn.jsdelivr.net/npm/meilisearch@latest/dist/bundles/meilisearch.umd.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 <!-- omit in toc -->
+#### Require Syntax <!-- omit in toc -->
+
+Usage in a back-end node environment
 
 ```javascript
-const MeiliSearch = require('meilisearch')
+const { MeiliSearch } = require('meilisearch')
 
 const client = new MeiliSearch({
   host: 'http://127.0.0.1:7700',
@@ -116,9 +121,9 @@ To make this package work with React Native, please add the [react-native-url-po
 #### Add Documents <!-- omit in toc -->
 
 ```js
-const MeiliSearch = require('meilisearch')
-// Or if you are on a front-end environment:
-import MeiliSearch from 'meilisearch'
+const { MeiliSearch } = require('meilisearch')
+// Or if you are in a ES environment
+import { MeiliSearch } from 'meilisearch'
 
 ;(async () => {
   const client = new MeiliSearch({

examples/node/search_example.js

@@ -1,4 +1,4 @@
-const MeiliSearch = require('../../dist/bundles/meilisearch.umd.js')
+const { MeiliSearch } = require('../../dist/bundles/meilisearch.umd.js')
 const dataset = require('./small_movies.json')
 
 const config = {

examples/typescript-browser/package.json

@@ -4,7 +4,7 @@
   "description": "MeiliSearch Typescript Demo",
   "main": "index.js",
   "scripts": {
-    "build": "webpack"
+    "build": "webpack --resolveJsonModule"
   },
   "keywords": [
     "demo",

examples/typescript-browser/src/index.ts

@@ -1,4 +1,4 @@
-import MeiliSearch, { IndexResponse } from '../../../'
+import { MeiliSearch, IndexResponse } from '../../../'
 
 const config = {
   host: 'http://127.0.0.1:7700',

examples/typescript-browser/tsconfig.json

@@ -1,4 +1,6 @@
 {
   "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true
   }
 }

examples/typescript-browser/webpack.config.js

@@ -7,7 +7,7 @@ let config = {
     path: path.resolve(__dirname, './public'),
     filename: './bundle.js',
   },
-  mode: 'production',
+  mode: 'development',
   module: {
     rules: [
       {

examples/typescript-node/src/index.ts

@@ -1,4 +1,4 @@
-import MeiliSearch, { IndexResponse } from '../../../'
+import { MeiliSearch, IndexResponse } from '../../../'
 
 const config = {
   host: 'http://127.0.0.1:7700',

rollup.config.js

@@ -12,7 +12,6 @@ function getOutputFileName(fileName, isProd = false) {
 }
 
 const env = process.env.NODE_ENV || 'development'
-const LIB_NAME = 'MeiliSearch'
 const ROOT = resolve(__dirname, '.')
 
 const PLUGINS = [
@@ -22,7 +21,6 @@ const PLUGINS = [
       allowJs: false,
       includes: ['src'],
       exclude: ['tests', 'examples', '*.js', 'scripts'],
-      esModuleInterop: true,
     },
   }),
 ]
@@ -33,7 +31,8 @@ module.exports = [
     input: 'src/meilisearch.ts', // directory to transpilation of typescript
     external: ['cross-fetch', 'cross-fetch/polyfill'],
     output: {
-      name: LIB_NAME,
+      name: 'window',
+      extend: true,
       file: getOutputFileName(
         // will add .min. in filename if in production env
         resolve(ROOT, pkg.browser),
@@ -88,7 +87,7 @@ module.exports = [
           resolve(ROOT, pkg.module),
           env === 'production'
         ),
-        exports: 'default',
+        exports: 'named',
         format: 'es',
         sourcemap: env === 'production', // create sourcemap for error reporting in production mode
       },

src/meilisearch.ts

@@ -14,7 +14,7 @@ import HttpRequests from './http-requests'
 
 type createPath = (x: string | number) => string
 
-class MeiliSearch implements Types.MeiliSearchInterface {
+export class MeiliSearch implements Types.MeiliSearchInterface {
   config: Types.Config
   httpRequest: HttpRequests
   static apiRoutes: {
@@ -208,5 +208,3 @@ class MeiliSearch implements Types.MeiliSearchInterface {
     return await this.httpRequest.get<Types.EnqueuedDump>(url)
   }
 }
-
-export default MeiliSearch