Skip to content

Commit 11c7b2d

Browse files
tujoworkertujoworker
committed
fix: add support for backticks (#8)
1 parent 8bba666 commit 11c7b2d

4 files changed

Lines changed: 137 additions & 97 deletions

File tree

‎__mocks__/Examples.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,25 @@ export const MockNoInlineWithComponent = () => {
2020
)
2121
}
2222

23+
export const MockNoInlineWithBackticks = () => {
24+
return (
25+
<ComponentBox data-test="id">
26+
{() => {
27+
const DemoComponent = () => {
28+
const more = '456'
29+
return `123${more}` + `789`
30+
}
31+
32+
return (
33+
<div>
34+
<DemoComponent />
35+
</div>
36+
)
37+
}}
38+
</ComponentBox>
39+
)
40+
}
41+
2342
export const MockNoInlineWithText = () => {
2443
return (
2544
<ComponentBox data-test="id">

‎__tests__/babelPluginReactLive.test.ts‎

Lines changed: 109 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -16,108 +16,124 @@ const pluginOptions = {
1616
prettierPath,
1717
}
1818

19-
it('babelPluginReactLive', async () => {
20-
const babelFileResult = await transformFileAsync(targetFile, {
21-
code: true,
22-
presets: [
23-
[
24-
'@babel/preset-env',
25-
{
26-
modules: false,
27-
targets: { firefox: '100' },
28-
},
19+
describe('transformFileAsync', () => {
20+
it('should convert Examples.tsx with all exported examples', async () => {
21+
const babelFileResult = await transformFileAsync(targetFile, {
22+
code: true,
23+
presets: [
24+
[
25+
'@babel/preset-env',
26+
{
27+
modules: false,
28+
targets: { firefox: '100' },
29+
},
30+
],
2931
],
30-
],
31-
plugins: [[babelPluginReactLive, pluginOptions]],
32-
})
32+
plugins: [[babelPluginReactLive, pluginOptions]],
33+
})
3334

34-
const code = removeConsoleNinja(String(babelFileResult?.code))
35+
const code = removeConsoleNinja(String(babelFileResult?.code))
3536

36-
const formattedCode = prettier.format(code, {
37-
filepath: 'file.tsx',
38-
semi: false,
39-
})
37+
const formattedCode = prettier.format(code, {
38+
filepath: 'file.tsx',
39+
semi: false,
40+
})
4041

41-
expect(formattedCode).toMatchInlineSnapshot(`
42-
"const ComponentBox = ({ children }) => children
43-
export const MockNoInlineWithComponent = () => {
44-
return (
45-
<ComponentBox data-test="id" noInline>{\`const DemoComponent = () => {
46-
return <>content</>
47-
}
48-
render(
49-
<div>
50-
<DemoComponent />
51-
</div>
52-
)
53-
\`}</ComponentBox>
42+
expect(formattedCode).toMatchInlineSnapshot(`
43+
"const ComponentBox = ({ children }) => children
44+
export const MockNoInlineWithComponent = () => {
45+
return (
46+
<ComponentBox data-test="id" noInline>{\`const DemoComponent = () => {
47+
return <>content</>
48+
}
49+
render(
50+
<div>
51+
<DemoComponent />
52+
</div>
5453
)
55-
}
56-
export const MockNoInlineWithText = () => {
57-
return (
58-
<ComponentBox data-test="id" noInline>{\`render(<>content</>)
59-
\`}</ComponentBox>
54+
\`}</ComponentBox>
55+
)
56+
}
57+
export const MockNoInlineWithBackticks = () => {
58+
return (
59+
<ComponentBox data-test="id" noInline>{\`const DemoComponent = () => {
60+
const more = '456'
61+
return \\\`123\\\${more}\\\` + \\\`789\\\`
62+
}
63+
render(
64+
<div>
65+
<DemoComponent />
66+
</div>
6067
)
61-
}
62-
export const MockOneChilds = () => {
63-
return (
64-
<ComponentBox data-test="id">{\`<div>content</div>
65-
\`}</ComponentBox>
66-
)
67-
}
68-
export const MockManyChilds = () => {
69-
return (
70-
<ComponentBox data-test="id">{\`
71-
<div>content 1</div>
72-
<div>content 2</div>
73-
<div>content 3</div>
68+
\`}</ComponentBox>
69+
)
70+
}
71+
export const MockNoInlineWithText = () => {
72+
return (
73+
<ComponentBox data-test="id" noInline>{\`render(<>content</>)
74+
\`}</ComponentBox>
75+
)
76+
}
77+
export const MockOneChilds = () => {
78+
return (
79+
<ComponentBox data-test="id">{\`<div>content</div>
80+
\`}</ComponentBox>
81+
)
82+
}
83+
export const MockManyChilds = () => {
84+
return (
85+
<ComponentBox data-test="id">{\`
86+
<div>content 1</div>
87+
<div>content 2</div>
88+
<div>content 3</div>
7489
75-
\`}</ComponentBox>
76-
)
77-
}
78-
export const MockFragment = () => {
79-
return (
80-
<ComponentBox data-test="id">{\`<>
81-
<span>content 1</span>
82-
<span>content 2</span>
83-
<span>content 3</span>
84-
</>
85-
\`}</ComponentBox>
86-
)
87-
}
88-
export const MockText = () => {
89-
return (
90-
<ComponentBox data-test="id">{\`
91-
text
92-
{'text'}
93-
<span>content</span>
94-
text
95-
{'text'}
90+
\`}</ComponentBox>
91+
)
92+
}
93+
export const MockFragment = () => {
94+
return (
95+
<ComponentBox data-test="id">{\`<>
96+
<span>content 1</span>
97+
<span>content 2</span>
98+
<span>content 3</span>
99+
</>
100+
\`}</ComponentBox>
101+
)
102+
}
103+
export const MockText = () => {
104+
return (
105+
<ComponentBox data-test="id">{\`
106+
text
107+
{'text'}
108+
<span>content</span>
109+
text
110+
{'text'}
96111
97-
\`}</ComponentBox>
98-
)
99-
}
100-
export const MockEvents = () => {
101-
return (
102-
<ComponentBox data-test="id">{\`<DemoComponent
103-
onChange={(e) => {
104-
// comment
105-
console.log(e)
106-
}}
107-
onOpen={(e) => 'console.log(e)'}
108-
onFocus={(e) => {
109-
const cleaned = 'console.log(e)'
110-
}}
111-
/>
112-
\`}</ComponentBox>
113-
)
114-
}
115-
"
116-
`)
112+
\`}</ComponentBox>
113+
)
114+
}
115+
export const MockEvents = () => {
116+
return (
117+
<ComponentBox data-test="id">{\`<DemoComponent
118+
onChange={(e) => {
119+
// comment
120+
console.log(e)
121+
}}
122+
onOpen={(e) => 'console.log(e)'}
123+
onFocus={(e) => {
124+
const cleaned = 'console.log(e)'
125+
}}
126+
/>
127+
\`}</ComponentBox>
128+
)
129+
}
130+
"
131+
`)
117132

118-
expect(formattedCode.match(/noInline/g)).toHaveLength(2)
119-
expect(formattedCode.match(/\{`/g)).toHaveLength(7)
120-
expect(formattedCode.match(/`\}/g)).toHaveLength(7)
133+
expect(formattedCode.match(/noInline/g)).toHaveLength(3)
134+
expect(formattedCode.match(/\{`/g)).toHaveLength(8)
135+
expect(formattedCode.match(/`\}/g)).toHaveLength(8)
136+
})
121137
})
122138

123139
function removeConsoleNinja(code) {

‎babelPluginReactLive.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,21 @@ function babelPluginReactLive(babel, options) {
2424
})
2525

2626
// Prettier adds a leading ;
27-
// And we also escape `
28-
code = code.replace(/^;/, '').replace(/`/g, '\\`')
27+
code = code.replace(/^;/, '')
28+
29+
// Also escape backticks (`)
30+
code = code.replace(/`/g, '\\`')
2931

3032
// Remove fragments we added in the first place
3133
if (children.length > 1) {
3234
code = code.replace(/^<>|<\/>$|^\s{2}/gm, '')
3335
}
3436

37+
const raw = code.replace(/\$\{/g, '\\${')
38+
const templateElement = t.templateElement({ raw, cooked: code }, true)
39+
3540
return t.jsxExpressionContainer(
36-
t.templateLiteral([t.templateElement({ raw: code })], [])
41+
t.templateLiteral([templateElement], [])
3742
)
3843
}
3944

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"type": "git",
1414
"url": "https://github.com/dnbexperience/eufemia.git"
1515
},
16-
"version": "1.4.2",
16+
"version": "1.4.3",
1717
"main": "babelPluginReactLive.js",
1818
"scripts": {
1919
"test": "jest",

0 commit comments

Comments
 (0)