feat(poweredBy): implement InstantSearch.css #3164

francoischalifour · 2018-10-02T22:12:09Z

Specs

https://instantsearch-css.netlify.com/widgets/powered-by/

Stories

https://deploy-preview-3164--algolia-instantsearch.netlify.com/v2/dev-novel/?selectedStory=PoweredBy.default

algobot · 2018-10-02T22:15:23Z

Deploy preview for algolia-instantsearch ready!

Built with commit eae27cf

https://deploy-preview-3164--algolia-instantsearch.netlify.com

samouss · 2018-10-03T12:25:00Z

dev/app/builtin/stories/powered-by.stories.js

+const stories = storiesOf('PoweredBy');
+
+window.connectPoweredBy = instantsearch.connectors.connectPoweredBy;
+window.poweredBy = instantsearch.widgets.poweredBy;


Why do we copy the reference on the global object?

Oops! Forgot to remove those.

samouss · 2018-10-03T12:26:14Z

src/components/PoweredBy/PoweredBy.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class PoweredBy extends Component {


We can use a functional component.

samouss · 2018-10-03T12:26:28Z

src/components/PoweredBy/PoweredBy.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';


The import should come from preact-compat.

samouss · 2018-10-03T12:35:43Z

src/widgets/powered-by/powered-by.js

+  if (isFirstRendering) {
+    const { url, theme } = widgetParams;
+
+    render(


It won't have a huge impact here but we don't render at the init step - only at the render.

How would you see it then?

At the init step you don't (see below). We only call prepareTemplateProps at the first render we early return right after. Otherwise we might have a flash of content with the empty state.

https://github.com/algolia/instantsearch.js/blob/92cf470442be7321b9102b8ae7585f302029ff0d/src/widgets/hits/hits.js#L16-L45

Since this widget doesn't depend on the state and isn't meant to be re-rendered, I though it would be appropriate to only render it at first rendering. Am I wrong?

src/widgets/powered-by/powered-by.js

samouss · 2018-10-03T12:36:44Z

src/widgets/powered-by/powered-by.js

+ */
+
+/**
+ * The `poweredBy` widget is used to display useful insights about the current results.


Not sure about the description ^^

samouss · 2018-10-03T12:44:15Z

src/widgets/powered-by/powered-by.js

+  }
+
+  const containerNode = getContainerNode(container);
+  const url =


The URL should be in the connector but it might be possible to override it. We can also make the utm_source configurable then Vue & Angular can also use the connector to create their PoweredBy component. See Vue - PoweredBy

samouss · 2018-10-04T14:34:40Z

src/connectors/powered-by/connectPoweredBy.js

+
    return {
-      init() {
+      init({ url = defaultUrl }) {


The URL should come from the widgetParams not the InstantSearch instance to allow other users to override it. Right now we don't have a way to override it from user code. For example in Vue we should be able to do something like:

export default { mixins: [createWidget({ connector: connectPoweredBy })], computed: { widgetParams() { return { // it would be nice to also support this: source: "vue-instantsearch", // but also URL: "https://www.algolia.com/?" + "utm_source=vue-instantsearch&" + "utm_medium=website&" + `utm_content=${location ? location.hostname : ""}&` + "utm_campaign=poweredby" }; } } };

Haroenv · 2018-10-09T08:05:21Z

src/connectors/powered-by/connectPoweredBy.js

+      'https://www.algolia.com/?' +
+        'utm_source=instantsearch.js&' +
+        'utm_medium=website&' +
+        `utm_content=${location.hostname}&` +


this needs a conditional on location I think. While usually not used for SSR, probably best to avoid the pattern

<a name=3.0.0-beta.0></a> # [3.0.0-beta.0](v2.10.3...v3.0.0-beta.0) (2018-12-10) ### Bug Fixes * **api:** remove transformData ([#3241](#3241)) ([5232936](5232936)) * **breadcrumb:** fix story with transformed label ([5a39312](5a39312)) * **breadcrumb:** rename item's name to label ([#3273](#3273)) ([0189cb4](0189cb4)) * **breadcrumb:** rename noRefinement to noRefinementRoot ([#3272](#3272)) ([21a5c61](21a5c61)) * **community:** fix search config ([#3142](#3142)) ([2b41982](2b41982)) * **connectRangeSlider:** remove deprecated connector ([#3189](#3189)) ([096ebeb](096ebeb)) * **current-refinements:** remove alphabetic sorting ([#3249](#3249)) ([9914f87](9914f87)), closes [/github.com/algolia/instantsearch.js/blob/011d47909894837f2c2da5088bc81803135d201b/src/lib/utils.js#L249](https://github.com//github.com/algolia/instantsearch.js/blob/011d47909894837f2c2da5088bc81803135d201b/src/lib/utils.js/issues/L249) * **getRefinements:** provide attributeName for type: query ([6006fe1](6006fe1)), closes [#3205](#3205) * **highlight:** avoid to ignore highlightedTagName ([#3323](#3323)) ([9871829](9871829)) * **highlight:** HighLight -> Highlight ([#3324](#3324)) ([5b4600d](5b4600d)) * **hits:** transform items after escaping ([#3251](#3251)) ([c46b82a](c46b82a)), closes [#3250](#3250) * **infiniteHits:** move option to templates ([#3300](#3300)) ([1828d66](1828d66)) * **InfiniteHits:** set the correct class for the last page ([#3232](#3232)) ([f604835](f604835)) * **lint:** remove unused import ([a9ec14c](a9ec14c)) * **pagination:** rename to ([#3275](#3275)) ([336945b](336945b)) * **range-input:** fix button classname ([#3234](#3234)) ([56695e1](56695e1)), closes [algolia/instantsearch-specs#92](algolia/instantsearch-specs#92) * **range-input:** remove templates ([#3128](#3128)) ([94a1ce5](94a1ce5)) * **rangeInput:** convert labels to templates ([#3312](#3312)) ([cdf91e8](cdf91e8)) * **rangeSlider:** fix CSS classes ([#3316](#3316)) ([56a5255](56a5255)) * **refinement-list:** remove in story ([0bf8db1](0bf8db1)) * **routing:** enforce RoutingManager is the last widget ([#3149](#3149)) ([1e86b2e](1e86b2e)), closes [#3148](#3148) * **searchbox:** fix and templates ([#3313](#3313)) ([4e13122](4e13122)) * **tests:** add react-test-renderer ([176494b](176494b)) * **toggleRefinement:** provide to templates ([#3303](#3303)) ([f515b62](f515b62)) ### Features * **3.0:** remove named exports on widgets ([#3129](#3129)) ([e718ea3](e718ea3)) * **breadcrumb:** implement InstantSearch.css ([#3115](#3115)) ([84d9f18](84d9f18)) * **clearRefinements:** implement InstantSearch.css ([#3308](#3308)) ([d98ecaf](d98ecaf)), closes [#3299](#3299) * **clearRefinements:** implement is.css ([#3114](#3114)) ([11cdc14](11cdc14)) * **current-refinements:** implement InstantSearch.css ([#3190](#3190)) ([a70917d](a70917d)) * **GeoSearch:** implement InstantSearch.css ([#3138](#3138)) ([1867d30](1867d30)) * **hierarchical-menu:** implement InstantSearch.css ([#3182](#3182)) ([be0890d](be0890d)) * **hierarchical-menu:** implement show more feature ([#3151](#3151)) ([f54fccd](f54fccd)) * **hierarchicalMenu:** merge showMore templates ([#3318](#3318)) ([0059251](0059251)) * **highlight:** export highlight function ([#3137](#3137)) ([d4b6fb1](d4b6fb1)) * **highlight:** implement InstantSearch.css ([#3132](#3132)) ([260a0b8](260a0b8)) * **hits:** implement InstantSearch.css ([#3096](#3096)) ([b3cc413](b3cc413)) * **hits-per-page:** implement InstantSearch.css ([#3125](#3125)) ([49e7096](49e7096)) * **menu:** implement InstantSearch.css ([#3181](#3181)) ([a274ab7](a274ab7)) * **menuSelect:** implement is.css ([#3109](#3109)) ([43e654a](43e654a)) * **numeric-menu:** implement InstantSearch.css ([#3162](#3162)) ([f5358f4](f5358f4)) * **numericSelector:** remove widget ([#3183](#3183)) ([e9063c0](e9063c0)) * **pagination:** implement InstantSearch.css ([#3119](#3119)) ([f3c3343](f3c3343)) * **panel:** add Panel widget ([#3253](#3253)) ([82e19fc](82e19fc)) * **poweredBy:** implement InstantSearch.css ([#3164](#3164)) ([bcc18a0](bcc18a0)) * **poweredBy:** update logo ([#3256](#3256)) ([838abec](838abec)) * **price-ranges:** implement InstantSearch.css ([#3124](#3124)) ([335339b](335339b)) * **range-input:** implement InstantSearch.css ([#3098](#3098)) ([ee6bc7e](ee6bc7e)) * **range-slider:** implement InstantSearch.css ([#3126](#3126)) ([b9b8d31](b9b8d31)) * **rating-menu:** implement InstantSearch.css ([#3161](#3161)) ([d039e11](d039e11)) * **ratingMenu:** merge labels and templates ([#3317](#3317)) ([505a2e7](505a2e7)) * **refinement-list:** implement InstantSearch.css ([#3152](#3152)) ([11c5580](11c5580)) * **refinement-list:** implement InstantSearch.css (2) ([#3179](#3179)) ([0365641](0365641)) * **refinement-list:** implement InstantSearch.css to searchbox ([#3263](#3263)) ([ad905c7](ad905c7)) * **search-client:** use search client ([#3133](#3133)) ([8e70a3e](8e70a3e)) * **searchbox:** implement InstantSearch.css ([#3127](#3127)) ([c68c1fe](c68c1fe)) * **snippet:** implement InstantSearch.css ([#3134](#3134)) ([fa56657](fa56657)) * **sort-by:** implement InstantSearch.css ([#3120](#3120)) ([5f21723](5f21723)) * **sortBy:** rename item to ([#3230](#3230)) ([9e24a68](9e24a68)) * **stats:** implement InstantSearch.css ([#3097](#3097)) ([63a688e](63a688e)) * **stories:** add default CurrentRefinements story ([#3252](#3252)) ([45a8fd5](45a8fd5)) * **suit:** Default component names to empty object ([0b26356](0b26356)) * **suit-helper:** provide a helper to create suit css classnames ([f142496](f142496)) * **toggleRefinement:** implement InstantSearch.css ([#3135](#3135)) ([d67a437](d67a437)) * compress templates ([#3176](#3176)) ([54f2f77](54f2f77)), closes [#3095](#3095) * **widgets:** use warn utils ([#3175](#3175)) ([3164b06](3164b06))

<a name=3.0.0-beta.1></a> # [3.0.0-beta.1](v2.10.3...v3.0.0-beta.1) (2018-12-14) ### Bug Fixes * **api:** remove transformData ([#3241](#3241)) ([5232936](5232936)) * **breadcrumb:** fix story with transformed label ([5a39312](5a39312)) * **breadcrumb:** rename item's name to label ([#3273](#3273)) ([0189cb4](0189cb4)) * **breadcrumb:** rename noRefinement to noRefinementRoot ([#3272](#3272)) ([21a5c61](21a5c61)) * **community:** fix search config ([#3142](#3142)) ([2b41982](2b41982)) * **configure:** make lifecycle functions optional ([#3339](#3339)) ([2b88cfa](2b88cfa)) * **connectRangeSlider:** remove deprecated connector ([#3189](#3189)) ([096ebeb](096ebeb)) * **current-refinements:** remove alphabetic sorting ([#3249](#3249)) ([9914f87](9914f87)), closes [/github.com/algolia/instantsearch.js/blob/011d47909894837f2c2da5088bc81803135d201b/src/lib/utils.js#L249](https://github.com//github.com/algolia/instantsearch.js/blob/011d47909894837f2c2da5088bc81803135d201b/src/lib/utils.js/issues/L249) * **getRefinements:** provide attributeName for type: query ([6006fe1](6006fe1)), closes [#3205](#3205) * **highlight:** avoid to ignore highlightedTagName ([#3323](#3323)) ([9871829](9871829)) * **highlight:** HighLight -> Highlight ([#3324](#3324)) ([5b4600d](5b4600d)) * **hits:** transform items after escaping ([#3251](#3251)) ([c46b82a](c46b82a)), closes [#3250](#3250) * **infiniteHits:** move option to templates ([#3300](#3300)) ([1828d66](1828d66)) * **InfiniteHits:** set the correct class for the last page ([#3232](#3232)) ([f604835](f604835)) * **lint:** remove unused import ([a9ec14c](a9ec14c)) * **pagination:** rename to ([#3275](#3275)) ([336945b](336945b)) * **poweredBy:** export connectPoweredBy connector ([#3331](#3331)) ([7d48c46](7d48c46)) * **poweredBy:** fix CSS classes ([#3332](#3332)) ([abc9b82](abc9b82)) * **range-input:** fix button classname ([#3234](#3234)) ([56695e1](56695e1)), closes [algolia/instantsearch-specs#92](algolia/instantsearch-specs#92) * **range-input:** remove templates ([#3128](#3128)) ([94a1ce5](94a1ce5)) * **rangeInput:** convert labels to templates ([#3312](#3312)) ([cdf91e8](cdf91e8)) * **rangeSlider:** fix CSS classes ([#3316](#3316)) ([56a5255](56a5255)) * **refinement-list:** remove in story ([0bf8db1](0bf8db1)) * **routing:** enforce RoutingManager is the last widget ([#3149](#3149)) ([1e86b2e](1e86b2e)), closes [#3148](#3148) * **searchbox:** fix and templates ([#3313](#3313)) ([4e13122](4e13122)) * **tests:** add react-test-renderer ([176494b](176494b)) * **toggleRefinement:** provide to templates ([#3303](#3303)) ([f515b62](f515b62)) ### Features * **3.0:** remove named exports on widgets ([#3129](#3129)) ([e718ea3](e718ea3)) * **breadcrumb:** implement InstantSearch.css ([#3115](#3115)) ([84d9f18](84d9f18)) * **bundle:** update bundle strategy ([#3260](#3260)) ([a7dab81](a7dab81)) * **clearRefinements:** implement InstantSearch.css ([#3308](#3308)) ([d98ecaf](d98ecaf)), closes [#3299](#3299) * **clearRefinements:** implement is.css ([#3114](#3114)) ([11cdc14](11cdc14)) * **current-refinements:** implement InstantSearch.css ([#3190](#3190)) ([a70917d](a70917d)) * **GeoSearch:** implement InstantSearch.css ([#3138](#3138)) ([1867d30](1867d30)) * **hierarchical-menu:** implement InstantSearch.css ([#3182](#3182)) ([be0890d](be0890d)) * **hierarchical-menu:** implement show more feature ([#3151](#3151)) ([f54fccd](f54fccd)) * **hierarchicalMenu:** merge showMore templates ([#3318](#3318)) ([0059251](0059251)) * **highlight:** export highlight function ([#3137](#3137)) ([d4b6fb1](d4b6fb1)) * **highlight:** implement InstantSearch.css ([#3132](#3132)) ([260a0b8](260a0b8)) * **hits:** implement InstantSearch.css ([#3096](#3096)) ([b3cc413](b3cc413)) * **hits-per-page:** implement InstantSearch.css ([#3125](#3125)) ([49e7096](49e7096)) * **infiniteHits:** rename showMore template to showMoreText ([#3330](#3330)) ([babad39](babad39)) * **menu:** implement InstantSearch.css ([#3181](#3181)) ([a274ab7](a274ab7)) * **menu:** merge showMore templates ([#3328](#3328)) ([73a450b](73a450b)) * **menuSelect:** implement is.css ([#3109](#3109)) ([43e654a](43e654a)) * **numeric-menu:** implement InstantSearch.css ([#3162](#3162)) ([f5358f4](f5358f4)) * **numericSelector:** remove widget ([#3183](#3183)) ([e9063c0](e9063c0)) * **pagination:** implement InstantSearch.css ([#3119](#3119)) ([f3c3343](f3c3343)) * **pagination:** rename labels to templates ([#3333](#3333)) ([9f24098](9f24098)) * **panel:** add Panel widget ([#3253](#3253)) ([82e19fc](82e19fc)) * **poweredBy:** disable setting URL from widget ([#3334](#3334)) ([a5ff6af](a5ff6af)) * **poweredBy:** implement InstantSearch.css ([#3164](#3164)) ([bcc18a0](bcc18a0)) * **poweredBy:** update logo ([#3256](#3256)) ([838abec](838abec)) * **price-ranges:** implement InstantSearch.css ([#3124](#3124)) ([335339b](335339b)) * **range-input:** implement InstantSearch.css ([#3098](#3098)) ([ee6bc7e](ee6bc7e)) * **range-slider:** implement InstantSearch.css ([#3126](#3126)) ([b9b8d31](b9b8d31)) * **rating-menu:** implement InstantSearch.css ([#3161](#3161)) ([d039e11](d039e11)) * **ratingMenu:** merge labels and templates ([#3317](#3317)) ([505a2e7](505a2e7)) * **refinement-list:** implement InstantSearch.css ([#3152](#3152)) ([11c5580](11c5580)) * **refinement-list:** implement InstantSearch.css (2) ([#3179](#3179)) ([0365641](0365641)) * **refinement-list:** implement InstantSearch.css to searchbox ([#3263](#3263)) ([ad905c7](ad905c7)) * **refinementList:** merge showMore templates ([#3329](#3329)) ([9b6a9c4](9b6a9c4)) * **search-client:** use search client ([#3133](#3133)) ([8e70a3e](8e70a3e)) * **searchbox:** implement InstantSearch.css ([#3127](#3127)) ([c68c1fe](c68c1fe)) * **snippet:** implement InstantSearch.css ([#3134](#3134)) ([fa56657](fa56657)) * **sort-by:** implement InstantSearch.css ([#3120](#3120)) ([5f21723](5f21723)) * **sortBy:** rename item to ([#3230](#3230)) ([9e24a68](9e24a68)) * **stats:** implement InstantSearch.css ([#3097](#3097)) ([63a688e](63a688e)) * **stories:** add default CurrentRefinements story ([#3252](#3252)) ([45a8fd5](45a8fd5)) * **suit:** Default component names to empty object ([0b26356](0b26356)) * **suit-helper:** provide a helper to create suit css classnames ([f142496](f142496)) * **toggleRefinement:** implement InstantSearch.css ([#3135](#3135)) ([d67a437](d67a437)) * **widgets:** use warn utils ([#3175](#3175)) ([3164b06](3164b06)) * compress templates ([#3176](#3176)) ([54f2f77](54f2f77)), closes [#3095](#3095)

feat(poweredBy): add widget

fc8a7cf

francoischalifour requested a review from a team October 2, 2018 22:12

francoischalifour mentioned this pull request Oct 2, 2018

feat: InstantSearch.js v3 #2954

Closed

samouss requested changes Oct 3, 2018

View reviewed changes

francoischalifour added 2 commits October 3, 2018 11:10

feat(poweredBy): apply changes

91bc5a2

feat(poweredBy): add URL to the connector

d94cd5b

samouss requested changes Oct 4, 2018

View reviewed changes

feat(poweredBy): allow URL override

54c395f

Haroenv reviewed Oct 9, 2018

View reviewed changes

francoischalifour added 2 commits October 9, 2018 08:50

feat(poweredBy): check location before using

3982ac8

fix(poweredBy): add extensive check for window.location

eae27cf

Haroenv approved these changes Oct 10, 2018

View reviewed changes

francoischalifour merged commit bcc18a0 into feat/3.0 Oct 10, 2018

francoischalifour deleted the feat/3.0-powered-by branch October 10, 2018 16:33

feat(poweredBy): implement InstantSearch.css #3164

feat(poweredBy): implement InstantSearch.css #3164

Uh oh!

Conversation

francoischalifour commented Oct 2, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Specs

Stories

Uh oh!

algobot commented Oct 2, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

francoischalifour commented Oct 2, 2018 •

edited

Loading

algobot commented Oct 2, 2018 •

edited

Loading