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

chore: Improve bundle size#5761

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
BrunoQuaresma merged 6 commits intomainfrombq/visualizer
Jan 18, 2023
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions.gitignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -36,6 +36,9 @@ cli/testdata/.gen-golden
/dist/
site/out/

# Bundle analysis
site/stats/

*.tfstate
*.tfstate.backup
*.tfplan
Expand Down
3 changes: 3 additions & 0 deletions.prettierignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -39,6 +39,9 @@ cli/testdata/.gen-golden
/dist/
site/out/

# Bundle analysis
site/stats/

*.tfstate
*.tfstate.backup
*.tfplan
Expand Down
3 changes: 3 additions & 0 deletionssite/.eslintignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -39,6 +39,9 @@ playwright-report/*
../dist/
out/

# Bundle analysis
stats/

*.tfstate
*.tfstate.backup
*.tfplan
Expand Down
3 changes: 3 additions & 0 deletionssite/.prettierignore
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -39,6 +39,9 @@ playwright-report/*
../dist/
out/

# Bundle analysis
stats/

*.tfstate
*.tfstate.backup
*.tfplan
Expand Down
23 changes: 0 additions & 23 deletionssite/jest.setup.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
import "@testing-library/jest-dom"
import { cleanup } from "@testing-library/react"
import crypto from "crypto"
import * as util from "util"
import { server } from "./src/testHelpers/server"

// Polyfill the getRandomValues that is used on utils/random.ts
Expand DownExpand Up@@ -31,27 +30,5 @@ afterEach(() => {
// Clean up after the tests are finished.
afterAll(() => server.close())

// Helper utility to fail jest tests if a console.error is logged
// Pulled from this blog post:
// https://www.benmvp.com/blog/catch-warnings-jest-tests/

// For now, I limited this to just 'error' - but failing on warnings
// would be a nice next step! We may need to filter out some noise
// from material-ui though.
const CONSOLE_FAIL_TYPES = ["error" /* 'warn' */] as const

// Throw errors when a `console.error` or `console.warn` happens
// by overriding the functions
CONSOLE_FAIL_TYPES.forEach((logType: typeof CONSOLE_FAIL_TYPES[number]) => {
global.console[logType] = <Type>(format: string, ...args: Type[]): void => {
throw new Error(
`Failing due to console.${logType} while running test!\n\n${util.format(
format,
...args,
)}`,
)
}
})

