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