diff --git a/babel.config.js b/babel.config.js index de74414e1..58f0471a2 100644 --- a/babel.config.js +++ b/babel.config.js @@ -14,6 +14,10 @@ module.exports = (api) => { return { presets: [ '@babel/preset-typescript', + [ + '@babel/preset-react', + { pragma: 'createElement', pragmaFrag: 'Fragment' }, + ], [ '@babel/preset-env', { diff --git a/examples/js/env.ts b/examples/js/env.ts index b6dc0beb2..35fed015b 100644 --- a/examples/js/env.ts +++ b/examples/js/env.ts @@ -1,6 +1,9 @@ +import { h } from 'preact'; + // Parcel picks the `source` field of the monorepo packages and thus doesn't // apply the Babel config to replace our `__DEV__` global expression. // We therefore need to manually override it in the example app. // See https://twitter.com/devongovett/status/1134231234605830144 (global as any).__DEV__ = process.env.NODE_ENV !== 'production'; (global as any).__TEST__ = false; +(global as any).h = h; diff --git a/package.json b/package.json index ae3d59f8d..945dfd261 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "devDependencies": { "@babel/cli": "7.12.8", "@babel/preset-env": "7.12.7", + "@babel/preset-react": "7.12.10", "@babel/preset-typescript": "7.12.7", "@rollup/plugin-json": "4.1.0", "@rollup/plugin-node-resolve": "11.0.0", diff --git a/packages/autocomplete-js/src/render.ts b/packages/autocomplete-js/src/render.tsx similarity index 52% rename from packages/autocomplete-js/src/render.ts rename to packages/autocomplete-js/src/render.tsx index de3f8d84a..79e9e1509 100644 --- a/packages/autocomplete-js/src/render.ts +++ b/packages/autocomplete-js/src/render.tsx @@ -1,3 +1,4 @@ +/** @jsx createElement */ import { AutocompleteApi as AutocompleteCoreApi, AutocompleteScopeApi, @@ -90,90 +91,77 @@ export function renderPanel( dom.panel.classList.toggle('aa-Panel--touch', isTouch); dom.panel.classList.toggle('aa-Panel--stalled', state.status === 'stalled'); - const sections = state.collections.map(({ source, items }, sourceIndex) => { - return createElement('section', { - key: sourceIndex, - className: classNames.source, - children: [ - source.templates.header && - createElement('div', { - className: classNames.sourceHeader, - children: [ - source.templates.header({ - createElement, - Fragment, - items, - source, - state, - }), - ], - }), - items.length === 0 && source.templates.empty - ? createElement('div', { - className: classNames.sourceEmpty, - children: [ - source.templates.empty({ + const sections = state.collections.map(({ source, items }, sourceIndex) => ( +
+ {source.templates.header && ( +
+ {source.templates.header({ + createElement, + Fragment, + items, + source, + state, + })} +
+ )} + + {items.length === 0 && source.templates.empty ? ( +
+ {source.templates.empty({ + createElement, + Fragment, + source, + state, + })} +
+ ) : ( + + )} +
+ )); - return createElement('li', { - key: itemProps.id, - className: classNames.item, - ...propGetters.getItemProps({ - state, - props: itemProps, - ...autocompleteScopeApi, - }), - children: [ - source.templates.item({ - createElement, - Fragment, - item, - state, - }), - ], - }); - }), - ], - }), - source.templates.footer && - createElement('div', { - className: classNames.sourceFooter, - children: [ - source.templates.footer({ - createElement, - Fragment, - items, - source, - state, - }), - ], - }), - ], - }); - }); - const children = createElement('div', { - className: 'aa-PanelLayout', - children: sections, - }); + const children =
{sections}
; render({ children, state, sections, createElement, Fragment }, dom.panel); } diff --git a/packages/autocomplete-plugin-query-suggestions/src/getTemplates.ts b/packages/autocomplete-plugin-query-suggestions/src/getTemplates.ts deleted file mode 100644 index d9ea72a37..000000000 --- a/packages/autocomplete-plugin-query-suggestions/src/getTemplates.ts +++ /dev/null @@ -1,82 +0,0 @@ -import { reverseHighlightHit, SourceTemplates } from '@algolia/autocomplete-js'; - -import { QuerySuggestionsHit } from './types'; - -export type GetTemplatesParams = { - onTapAhead(item: TItem): void; -}; - -export function getTemplates({ - onTapAhead, -}: GetTemplatesParams): SourceTemplates { - return { - item({ item, createElement, Fragment }) { - return createElement(Fragment, { - children: [ - createElement('div', { - className: 'aa-ItemIcon aa-ItemIcon--no-border', - children: [ - createElement( - 'svg', - { - width: '20', - height: '20', - viewBox: '0 0 20 20', - }, - createElement('path', { - d: - 'M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z', - stroke: 'currentColor', - fill: 'none', - 'fill-rule': 'evenodd', - 'stroke-width': '1.4', - 'stroke-linecap': 'round', - 'stroke-linejoin': 'round', - }) - ), - ], - }), - createElement('div', { - className: 'aa-ItemContent', - children: [ - createElement('div', { - className: 'aa-ItemContentTitle', - children: reverseHighlightHit({ - hit: item, - attribute: 'query', - }), - }), - ], - }), - createElement('button', { - className: 'aa-ItemActionButton', - title: `Fill query with "${item.query}"`, - onClick(event: MouseEvent) { - event.stopPropagation(); - onTapAhead(item); - }, - children: [ - createElement( - 'svg', - { - viewBox: '0 0 24 24', - fill: 'currentColor', - width: '18', - height: '18', - }, - createElement('rect', { - fill: 'none', - height: '24', - width: '24', - }), - createElement('path', { - d: 'M5,15h2V8.41L18.59,20L20,18.59L8.41,7H15V5H5V15z', - }) - ), - ], - }), - ], - }); - }, - }; -} diff --git a/packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx b/packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx new file mode 100644 index 000000000..de68af083 --- /dev/null +++ b/packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx @@ -0,0 +1,55 @@ +/** @jsx createElement */ +import { reverseHighlightHit, SourceTemplates } from '@algolia/autocomplete-js'; + +import { QuerySuggestionsHit } from './types'; + +export type GetTemplatesParams = { + onTapAhead(item: TItem): void; +}; + +export function getTemplates({ + onTapAhead, +}: GetTemplatesParams): SourceTemplates { + return { + item({ item, createElement, Fragment }) { + return ( + +
+ + + +
+
+
+ {reverseHighlightHit({ + hit: item, + attribute: 'query', + })} +
+
+ + + ); + }, + }; +} diff --git a/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts b/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts deleted file mode 100644 index 33620eb85..000000000 --- a/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { reverseHighlightHit, SourceTemplates } from '@algolia/autocomplete-js'; - -import { RecentSearchesItem } from './types'; - -export type GetTemplatesParams = { - onRemove(id: string): void; -}; - -export function getTemplates({ - onRemove, -}: GetTemplatesParams): SourceTemplates { - return { - item({ item, createElement, Fragment }) { - return createElement(Fragment, { - children: [ - createElement('div', { - className: 'aa-ItemIcon aa-ItemIcon--no-border', - children: [ - createElement( - 'svg', - { - width: '20', - height: '20', - viewBox: '0 0 22 22', - fill: 'currentColor', - }, - createElement('path', { - d: 'M0 0h24v24H0z', - fill: 'none', - }), - createElement('path', { - d: - 'M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z', - }) - ), - ], - }), - createElement('div', { - className: 'aa-ItemContent', - children: [ - createElement('div', { - className: 'aa-ItemContentTitle', - children: reverseHighlightHit({ - hit: item, - attribute: 'query', - }), - }), - ], - }), - createElement('button', { - className: 'aa-ItemActionButton', - title: 'Remove', - onClick(event: MouseEvent) { - event.stopPropagation(); - onRemove(item.id); - }, - children: [ - createElement( - 'svg', - { - width: '20', - height: '20', - viewBox: '0 0 20 20', - fill: 'currentColor', - }, - createElement('path', { - d: - 'M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z', - stroke: 'currentColor', - fill: 'none', - 'fill-rule': 'evenodd', - 'stroke-width': '1.4', - 'stroke-linecap': 'round', - 'stroke-linejoin': 'round', - }) - ), - ], - }), - ], - }); - }, - }; -} diff --git a/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx b/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx new file mode 100644 index 000000000..038b67b4c --- /dev/null +++ b/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx @@ -0,0 +1,55 @@ +/** @jsx createElement */ +import { reverseHighlightHit, SourceTemplates } from '@algolia/autocomplete-js'; + +import { RecentSearchesItem } from './types'; + +export type GetTemplatesParams = { + onRemove(id: string): void; +}; + +export function getTemplates({ + onRemove, +}: GetTemplatesParams): SourceTemplates { + return { + item({ item, createElement, Fragment }) { + return ( + +
+ + + + +
+
+
+ {reverseHighlightHit({ + hit: item, + attribute: 'query', + })} +
+
+ + + ); + }, + }; +} diff --git a/tsconfig.json b/tsconfig.json index 2b66fb29d..0d157db50 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,6 +2,7 @@ "compilerOptions": { "allowSyntheticDefaultImports": true, "jsx": "react", + "jsxFactory": "createElement", "module": "es2015", "moduleResolution": "node", "noFallthroughCasesInSwitch": true, diff --git a/yarn.lock b/yarn.lock index 74709a8b3..32b0222e4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -328,6 +328,13 @@ dependencies: "@babel/types" "^7.10.4" +"@babel/helper-annotate-as-pure@^7.12.10": + version "7.12.10" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.10.tgz#54ab9b000e60a93644ce17b3f37d313aaf1d115d" + integrity sha512-XplmVbC1n+KY6jL8/fgLVXXUauDIB+lD5+GsQEh6F6GBF1dq1qy4DP4yXWzDKcoqXB3X58t61e85Fitoww4JVQ== + dependencies: + "@babel/types" "^7.12.10" + "@babel/helper-builder-binary-assignment-operator-visitor@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.4.tgz#bb0b75f31bf98cbf9ff143c1ae578b87274ae1a3" @@ -507,6 +514,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2" integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw== +"@babel/helper-validator-identifier@^7.12.11": + version "7.12.11" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed" + integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw== + "@babel/helper-validator-option@^7.12.1": version "7.12.1" resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.1.tgz#175567380c3e77d60ff98a54bb015fe78f2178d9" @@ -1059,6 +1071,17 @@ "@babel/helper-plugin-utils" "^7.10.4" "@babel/plugin-syntax-jsx" "^7.12.1" +"@babel/plugin-transform-react-jsx@^7.12.10": + version "7.12.12" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.12.12.tgz#b0da51ffe5f34b9a900e9f1f5fb814f9e512d25e" + integrity sha512-JDWGuzGNWscYcq8oJVCtSE61a5+XAOos+V0HrxnDieUus4UMnBEosDnY1VJqU5iZ4pA04QY7l0+JvHL1hZEfsw== + dependencies: + "@babel/helper-annotate-as-pure" "^7.12.10" + "@babel/helper-module-imports" "^7.12.5" + "@babel/helper-plugin-utils" "^7.10.4" + "@babel/plugin-syntax-jsx" "^7.12.1" + "@babel/types" "^7.12.12" + "@babel/plugin-transform-react-pure-annotations@^7.12.1": version "7.12.1" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.12.1.tgz#05d46f0ab4d1339ac59adf20a1462c91b37a1a42" @@ -1319,6 +1342,17 @@ "@babel/plugin-transform-react-jsx-source" "^7.12.1" "@babel/plugin-transform-react-pure-annotations" "^7.12.1" +"@babel/preset-react@7.12.10": + version "7.12.10" + resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.12.10.tgz#4fed65f296cbb0f5fb09de6be8cddc85cc909be9" + integrity sha512-vtQNjaHRl4DUpp+t+g4wvTHsLQuye+n0H/wsXIZRn69oz/fvNC7gQ4IK73zGJBaxvHoxElDvnYCthMcT7uzFoQ== + dependencies: + "@babel/helper-plugin-utils" "^7.10.4" + "@babel/plugin-transform-react-display-name" "^7.12.1" + "@babel/plugin-transform-react-jsx" "^7.12.10" + "@babel/plugin-transform-react-jsx-development" "^7.12.7" + "@babel/plugin-transform-react-pure-annotations" "^7.12.1" + "@babel/preset-react@^7.12.5", "@babel/preset-react@^7.9.4": version "7.12.7" resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.12.7.tgz#36d61d83223b07b6ac4ec55cf016abb0f70be83b" @@ -1404,6 +1438,15 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" +"@babel/types@^7.12.10", "@babel/types@^7.12.12": + version "7.12.12" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.12.tgz#4608a6ec313abbd87afa55004d373ad04a96c299" + integrity sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ== + dependencies: + "@babel/helper-validator-identifier" "^7.12.11" + lodash "^4.17.19" + to-fast-properties "^2.0.0" + "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"