// This is needed because we are compiling under `--isolatedModules`
export {}
3 changes: 3 additions & 0 deletionssite/package.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -24,6 +24,7 @@
"test:coverage": "jest --selectProjects test --collectCoverage",
"test:watch": "jest --selectProjects test --watch",
"typegen": "xstate typegen 'src/**/*.ts'",
"stats": "STATS=true yarn build && npx http-server ./stats -p 8081 -c-1",
"deadcode": "ts-prune | grep -v \".stories\\|.typegen\\|.config\\|e2e\\|__mocks__\\|used in module\\|testHelpers\\|typesGenerated\" || echo \"No deadcode found.\""
},
"dependencies": {
Expand DownExpand Up@@ -57,6 +58,7 @@
"i18next": "21.9.1",
"js-untar": "2.0.0",
"just-debounce-it": "3.1.1",
"lodash": "4.17.21",
"playwright": "^1.29.2",
"react": "18.2.0",
"react-chartjs-2": "4.3.1",
Expand All@@ -68,6 +70,7 @@
"react-router-dom": "6.4.1",
"react-syntax-highlighter": "15.5.0",
"remark-gfm": "3.0.1",
"rollup-plugin-visualizer": "5.9.0",
"sourcemapped-stacktrace": "1.1.11",
"ts-prune": "0.10.3",
"tzdata": "1.0.30",
Expand Down
9 changes: 5 additions & 4 deletionssite/src/components/IconField/IconField.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
import Button from "@material-ui/core/Button"
import InputAdornment from "@material-ui/core/InputAdornment"
import Popover from "@material-ui/core/Popover"
import TextField, { TextFieldProps } from "@material-ui/core/TextField"
import TextField from "@material-ui/core/TextField"
import { OpenDropdown } from "components/DropdownArrows/DropdownArrows"
import { useRef, FC, useState } from "react"
import Picker from "@emoji-mart/react"
import { makeStyles } from "@material-ui/core/styles"
import { colors } from "theme/colors"
import { useTranslation } from "react-i18next"
import data from "@emoji-mart/data/sets/14/twitter.json"
import { IconFieldProps } from "./types"

export const IconField: FC<
TextFieldProps & { onPickEmoji: (value: string) => void }
> = ({ onPickEmoji, ...textFieldProps }) => {
const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
if (
typeof textFieldProps.value !== "string" &&
typeof textFieldProps.value !== "undefined"
Expand DownExpand Up@@ -111,3 +110,5 @@ const useStyles = makeStyles((theme) => ({
paddingBottom: theme.spacing(0.5),
},
}))

export default IconField
12 changes: 12 additions & 0 deletionssite/src/components/IconField/LazyIconField.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
import { lazy, FC, Suspense } from "react"
import { IconFieldProps } from "./types"

const IconField = lazy(() => import("./IconField"))

export const LazyIconField: FC<IconFieldProps> = (props) => {
return (
<Suspense>
<IconField {...props} />
</Suspense>
)
}
5 changes: 5 additions & 0 deletionssite/src/components/IconField/types.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
import { TextFieldProps } from "@material-ui/core/TextField"

export type IconFieldProps = TextFieldProps & {
onPickEmoji: (value: string) => void
}
4 changes: 2 additions & 2 deletionssite/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,7 +7,6 @@ import {
TemplateExample,
} from "api/typesGenerated"
import { FormFooter } from "components/FormFooter/FormFooter"
import { IconField } from "components/IconField/IconField"
import { ParameterInput } from "components/ParameterInput/ParameterInput"
import { Stack } from "components/Stack/Stack"
import {
Expand All@@ -23,6 +22,7 @@ import { CreateTemplateData } from "xServices/createTemplate/createTemplateXServ
import * as Yup from "yup"
import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs"
import { HelpTooltip, HelpTooltipText } from "components/Tooltips/HelpTooltip"
import { LazyIconField } from "components/IconField/LazyIconField"

const validationSchema = Yup.object({
name: nameValidator("Name"),
Expand DownExpand Up@@ -154,7 +154,7 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = ({
variant="outlined"
/>

<IconField
<LazyIconField
{...getFieldHelpers("icon")}
disabled={isSubmitting}
onChange={onChangeTrimmed(form)}
Expand Down
89 changes: 6 additions & 83 deletionssite/src/pages/GroupsPage/SettingsGroupPageView.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,14 @@
import data from "@emoji-mart/data/sets/14/twitter.json"
import Picker from "@emoji-mart/react"
import Button from "@material-ui/core/Button"
import InputAdornment from "@material-ui/core/InputAdornment"
import Popover from "@material-ui/core/Popover"
import { makeStyles } from "@material-ui/core/styles"
import TextField from "@material-ui/core/TextField"
import { Group } from "api/typesGenerated"
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
import { OpenDropdown } from "components/DropdownArrows/DropdownArrows"
import { FormFooter } from "components/FormFooter/FormFooter"
import { FullPageForm } from "components/FullPageForm/FullPageForm"
import { LazyIconField } from "components/IconField/LazyIconField"
import { FullScreenLoader } from "components/Loader/FullScreenLoader"
import { Margins } from "components/Margins/Margins"
import { useFormik } from "formik"
import {useRef, useState,FC } from "react"
import { FC } from "react"
import { useTranslation } from "react-i18next"
import { colors } from "theme/colors"
import { getFormHelpers, nameValidator, onChangeTrimmed } from "util/formUtils"
import * as Yup from "yup"

Expand All@@ -37,7 +30,6 @@ const UpdateGroupForm: FC<{
onCancel: () => void
isLoading: boolean
}> = ({ group, errors, onSubmit, onCancel, isLoading }) => {
const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false)
const form = useFormik<FormData>({
initialValues: {
name: group.name,
Expand All@@ -48,9 +40,6 @@ const UpdateGroupForm: FC<{
onSubmit,
})
const getFieldHelpers = getFormHelpers<FormData>(form, errors)
const hasIcon = form.values.avatar_url && form.values.avatar_url !== ""
const emojiButtonRef = useRef<HTMLButtonElement>(null)
const styles = useStyles()
const { t } = useTranslation("common")

return (
Expand All@@ -65,65 +54,16 @@ const UpdateGroupForm: FC<{
label="Name"
variant="outlined"
/>
<TextField

<LazyIconField
{...getFieldHelpers("avatar_url")}
onChange={onChangeTrimmed(form)}
autoFocus
fullWidth
label="Icon"
label={t("form.fields.icon")}
variant="outlined"
InputProps={{
endAdornment: hasIcon ? (
<InputAdornment position="end">
<img
alt=""
src={form.values.avatar_url}
className={styles.adornment}
// This prevent browser to display the ugly error icon if the
// image path is wrong or user didn't finish typing the url
onError={(e) => (e.currentTarget.style.display = "none")}
onLoad={(e) => (e.currentTarget.style.display = "inline")}
/>
</InputAdornment>
) : undefined,
}}
onPickEmoji={(value) => form.setFieldValue("avatar_url", value)}
/>

<Button
fullWidth
ref={emojiButtonRef}
variant="outlined"
size="small"
endIcon={<OpenDropdown />}
onClick={() => {
setIsEmojiPickerOpen((v) => !v)
}}
>
{t("emojiPicker.select")}
</Button>

<Popover
id="emoji"
open={isEmojiPickerOpen}
anchorEl={emojiButtonRef.current}
onClose={() => {
setIsEmojiPickerOpen(false)
}}
>
<Picker
theme="dark"
data={data}
onEmojiSelect={(emojiData) => {
form
.setFieldValue("avatar_url", `/emojis/${emojiData.unified}.png`)
.catch((ex) => {
console.error(ex)
})
setIsEmojiPickerOpen(false)
}}
/>
</Popover>

<TextField
{...getFieldHelpers("quota_allowance")}
onChange={onChangeTrimmed(form)}
Expand DownExpand Up@@ -182,21 +122,4 @@ export const SettingsGroupPageView: FC<SettingsGroupPageViewProps> = ({
)
}

const useStyles = makeStyles((theme) => ({
"@global": {
"em-emoji-picker": {
"--rgb-background": theme.palette.background.paper,
"--rgb-input": colors.gray[17],
"--rgb-color": colors.gray[4],
},
},
adornment: {
width: theme.spacing(3),
height: theme.spacing(3),
},
iconField: {
paddingBottom: theme.spacing(0.5),
},
}))

export default SettingsGroupPageView
Loading
[8]ページ先頭
©2009-2025 Movatter.jp