CINXE.COM
How to use profiling in production mode for react-dom · GitHub
<!DOCTYPE html> <html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" data-a11y-animated-images="system" data-a11y-link-underlines="true" > <head> <meta charset="utf-8"> <link rel="dns-prefetch" href="https://github.githubassets.com"> <link rel="dns-prefetch" href="https://avatars.githubusercontent.com"> <link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com"> <link rel="dns-prefetch" href="https://user-images.githubusercontent.com/"> <link rel="preconnect" href="https://github.githubassets.com" crossorigin> <link rel="preconnect" href="https://avatars.githubusercontent.com"> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/light-605318cbe3a1.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-bd1cb5575fff.css" /><link data-color-theme="dark_dimmed" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed-52a2075571c3.css" /><link data-color-theme="dark_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_high_contrast-bf3988586de0.css" /><link data-color-theme="dark_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind-27a437876a92.css" /><link data-color-theme="light_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind-97f0dc959f8f.css" /><link data-color-theme="light_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_high_contrast-708e3a93215a.css" /><link data-color-theme="light_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia-9217138a8d5b.css" /><link data-color-theme="dark_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia-4397d91bdb49.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-225433424a87.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-aaa714e5674d.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-7d4d2344e7ab.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/github-43ae85d4871b.css" /> <script type="application/json" id="client-env">{"locale":"en","featureFlags":["a11y_quote_reply_fix","contentful_lp_hero_video_cover_image","contentful_lp_optimize_image","copilot_immersive_issue_preview","copilot_new_references_ui","copilot_chat_ambient_error_banner","copilot_chat_repo_custom_instructions_preview","copilot_chat_immersive_subthreading","copilot_no_floating_button","copilot_topics_as_references","copilot_read_shared_conversation","copilot_duplicate_thread","copilot_buffered_streaming","dotcom_chat_client_side_skills","experimentation_azure_variant_endpoint","failbot_handle_non_errors","fgpat_form_ui_updates","geojson_azure_maps","ghost_pilot_confidence_truncation_25","ghost_pilot_confidence_truncation_40","github_models_o3_mini_streaming","hovercard_accessibility","insert_before_patch","issues_react_remove_placeholders","issues_react_blur_item_picker_on_close","marketing_pages_search_explore_provider","primer_react_css_modules_ga","react_data_router_pull_requests","remove_child_patch","sample_network_conn_type","swp_enterprise_contact_form","site_proxima_australia_update","viewscreen_sandbox","issues_react_create_milestone","issues_react_cache_fix_workaround","lifecycle_label_name_updates","copilot_task_oriented_assistive_prompts","issues_react_assignee_warning","issue_types_prevent_private_type_creation","ui_commands_metrics"]}</script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/wp-runtime-f7cac6d04f3a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover_js-9da652f58479.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_arianotify-polyfill_ariaNotify-polyfill_js-node_modules_github_mi-3abb8f-46b9f4874d95.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_failbot_failbot_ts-857611aed7fe.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/environment-f04cb2a9fc8c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_primer_behaviors_dist_esm_index_mjs-0dbb79f97f8f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_selector-observer_dist_index_esm_js-f690fd9ae3d5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_relative-time-element_dist_index_js-62d275b7ddd9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_text-expander-element_dist_index_js-78748950cb0c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_auto-complete-element_dist_index_js-node_modules_github_catalyst_-8e9f78-a90ac05d2469.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_filter-input-element_dist_index_js-node_modules_github_remote-inp-b5f1d7-a1760ffda83d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_markdown-toolbar-element_dist_index_js-ceef33f593fa.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_file-attachment-element_dist_index_js-node_modules_primer_view-co-c44a69-8c52cf4cd0d3.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/github-elements-394f8eb34f19.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/element-registry-0bebfa1427c4.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_braintree_browser-detection_dist_browser-detection_js-node_modules_githu-bb80ec-72267f4e3ff9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lit-html_lit-html_js-be8cb88f481b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_morphdom_dist_morphdom-e-7c534c-a4a1922eb55f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_turbo_dist_turbo_es2017-esm_js-a03ee12d659a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-893f9f-b6294cf703b7.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_color-convert_index_js-e3180fe3bcb3.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_quote-selection_dist_index_js-node_modules_github_session-resume_-69cfcc-b9c76c3f220a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_updatable-content_updatable-content_ts-2a55124d5c52.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_task-list_ts-app_assets_modules_github_sso_ts-ui_packages-900dde-768abe60b1f8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_sticky-scroll-into-view_ts-3e000c5d31a9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_ajax-error_ts-app_assets_modules_github_behaviors_include-87a4ae-c8be3927cda8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_commenting_edit_ts-app_assets_modules_github_behaviors_ht-83c235-e429cff6ceb1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/behaviors-5bd6b8d4247b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_delegated-events_dist_index_js-node_modules_github_catalyst_lib_index_js-f6223d90c7ba.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-global-01e85cd1be94.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_github_remote-form_dist_-364c09-4bdc7a460fab.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_diffs_blob-lines_ts-app_assets_modules_github_diffs_linkable-line-n-b8c0ea-90d580abff98.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/gist-8fac1096aa53.js"></script> <title>How to use profiling in production mode for react-dom · GitHub</title> <meta name="route-pattern" content="/:user_id/:gist_id(.:format)" data-turbo-transient> <meta name="route-controller" content="gists_gists" data-turbo-transient> <meta name="route-action" content="show" data-turbo-transient> <meta name="current-catalog-service-hash" content="56253a530ab9027b25719525dcbe6007461a3202218f6f5dfce5a601c121cbcb"> <meta name="request-id" content="81A4:20F8FF:38477C:3F36BD:67DC5E72" data-pjax-transient="true"/><meta name="html-safe-nonce" content="eee5101656f9f41d652e06d1cb49095a8056e0ce5380760e2c953d3ad5eff7b2" data-pjax-transient="true"/><meta name="visitor-payload" content="eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI4MUE0OjIwRjhGRjozODQ3N0M6M0YzNkJEOjY3REM1RTcyIiwidmlzaXRvcl9pZCI6IjE0MjMyNjM3NDMxNDUxNzI1OTQiLCJyZWdpb25fZWRnZSI6InNvdXRoZWFzdGFzaWEiLCJyZWdpb25fcmVuZGVyIjoic291dGhlYXN0YXNpYSJ9" data-pjax-transient="true"/><meta name="visitor-hmac" content="43fa053be90fd5398ff2e34216e663caa0c5d5b451064867e525f15b2f34d379" data-pjax-transient="true"/> <meta name="github-keyboard-shortcuts" content="copilot" data-turbo-transient="true" /> <meta name="selected-link" value="gist_code" data-turbo-transient> <link rel="assets" href="https://github.githubassets.com/"> <meta name="google-site-verification" content="Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I"> <meta name="octolytics-url" content="https://collector.github.com/github/collect" /> <meta name="analytics-location" content="/<user-name>/<gist-id>" data-turbo-transient="true" /> <meta name="user-login" content=""> <meta name="viewport" content="width=device-width"> <meta name="description" content="How to use profiling in production mode for react-dom - index.md"> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch-gist.xml" title="Gist"> <link rel="fluid-icon" href="https://gist.github.com/fluidicon.png" title="GitHub"> <meta property="fb:app_id" content="1401488693436528"> <meta name="apple-itunes-app" content="app-id=1477376905, app-argument=https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977" /> <meta name="twitter:image" content="https://github.githubassets.com/assets/gist-og-image-54fd7dc0713e.png" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="How to use profiling in production mode for react-dom " /><meta name="twitter:description" content="How to use profiling in production mode for react-dom - index.md" /> <meta property="og:image" content="https://github.githubassets.com/assets/gist-og-image-54fd7dc0713e.png" /><meta property="og:image:alt" content="How to use profiling in production mode for react-dom - index.md" /><meta property="og:site_name" content="Gist" /><meta property="og:type" content="article" /><meta property="og:title" content="How to use profiling in production mode for react-dom " /><meta property="og:url" content="https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977" /><meta property="og:description" content="How to use profiling in production mode for react-dom - index.md" /><meta property="article:author" content="262588213843476" /><meta property="article:publisher" content="262588213843476" /> <meta name="hostname" content="gist.github.com"> <meta name="expected-hostname" content="gist.github.com"> <meta http-equiv="x-pjax-version" content="fc18a673a87e723ddf5af96c72cd7892f617ea89d3b7a7da83653aa64f4de71f" data-turbo-track="reload"> <meta http-equiv="x-pjax-csp-version" content="77190eb53eb47fc30bd2fcc17a7eefa2dfd8505869fee9299ba911be3a40a9eb" data-turbo-track="reload"> <meta http-equiv="x-pjax-css-version" content="3c046d4b918199cbb4d255cca63226853d0617dbae6529663229394aa9b0742a" data-turbo-track="reload"> <meta http-equiv="x-pjax-js-version" content="d665dc4b716ec7ce272e83aee50ef1915937c6c7abb82ed195e5a208374e5aa3" data-turbo-track="reload"> <meta name="turbo-cache-control" content="no-preview" data-turbo-transient=""> <link href="/bvaughn.atom" rel="alternate" title="atom" type="application/atom+xml"> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/gist-f06c9416fa76.css" /> <meta name="turbo-body-classes" content="logged-out env-production page-responsive"> <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats"> <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors"> <link rel="mask-icon" href="https://github.githubassets.com/assets/pinned-octocat-093da3e6fa40.svg" color="#000000"> <link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://github.githubassets.com/favicons/favicon.png"> <link rel="icon" class="js-site-favicon" type="image/svg+xml" href="https://github.githubassets.com/favicons/favicon.svg" data-base-href="https://github.githubassets.com/favicons/favicon"> <meta name="theme-color" content="#1e2327"> <meta name="color-scheme" content="light dark" /> </head> <body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div data-turbo-body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div class="position-relative header-wrapper js-header-wrapper "> <a href="#start-of-content" data-skip-target-assigned="false" class="px-2 py-4 color-bg-accent-emphasis color-fg-on-emphasis show-on-focus js-skip-to-content">Skip to content</a> <span data-view-component="true" class="progress-pjax-loader Progress position-fixed width-full"> <span style="width: 0%;" data-view-component="true" class="Progress-item progress-pjax-loader-bar left-0 top-0 color-bg-accent-emphasis"></span> </span> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-e05a7c4c5398.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-8d75451d837a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-f1bca44e0926.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-611691cca2f6.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_emotion_is-prop-valid_dist_emotion-is-prop-valid_esm_js-node_modules_emo-62da9f-2df2f32ec596.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-e7dcdd-9a233856b02c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover-fn_js-55fea94174bf.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ui-commands_ui-commands_ts-46ae788e9cbd.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/keyboard-shortcuts-dialog-33dfb803e078.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.50398dad705ce9fff192.module.css" /> <react-partial partial-name="keyboard-shortcuts-dialog" data-ssr="false" data-attempted-ssr="false" > <script type="application/json" data-target="react-partial.embeddedData">{"props":{"docsUrl":"https://docs.github.com/get-started/accessibility/keyboard-shortcuts"}}</script> <div data-target="react-partial.reactRoot"></div> </react-partial> <div class="Header js-details-container Details flex-wrap flex-md-nowrap p-responsive" role="banner" > <div class="Header-item d-none d-md-flex"> <a class="Header-link" data-hotkey="g d" aria-label="Gist Homepage " href="/"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github v-align-middle d-inline-block d-md-none"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> <svg aria-hidden="true" height="24" viewBox="0 0 68 24" version="1.1" width="68" data-view-component="true" class="octicon octicon-logo-github v-align-middle d-none d-md-inline-block"> <path d="M27.8 17.908h-.03c.013 0 .022.014.035.017l.01-.002-.016-.015Zm.005.017c-.14.001-.49.073-.861.073-1.17 0-1.575-.536-1.575-1.234v-4.652h2.385c.135 0 .24-.12.24-.283V9.302c0-.133-.12-.252-.24-.252H25.37V5.913c0-.119-.075-.193-.21-.193h-3.24c-.136 0-.21.074-.21.193V9.14s-1.636.401-1.741.416a.255.255 0 0 0-.195.253v2.021c0 .164.12.282.255.282h1.665v4.876c0 3.627 2.55 3.998 4.29 3.998.796 0 1.756-.252 1.906-.327.09-.03.135-.134.135-.238v-2.23a.264.264 0 0 0-.219-.265Zm35.549-3.272c0-2.69-1.095-3.047-2.25-2.928-.9.06-1.62.505-1.62.505v5.232s.735.506 1.83.536c1.545.044 2.04-.506 2.04-3.345ZM67 14.415c0 5.099-1.665 6.555-4.576 6.555-2.46 0-3.78-1.233-3.78-1.233s-.06.683-.135.773c-.045.089-.12.118-.21.118h-2.22c-.15 0-.286-.119-.286-.252l.03-16.514a.26.26 0 0 1 .255-.252h3.196a.26.26 0 0 1 .255.252v5.604s1.23-.788 3.03-.788l-.015-.03c1.8 0 4.456.67 4.456 5.767ZM53.918 9.05h-3.15c-.165 0-.255.119-.255.282v8.086s-.826.58-1.95.58c-1.126 0-1.456-.506-1.456-1.62v-7.06a.262.262 0 0 0-.255-.254h-3.21a.262.262 0 0 0-.256.253v7.596c0 3.27 1.846 4.087 4.381 4.087 2.085 0 3.78-1.145 3.78-1.145s.076.58.12.67c.03.074.136.133.24.133h2.011a.243.243 0 0 0 .255-.253l.03-11.103c0-.133-.12-.252-.285-.252Zm-35.556-.015h-3.195c-.135 0-.255.134-.255.297v10.91c0 .297.195.401.45.401h2.88c.3 0 .375-.134.375-.401V9.287a.262.262 0 0 0-.255-.252ZM16.787 4.01c-1.155 0-2.07.907-2.07 2.051 0 1.145.915 2.051 2.07 2.051a2.04 2.04 0 0 0 2.04-2.05 2.04 2.04 0 0 0-2.04-2.052Zm24.74-.372H38.36a.262.262 0 0 0-.255.253v6.08H33.14v-6.08a.262.262 0 0 0-.255-.253h-3.196a.262.262 0 0 0-.255.253v16.514c0 .133.135.252.255.252h3.196a.262.262 0 0 0 .255-.253v-7.06h4.966l-.03 7.06c0 .134.12.253.255.253h3.195a.262.262 0 0 0 .255-.253V3.892a.262.262 0 0 0-.255-.253Zm-28.31 7.313v8.532c0 .06-.015.163-.09.193 0 0-1.875 1.323-4.966 1.323C4.426 21 0 19.84 0 12.2S3.87 2.986 7.651 3c3.27 0 4.59.728 4.8.862.06.075.09.134.09.208l-.63 2.646c0 .134-.134.297-.3.253-.54-.164-1.35-.49-3.255-.49-2.205 0-4.575.623-4.575 5.543s2.25 5.5 3.87 5.5c1.38 0 1.875-.164 1.875-.164V13.94H7.321c-.165 0-.285-.12-.285-.253v-2.735c0-.134.12-.252.285-.252h5.61c.166 0 .286.118.286.252Z"></path> </svg> <svg aria-hidden="true" height="24" viewBox="0 0 38 24" version="1.1" width="38" data-view-component="true" class="octicon octicon-logo-gist v-align-middle d-none d-md-inline-block"> <path d="M7.05 13.095v-1.5h5.28v8.535c-1.17.555-2.925.96-5.385.96C1.665 21.09 0 17.055 0 12.045S1.695 3 6.945 3c2.43 0 3.96.495 4.92.99v1.575c-1.83-.75-3-1.095-4.92-1.095-3.855 0-5.22 3.315-5.22 7.59s1.365 7.575 5.205 7.575c1.335 0 2.97-.105 3.795-.51v-6.03H7.05Zm16.47 1.035h.045c3.33.3 4.125 1.425 4.125 3.345 0 1.815-1.14 3.615-4.71 3.615-1.125 0-2.745-.285-3.495-.585v-1.41c.705.255 1.83.54 3.495.54 2.43 0 3.09-1.035 3.09-2.13 0-1.065-.33-1.815-2.655-2.01-3.39-.3-4.095-1.5-4.095-3.12 0-1.665 1.08-3.465 4.38-3.465 1.095 0 2.34.135 3.375.585v1.41c-.915-.3-1.83-.54-3.405-.54-2.325 0-2.82.855-2.82 2.01 0 1.035.42 1.56 2.67 1.755Zm12.87-4.995v1.275h-3.63v7.305c0 1.425.795 2.01 2.25 2.01.3 0 .63 0 .915-.045v1.335c-.255.045-.75.075-1.035.075-1.965 0-3.75-.9-3.75-3.195v-7.5H28.8v-.72l2.34-.66V5.85l1.62-.465v3.75h3.63ZM16.635 9.09v9.615c0 .81.285 1.05 1.005 1.05v1.335c-1.71 0-2.58-.705-2.58-2.58V9.09h1.575Zm.375-3.495c0 .66-.51 1.17-1.17 1.17a1.14 1.14 0 0 1-1.155-1.17c0-.66.48-1.17 1.155-1.17s1.17.51 1.17 1.17Z"></path> </svg> </a> </div> <div class="Header-item d-md-none"> <button aria-label="Toggle navigation" aria-expanded="false" type="button" data-view-component="true" class="Header-link js-details-target btn-link"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-three-bars"> <path d="M3.75 5.25a.75.75 0 0 0 0 1.5h16.5a.75.75 0 0 0 0-1.5H3.75Zm0 6a.75.75 0 0 0 0 1.5h16.5a.75.75 0 0 0 0-1.5H3.75Zm0 6a.75.75 0 0 0 0 1.5h16.5a.75.75 0 0 0 0-1.5H3.75Z"></path> </svg> </button> </div> <div class="Header-item Header-item--full js-site-search flex-column flex-md-row width-full flex-order-2 flex-md-order-none mr-0 mr-md-3 mt-3 mt-md-0 Details-content--hidden-not-important d-md-flex"> <div class="header-search flex-self-stretch flex-md-self-auto mr-0 mr-md-3 mb-3 mb-md-0"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form data-turbo="false" action="/search" accept-charset="UTF-8" method="get"> <div class="d-flex"> <primer-text-field class="FormControl width-full FormControl--fullWidth"> <label class="sr-only FormControl-label" for="q"> Search Gists </label> <div class="FormControl-input-wrap"> <input placeholder="Search..." aria-describedby="validation-cde7fe73-b507-4a43-a1bb-f6cf2a7493a2" data-target="primer-text-field.inputElement " class="form-control FormControl-input FormControl-medium rounded-right-0" type="text" name="q" id="q" /> </div> <div class="FormControl-inlineValidation" id="validation-cde7fe73-b507-4a43-a1bb-f6cf2a7493a2" hidden="hidden"> <span class="FormControl-inlineValidation--visual" data-target="primer-text-field.validationSuccessIcon" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill"> <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path> </svg></span> <span class=" FormControl-inlineValidation--visual" data-target="primer-text-field.validationErrorIcon"><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill"> <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path> </svg></span> <span></span> </div> </primer-text-field> <button id="icon-button-c45b7e27-76a9-419c-98c0-21456b34500d" aria-labelledby="tooltip-8d5819b6-3890-4f41-8a38-ad476dcf3d92" type="submit" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--medium rounded-left-0"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search Button-visual"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </button><tool-tip id="tooltip-8d5819b6-3890-4f41-8a38-ad476dcf3d92" for="icon-button-c45b7e27-76a9-419c-98c0-21456b34500d" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Search Gists</tool-tip> </form> </div> </div> <nav aria-label="Global" class="d-flex flex-column flex-md-row flex-self-stretch flex-md-self-auto"> <a class="Header-link mr-0 mr-md-3 py-2 py-md-0 border-top border-md-top-0 border-white-fade" data-ga-click="Header, go to all gists, text:all gists" href="/discover">All gists</a> <a class="Header-link mr-0 mr-md-3 py-2 py-md-0 border-top border-md-top-0 border-white-fade" data-ga-click="Header, go to GitHub, text:Back to GitHub" href="https://github.com">Back to GitHub</a> <a class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-0 border-top border-md-top-0 border-white-fade" data-ga-click="Header, sign in" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"gist header","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="7c7361f2df5109a97051bee2b7aeb5defeaceafe667cf762f7003b74be7730bf" href="https://gist.github.com/auth/github?return_to=https%3A%2F%2Fgist.github.com%2Fbvaughn%2F25e6233aeb1b4f0cdb8d8366e54a3977"> Sign in </a> <a class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-0 border-top border-md-top-0 border-white-fade" data-ga-click="Header, sign up" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"gist header","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="0b80e94e43a2aac680f9e9c7ba620c5c5dde1f0f1815b8928ba35c53b3550afe" href="/join?return_to=https%3A%2F%2Fgist.github.com%2Fbvaughn%2F25e6233aeb1b4f0cdb8d8366e54a3977&source=header-gist"> Sign up </a></nav> </div> <div class="Header-item Header-item--full flex-justify-center d-md-none position-relative"> <a class="Header-link" data-hotkey="g d" aria-label="Gist Homepage " href="/"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github v-align-middle d-inline-block d-md-none"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> <svg aria-hidden="true" height="24" viewBox="0 0 68 24" version="1.1" width="68" data-view-component="true" class="octicon octicon-logo-github v-align-middle d-none d-md-inline-block"> <path d="M27.8 17.908h-.03c.013 0 .022.014.035.017l.01-.002-.016-.015Zm.005.017c-.14.001-.49.073-.861.073-1.17 0-1.575-.536-1.575-1.234v-4.652h2.385c.135 0 .24-.12.24-.283V9.302c0-.133-.12-.252-.24-.252H25.37V5.913c0-.119-.075-.193-.21-.193h-3.24c-.136 0-.21.074-.21.193V9.14s-1.636.401-1.741.416a.255.255 0 0 0-.195.253v2.021c0 .164.12.282.255.282h1.665v4.876c0 3.627 2.55 3.998 4.29 3.998.796 0 1.756-.252 1.906-.327.09-.03.135-.134.135-.238v-2.23a.264.264 0 0 0-.219-.265Zm35.549-3.272c0-2.69-1.095-3.047-2.25-2.928-.9.06-1.62.505-1.62.505v5.232s.735.506 1.83.536c1.545.044 2.04-.506 2.04-3.345ZM67 14.415c0 5.099-1.665 6.555-4.576 6.555-2.46 0-3.78-1.233-3.78-1.233s-.06.683-.135.773c-.045.089-.12.118-.21.118h-2.22c-.15 0-.286-.119-.286-.252l.03-16.514a.26.26 0 0 1 .255-.252h3.196a.26.26 0 0 1 .255.252v5.604s1.23-.788 3.03-.788l-.015-.03c1.8 0 4.456.67 4.456 5.767ZM53.918 9.05h-3.15c-.165 0-.255.119-.255.282v8.086s-.826.58-1.95.58c-1.126 0-1.456-.506-1.456-1.62v-7.06a.262.262 0 0 0-.255-.254h-3.21a.262.262 0 0 0-.256.253v7.596c0 3.27 1.846 4.087 4.381 4.087 2.085 0 3.78-1.145 3.78-1.145s.076.58.12.67c.03.074.136.133.24.133h2.011a.243.243 0 0 0 .255-.253l.03-11.103c0-.133-.12-.252-.285-.252Zm-35.556-.015h-3.195c-.135 0-.255.134-.255.297v10.91c0 .297.195.401.45.401h2.88c.3 0 .375-.134.375-.401V9.287a.262.262 0 0 0-.255-.252ZM16.787 4.01c-1.155 0-2.07.907-2.07 2.051 0 1.145.915 2.051 2.07 2.051a2.04 2.04 0 0 0 2.04-2.05 2.04 2.04 0 0 0-2.04-2.052Zm24.74-.372H38.36a.262.262 0 0 0-.255.253v6.08H33.14v-6.08a.262.262 0 0 0-.255-.253h-3.196a.262.262 0 0 0-.255.253v16.514c0 .133.135.252.255.252h3.196a.262.262 0 0 0 .255-.253v-7.06h4.966l-.03 7.06c0 .134.12.253.255.253h3.195a.262.262 0 0 0 .255-.253V3.892a.262.262 0 0 0-.255-.253Zm-28.31 7.313v8.532c0 .06-.015.163-.09.193 0 0-1.875 1.323-4.966 1.323C4.426 21 0 19.84 0 12.2S3.87 2.986 7.651 3c3.27 0 4.59.728 4.8.862.06.075.09.134.09.208l-.63 2.646c0 .134-.134.297-.3.253-.54-.164-1.35-.49-3.255-.49-2.205 0-4.575.623-4.575 5.543s2.25 5.5 3.87 5.5c1.38 0 1.875-.164 1.875-.164V13.94H7.321c-.165 0-.285-.12-.285-.253v-2.735c0-.134.12-.252.285-.252h5.61c.166 0 .286.118.286.252Z"></path> </svg> <svg aria-hidden="true" height="24" viewBox="0 0 38 24" version="1.1" width="38" data-view-component="true" class="octicon octicon-logo-gist v-align-middle d-none d-md-inline-block"> <path d="M7.05 13.095v-1.5h5.28v8.535c-1.17.555-2.925.96-5.385.96C1.665 21.09 0 17.055 0 12.045S1.695 3 6.945 3c2.43 0 3.96.495 4.92.99v1.575c-1.83-.75-3-1.095-4.92-1.095-3.855 0-5.22 3.315-5.22 7.59s1.365 7.575 5.205 7.575c1.335 0 2.97-.105 3.795-.51v-6.03H7.05Zm16.47 1.035h.045c3.33.3 4.125 1.425 4.125 3.345 0 1.815-1.14 3.615-4.71 3.615-1.125 0-2.745-.285-3.495-.585v-1.41c.705.255 1.83.54 3.495.54 2.43 0 3.09-1.035 3.09-2.13 0-1.065-.33-1.815-2.655-2.01-3.39-.3-4.095-1.5-4.095-3.12 0-1.665 1.08-3.465 4.38-3.465 1.095 0 2.34.135 3.375.585v1.41c-.915-.3-1.83-.54-3.405-.54-2.325 0-2.82.855-2.82 2.01 0 1.035.42 1.56 2.67 1.755Zm12.87-4.995v1.275h-3.63v7.305c0 1.425.795 2.01 2.25 2.01.3 0 .63 0 .915-.045v1.335c-.255.045-.75.075-1.035.075-1.965 0-3.75-.9-3.75-3.195v-7.5H28.8v-.72l2.34-.66V5.85l1.62-.465v3.75h3.63ZM16.635 9.09v9.615c0 .81.285 1.05 1.005 1.05v1.335c-1.71 0-2.58-.705-2.58-2.58V9.09h1.575Zm.375-3.495c0 .66-.51 1.17-1.17 1.17a1.14 1.14 0 0 1-1.155-1.17c0-.66.48-1.17 1.155-1.17s1.17.51 1.17 1.17Z"></path> </svg> </a> </div> <div class="Header-item f4 mr-0" role="navigation" aria-label="Sign in or sign up"> <a class="Header-link no-underline mr-3" data-ga-click="Header, sign in" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"gist header","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="7c7361f2df5109a97051bee2b7aeb5defeaceafe667cf762f7003b74be7730bf" href="https://gist.github.com/auth/github?return_to=https%3A%2F%2Fgist.github.com%2Fbvaughn%2F25e6233aeb1b4f0cdb8d8366e54a3977"> Sign in </a> <a class="Header-link d-inline-block no-underline border color-border-default rounded px-2 py-1" data-ga-click="Header, sign up" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"gist header","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="0b80e94e43a2aac680f9e9c7ba620c5c5dde1f0f1815b8928ba35c53b3550afe" href="/join?return_to=https%3A%2F%2Fgist.github.com%2Fbvaughn%2F25e6233aeb1b4f0cdb8d8366e54a3977&source=header-gist"> Sign up </a> </div> </div> <div hidden="hidden" data-view-component="true" class="js-stale-session-flash stale-session-flash flash flash-warn flash-full"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span class="js-stale-session-flash-signed-in" hidden>You signed in with another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-signed-out" hidden>You signed out in another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-switched" hidden>You switched accounts on another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <button id="icon-button-74eabbd5-db4c-4fba-b209-afe25e91bc02" aria-labelledby="tooltip-15fb6734-a76a-403a-b44c-694f9cfaffe1" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium flash-close js-flash-close"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x Button-visual"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button><tool-tip id="tooltip-15fb6734-a76a-403a-b44c-694f9cfaffe1" for="icon-button-74eabbd5-db4c-4fba-b209-afe25e91bc02" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Dismiss alert</tool-tip> </div> </div> <div id="start-of-content" class="show-on-focus"></div> <div id="js-flash-container" class="flash-container" data-turbo-replace> <template class="js-flash-template"> <div class="flash flash-full {{ className }}"> <div > <button autofocus class="flash-close js-flash-close" type="button" aria-label="Dismiss this message"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div aria-atomic="true" role="alert" class="js-flash-alert"> <div>{{ message }}</div> </div> </div> </div> </template> </div> <div class="application-main " data-commit-hovercards-enabled data-discussion-hovercards-enabled data-issue-and-pr-hovercards-enabled data-project-hovercards-enabled > <div itemscope itemtype="http://schema.org/Code"> <main id="gist-pjax-container"> <div class="gist-detail-intro gist-banner pb-3"> <div class="text-center container-lg px-3"> <p class="lead"> Instantly share code, notes, and snippets. </p> </div> </div> <div class="gisthead pagehead pb-0 pt-3 mb-4"> <div class="px-0"> <div class="mb-3 d-flex px-3 px-md-3 px-lg-5"> <div class="flex-auto min-width-0 width-fit mr-3"> <div class="d-flex"> <div class="d-none d-md-block"> <a class="mr-2 flex-shrink-0" data-hovercard-type="user" data-hovercard-url="/users/bvaughn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/bvaughn"><img class="avatar avatar-user" src="https://avatars.githubusercontent.com/u/29597?s=64&v=4" width="32" height="32" alt="@bvaughn" /></a> </div> <div class="d-flex flex-column width-full"> <div class="d-flex flex-row width-full"> <h1 class="wb-break-word f3 text-normal mb-md-0 mb-1"> <span class="author"><a data-hovercard-type="user" data-hovercard-url="/users/bvaughn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/bvaughn">bvaughn</a></span><!-- --><span class="mx-1 color-fg-muted">/</span><!-- --><strong itemprop="name" class="css-truncate-target mr-1" style="max-width: 410px"><a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977">index.md</a></strong> </h1> </div> <div class="note m-0"> Last active <relative-time tense="past" datetime="2025-01-04T10:07:09Z" data-view-component="true">January 4, 2025 10:07</relative-time> </div> </div> </div> </div> <ul class="d-md-flex pagehead-actions float-none mr-2"> </ul> <div class="d-inline-block d-md-none ml-auto"> <action-menu data-select-variant="none" data-view-component="true" class="flex-self-start ml-auto d-inline-block"> <focus-group direction="vertical" mnemonics retain> <button id="gist_options-button" popovertarget="gist_options-overlay" aria-controls="gist_options-list" aria-haspopup="true" aria-labelledby="tooltip-301d5176-275d-42a2-bf40-067256e9e04e" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--small"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal Button-visual"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg> </button><tool-tip id="tooltip-301d5176-275d-42a2-bf40-067256e9e04e" for="gist_options-button" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Show Gist options</tool-tip> <anchored-position data-target="action-menu.overlay" id="gist_options-overlay" anchor="gist_options-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true"> <div data-view-component="true" class="Overlay Overlay--size-auto"> <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list> <div data-view-component="true"> <ul aria-labelledby="gist_options-button" id="gist_options-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li rel="nofollow" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"DOWNLOAD_ZIP","git_repository_type":"GIST","gist_id":91821994,"originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="54a8205f215226b4885d247f539a984aa14f6f42697d8ccd488737a9a3f0b57b" data-ga-click="Gist, download zip, location:gist overview" data-targets="action-list.items" data-item-id="download_from_gist_options" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-8c51f152-3067-4448-9d1c-789982535c63" href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/archive/9a21af96d782966a228248a807bb5a97ba47f381.zip" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-download"> <path d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z"></path><path d="M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06l1.97 1.969Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Download ZIP </span> </a> </li> </ul> </div></action-list> </div> </div></anchored-position> </focus-group> </action-menu> </div> <ul class="d-md-flex d-none pagehead-actions float-none"> <li> <a id="gist-star-button" href="/login?return_to=https%3A%2F%2Fgist.github.com%2Fbvaughn%2F25e6233aeb1b4f0cdb8d8366e54a3977" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"gist star button","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="b7aface38f5cdb8fa22050481b957065616d5e0941ffb5552a1cead8678025ff" aria-label="You must be signed in to star a gist" data-view-component="true" class="btn-with-count Button--secondary Button--small Button"> <span class="Button-content"> <span class="Button-visual Button-leadingVisual"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg> </span> <span class="Button-label">Star</span> <span class="Button-visual Button-trailingVisual"> <span class="d-flex" aria-hidden="true"><span title="281" data-view-component="true" class="Counter">281</span></span> <span class="sr-only">(<span title="281" data-view-component="true" class="Counter">281</span>)</span> </span> </span> </a><tool-tip id="tooltip-3c90a573-ce6d-4a64-972c-92e02be65b19" for="gist-star-button" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to star a gist</tool-tip> </li> <li> <a id="gist-fork-button" href="/login?return_to=https%3A%2F%2Fgist.github.com%2Fbvaughn%2F25e6233aeb1b4f0cdb8d8366e54a3977" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"gist fork button","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="fbf218df5f49189af8dfd144afd7a06a7c9d4540a1942fc925094143daf9b0a1" aria-label="You must be signed in to fork a gist" data-view-component="true" class="btn-with-count Button--secondary Button--small Button"> <span class="Button-content"> <span class="Button-visual Button-leadingVisual"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg> </span> <span class="Button-label">Fork</span> <span class="Button-visual Button-trailingVisual"> <span class="d-flex" aria-hidden="true"><span title="37" data-view-component="true" class="Counter">37</span></span> <span class="sr-only">(<span title="37" data-view-component="true" class="Counter">37</span>)</span> </span> </span> </a><tool-tip id="tooltip-30d31dd0-10bb-49e5-9eac-206e4f4e58a6" for="gist-fork-button" popover="manual" data-direction="n" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to fork a gist</tool-tip> </li> </ul> </div> <ul class="d-flex d-md-none px-3 mb-2 pagehead-actions float-none" > <li> <div data-view-component="true" class="flex-items-center d-inline-flex"> <action-menu data-menu-input="gist-share-url-sized-down" data-select-variant="single" data-dynamic-label="" data-view-component="true" class="flex-shrink-0"> <focus-group direction="vertical" mnemonics retain> <button id="action-menu-25211e3e-7904-4863-9435-1faf327b6ae6-button" popovertarget="action-menu-25211e3e-7904-4863-9435-1faf327b6ae6-overlay" aria-controls="action-menu-25211e3e-7904-4863-9435-1faf327b6ae6-list" aria-haspopup="true" type="button" data-view-component="true" class="rounded-right-0 border-right-0 Button--secondary Button--small Button"> <span class="Button-content"> <span class="Button-label">Embed</span> </span> <span class="Button-visual Button-trailingAction"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </span> </button> <anchored-position data-target="action-menu.overlay" id="action-menu-25211e3e-7904-4863-9435-1faf327b6ae6-overlay" anchor="action-menu-25211e3e-7904-4863-9435-1faf327b6ae6-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true"> <div data-view-component="true" class="Overlay Overlay--size-auto"> <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list> <div data-view-component="true"> <ul aria-labelledby="action-menu-25211e3e-7904-4863-9435-1faf327b6ae6-button" id="action-menu-25211e3e-7904-4863-9435-1faf327b6ae6-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button value="<script src="https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977.js"></script>" tabindex="-1" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"EMBED","git_repository_type":"GIST","gist_id":91821994,"originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="13523eb44eaa7983d880583caffe2ddd8af693401780dd59e779bad65252781d" id="item-5ea97d05-2a1a-4ac7-a8f2-c782748630ad" type="button" role="menuitemradio" aria-checked="true" data-view-component="true" class="ActionListContent"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-descriptionWrap"> <span data-view-component="true" class="ActionListItem-label"> Embed </span> <span data-view-component="true" class="ActionListItem-description">Embed this gist in your website.</span> </span></button> </li> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button value="https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977" tabindex="-1" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"SHARE","git_repository_type":"GIST","gist_id":91821994,"originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="af841977b5ab958f6b9861d60cc77847ea0b71e7dbbc66a37c2526af73bc07bd" id="item-64349e23-1f73-4fd2-84e6-cc6638e39cd0" type="button" role="menuitemradio" aria-checked="false" data-view-component="true" class="ActionListContent"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-descriptionWrap"> <span data-view-component="true" class="ActionListItem-label"> Share </span> <span data-view-component="true" class="ActionListItem-description">Copy sharable link for this gist.</span> </span></button> </li> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button value="https://gist.github.com/25e6233aeb1b4f0cdb8d8366e54a3977.git" tabindex="-1" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"USE_HTTPS","git_repository_type":"GIST","gist_id":91821994,"originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="adc77a653dfcc74bc0d0ec21afdbf2bca1bac1879d6496e10057e18a574c0dc7" id="item-37cb4c17-5efb-4ec6-9b47-159e516582e4" type="button" role="menuitemradio" aria-checked="false" data-view-component="true" class="ActionListContent"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-descriptionWrap"> <span data-view-component="true" class="ActionListItem-label"> Clone via HTTPS </span> <span data-view-component="true" class="ActionListItem-description">Clone using the web URL.</span> </span></button> </li> <li role="presentation" aria-hidden="true" data-view-component="true" class="ActionList-sectionDivider"></li> <li target="_blank" rel="noopener noreferrer" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-5292d778-196e-4226-9474-4a1cd6153ee7" href="https://docs.github.com/articles/which-remote-url-should-i-use" role="menuitemradio" aria-checked="false" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-question"> <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Learn more about clone URLs </span> </a> </li> </ul> </div></action-list> </div> </div></anchored-position> </focus-group> </action-menu> <primer-text-field class="FormControl width-full FormControl--fullWidth"> <label for="gist-share-url-sized-down" class="sr-only FormControl-label"> Clone this repository at &lt;script src=&quot;https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977.js&quot;&gt;&lt;/script&gt; </label> <div class="FormControl-input-wrap FormControl-input-wrap--small"> <input id="gist-share-url-sized-down" aria-label="Clone this repository at &lt;script src=&quot;https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977.js&quot;&gt;&lt;/script&gt;" value="<script src="https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977.js"></script>" readonly="readonly" data-autoselect="true" data-target="primer-text-field.inputElement " aria-describedby="validation-25e9b10c-d5d5-418b-9524-c908222176d3" class="form-control FormControl-monospace FormControl-input FormControl-small rounded-left-0 rounded-right-0 border-right-0" type="text" name="gist-share-url-sized-down" /> </div> <div class="FormControl-inlineValidation" id="validation-25e9b10c-d5d5-418b-9524-c908222176d3" hidden="hidden"> <span class="FormControl-inlineValidation--visual" data-target="primer-text-field.validationSuccessIcon" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill"> <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path> </svg></span> <span class=" FormControl-inlineValidation--visual" data-target="primer-text-field.validationErrorIcon"><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill"> <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path> </svg></span> <span></span> </div> </primer-text-field> <span data-view-component="true"> <clipboard-copy id="clipboard-button" aria-label="Copy" for="gist-share-url-sized-down" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"COPY_URL","git_repository_type":"GIST","gist_id":91821994,"originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="f25811b1f78e4ad2733e1087ae9fcf41e44b3f067f9fc70bb3b15bf7f4075bcd" type="button" data-view-component="true" class="rounded-left-0 Button--secondary Button--small Button"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg style="display: none;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check color-fg-success"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </div> </li> <li> <button href="https://desktop.github.com" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"OPEN_IN_DESKTOP","git_repository_type":"GIST","gist_id":91821994,"originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="d8e42c5fa1dd059ea128454438de5eccb0fac5afce4cc3d2b1b5eeb0f10f6106" data-platforms="windows,mac" id="icon-button-0f90e2cf-244b-48ce-ba40-e78372e7b865" aria-labelledby="tooltip-f6bbed46-2249-40cf-ab6e-b951358ab8ad" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--small js-remove-unless-platform"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-desktop-download Button-visual"> <path d="m4.927 5.427 2.896 2.896a.25.25 0 0 0 .354 0l2.896-2.896A.25.25 0 0 0 10.896 5H8.75V.75a.75.75 0 1 0-1.5 0V5H5.104a.25.25 0 0 0-.177.427Z"></path><path d="M1.573 2.573a.25.25 0 0 0-.073.177v7.5a.25.25 0 0 0 .25.25h12.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25h-3a.75.75 0 1 1 0-1.5h3A1.75 1.75 0 0 1 16 2.75v7.5A1.75 1.75 0 0 1 14.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.75.75 0 0 1 11.25 16h-6.5a.75.75 0 0 1-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 0 1 0 10.25v-7.5A1.75 1.75 0 0 1 1.75 1h3a.75.75 0 0 1 0 1.5h-3a.25.25 0 0 0-.177.073ZM6.982 12a5.72 5.72 0 0 1-.765 2.5h3.566a5.72 5.72 0 0 1-.765-2.5H6.982Z"></path> </svg> </button><tool-tip id="tooltip-f6bbed46-2249-40cf-ab6e-b951358ab8ad" for="icon-button-0f90e2cf-244b-48ce-ba40-e78372e7b865" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Save bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977 to your computer and use it in GitHub Desktop.</tool-tip> </li> </ul> <div class="d-flex flex-md-row flex-column px-0 pr-md-3 px-lg-5"> <div class="flex-md-order-1 flex-order-2 flex-auto"> <nav class="UnderlineNav box-shadow-none px-3 px-lg-0" aria-label="Gist" data-pjax="#gist-pjax-container"> <div class="UnderlineNav-body"> <a class="js-selected-navigation-item selected UnderlineNav-item" data-pjax="true" data-hotkey="g c" aria-current="page" data-selected-links="gist_code /bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977" href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code UnderlineNav-octicon"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> Code </a> <a class="js-selected-navigation-item UnderlineNav-item" data-pjax="true" data-hotkey="g r" data-selected-links="gist_revisions /bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/revisions" href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/revisions"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-commit UnderlineNav-octicon"> <path d="M11.93 8.5a4.002 4.002 0 0 1-7.86 0H.75a.75.75 0 0 1 0-1.5h3.32a4.002 4.002 0 0 1 7.86 0h3.32a.75.75 0 0 1 0 1.5Zm-1.43-.75a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"></path> </svg> Revisions <span title="18" data-view-component="true" class="Counter">18</span> </a> <a class="js-selected-navigation-item UnderlineNav-item" data-pjax="true" data-hotkey="g s" data-selected-links="gist_stars /bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/stargazers" href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/stargazers"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star UnderlineNav-octicon"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg> Stars <span title="276" data-view-component="true" class="Counter">276</span> </a> <a class="js-selected-navigation-item UnderlineNav-item" data-pjax="true" data-hotkey="g f" data-selected-links="gist_forks /bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/forks" href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/forks"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-branch UnderlineNav-octicon"> <path d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"></path> </svg> Forks <span title="37" data-view-component="true" class="Counter">37</span> </a> </div> </nav> </div> <div class="d-md-flex d-none flex-items-center flex-md-order-2 flex-order-1" data-multiple> <div data-view-component="true" class="flex-items-center d-inline-flex"> <action-menu data-menu-input="gist-share-url-original" data-select-variant="single" data-dynamic-label="" data-view-component="true" class="flex-shrink-0"> <focus-group direction="vertical" mnemonics retain> <button id="action-menu-b67d07eb-aea8-4999-b3df-80956a45d682-button" popovertarget="action-menu-b67d07eb-aea8-4999-b3df-80956a45d682-overlay" aria-controls="action-menu-b67d07eb-aea8-4999-b3df-80956a45d682-list" aria-haspopup="true" type="button" data-view-component="true" class="rounded-right-0 border-right-0 Button--secondary Button--small Button"> <span class="Button-content"> <span class="Button-label">Embed</span> </span> <span class="Button-visual Button-trailingAction"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </span> </button> <anchored-position data-target="action-menu.overlay" id="action-menu-b67d07eb-aea8-4999-b3df-80956a45d682-overlay" anchor="action-menu-b67d07eb-aea8-4999-b3df-80956a45d682-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true"> <div data-view-component="true" class="Overlay Overlay--size-auto"> <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list> <div data-view-component="true"> <ul aria-labelledby="action-menu-b67d07eb-aea8-4999-b3df-80956a45d682-button" id="action-menu-b67d07eb-aea8-4999-b3df-80956a45d682-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button value="<script src="https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977.js"></script>" tabindex="-1" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"EMBED","git_repository_type":"GIST","gist_id":91821994,"originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="13523eb44eaa7983d880583caffe2ddd8af693401780dd59e779bad65252781d" id="item-afaaa829-1a27-4566-9b3f-d59725b32509" type="button" role="menuitemradio" aria-checked="true" data-view-component="true" class="ActionListContent"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-descriptionWrap"> <span data-view-component="true" class="ActionListItem-label"> Embed </span> <span data-view-component="true" class="ActionListItem-description">Embed this gist in your website.</span> </span></button> </li> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button value="https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977" tabindex="-1" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"SHARE","git_repository_type":"GIST","gist_id":91821994,"originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="af841977b5ab958f6b9861d60cc77847ea0b71e7dbbc66a37c2526af73bc07bd" id="item-19ac478e-c068-4337-a437-9539800493b1" type="button" role="menuitemradio" aria-checked="false" data-view-component="true" class="ActionListContent"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-descriptionWrap"> <span data-view-component="true" class="ActionListItem-label"> Share </span> <span data-view-component="true" class="ActionListItem-description">Copy sharable link for this gist.</span> </span></button> </li> <li data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <button value="https://gist.github.com/25e6233aeb1b4f0cdb8d8366e54a3977.git" tabindex="-1" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"USE_HTTPS","git_repository_type":"GIST","gist_id":91821994,"originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="adc77a653dfcc74bc0d0ec21afdbf2bca1bac1879d6496e10057e18a574c0dc7" id="item-32b22237-c119-4f2b-a8a5-ddc147a4f0d3" type="button" role="menuitemradio" aria-checked="false" data-view-component="true" class="ActionListContent"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-descriptionWrap"> <span data-view-component="true" class="ActionListItem-label"> Clone via HTTPS </span> <span data-view-component="true" class="ActionListItem-description">Clone using the web URL.</span> </span></button> </li> <li role="presentation" aria-hidden="true" data-view-component="true" class="ActionList-sectionDivider"></li> <li target="_blank" rel="noopener noreferrer" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-1da72385-86a4-4d4c-b79a-af9784f81710" href="https://docs.github.com/articles/which-remote-url-should-i-use" role="menuitemradio" aria-checked="false" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-action--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check ActionListItem-singleSelectCheckmark"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </span> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-question"> <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Learn more about clone URLs </span> </a> </li> </ul> </div></action-list> </div> </div></anchored-position> </focus-group> </action-menu> <primer-text-field class="FormControl width-full FormControl--fullWidth"> <label for="gist-share-url-original" class="sr-only FormControl-label"> Clone this repository at &lt;script src=&quot;https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977.js&quot;&gt;&lt;/script&gt; </label> <div class="FormControl-input-wrap FormControl-input-wrap--small"> <input id="gist-share-url-original" aria-label="Clone this repository at &lt;script src=&quot;https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977.js&quot;&gt;&lt;/script&gt;" value="<script src="https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977.js"></script>" readonly="readonly" data-autoselect="true" data-target="primer-text-field.inputElement " aria-describedby="validation-22cb6956-cfc6-4242-8aa0-234a8ad1beb4" class="form-control FormControl-monospace FormControl-input FormControl-small rounded-left-0 rounded-right-0 border-right-0" type="text" name="gist-share-url-original" /> </div> <div class="FormControl-inlineValidation" id="validation-22cb6956-cfc6-4242-8aa0-234a8ad1beb4" hidden="hidden"> <span class="FormControl-inlineValidation--visual" data-target="primer-text-field.validationSuccessIcon" hidden><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-check-circle-fill"> <path d="M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm-.705 8.737L9.63 4.403 8.392 3.166 5.295 6.263l-1.7-1.702L2.356 5.8l2.938 2.938Z"></path> </svg></span> <span class=" FormControl-inlineValidation--visual" data-target="primer-text-field.validationErrorIcon"><svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill"> <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path> </svg></span> <span></span> </div> </primer-text-field> <span data-view-component="true"> <clipboard-copy id="clipboard-button" aria-label="Copy" for="gist-share-url-original" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"COPY_URL","git_repository_type":"GIST","gist_id":91821994,"originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="f25811b1f78e4ad2733e1087ae9fcf41e44b3f067f9fc70bb3b15bf7f4075bcd" type="button" data-view-component="true" class="rounded-left-0 Button--secondary Button--small Button"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg style="display: none;" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check color-fg-success"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </div> <div class="ml-2"> <button href="https://desktop.github.com" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"OPEN_IN_DESKTOP","git_repository_type":"GIST","gist_id":91821994,"originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="d8e42c5fa1dd059ea128454438de5eccb0fac5afce4cc3d2b1b5eeb0f10f6106" data-platforms="windows,mac" id="icon-button-a56de3ca-e818-4b22-a791-a905bc449d26" aria-labelledby="tooltip-82d3aa93-861e-4742-9e6a-1f3d71f82dc1" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--small js-remove-unless-platform"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-desktop-download Button-visual"> <path d="m4.927 5.427 2.896 2.896a.25.25 0 0 0 .354 0l2.896-2.896A.25.25 0 0 0 10.896 5H8.75V.75a.75.75 0 1 0-1.5 0V5H5.104a.25.25 0 0 0-.177.427Z"></path><path d="M1.573 2.573a.25.25 0 0 0-.073.177v7.5a.25.25 0 0 0 .25.25h12.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25h-3a.75.75 0 1 1 0-1.5h3A1.75 1.75 0 0 1 16 2.75v7.5A1.75 1.75 0 0 1 14.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.75.75 0 0 1 11.25 16h-6.5a.75.75 0 0 1-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 0 1 0 10.25v-7.5A1.75 1.75 0 0 1 1.75 1h3a.75.75 0 0 1 0 1.5h-3a.25.25 0 0 0-.177.073ZM6.982 12a5.72 5.72 0 0 1-.765 2.5h3.566a5.72 5.72 0 0 1-.765-2.5H6.982Z"></path> </svg> </button><tool-tip id="tooltip-82d3aa93-861e-4742-9e6a-1f3d71f82dc1" for="icon-button-a56de3ca-e818-4b22-a791-a905bc449d26" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Save bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977 to your computer and use it in GitHub Desktop.</tool-tip> </div> <div class="ml-2"> <a class="btn btn-sm" rel="nofollow" data-hydro-click="{"event_type":"clone_or_download.click","payload":{"feature_clicked":"DOWNLOAD_ZIP","git_repository_type":"GIST","gist_id":91821994,"originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="54a8205f215226b4885d247f539a984aa14f6f42697d8ccd488737a9a3f0b57b" data-ga-click="Gist, download zip, location:gist overview" href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/archive/9a21af96d782966a228248a807bb5a97ba47f381.zip">Download ZIP</a> </div> </div> </div> </div> </div> <div class="container-lg px-3"> <div class="repository-content gist-content" > <div> <div itemprop="about"> How to use profiling in production mode for react-dom </div> <div class="js-gist-file-update-container js-task-list-container"> <div id="file-index-md" class="file my-2"> <div class="file-header d-flex flex-md-items-center flex-items-start"> <div class="file-actions flex-order-2 pt-0"> <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/raw/9a21af96d782966a228248a807bb5a97ba47f381/index.md" data-view-component="true" class="Button--secondary Button--small Button"> <span class="Button-content"> <span class="Button-label">Raw</span> </span> </a> </div> <div class="file-info pr-4 d-flex flex-md-items-center flex-items-start flex-order-1 flex-auto"> <span class="mr-1"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-square color-fg-muted"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25Zm7.47 3.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L10.69 8 9.22 6.53a.75.75 0 0 1 0-1.06ZM6.78 6.53 5.31 8l1.47 1.47a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </span> <a class="wb-break-all" href="#file-index-md"> <strong class="user-select-contain gist-blob-name css-truncate-target"> index.md </strong> </a> </div> </div> <div id="file-index-md-readme" class="Box-body readme blob p-5 p-xl-6 gist-border-0" style="overflow: auto" tabindex="0" role="region" aria-label="index.md content, created on 03:08PM on September 10, 2018." > <article class="markdown-body entry-content container-lg" itemprop="text"><p dir="auto">React recently introduced an <a href="https://github.com/reactjs/rfcs/pull/51" data-hovercard-type="pull_request" data-hovercard-url="/reactjs/rfcs/pull/51/hovercard">experimental profiler API</a>. This page gives instructions on how to use this API in a production release of your app.</p> <p dir="auto"><strong>Table of Contents</strong></p> <ul dir="auto"> <li><a href="#profiling-in-production">Profiling in production</a> <ul dir="auto"> <li><a href="#create-react-app">Create React App</a></li> <li><a href="#webpack-4">Webpack 4</a></li> </ul> </li> </ul> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Profiling in production</h2><a id="user-content-profiling-in-production" class="anchor" aria-label="Permalink: Profiling in production" href="#profiling-in-production"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.</p> <div class="markdown-heading" dir="auto"><h3 class="heading-element" dir="auto">Create React App v3.2+</h3><a id="user-content-create-react-app-v32" class="anchor" aria-label="Permalink: Create React App v3.2+" href="#create-react-app-v32"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">Creating a profiling build can be done by specifying an additional <code>--profile </code> flag:</p> <div class="highlight highlight-source-shell" dir="auto"><pre>yarn build --profile npm run build -- --profile</pre></div> <div class="markdown-heading" dir="auto"><h3 class="heading-element" dir="auto">Create React App <= v3.1</h3><a id="user-content-create-react-app--v31" class="anchor" aria-label="Permalink: Create React App <= v3.1" href="#create-react-app--v31"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="markdown-heading" dir="auto"><h4 class="heading-element" dir="auto">Enabling profiling permanently</h4><a id="user-content-enabling-profiling-permanently" class="anchor" aria-label="Permalink: Enabling profiling permanently" href="#enabling-profiling-permanently"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">At the moment, the only way to <strong>permanently</strong> enable production profiling in CRA apps is to <a href="https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject">eject</a>. Then you can follow the instructions below and apply these changes to <code>config/webpack.config.prod.js</code> in your app folder.</p> <p dir="auto">However, you can also enable profiling temporarily without ejecting.</p> <div class="markdown-heading" dir="auto"><h4 class="heading-element" dir="auto">Enabling profiling temporarily</h4><a id="user-content-enabling-profiling-temporarily" class="anchor" aria-label="Permalink: Enabling profiling temporarily" href="#enabling-profiling-temporarily"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">If you only want to profile the application locally in production mode, you can do this by editing <code>node_modules</code> directly.</p> <p dir="auto">Follow the instructions below, and apply them to <code>node_modules/react-scripts/config/webpack.config.prod.js</code>. Then you can run <code>yarn build</code> or <code>npm run build</code> to get a profiling build. Note that your changes would be <strong>temporary</strong> and will not persist between re-runs of your package manager.</p> <div class="markdown-heading" dir="auto"><h4 class="heading-element" dir="auto">Changing the Webpack config</h4><a id="user-content-changing-the-webpack-config" class="anchor" aria-label="Permalink: Changing the Webpack config" href="#changing-the-webpack-config"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">To enable profiling in production mode, modify Webpack configuration file (<code>config/webpack.config.prod.js</code>) as shown below.</p> <div class="markdown-heading" dir="auto"><h4 class="heading-element" dir="auto"><code>react-dom@^17.0.2</code> / <code>scheduler@^0.20.2</code></h4><a id="user-content-react-dom1702--scheduler0202" class="anchor" aria-label="Permalink: react-dom@^17.0.2 / scheduler@^0.20.2" href="#react-dom1702--scheduler0202"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="highlight highlight-source-js" dir="auto"><pre><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c">// ...</span> <span class="pl-c1">resolve</span>: <span class="pl-kos">{</span> <span class="pl-c">// ...</span> <span class="pl-c1">alias</span>: <span class="pl-kos">{</span> <span class="pl-c">// ...</span> <span class="pl-s">'react-dom$'</span>: <span class="pl-s">'react-dom/profiling'</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c">// ...</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c">// ...</span> <span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div> <blockquote> <p dir="auto"><strong>Note</strong> that if you're using a version of <code>react</code>/<code>react-dom</code> that's less than 16.6, you should refer to <a href="https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/bb26687253a82c363b78eea104c0da03ead9091b">this earlier revision of the documentation instead</a>.</p> </blockquote> <blockquote> <p dir="auto"><strong>Note</strong> that if you're using the <code>schedule</code> package v0.3.0-v0.4.0 you should refer to <a href="https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/19310f2e0ec93b31e5f67dd611d227d9ba7c4fff">this earlier revision of the documentation</a> instead.</p> </blockquote> <div class="markdown-heading" dir="auto"><h4 class="heading-element" dir="auto">Optional: Disabling mangling for local profiling</h4><a id="user-content-optional-disabling-mangling-for-local-profiling" class="anchor" aria-label="Permalink: Optional: Disabling mangling for local profiling" href="#optional-disabling-mangling-for-local-profiling"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">When profiling locally, you might want to disable function name mangling so that you can see the component names in the profiler. <strong>Note that this will significantly increase your bundle size so only do this during local development!</strong> To do this, find the <code>mangle</code> option for <code>UglifyJSPlugin</code> in the config, and set it to <code>false</code>. Don't forget to undo your changes before a real deployment.</p> <div class="markdown-heading" dir="auto"><h2 class="heading-element" dir="auto">Webpack 4</h2><a id="user-content-webpack-4" class="anchor" aria-label="Permalink: Webpack 4" href="#webpack-4"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">If you are using Webpack 4 to bundle your apps, add the following <a href="https://webpack.js.org/configuration/resolve/#resolve-alias" rel="nofollow">import aliases</a> to your production config:</p> <div class="markdown-heading" dir="auto"><h4 class="heading-element" dir="auto"><code>react-dom@^17.0.2</code> / <code>scheduler@^0.20.2</code></h4><a id="user-content-react-dom1702--scheduler0202-1" class="anchor" aria-label="Permalink: react-dom@^17.0.2 / scheduler@^0.20.2" href="#react-dom1702--scheduler0202-1"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <div class="highlight highlight-source-js" dir="auto"><pre><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c">//...</span> <span class="pl-c1">resolve</span>: <span class="pl-kos">{</span> <span class="pl-c1">alias</span>: <span class="pl-kos">{</span> <span class="pl-s">'react-dom$'</span>: <span class="pl-s">'react-dom/profiling'</span><span class="pl-kos">,</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div> <blockquote> <p dir="auto"><strong>Note</strong> that if you're using a version of <code>react</code>/<code>react-dom</code> that's less than 16.6, you should refer to <a href="https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/bb26687253a82c363b78eea104c0da03ead9091b">this earlier revision of the documentation instead</a>.</p> </blockquote> <blockquote> <p dir="auto"><strong>Note</strong> that if you're using the <code>schedule</code> package v0.3.0-v0.4.0 you should refer to <a href="https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/19310f2e0ec93b31e5f67dd611d227d9ba7c4fff">this earlier revision of the documentation</a> instead.</p> </blockquote> <div class="markdown-heading" dir="auto"><h4 class="heading-element" dir="auto">Optional: Disabling mangling for local profiling</h4><a id="user-content-optional-disabling-mangling-for-local-profiling-1" class="anchor" aria-label="Permalink: Optional: Disabling mangling for local profiling" href="#optional-disabling-mangling-for-local-profiling-1"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a></div> <p dir="auto">When profiling locally, you might want to disable function name mangling so that you can see the component names in the profiler. <strong>Note that this will significantly increase your bundle size so only do this during local development!</strong> To do this, find the <code>mangle</code> option for <code>UglifyJSPlugin</code> in the config, and set it to <code>false</code>. Don't forget to undo your changes before a real deployment.</p> </article> </div> </div> </div> <a name="comments"></a> <div class="js-quote-selection-container" data-quote-markdown=".js-comment-body"> <div class="js-discussion " > <div class="ml-md-6 pl-md-3 ml-0 pl-0"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="ajax-pagination-form js-ajax-pagination" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/load_comments" accept-charset="UTF-8" method="get"> <input type="hidden" name="partial" id="partial" value="gists/timeline_marker" autocomplete="off" class="form-control" /> <input type="hidden" name="before_comment_id" id="before_comment_id" value="3062721" autocomplete="off" class="form-control" /> <input type="hidden" name="mark_as_unread" id="mark_as_unread" value="0" autocomplete="off" class="form-control" /> <button name="button" type="submit" class="ajax-pagination-btn" data-disable-with="Loading...">Load earlier comments...</button> </form> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/amadeu01/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/amadeu01"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/11631092?s=80&v=4" width="40" height="40" alt="@amadeu01" /></a> </div> <div id="gistcomment-3062721" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3062721-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/amadeu01/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/amadeu01">amadeu01</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=3062721#gistcomment-3062721" id="gistcomment-3062721-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2019-10-22T17:57:20Z" class="no-wrap">Oct 22, 2019</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bvaughn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bvaughn">@bvaughn</a> Does it work with RN?</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3062721" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="DSm-nodwS_1JrLyFhW3YPdv73ZToIuN75qNm99TLkuBNU-c2MvBdBzJW2J3pOBDyJSu9n0UF_24Yw4pbjWeGTA" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3062721/edit_form?textarea_id=gistcomment-3062721-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/gassiss/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/gassiss"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/35489495?s=80&v=4" width="40" height="40" alt="@gassiss" /></a> </div> <div id="gistcomment-3103791" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3103791-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/gassiss/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/gassiss">gassiss</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=3103791#gistcomment-3103791" id="gistcomment-3103791-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2019-12-06T16:46:30Z" class="no-wrap">Dec 6, 2019</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">In case anyone has the same issue, I tried <code class="notranslate">npm run build --profile</code> and got the standard build. <code class="notranslate">npm run build -- --profile</code> did the trick.</p> <p dir="auto">Thanks for your hard work by the way :)</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3103791" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="AR9PcmbWdi24E-1ytdd5xtYYa6Ti5KfYXYeKWYgHj-TXqJDAC0iN6EA4BK4o__TNYLQXGDp9_kDlLIsdgdwNjw" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3103791/edit_form?textarea_id=gistcomment-3103791-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/bvaughn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/bvaughn"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/29597?s=80&v=4" width="40" height="40" alt="@bvaughn" /></a> </div> <div id="gistcomment-3168516" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3168516-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user is the author of this ." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Author</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/bvaughn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/bvaughn">bvaughn</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=3168516#gistcomment-3168516" id="gistcomment-3168516-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-02-06T16:40:36Z" class="no-wrap">Feb 6, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">Thanks for the note, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/gassiss/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/gassiss">@gassiss</a>. I updated the README to fix the NPM syntax.</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3168516" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="lwPAuGWnSQde1tb5YTfQOXLW6fooFhZm-3vCMh8a9Hx9szMrYkOW0__MtrXtL-dfzt9wKeLcRcGJrGIKDcQiZA" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3168516/edit_form?textarea_id=gistcomment-3168516-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/seanders/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/seanders"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/2849183?s=80&v=4" width="40" height="40" alt="@seanders" /></a> </div> <div id="gistcomment-3301626" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3301626-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/seanders/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/seanders">seanders</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=3301626#gistcomment-3301626" id="gistcomment-3301626-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-05-12T20:06:12Z" class="no-wrap">May 12, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bvaughn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bvaughn">@bvaughn</a> Wondering if you had any thoughts on this question.</p> <blockquote> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bvaughn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bvaughn">@bvaughn</a> To clarify, does this only have a performance impact when you're profiling? Or is that performance impact always there?</p> </blockquote> <p dir="auto">Put another way:<br> Does aliasing <code class="notranslate">react-dom</code> for <code class="notranslate">react-dom/profiling</code> <em>on its own</em> introduce a performance hit, or is it only limited to invocations of the <code class="notranslate">Profiler</code> component, specifically.</p> <p dir="auto">i.e. Would two identical react apps, aside from using <code class="notranslate">react-dom</code> vs. <code class="notranslate">react-dom/profiling</code>, see any difference in performance?</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3301626" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="gAAjcNRfyH1DlxEmqjp30ET2eNaR_3dZZhxnZWU16sKOpjoYjyS85iQQ7JEhL3ulDCx4YN8M3JGxj6JwtfJPHQ" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3301626/edit_form?textarea_id=gistcomment-3301626-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/bvaughn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/bvaughn"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/29597?s=80&v=4" width="40" height="40" alt="@bvaughn" /></a> </div> <div id="gistcomment-3301669" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3301669-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user is the author of this ." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Author</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/bvaughn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/bvaughn">bvaughn</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=3301669#gistcomment-3301669" id="gistcomment-3301669-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-05-12T20:55:07Z" class="no-wrap">May 12, 2020</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MjVlNjIzM2FlYjFiNGYwY2RiOGQ4MzY2ZTU0YTM5Nzc6MzMwMTY2OQ==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">Performance impact is minor: 4 additional fiber attributes, some additional calls to <code class="notranslate">peformance.now()</code> within profiled subtrees.</p> <p dir="auto">The memory impact of the additional fiber attributes should be minor, but will always be there if you're loading the profiling build- so only load it if you're using the data.</p> <p dir="auto">The calls to <code class="notranslate">peformance.now()</code> aren't done unless you're within a part of the tree wrapped with a <code class="notranslate"><Profiler></code> tag so the CPU impact- minimal either way- would not apply to parts of your app that aren't being profiled.</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3301669" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="q8XjlRqCFM_Nk3h4KIE7Y5wlxNl-jL9m8LDXS8A91m01KQnYCjWK0zRG6tFB1c_jQpGVNSRKCatP-lISIhQcow" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3301669/edit_form?textarea_id=gistcomment-3301669-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/seanders/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/seanders"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/2849183?s=80&v=4" width="40" height="40" alt="@seanders" /></a> </div> <div id="gistcomment-3301674" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3301674-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/seanders/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/seanders">seanders</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=3301674#gistcomment-3301674" id="gistcomment-3301674-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-05-12T21:01:17Z" class="no-wrap">May 12, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bvaughn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bvaughn">@bvaughn</a> Excellent. Thanks for the clear, concise, and thorough explanation. You are making many a dev happy on my team, right now.</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3301674" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="ZWjAprxjxwjXNl7O5LDzgdT2Ee9PJHXpkQvSzvKpwZCYEyaZduw8ArWtdHW1aqiVKmPFyxZnbRoF4wECqQK5kg" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3301674/edit_form?textarea_id=gistcomment-3301674-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/abhilash-u/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/abhilash-u"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/52395540?s=80&v=4" width="40" height="40" alt="@abhilash-u" /></a> </div> <div id="gistcomment-3318931" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3318931-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/abhilash-u/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/abhilash-u">abhilash-u</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=3318931#gistcomment-3318931" id="gistcomment-3318931-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-05-26T18:36:53Z" class="no-wrap">May 26, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">will it work for react native apps as well ?</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3318931" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="cFLHzTWzUFZcXlB7LHUMiAZ2FCQ1ne5jWePYf_mQGVADfmZbWy4alssDkEQ8v4f09aSMS7VFqMJ7Pl44fnvUtA" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3318931/edit_form?textarea_id=gistcomment-3318931-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/bvaughn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/bvaughn"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/29597?s=80&v=4" width="40" height="40" alt="@bvaughn" /></a> </div> <div id="gistcomment-3318934" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3318934-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user is the author of this ." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Author</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/bvaughn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/bvaughn">bvaughn</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=3318934#gistcomment-3318934" id="gistcomment-3318934-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-05-26T18:40:35Z" class="no-wrap">May 26, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">Profiler API supports React Native.</p> <p dir="auto">Aliasing methods described in this gist are only for React DOM. You'll want to reach out to the React Native team to find out what their recommended aliasing approach is.</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3318934" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="BCHS4r4XfYuEO1fDb16niFW_V4zbrxMleq2PpKeE8jgOeLzuGOgqDNvWEOdZr7XOFSFx4mbtA4AiChJvPjSBog" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3318934/edit_form?textarea_id=gistcomment-3318934-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/pjisha/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/pjisha"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/22337411?s=80&v=4" width="40" height="40" alt="@pjisha" /></a> </div> <div id="gistcomment-3357428" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3357428-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/pjisha/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/pjisha">pjisha</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=3357428#gistcomment-3357428" id="gistcomment-3357428-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-06-28T17:47:27Z" class="no-wrap">Jun 28, 2020</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MjVlNjIzM2FlYjFiNGYwY2RiOGQ4MzY2ZTU0YTM5Nzc6MzM1NzQyOA==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">I get this error displayed while trying to profile my react app. <strong>Profiling support requires either a development or production-profiling build of React v16.5+.</strong></p> <p dir="auto">Versions of react and react-dom in my package.json is 16.8.2. And webpack is 4.16.5<br> What is that I am missing?</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3357428" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="CZ74dkLFSqCa-AXPDJEzNEp3BO-smU0yspllql24Rp2a9vvVaDsYieVbYeaGxVemyhGLA1looj5VzZBMxYI9Mg" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3357428/edit_form?textarea_id=gistcomment-3357428-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/usrbowe/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/usrbowe"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/5339061?s=80&v=4" width="40" height="40" alt="@usrbowe" /></a> </div> <div id="gistcomment-3419632" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3419632-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/usrbowe/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/usrbowe">usrbowe</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=3419632#gistcomment-3419632" id="gistcomment-3419632-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-08-17T01:51:43Z" class="no-wrap">Aug 17, 2020</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MjVlNjIzM2FlYjFiNGYwY2RiOGQ4MzY2ZTU0YTM5Nzc6MzQxOTYzMg==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <h3 dir="auto">Support for React Native</h3> <p dir="auto">I was able to use babel <code class="notranslate">module-resolver</code> plugin and get Profiling renderer to work with this alias config:<br> <a href="https://gist.github.com/usrbowe/cf0fe2bf4e73923059d06bb442d054f9#file-babelrc-L7-L8">https://gist.github.com/usrbowe/cf0fe2bf4e73923059d06bb442d054f9#file-babelrc-L7-L8</a></p> <blockquote> <p dir="auto">Do not forget to <code class="notranslate">--reset-cache</code> when starting packager. Also do check for any transform errors, since sometimes depending on project folder structure, path to renderer might be different.</p> </blockquote> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/amadeu01/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/amadeu01">@amadeu01</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/abhilash-u/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/abhilash-u">@abhilash-u</a></p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3419632" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="3pCnMuUYH4SRGz5I_tizB-kd0OiHPLJNciSRCJYiiHF1RkfTK5PcVJSjFpmyxRQGqTotqC4BvO0eZR53kC5NbA" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3419632/edit_form?textarea_id=gistcomment-3419632-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/wintercounter/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/wintercounter"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/963776?s=80&v=4" width="40" height="40" alt="@wintercounter" /></a> </div> <div id="gistcomment-3455554" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3455554-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/wintercounter/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/wintercounter">wintercounter</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=3455554#gistcomment-3455554" id="gistcomment-3455554-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-09-15T23:16:03Z" class="no-wrap">Sep 15, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">I have the opposite problem. My prod build always has profiling. Any advice where to look? Everything else is prod in the CI tool chain, and they work fine, Terser, Prod only Webpack plugins, all good. Checked <code class="notranslate">webpack-bunde-analyzer</code> and <code class="notranslate">react-dom.production.min.js</code> is loaded.</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3455554" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="IPQfncUIiCRD-ilVIG_udXRmlJvWxKS42kCY_j29wmCviDmucNzUCst9kEAaVhk8Dk7RkURcZld-4NaYHYkeHA" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3455554/edit_form?textarea_id=gistcomment-3455554-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/AhsanAyaz/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/AhsanAyaz"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/9844254?s=80&v=4" width="40" height="40" alt="@AhsanAyaz" /></a> </div> <div id="gistcomment-3550047" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3550047-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/AhsanAyaz/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/AhsanAyaz">AhsanAyaz</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=3550047#gistcomment-3550047" id="gistcomment-3550047-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-12-04T11:25:55Z" class="no-wrap">Dec 4, 2020</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">Was anyone able to find it out if it works for ReactNative using the solution provided by @ursbowe?<br> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/amadeu01/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/amadeu01">@amadeu01</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/abhilash-u/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/abhilash-u">@abhilash-u</a></p> <p dir="auto">It doesn't work for me though.</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3550047" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="gFO4j4DjjGVZ2yd2tKjelyyXRu0d2OFClQgsaLWgYxBoa-JhFkfBsJK-leSMR24Dn_Gc_l1a42SiUJU2G7T3AA" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3550047/edit_form?textarea_id=gistcomment-3550047-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/lukasz-app/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/lukasz-app"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/16625370?s=80&v=4" width="40" height="40" alt="@lukasz-app" /></a> </div> <div id="gistcomment-3553146" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3553146-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/lukasz-app/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/lukasz-app">lukasz-app</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=3553146#gistcomment-3553146" id="gistcomment-3553146-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2020-12-07T15:47:15Z" class="no-wrap">Dec 7, 2020</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MjVlNjIzM2FlYjFiNGYwY2RiOGQ4MzY2ZTU0YTM5Nzc6MzU1MzE0Ng==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/usr/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/usr">@usr</a></p> <blockquote> <h3 dir="auto">Support for React Native</h3> <p dir="auto">I was able to use babel <code class="notranslate">module-resolver</code> plugin and get Profiling renderer to work with this alias config:<br> <a href="https://gist.github.com/usrbowe/cf0fe2bf4e73923059d06bb442d054f9#file-babelrc-L7-L8">https://gist.github.com/usrbowe/cf0fe2bf4e73923059d06bb442d054f9#file-babelrc-L7-L8</a></p> </blockquote> <p dir="auto">What version of react-native are you using?</p> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/AhsanAyaz/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/AhsanAyaz">@AhsanAyaz</a><br> I couldn't get it to work with the above snippet. I think it is because at the bottom of the <code class="notranslate">node_modules/react-native/Libraries/Renderer/shims/ReactNative.js</code> require depends on the relative path</p> <pre class="notranslate"><code class="notranslate">ReactNative = require('../implementations/ReactNativeRenderer-prod'); </code></pre> <p dir="auto">To make it work change this line to:</p> <pre class="notranslate"><code class="notranslate">ReactNative = require('../implementations/ReactNativeRenderer-profiling') </code></pre> <p dir="auto">This change, being inside <code class="notranslate">node_modules</code>, will not persist after npm/yarn install, but you can keep it using <code class="notranslate">patch-package</code></p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3553146" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="QWqNpGAag3D0jmtR4uIFb0KoZ14X-iBdY12V_vL6VTApBumVJT-mOswrDBbwNrveQ_8T-X4XKxMqyFvsz-gZvA" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3553146/edit_form?textarea_id=gistcomment-3553146-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/issacgerges/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/issacgerges"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/44379112?s=80&v=4" width="40" height="40" alt="@issacgerges" /></a> </div> <div id="gistcomment-3680939" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3680939-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/issacgerges/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/issacgerges">issacgerges</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=3680939#gistcomment-3680939" id="gistcomment-3680939-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2021-03-25T22:28:49Z" class="no-wrap">Mar 25, 2021</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MjVlNjIzM2FlYjFiNGYwY2RiOGQ4MzY2ZTU0YTM5Nzc6MzY4MDkzOQ==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bvaughn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bvaughn">@bvaughn</a> did y'all consider an explicit <code class="notranslate">enabled</code>/<code class="notranslate">disabled</code> / <code class="notranslate">shouldSample</code> prop in this <code class="notranslate"><Profiler></code> so it could be sampled (or enabled only at certain times) without impacting the component hierarchy at all?</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3680939" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="foGMn7FZgy2h9Vb0aAg2iQoNno9U0xNpM6LGNOi1G1uEFg_AKZT8JblaMxJpM4YsMFV3JbSPUJcKISD9RyqkBw" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3680939/edit_form?textarea_id=gistcomment-3680939-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/larry-dalmeida/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/larry-dalmeida"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/20266078?s=80&v=4" width="40" height="40" alt="@larry-dalmeida" /></a> </div> <div id="gistcomment-3807398" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3807398-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/larry-dalmeida/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/larry-dalmeida">larry-dalmeida</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=3807398#gistcomment-3807398" id="gistcomment-3807398-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2021-07-09T10:02:09Z" class="no-wrap">Jul 9, 2021</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/MDExOkdpc3RDb21tZW50MjVlNjIzM2FlYjFiNGYwY2RiOGQ4MzY2ZTU0YTM5Nzc6MzgwNzM5OA==" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <blockquote> <p dir="auto">Performance impact is minor: 4 additional fiber attributes, some additional calls to <code class="notranslate">peformance.now()</code> within profiled subtrees.</p> <p dir="auto">The memory impact of the additional fiber attributes should be minor, but will always be there if you're loading the profiling build- so only load it if you're using the data.</p> <p dir="auto">The calls to <code class="notranslate">peformance.now()</code> aren't done unless you're within a part of the tree wrapped with a <code class="notranslate"><Profiler></code> tag so the CPU impact- minimal either way- would not apply to parts of your app that aren't being profiled.</p> </blockquote> <p dir="auto">This is great <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bvaughn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bvaughn">@bvaughn</a>! Thank you and love the work! ❤️</p> <p dir="auto">I want to profile some components and not all in production, aggregate and send that data to a monitoring endpoint.<br> I understand that using the profiler in production should have a small or negligible impact on user experience at least for profiling 20-50 (guess) components on a page.</p> <p dir="auto"><strong>I would like to know if there are any more known data/estimates (perhaps from tests at facebook) on the performance impact on the user experience when shipping the production build of react including the profiler?</strong></p> <p dir="auto">I'm hoping for some numbers, if possible (even if guesstimates) to try and determine if it's negligible enough to be shipped to all customers until we have data and then make a call on if we should invest in shipping a different build to smaller customer traffic (bit complex due to our setup)?</p> <p dir="auto">I understand if that's not available, I suppose the best way to find out would be to test and gather numbers for ourselves in production.</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3807398" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="5i8MmG787PUunlO7ZpVnO3gljivVv1namJgZQ2214raHscvtkWGuiBuMueSeDgp7cTa3vyJRR0lyOypJ3B-teQ" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3807398/edit_form?textarea_id=gistcomment-3807398-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/xushimin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/xushimin"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/14247567?s=80&v=4" width="40" height="40" alt="@xushimin" /></a> </div> <div id="gistcomment-3981102" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3981102-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/xushimin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/xushimin">xushimin</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=3981102#gistcomment-3981102" id="gistcomment-3981102-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2021-12-02T06:04:44Z" class="no-wrap">Dec 2, 2021</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/14247567/144366739-2d72aced-d7ba-4474-928e-966ede444b94.png"><img src="https://user-images.githubusercontent.com/14247567/144366739-2d72aced-d7ba-4474-928e-966ede444b94.png" alt="image" style="max-width: 100%;"></a><br> <a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/14247567/144366864-70643770-d634-4f7c-a387-ef58f97b88ca.png"><img src="https://user-images.githubusercontent.com/14247567/144366864-70643770-d634-4f7c-a387-ef58f97b88ca.png" alt="image" style="max-width: 100%;"></a></p> <p dir="auto">Profiling not support in a development of React v16.13.0</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3981102" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="mmXAt_md8VEdya2lxMs3Srzr36RRZ05ik-FI9o2mkqHN_9ZdhZXFP05EAfaPW_mpa_bink_JJUTkeBuN_tcfgw" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3981102/edit_form?textarea_id=gistcomment-3981102-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/bvaughn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/bvaughn"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/29597?s=80&v=4" width="40" height="40" alt="@bvaughn" /></a> </div> <div id="gistcomment-3983016" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-3983016-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> <span aria-label="This user is the author of this ." data-view-component="true" class="tooltipped tooltipped-n"> <span data-view-component="true" class="Label ml-1">Author</span> </span> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/bvaughn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/bvaughn">bvaughn</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=3983016#gistcomment-3983016" id="gistcomment-3983016-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2021-12-03T15:36:34Z" class="no-wrap">Dec 3, 2021</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/xushimin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/xushimin">@xushimin</a> Not sure what you're seeing there but it's most likely a transient error. Close DevTools, reload the page and reopen.</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3983016" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="JWRV_BNBfXcR1UMzbPYdDCSUaRu_gEtBCRhtFpg3mbPNqNiPp6VcwxUUH7znHzsdU-3mUGkX3h9a2ULIaVm9zQ" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/3983016/edit_form?textarea_id=gistcomment-3983016-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/LongLiveCHIEF/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/LongLiveCHIEF"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/3282305?s=80&v=4" width="40" height="40" alt="@LongLiveCHIEF" /></a> </div> <div id="gistcomment-4078317" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-4078317-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/LongLiveCHIEF/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/LongLiveCHIEF">LongLiveCHIEF</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=4078317#gistcomment-4078317" id="gistcomment-4078317-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2022-02-25T19:45:20Z" class="no-wrap">Feb 25, 2022</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">So how do we enabling profiling if we're <em>not</em> using CRA?</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4078317" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="WpKREZeYC4PBUG_8HYnq2dp29m984U4aVaHmAL52dnHt3_3rKBDHJuLALDygXjq86LwAje7SYbYdwqPUgoBRXg" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4078317/edit_form?textarea_id=gistcomment-4078317-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/haase1020/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/haase1020"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/58481829?s=80&v=4" width="40" height="40" alt="@haase1020" /></a> </div> <div id="gistcomment-4086331" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-4086331-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/haase1020/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/haase1020">haase1020</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=4086331#gistcomment-4086331" id="gistcomment-4086331-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2022-03-05T08:50:49Z" class="no-wrap">Mar 5, 2022</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">I have the same question as <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/LongLiveCHIEF/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/LongLiveCHIEF">@LongLiveCHIEF</a> . I am not using CRA but would like to enable profiling to troubleshoot errors that are occurring in the production build only.</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4086331" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="V5sc6OkSquS68HUJrSh3fhjfUbFRv4PONRRTpg1k5TjTfAkpAfPaOhAWHJARKWJGCPpe9Gn84t5SKS3S_fLrDA" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4086331/edit_form?textarea_id=gistcomment-4086331-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/M1M0G/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/M1M0G"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/48203270?s=80&v=4" width="40" height="40" alt="@M1M0G" /></a> </div> <div id="gistcomment-4112023" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-4112023-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/M1M0G/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/M1M0G">M1M0G</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=4112023#gistcomment-4112023" id="gistcomment-4112023-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2022-03-27T10:13:27Z" class="no-wrap">Mar 27, 2022</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/GC_lADOAt-GBtoAIDI1ZTYyMzNhZWIxYjRmMGNkYjhkODM2NmU1NGEzOTc3zgA-vpc" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">I have the same problem, when using non-СRA, changing the alias in the webpack config has no effect</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4112023" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="u-hGX7k7Gsygxc_pkLKwpJO1HuEy8HfeOFQgSXQCnTk5G6wd_FwqBJEUfv0zMNk1mNzrLIFwoQQgIOS3Fmyp9Q" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4112023/edit_form?textarea_id=gistcomment-4112023-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/tonyhallett/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/tonyhallett"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/11292998?s=80&v=4" width="40" height="40" alt="@tonyhallett" /></a> </div> <div id="gistcomment-4166747" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-4166747-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/tonyhallett/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/tonyhallett">tonyhallett</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=4166747#gistcomment-4166747" id="gistcomment-4166747-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2022-05-14T11:44:01Z" class="no-wrap">May 14, 2022</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/GC_lADOAKxRRtoAIDI1ZTYyMzNhZWIxYjRmMGNkYjhkODM2NmU1NGEzOTc3zgA_lFs" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">for those using Parcel you can put the alias in package.json</p> <pre class="notranslate"><code class="notranslate">"alias": { "react-dom": "react-dom/profiling", "scheduler/tracing":"scheduler/tracing-profiling" } </code></pre> <p dir="auto">for those wanting it to be applied conditionally with an environment variable the typescript code below can be used for a custom Resolver.</p> <p dir="auto">ReactProfilingAliasResolver.ts</p> <pre class="notranslate"><code class="notranslate">import {Resolver} from '@parcel/plugin'; import {PluginLogger, Dependency} from '@parcel/types' import NodeResolver, { FilePath, Options, Environment, ResolverContext, Nullable, ResolveResult } from '@parcel/node-resolver-core'; const reactDom = 'react-dom'; const schedulerTracing = 'scheduler/tracing'; const logOrigin = 'ReactProfilingAliasResolver'; function createDiagnosticWithOrigin(message:string){ return { message, origin:logOrigin } } const shouldLog = false function log(logger:PluginLogger,resolved:Nullable<ResolveResult>, dependency:Dependency){ if (shouldLog) { logger.log(createDiagnosticWithOrigin(`parent - ${dependency.resolveFrom!}`)); if(resolved){ logger.log(createDiagnosticWithOrigin(`resolved ${dependency.specifier} ${JSON.stringify(resolved)}`)); }else{ logger.log(createDiagnosticWithOrigin(`failed to resolve ${dependency.specifier}`)); } } } function shouldProfile(specifier:string){ return process.env.REACT_PROFILING !== undefined && (specifier === reactDom || specifier === schedulerTracing); } export default new Resolver({ async resolve(arg) { const {specifier, dependency,options} = arg; const logger = arg.logger; if (shouldProfile(specifier)){ const resolver = new ReactAliasingNodeResolver({ fs: options.inputFS, projectRoot: options.projectRoot, // Extensions are always required in URL dependencies. extensions: dependency.specifierType === 'commonjs' || dependency.specifierType === 'esm' ? ['ts', 'tsx', 'js', 'jsx', 'json'] : [], mainFields: ['source', 'browser', 'module', 'main'], packageManager: options.shouldAutoInstall ? options.packageManager : undefined, logger, }); const resolved = await resolver.resolve({ filename: specifier, specifierType: dependency.specifierType, parent: dependency.resolveFrom, env: dependency.env, sourcePath: dependency.sourcePath, loc: dependency.loc, }); log(logger,resolved, dependency); return resolved; } return null; } }); class ReactAliasingNodeResolver extends NodeResolver{ constructor(opts:Options){ super(opts) } async loadAlias(_filename:string, _sourceFile:FilePath, _env:Environment,_ctx:ResolverContext): Promise<Nullable<NodeResolver.ResolvedAlias>> { const resolved = filename == reactDom ? 'react-dom/profiling' : 'scheduler/tracing-profiling'; return { type:'file', sourcePath:'', // not used resolved } } } </code></pre> <p dir="auto">node-resolver-core.ts</p> <pre class="notranslate"><code class="notranslate">declare module '@parcel/node-resolver-core' { import type {FileSystem} from '@parcel/fs'; import type {PackageManager} from '@parcel/package-manager'; import type {PluginLogger, ResolveResult} from '@parcel/types'; export type {ResolveResult} from '@parcel/types'; export type Nullable<T> = T | undefined | null; export type FilePath = string; // to type if required export type URLSearchParams = unknown export type ResolverContext = unknown export type Environment = unknown export type Module = { moduleName?: string, subPath?: Nullable<string>, moduleDir?: FilePath, filePath?: FilePath, code?: string, query?: URLSearchParams, }; export type Options = { fs: FileSystem, projectRoot: FilePath, extensions: Array<string>, mainFields: Array<string>, packageManager?: PackageManager, logger?: PluginLogger, }; export type ResolveArg = { filename:string, parent, specifierType, env, sourcePath, loc, } export type ResolvedAlias = { type: 'file' | 'global', sourcePath: FilePath, resolved: string, }; class NodeResolver { projectRoot: FilePath constructor(opts: Options) {} resolve(resolveArg:ResolveArg):Promise<Nullable<ResolveResult>> loadAlias(filename:string, sourceFile:FilePath, env:Environment,ctx:ResolverContext):Promise<Nullable<ResolvedAlias>> findNodeModulePath(filename:string,sourceFile:FilePath,ctx:ResolverContext):Module | null | undefined } export = NodeResolver } </code></pre> <ol dir="auto"> <li>Create a package for the resolver ( compile to js )</li> <li>Include in .parcelrc</li> </ol> <pre class="notranslate"><code class="notranslate">{ "extends": "@parcel/config-default", "resolvers": ["parcel-resolver-react-profiling", "..."] } </code></pre> <p dir="auto">npm script usage ( windows ) - see build-profile</p> <pre class="notranslate"><code class="notranslate">{ "scripts": { "start": "parcel src/html/debug/parcel-dev.index.html", "build-prod": "parcel build src/html/build/index.html --dist-dir dist/build", "build-profile": "set REACT_PROFILING=true&& parcel build src/html/profiling/index.html --dist-dir dist/debug" } } </code></pre> <p dir="auto">Note that as there is currently no invalidateOnEnvChange for resolvers the result will be cached and re-used even if you don't set the environment variable.<br> This is not an issue when you always want to always profile a specific production build that has a different cache key ( entries and mode ). In the example above build-prod and build-profile have a different entry. ( build-profile index.html has a script for standalone react-devtools to enable profiling of a WebView2 ).<br> If it is an issue then <code class="notranslate">no-cache</code>.</p> <p dir="auto">At some point I will add the resolver to npm, but in the meantime here it is.</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4166747" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="64EZOr74tqbFTF9yPVCAdCt_0dgkeWLfS1gmSNjnQppnhuD25uE5wK2h3hSggCKg3rQ5lTE4QzRxaTBnXSUC2w" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4166747/edit_form?textarea_id=gistcomment-4166747-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/Tymek/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/Tymek"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/2625371?s=80&v=4" width="40" height="40" alt="@Tymek" /></a> </div> <div id="gistcomment-4192069" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-4192069-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/Tymek/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/Tymek">Tymek</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=4192069#gistcomment-4192069" id="gistcomment-4192069-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2022-06-07T13:47:35Z" class="no-wrap">Jun 7, 2022</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">in <strong>Vite</strong> putting this in <code class="notranslate">vite.config.ts</code> worked:</p> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-s1">defineConfig</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c">// ...</span> <span class="pl-c1">resolve</span>: <span class="pl-kos">{</span> <span class="pl-c1">alias</span>: <span class="pl-kos">{</span> <span class="pl-s">'react-dom'</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span> <span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'node_modules/react-dom/profiling'</span> <span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s">'scheduler/tracing'</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span> <span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'node_modules/scheduler/tracing-profiling'</span> <span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c">// ...</span></pre></div> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4192069" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="4rHv6yJd3yv9WUhJJRu-Yt-F9bQErqTKOrniy1Sn4MTOgySBIM_84bnQcNh6BoGe2-5D3_MNeQtt30EBX6RNSQ" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4192069/edit_form?textarea_id=gistcomment-4192069-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/louiszawadzki/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/louiszawadzki"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/8973379?s=80&v=4" width="40" height="40" alt="@louiszawadzki" /></a> </div> <div id="gistcomment-4315603" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-4315603-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/louiszawadzki/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/louiszawadzki">louiszawadzki</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=4315603#gistcomment-4315603" id="gistcomment-4315603-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2022-09-26T11:03:32Z" class="no-wrap">Sep 26, 2022</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/GC_lADOAIjsQ9oAIDI1ZTYyMzNhZWIxYjRmMGNkYjhkODM2NmU1NGEzOTc3zgBB2dM" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">For versions of React Native equal to or greater than <code class="notranslate">0.61</code>, I improved @lukaszchopin's solution so you don't have to use <code class="notranslate">patch-package</code>. You can use this configuration in your <code class="notranslate">babel.config.js</code>:</p> <pre class="notranslate"><code class="notranslate">const path = require('path'); module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ [ 'module-resolver', { root: ['./'], resolvePath(sourcePath) { if (sourcePath === '../implementations/ReactNativeRenderer-prod') { return path.resolve( __dirname, './node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-profiling', ); } return undefined; }, }, ], ], }; </code></pre> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4315603" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="2ELBkX-eKEw3ziM3ltcaULzQnkkKLohjkHQlmXDWsG3x1iYKh3MrYCh68w9RWCG9_Pgz2sggHqcmZWkoY-i1Ug" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4315603/edit_form?textarea_id=gistcomment-4315603-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/in-op/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/in-op"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/13769816?s=80&v=4" width="40" height="40" alt="@in-op" /></a> </div> <div id="gistcomment-4409927" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-4409927-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/in-op/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/in-op">in-op</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=4409927#gistcomment-4409927" id="gistcomment-4409927-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2022-12-21T16:12:14Z" class="no-wrap">Dec 21, 2022</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/GC_lADOANIcWNoAIDI1ZTYyMzNhZWIxYjRmMGNkYjhkODM2NmU1NGEzOTc3zgBDSkc" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/bvaughn/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/bvaughn">@bvaughn</a>, you still need the scheduler aliases, at least when using webpack bundling alone, which may be the source of some confusion here for people having trouble getting it working. I tested with the exact versions of react-dom and scheduler, and if you skip the scheduler alias you get this error:</p> <pre class="notranslate"><code class="notranslate">It is not supported to run the profiling version of a renderer (for example, `react-dom/profiling`) without also replacing the `scheduler/tracing` module with `scheduler/tracing-profiling`. Your bundler might have a setting for aliasing both modules. Learn more at https://reactjs.org/link/profiling </code></pre> <p dir="auto">Technically I got a minified error that linked <a href="https://reactjs.org/docs/error-decoder.html/?invariant=302" rel="nofollow">here</a>, since it's a production build.</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4409927" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="X8oVNfupuVj1BtZnjWdkxMZ04byOJHRYqseA8tzQnlu8fhk9XA2NoFhUq0bqwsRpkewyRaFlq67LBqRyC6T9Qw" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4409927/edit_form?textarea_id=gistcomment-4409927-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/goosewobbler/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/goosewobbler"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/432005?s=80&v=4" width="40" height="40" alt="@goosewobbler" /></a> </div> <div id="gistcomment-4417136" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-4417136-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/goosewobbler/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/goosewobbler">goosewobbler</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=4417136#gistcomment-4417136" id="gistcomment-4417136-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2022-12-29T15:15:14Z" class="no-wrap">Dec 29, 2022</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tonyhallett/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tonyhallett">@tonyhallett</a> Your code didn't work but I made a module which does fix this for Parcel. Turned out to be a lot less code than I expected:</p> <p dir="auto"><a href="https://github.com/goosewobbler/parcel-resolver-react-profiling">https://github.com/goosewobbler/parcel-resolver-react-profiling</a></p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4417136" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="zPTghRCn-nlOmc1oeMdCzlxxwfi3oVm1zybCUqJq4Tbuuz8vLloOHfQTKjecGWxyF2S-MGjVpHX_5KDd-puOQQ" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4417136/edit_form?textarea_id=gistcomment-4417136-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/athulantony95/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/athulantony95"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/154115716?s=80&v=4" width="40" height="40" alt="@athulantony95" /></a> </div> <div id="gistcomment-4872524" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-4872524-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/athulantony95/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/athulantony95">athulantony95</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=4872524#gistcomment-4872524" id="gistcomment-4872524-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2024-02-03T13:10:45Z" class="no-wrap">Feb 3, 2024</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">I am getting the below error for your solution <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/louiszawadzki/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/louiszawadzki">@louiszawadzki</a></p> <pre class="notranslate"><code class="notranslate">error: index.js: Cannot find module 'babel-plugin-module-resolver' Require stack: - app/root/node_modules/metro-react-native-babel-transformer/node_modules/@babel/core/lib/config/files/plugins.js - app/root/node_modules/metro-react-native-babel-transformer/node_modules/@babel/core/lib/config/files/index.js - app/root/node_modules/metro-react-native-babel-transformer/node_modules/@babel/core/lib/index.js - app/root/node_modules/metro-react-native-babel-transformer/src/index.js - app/root/node_modules/metro-transform-worker/src/index.js - app/root/node_modules/metro/src/DeltaBundler/Worker.js - app/root/node_modules/jest-worker/build/workers/processChild.js </code></pre> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4872524" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="u9D-rwgan0qDX3O34_-yxMg2nIwEWz8L6PDtppd2ZyMXKUeLGlpCR8UUJpCgsDtGiNrJjyhKUxHuaL_tGW_IRQ" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4872524/edit_form?textarea_id=gistcomment-4872524-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/ahayes91/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/ahayes91"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/8914051?s=80&v=4" width="40" height="40" alt="@ahayes91" /></a> </div> <div id="gistcomment-4981758" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-4981758-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/ahayes91/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/ahayes91">ahayes91</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=4981758#gistcomment-4981758" id="gistcomment-4981758-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2024-03-11T11:18:07Z" class="no-wrap">Mar 11, 2024</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Tymek/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Tymek">@Tymek</a> thanks for the vite snippet! Wondering if you ever saw errors like this during your vite build:</p> <pre class="notranslate"><code class="notranslate">ERROR: [vite:load-fallback] Could not load /Users/aislinn.hayes/code/monorepo/apps/app1/node_modules/react-dom/profiling/test-utils (imported by ../../node_modules/@testing-library/react/dist/@testing-library/react.esm.js): ENOENT: no such file or directory, open '/Users/aislinn.hayes/code/monorepo/apps/app1/node_modules/react-dom/profiling/test-utils' </code></pre> <pre class="notranslate"><code class="notranslate">✘ [ERROR] Could not read from file: /Users/aislinn.hayes/code/monorepo/apps/app1/node_modules/react-dom/profiling ../../node_modules/@testing-library/react/dist/@testing-library/react.esm.js:3:21: 3 │ import ReactDOM from 'react-dom'; ╵ ~~~~~~~~~~~ ✘ [ERROR] Could not read from file: /Users/aislinn.hayes/code/monorepo/apps/app1/node_modules/react-dom/profiling/test-utils ../../node_modules/@testing-library/react/dist/@testing-library/react.esm.js:1:27: 1 │ import * as testUtils from 'react-dom/test-utils'; ╵ ~~~~~~~~~~~~~~~~~~~~~~ ✘ [ERROR] Could not read from file: /Users/aislinn.hayes/code/monorepo/apps/app1/node_modules/react-dom/profiling/client ../../node_modules/@testing-library/react/dist/@testing-library/react.esm.js:4:32: 4 │ import * as ReactDOMClient from 'react-dom/client'; </code></pre> <p dir="auto">I don't know why <code class="notranslate">@testing-library/react</code> would even be trying to build during our production build 🤨<br> We exclude any files that reference that package from our tsconfig.json AFAIK.<br> For extra complexity, I am using vite in a monorepo as well 😇</p> <pre class="notranslate"><code class="notranslate"> "react": "18.2.0", "react-dom": "18.2.0", "vite": "5.1.4", </code></pre> <p dir="auto">Any pointers on where to look to try to debug this one? Thank you!</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4981758" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="CKQmKr-QXDgQQ0tVl4gEG0XcNWbR9CRchM62Y2TICtqBgvkmIGJXCYa956qIB9CuHsuPwGDDKlkKTBceCIgSVg" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4981758/edit_form?textarea_id=gistcomment-4981758-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/zeorin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/zeorin"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/1187078?s=80&v=4" width="40" height="40" alt="@zeorin" /></a> </div> <div id="gistcomment-4989465" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-4989465-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/zeorin/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/zeorin">zeorin</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=4989465#gistcomment-4989465" id="gistcomment-4989465-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2024-03-15T15:04:28Z" class="no-wrap">Mar 15, 2024</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-kos">{</span> <span class="pl-c1">resolve</span>: <span class="pl-kos">{</span> <span class="pl-c1">alias</span>: <span class="pl-kos">[</span> <span class="pl-kos">{</span> <span class="pl-c1">find</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">^</span><span class="pl-s">r</span><span class="pl-s">e</span><span class="pl-s">a</span><span class="pl-s">c</span><span class="pl-s">t</span><span class="pl-s">-</span><span class="pl-s">d</span><span class="pl-s">o</span><span class="pl-s">m</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-c1">replacement</span>: <span class="pl-s">'react-dom/profiling'</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">find</span>: <span class="pl-s">'scheduler/tracing'</span><span class="pl-kos">,</span> <span class="pl-c1">replacement</span>: <span class="pl-s">'scheduler/tracing-profiling'</span> <span class="pl-kos">}</span> <span class="pl-kos">]</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span></pre></div> <p dir="auto">in <code class="notranslate">vite.config.js</code> did the trick for me.</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4989465" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="WsIW6DsY7A6lpxR2olsN_qU8uF2D0SfV7dAoD6NZ6gqSBZGYo-AsmIzptHLA4brwV7jwz9HjQdr0xJdMxbH6Kw" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/4989465/edit_form?textarea_id=gistcomment-4989465-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/ThenMorning/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/ThenMorning"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/22017926?s=80&v=4" width="40" height="40" alt="@ThenMorning" /></a> </div> <div id="gistcomment-5086586" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-5086586-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/ThenMorning/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/ThenMorning">ThenMorning</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=5086586#gistcomment-5086586" id="gistcomment-5086586-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2024-06-12T12:58:43Z" class="no-wrap">Jun 12, 2024</relative-time></a> <span class="js-comment-edit-history"> <span class="d-inline-block color-fg-muted">•</span> <details class="details-overlay details-reset d-inline-block dropdown hx_dropdown-fullscreen"> <summary class="btn-link no-underline color-fg-muted js-notice"> <div class="position-relative"> <span> edited </span> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down v-align-middle"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </div> </summary> <details-menu class="dropdown-menu dropdown-menu-s width-auto py-0 js-comment-edit-history-menu" style="max-width: 352px; z-index: 99;" src="/user_content_edits/show_edit_history_log/GC_lADOAU_3htoAIDI1ZTYyMzNhZWIxYjRmMGNkYjhkODM2NmU1NGEzOTc3zgBNnXo" preload > <include-fragment class="my-3" style="min-width: 100px;" aria-label="Loading..."> <span data-view-component="true"> <svg style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" aria-hidden="true" data-view-component="true" class="mx-auto d-block anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg> <span class="sr-only">Loading</span> </span> </include-fragment> </details-menu> </details> </span> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <p dir="auto">I am using react-devtools-core to implement a custom backend for debugging a custom renderer similar to React Native. During the debugging process, React is using the development build version:<br> <code class="notranslate">"react": "18.2.0", "react-devtools-core": "4.28.0", "react-reconciler": "0.29.0"</code><br> However, I have found that in react-devtools-core, the recordProfilingDurations method is not capturing accurate durations for the fiber nodes, and all durations are 0. Are there any additional steps required to record the render times (duration) accurately?</p> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/5086586" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="dD0FRTioqNurpT_XuZAIiTIDPCYa1GGNDZd4S-WquLdwFPrSAGeez65gi5403sq8xVjnbfBt0xiDtRfggWmrfA" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/5086586/edit_form?textarea_id=gistcomment-5086586-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <div class="TimelineItem d-block js-comment-container"> <div class="avatar-parent-child TimelineItem-avatar d-none d-md-block"> <a class="d-inline-block" data-hovercard-type="user" data-hovercard-url="/users/StepToTop/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/StepToTop"><img class=" avatar-user" src="https://avatars.githubusercontent.com/u/25970794?s=80&v=4" width="40" height="40" alt="@StepToTop" /></a> </div> <div id="gistcomment-5372958" class="timeline-comment-group js-minimizable-comment-group js-targetable-element my-0 comment previewable-edit js-task-list-container js-comment timeline-comment timeline-comment--caret ml-n3 js-minimize-container unminimized-comment"> <div class="timeline-comment-header clearfix d-flex" data-morpheus-enabled="false"> <div class="timeline-comment-actions flex-shrink-0 d-flex flex-items-center"> <details class="details-overlay details-reset position-relative d-inline-block"> <summary data-view-component="true" class="timeline-comment-action Link--secondary Button--link Button--medium Button"> <span class="Button-content"> <span class="Button-label"><svg aria-label="Show options" role="img" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg></span> </span> </summary> <details-menu class="dropdown-menu dropdown-menu-sw show-more-popover color-fg-default" style="width:185px" src="" preload > <span data-view-component="true"> <clipboard-copy aria-label="Copy link" for="gistcomment-5372958-permalink" role="menuitem" data-view-component="true" class="dropdown-item btn-link"> Copy link </clipboard-copy> <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div> </span> </details-menu> </details> </div> <div class="d-none d-sm-flex"> </div> <h3 class="f5 text-normal" style="flex: 1 1 auto"> <div> <strong> <a class="author Link--primary text-bold css-overflow-wrap-anywhere " data-hovercard-type="user" data-hovercard-url="/users/StepToTop/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/StepToTop">StepToTop</a> </strong> commented <a href="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=5372958#gistcomment-5372958" id="gistcomment-5372958-permalink" class="Link--secondary js-timestamp"><relative-time datetime="2025-01-04T10:07:09Z" class="no-wrap">Jan 4, 2025</relative-time></a> </div> </h3> </div> <div class="edit-comment-hide"> <task-lists disabled sortable> <div class="comment-body markdown-body js-comment-body soft-wrap user-select-contain d-block"> <blockquote> <p dir="auto">For versions of React Native equal to or greater than <code class="notranslate">0.61</code>, I improved @lukaszchopin's solution so you don't have to use <code class="notranslate">patch-package</code>. You can use this configuration in your <code class="notranslate">babel.config.js</code>:</p> <pre class="notranslate"><code class="notranslate">const path = require('path'); module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ [ 'module-resolver', { root: ['./'], resolvePath(sourcePath) { if (sourcePath === '../implementations/ReactNativeRenderer-prod') { return path.resolve( __dirname, './node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-profiling', ); } return undefined; }, }, ], ], }; </code></pre> </blockquote> <p dir="auto">For my side, there is an existing module-resolver, so I need to config a same <code class="notranslate">module-resolver</code> with alias to meet the requirement.</p> <div class="highlight highlight-source-js" dir="auto"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">presets</span>: <span class="pl-kos">[</span><span class="pl-s">'module:metro-react-native-babel-preset'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span> <span class="pl-kos">[</span> <span class="pl-s">'module-resolver'</span><span class="pl-kos">,</span> ... <span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">[</span> <span class="pl-s">'module-resolver'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">root</span>: <span class="pl-kos">[</span><span class="pl-s">'./node_modules'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-en">resolvePath</span><span class="pl-kos">(</span><span class="pl-s1">sourcePath</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">sourcePath</span> <span class="pl-c1">===</span> <span class="pl-s">'../implementations/ReactNativeRenderer-prod'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-k">return</span> <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span> <span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'./node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-profiling'</span><span class="pl-kos">,</span> <span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> <span class="pl-k">return</span> <span class="pl-c1">undefined</span><span class="pl-kos">;</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s">'only-for-profiler'</span> <span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div> </div> </task-lists> </div> <!-- '"` --><!-- </textarea></xmp> --></option></form><form class="js-comment-update" data-type="json" data-turbo="false" action="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/5372958" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="put" autocomplete="off" /><input type="hidden" name="authenticity_token" value="uJo2p7LuZJFb62TCbNpUHZzT-Tiq2JRXO18fQBRGJ278zfkXWNXsJnToApL_sdIGIodSMKBFfYoerj4WOvFomg" autocomplete="off" /> <include-fragment loading="lazy" src="/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977/comments/5372958/edit_form?textarea_id=gistcomment-5372958-body&comment_context=discussion" class="previewable-comment-form js-comment-edit-form-deferred-include-fragment" > <p class="text-center mt-3" data-hide-on-error> <span data-view-component="true"> <svg aria-label="Loading..." style="box-sizing: content-box; color: var(--color-icon-primary);" width="32" height="32" viewBox="0 0 16 16" fill="none" role="img" data-view-component="true" class="anim-rotate"> <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" /> <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" /> </svg></span> </p> <p class="ml-1 mb-2 mt-2" data-show-on-error hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> Sorry, something went wrong. </p> </include-fragment> </form> </div> </div> <!-- Rendered timeline since 2025-01-04 02:07:09 --> <div id="partial-timeline-marker" class="js-timeline-marker js-updatable-content" data-last-modified="Sat, 04 Jan 2025 10:07:09 GMT" > </div> </div> <div class="discussion-timeline-actions"> <div data-view-component="true" class="flash flash-warn mt-3"> <a rel="nofollow" class="btn btn-primary" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"signed out comment","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="a7261b760e940a12253723946c2c763e1084a63c6dd0bedde289acee2a9a9773" href="/join?source=comment-gist">Sign up for free</a> <strong>to join this conversation on GitHub</strong>. Already have an account? <a rel="nofollow" class="Link--inTextBlock" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"signed out comment","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977","user_id":null}}" data-hydro-click-hmac="929a7c672e0bf96246afaf9241f4549d8e92d60b1cfeff5b86ce5f60cd27bba8" data-test-selector="comments-sign-in-link" href="/login?return_to=https%3A%2F%2Fgist.github.com%2Fbvaughn%2F25e6233aeb1b4f0cdb8d8366e54a3977">Sign in to comment</a> </div> </div> </div> </div> </div> </div> </div><!-- /.container --> </main> </div> </div> <footer class="footer pt-8 pb-6 f6 color-fg-muted p-responsive" role="contentinfo" > <h2 class='sr-only'>Footer</h2> <div class="d-flex flex-justify-center flex-items-center flex-column-reverse flex-lg-row flex-wrap flex-lg-nowrap"> <div class="d-flex flex-items-center flex-shrink-0 mx-2"> <a aria-label="Homepage" title="GitHub" class="footer-octicon mr-2" href="https://github.com"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path> </svg> </a> <span> © 2025 GitHub, Inc. </span> </div> <nav aria-label="Footer"> <h3 class="sr-only" id="sr-footer-heading">Footer navigation</h3> <ul class="list-style-none d-flex flex-justify-center flex-wrap mb-2 mb-lg-0" aria-labelledby="sr-footer-heading"> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to Terms","label":"text:terms"}" href="https://docs.github.com/site-policy/github-terms/github-terms-of-service" data-view-component="true" class="Link--secondary Link">Terms</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to privacy","label":"text:privacy"}" href="https://docs.github.com/site-policy/privacy-policies/github-privacy-statement" data-view-component="true" class="Link--secondary Link">Privacy</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to security","label":"text:security"}" href="https://github.com/security" data-view-component="true" class="Link--secondary Link">Security</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to status","label":"text:status"}" href="https://www.githubstatus.com/" data-view-component="true" class="Link--secondary Link">Status</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to docs","label":"text:docs"}" href="https://docs.github.com/" data-view-component="true" class="Link--secondary Link">Docs</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to contact","label":"text:contact"}" href="https://support.github.com?tags=dotcom-footer" data-view-component="true" class="Link--secondary Link">Contact</a> </li> <li class="mx-2" > <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"cookies","context":"subfooter","tag":"link","label":"cookies_link_subfooter_footer"}" > Manage cookies </button> </cookie-consent-link> </li> <li class="mx-2"> <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"dont_share_info","context":"subfooter","tag":"link","label":"dont_share_info_link_subfooter_footer"}" > Do not share my personal information </button> </cookie-consent-link> </li> </ul> </nav> </div> </footer> <ghcc-consent id="ghcc" class="position-fixed bottom-0 left-0" style="z-index: 999999" data-initial-cookie-consent-allowed="" data-cookie-consent-required="false"></ghcc-consent> <div id="ajax-error-message" class="ajax-error-message flash flash-error" hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <button type="button" class="flash-close js-ajax-error-dismiss" aria-label="Dismiss error"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> You can’t perform that action at this time. </div> <template id="site-details-dialog"> <details class="details-reset details-overlay details-overlay-dark lh-default color-fg-default hx_rsm" open> <summary role="button" aria-label="Close dialog"></summary> <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast hx_rsm-dialog hx_rsm-modal"> <button class="Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0" type="button" aria-label="Close dialog" data-close-dialog> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div class="octocat-spinner my-6 js-details-dialog-spinner"></div> </details-dialog> </details> </template> <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;"> <div class="Popover-message Popover-message--bottom-left Popover-message--large Box color-shadow-large" style="width:360px;"> </div> </div> <template id="snippet-clipboard-copy-button"> <div class="zeroclipboard-container position-absolute right-0 top-0"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon m-2"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none m-2"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> <template id="snippet-clipboard-copy-button-unpositioned"> <div class="zeroclipboard-container"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn btn-invisible js-clipboard-copy m-2 p-0 d-flex flex-justify-center flex-items-center" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> </div> <div id="js-global-screen-reader-notice" class="sr-only mt-n1" aria-live="polite" aria-atomic="true" ></div> <div id="js-global-screen-reader-notice-assertive" class="sr-only mt-n1" aria-live="assertive" aria-atomic="true"></div> </body> </html>