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

use query-string to drive page.js #63

Merged
merged 2 commits into from
Jul 11, 2023
Merged

Conversation

dlockhart
Copy link
Member

I wasn't quite using the combination of Lit + Page.js + the query-string correctly. This fixes things up.

Essentially:

  • The query-string is the source of truth for application state
  • When we want to change the state (e.g. apply a filter), we modify the query-string and tell page.js to redirect to that new place
  • Page.js the re-runs our init code which parses the query-string and sets the Lit properties from there
  • That then triggers a recalculation of _tests which is the actual Lit reactive property that renders the application

The end result is that all the filters are on the URL which means you can send people links and the app will "boot up" in the correct state. You can also open the links to individual tests in new tabs and that'll just work as well.

@dlockhart dlockhart requested a review from a team as a code owner July 10, 2023 20:17
@@ -80,7 +80,6 @@ class App extends LitElement {
this._fullMode = FULL_MODE.GOLDEN.value;
this._layout = LAYOUTS.SPLIT.value;
this._overlay = true;
this._updateFiles();
Copy link
Member Author

Choose a reason for hiding this comment

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

This isn't needed since Page.js's init code will call this.

}
_handleSettingChange(e) {
this[`_${e.detail.name}`] = e.detail.value;
}
_handleTestClick(e) {
this._updateSearchParams({ file: e.target.dataset.file, test: e.target.dataset.test });
return false;
Copy link
Member Author

Choose a reason for hiding this comment

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

Returning false from a click handler cases the href to not navigate. The href is still useful for opening links in new tabs.

}
});
if (tests.length > 0) {
files.push({ ...f, tests });
}
});

if (this._filterTest !== undefined && !foundFilterTest) {
Copy link
Member Author

Choose a reason for hiding this comment

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

This handles the case where you're viewing a particular test but then apply a filter that will cause that test to be excluded. We zoom back out to app home.

Copy link
Contributor

@bearfriend bearfriend left a comment

Choose a reason for hiding this comment

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

Getting dangerously close to wanting to implement the proper router, but that can be a later upgrade if we want to go any further.

} else {
return this._filterBrowsers.includes(b);
}
});
Copy link
Member Author

Choose a reason for hiding this comment

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

Minor tweak here to use the original browser list to rebuild the filter so that browsers are always rendered in the same order.

@dlockhart dlockhart merged commit 2c2b160 into main Jul 11, 2023
1 check passed
@dlockhart dlockhart deleted the dlockhart/fix-querystring branch July 11, 2023 13:16
@ghost
Copy link

ghost commented Jul 17, 2023

🎉 This PR is included in version 0.15.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@ghost ghost added the released label Jul 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants