Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit2117eb4

Browse files
chore: Improve bundle size (#5761)
1 parent6ed4e21 commit2117eb4

File tree

16 files changed

+84
-209
lines changed

16 files changed

+84
-209
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@ cli/testdata/.gen-golden
3636
/dist/
3737
site/out/
3838

39+
# Bundle analysis
40+
site/stats/
41+
3942
*.tfstate
4043
*.tfstate.backup
4144
*.tfplan

‎.prettierignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ cli/testdata/.gen-golden
3939
/dist/
4040
site/out/
4141

42+
# Bundle analysis
43+
site/stats/
44+
4245
*.tfstate
4346
*.tfstate.backup
4447
*.tfplan

‎site/.eslintignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ playwright-report/*
3939
../dist/
4040
out/
4141

42+
# Bundle analysis
43+
stats/
44+
4245
*.tfstate
4346
*.tfstate.backup
4447
*.tfplan

‎site/.prettierignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ playwright-report/*
3939
../dist/
4040
out/
4141

42+
# Bundle analysis
43+
stats/
44+
4245
*.tfstate
4346
*.tfstate.backup
4447
*.tfplan

‎site/jest.setup.ts

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import"@testing-library/jest-dom"
22
import{cleanup}from"@testing-library/react"
33
importcryptofrom"crypto"
4-
import*asutilfrom"util"
54
import{server}from"./src/testHelpers/server"
65
import"jest-location-mock"
76

@@ -32,27 +31,5 @@ afterEach(() => {
3231
// Clean up after the tests are finished.
3332
afterAll(()=>server.close())
3433

35-
// Helper utility to fail jest tests if a console.error is logged
36-
// Pulled from this blog post:
37-
// https://www.benmvp.com/blog/catch-warnings-jest-tests/
38-
39-
// For now, I limited this to just 'error' - but failing on warnings
40-
// would be a nice next step! We may need to filter out some noise
41-
// from material-ui though.
42-
constCONSOLE_FAIL_TYPES=["error"/* 'warn' */]asconst
43-
44-
// Throw errors when a `console.error` or `console.warn` happens
45-
// by overriding the functions
46-
CONSOLE_FAIL_TYPES.forEach((logType:typeofCONSOLE_FAIL_TYPES[number])=>{
47-
global.console[logType]=<Type>(format:string, ...args:Type[]):void=>{
48-
thrownewError(
49-
`Failing due to console.${logType} while running test!\n\n${util.format(
50-
format,
51-
...args,
52-
)}`,
53-
)
54-
}
55-
})
56-
5734
// This is needed because we are compiling under `--isolatedModules`
5835
export{}

