TypeScript Asset JS Attribute isn't autoloading

Hello,

I’ve been having issues with Assets not being autoloaded when using TypeScript.

I’ve converted pretty much the same code as the tutorial project found here:
https://playcanvas.com/editor/scene/481136
Tutorial UI file here:
https://playcanvas.com/editor/code/443090?tabs=5908310

as

class UIElement extends pc.ScriptType {
  html: pc.Asset;
  css: pc.Asset;

  initialize() {
    let div = document.createElement("div");
     // Not working
    // div.innerHTML = this.html.resource;

    // Alternative Solution is to change the type of html to number and
    // do the following.
    let htmlAsset = this.app.assets.get(this.html);
    div.innerHTML = htmlAsset.resource;

    document.body.appendChild(div);

    let cssAsset = this.app.assets.get(this.css);
    const style = pc.createStyle(cssAsset.resource);
    document.head.appendChild(style);
  }
}

pc.registerScript(UIElement, "UIElement");

UIElement.attributes.add("html", {
  type: "asset",
  assetType: "html",
  title: "HTML Asset",
});

UIElement.attributes.add("css", {
  type: "asset",
  assetType: "css",
  title: "CSS Asset",
});

But my issue is that I need to manually load the assets because this.html always simply returns the asset ID and not the asset instance. FYI, I have the same issue with the CSS file.

Has anyone ran into this issue before?

I’ve tried with TS Template that we provide GitHub - playcanvas/playcanvas-editor-ts-template: A simple TypeScript template for PlayCanvas that can also sync with your playcanvas.com project and it works fine with it

class HelloWorld extends pc.ScriptType {
    css: pc.Asset;
    html: pc.Asset;
    div: HTMLElement;

    initialize() {
        // create STYLE element
        const style = document.createElement('style');

        // append to head
        document.head.appendChild(style);
        style.innerHTML = this.css.resource || '';

        // Add the HTML
        this.div = document.createElement('div');
        this.div.classList.add('container');
        this.div.innerHTML = this.html.resource || '';

        // append to body
        // can be appended somewhere else
        // it is recommended to have some container element
        // to prevent iOS problems of overfloating elements off the screen
        document.body.appendChild(this.div);
    }
};

pc.registerScript(HelloWorld, 'helloWorld');
HelloWorld.attributes.add('css', {type: 'asset', assetType:'css', title: 'CSS Asset'});
HelloWorld.attributes.add('html', {type: 'asset', assetType:'html', title: 'HTML Asset'});

And generates the following JS

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var HelloWorld = /** @class */ (function (_super) {
    __extends(HelloWorld, _super);
    function HelloWorld() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    HelloWorld.prototype.initialize = function () {
        // create STYLE element
        var style = document.createElement('style');
        // append to head
        document.head.appendChild(style);
        style.innerHTML = this.css.resource || '';
        // Add the HTML
        this.div = document.createElement('div');
        this.div.classList.add('container');
        this.div.innerHTML = this.html.resource || '';
        // append to body
        // can be appended somewhere else
        // it is recommended to have some container element
        // to prevent iOS problems of overfloating elements off the screen
        document.body.appendChild(this.div);
    };
    return HelloWorld;
}(pc.ScriptType));
;
pc.registerScript(HelloWorld, 'helloWorld');
HelloWorld.attributes.add('css', { type: 'asset', assetType: 'css', title: 'CSS Asset' });
HelloWorld.attributes.add('html', { type: 'asset', assetType: 'html', title: 'HTML Asset' });

That sure is weird. I’ll need to dig as to why the rollup renders a different codebase here.

Thanks for your feedback @yaustar