fix(vite): remove "second" compression pass

feat/draggable-server-list
Paul Makles 2022-01-02 13:09:03 +00:00
parent 668963e7a0
commit 096e0c84c1
4 changed files with 235 additions and 182 deletions

View File

@ -151,7 +151,6 @@
"typescript": "^4.4.2", "typescript": "^4.4.2",
"ulid": "^2.3.0", "ulid": "^2.3.0",
"use-resize-observer": "^7.0.0", "use-resize-observer": "^7.0.0",
"vite-plugin-compression": "^0.3.6",
"vite-plugin-pwa": "^0.8.1", "vite-plugin-pwa": "^0.8.1",
"workbox-precaching": "^6.1.5" "workbox-precaching": "^6.1.5"
}, },

View File

@ -1,15 +1,18 @@
import { Plus, LinkExternal } from "@styled-icons/boxicons-regular"; import { Plus, LinkExternal } from "@styled-icons/boxicons-regular";
import { Cog, Compass } from "@styled-icons/boxicons-solid"; import { Cog, Compass } from "@styled-icons/boxicons-solid";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { DragDropContext } from "react-beautiful-dnd";
import { Link, useHistory, useLocation, useParams } from "react-router-dom"; import { Link, useHistory, useLocation, useParams } from "react-router-dom";
import { RelationshipStatus } from "revolt-api/types/Users"; import { RelationshipStatus } from "revolt-api/types/Users";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { attachContextMenu } from "preact-context-menu"; import { attachContextMenu } from "preact-context-menu";
import { Text } from "preact-i18n"; import { Text } from "preact-i18n";
import { useState } from "preact/hooks";
import ConditionalLink from "../../../lib/ConditionalLink"; import ConditionalLink from "../../../lib/ConditionalLink";
import PaintCounter from "../../../lib/PaintCounter"; import PaintCounter from "../../../lib/PaintCounter";
import { Draggable, Droppable } from "../../../lib/dnd";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { useApplicationState } from "../../../mobx/State"; import { useApplicationState } from "../../../mobx/State";
@ -235,7 +238,7 @@ export default observer(() => {
const { server: server_id } = useParams<{ server?: string }>(); const { server: server_id } = useParams<{ server?: string }>();
const server = server_id ? client.servers.get(server_id) : undefined; const server = server_id ? client.servers.get(server_id) : undefined;
const servers = [...client.servers.values()]; const [servers, setServers] = useState([...client.servers.values()]);
const channels = [...client.channels.values()]; const channels = [...client.channels.values()];
const history = useHistory(); const history = useHistory();
@ -250,181 +253,246 @@ export default observer(() => {
typeof server === "undefined" && !path.startsWith("/invite"); typeof server === "undefined" && !path.startsWith("/invite");
return ( return (
<ServersBase> <DragDropContext
<ServerList> onDragEnd={(target) => {
<ConditionalLink if (target.destination) {
active={homeActive} const arr = [...servers];
to={state.layout.getLastHomePath()}> arr.splice(
<ServerEntry home active={homeActive}> target.destination.index,
<Swoosh /> 0,
<div arr.splice(target.source.index, 1)[0],
onContextMenu={attachContextMenu("Status")} );
onClick={() => setServers(arr);
homeActive && history.push("/settings") }
}> }}>
<UserHover user={client.user ?? undefined}> <ServersBase>
<Icon <Droppable droppableId="server_list">
size={42} {(provided) => (
unread={ <ServerList
alertCount > 0 ? "mention" : undefined ref={provided.innerRef}
} {...provided.droppableProps}>
count={alertCount}> <ConditionalLink
<UserIcon active={homeActive}
target={client.user ?? undefined} to={state.layout.getLastHomePath()}>
size={32} <ServerEntry home active={homeActive}>
status <Swoosh />
hover <div
/> onContextMenu={attachContextMenu(
</Icon> "Status",
</UserHover> )}
</div> onClick={() =>
</ServerEntry> homeActive &&
</ConditionalLink> history.push("/settings")
{channels }>
.filter( <UserHover
(x) => user={client.user ?? undefined}>
(x.channel_type === "DirectMessage" || <Icon
x.channel_type === "Group") && size={42}
x.unread, unread={
) alertCount > 0
.map((x) => { ? "mention"
const unreadCount = x.mentions.length; : undefined
return ( }
<Link to={`/channel/${x._id}`}> count={alertCount}>
<ServerEntry
home
active={false}
onContextMenu={attachContextMenu("Menu", {
channel: x._id,
unread: true,
})}>
<div>
<Icon
size={42}
unread={
unreadCount > 0
? "mention"
: "unread"
}
count={unreadCount}>
{x.channel_type ===
"DirectMessage" ? (
<UserIcon <UserIcon
target={x.recipient} target={
client.user ?? undefined
}
size={32} size={32}
status
hover hover
/> />
) : ( </Icon>
<ChannelIcon </UserHover>
target={x}
size={32}
hover
/>
)}
</Icon>
</div> </div>
</ServerEntry> </ServerEntry>
</Link> </ConditionalLink>
); {channels
})} .filter(
<LineDivider /> (x) =>
{servers.map((server) => { (x.channel_type === "DirectMessage" ||
const active = server._id === server_id; x.channel_type === "Group") &&
x.unread,
)
.map((x) => {
const unreadCount = x.mentions.length;
return (
<Link to={`/channel/${x._id}`}>
<ServerEntry
home
active={false}
onContextMenu={attachContextMenu(
"Menu",
{
channel: x._id,
unread: true,
},
)}>
<div>
<Icon
size={42}
unread={
unreadCount > 0
? "mention"
: "unread"
}
count={unreadCount}>
{x.channel_type ===
"DirectMessage" ? (
<UserIcon
target={
x.recipient
}
size={32}
hover
/>
) : (
<ChannelIcon
target={x}
size={32}
hover
/>
)}
</Icon>
</div>
</ServerEntry>
</Link>
);
})}
<LineDivider />
{servers.map((server, index) => {
const active = server._id === server_id;
const isUnread = server.isUnread(state.notifications); const isUnread = server.isUnread(
const mentionCount = server.getMentions( state.notifications,
state.notifications, );
).length; const mentionCount = server.getMentions(
state.notifications,
).length;
return ( return (
<ConditionalLink <Draggable
key={server._id} key={server._id}
active={active} draggableId={server._id}
to={state.layout.getServerPath(server._id)}> index={index}>
<ServerEntry {(provided, snapshot) => (
active={active} <div
onContextMenu={attachContextMenu("Menu", { {...provided.draggableProps}
server: server._id, {...provided.dragHandleProps}
unread: isUnread, ref={provided.innerRef}>
})}> <ConditionalLink
<Swoosh /> active={active}
to={state.layout.getServerPath(
server._id,
)}>
<ServerEntry
active={active}
onContextMenu={attachContextMenu(
"Menu",
{
server: server._id,
unread: isUnread,
},
)}>
{!snapshot.isDragging && (
<Swoosh />
)}
<Tooltip
content={
server.name
}
placement="right">
<Icon
size={42}
unread={
mentionCount >
0
? "mention"
: isUnread
? "unread"
: undefined
}
count={
mentionCount
}>
<ServerIcon
size={32}
target={
server
}
/>
</Icon>
</Tooltip>
</ServerEntry>
</ConditionalLink>
</div>
)}
</Draggable>
);
})}
{provided.placeholder}
<ServerCircle>
<Tooltip <Tooltip
content={server.name} content="Add a Server"
placement="right"> placement="right">
<Icon <div className="circle">
size={42} <IconButton
unread={ onClick={() =>
mentionCount > 0 openScreen({
? "mention" id: "special_input",
: isUnread type: "create_server",
? "unread" })
: undefined }>
} <Plus size={32} />
count={mentionCount}> </IconButton>
<ServerIcon size={32} target={server} /> </div>
</Icon>
</Tooltip> </Tooltip>
</ServerEntry> </ServerCircle>
</ConditionalLink> <ServerCircle>
); <Tooltip
})} content={
{/*<LineDivider />*/} <div
<ServerCircle> style={{
<Tooltip content="Add a Server" placement="right"> display: "flex",
<div className="circle"> alignItems: "center",
<IconButton gap: "4px",
onClick={() => }}>
openScreen({ <div>Discover Public Servers</div>
id: "special_input", <LinkExternal size={12} />
type: "create_server", </div>
}) }
}> placement="right">
<Plus size={32} /> <div className="circle">
</IconButton> <IconButton>
</div> <a
</Tooltip> href="https://revolt.social"
</ServerCircle> target="_blank"
<ServerCircle> rel="noreferrer">
<Tooltip <Compass size={32} />
content={ </a>
<div </IconButton>
style={{ </div>
display: "flex", </Tooltip>
alignItems: "center", </ServerCircle>
gap: "4px", </ServerList>
}}> )}
<div>Discover Public Servers</div> </Droppable>
<LinkExternal size={12} /> <PaintCounter small />
</div> {!isTouchscreenDevice && (
} <SettingsButton>
placement="right"> <Link to="/settings">
<div className="circle"> <Tooltip
<IconButton> content={<Text id="app.settings.title" />}
<a placement="right">
href="https://revolt.social" <IconButton>
target="_blank" <Cog size={32} strokeWidth="0.5" />
rel="noreferrer"> </IconButton>
<Compass size={32} /> </Tooltip>
</a> </Link>
</IconButton> </SettingsButton>
</div> )}
</Tooltip> </ServersBase>
</ServerCircle> </DragDropContext>
</ServerList>
<PaintCounter small />
{!isTouchscreenDevice && (
<SettingsButton>
<Link to="/settings">
<Tooltip
content={<Text id="app.settings.title" />}
placement="right">
<IconButton>
<Cog size={32} strokeWidth="0.5" />
</IconButton>
</Tooltip>
</Link>
</SettingsButton>
)}
</ServersBase>
); );
}); });

