feat(horizontal-slider): change renderer implementation to VDOM (#28)

algolia · Jun 8, 2021 · e297a92 · e297a92
1 parent 29edf36
commit e297a92
Show file tree

Hide file tree

Showing 58 changed files with 1,453 additions and 869 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -23,19 +23,23 @@ aliases:
     command: |
       set -exu
 
-      mkdir -p packages/js-horizontal-slider/dist
-      mkdir -p packages/react-horizontal-slider/dist
+      mkdir -p packages/horizontal-slider-js/dist
+      mkdir -p packages/horizontal-slider-react/dist
+      mkdir -p packages/horizontal-slider-vdom/dist
+      mkdir -p packages/horizontal-slider-theme/dist
       mkdir -p packages/recommendations-core/dist
       mkdir -p packages/recommendations-js/dist
       mkdir -p packages/recommendations-react/dist
       mkdir -p packages/recommendations-vdom/dist
 
-      cp -R /tmp/workspace/packages/js-horizontal-slider/dist packages/js-horizontal-slider
-      cp -R /tmp/workspace/packages/react-horizontal-slider/dist packages/react-horizontal-slider
-      cp -R /tmp/workspace/packages/recommendations-core/dist packages/recommendations-core
-      cp -R /tmp/workspace/packages/recommendations-js/dist packages/recommendations-js
-      cp -R /tmp/workspace/packages/recommendations-react/dist packages/recommendations-react
-      cp -R /tmp/workspace/packages/recommendations-vdom/dist packages/recommendations-vdom
+      cp -R /tmp/workspace/packages/horizontal-slider-js/dist packages/horizontal-slider-js/
+      cp -R /tmp/workspace/packages/horizontal-slider-react/dist packages/horizontal-slider-react/
+      cp -R /tmp/workspace/packages/horizontal-slider-vdom/dist packages/horizontal-slider-vdom/
+      cp -R /tmp/workspace/packages/horizontal-slider-theme/dist packages/horizontal-slider-theme/
+      cp -R /tmp/workspace/packages/recommendations-core/dist packages/recommendations-core/
+      cp -R /tmp/workspace/packages/recommendations-js/dist packages/recommendations-js/
+      cp -R /tmp/workspace/packages/recommendations-react/dist packages/recommendations-react/
+      cp -R /tmp/workspace/packages/recommendations-vdom/dist packages/recommendations-vdom/
 
 defaults: &defaults
   working_directory: ~/ui-components
@@ -65,15 +69,19 @@ jobs:
           command: |
             set -exu
 
-            mkdir -p /tmp/workspace/packages/js-horizontal-slider/dist
-            mkdir -p /tmp/workspace/packages/react-horizontal-slider/dist
+            mkdir -p /tmp/workspace/packages/horizontal-slider-js/dist
+            mkdir -p /tmp/workspace/packages/horizontal-slider-react/dist
+            mkdir -p /tmp/workspace/packages/horizontal-slider-vdom/dist
+            mkdir -p /tmp/workspace/packages/horizontal-slider-theme/dist
             mkdir -p /tmp/workspace/packages/recommendations-core/dist
             mkdir -p /tmp/workspace/packages/recommendations-js/dist
             mkdir -p /tmp/workspace/packages/recommendations-react/dist
             mkdir -p /tmp/workspace/packages/recommendations-vdom/dist
 
-            cp -R packages/js-horizontal-slider/dist /tmp/workspace/packages/js-horizontal-slider
-            cp -R packages/react-horizontal-slider/dist /tmp/workspace/packages/react-horizontal-slider
+            cp -R packages/horizontal-slider-js/dist /tmp/workspace/packages/horizontal-slider-js
+            cp -R packages/horizontal-slider-react/dist /tmp/workspace/packages/horizontal-slider-react
+            cp -R packages/horizontal-slider-vdom/dist /tmp/workspace/packages/horizontal-slider-vdom
+            cp -R packages/horizontal-slider-theme/dist /tmp/workspace/packages/horizontal-slider-theme
             cp -R packages/recommendations-core/dist /tmp/workspace/packages/recommendations-core
             cp -R packages/recommendations-js/dist /tmp/workspace/packages/recommendations-js
             cp -R packages/recommendations-react/dist /tmp/workspace/packages/recommendations-react

diff --git a/README.md b/README.md
@@ -10,12 +10,14 @@ During the beta of Algolia Recommend, the UI components rely on an Algolia Index
 
 ## Packages
 
+- [`@algolia/recommendations-core`](/packages/recommendations-react): Core package for [Algolia Recommend](https://www.algolia.com/doc/guides/algolia-ai/recommend/)
 - [`@algolia/recommendations-js`](/packages/recommendations-js): JavaScript package for [Algolia Recommend](https://www.algolia.com/doc/guides/algolia-ai/recommend/)
 - [`@algolia/recommendations-react`](/packages/recommendations-react): React package for [Algolia Recommend](https://www.algolia.com/doc/guides/algolia-ai/recommend/)
-- [`@algolia/recommendations-core`](/packages/recommendations-react): Core package for [Algolia Recommend](https://www.algolia.com/doc/guides/algolia-ai/recommend/)
 - [`@algolia/recommendations-vdom`](/packages/recommendations-react): VDOM package for [Algolia Recommend](https://www.algolia.com/doc/guides/algolia-ai/recommend/)
-- [`@algolia/ui-components-js-horizontal-slider`](/packages/js-horizontal-slider): JavaScript horizontal slider UI component
-- [`@algolia/ui-components-react-horizontal-slider`](/packages/react-horizontal-slider): React horizontal slider UI component
+- [`@algolia/ui-components-horizontal-slider-js`](/packages/horizontal-slider-js): JavaScript horizontal slider UI component
+- [`@algolia/ui-components-horizontal-slider-react`](/packages/horizontal-slider-react): React horizontal slider UI component
+- [`@algolia/ui-components-horizontal-slider-theme`](/packages/horizontal-slider-theme): Horizontal slider UI component theme
+- [`@algolia/ui-components-horizontal-slider-vdom`](/packages/horizontal-slider-vdom): VDOM package for Horizontal slider UI component
 
 ## License
 

diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -1,20 +1,32 @@
 {
   "files": [
     {
-      "path": "packages/js-horizontal-slider/dist/umd/index.js",
-      "maxSize": "7.5 kB"
+      "path": "packages/horizontal-slider-js/dist/umd/index.js",
+      "maxSize": "6 kB"
     },
     {
-      "path": "packages/react-horizontal-slider/dist/umd/index.js",
+      "path": "packages/horizontal-slider-react/dist/umd/index.js",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "packages/horizontal-slider-vdom/dist/umd/index.js",
       "maxSize": "1.75 kB"
     },
+    {
+      "path": "packages/recommendations-core/dist/umd/index.js",
+      "maxSize": "2 kB"
+    },
     {
       "path": "packages/recommendations-js/dist/umd/index.js",
       "maxSize": "7.25 kB"
     },
     {
       "path": "packages/recommendations-react/dist/umd/index.js",
       "maxSize": "3.25 kB"
+    },
+    {
+      "path": "packages/recommendations-vdom/dist/umd/index.js",
+      "maxSize": "1.25 kB"
     }
   ]
 }
diff --git a/examples/demo/package.json b/examples/demo/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@algolia/react-recommendations-example",
-  "description": "React Recommendations examples",
+  "name": "@algolia/recommendations-react-example",
+  "description": "Recommendations React example",
   "version": "1.0.0-experimental.2",
   "private": true,
   "license": "MIT",
@@ -12,7 +12,8 @@
     "@algolia/autocomplete-js": "1.1.0",
     "@algolia/autocomplete-theme-classic": "1.1.0",
     "@algolia/recommendations-react": "1.0.0-experimental.2",
-    "@algolia/ui-components-react-horizontal-slider": "1.0.0-experimental.2",
+    "@algolia/ui-components-horizontal-slider-react": "1.0.0-experimental.2",
+    "@algolia/ui-components-horizontal-slider-theme": "1.0.0-experimental.2",
     "algoliasearch": "4.9.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/examples/demo/src/App.js b/examples/demo/src/App.js
@@ -2,7 +2,7 @@ import {
   FrequentlyBoughtTogether,
   RelatedProducts,
 } from '@algolia/recommendations-react';
-import { HorizontalSlider } from '@algolia/ui-components-react-horizontal-slider';
+import { HorizontalSlider } from '@algolia/ui-components-horizontal-slider-react';
 import algoliasearch from 'algoliasearch';
 import React, { Fragment, useState } from 'react';
 import insights from 'search-insights';
@@ -13,7 +13,7 @@ import { Autocomplete, getAlgoliaResults } from './Autocomplete';
 import { BundleView } from './BundleView';
 import { Hit } from './Hit';
 
-import '@algolia/ui-components-react-horizontal-slider/HorizontalSlider.css';
+import '@algolia/ui-components-horizontal-slider-theme';
 import './App.css';
 import './Recommendations.css';
 

diff --git a/examples/js-demo/app.js b/examples/js-demo/app.js
@@ -4,12 +4,13 @@ import {
   frequentlyBoughtTogether,
   relatedProducts,
 } from '@algolia/recommendations-js';
+import { horizontalSlider } from '@algolia/ui-components-horizontal-slider-js';
 import algoliasearch from 'algoliasearch';
 import { h, render } from 'preact';
 import insights from 'search-insights';
 
 import '@algolia/autocomplete-theme-classic';
-import '@algolia/ui-components-js-horizontal-slider/HorizontalSlider.css';
+import '@algolia/ui-components-horizontal-slider-theme';
 import { Hit } from './Hit';
 
 const appId = 'HYDY1KWTWB';
@@ -119,6 +120,31 @@ function renderRecommendations(selectedProduct) {
       analytics: true,
       clickAnalytics: true,
     },
+    fallbackComponent() {
+      return relatedProducts({
+        searchClient,
+        indexName,
+        objectIDs: [selectedProduct.objectID],
+        itemComponent({ item }) {
+          return <Hit hit={item} insights={insights} />;
+        },
+        view: horizontalSlider,
+        maxRecommendations: 10,
+        translations: {
+          title: 'Related products (fallback)',
+        },
+        fallbackFilters: [
+          `hierarchical_categories.lvl2:${selectedProduct.hierarchical_categories.lvl2}`,
+        ],
+        searchParameters: {
+          analytics: true,
+          clickAnalytics: true,
+          facetFilters: [
+            `hierarchical_categories.lvl0:${selectedProduct.hierarchical_categories.lvl0}`,
+          ],
+        },
+      });
+    },
   });
 
   relatedProducts({
@@ -129,6 +155,7 @@ function renderRecommendations(selectedProduct) {
     itemComponent({ item }) {
       return <Hit hit={item} insights={insights} />;
     },
+    view: horizontalSlider,
     maxRecommendations: 10,
     translations: {
       title: 'Related products',

diff --git a/examples/js-demo/package.json b/examples/js-demo/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@algolia/js-recommendations-example",
-  "description": "JavaScript Recommendations examples",
+  "name": "@algolia/recommendations-js-example",
+  "description": "Recommendations JavaScript example",
   "version": "1.0.0-experimental.2",
   "private": true,
   "license": "MIT",
@@ -12,7 +12,8 @@
     "@algolia/autocomplete-js": "1.1.0",
     "@algolia/autocomplete-theme-classic": "1.1.0",
     "@algolia/recommendations-js": "1.0.0-experimental.2",
-    "@algolia/ui-components-js-horizontal-slider": "1.0.0-experimental.2",
+    "@algolia/ui-components-horizontal-slider-js": "1.0.0-experimental.2",
+    "@algolia/ui-components-horizontal-slider-theme": "1.0.0-experimental.2",
     "algoliasearch": "4.9.1",
     "preact": "10.5.13",
     "search-insights": "2.0.0"

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@algolia/react-recommendations-monorepo",
+  "name": "@algolia/ui-components-monorepo",
   "private": true,
   "license": "MIT",
   "workspaces": [
@@ -15,8 +15,8 @@
     "build": "lerna run build --no-private",
     "format": "prettier --write .",
     "lint": "eslint --ext .js,.ts,.tsx .",
-    "playground-js:start": "yarn workspace @algolia/js-recommendations-example start",
-    "playground:start": "yarn workspace @algolia/react-recommendations-example start",
+    "playground-js:start": "yarn workspace @algolia/recommendations-js-example start",
+    "playground:start": "yarn workspace @algolia/recommendations-react-example start",
     "prepare": "lerna run prepare --no-private",
     "release": "shipjs prepare",
     "test:size": "bundlesize",
@@ -42,10 +42,10 @@
     "@types/react": "^17.0.5",
     "@typescript-eslint/eslint-plugin": "2.19.0",
     "@typescript-eslint/parser": "2.19.0",
+    "autoprefixer": "10.0.4",
     "babel-eslint": "10.1.0",
-    "babel-plugin-module-resolver": "4.1.0",
     "bundlesize": "0.18.0",
-    "cross-env": "7.0.2",
+    "cssnano": "4.1.10",
     "eslint": "6.8.0",
     "eslint-config-algolia": "15.0.0",
     "eslint-config-prettier": "6.15.0",
@@ -58,6 +58,10 @@
     "eslint-plugin-react-hooks": "4.2.0",
     "jest": "26.6.3",
     "lerna": "4.0.0",
+    "postcss": "8.1.8",
+    "postcss-color-rgb": "2.0.0",
+    "postcss-comment": "2.0.0",
+    "postcss-preset-env": "6.7.0",
     "prettier": "2.2.1",
     "rollup": "2.48.0",
     "rollup-plugin-commonjs": "10.1.0",

diff --git a/packages/js-horizontal-slider/README.md → packages/horizontal-slider-js/README.md b/packages/js-horizontal-slider/README.md → packages/horizontal-slider-js/README.md
@@ -1,13 +1,13 @@
-# `@algolia/ui-components-js-horizontal-slider`
+# `@algolia/ui-components-horizontal-slider-js`
 
 Horizontal slider UI component for JavaScript.
 
 ## Installation
 
 ```sh
-yarn add @algolia/ui-components-js-horizontal-slider@experimental
+yarn add @algolia/ui-components-horizontal-slider-js@experimental
 # or
-npm install @algolia/ui-components-js-horizontal-slider@experimental
+npm install @algolia/ui-components-horizontal-slider-js@experimental
 ```
 
 ## Usage
@@ -21,9 +21,9 @@ To get started, you need a container for your slider to go in. If you don’t ha
 Then, insert your slider into it by calling the `horizontalSlider` function and providing the [`container`](#container). It can be a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) or an [Element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).
 
 ```js
-import { horizontalSlider } from '@algolia/ui-components-js-horizontal-slider';
+import { horizontalSlider } from '@algolia/ui-components-horizontal-slider-js';
 
-import '@algolia/ui-components-js-horizontal-slider/HorizontalSlider.css';
+import '@algolia/ui-components-horizontal-slider-theme';
 
 const items = [
   { objectID: '1', name: 'Item 1' },
@@ -43,7 +43,7 @@ horizontalSlider({
 
 ### `container`
 
-> `string | HTMLElement` | **required**
+> `string | HTMLElement`
 
 The container for the horizontal slider. You can either pass a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) or an [Element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).
 

diff --git a/...ages/react-horizontal-slider/package.json → packages/horizontal-slider-js/package.json b/...ages/react-horizontal-slider/package.json → packages/horizontal-slider-js/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@algolia/ui-components-react-horizontal-slider",
+  "name": "@algolia/ui-components-horizontal-slider-js",
   "description": "Horizontal slider UI component.",
   "version": "1.0.0-experimental.2",
   "license": "MIT",
@@ -18,18 +18,18 @@
   "jsdelivr": "dist/esm/index.js",
   "sideEffects": false,
   "files": [
-    "dist/",
-    "HorizontalSlider.css"
+    "dist/"
   ],
   "scripts": {
     "build:clean": "rm -rf ./dist",
     "build:esm": "babel src --root-mode upward --extensions '.ts,.tsx' --out-dir dist/esm --ignore '**/*/__tests__/'",
+    "build:umd": "rollup --config",
     "build:types": "tsc -p ./tsconfig.declaration.json --outDir ./dist/esm",
-    "build:umd": "cross-env BUILD=umd rollup --config",
     "build": "yarn build:clean && yarn build:esm && yarn build:umd && yarn build:types",
     "prepare": "yarn build:esm && yarn build:types"
   },
-  "peerDependencies": {
-    "react": ">= 16.8.0 < 18"
+  "dependencies": {
+    "@algolia/ui-components-horizontal-slider-vdom": "1.0.0-experimental.2",
+    "preact": "^10.0.0"
   }
 }
diff --git a/packages/horizontal-slider-js/rollup.config.js b/packages/horizontal-slider-js/rollup.config.js
@@ -0,0 +1,14 @@
+import { plugins } from '../../rollup.base.config';
+
+import pkg from './package.json';
+
+export default {
+  input: pkg.source,
+  output: {
+    file: pkg['umd:main'],
+    format: 'umd',
+    sourcemap: true,
+    name: pkg.name,
+  },
+  plugins,
+};
diff --git a/...s-horizontal-slider/src/getHTMLElement.ts → ...orizontal-slider-js/src/getHTMLElement.ts b/...s-horizontal-slider/src/getHTMLElement.ts → ...orizontal-slider-js/src/getHTMLElement.ts