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`] = ` exports[`SettingsSheet snapshot with nothing enabled 1`] = `
<div <div
className="css-1alsdwv" className="css-1xa1n93-View-FlexBox-FlexColumn"
> >
<div <div
className="css-14m1iua" className="css-n1ycch-View-FlexBox-FlexColumn"
> >
<div <div
className="css-1k4677w" className="css-6ueghe-View-FlexBox-FlexColumn ecr18to0"
> >
<span <span
className="css-15682x" className="css-1qd3nqz-Text"
> >
Select the plugins for which you want to export the data Select the plugins for which you want to export the data
</span> </span>
<div <div
className="css-9dmkpi" className="css-1tewvx4-View-FlexBox-FlexColumn"
> >
<div <div
className="css-1k4677w" className="css-6ueghe-View-FlexBox-FlexColumn ecr18to0"
> >
<div <div
className="css-1obf64m" className="css-yzqaun-TooltipContainer e1abcqbd0"
onMouseEnter={[Function]} onMouseEnter={[Function]}
onMouseLeave={[Function]} onMouseLeave={[Function]}
> >
@@ -30,7 +30,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
className="css-1jrm6r3" className="css-1jrm6r3"
> >
<div <div
className="css-a1glw" className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
style={ style={
Object { Object {
"alignItems": "center", "alignItems": "center",
@@ -38,16 +38,16 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
} }
> >
<span <span
className="css-1cegttb" className="css-1186rtw-Text e19o3fcp0"
> >
TestDevicePlugin TestDevicePlugin
</span> </span>
<div <div
className="css-12zzrdt" className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
/> />
<input <input
checked={false} checked={false}
className="css-1y77uts" className="css-yvyra-CheckboxContainer e28aqfo0"
disabled={false} disabled={false}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
@@ -55,15 +55,15 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
</div> </div>
</div> </div>
<div <div
className="css-1nj3es" className="css-1p0wwd3-View"
/> />
</div> </div>
</div> </div>
<div <div
className="css-1k4677w" className="css-6ueghe-View-FlexBox-FlexColumn ecr18to0"
> >
<div <div
className="css-1obf64m" className="css-yzqaun-TooltipContainer e1abcqbd0"
onMouseEnter={[Function]} onMouseEnter={[Function]}
onMouseLeave={[Function]} onMouseLeave={[Function]}
> >
@@ -71,7 +71,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
className="css-1jrm6r3" className="css-1jrm6r3"
> >
<div <div
className="css-a1glw" className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
style={ style={
Object { Object {
"alignItems": "center", "alignItems": "center",
@@ -79,16 +79,16 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
} }
> >
<span <span
className="css-1cegttb" className="css-1186rtw-Text e19o3fcp0"
> >
TestPlugin TestPlugin
</span> </span>
<div <div
className="css-12zzrdt" className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
/> />
<input <input
checked={false} checked={false}
className="css-1y77uts" className="css-yvyra-CheckboxContainer e28aqfo0"
disabled={false} disabled={false}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
@@ -96,7 +96,7 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
</div> </div>
</div> </div>
<div <div
className="css-1nj3es" className="css-1p0wwd3-View"
/> />
</div> </div>
</div> </div>
@@ -106,16 +106,16 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
className="css-1yqvjo0" className="css-1yqvjo0"
> >
<div <div
className="css-a1glw" className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
> >
<div <div
className="css-12zzrdt" className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
/> />
<div <div
className="css-12n892b" className="css-12n892b"
> >
<div <div
className="css-1ee9nwd" className="css-dltu4w-StyledButton enfqd40"
onClick={[Function]} onClick={[Function]}
onMouseDown={[Function]} onMouseDown={[Function]}
onMouseUp={[Function]} onMouseUp={[Function]}
@@ -124,12 +124,12 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
</div> </div>
</div> </div>
<div <div
className="css-1obf64m" className="css-yzqaun-TooltipContainer e1abcqbd0"
onMouseEnter={[Function]} onMouseEnter={[Function]}
onMouseLeave={[Function]} onMouseLeave={[Function]}
> >
<div <div
className="css-6lxjsf" className="css-3z5lpm-StyledButton enfqd40"
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
onMouseDown={[Function]} onMouseDown={[Function]}
@@ -147,27 +147,27 @@ exports[`SettingsSheet snapshot with nothing enabled 1`] = `
exports[`SettingsSheet snapshot with one plugin enabled 1`] = ` exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
<div <div
className="css-1alsdwv" className="css-1xa1n93-View-FlexBox-FlexColumn"
> >
<div <div
className="css-14m1iua" className="css-n1ycch-View-FlexBox-FlexColumn"
> >
<div <div
className="css-1k4677w" className="css-6ueghe-View-FlexBox-FlexColumn ecr18to0"
> >
<span <span
className="css-15682x" className="css-1qd3nqz-Text"
> >
Select the plugins for which you want to export the data Select the plugins for which you want to export the data
</span> </span>
<div <div
className="css-9dmkpi" className="css-1tewvx4-View-FlexBox-FlexColumn"
> >
<div <div
className="css-1k4677w" className="css-6ueghe-View-FlexBox-FlexColumn ecr18to0"
> >
<div <div
className="css-1obf64m" className="css-yzqaun-TooltipContainer e1abcqbd0"
onMouseEnter={[Function]} onMouseEnter={[Function]}
onMouseLeave={[Function]} onMouseLeave={[Function]}
> >
@@ -175,7 +175,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
className="css-1jrm6r3" className="css-1jrm6r3"
> >
<div <div
className="css-a1glw" className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
style={ style={
Object { Object {
"alignItems": "center", "alignItems": "center",
@@ -183,16 +183,16 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
} }
> >
<span <span
className="css-1cegttb" className="css-1186rtw-Text e19o3fcp0"
> >
TestDevicePlugin TestDevicePlugin
</span> </span>
<div <div
className="css-12zzrdt" className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
/> />
<input <input
checked={false} checked={false}
className="css-1y77uts" className="css-yvyra-CheckboxContainer e28aqfo0"
disabled={false} disabled={false}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
@@ -200,15 +200,15 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
</div> </div>
</div> </div>
<div <div
className="css-1nj3es" className="css-1p0wwd3-View"
/> />
</div> </div>
</div> </div>
<div <div
className="css-1k4677w" className="css-6ueghe-View-FlexBox-FlexColumn ecr18to0"
> >
<div <div
className="css-1obf64m" className="css-yzqaun-TooltipContainer e1abcqbd0"
onMouseEnter={[Function]} onMouseEnter={[Function]}
onMouseLeave={[Function]} onMouseLeave={[Function]}
> >
@@ -216,7 +216,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
className="css-1jrm6r3" className="css-1jrm6r3"
> >
<div <div
className="css-a1glw" className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
style={ style={
Object { Object {
"alignItems": "center", "alignItems": "center",
@@ -224,16 +224,16 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
} }
> >
<span <span
className="css-1cegttb" className="css-1186rtw-Text e19o3fcp0"
> >
TestPlugin TestPlugin
</span> </span>
<div <div
className="css-12zzrdt" className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
/> />
<input <input
checked={true} checked={true}
className="css-1y77uts" className="css-yvyra-CheckboxContainer e28aqfo0"
disabled={false} disabled={false}
onChange={[Function]} onChange={[Function]}
type="checkbox" type="checkbox"
@@ -241,7 +241,7 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
</div> </div>
</div> </div>
<div <div
className="css-1nj3es" className="css-1p0wwd3-View"
/> />
</div> </div>
</div> </div>
@@ -251,16 +251,16 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
className="css-1yqvjo0" className="css-1yqvjo0"
> >
<div <div
className="css-a1glw" className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
> >
<div <div
className="css-12zzrdt" className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
/> />
<div <div
className="css-12n892b" className="css-12n892b"
> >
<div <div
className="css-1ee9nwd" className="css-dltu4w-StyledButton enfqd40"
onClick={[Function]} onClick={[Function]}
onMouseDown={[Function]} onMouseDown={[Function]}
onMouseUp={[Function]} onMouseUp={[Function]}
@@ -269,12 +269,12 @@ exports[`SettingsSheet snapshot with one plugin enabled 1`] = `
</div> </div>
</div> </div>
<div <div
className="css-1obf64m" className="css-yzqaun-TooltipContainer e1abcqbd0"
onMouseEnter={[Function]} onMouseEnter={[Function]}
onMouseLeave={[Function]} onMouseLeave={[Function]}
> >
<div <div
className="css-1ee9nwd" className="css-dltu4w-StyledButton enfqd40"
disabled={false} disabled={false}
onClick={[Function]} onClick={[Function]}
onMouseDown={[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`] = ` exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
<div <div
className="css-ha9vz3" className="css-4jq4zm-View-FlexBox-FlexColumn"
style={ style={
Object { Object {
"width": undefined, "width": undefined,
@@ -10,27 +10,27 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
} }
> >
<div <div
className="css-mgujkx" className="css-augv40-View-FlexBox-FlexColumn"
> >
<div <div
className="css-1hed33k" className="css-hs91vy-LoadingIndicator eq9prj20"
size={30} size={30}
/> />
<span <span
className="css-1r5zvq8" className="css-1bcpoxy-Text"
color="#6f6f6f" color="#6f6f6f"
> >
Update Update
</span> </span>
</div> </div>
<div <div
className="css-a1glw" className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
> >
<div <div
className="css-12zzrdt" className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
/> />
<div <div
className="css-1ee9nwd" className="css-dltu4w-StyledButton enfqd40"
onClick={[Function]} onClick={[Function]}
onMouseDown={[Function]} onMouseDown={[Function]}
onMouseUp={[Function]} onMouseUp={[Function]}
@@ -38,7 +38,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
Cancel Cancel
</div> </div>
<div <div
className="css-1ee9nwd" className="css-dltu4w-StyledButton enfqd40"
onClick={[Function]} onClick={[Function]}
onMouseDown={[Function]} onMouseDown={[Function]}
onMouseUp={[Function]} onMouseUp={[Function]}
@@ -52,7 +52,7 @@ exports[`ShareSheetPendingDialog is rendered with status update 1`] = `
exports[`ShareSheetPendingDialog is rendered without status update 1`] = ` exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
<div <div
className="css-ha9vz3" className="css-4jq4zm-View-FlexBox-FlexColumn"
style={ style={
Object { Object {
"width": undefined, "width": undefined,
@@ -60,27 +60,27 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
} }
> >
<div <div
className="css-mgujkx" className="css-augv40-View-FlexBox-FlexColumn"
> >
<div <div
className="css-1hed33k" className="css-hs91vy-LoadingIndicator eq9prj20"
size={30} size={30}
/> />
<span <span
className="css-1r5zvq8" className="css-1bcpoxy-Text"
color="#6f6f6f" color="#6f6f6f"
> >
wubba lubba dub dub wubba lubba dub dub
</span> </span>
</div> </div>
<div <div
className="css-a1glw" className="css-1qo4xci-View-FlexBox-FlexRow epz0qe20"
> >
<div <div
className="css-12zzrdt" className="css-1xx6adg-View-FlexBox-Spacer e13mj6h81"
/> />
<div <div
className="css-1ee9nwd" className="css-dltu4w-StyledButton enfqd40"
onClick={[Function]} onClick={[Function]}
onMouseDown={[Function]} onMouseDown={[Function]}
onMouseUp={[Function]} onMouseUp={[Function]}
@@ -88,7 +88,7 @@ exports[`ShareSheetPendingDialog is rendered without status update 1`] = `
Cancel Cancel
</div> </div>
<div <div
className="css-1ee9nwd" className="css-dltu4w-StyledButton enfqd40"
onClick={[Function]} onClick={[Function]}
onMouseDown={[Function]} onMouseDown={[Function]}
onMouseUp={[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> <span>
"j "j
<span <span
class="css-1tdfls1" class="css-i709sw-Highlighted ep1h60f0"
> >
son son
</span> </span>

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

@@ -25,6 +25,7 @@
"@babel/types": "^7.9.0", "@babel/types": "^7.9.0",
"@types/fs-extra": "^8.1.0", "@types/fs-extra": "^8.1.0",
"@types/node": "^13.7.5", "@types/node": "^13.7.5",
"babel-plugin-emotion": "^10.0.33",
"fs-extra": "^8.1.0", "fs-extra": "^8.1.0",
"tslib": "^1" "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 flowStripTypesPlugin = require('@babel/plugin-transform-flow-strip-types');
const dynamicRequiresPlugin = require('./dynamic-requires'); const dynamicRequiresPlugin = require('./dynamic-requires');
const typeScriptPlugin = require('@babel/plugin-transform-typescript'); const typeScriptPlugin = require('@babel/plugin-transform-typescript');
const emotionPlugin = require('babel-plugin-emotion');
const tsTransformPlugins = [ const tsTransformPlugins = [
typeScriptPlugin, typeScriptPlugin,
classPropertiesPlugin, classPropertiesPlugin,
commonJsPlugin, commonJsPlugin,
optionalChainingPlugin, optionalChainingPlugin,
coalescingOperatorPlugin, coalescingOperatorPlugin,
[emotionPlugin, {autoLabel: true}],
]; ];
const jsTransformPlugins = [ const jsTransformPlugins = [
commonJsPlugin, commonJsPlugin,
@@ -56,6 +58,7 @@ const jsTransformPlugins = [
optionalChainingPlugin, optionalChainingPlugin,
coalescingOperatorPlugin, coalescingOperatorPlugin,
dynamicRequiresPlugin, dynamicRequiresPlugin,
[emotionPlugin, {autoLabel: true}],
]; ];
export default function transform({ export default function transform({

2
desktop/yarn.lock
View File

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