‎site/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"test:coverage":"jest --selectProjects test --collectCoverage",
2525
"test:watch":"jest --selectProjects test --watch",
2626
"typegen":"xstate typegen 'src/**/*.ts'",
27+
"stats":"STATS=true yarn build && npx http-server ./stats -p 8081 -c-1",
2728
"deadcode":"ts-prune | grep -v\".stories\\|.typegen\\|.config\\|e2e\\|__mocks__\\|used in module\\|testHelpers\\|typesGenerated\" || echo\"No deadcode found.\""
2829
},
2930
"dependencies": {
@@ -58,6 +59,7 @@
5859
"jest-location-mock":"1.0.9",
5960
"js-untar":"2.0.0",
6061
"just-debounce-it":"3.1.1",
62+
"lodash":"4.17.21",
6163
"playwright":"^1.29.2",
6264
"react":"18.2.0",
6365
"react-chartjs-2":"4.3.1",
@@ -69,6 +71,7 @@
6971
"react-router-dom":"6.4.1",
7072
"react-syntax-highlighter":"15.5.0",
7173
"remark-gfm":"3.0.1",
74+
"rollup-plugin-visualizer":"5.9.0",
7275
"sourcemapped-stacktrace":"1.1.11",
7376
"ts-prune":"0.10.3",
7477
"tzdata":"1.0.30",

‎site/src/components/IconField/IconField.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
importButtonfrom"@material-ui/core/Button"
22
importInputAdornmentfrom"@material-ui/core/InputAdornment"
33
importPopoverfrom"@material-ui/core/Popover"
4-
importTextField,{TextFieldProps}from"@material-ui/core/TextField"
4+
importTextFieldfrom"@material-ui/core/TextField"
55
import{OpenDropdown}from"components/DropdownArrows/DropdownArrows"
66
import{useRef,FC,useState}from"react"
77
importPickerfrom"@emoji-mart/react"
88
import{makeStyles}from"@material-ui/core/styles"
99
import{colors}from"theme/colors"
1010
import{useTranslation}from"react-i18next"
1111
importdatafrom"@emoji-mart/data/sets/14/twitter.json"
12+
import{IconFieldProps}from"./types"
1213

13-
exportconstIconField:FC<
14-
TextFieldProps&{onPickEmoji:(value:string)=>void}
15-
>=({ onPickEmoji, ...textFieldProps})=>{
14+
constIconField:FC<IconFieldProps>=({ onPickEmoji, ...textFieldProps})=>{
1615
if(
1716
typeoftextFieldProps.value!=="string"&&
1817
typeoftextFieldProps.value!=="undefined"
@@ -111,3 +110,5 @@ const useStyles = makeStyles((theme) => ({
111110
paddingBottom:theme.spacing(0.5),
112111
},
113112
}))
113+
114+
exportdefaultIconField
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import{lazy,FC,Suspense}from"react"
2+
import{IconFieldProps}from"./types"
3+
4+
constIconField=lazy(()=>import("./IconField"))
5+
6+
exportconstLazyIconField:FC<IconFieldProps>=(props)=>{
7+
return(
8+
<Suspense>
9+
<IconField{...props}/>
10+
</Suspense>
11+
)
12+
}
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import{TextFieldProps}from"@material-ui/core/TextField"
2+
3+
exporttypeIconFieldProps=TextFieldProps&{
4+
onPickEmoji:(value:string)=>void
5+
}

‎site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
TemplateExample,
88
}from"api/typesGenerated"
99
import{FormFooter}from"components/FormFooter/FormFooter"
10-
import{IconField}from"components/IconField/IconField"
1110
import{ParameterInput}from"components/ParameterInput/ParameterInput"
1211
import{Stack}from"components/Stack/Stack"
1312
import{
@@ -23,6 +22,7 @@ import { CreateTemplateData } from "xServices/createTemplate/createTemplateXServ
2322
import*asYupfrom"yup"
2423
import{WorkspaceBuildLogs}from"components/WorkspaceBuildLogs/WorkspaceBuildLogs"
2524
import{HelpTooltip,HelpTooltipText}from"components/Tooltips/HelpTooltip"
25+
import{LazyIconField}from"components/IconField/LazyIconField"
2626

2727
constvalidationSchema=Yup.object({
2828
name:nameValidator("Name"),
@@ -154,7 +154,7 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
154154
variant="outlined"
155155
/>
156156

157-
<IconField
157+
<LazyIconField
158158
{...getFieldHelpers("icon")}
159159
disabled={isSubmitting}
160160
onChange={onChangeTrimmed(form)}
Lines changed: 6 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,14 @@
1-
importdatafrom"@emoji-mart/data/sets/14/twitter.json"
2-
importPickerfrom"@emoji-mart/react"
3-
importButtonfrom"@material-ui/core/Button"
4-
importInputAdornmentfrom"@material-ui/core/InputAdornment"
5-
importPopoverfrom"@material-ui/core/Popover"
6-
import{makeStyles}from"@material-ui/core/styles"
71
importTextFieldfrom"@material-ui/core/TextField"
82
import{Group}from"api/typesGenerated"
93
import{ChooseOne,Cond}from"components/Conditionals/ChooseOne"
10-
import{OpenDropdown}from"components/DropdownArrows/DropdownArrows"
114
import{FormFooter}from"components/FormFooter/FormFooter"
125
import{FullPageForm}from"components/FullPageForm/FullPageForm"
6+
import{LazyIconField}from"components/IconField/LazyIconField"
137
import{FullScreenLoader}from"components/Loader/FullScreenLoader"
148
import{Margins}from"components/Margins/Margins"
159
import{useFormik}from"formik"
16-
import{useRef,useState,FC}from"react"
10+
import{FC}from"react"
1711
import{useTranslation}from"react-i18next"
18-
import{colors}from"theme/colors"
1912
import{getFormHelpers,nameValidator,onChangeTrimmed}from"util/formUtils"
2013
import*asYupfrom"yup"
2114

@@ -37,7 +30,6 @@ const UpdateGroupForm: FC<{
3730
onCancel:()=>void
3831
isLoading:boolean
3932
}>=({ group, errors, onSubmit, onCancel, isLoading})=>{
40-
const[isEmojiPickerOpen,setIsEmojiPickerOpen]=useState(false)
4133
constform=useFormik<FormData>({
4234
initialValues:{
4335
name:group.name,
@@ -48,9 +40,6 @@ const UpdateGroupForm: FC<{
4840
onSubmit,
4941
})
5042
constgetFieldHelpers=getFormHelpers<FormData>(form,errors)
51-
consthasIcon=form.values.avatar_url&&form.values.avatar_url!==""
52-
constemojiButtonRef=useRef<HTMLButtonElement>(null)
53-
conststyles=useStyles()
5443
const{ t}=useTranslation("common")
5544

5645
return(
@@ -65,65 +54,16 @@ const UpdateGroupForm: FC<{
6554
label="Name"
6655
variant="outlined"
6756
/>
68-
<TextField
57+
58+
<LazyIconField
6959
{...getFieldHelpers("avatar_url")}
7060
onChange={onChangeTrimmed(form)}
71-
autoFocus
7261
fullWidth
73-
label="Icon"
62+
label={t("form.fields.icon")}
7463
variant="outlined"
75-
InputProps={{
76-
endAdornment:hasIcon ?(
77-
<InputAdornmentposition="end">
78-
<img
79-
alt=""
80-
src={form.values.avatar_url}
81-
className={styles.adornment}
82-
// This prevent browser to display the ugly error icon if the
83-
// image path is wrong or user didn't finish typing the url
84-
onError={(e)=>(e.currentTarget.style.display="none")}
85-
onLoad={(e)=>(e.currentTarget.style.display="inline")}
86-
/>
87-
</InputAdornment>
88-
) :undefined,
89-
}}
64+
onPickEmoji={(value)=>form.setFieldValue("avatar_url",value)}
9065
/>
9166

92-
<Button
93-
fullWidth
94-
ref={emojiButtonRef}
95-
variant="outlined"
96-
size="small"
97-
endIcon={<OpenDropdown/>}
98-
onClick={()=>{
99-
setIsEmojiPickerOpen((v)=>!v)
100-
}}
101-
>
102-
{t("emojiPicker.select")}
103-
</Button>
104-
105-
<Popover
106-
id="emoji"
107-
open={isEmojiPickerOpen}
108-
anchorEl={emojiButtonRef.current}
109-
onClose={()=>{
110-
setIsEmojiPickerOpen(false)
111-
}}
112-
>
113-
<Picker
114-
theme="dark"
115-
data={data}
116-
onEmojiSelect={(emojiData)=>{
117-
form
118-
.setFieldValue("avatar_url",`/emojis/${emojiData.unified}.png`)
119-
.catch((ex)=>{
120-
console.error(ex)
121-
})
122-
setIsEmojiPickerOpen(false)
123-
}}
124-
/>
125-
</Popover>
126-
12767
<TextField
12868
{...getFieldHelpers("quota_allowance")}
12969
onChange={onChangeTrimmed(form)}
@@ -182,21 +122,4 @@ export const SettingsGroupPageView: FC<SettingsGroupPageViewProps> = ({
182122
)
183123
}
184124

185-
constuseStyles=makeStyles((theme)=>({
186-
"@global":{
187-
"em-emoji-picker":{
188-
"--rgb-background":theme.palette.background.paper,
189-
"--rgb-input":colors.gray[17],
190-
"--rgb-color":colors.gray[4],
191-
},
192-
},
193-
adornment:{
194-
width:theme.spacing(3),
195-
height:theme.spacing(3),
196-
},
197-
iconField:{
198-
paddingBottom:theme.spacing(0.5),
199-
},
200-
}))
201-
202125
exportdefaultSettingsGroupPageView

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp