') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); Basic React Hooks support (useImperativeHandle only) by JaredReisinger · Pull Request #454 · reactjs/react-docgen · GitHub
Skip to content

Basic React Hooks support (useImperativeHandle only) - #454

Closed
JaredReisinger wants to merge 2 commits into
reactjs:mainfrom
JaredReisinger:basic-hook-support
Closed

Basic React Hooks support (useImperativeHandle only)#454
JaredReisinger wants to merge 2 commits into
reactjs:mainfrom
JaredReisinger:basic-hook-support

Conversation

@JaredReisinger

@JaredReisingerJaredReisinger commented Jun 2, 2020

Copy link
Copy Markdown

Add detection of useImperativeHandle()-defined methods on components, including test cases and README documentation.

Additional background: I have a component I've just refactored from a class-based implementation to the new hooks-style implementation, and am publishing the documentation via Styleguidist. Somewhat to my surprise, the once-public methods on the class, which are now exposed via useImperativeHandle(), are no longer showing up in the generated documentation. Digging in, this appears to be the correct place to get those methods exposed.

Note that this does not address the desire to document custom hooks, nor does it find useCallback() handlers as those aren't exposed in an imperative way and thus shouldn't be considered a part of a component's public API.

Add detection of `useImperativeHandle()`-defined methods on components, including test cases and README documentation.
Signed-off-by: Jared Reisinger <jaredreisinger@hotmail.com>
Signed-off-by: Jared Reisinger <jaredreisinger@hotmail.com>
@JaredReisinger

Copy link
Copy Markdown
Author

@danez, has react-docgen gone into maintenance mode? I know that for the most part, there's not a lot to do since Javascript hasn't changed that much. That said, React added hooks in 16.8.0 (February 6, 2019), 19 months ago, so adding support for this isn't exactly "cutting edge" at this point.

I've tried to make sure the proposed change is well documented and tested... is there anything else I can do to make it easier or less-risky to merge?

@danezdanez left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Really sorry for the delay. It looks good to me, was just wondering about the note in the readme.

Comment threadREADME.md

If you are using React Hooks, react-docgen will now also find component methods defined directly via the `useImperativeHandle()` hook.

> **Note**: react-docgen will not be able to grab the type definition if the type is imported or declared in a different file.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Do you think this could work with the work that has been done in #464?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

I don't know.... I'll take a look at #464 and try to understand what it's doing. At first blush, it seems like yes, this might exactly solve that problem, I'll just need to understand what changes I'll need to make to use the new functionality (or whether things have changed in such a way that I don't have to do anything, and just get the new behavior for free 🤞 ).

@mfazekasmfazekas mentioned this pull request May 7, 2022
@github-actionsgithub-actionsBot locked as resolved and limited conversation to collaborators Nov 2, 2023
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@JaredReisinger@danez