import other package's js/ts in maui blazor

[SKYC829]

Hi there!

I am new to Maui and Maui Blazor development, and I know that in a project where Blazor WASM and Maui Blazor share UI, to reference some js packages you need to look like follows:

/*
* Let's say we have a JavaScript file called a.js and it have a function called sayHello to print Hello into console
* /

@page "/hello"
@using Microsoft.JSInterop;

<h3>Hello Test</h3>

@code{
    [Inject]
    IJSRuntime JSRuntime{ get; set; }

    Lazy<Task<IJSObjectReference>> ImportTask;

    protected override void OnInitialized()
    {
        ImportTask = new Lazy<Task<IJSObjectReference>>(JSRuntime.InvokeAsync<IJSObjectReference>("import", new object?[] { "./_content/PackageID/Sub_Dirs_In_wwwroot/filename" }).AsTask());
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        IJSObjectReference JSObject;
        if (firstRender)
        {
            JSObject = await ImportTask.Value;
        }
        await JSObject.InvokeVoidAsync("sayHello",new object?[] { });
    }
}

Then now the gameplay has been upgraded, I'm trying to render a chart with ECharts in Blazor WASM and Maui Blazor, because ECharts are a bit more complicated for me, So I want to use TypeScript instead of JavaScript(thanks to TypeScript's strong typing support). However, I have a headache when using ECharts packages in TypeScript. In the following code, importing ECharts packages using the previous two lines will prompt TS2307 to find the module or its corresponding type declaration error. Importing ECharts using lines 4 and 5 returns an Http 404 error when retrieving the charts.js file

//import * as echarts from './_content/BlazorCharts.Core/node_modules/echarts/index'
//import { BarSeriesOption, EChartsType } from './_content/BlazorCharts.Core/node_modules/echarts/index';

import * as echarts from '../node_modules/echarts/index'
import { EChartsType } from '../node_modules/echarts/index'

const initChart = function (element: HTMLDivElement): EChartsType {
    return echarts.init(element as HTMLElement)
}

export {
    initChart
}

Am I using something wrong? How can I properly use TypeScript in projects where Blazor and Maui Blazor share UI?

---

linechart.ts

• This file is located under the BlazorCharts.Core project

//import * as echarts from './_content/BlazorCharts.Core/node_modules/echarts/index'
//import { BarSeriesOption, EChartsType } from './_content/BlazorCharts.Core/node_modules/echarts/index';

import * as echarts from '../node_modules/echarts/index'
import { EChartsType } from '../node_modules/echarts/index'

const initChart = function (element: HTMLDivElement): EChartsType {
    return echarts.init(element as HTMLElement)
}

export {
    initChart
}

---

HelloTest.razor

• This file is located under the BlazorCharts.Shared

@page "/hello"
@using Microsoft.JSInterop;
@using System.Diagnostics;

<h3>@("Hello Test")</h3>

<div @ref="chart_container"/>

@code {

    [Inject]
    IJSRuntime JSRuntime{ get; set; }

    Lazy<Task<IJSObjectReference>> ImportTask;
    Lazy<Task<IJSObjectReference>> EChartsTask;

    object? SayResult;

    IJSObjectReference JSObject;

    ElementReference chart_container;

    protected override void OnInitialized()
    {
        ImportTask = new Lazy<Task<IJSObjectReference>>(JSRuntime.InvokeAsync<IJSObjectReference>("import", new object?[] { "./_content/BlazorCharts.Core/scripts/linechart.js" }).AsTask());
        EChartsTask = new Lazy<Task<IJSObjectReference>>(JSRuntime.InvokeAsync<IJSObjectReference>("import", new object?[] { "./_content/BlazorCharts.Core/node_modules/charts.js" }).AsTask());
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var _ = await EChartsTask.Value;
            JSObject = await ImportTask.Value;
        }
        SayResult = await JSObject.InvokeAsync<object>("initChart",new object?[] { chart_container });
        Debug.WriteLine(SayResult);
    }
}