Adding custom ts to cshtml page

[enriquin]

Hi,
I'm creating a new Serenity project (6.4.9) and I'm having problems when including a custom ts file

The problem:

• I need to create a custom page (controller method+chtml page+tsfile) for a custom made feature.
• I add the controller method to an existing controller and the razor view and everything works ok.
• But typescript seems to ignore my ts file and it is not "transpiled" or included in the chucnks.

What is the recommended approach to add a custom ts file and invoke it from the html?
In past Serenity versions (namespaces) you could simply instantiate the class, but I could not find any example of this with current js module version.

In serenity generated pages, a js file seems to be referenced (in /wwwroot/esm folder) and then you can intantiate the class:

<script src="/Serenity.Demo.Northwind/index.js?v=2023033011" type="text/javascript"></script>

<script type="text/javascript">
jQuery(function () {
   new Serenity.Demo.Northwind.CustomerGrid($('#GridDiv'), {}).init();
       Q.initFullHeightGridPage($('#GridDiv'));
   });
</script>

In some examples I've seen this:

<script type="module">
    import pageInit from '@Html.ResolveWithHash(Html.BasicSamplesModuleFile("ChartInDialogPage.js"))';
    pageInit();
</script>

But I cannot get the js file generated from my ts file :(

My question is:
¿How can I register my ts file to be included in the build and generate the corresponding js file?

More details:

The controller method:

[HttpGet("SHub/ListasLibrosColegio/Wizard")]
public ActionResult Wizard()
{
    var model = new WizardModel();
    return View(MVC.Views.SHub.ListasLibrosColegio.Wizard, model);
}

The page is displayed ok.

The typescript file:

import { Decorators } from '@serenity-is/corelib';

@Decorators.registerClass('SHub.Admin.Web.SHub.ListasLibrosColegioWizard')
export class ListasLibrosColegioGridWizard {

    init() {        
        alert("Hello word");
    }

}

The typescript --watch ignores my file (I've even included it in the tsconfig file) unless it is referenced in one of the "serenity generated ts files".

[VictorTomaili]

What is the typescript file name? It should end with Page.ts like MyPage.ts

[enriquin]

Right!! The ts file did not end in Page.ts

I did not find that convention in the docs.

Once I changed the file name, the js is generated and I imported the js this way and it works.

<script type="module">
    
    import { ListasLibrosColegioWizardPage } from '@Html.ResolveWithHash("/esm/modules/SHub/ListasLibrosColegio/ListasLibrosColegioWizardPage.js")';

    var page = new ListasLibrosColegioWizardPage();
    page.init();

</script>

[VictorTomaili]

Serenity has a rolling release, we try to keep the documentation updated, but it is not always possible. We try to do the best as we can.

[HassanBakri]

Greetings every one ,

i just want to point that it took me while ( 8 days) to find this question by coincidence, it will be very appreciated to add guides

[volkanceylan]

Yes, and as this an open source project, you created a pull request to Serenity docs repo where you would expect that information to be shown, thanks for all your contributions!

[volkanceylan]

https://github.com/serenity-is/Serenity/blob/2b88e36880bc4899399253fe6d9049832d532021/src/Serenity.Net.CodeGenerator/Generator/GeneratorConfig.cs#L561C5-L561C12
https://serenity.is/docs/release-notes/6.8.0#page.tsx-files-are-also-considered-as-esm-entry-points
https://serenity.is/docs/release-notes/6.6.0

[nahidulislam-cse15]

how to add multiple GridDiv in cshtml using thi step
<s<script type="module">
import pageInit from '@Html.ResolveWithHash(Html.BasicSamplesModuleFile("ChangingLookupTextPage.js"))';
pageInit();
</script>

[VictorTomaili]

You can use page.tsx to place 2 additional div in GridDiv. Or you can use custom cshtml with GridDiv1 and GridDiv2 elements.

[mvmshakkir]

import { LookupType, ParameterDataTypes, ParameterEditorTypes} from "../../ServerTypes/Reports";
import { Decorators, EntityDialog, TemplatedDialog ,Widget} from '@serenity-is/corelib';
import { ReportRequest, CommonService } from "../../ServerTypes/Modules";

declare var Morris: any;

@Decorators.registerClass('Car.Rental.Reports.DynamicReportPage')
@Decorators.resizable()
@Decorators.maximizable()

export class DynamicReportPage extends TemplatedDialog {
private areaChart: any;
private static reportmodel: ReportRequest

static initializePage(reportID) {

  var k = this;

  $(function () {

      CommonService.GetReportRequest({
          ReportId: reportID
      }, response => {
          k.setreportmodel(response);
          response.reportDesignsRow.ReportParameters.sort(i => i.Id).forEach(function (items) {

              var alies = items.ParameterName.trim()

              var strreq = "";
              if ((items.IsRequired || false)) {
                  strreq = "required";
              }

              //date editor
              var editor = ``;
              if (items.EditorType == ParameterEditorTypes.Value2) {
                  var date = "";
                  if (items.DefaultValue == "today") {
                      var fdate = new Date();
                      date = fdate.toISOString().split('T')[0];
                  }

                  editor = `<input class="` + strreq + `" type="date" id="` + alies + `" name="trip-start" style="width:100%"
                             value="`+ date + `">`;

              }

//some data }
and my path is D:\Car.Rental\Car.Rental.Web\Modules\Reports\DynamicReports\DynamicReportPage.ts
how to generate js file for this esm ?