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.

Sign up for GitHub

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

Jump to bottom

Proposal for Web Based version of Search UI #117

Closed
JasonStoltz opened this issue Mar 5, 2019 · 2 comments
Closed

Proposal for Web Based version of Search UI #117

JasonStoltz opened this issue Mar 5, 2019 · 2 comments
Labels
discuss wontfix This will not be worked on

Comments

@JasonStoltz
Copy link
Member

JasonStoltz commented Mar 5, 2019 •
edited
Loading

The React version of Search UI requires the following:

  1. You need be using React in your project.
  2. You need all of the tooling to build a react project, which can be quite hefty.

A Web Based version of Search UI would effectively be a wrapper around the React version, that you could include directly via a script tag.

  1. You could use this in any project. React dependency would be bundled into search-ui.js bundle.
  2. No extra tooling required.

So for example, on a web page, if you simply wanted to use a search-ui autocomplete search box, you could do so easily, with minimal configuration:

<script src="http://path/to/search-ui.js" />
<script src="http://path/to/search-ui.css" />

<script>
SearchUI.config({
  // some config here
});

SearchUI.searchBox('#search-box', {
  autocompleteResults: true
});
</script>

<body>
  <input type="text" id="search-box"/>
</body>

From an implementation standpoint, I believe we'd be wrapping our components somewhat like this:

// Assume a single driver was created when we initialized Search UI

// Grab relevant data and actions from the driver state and render the component
const searchTerm = driver.state.searchTerm;
const setSearchTerm = driver.actions.setSearchTerm;
const element = document.getElementById("#search-box"));
ReactDOM.render(<SearchBox searchTerm={searchTerm} setSearchTerm={setSearchTerm} />, element);

// Any time a user interacts with a component it will trigger an action, which triggers a state update in the driver, which we'll handle by re-rendering with the updated state.
driver.subscribeToStateChanges(state => {
  ReactDOM.render(<SearchBox searchTerm={state.searchTerm} setSearchTerm={setSearchTerm} />, element);
})
@byronhulcher
Copy link
Contributor

byronhulcher commented Mar 6, 2019 •
edited
Loading

I have no idea of the viability of this, but it could be worthwhile looking into https://preactjs.com/, which has a smaller size than React, for bundling w/ search-ui. Upside could be some KB saved, downside could be preact-specific bugs that would surface in this bundled version. Their goal is 1:1 parity with React using he same API (they just added hooks! preactjs/preact#1247 (comment))

Edit: Found some prior art, Uppy decided to use Preact over React for their distributed file uploader components! https://uppy.io/blog/2017/12/0.22/

@botelastic
Copy link

botelastic bot commented Feb 13, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
Is this issue still important to you? If so, please leave a comment and let us know. As always, thank you for your contributions.

@botelastic botelastic bot added the wontfix This will not be worked on label Feb 13, 2020
@botelastic botelastic bot closed this as completed Feb 20, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
discuss wontfix This will not be worked on
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@JasonStoltz @byronhulcher