diff --git a/src/Router.tsx b/src/Router.tsx index 532168b..985c024 100644 --- a/src/Router.tsx +++ b/src/Router.tsx @@ -1,7 +1,7 @@ import { Component, createResource, lazy } from 'solid-js'; import { Routes, Route, Navigate, RouteDataFuncArgs } from "@solidjs/router"; -import { PrimalWindow } from './types/primal'; +import { ComponentLog, PrimalWindow } from './types/primal'; import { fetchKnownProfiles } from './lib/profile'; import { useHomeContext } from './contexts/HomeContext'; @@ -41,6 +41,8 @@ const Menu = lazy(() => import('./pages/Settings/Menu')); const primalWindow = window as PrimalWindow; +const isDev = localStorage.getItem('devMode') === 'true'; + const Router: Component = () => { const account = useAccountContext(); @@ -54,7 +56,7 @@ const Router: Component = () => { const notifications = useNotificationsContext(); const search = useSearchContext(); - const loadPrimalStores = () => { + if (isDev) { primalWindow.primal = { account, explore, @@ -67,9 +69,10 @@ const Router: Component = () => { settings, thread, }; - }; - primalWindow.loadPrimalStores = loadPrimalStores; + primalWindow.onPrimalComponentMount = (data: ComponentLog) => {}; + primalWindow.onPrimalComponentCleanup = (data: ComponentLog) => {}; + } const getKnownProfiles = ({ params }: RouteDataFuncArgs) => { const [profiles] = createResource(params.vanityName, fetchKnownProfiles) diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index 90b6d2d..04c3e33 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -1,17 +1,18 @@ import { Component, createMemo, createSignal, Show } from 'solid-js'; import defaultAvatar from '../../assets/icons/default_nostrich.svg'; import { useMediaContext } from '../../contexts/MediaContext'; -import { getMediaUrl } from '../../lib/media'; +import { hookForDev } from '../../lib/devTools'; import { MediaSize, PrimalUser } from '../../types/primal'; import VerificationCheck from '../VerificationCheck/VerificationCheck'; import styles from './Avatar.module.scss'; const Avatar: Component<{ - src: string | undefined, + src?: string | undefined, size?: "xxs" | "xss" | "xs" | "vs" | "sm" | "md" | "lg" | "xl" | "xxl", user?: PrimalUser, highlightBorder?: boolean, + id?: string, }> = (props) => { const media = useMediaContext(); @@ -78,15 +79,21 @@ const Avatar: Component<{ break; }; - const url = media?.actions.getMediaUrl(props.src, size, true); + const src = props.user?.picture || props.src; + + if (!src) { + return defaultAvatar; + } + + const url = media?.actions.getMediaUrl(src, size, true); setIsCached(!!url); - return url ?? props.src; + return url ?? src; }); const notCachedFlag = () => { - const dev = JSON.parse(localStorage.getItem('devMode') || 'false'); + const dev = localStorage.getItem('devMode') === 'true'; // @ts-ignore if (isCached() || !dev) { @@ -97,7 +104,11 @@ const Avatar: Component<{ } return ( -
+
void, checked?: boolean, label?: string, @@ -13,9 +14,11 @@ const Checkbox: Component<{ }> = (props) => { return ( -
+
-
+
{props.title || intl.formatMessage(t.title)}
@@ -60,4 +62,4 @@ const ConfirmModal: Component<{ ); } -export default ConfirmModal; +export default hookForDev(ConfirmModal); diff --git a/src/components/CustomZap/CustomZap.tsx b/src/components/CustomZap/CustomZap.tsx index 2ad9858..c517869 100644 --- a/src/components/CustomZap/CustomZap.tsx +++ b/src/components/CustomZap/CustomZap.tsx @@ -2,6 +2,7 @@ import { useIntl } from '@cookbook/solid-intl'; import { Component, createEffect, createSignal, For } from 'solid-js'; import { useAccountContext } from '../../contexts/AccountContext'; import { useSettingsContext } from '../../contexts/SettingsContext'; +import { hookForDev } from '../../lib/devTools'; import { zapNote } from '../../lib/zap'; import { userName } from '../../stores/profile'; import { toastZapFail, zapCustomOption } from '../../translations'; @@ -13,6 +14,7 @@ import { useToastContext } from '../Toaster/Toaster'; import styles from './CustomZap.module.scss'; const CustomZap: Component<{ + id?: string, open?: boolean, note: PrimalNote, onConfirm: (amount?: number) => void, @@ -96,7 +98,7 @@ const CustomZap: Component<{ return ( -
+
@@ -153,4 +155,4 @@ const CustomZap: Component<{ ); } -export default CustomZap; +export default hookForDev(CustomZap); diff --git a/src/components/EmbeddedNote/EmbeddedNote.tsx b/src/components/EmbeddedNote/EmbeddedNote.tsx index 472976b..b635cbe 100644 --- a/src/components/EmbeddedNote/EmbeddedNote.tsx +++ b/src/components/EmbeddedNote/EmbeddedNote.tsx @@ -133,7 +133,7 @@ const EmbeddedNote: Component<{ note: PrimalNote, mentionedUsers?: Record
diff --git a/src/components/ExploreMenuItem/ExploreMenuItem.tsx b/src/components/ExploreMenuItem/ExploreMenuItem.tsx index fbff8e6..fe4969d 100644 --- a/src/components/ExploreMenuItem/ExploreMenuItem.tsx +++ b/src/components/ExploreMenuItem/ExploreMenuItem.tsx @@ -1,6 +1,7 @@ import { useIntl } from '@cookbook/solid-intl'; import { A } from '@solidjs/router'; import type { Component } from 'solid-js'; +import { hookForDev } from '../../lib/devTools'; import { scopeDescriptors, timeframeDescriptors } from '../../translations'; import { ScopeDescriptor } from '../../types/primal'; @@ -33,7 +34,7 @@ const timeframeIcons: Record = { latest: styles.clockIcon, } -const ExploreMenuItem: Component<{ scope: string, stat: number }> = (props) => { +const ExploreMenuItem: Component<{ scope: string, stat: number, id?: string }> = (props) => { const intl = useIntl(); @@ -52,7 +53,7 @@ const ExploreMenuItem: Component<{ scope: string, stat: number }> = (props) => { } return ( -
+
@@ -82,4 +83,4 @@ const ExploreMenuItem: Component<{ scope: string, stat: number }> = (props) => { ) } -export default ExploreMenuItem; +export default hookForDev(ExploreMenuItem); diff --git a/src/components/ExploreSidebar/ExploreSidebar.tsx b/src/components/ExploreSidebar/ExploreSidebar.tsx index 0860b88..8e43555 100644 --- a/src/components/ExploreSidebar/ExploreSidebar.tsx +++ b/src/components/ExploreSidebar/ExploreSidebar.tsx @@ -16,8 +16,9 @@ import { getTrendingUsers } from '../../lib/profile'; import { hexToNpub } from '../../lib/keys'; import { exploreSidebarCaption } from '../../translations'; import { useAccountContext } from '../../contexts/AccountContext'; +import { hookForDev } from '../../lib/devTools'; -const ExploreSidebar: Component = () => { +const ExploreSidebar: Component<{ id?: string }> = (props) => { const intl = useIntl(); const account = useAccountContext(); @@ -119,7 +120,7 @@ const ExploreSidebar: Component = () => { // RENDER --------------------------------------- return ( - <> +
{intl.formatMessage(exploreSidebarCaption)}
@@ -132,15 +133,15 @@ const ExploreSidebar: Component = () => { class={styles.user} title={authorName(user)} > - +
{authorName(user)}
) }
- +
) } -export default ExploreSidebar; +export default hookForDev(ExploreSidebar); diff --git a/src/components/ExternalLink/ExternalLink.tsx b/src/components/ExternalLink/ExternalLink.tsx index 39b3c1a..66e6431 100644 --- a/src/components/ExternalLink/ExternalLink.tsx +++ b/src/components/ExternalLink/ExternalLink.tsx @@ -1,5 +1,6 @@ import { Component, Show } from 'solid-js'; import { useSettingsContext } from '../../contexts/SettingsContext'; +import { hookForDev } from '../../lib/devTools'; import styles from './ExternalLink.module.scss'; @@ -8,12 +9,13 @@ const ExternalLink: Component<{ darkIcon: string, label: string, href: string, + id?: string, }> = (props) => { const settings = useSettingsContext(); return ( -
+
= (props) => { +const FeedSelect: Component<{ isPhone?: boolean, id?: string}> = (props) => { const home = useHomeContext(); const settings = useSettingsContext(); @@ -88,4 +89,4 @@ const FeedSelect: Component<{ isPhone?: boolean}> = (props) => { ); } -export default FeedSelect; +export default hookForDev(FeedSelect); diff --git a/src/components/FeedSorter/FeedSorter.tsx b/src/components/FeedSorter/FeedSorter.tsx index 7be3269..5783386 100644 --- a/src/components/FeedSorter/FeedSorter.tsx +++ b/src/components/FeedSorter/FeedSorter.tsx @@ -1,12 +1,13 @@ import { Component, createEffect, createSignal, For, Show } from 'solid-js'; import { useAccountContext } from '../../contexts/AccountContext'; import { useSettingsContext } from '../../contexts/SettingsContext'; +import { hookForDev } from '../../lib/devTools'; import { PrimalFeed } from '../../types/primal'; import styles from './FeedSorter.module.scss'; -const FeedSorter: Component = () => { +const FeedSorter: Component<{ id?: string }> = (props) => { let sorter: any; @@ -109,7 +110,7 @@ const FeedSorter: Component = () => { }); return ( -
+
0}> {(feed, index) => ( @@ -176,4 +177,4 @@ const FeedSorter: Component = () => { ) } -export default FeedSorter; +export default hookForDev(FeedSorter); diff --git a/src/components/FloatingNewPostButton/FloatingNewPostButton.tsx b/src/components/FloatingNewPostButton/FloatingNewPostButton.tsx index 5e41ed2..7f31720 100644 --- a/src/components/FloatingNewPostButton/FloatingNewPostButton.tsx +++ b/src/components/FloatingNewPostButton/FloatingNewPostButton.tsx @@ -1,8 +1,10 @@ +import { Component } from "solid-js"; import { useAccountContext } from "../../contexts/AccountContext"; +import { hookForDev } from "../../lib/devTools"; import styles from "./FloatingNewPostButton.module.scss"; -export default function FloatingNewPostButton() { +const FloatingNewPostButton: Component<{ id?: string }> = (props) => { const account = useAccountContext(); const showNewNoteForm = () => { @@ -12,6 +14,7 @@ export default function FloatingNewPostButton() { return ( ) } + +export default hookForDev(FloatingNewPostButton); diff --git a/src/components/FollowButton/FollowButton.tsx b/src/components/FollowButton/FollowButton.tsx index 3573b28..5627e28 100644 --- a/src/components/FollowButton/FollowButton.tsx +++ b/src/components/FollowButton/FollowButton.tsx @@ -1,6 +1,7 @@ import { useIntl } from '@cookbook/solid-intl'; import { Component, Show } from 'solid-js'; import { useAccountContext } from '../../contexts/AccountContext'; +import { hookForDev } from '../../lib/devTools'; import { account as t } from '../../translations'; import { PrimalUser } from '../../types/primal'; import { useToastContext } from '../Toaster/Toaster'; @@ -8,7 +9,7 @@ import { useToastContext } from '../Toaster/Toaster'; import styles from './FollowButton.module.scss'; -const FollowButton: Component<{ person: PrimalUser | undefined, large?: boolean }> = (props) => { +const FollowButton: Component<{ person: PrimalUser | undefined, large?: boolean, id?: string }> = (props) => { const toast = useToastContext() const account = useAccountContext(); @@ -40,7 +41,7 @@ const FollowButton: Component<{ person: PrimalUser | undefined, large?: boolean return ( -
+
- +
) } -export default PageNav; +export default hookForDev(PageNav); diff --git a/src/components/Paginator/Paginator.tsx b/src/components/Paginator/Paginator.tsx index 52998e0..1561a23 100644 --- a/src/components/Paginator/Paginator.tsx +++ b/src/components/Paginator/Paginator.tsx @@ -1,11 +1,14 @@ -import { onCleanup, onMount } from "solid-js"; +import { Component, onCleanup, onMount } from "solid-js"; +import { hookForDev } from "../../lib/devTools"; import styles from "./Paginator.module.scss"; -export default function Paginator(props: { +const Paginator: Component<{ + id?: string, loadNextPage: (() => void) | undefined, isSmall?: boolean, -}) { +}> = (props) => { let observer: IntersectionObserver | undefined; + let trigger: HTMLDivElement | undefined; onMount(() => { observer = new IntersectionObserver(entries => { @@ -28,7 +31,9 @@ export default function Paginator(props: { }); return ( -
+
) } + +export default hookForDev(Paginator); diff --git a/src/components/ParsedNote/ParsedNote.tsx b/src/components/ParsedNote/ParsedNote.tsx index 52bbde3..8302cda 100644 --- a/src/components/ParsedNote/ParsedNote.tsx +++ b/src/components/ParsedNote/ParsedNote.tsx @@ -15,6 +15,7 @@ import { nip19 } from 'nostr-tools'; import LinkPreview from '../LinkPreview/LinkPreview'; import MentionedUserLink from '../Note/MentionedUserLink/MentionedUserLink'; import { useMediaContext } from '../../contexts/MediaContext'; +import { hookForDev } from '../../lib/devTools'; export const parseNoteLinks = (text: string, note: PrimalNote, highlightOnly = false) => { @@ -98,7 +99,7 @@ export const parseNpubLinks = (text: string, note: PrimalNote, highlightOnly = f }; -const ParsedNote: Component<{ note: PrimalNote, ignoreMentionedNotes?: boolean}> = (props) => { +const ParsedNote: Component<{ note: PrimalNote, ignoreMentionedNotes?: boolean, id?: string }> = (props) => { const media = useMediaContext(); @@ -221,9 +222,9 @@ const ParsedNote: Component<{ note: PrimalNote, ignoreMentionedNotes?: boolean}> return ( -
+
); }; -export default ParsedNote; +export default hookForDev(ParsedNote); diff --git a/src/components/PeopleList/PeopleList.tsx b/src/components/PeopleList/PeopleList.tsx index 785026a..92c14d8 100644 --- a/src/components/PeopleList/PeopleList.tsx +++ b/src/components/PeopleList/PeopleList.tsx @@ -1,5 +1,6 @@ import { A } from '@solidjs/router'; import { Component, For, Show } from 'solid-js'; +import { hookForDev } from '../../lib/devTools'; import { authorName, nip05Verification, truncateNpub } from '../../stores/profile'; import { PrimalUser } from '../../types/primal'; import Avatar from '../Avatar/Avatar'; @@ -8,11 +9,11 @@ import FollowButton from '../FollowButton/FollowButton'; import styles from './PeopleList.module.scss'; -const PeopleList: Component<{ people: PrimalUser[], label: string}> = (props) => { +const PeopleList: Component<{ people: PrimalUser[], label: string, id?: string }> = (props) => { const people = () => props.people; return ( -