Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(experiences): implement custom element #6364

Merged
merged 5 commits into from
Sep 19, 2024

Conversation

aymeric-giraudet
Copy link
Member

@aymeric-giraudet aymeric-giraudet commented Sep 17, 2024

FX-3008

Summary

To allow usage within an SPA, be it completely client-side rendered or not (with Next.js for example), we need to provide a way for an experience to be loaded at any time.

Result

Created a custom element that fetches its own configuration and renders. Code looks a bit awkward since I reused functions meant for multiple configurations.
We should probably implement some caching later for configurations.

@aymeric-giraudet aymeric-giraudet requested review from Haroenv, a team and dhayab and removed request for a team September 17, 2024 14:04
Copy link

codesandbox-ci bot commented Sep 17, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit c88b163:

Sandbox Source
example-react-instantsearch-getting-started Configuration
example-react-instantsearch-next-app-dir-example Configuration
example-react-instantsearch-next-routing-example Configuration
example-vue-instantsearch-getting-started Configuration

Copy link
Contributor

@Haroenv Haroenv left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good to have both options, probably we'll want to converge on only custom elements later but this gives us options. Thanks!

examples/js/algolia-experiences/package.json Outdated Show resolved Hide resolved
packages/algolia-experiences/src/setup-instantsearch.ts Outdated Show resolved Hide resolved
Comment on lines +73 to +74
this.disconnectedCallback();
this.connectedCallback();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for later: the order should be fetch -> remove -> add, not remove -> fetch -> add, but I see how this current code is much simpler

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could be simple, I could wrap this into fetchConfiguration(newValue).then and it would pick up the cached configuration in connectedCallback

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also good for me :)

class AlgoliaExperience extends HTMLElement {
static observedAttributes = ['experience-id'];

widgets: IndexWidget[] = [];

connectedCallback() {
const experienceId = this.getAttribute('experience-id');
if (!experienceId) {
const id = this.getAttribute('experience-id');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would there be less repetition if we call the attribute data-id? can swap before the GA still

@Haroenv Haroenv requested review from shaejaz and removed request for dhayab September 18, 2024 13:14
@aymeric-giraudet aymeric-giraudet merged commit 7eeffe6 into master Sep 19, 2024
14 checks passed
@aymeric-giraudet aymeric-giraudet deleted the feat/experience-custom-element branch September 19, 2024 15:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants