Merge #238

238: Changed to named export instead of default export r=bidoubiwa a=bidoubiwa

Following the decision taken in `meilisearch-js`: meilisearch/meilisearch-js#756



# Named exports
MeiliSearch Js decided to go in the direction of new best practices in JS libraries by changing from default export to named export.

## New usage 

ES:
```javascript
import {instantMeiliSearch } from '@meilisearch/instant-meilisearch' // ES

const searchClient = instantMeiliSearch(...);
``` 

Node
```javascript
const { instantMeiliSearch } = require('@meilisearch/instant-meilisearch') // Node

const searchClient = instantMeiliSearch(...);
``` 

```javascript
instantMeiliSearch // browser
window.instantMeiliSearch // browser

const searchClient = instantMeiliSearch(...);
const searchClient2 = window.instantMeiliSearch(...);
``` 



Co-authored-by: Clémentine Urquizar <[email protected]>
Co-authored-by: Charlotte Vermandel <[email protected]>
Co-authored-by: bors[bot] <26634292+bors[bot]@users.noreply.github.com>
Co-authored-by: cvermand <[email protected]>

Author: 3 people

playgrounds/html/public/index.html

@@ -20,39 +20,37 @@
     <script src="../../../src/index.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
     <script>
-      console.log(instantMeiliSearch)
-      instantMeiliSearch = instantMeiliSearch.default
-        const search = instantsearch({
-            indexName: "steam-video-games",
-            searchClient: instantMeiliSearch(
-              "https://demos.meilisearch.com",
-              "dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25",
-            )
-            });
-            search.addWidgets([
-            instantsearch.widgets.searchBox({
-                container: "#searchbox",
-                placeholder: "Search..",
-            }),
-            instantsearch.widgets.configure({
-              hitsPerPage: 8,
-            }),
-            instantsearch.widgets.hits({
-                container: "#hits",
-                templates: {
-                item: `
-                    <div>
-                    <div class="hit-name">
-                        {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
-                    </div>
-                    </div>
-                `
-                }
-            })
-            ]);
-
-            search.start();
+      // This is due to parcel not accepting globals on html files.
+      instantMeiliSearch = instantMeiliSearch.instantMeiliSearch;
+      const search = instantsearch({
+          indexName: "steam-video-games",
+          searchClient: instantMeiliSearch(
+            "https://demos.meilisearch.com",
+            "dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25",
+          )
+          });
+      search.addWidgets([
+        instantsearch.widgets.searchBox({
+            container: "#searchbox",
+            placeholder: "Search..",
+        }),
+        instantsearch.widgets.configure({
+          hitsPerPage: 8,
+        }),
+        instantsearch.widgets.hits({
+          container: "#hits",
+          templates: {
+          item: `
+              <div>
+              <div class="hit-name">
+                  {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
+              </div>
+              </div>
+          `
+          }
+        })
+      ]);
+      search.start();
     </script>
   </body>
 </html>
-

playgrounds/javascript/src/app.js

@@ -1,4 +1,4 @@
-import instantMeiliSearch from '../../../src/index'
+import { instantMeiliSearch } from '../../../src/index'
 
 const search = instantsearch({
   indexName: 'steam-video-games',

playgrounds/react/src/App.js

@@ -11,7 +11,7 @@ import {
   Configure
 } from "react-instantsearch-dom";
 import "./App.css";
-import instantMeiliSearch from "./instant-meilisearch.js";
+import { instantMeiliSearch } from "./instant-meilisearch.js";
 
 const searchClient = instantMeiliSearch(
   "https://demos.meilisearch.com",

playgrounds/vue/src/App.vue

@@ -58,7 +58,7 @@
 
 <script>
 import "instantsearch.css/themes/algolia-min.css";
-import instantMeiliSearch from "../../../src/index.js";
+import { instantMeiliSearch } from "../../../src/index.js";
 
 export default {
   data() {

rollup.config.js

@@ -10,15 +10,15 @@ function getOutputFileName(fileName, isProd = false) {
 }
 
 const env = process.env.NODE_ENV || 'development'
-const LIB_NAME = 'instantMeiliSearch'
 const ROOT = resolve(__dirname, '.')
 
 module.exports = [
   // browser-friendly IIFE build
   {
     input: 'src/index.js', // directory to transpilation of typescript
     output: {
-      name: LIB_NAME,
+      name: 'window',
+      extend: true,
       file: getOutputFileName(
         // will add .min. in filename if in production env
         resolve(ROOT, pkg.browser),
@@ -52,7 +52,7 @@ module.exports = [
           resolve(ROOT, pkg.cjs),
           env === 'production'
         ),
-        exports: 'default',
+        exports: 'named',
         format: 'cjs',
         sourcemap: env === 'production', // create sourcemap for error reporting in production mode
       },
@@ -61,7 +61,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/index.js

@@ -2,7 +2,7 @@ import { MeiliSearch } from 'meilisearch'
 import { removeUndefinedFromObject } from './utils.js'
 import { createHighlighResult, createSnippetResult } from './format.js'
 
-export default function instantMeiliSearch(hostUrl, apiKey, options = {}) {
+export function instantMeiliSearch(hostUrl, apiKey, options = {}) {
   return {
     client: new MeiliSearch({ host: hostUrl, apiKey: apiKey }),
     attributesToHighlight: ['*'],

tests/base.test.js

@@ -1,4 +1,4 @@
-import instantMeiliSearch from '../src/index'
+import { instantMeiliSearch } from '../src/index'
 
 test('Should test if instantMeiliSearch Client is created correctly', () => {
   const client = instantMeiliSearch('http://localhost:7700', 'masterKey')

tests/env/esm/src/index.js

@@ -1,4 +1,4 @@
-import instantMeiliSearch from '../../../../dist/instant-meilisearch.esm'
+import { instantMeiliSearch } from '../../../../dist/instant-meilisearch.esm'
 
 console.log(instantMeiliSearch)
 const client = instantMeiliSearch('http://localhost:7700', 'masterKey')

tests/env/node/index.js

@@ -1,5 +1,9 @@
-const UMDinstantMeiliSearch = require('../../../dist/instant-meilisearch.umd')
-const CJSinstantMeiliSearch = require('../../../dist/instant-meilisearch.cjs')
+const {
+  instantMeiliSearch: UMDinstantMeiliSearch,
+} = require('../../../dist/instant-meilisearch.umd')
+const {
+  instantMeiliSearch: CJSinstantMeiliSearch,
+} = require('../../../dist/instant-meilisearch.cjs')
 
 const UMDtest = UMDinstantMeiliSearch('http://localhost:7700', 'masterKey')
 const CJStest = CJSinstantMeiliSearch('http://localhost:7700', 'masterKey')