diff --git a/package.json b/package.json index 195cfa1..fd42e46 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { - "@appbaseio/reactivesearch": "4.2.0-alpha.4", + "@appbaseio/reactivesearch": "4.3.0-alpha", "@babel/core": "^7.16.0", + "@babel/standalone": "^7.23.2", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", "@svgr/webpack": "^5.5.0", "@testing-library/jest-dom": "^5.16.4", diff --git a/src/index.js b/src/index.js index f5d3fac..81d31ef 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,7 @@ import { ReactiveBase, SearchBox } from "@appbaseio/reactivesearch"; import "./index.css"; import { fetchSearchBoxPreferences, + getFunctionFromString, getPropsById, isIdAvailble, } from "./utils/helper"; @@ -21,6 +22,7 @@ const renderById = async (id) => { popular, recent, featured: { design, layout }, + document: documentSuggestion, }, } = await fetchSearchBoxPreferences({ url: clusterUrl, @@ -29,6 +31,9 @@ const renderById = async (id) => { }); const root = ReactDOM.createRoot(document.getElementById(id)); + const renderDocumentSuggestion = documentSuggestion?.renderSuggestion + ? getFunctionFromString(documentSuggestion?.renderSuggestion) + : null; if (container) { root.render( @@ -61,8 +66,10 @@ const renderById = async (id) => { enablePopularSuggestions={design.enablePopularSuggestions} enableRecentSuggestions={design.enableRecentSuggestions} enableFeaturedSuggestions={design.enableFeaturedSuggestions} + enableDocumentSuggestions={design.enableDocumentSuggestions} // Below is temporarily disabled due to an issue with the backend, which is returning empty hits - // enableEndpointSuggestions={form.value.enableEndpointSuggestions} + enableEndpointSuggestions={design.enableEndpointSuggestions} + enableIndexSuggestions={!!index} enableFAQSuggestions={design.enableFAQSuggestions} enableAI={design.enableAI} popularSuggestionsConfig={{ @@ -80,6 +87,19 @@ const renderById = async (id) => { ? { sectionsOrder: layout?.sectionsOrder } : {}), }} + documentSuggestionsConfig={{ + sectionLabel: documentSuggestion?.sectionLabel || undefined, + }} + renderItem={ + renderDocumentSuggestion && design.enableDocumentSuggestions + ? (suggestion) => { + if (suggestion._suggestion_type === "document") { + return renderDocumentSuggestion(suggestion); + } + return null; + } + : undefined + } searchboxId={searchBoxId} showVoiceSearch={design.enableVoiceSearch} showImageSearch={design.enableImageSearch} @@ -106,6 +126,7 @@ const renderById = async (id) => { /> ) : null } + showDistinctSuggestions /> , root diff --git a/src/utils/helper.js b/src/utils/helper.js index a06e0d9..f108069 100644 --- a/src/utils/helper.js +++ b/src/utils/helper.js @@ -1,3 +1,6 @@ +import { transform } from "@babel/standalone"; +import React from "react"; + export const isIdAvailble = (id) => document.getElementById(id); export const getPropsById = (id) => { @@ -36,3 +39,27 @@ export const fetchSearchBoxPreferences = ({ return error; }); }; + +/** + * Assumption: + * functionString would contain comments and one function definition only. + * The function definition needs to be the classic function definition. i.e. using function keyword. + */ + +/** + * + * @param {string} functionString + * @returns {function} convertedFunction + */ +export const getFunctionFromString = (functionString) => { + const transpiledCode = transform(functionString, { + presets: ["react"], + }).code; + // Remove comments and trim spaces + const cleanCode = transpiledCode + .replace(/(\/\*[\s\S]*?\*\/)|(\/\/.+)/g, "") // Remove comments + .trim(); + // eslint-disable-next-line + const func = new Function("React", `return (${cleanCode})`)(React); + return func; +}; diff --git a/yarn.lock b/yarn.lock index 62b67cd..79a083e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -31,10 +31,10 @@ dependencies: cross-fetch "^3.0.4" -"@appbaseio/reactivecore@10.2.0-alpha.3": - version "10.2.0-alpha.3" - resolved "https://registry.yarnpkg.com/@appbaseio/reactivecore/-/reactivecore-10.2.0-alpha.3.tgz#f1047a3b62c3fdfb434a913d3b0c558d980f7cf8" - integrity sha512-kkyaTndFziajODlSKMR9b1KtqghR2s2kc/eQ4/cMLsbauSSsj1YNrJoStcVWPA8IMcdkzctr6LwSiYokiXz44w== +"@appbaseio/reactivecore@10.2.0": + version "10.2.0" + resolved "https://registry.yarnpkg.com/@appbaseio/reactivecore/-/reactivecore-10.2.0.tgz#44d3ad3f5f40062e24fdfadb877ab7dc2efcd4a3" + integrity sha512-unx9e8HLw/y7SO/1nL9ehpo95SsWsp4umoDvIraRxXJ3sfRYl+5dB91b2U9DG8D1XqBgbf18JTsfktu9yFQjDg== dependencies: cross-fetch "^3.0.4" dayjs "^1.11.7" @@ -42,13 +42,13 @@ redux "^4.0.0" redux-thunk "^2.3.0" -"@appbaseio/reactivesearch@4.2.0-alpha.4": - version "4.2.0-alpha.4" - resolved "https://registry.yarnpkg.com/@appbaseio/reactivesearch/-/reactivesearch-4.2.0-alpha.4.tgz#014de74bc1abf2ec8e30681cd74fd39d2e11d99b" - integrity sha512-7UmxTFr2uhE8IHB5VNC7uLq36bRFA3i7pobLGesnemDDYgYbwj7AvL7j9H/nIsiCUR04TflXXBDzagVswlJQBQ== +"@appbaseio/reactivesearch@4.3.0-alpha": + version "4.3.0-alpha" + resolved "https://registry.yarnpkg.com/@appbaseio/reactivesearch/-/reactivesearch-4.3.0-alpha.tgz#c7b535c8355aedf9d405354fa6791d9ec6a6e709" + integrity sha512-M7ckA+cC/Ju8jBQstln0M7/yboO2dF5x2BBUPZhN5LD9WYfkaV3VZPhS7k/tfIXs6zSEKU73GISRuxX30yjNxg== dependencies: "@appbaseio/analytics" "^1.2.0-alpha.1" - "@appbaseio/reactivecore" "10.2.0-alpha.3" + "@appbaseio/reactivecore" "10.2.0" "@appbaseio/rheostat" "^1.0.0-alpha.15" "@emotion/core" "^10.0.28" "@emotion/styled" "^10.0.27" @@ -1095,6 +1095,11 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/standalone@^7.23.2": + version "7.23.2" + resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.23.2.tgz#1c6348bab159d24623907eb5866393bc7ab5a380" + integrity sha512-VJNw7OS26JvB6rE9XpbT6uQeQIEBWU5eeHGS4VR/+/4ZoKdLBXLcy66ZVJ/9IBkK1RMp8B0cohvhzdKWtJAGmg== + "@babel/template@^7.18.10", "@babel/template@^7.18.6", "@babel/template@^7.3.3": version "7.18.10" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"