Using controllers

[alexcloudstar]

Is your feature request related to a problem? Please describe. It is related to this issue: https://github.com/Hejtmus/svelte-fullpage/issues/47 Whenever I try the code:

<script lang="ts">
    import {
        type FullpageActivityStore,
        Fullpage,
        FullpageSection,
        FullpageSlide
    } from 'svelte-fullpage'

    let fullpageController: FullpageActivityStore
    let sectionController: FullpageActivityStore

    fullpageController.goto(1) // setting section 1 to be displayed
    sectionController.goto(2) // setting slide 2 to  be active within corresponding section
</script>

<Fullpage bind:controller={fullpageController}>
    ...
    <FullpageSection bind:controller={sectionController}>
        <FullpageSlide>
             ...
        </FullpageSlide>
    </FullpageSection>
</Fullpage>

I got a typescript error:

Property 'goto' does not exist on type 'FullpageActivityStore'. [2339]│

Describe the solution you'd like Create properly docs

Thanks!

[Hejtmus]

Hey @alexcloudstar,

in previous discussion I suggested you creating issue about shortcomings of current docs, which would be pointing out missing info, like info about programmatic navigation. But actually error you encountered is originating in provided code. I would appreciate renaming this issue to accurately describe your error.

When initializing variable with let, variable has value undefined, later after script finishes and children start to be initialized, bind directives will cause, that value of controller from <Fullpage> and <FullpageSection> will be assigned to variable you bound to that component's prop. Importat thing you may noticed already, is that when you call goto, you are actually accessing undefined value, as the children of current component aren't initialized. Before calling goto, you need to wait until controllers are defined, you can do that in several ways, but the most simple and conventional is using onMount hook. Take a look at demo app:

https://github.com/Hejtmus/svelte-fullpage/blob/cc161689d4392e4df6e12eb1dd719e89a88f88be/src/routes/%2Bpage.svelte#L14

TLDR:

replace this:

fullpageController.goto(1) // setting section 1 to be displayed
sectionController.goto(2) // setting slide 2 to  be active within corresponding section

with this:

import { onMount } from 'svelte'

onMount(() => {
    fullpageController.goto(1) // setting section 1 to be displayed
    sectionController.goto(2) // setting slide 2 to  be active within corresponding section
})

BTW you previously mentioned you are new to svelte, so welcome in svelte world! And I recommend you this course, I wish it was existing when I was starting with svelte.

[alexcloudstar]

Hi @Hejtmus !

Thank you for your reply. I think i found a solution pretty similar to yours. Now i'm trying to access the controller from parent/child components but it's not working yet. If i will successfully get it, i will create a PR to show my case for docs maybe someone wants the same behavior.

Also yes, I just started a small project in Svelte Kit to get the feeling and to see if is something that i would like to work with. Until now, seems pretty good