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

WIP: Implement client side rendering #483

wants to merge 241 commits into
base: develop
Choose a base branch


Copy link

@johnbillion johnbillion commented Nov 7, 2019

This starts us down the path of switching over Query Monitor's output to client-side rendered React components.

This has numerous benefits including:

  • Better performance (no need to render a big pile of HTML)
  • Allowing for state to be swapped out in order to show data for requests other than the current page load (eg. Ajax, REST API, POSTs before a redirect, and historical requests)
  • Panels which can be reused outside of the context of WordPress, eg in loggers or browser extensions
  • Data accessible elsewhere in the client, eg in the developer tools panel

There's still lots to do, but the concept has been proven.

See #291.


  • Proof of concept
  • Functional
  • Quality
  • Functionally complete
  • Shiny and ready to go


  • Feature parity with all existing panels.
  • JSON data payload to hydrate the client-side panels. Remove unnecessary properties as we go.
  • Retain support for server-side rendered panels so add-ons for QM and Debug Bar continue to work.
  • Partial client-side rendering. The main panel container and its menu tabs will remain server-side rendered for the time being. Individual panel contents will be converted to client-side rendering.
  • Retain and continuously improve the existing server-side panel rendering until all client-side panels are complete.
  • Publish the UI components as an NPM package
  • Remove dependency on jQuery


  • Bundling for WP backwards compatibility. wp.i18n isn't bundled with WP prior to 5.0.
  • Bundling in general. Should React be bundled or should core's be used?
  • Using data across components, eg most stuff in the Overview panel
    • Slot & Fill?


npm install --legacy-peer-deps && npm run watch

Per-panel Tasks

The existing collectors and outputters in QM are very well separated, but nevertheless as each panel is worked on the following actions may need to be made:

  • Move logic out of the HTML outputter and into the corresponding collector.
  • Move translatable strings out of the collector and into the corresponding HTML outputter and React component.

Panel Progress

  • overview
    • Use a slot that other components can fill with their data
  • admin
  • assets_scripts
  • assets_styles
  • block_editor
  • cache
  • caps
  • conditionals
  • db_callers
  • db_components
  • db_dupes
  • db_queries
  • environment
  • headers
  • hooks
  • http
  • languages
  • logger
  • php_errors
  • raw_request
  • request
  • theme
  • timing
  • transients
  • Hooks in Use panels
  • Settings panel

UI Component Progress

  • Toggles
  • Filter dropdowns
  • Filter links
  • Table sorters
  • Clickable stack traces
  • Table footers


The following panels will remain server-side rendered:

  • debug_bar
johnbillion added 9 commits Dec 27, 2021
# Conflicts:
#	.github/workflows/test.yml
#	assets/query-monitor.js
#	classes/Backtrace.php
#	classes/Plugin.php
#	classes/QueryMonitor.php
#	collectors/db_queries.php
#	collectors/http.php
#	collectors/logger.php
#	collectors/php_errors.php
#	collectors/request.php
#	collectors/timing.php
#	composer.json
#	dispatchers/Html.php
#	output/Html.php
#	output/html/assets.php
#	output/html/assets_scripts.php
#	output/html/assets_styles.php
#	output/html/conditionals.php
#	output/html/db_queries.php
#	output/html/logger.php
#	output/html/overview.php
#	output/html/php_errors.php
#	package.json
#	phpcs.xml.dist
#	readme.txt
# Conflicts:
#	.gitignore
#	classes/Plugin.php
#	composer.json
#	output/html/db_queries.php
#	package.json
#	readme.txt
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants