Skip to content

Commit

Permalink
omit a warning for new babel-compiled jsx (#2328)
Browse files Browse the repository at this point in the history
  • Loading branch information
@evanw
evanw committed Jun 17, 2022
1 parent 9a0a7f7 commit 0905d85
Show file tree
Hide file tree
Showing 3 changed files with 154 additions and 1 deletion.
61 changes: 61 additions & 0 deletions internal/bundler/bundler_default_test.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6493,3 +6493,64 @@ b.js: NOTE: Another definition of "x" comes from "b.js" here:
`,
})
}

func TestThisIsUndefinedWarningBabelCompiledJSX(t *testing.T) {
loader_suite.expectBundled(t, bundled{
files: map[string]string{
"/no1.js": `
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
export var Foo = () => _jsxDEV("div", {}, void 0, false, { fileName: "Foo.tsx", lineNumber: 1, columnNumber: 23 }, this);
`,
"/no2.js": `
import { jsxDEV } from "react/jsx-dev-runtime";
export var Foo = () => jsxDEV("div", {}, void 0, false, { fileName: "Foo.tsx", lineNumber: 1, columnNumber: 23 }, this);
`,

"/yes1.js": `
import { jsxDEV as _jsxDEV } from "react/jsx-runtime";
export var Foo = () => _jsxDEV("div", {}, void 0, false, { fileName: "Foo.tsx", lineNumber: 1, columnNumber: 23 }, this);
`,
"/yes2.js": `
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
export var Foo = () => _jsxDEV("div", {}, void 0, false, this, { fileName: "Foo.tsx", lineNumber: 1, columnNumber: 23 });
`,
"/yes3.js": `
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
export var Foo = () => _jsxDEV("div", {}, void 0, false, { fileName: "Foo.tsx", lineNumber: 1, columnNumber: 23 }, this, null);
`,
"/yes4.js": `
import { _jsxDEV } from "react/jsx-dev-runtime";
export var Foo = () => _jsxDEV("div", {}, void 0, false, { fileName: "Foo.tsx", lineNumber: 1, columnNumber: 23 }, this);
`,

"/node_modules/react/jsx-runtime.js": `
export var jsxDEV
`,
"/node_modules/react/jsx-dev-runtime.js": `
export var jsxDEV, _jsxDEV
`,
},
entryPaths: []string{
"/no1.js",
"/no2.js",

"/yes1.js",
"/yes2.js",
"/yes3.js",
"/yes4.js",
},
options: config.Options{
Mode: config.ModeBundle,
AbsOutputDir: "/out",
},
expectedScanLog: `yes1.js: WARNING: Top-level "this" will be replaced with undefined since this file is an ECMAScript module
yes1.js: NOTE: This file is considered to be an ECMAScript module because of the "export" keyword here:
yes2.js: WARNING: Top-level "this" will be replaced with undefined since this file is an ECMAScript module
yes2.js: NOTE: This file is considered to be an ECMAScript module because of the "export" keyword here:
yes3.js: WARNING: Top-level "this" will be replaced with undefined since this file is an ECMAScript module
yes3.js: NOTE: This file is considered to be an ECMAScript module because of the "export" keyword here:
yes4.js: WARNING: Top-level "this" will be replaced with undefined since this file is an ECMAScript module
yes4.js: NOTE: This file is considered to be an ECMAScript module because of the "export" keyword here:
`,
})
}
62 changes: 62 additions & 0 deletions internal/bundler/snapshots/snapshots_loader.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1012,6 +1012,68 @@ export default {
_bar_: 1
};

================================================================================
TestThisIsUndefinedWarningBabelCompiledJSX
---------- /out/no1.js ----------
// node_modules/react/jsx-dev-runtime.js
var jsxDEV;

// no1.js
var Foo = () => jsxDEV("div", {}, void 0, false, { fileName: "Foo.tsx", lineNumber: 1, columnNumber: 23 }, void 0);
export {
Foo
};

---------- /out/no2.js ----------
// node_modules/react/jsx-dev-runtime.js
var jsxDEV;

// no2.js
var Foo = () => jsxDEV("div", {}, void 0, false, { fileName: "Foo.tsx", lineNumber: 1, columnNumber: 23 }, void 0);
export {
Foo
};

---------- /out/yes1.js ----------
// node_modules/react/jsx-runtime.js
var jsxDEV;

// yes1.js
var Foo = () => jsxDEV("div", {}, void 0, false, { fileName: "Foo.tsx", lineNumber: 1, columnNumber: 23 }, void 0);
export {
Foo
};

---------- /out/yes2.js ----------
// node_modules/react/jsx-dev-runtime.js
var jsxDEV;

// yes2.js
var Foo = () => jsxDEV("div", {}, void 0, false, void 0, { fileName: "Foo.tsx", lineNumber: 1, columnNumber: 23 });
export {
Foo
};

---------- /out/yes3.js ----------
// node_modules/react/jsx-dev-runtime.js
var jsxDEV;

// yes3.js
var Foo = () => jsxDEV("div", {}, void 0, false, { fileName: "Foo.tsx", lineNumber: 1, columnNumber: 23 }, void 0, null);
export {
Foo
};

---------- /out/yes4.js ----------
// node_modules/react/jsx-dev-runtime.js
var _jsxDEV;

// yes4.js
var Foo = () => _jsxDEV("div", {}, void 0, false, { fileName: "Foo.tsx", lineNumber: 1, columnNumber: 23 }, void 0);
export {
Foo
};

================================================================================
TestToESMWrapperOmission
---------- /out/entry.js ----------
Expand Down
32 changes: 31 additions & 1 deletion internal/js_parser/js_parser.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,7 @@ type parser struct {
regExpRef js_ast.Ref
runtimePublicFieldImport js_ast.Ref
superCtorRef js_ast.Ref
jsxDevRef js_ast.Ref

// For lowering private methods
weakMapRef js_ast.Ref
Expand Down Expand Up @@ -8996,6 +8997,16 @@ func (p *parser) visitAndAppendStmt(stmts []js_ast.Stmt, stmt js_ast.Stmt) []js_
for _, item := range *s.Items {
p.recordDeclaredSymbol(item.Name.Ref)
}

// Recognize code like this: "import { jsxDEV as _jsxDEV } from 'react/jsx-dev-runtime'"
if p.importRecords[s.ImportRecordIndex].Path.Text == "react/jsx-dev-runtime" {
for _, item := range *s.Items {
if item.Alias == "jsxDEV" {
p.jsxDevRef = item.Name.Ref
break
}
}
}
}

case *js_ast.SExportClause:
Expand Down Expand Up @@ -13590,7 +13601,25 @@ func (p *parser) visitExprInOut(expr js_ast.Expr, in exprIn) (js_ast.Expr, exprO

// Visit the arguments
for i, arg := range e.Args {
arg = p.visitExpr(arg)
if i == 5 && len(e.Args) == 6 {
// Hack: Silence the "this is undefined" warning when running esbuild on
// JSX that has been specifically compiled in the style of React 17+:
//
// import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
// export var Foo = () => _jsxDEV("div", {}, void 0, false, { fileName: "Foo.tsx", lineNumber: 1, columnNumber: 23 }, this);
//
oldSilenceWarningAboutThisBeingUndefined := p.fnOnlyDataVisit.silenceWarningAboutThisBeingUndefined
if _, ok := arg.Data.(*js_ast.EThis); ok {
if id, ok := e.Target.Data.(*js_ast.EImportIdentifier); ok && id.Ref == p.jsxDevRef {
p.fnOnlyDataVisit.silenceWarningAboutThisBeingUndefined = true
}
}
arg = p.visitExpr(arg)
p.fnOnlyDataVisit.silenceWarningAboutThisBeingUndefined = oldSilenceWarningAboutThisBeingUndefined
} else {
arg = p.visitExpr(arg)
}

if _, ok := arg.Data.(*js_ast.ESpread); ok {
hasSpread = true
}
Expand Down Expand Up @@ -15179,6 +15208,7 @@ func newParser(log logger.Log, source logger.Source, lexer js_lexer.Lexer, optio
importMetaRef: js_ast.InvalidRef,
runtimePublicFieldImport: js_ast.InvalidRef,
superCtorRef: js_ast.InvalidRef,
jsxDevRef: js_ast.InvalidRef,

// For lowering private methods
weakMapRef: js_ast.InvalidRef,
Expand Down

0 comments on commit 0905d85

Please sign in to comment.