Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix: don't record signatures of local hooks, fixes #1412 (#1413)
  • Loading branch information
theKashey committed Jan 22, 2020
1 parent 9ab2571 commit c159844
Show file tree
Hide file tree
Showing 3 changed files with 225 additions and 0 deletions.
1 change: 1 addition & 0 deletions src/fresh/babel.js
Expand Up @@ -211,6 +211,7 @@ export default function (babel) {
key: fnHookCalls.map(call => call.name + '{' + call.key + '}').join('\n'),
customHooks: fnHookCalls
.filter(call => !isBuiltinHook(call.name))
.filter(call => scope.parent.hasBinding(call.name))
.map(call => t.cloneDeep(call.callee)),
};
}
Expand Down
36 changes: 36 additions & 0 deletions test/__babel_fixtures__/local-hooks.js
@@ -0,0 +1,36 @@
import {useState} from "react";

function Component1() {
function useRippleHandler() {}
useRippleHandler();
useRippleHandler();
}

function Component2() {
const useRippleHandler = () => {};
useRippleHandler();
useRippleHandler();
}

function Component3() {
const useRippleHandler = function () {};
useRippleHandler();
useRippleHandler();
}

const useInnerHook = ({useHookFromProps}) => {
const useHookBase = () => useState();
const useHook = () => useState(useHookFromProps(useHookBase()));
useHookFromProps();
{
// sub scope
useHook();
}
};

const OnlyThisOneUsesExternalHook = () => {
useInnerHook();
useState();
};

// check for "return ["
188 changes: 188 additions & 0 deletions test/__snapshots__/babel.test.js.snap
Expand Up @@ -1342,6 +1342,105 @@ function spread() {
})();"
`;

exports[`babel Targetting "es2015" tags potential React components local hooks.js 1`] = `
"\\"use strict\\";
var _react = require(\\"react\\");
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
function Component1() {
function useRippleHandler() {}
useRippleHandler();
useRippleHandler();
}
__signature__(Component1, \\"useRippleHandler{}\\\\nuseRippleHandler{}\\");
function Component2() {
var useRippleHandler = function useRippleHandler() {};
useRippleHandler();
useRippleHandler();
}
__signature__(Component2, \\"useRippleHandler{}\\\\nuseRippleHandler{}\\");
function Component3() {
var useRippleHandler = function useRippleHandler() {};
useRippleHandler();
useRippleHandler();
}
__signature__(Component3, \\"useRippleHandler{}\\\\nuseRippleHandler{}\\");
var useInnerHook = function useInnerHook(_ref) {
var useHookFromProps = _ref.useHookFromProps;
var useHookBase = function useHookBase() {
return (0, _react.useState)();
};
__signature__(useHookBase, \\"useState{}\\");
var useHook = function useHook() {
return (0, _react.useState)(useHookFromProps(useHookBase()));
};
__signature__(useHook, \\"useState{(useHookFromProps(useHookBase()))}\\\\nuseHookFromProps{}\\\\nuseHookBase{}\\", function () {
return [useHookFromProps, useHookBase];
});
useHookFromProps();
{
// sub scope
useHook();
}
};
__signature__(useInnerHook, \\"useHookFromProps{}\\\\nuseHook{}\\");
var OnlyThisOneUsesExternalHook = function OnlyThisOneUsesExternalHook() {
useInnerHook();
(0, _react.useState)();
};
// check for \\"return [\\"
__signature__(OnlyThisOneUsesExternalHook, \\"useInnerHook{}\\\\nuseState{}\\", function () {
return [useInnerHook];
});
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Component1, \\"Component1\\", __FILENAME__);
reactHotLoader.register(Component2, \\"Component2\\", __FILENAME__);
reactHotLoader.register(Component3, \\"Component3\\", __FILENAME__);
reactHotLoader.register(useInnerHook, \\"useInnerHook\\", __FILENAME__);
reactHotLoader.register(OnlyThisOneUsesExternalHook, \\"OnlyThisOneUsesExternalHook\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;

exports[`babel Targetting "es2015" tags potential React components name clash.js 1`] = `
"\\"use strict\\";
Expand Down Expand Up @@ -2442,6 +2541,95 @@ function spread(...args) {
})();"
`;
exports[`babel Targetting "modern" tags potential React components local hooks.js 1`] = `
"\\"use strict\\";
var _react = require(\\"react\\");
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
return a;
};
function Component1() {
function useRippleHandler() {}
useRippleHandler();
useRippleHandler();
}
__signature__(Component1, \\"useRippleHandler{}\\\\nuseRippleHandler{}\\");
function Component2() {
const useRippleHandler = () => {};
useRippleHandler();
useRippleHandler();
}
__signature__(Component2, \\"useRippleHandler{}\\\\nuseRippleHandler{}\\");
function Component3() {
const useRippleHandler = function () {};
useRippleHandler();
useRippleHandler();
}
__signature__(Component3, \\"useRippleHandler{}\\\\nuseRippleHandler{}\\");
const useInnerHook = ({ useHookFromProps }) => {
const useHookBase = () => (0, _react.useState)();
__signature__(useHookBase, \\"useState{}\\");
const useHook = () => (0, _react.useState)(useHookFromProps(useHookBase()));
__signature__(useHook, \\"useState{(useHookFromProps(useHookBase()))}\\\\nuseHookFromProps{}\\\\nuseHookBase{}\\", () => [useHookFromProps, useHookBase]);
useHookFromProps();
{
// sub scope
useHook();
}
};
__signature__(useInnerHook, \\"useHookFromProps{}\\\\nuseHook{}\\");
const OnlyThisOneUsesExternalHook = () => {
useInnerHook();
(0, _react.useState)();
};
// check for \\"return [\\"
__signature__(OnlyThisOneUsesExternalHook, \\"useInnerHook{}\\\\nuseState{}\\", () => [useInnerHook]);
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(Component1, \\"Component1\\", __FILENAME__);
reactHotLoader.register(Component2, \\"Component2\\", __FILENAME__);
reactHotLoader.register(Component3, \\"Component3\\", __FILENAME__);
reactHotLoader.register(useInnerHook, \\"useInnerHook\\", __FILENAME__);
reactHotLoader.register(OnlyThisOneUsesExternalHook, \\"OnlyThisOneUsesExternalHook\\", __FILENAME__);
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();"
`;
exports[`babel Targetting "modern" tags potential React components name clash.js 1`] = `
"\\"use strict\\";
Expand Down

0 comments on commit c159844

Please sign in to comment.