Using external modules in NativeScript UI declarations

Question

[Cross posted from the NativeScript Google group for visibility.]

After reading an article by TJ Van Toll I set about making my own module for a UI component that I wanted to use in my XML UI definition. It is slightly complicated by the fact that the component is a JavaScript wrapper around a native component. I am using TypeScript otherwise in the project, so I have a .d.ts for the wrapper. Here is what I have:

app/modules/wrapper/wrapper.d.ts:

declare module "wrapper" {
    import view = require("ui/core/view");

    export class Wrapper extends view.View {
        ...
    }
}

app/modules/wrapper/wrapper-common.ts:

import definition = require("./wrapper");

export class Wrapper extends view.View implements definition.Wrapper {
   .....
}

app/modules/wrapper/wrapper.{iOS,android}.ts:

import common = require("./wrapper-common");

export class Wrapper extends common.Wrapper {
    .....
}

app/modules/wrapper/package.json:

{ "name" : "wrapper",
  "main" : "wrapper.js" }

I'm slightly unsure of the naming convention of the module (i.e. should it just be the deepest directory name, or should it be a full path like in the UI modules contained in tns_modules?) but I think the rest of this is correct. In the XML I have:

app/main-page/main-page.xml:

<Page xmlns="http://www.nativescript.org/tns.xsd"
      xmlns:myns="modules/wrapper"
      loaded="pageLoaded" >
    <myns:Wrapper>

    </myns:Wrapper>
</Page>

Currently, when this code executes, I get to an exception in component-builder.js because it cannot create the module. However, on the call stack I am in a native method __executeModule inside the iOS runtime. A tangential question (but one worth addressing) is can we as users attach Xcode to the device and debug the runtime? This is in require.js in the runtime so I'm not sure its possible. Any help/suggestions/better practices that can be suggested would be greatly appreciated. Been tearing my hair out for a few days on this one.

Answer 1

Answered on google groups.

Hey Chris,

The naming convention is pretty simple:

Code only component (no XML):

... 
xmlns:myns="modules/wrapper" 
... 
<myns:Wrapper 
... 

In this case we will require() the path specified ("modules/wrapper" in this case) and will look for "Wrapper" in returned exports (if found will be created with "new" - you need constructor without arguments).

XML with code:

... 
xmlns:myns="modules/wrapper" 
... 
<myns:Wrapper 
... 

In this case we will look for XML file named Wrapper in "modules/wrapper" folder (modules/wrapper/Wrapper.xml), if found we will load the file content in place. The code will serve as code behind for the loaded XML.

Let me know if you have any questions!

Thanks