Merge #225

225: Add css and playground r=bidoubiwa a=bidoubiwa

In this PR:

- Moved all examples to `tests/env` folder as they were not really examples.
- Add `basic_search.css` template for ease of integration
- Add HTML playground example
- refactor CI commands

Co-authored-by: Charlotte Vermandel <[email protected]>
Co-authored-by: cvermand <[email protected]>

Author: bors[bot]

.github/workflows/test.yml

@@ -24,12 +24,9 @@ jobs:
         run: yarn test
       - name: Build project
         run: yarn build
-      - name: Run ESM demo
-        run: yarn test:demo:esm
-      - name: Run Node.js demo
-        run: yarn test:demo:nodejs
-      - name: Run Browser demo
-        run: yarn test:demo:browser
+      - name: Run env tests
+        run: yarn test:env
+
 
   style:
     name: style-check
@@ -50,9 +47,5 @@ jobs:
       - uses: actions/checkout@v1
       - name: Install dependencies
         run: yarn install
-      - name: Run Vue build
-        run: yarn build:playground:vue
-      - name: Run React build
-        run: yarn build:playground:react
-      - name: Run Vanilla JS build
-        run: yarn build:playground:vanilla-js
+      - name: Run Playgrounds Builds
+        run: yarn test:playgrounds

.gitignore

@@ -105,3 +105,6 @@ dist
 
 # misc
 .DS_Store
+
+# parcel
+.parcel_cache/

CONTRIBUTING.md

@@ -69,9 +69,14 @@ Or the React playground:
 $ yarn playground:react
 ```
 
-Or the Vanilla JavaScript playground:
+Or the JavaScript playground:
 ```
-$ yarn playground:vanilla-js
+$ yarn playground:javascript
+```
+
+Or the HTML playground:
+```
+$ yarn playground:html
 ```
 
 ## Git Guidelines

examples/express/.DS_Store

@@ -1,4 +1,4 @@
 module.exports = {
   verbose: true,
-  modulePathIgnorePatterns: ['<rootDir>/examples'],
+  modulePathIgnorePatterns: ['<rootDir>/tests/env'],
 }

examples/express/public/instant-meilisearch.umd.js

@@ -5,28 +5,32 @@
   "description": "The search client to use MeiliSearch with InstantSearch.",
   "scripts": {
     "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",
+    "test:env": "yarn build && yarn test:env:browser && yarn test:env:nodejs && yarn test:env:esm",
+    "test:env:browser": "yarn --cwd tests/env/express && yarn --cwd tests/env/express test",
+    "test:env:nodejs": "node tests/env/node/index.js",
+    "test:env:esm": "yarn --cwd tests/env/esm && yarn --cwd tests/env/esm start",
+    "test:playgrounds": "yarn build:playground:vue && yarn build:playground:react && yarn build:playground:javascript && yarn build:playground:html",
     "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:javascript": "yarn --cwd ./playgrounds/javascript && yarn --cwd ./playgrounds/javascript build",
+    "build:playground:html": "yarn --cwd ./playgrounds/html && yarn --cwd ./playgrounds/html 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"
+    "playground:javascript": "yarn --cwd ./playgrounds/javascript && yarn --cwd ./playgrounds/javascript start",
+    "playground:html": "yarn --cwd ./playgrounds/html && yarn --cwd ./playgrounds/html start"
   },
   "main": "./dist/instant-meilisearch.umd.js",
   "module": "./dist/instant-meilisearch.esm.js",
   "browser": "./dist/instant-meilisearch.umd.js",
   "cjs": "./dist/instant-meilisearch.cjs.js",
   "files": [
     "dist",
-    "src"
+    "src",
+    "templates"
   ],
   "keywords": [
     "search",
@@ -52,6 +56,7 @@
     "@typescript-eslint/parser": "^4.14.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.1.0",
+    "cssnano": "^4.1.10",
     "eslint": "^7.13.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-config-react-app": "^6.0.0",

jest.config.js

@@ -0,0 +1 @@
+.parcel_cache/

package.json

@@ -0,0 +1,36 @@
+# MeiliSearch Simple Game Search
+
+This repository is a **playground**, all the following files are hot-reloading:
+- _ROOT_/src/*
+- _ROOT_/template/basic_search.css
+- ./public/index.html
+
+meaning you can change the code of this demo but also `instant-meilisearch` and it will hot reload (if you run it with `yarn serve`).
+
+The main purpose of this example is to showcase that instant-meilisearch can be easely included in an existing front-end application using `<script>` tags.
+
+The demo in this directory showcases a basic search that will let you search through games names.
+
+[![Nobel prices demo](asset/stardew.gif)](https://nobel.meilisearch.com)
+
+## Project setup
+
+```bash
+$ yarn install
+```
+
+### Compile and hot-reload for development
+```
+yarn serve
+```
+
+### Compile and minify for production
+```
+yarn build
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://cli.vuejs.org/config/).
+
+💡 If you have never used InstantSearch, we recommend reading this [getting started documentation](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/).

playgrounds/html/.gitignore

@@ -0,0 +1,25 @@
+{
+  "name": "web",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "parcel serve ./public/index.html --global instantMeiliSearch --open",
+    "build": "parcel build ./public/index.html --global instantMeiliSearch"
+  },
+  "browserslist": [
+    "last 3 and_chr versions",
+    "last 3 chrome versions",
+    "last 3 opera versions",
+    "last 3 ios_saf versions",
+    "last 3 safari versions"
+  ],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {},
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "parcel-bundler": "^1.12.4"
+  }
+}