Skip to content

Commit

Permalink
[React Refresh] support typescript namespace syntax
Browse files Browse the repository at this point in the history
  • Loading branch information
Wang Yilin committed Oct 26, 2021
1 parent 4298ddb commit f940f4b
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 14 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-import-meta": "^7.10.4",
"@babel/plugin-syntax-jsx": "^7.10.4",
"@babel/plugin-syntax-typescript": "^7.14.5",
"@babel/plugin-transform-arrow-functions": "^7.10.4",
"@babel/plugin-transform-async-to-generator": "^7.10.4",
"@babel/plugin-transform-block-scoped-functions": "^7.10.4",
Expand All @@ -35,7 +36,6 @@
"@babel/preset-flow": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@babel/traverse": "^7.11.0",
"web-streams-polyfill": "^3.1.1",
"abort-controller": "^3.0.0",
"art": "0.10.1",
"babel-eslint": "^10.0.3",
Expand Down Expand Up @@ -96,6 +96,7 @@
"through2": "^3.0.1",
"tmp": "^0.1.0",
"typescript": "^3.7.5",
"web-streams-polyfill": "^3.1.1",
"webpack": "^4.41.2",
"yargs": "^15.3.1"
},
Expand Down
40 changes: 27 additions & 13 deletions packages/react-refresh/src/ReactFreshBabelPlugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -478,6 +478,7 @@ export default function(babel, opts = {}) {
const node = path.node;
let programPath;
let insertAfterPath;
let modulePrefix = '';
switch (path.parent.type) {
case 'Program':
insertAfterPath = path;
Expand All @@ -486,6 +487,13 @@ export default function(babel, opts = {}) {
case 'ExportNamedDeclaration':
insertAfterPath = path.parentPath;
programPath = insertAfterPath.parentPath;
while (programPath.type !== 'Program') {
if (programPath.type === 'TSModuleDeclaration') {
// ExportNamedDeclaration can be nested in TSModules in typescript
modulePrefix = programPath.node.id.name + '$' + modulePrefix;
}
programPath = programPath.parentPath;
}
break;
case 'ExportDefaultDeclaration':
insertAfterPath = path.parentPath;
Expand All @@ -512,20 +520,17 @@ export default function(babel, opts = {}) {
seenForRegistration.add(node);
// Don't mutate the tree above this point.

const innerName = modulePrefix + inferredName;
// export function Named() {}
// function Named() {}
findInnerComponents(
inferredName,
path,
(persistentID, targetExpr) => {
const handle = createRegistration(programPath, persistentID);
insertAfterPath.insertAfter(
t.expressionStatement(
t.assignmentExpression('=', handle, targetExpr),
),
);
},
);
findInnerComponents(innerName, path, (persistentID, targetExpr) => {
const handle = createRegistration(programPath, persistentID);
insertAfterPath.insertAfter(
t.expressionStatement(
t.assignmentExpression('=', handle, targetExpr),
),
);
});
},
exit(path) {
const node = path.node;
Expand Down Expand Up @@ -679,6 +684,7 @@ export default function(babel, opts = {}) {
const node = path.node;
let programPath;
let insertAfterPath;
let modulePrefix = '';
switch (path.parent.type) {
case 'Program':
insertAfterPath = path;
Expand All @@ -687,6 +693,13 @@ export default function(babel, opts = {}) {
case 'ExportNamedDeclaration':
insertAfterPath = path.parentPath;
programPath = insertAfterPath.parentPath;
while (programPath.type !== 'Program') {
if (programPath.type === 'TSModuleDeclaration') {
// ExportNamedDeclaration can be nested in TSModules in typescript
modulePrefix = programPath.node.id.name + '$' + modulePrefix;
}
programPath = programPath.parentPath;
}
break;
case 'ExportDefaultDeclaration':
insertAfterPath = path.parentPath;
Expand All @@ -710,8 +723,9 @@ export default function(babel, opts = {}) {
}
const declPath = declPaths[0];
const inferredName = declPath.node.id.name;
const innerName = modulePrefix + inferredName;
findInnerComponents(
inferredName,
innerName,
declPath,
(persistentID, targetExpr, targetPath) => {
if (targetPath === null) {
Expand Down
18 changes: 18 additions & 0 deletions packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -536,4 +536,22 @@ describe('ReactFreshBabelPlugin', () => {
`),
).toMatchSnapshot();
});

it('supports typescript namespace syntax', () => {
expect(
transform(
`
namespace Foo {
export namespace Bar {
export const A = () => {};
export function B() {};
}
export const C = () => {};
}
`,
{plugins: [['@babel/plugin-syntax-typescript', {isTSX: true}]]},
),
).toMatchSnapshot();
});
});
20 changes: 20 additions & 0 deletions packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -618,6 +618,26 @@ $RefreshReg$(_c, "Hello");
$RefreshReg$(_c2, "Bar");
`;

exports[`ReactFreshBabelPlugin supports typescript namespace syntax 1`] = `
namespace Foo {
export namespace Bar {
export const A = () => {};
_c = A;
export function B() {}
_c2 = B;
;
}
export const C = () => {};
_c3 = C;
}
var _c, _c2, _c3;
$RefreshReg$(_c, "Foo$Bar$A");
$RefreshReg$(_c2, "Foo$Bar$B");
$RefreshReg$(_c3, "Foo$C");
`;

exports[`ReactFreshBabelPlugin uses custom identifiers for $RefreshReg$ and $RefreshSig$ 1`] = `
var _s = import.meta.refreshSig();
Expand Down
13 changes: 13 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -405,6 +405,11 @@
resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==

"@babel/helper-plugin-utils@^7.14.5":
version "7.14.5"
resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==

"@babel/helper-regex@^7.10.4":
version "7.10.5"
resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.10.5.tgz#32dfbb79899073c415557053a19bd055aae50ae0"
Expand Down Expand Up @@ -847,6 +852,13 @@
dependencies:
"@babel/helper-plugin-utils" "^7.12.13"

"@babel/plugin-syntax-typescript@^7.14.5":
version "7.14.5"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.14.5.tgz#b82c6ce471b165b5ce420cf92914d6fb46225716"
integrity sha512-u6OXzDaIXjEstBRRoBCQ/uKQKlbuaeE5in0RvWdA4pN6AhqxTIwUsnHPU1CFZA/amYObMsuWhYfRl3Ch90HD0Q==
dependencies:
"@babel/helper-plugin-utils" "^7.14.5"

"@babel/plugin-transform-arrow-functions@^7.0.0":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.8.3.tgz#82776c2ed0cd9e1a49956daeb896024c9473b8b6"
Expand Down Expand Up @@ -6442,6 +6454,7 @@ [email protected]:

"eslint-plugin-react-internal@link:./scripts/eslint-rules":
version "0.0.0"
uid ""

eslint-plugin-react@^6.7.1:
version "6.10.3"
Expand Down

0 comments on commit f940f4b

Please sign in to comment.