Skip to content

Commit 6fb4c9b

Browse files
authored
Merge pull request #41 from byondrnd/babel-debug-mode
Babel debug mode
2 parents 863e97c + db78c3b commit 6fb4c9b

File tree

4 files changed

+98
-1
lines changed

4 files changed

+98
-1
lines changed

.changeset/plenty-cobras-count.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@byondxr/babel-plugin": patch
3+
"@byondxr/example-app": patch
4+
---
5+
6+
add babel debug mode component arg

packages/babel-plugin/src/index.ts

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export type Options = PluginPass & {
1515
memo?: Import
1616
}
1717
useComputed?: Import
18+
debug?: boolean
1819
memoWithChildren?: boolean
1920
wrapObserverOnlyIfGet?: boolean
2021
dataComponent?: boolean
@@ -134,10 +135,93 @@ const useMemoVisitor: PluginObj<Options> = {
134135
},
135136
}
136137

138+
const debugComponentTraverse = (p: NodePath, state: Options, component: string) => {
139+
if (!state.opts.debug) {
140+
return
141+
}
142+
const DETECT_STRING = 'component'
143+
const REPLACE_COMMENT = 'used'
144+
p.traverse({
145+
enter(p) {
146+
let innerComment = p.node.innerComments?.filter(
147+
(c) => c.type === 'CommentBlock' && c.value.trim() === DETECT_STRING
148+
)[0]
149+
if (innerComment) {
150+
if (p.isCallExpression()) {
151+
p.node.arguments.push(t.stringLiteral(component))
152+
innerComment.value = REPLACE_COMMENT
153+
}
154+
} else {
155+
let trailingComment = p.node.trailingComments?.filter(
156+
(c) => c.type === 'CommentBlock' && c.value.trim() === DETECT_STRING
157+
)[0]
158+
if (trailingComment) {
159+
if (p.parentPath?.isCallExpression()) {
160+
p.parentPath.node.arguments.push(t.stringLiteral(component))
161+
trailingComment.value = REPLACE_COMMENT
162+
}
163+
}
164+
}
165+
},
166+
})
167+
}
168+
137169
// wrap max 0-1 wrapped components
138170
const componentVisitor: PluginObj<Options> = {
139171
visitor: {
140172
VariableDeclaration(p, state) {
173+
// p.replaceWithSourceString(p.getSource())
174+
// let comments = state.file.ast.comments
175+
176+
// console.log({ comments: state.file.ast.comments })
177+
// if (comments) {
178+
// comments.forEach((comment) => {
179+
// if (comment.type === 'CommentBlock') {
180+
// if (comment.value.trim() === 'yyy') {
181+
// comment.value = 'xxx'
182+
// if (comment.end && comment.start) {
183+
// comment.end = comment.start + 2
184+
// }
185+
// console.log('----------------------', {
186+
// 'comment.end': comment.end,
187+
// 'comment.start': comment.start,
188+
// 'comment.loc': comment.loc,
189+
// })
190+
// if (comment.loc) {
191+
// // comment.loc.start.column = comment.loc.start.column + 5
192+
// // comment.loc.start.line = comment.loc.start.line +5
193+
// comment.loc.end.column = 70
194+
// // comment.loc.end.line = comment.loc.start.line
195+
// }
196+
// }
197+
// }
198+
// })
199+
// }
200+
201+
// if (state.file.ast.comments) {
202+
// state.file.ast.comments = state.file.ast.comments.map((comment: any) => {
203+
// if (comment.type === 'CommentBlock') {
204+
// console.log({ comment: comment })
205+
// if (comment.value.trim() === 'yyy') {
206+
// return {
207+
// type: 'CommentBlock',
208+
// value: 'xxx',
209+
// start: comment.start,
210+
// end: comment.start + 5, // 'xxx' + '/*' + '*/'
211+
// loc: {
212+
// start: comment.loc.start,
213+
// end: {
214+
// line: comment.loc.start.line,
215+
// column: comment.loc.start.column + 5,
216+
// },
217+
// },
218+
// }
219+
// }
220+
// }
221+
// return comment
222+
// })
223+
// }
224+
141225
const declarations = p.get('declarations')
142226
const declarator = declarations[0]
143227
if (declarator) {
@@ -158,6 +242,7 @@ const componentVisitor: PluginObj<Options> = {
158242
if (t.isIdentifier(declarator.node.id)) {
159243
if (isComponent(declarator.node.id.name)) {
160244
const componentName = declarator.node.id.name
245+
debugComponentTraverse(arrowFunction, state, componentName)
161246
const wrap = ({ importName, importSource }: Import) => {
162247
let actualImport = state.actualImports.get(importName)
163248
if (!actualImport) {
@@ -270,6 +355,7 @@ const plugin = (): PluginObj<Options> => {
270355
if (!filterFiles(file)) {
271356
return
272357
}
358+
273359
if (!logFinished && file.opts.filename) {
274360
if (!filesEnteredMap.get(file.opts.filename)) {
275361
filesEnteredMap.set(file.opts.filename, true)

packages/example-app/src/app.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,14 @@ export const A = forwardRef(({ children }: Props, ref: Ref<HTMLDivElement>) => {
1818

1919
A.displayName = 'A'
2020

21+
const useTest = (p?: any) => {}
22+
2123
const App = () => {
2224
const [count, setCount] = useState(0)
2325

2426
const [vAtom, setVAtom] = useRecoilLocalAtom('', 'app:App:vAtom')
27+
useTest(/*component*/)
28+
useTest('' /*component*/)
2529

2630
// useEffect(() => {
2731
// console.log('useEffect')

packages/example-app/vite.config.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ export default defineConfig({
1414
componentWrappers: {
1515
memo: { importName: 'memo', importSource: '@byondxr/react-utils' },
1616
observer: { importName: 'observer', importSource: '@legendapp/state/react' },
17-
},
17+
},
18+
debug: true,
1819
memoWithChildren: false,
1920
dataComponent: true,
2021
wrapObserverOnlyIfGet: false,

0 commit comments

Comments
 (0)