Mr Void Comments - Answer Overflow

Mr Void

Explore posts from servers

DDeno SSolidJS

Posts Comments

SSolidJS

•Created by Mr Void on 9/26/2024 in #support

load custom css after a package is loaded

thank you, this works :prayge:

4 replies

SSolidJS

•Created by Mr Void on 9/16/2024 in #support

Prevent re-rendering many components when object in store-array is updated

I've tried this now, but it fails to render based on the changes. I've come to a point where I need to update multiple properties at once and using signals for each property seems like a bad-practice 🤔

17 replies

SSolidJS

•Created by Mr Void on 9/16/2024 in #support

Prevent re-rendering many components when object in store-array is updated

Tried doing it this way, assigning state getter/setter to the card objects within store. It elimiates the need to iterate over collections and cards, and doesn't cause re-rendering for other card objects 🤔

17 replies

SSolidJS

•Created by Mr Void on 9/16/2024 in #support

Prevent re-rendering many components when object in store-array is updated

@REEEEE Think it's a good idea to apply states to the cards as in the following example? https://www.solidjs.com/tutorial/stores_nested_reactivity?solved perhaps 🤔 then, It would be simpler to manage the state of each?

17 replies

SSolidJS

•Created by Mr Void on 9/16/2024 in #support

Prevent re-rendering many components when object in store-array is updated

could you please write a short example

17 replies

SSolidJS

•Created by Mr Void on 9/16/2024 in #support

Prevent re-rendering many components when object in store-array is updated

I don't understand what you mean

17 replies

SSolidJS

•Created by Mr Void on 9/16/2024 in #support

Prevent re-rendering many components when object in store-array is updated

the way i setup the store is a bit awkward: store.tsx

const [state, setState]: [Store<StoreState>, SetStoreFunction<StoreState>]
        = createStore<StoreState>({} as StoreState)

    setState({
        // ..
        flashcards: flashcardStore(state, setState),
    })

const [state, setState]: [Store<StoreState>, SetStoreFunction<StoreState>]
        = createStore<StoreState>({} as StoreState)

    setState({
        // ..
        flashcards: flashcardStore(state, setState),
    })

flashcardStore.ts

export type FlashcardCollection = FlashcardCollectionRow & {
    flashcards: Flashcard[]
    // ...
}

export type FlashcardStore = {
    collections: FlashcardCollection[]
    // ...
}

export type FlashcardCollection = FlashcardCollectionRow & {
    flashcards: Flashcard[]
    // ...
}

export type FlashcardStore = {
    collections: FlashcardCollection[]
    // ...
}

path to a single flashcard is: store.flashcards.collections[ i ].flashcards[ j ]

17 replies

SSolidJS

•Created by Mr Void on 9/16/2024 in #support

Prevent re-rendering many components when object in store-array is updated

no sir; Property 'find' does not exist on type 'FlashcardCollection'. The following error is a conflict between FlashcardUpdate and FlashcardCollection

Argument of type 'FlashcardUpdate' is not assignable to parameter of type '{ author_id: string; created_at: string; id: string; modified_at: string; title: string; } & { flashcards: Flashcard[]; shareId: string | undefined; can_edit: boolean; shared_with: string | undefined; collaborators: Collaborator[]; }'.
  Property 'title' is missing in type 'FlashcardUpdate' but required in type '{ author_id: string; created_at: string; id: string; modified_at: string; title: string; }'

Argument of type 'FlashcardUpdate' is not assignable to parameter of type '{ author_id: string; created_at: string; id: string; modified_at: string; title: string; } & { flashcards: Flashcard[]; shareId: string | undefined; can_edit: boolean; shared_with: string | undefined; collaborators: Collaborator[]; }'.
  Property 'title' is missing in type 'FlashcardUpdate' but required in type '{ author_id: string; created_at: string; id: string; modified_at: string; title: string; }'

17 replies

SSolidJS

•Created by Mr Void on 9/16/2024 in #support

Prevent re-rendering many components when object in store-array is updated

I'm not sure how to apply this to the following structure: store -> FlashcardCollection[] -> Flashcard[]:

export type FlashcardCollection = {
    flashcards: Flashcard[]
    // ...
}

export type FlashcardCollection = {
    flashcards: Flashcard[]
    // ...
}

17 replies

SSolidJS

•Created by Mr Void on 9/16/2024 in #support

Reset signals when prop value changes

I tried the following and doesn't cause re-rendering for all Card components, is this a decent solution or should I use createWritableMemo ?

const Card = (props) => {
    let prevId = props.data.id;

    createEffect(() => {
        if (prevId !== props.data.id) {
            prevId = props.data.id
            setShowFront(true)
        }
    }
}

const Card = (props) => {
    let prevId = props.data.id;

    createEffect(() => {
        if (prevId !== props.data.id) {
            prevId = props.data.id
            setShowFront(true)
        }
    }
}

8 replies

SSolidJS

•Created by Mr Void on 9/16/2024 in #support

Reset signals when prop value changes

Currently resetting this way, is there a better way? :

const [currentCardId, setCurrentCardId] = createSignal<string | null>(null)

const Card = () => {
    // ...
    createEffect(() => {
        if (currentCardId() === null) {
            setCurrentCardId(props.data.id)
        } else if(currentCardId() !== props.data.id) {
            batch(() => {
                setCurrentCardId(props.data.id)
                setShowFront(true)
            })
        }
    })

   // ...
}

const [currentCardId, setCurrentCardId] = createSignal<string | null>(null)

const Card = () => {
    // ...
    createEffect(() => {
        if (currentCardId() === null) {
            setCurrentCardId(props.data.id)
        } else if(currentCardId() !== props.data.id) {
            batch(() => {
                setCurrentCardId(props.data.id)
                setShowFront(true)
            })
        }
    })

   // ...
}

8 replies

SSolidJS

•Created by Mr Void on 2/19/2024 in #support

Anchor with target="_blank" leading to app's URL

Got it sir: https://discord.com/channels/722131463138705510/722131463889223772/1209374830122631218

18 replies

SSolidJS

•Created by Mr Void on 2/19/2024 in #support

Anchor with target="_blank" leading to app's URL

18 replies

SSolidJS

•Created by Mr Void on 2/19/2024 in #support

Anchor with target="_blank" leading to app's URL

right before the anchor, there is an img tag with the same url, and that works as expected- image loads

18 replies

SSolidJS

•Created by Mr Void on 2/19/2024 in #support

Anchor with target="_blank" leading to app's URL

18 replies

SSolidJS

•Created by Mr Void on 2/19/2024 in #support

Anchor with target="_blank" leading to app's URL

18 replies

SSolidJS

•Created by Mr Void on 2/19/2024 in #support

Anchor with target="_blank" leading to app's URL

.tsx file ✅

18 replies

SSolidJS

•Created by Mr Void on 2/19/2024 in #support

Anchor with target="_blank" leading to app's URL

and typescript error saying that's not compatible : Type '() => string' is not assignable to type 'string'.ts(2322)

18 replies

SSolidJS

•Created by Mr Void on 2/19/2024 in #support

Anchor with target="_blank" leading to app's URL

no, i wrote this:

<a class="btn btn-sm" href={() => store.imageModal.url} target="_blank" rel="external">View in new tab</a>

<a class="btn btn-sm" href={() => store.imageModal.url} target="_blank" rel="external">View in new tab</a>

18 replies

Gaming

Programming