Bad typing of children of AzureMapDataSourceProvider

[Deathrage]

As mentioned in Azure/react-azure-maps-playground#40

The aforementioned contains rendering of array of markers. However children type of AzureMapDataSourceProvider does not take array as children thus

// in the example the type is IAzureDataSourceChildren (without array) which is achieved by "hack" cas via any type, but thats wrong type as it is in fackt IAzureDataSourceChildren[] and not IAzureDataSourceChildren
 const renderedMarkers: IAzureDataSourceChildren[] = useMemo(
    () =>
      markers.map(({ lat, lon, key, label }) => {
        const position = new data.Position(lon, lat);
        return (
          <AzureMapFeature
            key={key}
            id={key}
            type="Point"
            coordinate={position}
            properties={{ tile: label, icon: 'pin-round-blue' }}
          />
        );
      }),
    [markers],
  );
/* omitted* /
<AzureMapDataSourceProvider
                id={`${name} AzureMapDataSourceProvider`}
                options={{ cluster: true, clusterRadius: 2 }}
              >
                <AzureMapLayerProvider id={`${name} AzureMapLayerProvider EstateMarkers`} type={'SymbolLayer'} />
                {renderedMarkers} // <= problem
              </AzureMapDataSourceProvider>

will cause TypeError.

The type of props is:

export declare type IAzureDataSourceStatefulProviderProps = {
    id: string;
    children?: Array<IAzureDataSourceChildren | null> | IAzureDataSourceChildren | null;
    options?: DataSourceOptions;
    events?: IAzureMapDataSourceEvent | any;
    dataFromUrl?: string;
    collection?: atlas.data.FeatureCollection | atlas.data.Feature<atlas.data.Geometry, any> | atlas.data.Geometry | atlas.data.GeometryCollection | Shape | Array<atlas.data.Feature<atlas.data.Geometry, any> | atlas.data.Geometry | Shape>;
    index?: number;
};

where children?: Array<IAzureDataSourceChildren | null> | IAzureDataSourceChildren | null; does not allow array as children. The proper type is Array<IAzureDataSourceChildren | Array<IAzureDataSourceChildren> | null> and not just Array<IAzureDataSourceChildren | null>.

[psrednicki]

Hi @Deathrage
Thanks for report this issue.
Function renderedMarkers return 'IAzureMapFeature[]` that will be add to IAzureDataSourceChildren type.
I will update types soon and mention it in this issue.

[psrednicki]

@Deathrage Please check 0.1.4 version i check if that resolve your issue

[Deathrage]

According to the package json I have 0.1.4 but IAzureDataSourceChildren in types.d.ts seems to still be just ReactElement<IAzureMapFeature> | ReactElement<IAzureLayerStatefulProviderProps>

[psrednicki]

In 0.1.4 we have:

  | IAzureMapFeature
  | ReactElement<IAzureMapFeature>
  | ReactElement<IAzureLayerStatefulProviderProps>

[psrednicki]

@Deathrage please remove all node_modules and install it again

[psrednicki]

Types was updated. Close ticket

[bgransden]

Hi @psrednicki, I installed this package last week using npm install react-azure-maps and the types file still contains
export declare type IAzureDataSourceChildren = ReactElement<IAzureMapFeature> | ReactElement<IAzureLayerStatefulProviderProps>;
I've also tried the playground package with same issues.

I've tried removing all node_modules and re-installing with no success.

Is the npm package aligned with the tagged version 0.1.4 on github? I note that the version tagged 0.1.4 zip file from github has the updated types file, but the one I get from npm is still the old types file.

It's strange because package.json says that it is 0.1.4, but the types file seems to be the 0.1.3 version.

Thanks

[bgransden]

Hi @psrednicki, further to above, I downloaded the package from:

https://registry.npmjs.org/react-azure-maps/-/react-azure-maps-0.1.4.tgz

I extracted it and have confirmed that the types file doesn't appear to have been updated.

[psrednicki]

Hi @psrednicki, further to above, I downloaded the package from:

https://registry.npmjs.org/react-azure-maps/-/react-azure-maps-0.1.4.tgz

I extracted it and have confirmed that the types file doesn't appear to have been updated.

Hi @bgransden,
I types.d.ts we I can see it:
https://github.com/WiredSolutions/react-azure-maps/blob/799c6c6343f9e4af8fe786d0466db1c35efe1b82/src/types.ts#L130

[bgransden]

Hi @psrednicki, further to above, I downloaded the package from:
https://registry.npmjs.org/react-azure-maps/-/react-azure-maps-0.1.4.tgz
I extracted it and have confirmed that the types file doesn't appear to have been updated.

Hi @bgransden,
I types.d.ts we I can see it:

https://github.com/WiredSolutions/react-azure-maps/blob/799c6c6343f9e4af8fe786d0466db1c35efe1b82/src/types.ts#L130

Yes, I know it's in the github repo, but it hasn't made it into the package on npm for whatever reason.

Repro:

1. npx create-react-app my-app --template typescript
2. Change directory to /my-app
3. npm i react-azure-maps
4. Check node_modules/react-azure-maps/dist/types/types.d.ts - it is not updated

Alternatively download the .tgz directly from npm using link above, then extract it, and you'll notice that types.d.ts is still the old version. Perhaps you forgot to save the file before publishing to npm but saved before pushing to github?

I don't know why it's different, or how to publish to npm, I just know that types.d.ts is different on npm package to github

[bgransden]

Hi @psrednicki , I can confirm that npm version 0.1.4 does work correctly if I make the change as per github version 0.1.4, i.e. this #74

Are you able to re-publish the npm package so the types file is current version? Please :)

[psrednicki]

@bgransden I republished package.