View File

@ -2,7 +2,6 @@ import replace from "@rollup/plugin-replace";
import { readFileSync } from "fs"; import { readFileSync } from "fs";
import { resolve } from "path"; import { resolve } from "path";
import { defineConfig } from "vite"; import { defineConfig } from "vite";
import viteCompression from "vite-plugin-compression";
import { VitePWA } from "vite-plugin-pwa"; import { VitePWA } from "vite-plugin-pwa";
import preact from "@preact/preset-vite"; import preact from "@preact/preset-vite";
@ -43,10 +42,6 @@ function getVersion() {
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
viteCompression({
verbose: true,
algorithm: "brotliCompress",
}),
preact(), preact(),
VitePWA({ VitePWA({
srcDir: "src", srcDir: "src",

View File

@ -1887,7 +1887,7 @@ chalk@^2.0.0:
escape-string-regexp "^1.0.5" escape-string-regexp "^1.0.5"
supports-color "^5.3.0" supports-color "^5.3.0"
chalk@^4.0.0, chalk@^4.1.2: chalk@^4.0.0:
version "4.1.2" version "4.1.2"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA== integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@ -4357,15 +4357,6 @@ value-equal@^1.0.1:
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c" resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw== integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
vite-plugin-compression@^0.3.6:
version "0.3.6"
resolved "https://registry.yarnpkg.com/vite-plugin-compression/-/vite-plugin-compression-0.3.6.tgz#85e3ce5047ae6747bc3952177177a852fac901be"
integrity sha512-aSskQCJsP3VQ8PsnY+vO7UfD5qoFMOEuzg0PG2E9Zqyx+ARmc3wr9KCgOFraZOFW1Y4UAa5BR0SMTjoxHRMJoQ==
dependencies:
chalk "^4.1.2"
debug "^4.3.2"
fs-extra "^10.0.0"
vite-plugin-pwa@^0.8.1: vite-plugin-pwa@^0.8.1:
version "0.8.2" version "0.8.2"
resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.8.2.tgz#2789a157e2f71faf834d968945efc22eee9ad64a" resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.8.2.tgz#2789a157e2f71faf834d968945efc22eee9ad64a"