jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enable babel transformer for emotion

Browse Source 
Summary: This diff enables the babel transformer for emotion. It is supposed to be a bit faster, but the most interesting thing is that it will show component names inside the dom tree, which, at least for me, will be a huge performance booster is it will make it much easier to find out to which component style changes need to be applied

Reviewed By: nikoant

Differential Revision: D21722021

fbshipit-source-id: cab1278046b1aa7f8b875c016d43dfafdbaa0a2d
This commit is contained in:
Michel Weststrate
2020-05-28 10:12:10 -07:00
committed by Facebook GitHub Bot
parent 54162d480c
commit 828385e246
6 changed files with 70 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
desktop/app/src/chrome/__tests__/__snapshots__/ExportDataPluginSheet.node.tsx.snap
View File

@@ -2,27 +2,27 @@
exports[`SettingsSheet snapshot with nothing enabled 1`] = `
<div
className="css-1alsdwv"
className="css-1xa1n93-View-FlexBox-FlexColumn"
>
<div
className="css-14m1iua"
className="css-n1ycch-View-FlexBox-FlexColumn"
>
<div
className="css-1k4677w"
className="css-6ueghe-View-FlexBox-FlexColumn ecr18to0"
>
<span
className="css-15682x"
className="css-1qd3nqz-Text"
>
Select the plugins for which you want to export the data
</span>
<div
className="css-9dmkpi"
className="css-1tewvx4-View-FlexBox-FlexColumn"
>
<div
className="css-1k4677w"
className="css-6ueghe-View-FlexBox-FlexColumn ecr18to0"
>
<div
className="css-1obf64m"
className="css-yzqaun-TooltipContainer e1abcqbd0"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
@@ -30,7 +30,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
className="css-1jrm6r3"
>
<div
className="css-a1glw"
className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
style={
Object {
"alignItems": "center",
@@ -38,16 +38,16 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
}
>
<span
className="css-1cegttb"
className="css-1186rtw-Text e19o3fcp0"
>
TestDevicePlugin
</span>
<div
className="css-12zzrdt"
className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
/>
<input
checked={false}
className="css-1y77uts"
className="css-yvyra-CheckboxContainer e28aqfo0"
disabled={false}
onChange={[Function]}
type="checkbox"
@@ -55,15 +55,15 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
</div>
</div>
<div
className="css-1nj3es"
className="css-1p0wwd3-View"
/>
</div>
</div>
<div
className="css-1k4677w"
className="css-6ueghe-View-FlexBox-FlexColumn ecr18to0"
>
<div
className="css-1obf64m"
className="css-yzqaun-TooltipContainer e1abcqbd0"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
@@ -71,7 +71,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
className="css-1jrm6r3"
>
<div
className="css-a1glw"
className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
style={
Object {
"alignItems": "center",
@@ -79,16 +79,16 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
}
>
<span
className="css-1cegttb"
className="css-1186rtw-Text e19o3fcp0"
>
TestPlugin
</span>
<div
className="css-12zzrdt"
className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
/>
<input
checked={false}
className="css-1y77uts"
className="css-yvyra-CheckboxContainer e28aqfo0"
disabled={false}
onChange={[Function]}
type="checkbox"
@@ -96,7 +96,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
</div>
</div>
<div
className="css-1nj3es"
className="css-1p0wwd3-View"
/>
</div>
</div>
@@ -106,16 +106,16 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
className="css-1yqvjo0"
>
<div
className="css-a1glw"
className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
>
<div
className="css-12zzrdt"
className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
/>
<div
className="css-12n892b"
>
<div
className="css-1ee9nwd"
className="css-dltu4w-StyledButton enfqd40"
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
@@ -124,12 +124,12 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
</div>
</div>
<div
className="css-1obf64m"
className="css-yzqaun-TooltipContainer e1abcqbd0"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<div
className="css-6lxjsf"
className="css-3z5lpm-StyledButton enfqd40"
disabled={true}
onClick={[Function]}
onMouseDown={[Function]}
@@ -147,27 +147,27 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
<div
className="css-1alsdwv"
className="css-1xa1n93-View-FlexBox-FlexColumn"
>
<div
className="css-14m1iua"
className="css-n1ycch-View-FlexBox-FlexColumn"
>
<div
className="css-1k4677w"
className="css-6ueghe-View-FlexBox-FlexColumn ecr18to0"
>
<span
className="css-15682x"
className="css-1qd3nqz-Text"
>
Select the plugins for which you want to export the data
</span>
<div
className="css-9dmkpi"
className="css-1tewvx4-View-FlexBox-FlexColumn"
>
<div
className="css-1k4677w"
className="css-6ueghe-View-FlexBox-FlexColumn ecr18to0"
>
<div
className="css-1obf64m"
className="css-yzqaun-TooltipContainer e1abcqbd0"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
@@ -175,7 +175,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
className="css-1jrm6r3"
>
<div
className="css-a1glw"
className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
style={
Object {
"alignItems": "center",
@@ -183,16 +183,16 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
}
>
<span
className="css-1cegttb"
className="css-1186rtw-Text e19o3fcp0"
>
TestDevicePlugin
</span>
<div
className="css-12zzrdt"
className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
/>
<input
checked={false}
className="css-1y77uts"
className="css-yvyra-CheckboxContainer e28aqfo0"
disabled={false}
onChange={[Function]}
type="checkbox"
@@ -200,15 +200,15 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
</div>
</div>
<div
className="css-1nj3es"
className="css-1p0wwd3-View"
/>
</div>
</div>
<div
className="css-1k4677w"
className="css-6ueghe-View-FlexBox-FlexColumn ecr18to0"
>
<div
className="css-1obf64m"
className="css-yzqaun-TooltipContainer e1abcqbd0"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
@@ -216,7 +216,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
className="css-1jrm6r3"
>
<div
className="css-a1glw"
className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
style={
Object {
"alignItems": "center",
@@ -224,16 +224,16 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
}
>
<span
className="css-1cegttb"
className="css-1186rtw-Text e19o3fcp0"
>
TestPlugin
</span>
<div
className="css-12zzrdt"
className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
/>
<input
checked={true}
className="css-1y77uts"
className="css-yvyra-CheckboxContainer e28aqfo0"
disabled={false}
onChange={[Function]}
type="checkbox"
@@ -241,7 +241,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
</div>
</div>
<div
className="css-1nj3es"
className="css-1p0wwd3-View"
/>
</div>
</div>
@@ -251,16 +251,16 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
className="css-1yqvjo0"
>
<div
className="css-a1glw"
className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
>
<div
className="css-12zzrdt"
className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
/>
<div
className="css-12n892b"
>
<div
className="css-1ee9nwd"
className="css-dltu4w-StyledButton enfqd40"
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
@@ -269,12 +269,12 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
</div>
</div>
<div
className="css-1obf64m"
className="css-yzqaun-TooltipContainer e1abcqbd0"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<div
className="css-1ee9nwd"
className="css-dltu4w-StyledButton enfqd40"
disabled={false}
onClick={[Function]}
onMouseDown={[Function]}

32
desktop/app/src/chrome/__tests__/__snapshots__/ShareSheetPendingDialog.node.tsx.snap
View File

@@ -2,7 +2,7 @@
exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
<div
className="css-ha9vz3"
className="css-4jq4zm-View-FlexBox-FlexColumn"
style={
Object {
"width": undefined,
@@ -10,27 +10,27 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
}
>
<div
className="css-mgujkx"
className="css-augv40-View-FlexBox-FlexColumn"
>
<div
className="css-1hed33k"
className="css-hs91vy-LoadingIndicator eq9prj20"
size={30}
/>
<span
className="css-1r5zvq8"
className="css-1bcpoxy-Text"
color="#6f6f6f"
>
Update
</span>
</div>
<div
className="css-a1glw"
className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
>
<div
className="css-12zzrdt"
className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
/>
<div
className="css-1ee9nwd"
className="css-dltu4w-StyledButton enfqd40"
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
@@ -38,7 +38,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
Cancel
</div>
<div
className="css-1ee9nwd"
className="css-dltu4w-StyledButton enfqd40"
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
@@ -52,7 +52,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
<div
className="css-ha9vz3"
className="css-4jq4zm-View-FlexBox-FlexColumn"
style={
Object {
"width": undefined,
@@ -60,27 +60,27 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
}
>
<div
className="css-mgujkx"
className="css-augv40-View-FlexBox-FlexColumn"
>
<div
className="css-1hed33k"
className="css-hs91vy-LoadingIndicator eq9prj20"
size={30}
/>
<span
className="css-1r5zvq8"
className="css-1bcpoxy-Text"
color="#6f6f6f"
>
wubba lubba dub dub
</span>
</div>
<div
className="css-a1glw"
className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
>
<div
className="css-12zzrdt"
className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
/>
<div
className="css-1ee9nwd"
className="css-dltu4w-StyledButton enfqd40"
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}
@@ -88,7 +88,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
Cancel
</div>
<div
className="css-1ee9nwd"
className="css-dltu4w-StyledButton enfqd40"
onClick={[Function]}
onMouseDown={[Function]}
onMouseUp={[Function]}

2
desktop/app/src/ui/components/data-inspector/__tests__/DataInspector.node.tsx
View File

@@ -130,7 +130,7 @@ test('can filter for data', async () => {
<span>
"j
<span
class="css-1tdfls1"
class="css-i709sw-Highlighted ep1h60f0"
>
son
</span>

1
desktop/babel-transformer/package.json
View File

@@ -25,6 +25,7 @@
"@babel/types": "^7.9.0",
"@types/fs-extra": "^8.1.0",
"@types/node": "^13.7.5",
"babel-plugin-emotion": "^10.0.33",
"fs-extra": "^8.1.0",
"tslib": "^1"
},

3
desktop/babel-transformer/src/transform.ts
View File

@@ -41,12 +41,14 @@ const objectRestSpreadPlugin = require('@babel/plugin-proposal-object-rest-sprea
const flowStripTypesPlugin = require('@babel/plugin-transform-flow-strip-types');
const dynamicRequiresPlugin = require('./dynamic-requires');
const typeScriptPlugin = require('@babel/plugin-transform-typescript');
const emotionPlugin = require('babel-plugin-emotion');
const tsTransformPlugins = [
typeScriptPlugin,
classPropertiesPlugin,
commonJsPlugin,
optionalChainingPlugin,
coalescingOperatorPlugin,
[emotionPlugin, {autoLabel: true}],
];
const jsTransformPlugins = [
commonJsPlugin,
@@ -56,6 +58,7 @@ const jsTransformPlugins = [
optionalChainingPlugin,
coalescingOperatorPlugin,
dynamicRequiresPlugin,
[emotionPlugin, {autoLabel: true}],
];
export default function transform({

2
desktop/yarn.lock
View File

@@ -3184,7 +3184,7 @@ babel-plugin-dynamic-import-node@^2.3.0:
dependencies:
object.assign "^4.1.0"
babel-plugin-emotion@^10.0.27:
babel-plugin-emotion@^10.0.27, babel-plugin-emotion@^10.0.33:
version "10.0.33"
resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz#ce1155dcd1783bbb9286051efee53f4e2be63e03"
integrity sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==