Using Page in loadOptions

nativescriptcore

#1

What exactly does the page perimeter in loadOptions enable?

I’ve got a custom xml component that requires binding an xmlns name-space. But a bunch of components all need the same name-space, so I figured just having it attached to the page instance would “DRY” things up.

I thought providing the page to loadOptions would address this, but no.

  • I suspect it’s because NativeScript parses the components xml before applying the loadOptions, correct?

I’m passing page like so;

load({
    name: "ComponentName",
    path: "path-to-component",
    attributes: {...},
    exports: {...},
    page: TheCurrentPage
});

If my suspicion is correct is there a way to prompt NativeScript to take the loadOptions page instance into account before parsing. Or just suck-it-up and keep applying the name-space to each component?

Thanks.


#2

May I know why you would need same name space for all components? Each component will have a separate name space, I believe each component should be in different XML file.


#3

Yes each of my components have their own file but many of them share a common sub-component.

I’m using the nativescript-lottie plugin, so an example use case would be;

// my-components/dock.xml
<DockLayout xmlns:Lottie="nativescript-lottie" ... >
    <Lottie:LottieView ... />
    <Lottie:LottieView ... />
</DockLayout>

// my-components/stack.xml
<StackLayout xmlns:Lottie="nativescript-lottie" ... >
    <Lottie:LottieView ... />
    <StackLayout ... >
        <Lottie:LottieView ... />
    </StackLayout>
</Stacklayout>

// main-page.xml
<Page xmlns:Custom="my-components" >
    <Custom:dock />
    <Label ... />
    <Custom:stack />
</Page>

So rather than have to keep registering the Lottie in each component, is there a way to just register on the Page instance?


#4

Of course you can register name space in any component, including Page.


#5

No, I know you can register them on Page. The problem comes when you do that instead of registering in the custom components.

Thats when you’ll get;
Module 'ui/lottie-view' not found for element 'LottieView'.

So the set up I’d like, as apposed to the above example would look like this;

// my-components/dock.xml
<DockLayout  ... >
    <Lottie:LottieView ... />
    <Lottie:LottieView ... />
</DockLayout>

// my-components/stack.xml
<StackLayout  ... >
    <Lottie:LottieView ... />
    <StackLayout ... >
        <Lottie:LottieView ... />
    </StackLayout>
</Stacklayout>

// main-page.xml
// Note, this time Lottie is only registered on the Page.
<Page xmlns:Custom="my-components" xmlns:Lottie="nativescript-lottie" >
    <Custom:dock />
    <Label ... />
    <Custom:stack />
</Page>

I’m fairly sure this is a non-starter though as it’s a compile-time vs run-time dilemma. True?


#6

It should work if the name space is right, can you try reproducing the issue with Playground?


#7

I haven’t been able to get the plugin working on Playground (iOS). I think because of this this issue. If your on Android you may have better luck.

Either way from the current setup you can see the missing module error in crash report.


#8

Oops, you can’t have name space declaration in a different file even if it’s a child component.


#9

Figured as much.

I believe it’s because one of the first things NativeScript does is parse the xml files. So when it finds an unrecognised name space declaration, without any registration within the component, it’s like “hey what it this nonsense?”.

It would probably be good if there was a way to handle this. Something like a Source Map that NativeScript can reference during parse. This would allow NativeScript to look up the embed tree of the component and better confirm whether or not there will be a compile error.