Compare commits
No commits in common. "c41a8e31d1b85a2bcd6d9c0805ddd15d131ccf7f" and "f31a4c33ad4bbf51368d4033742fb47aa93518b7" have entirely different histories.
c41a8e31d1
...
f31a4c33ad
9 changed files with 7 additions and 188 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -3,4 +3,3 @@ dist/
|
|||
dev-dist/
|
||||
.env.local
|
||||
.env.*.local
|
||||
.DS_Store
|
||||
|
|
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
@ -52,7 +52,6 @@
|
|||
"@solid-primitives/map": "^0.4.13",
|
||||
"@solid-primitives/page-visibility": "^2.0.17",
|
||||
"@solid-primitives/resize-observer": "^2.0.26",
|
||||
"@solid-primitives/static-store": "^0.1.0",
|
||||
"@solidjs/router": "^0.15.2",
|
||||
"@suid/icons-material": "^0.8.1",
|
||||
"@suid/material": "^0.18.0",
|
||||
|
@ -74,11 +73,5 @@
|
|||
"workbox-core": "^7.3.0",
|
||||
"workbox-precaching": "^7.3.0"
|
||||
},
|
||||
"packageManager": "bun@1.1.34",
|
||||
"trustedDependencies": [
|
||||
"edgedriver"
|
||||
],
|
||||
"patchedDependencies": {
|
||||
"@suid/vite-plugin@0.3.1": "patches/@suid%2Fvite-plugin@0.3.1.patch"
|
||||
}
|
||||
"packageManager": "bun@1.1.34"
|
||||
}
|
||||
|
|
|
@ -1,15 +0,0 @@
|
|||
diff --git a/index.mjs b/index.mjs
|
||||
index 2cf42b9506e130fcc9c1ca166d03d3d8b9b5781c..7dc283602ff09b94c6300f45eac223125eebeb46 100644
|
||||
--- a/index.mjs
|
||||
+++ b/index.mjs
|
||||
@@ -2,8 +2,8 @@ import $generate from "@babel/generator";
|
||||
import { parse } from "@babel/parser";
|
||||
import $traverse from "@babel/traverse";
|
||||
import * as types from "@babel/types";
|
||||
-const traverse = $traverse.default;
|
||||
-const generate = $generate.default;
|
||||
+const traverse = $traverse.default ?? $traverse;
|
||||
+const generate = $generate.default ?? $generate;
|
||||
const defaultOptions = {
|
||||
disableOptimizeDeps: [
|
||||
"@suid/base",
|
|
@ -33,7 +33,6 @@ import { Service } from "./serviceworker/services.js";
|
|||
import { makeEventListener } from "@solid-primitives/event-listener";
|
||||
import { ServiceWorkerProvider } from "./platform/host.js";
|
||||
import StackedRouter from "./platform/StackedRouter.js";
|
||||
import {ResizeObserverBoundary} from "~platform/resize-observer.jsx";
|
||||
|
||||
const AccountSignIn = lazy(() => import("./accounts/SignIn.js"));
|
||||
const AccountMastodonOAuth2Callback = lazy(
|
||||
|
@ -158,7 +157,6 @@ const App: Component = () => {
|
|||
}}
|
||||
>
|
||||
<ThemeProvider theme={theme}>
|
||||
<ResizeObserverBoundary>
|
||||
<AppLocaleProvider
|
||||
value={{
|
||||
language: lang,
|
||||
|
@ -178,7 +176,6 @@ const App: Component = () => {
|
|||
</ServiceWorkerProvider>
|
||||
</ClientProvider>
|
||||
</AppLocaleProvider>
|
||||
</ResizeObserverBoundary>
|
||||
</ThemeProvider>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { createElementSize } from "~platform/resize-observer";
|
||||
import { createElementSize } from "@solid-primitives/resize-observer";
|
||||
import {
|
||||
JSX,
|
||||
Show,
|
||||
|
|
|
@ -10,7 +10,7 @@ import {
|
|||
} from "solid-js";
|
||||
import { Dynamic, type DynamicProps } from "solid-js/web";
|
||||
import MasonryLayout from "masonry-layout";
|
||||
import { createElementSize } from "~platform/resize-observer";
|
||||
import { createElementSize } from "@solid-primitives/resize-observer";
|
||||
import "./Masonry.css";
|
||||
|
||||
type MasonryContainer =
|
||||
|
|
|
@ -1,158 +0,0 @@
|
|||
import {
|
||||
createContext,
|
||||
createEffect,
|
||||
onCleanup,
|
||||
sharedConfig,
|
||||
useContext,
|
||||
type JSX,
|
||||
} from "solid-js";
|
||||
import { isDev, isServer } from "solid-js/web";
|
||||
import { createStaticStore } from "@solid-primitives/static-store";
|
||||
|
||||
export type ObserveCallback<E extends Element> = (
|
||||
entry: ResizeObserverEntry & { readonly target: E },
|
||||
) => void;
|
||||
export type ObserveElement = <E extends Element = Element>(
|
||||
element: E,
|
||||
callback: ObserveCallback<E>,
|
||||
) => () => void;
|
||||
|
||||
const ResizeObserverContext = /* @__PURE__ */ createContext<ObserveElement>();
|
||||
|
||||
export function useResizeObserver() {
|
||||
const observe = useContext(ResizeObserverContext);
|
||||
|
||||
if (isDev && !observe) {
|
||||
throw new TypeError(
|
||||
"ObserverElement is not found, this function must be called in <ResizeOberserBoundary />",
|
||||
);
|
||||
}
|
||||
|
||||
return observe!;
|
||||
}
|
||||
|
||||
function ResizeObserverBoundaryClient(props: { children: JSX.Element }) {
|
||||
const map = new Map<
|
||||
Element,
|
||||
ObserveCallback<Element> | ObserveCallback<Element>[]
|
||||
>();
|
||||
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
for (const entry of entries) {
|
||||
const callback = map.get(entry.target);
|
||||
if (!callback) return;
|
||||
if (Array.isArray(callback)) {
|
||||
for (const f of callback) {
|
||||
f(entry);
|
||||
}
|
||||
} else {
|
||||
callback(entry);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
onCleanup(() => {
|
||||
observer.disconnect();
|
||||
});
|
||||
|
||||
const observe: ObserveElement = (
|
||||
element: Element,
|
||||
callback: ObserveCallback<any>,
|
||||
) => {
|
||||
const callbacks = map.get(element);
|
||||
if (!callbacks) {
|
||||
map.set(element, callback);
|
||||
observer.observe(element);
|
||||
} else if (Array.isArray(callbacks)) {
|
||||
callbacks.push(callback);
|
||||
} else {
|
||||
map.set(element, [callbacks, callback]);
|
||||
}
|
||||
|
||||
return () => {
|
||||
const callbacks = map.get(element);
|
||||
if (callbacks === null) {
|
||||
observer.unobserve(element);
|
||||
} else if (Array.isArray(callbacks)) {
|
||||
const idx = callbacks.indexOf(callback);
|
||||
if (idx !== -1) {
|
||||
callbacks.splice(idx, 1);
|
||||
}
|
||||
|
||||
if (callbacks.length === 0) {
|
||||
observer.unobserve(element);
|
||||
map.delete(element);
|
||||
}
|
||||
} else {
|
||||
observer.unobserve(element);
|
||||
map.delete(element);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<ResizeObserverContext.Provider value={observe}>
|
||||
{props.children}
|
||||
</ResizeObserverContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function ResizeObserverBoundaryServer(props: { children: JSX.Element }) {
|
||||
return (
|
||||
<ResizeObserverContext.Provider
|
||||
value={(() => {}) as unknown as ObserveElement}
|
||||
>
|
||||
{props.children}
|
||||
</ResizeObserverContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export const ResizeObserverBoundary = isServer
|
||||
? ResizeObserverBoundaryServer
|
||||
: ResizeObserverBoundaryClient;
|
||||
|
||||
const ELEMENT_SIZE_FALLBACK = { width: null, height: null };
|
||||
|
||||
function getElementSize(target: Element) {
|
||||
if (isServer || !target) {
|
||||
return { ...ELEMENT_SIZE_FALLBACK };
|
||||
}
|
||||
const { width, height } = target.getBoundingClientRect();
|
||||
return { width, height };
|
||||
}
|
||||
|
||||
export type NullableSize = {width: number | null, height: number | null}
|
||||
|
||||
export function createElementSize(
|
||||
target: Element | (() => Element | undefined | null | false),
|
||||
): Readonly<NullableSize> {
|
||||
if (isServer) {
|
||||
return ELEMENT_SIZE_FALLBACK;
|
||||
}
|
||||
const isFn = typeof target === "function";
|
||||
const [size, setSize] = createStaticStore(
|
||||
sharedConfig.context || isFn
|
||||
? ELEMENT_SIZE_FALLBACK
|
||||
: getElementSize(target),
|
||||
);
|
||||
const callback: ObserveCallback<Element> = (entry) => {
|
||||
setSize(getElementSize(entry.target));
|
||||
};
|
||||
const observe = useResizeObserver();
|
||||
if (isFn) {
|
||||
createEffect(() => {
|
||||
const el = target();
|
||||
if (el) {
|
||||
setSize(getElementSize(el));
|
||||
const unobserve = observe(el, callback);
|
||||
onCleanup(unobserve);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const unobserve = observe(target, callback);
|
||||
onCleanup(unobserve);
|
||||
}
|
||||
return size;
|
||||
}
|
||||
|
||||
export { useWindowSize } from "@solid-primitives/resize-observer";
|
|
@ -12,7 +12,10 @@ import {
|
|||
} from "solid-js";
|
||||
import MediaViewer from "../MediaViewer";
|
||||
import { render } from "solid-js/web";
|
||||
import { createElementSize, useWindowSize } from "~platform/resize-observer";
|
||||
import {
|
||||
createElementSize,
|
||||
useWindowSize,
|
||||
} from "@solid-primitives/resize-observer";
|
||||
import { useStore } from "@nanostores/solid";
|
||||
import { $settings } from "../../settings/stores";
|
||||
import { averageColorHex } from "~platform/blurhash";
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue