Diff
checker
텍스트
텍스트
이미지
문서
Excel
폴더
Legal
Enterprise
데스크톱
요금제
로그인
데스크톱 앱 다운로드
텍스트 비교
두 텍스트 파일의 차이점을 찾아보세요
도구
기록
실시간 편집
변경 없는 행 숨기기
줄바꿈 비활성화
레이아웃
나란히 보기
합쳐 보기
비교 단위
스마트
단어
글자
구문 강조
언어 선택
제외
텍스트 변환
첫 변경으로
수정
Diffchecker Desktop
가장 안전하게 Diffchecker를 사용하는 방법. 데스크톱 앱을 사용하면 비교 데이터가 외부로 전송되지 않습니다!
데스크톱 앱 받기
react-jsx-dev
생성일
5년 전
비교 결과 만료 없음
초기화
내보내기
공유
설명
3 삭제
행
총
삭제
글자
총
삭제
이 기능을 계속 사용하려면 업그레이드해 주세요
Diff
checker
Pro
요금제 보기
63 행
복사
2 추가
행
총
추가
글자
총
추가
이 기능을 계속 사용하려면 업그레이드해 주세요
Diff
checker
Pro
요금제 보기
61 행
복사
복사
복사됨
복사
복사됨
// @babel/plugin-transform-react-jsx
// @babel/plugin-transform-react-jsx
-development
import jsx from "@babel/plugin-syntax-jsx";
import jsx from "@babel/plugin-syntax-jsx";
import { helper } from "@babel/helper-builder-react-jsx-experimental";
import { helper } from "@babel/helper-builder-react-jsx-experimental";
import { declare } from "@babel/helper-plugin-utils";
import { declare } from "@babel/helper-plugin-utils";
import { types as t } from "@babel/core";
import { types as t } from "@babel/core";
export default declare((api, options) => {
export default declare((api, options) => {
복사
복사됨
복사
복사됨
const { runtime = "classic" } = options;
const PURE_ANNOTATION = options.pure;
const PURE_ANNOTATION = options.pure;
const visitor = helper(api, {
const visitor = helper(api, {
pre(state) {
pre(state) {
const tagName = state.tagName;
const tagName = state.tagName;
const args = state.args;
const args = state.args;
if (t.react.isCompatTag(tagName)) {
if (t.react.isCompatTag(tagName)) {
args.push(t.stringLiteral(tagName));
args.push(t.stringLiteral(tagName));
} else {
} else {
args.push(state.tagExpr);
args.push(state.tagExpr);
}
}
},
},
post(state, pass) {
post(state, pass) {
if (pass.get("@babel/plugin-react-jsx/runtime") === "classic") {
if (pass.get("@babel/plugin-react-jsx/runtime") === "classic") {
state.createElementCallee = pass.get(
state.createElementCallee = pass.get(
"@babel/plugin-react-jsx/createElementIdentifier",
"@babel/plugin-react-jsx/createElementIdentifier",
)();
)();
state.pure =
state.pure =
PURE_ANNOTATION ?? !pass.get("@babel/plugin-react-jsx/pragmaSet");
PURE_ANNOTATION ?? !pass.get("@babel/plugin-react-jsx/pragmaSet");
} else {
} else {
const getter = get => ({ enumerable: true, configurable: true, get });
const getter = get => ({ enumerable: true, configurable: true, get });
// TODO(Babel 8): helper-builder-react-jsx expects those properties to be AST nodes, but we want to
// TODO(Babel 8): helper-builder-react-jsx expects those properties to be AST nodes, but we want to
// generate them lazily so that we only inject imports when needed.
// generate them lazily so that we only inject imports when needed.
// These should actually be functions.
// These should actually be functions.
Object.defineProperties(state, {
Object.defineProperties(state, {
jsxCallee: getter(pass.get("@babel/plugin-react-jsx/jsxIdentifier")),
jsxCallee: getter(pass.get("@babel/plugin-react-jsx/jsxIdentifier")),
jsxStaticCallee: getter(
jsxStaticCallee: getter(
pass.get("@babel/plugin-react-jsx/jsxStaticIdentifier"),
pass.get("@babel/plugin-react-jsx/jsxStaticIdentifier"),
),
),
createElementCallee: getter(
createElementCallee: getter(
pass.get("@babel/plugin-react-jsx/createElementIdentifier"),
pass.get("@babel/plugin-react-jsx/createElementIdentifier"),
),
),
});
});
state.pure =
state.pure =
PURE_ANNOTATION ??
PURE_ANNOTATION ??
!pass.get("@babel/plugin-react-jsx/importSourceSet");
!pass.get("@babel/plugin-react-jsx/importSourceSet");
}
}
},
},
...options,
...options,
복사
복사됨
복사
복사됨
development:
false,
development:
true
,
runtime
,
});
});
return {
return {
name: "transform-react-jsx",
name: "transform-react-jsx",
inherits: jsx,
inherits: jsx,
visitor,
visitor,
};
};
});
});
저장된 비교 결과
원본
파일 열기
// @babel/plugin-transform-react-jsx import jsx from "@babel/plugin-syntax-jsx"; import { helper } from "@babel/helper-builder-react-jsx-experimental"; import { declare } from "@babel/helper-plugin-utils"; import { types as t } from "@babel/core"; export default declare((api, options) => { const { runtime = "classic" } = options; const PURE_ANNOTATION = options.pure; const visitor = helper(api, { pre(state) { const tagName = state.tagName; const args = state.args; if (t.react.isCompatTag(tagName)) { args.push(t.stringLiteral(tagName)); } else { args.push(state.tagExpr); } }, post(state, pass) { if (pass.get("@babel/plugin-react-jsx/runtime") === "classic") { state.createElementCallee = pass.get( "@babel/plugin-react-jsx/createElementIdentifier", )(); state.pure = PURE_ANNOTATION ?? !pass.get("@babel/plugin-react-jsx/pragmaSet"); } else { const getter = get => ({ enumerable: true, configurable: true, get }); // TODO(Babel 8): helper-builder-react-jsx expects those properties to be AST nodes, but we want to // generate them lazily so that we only inject imports when needed. // These should actually be functions. Object.defineProperties(state, { jsxCallee: getter(pass.get("@babel/plugin-react-jsx/jsxIdentifier")), jsxStaticCallee: getter( pass.get("@babel/plugin-react-jsx/jsxStaticIdentifier"), ), createElementCallee: getter( pass.get("@babel/plugin-react-jsx/createElementIdentifier"), ), }); state.pure = PURE_ANNOTATION ?? !pass.get("@babel/plugin-react-jsx/importSourceSet"); } }, ...options, development: false, runtime, }); return { name: "transform-react-jsx", inherits: jsx, visitor, }; });
수정본
파일 열기
// @babel/plugin-transform-react-jsx-development import jsx from "@babel/plugin-syntax-jsx"; import { helper } from "@babel/helper-builder-react-jsx-experimental"; import { declare } from "@babel/helper-plugin-utils"; import { types as t } from "@babel/core"; export default declare((api, options) => { const PURE_ANNOTATION = options.pure; const visitor = helper(api, { pre(state) { const tagName = state.tagName; const args = state.args; if (t.react.isCompatTag(tagName)) { args.push(t.stringLiteral(tagName)); } else { args.push(state.tagExpr); } }, post(state, pass) { if (pass.get("@babel/plugin-react-jsx/runtime") === "classic") { state.createElementCallee = pass.get( "@babel/plugin-react-jsx/createElementIdentifier", )(); state.pure = PURE_ANNOTATION ?? !pass.get("@babel/plugin-react-jsx/pragmaSet"); } else { const getter = get => ({ enumerable: true, configurable: true, get }); // TODO(Babel 8): helper-builder-react-jsx expects those properties to be AST nodes, but we want to // generate them lazily so that we only inject imports when needed. // These should actually be functions. Object.defineProperties(state, { jsxCallee: getter(pass.get("@babel/plugin-react-jsx/jsxIdentifier")), jsxStaticCallee: getter( pass.get("@babel/plugin-react-jsx/jsxStaticIdentifier"), ), createElementCallee: getter( pass.get("@babel/plugin-react-jsx/createElementIdentifier"), ), }); state.pure = PURE_ANNOTATION ?? !pass.get("@babel/plugin-react-jsx/importSourceSet"); } }, ...options, development: true, }); return { name: "transform-react-jsx", inherits: jsx, visitor, }; });
비교하기