Just did this up yesterday from Tobias ’ fork and integrating other Typescript forks on github, trying to find the best workflow for Hot-reloading on http within Playcanvas editor/launch runtime and VIsual Studio Code.
I tested the Typescript example which I modified/fixed to confirm it’s working as expected. Also works with normal JS as well. I’m using this template for actual stuff (not just poc examples).
With Typescript, the objective is to try to get the best intellisense (and I’m getting really good results with Visual studio code so far), and best possible DRY as in the following example: https://github.com/Glidias/playcanvas-typescript-babel-intellisense-template/blob/master/src/example.ts . But even on the normal example.js version, you can still get good typings nevertheless, with the .prototype class approach.
In order to get Typescript classes to work with domain-specific Playcanvas’ script instances, I used somewhat a similar approach to what I did with Haxe classes to Vue component objects. But of course, in Typescript, without Macro-ing (in Haxe), runtime decorators have to be used with a slight processing overhead per script. Generally though, I’d use this mainly to manage high application level scripts only, so it shouldn’t be too much of an issue. Notice that I also added script @attrib decorators as well to ensure your attribute names and declared attribute variables (supplied from Playcanvas editor) line up easily with full type-checking within your class!
Be sure to check out the other branches for different build types. Take note that any different${root}/blahblah/blahroot branch implies a completely different set of node_modules dependencies to be installed. (do not mix them up, back up if needed before deleting and switching branches to reinstall everything again)
typescript (now the main branch): Just Typescript alone. But it should be the latest webpack and typescript versions.
js-ts : As of above but also allows for both Javascript or Typescript. It’s up to you.
master: the old deprecated branch that merely updated the old templates to work.
For Vue
js-ts/vue : As of above, but with added Vue. But i haven’t tested Typescript in .vue files yet but generally i find Vanilla is suitable enough for vue file. I’ve set the package.json setting to --hot-only instead of hot to avoid refreshing the page everytime you do changes in the .vue file. The only caveat is you need to manually refresh your page if you make changes to your Playcanvas scripts. (Which is pretty fine i think assuming your Playcanvas editor is running in same protocol as well, it could do script-reloading via swap() for those cases and generally manual refresh may be better for some people in general (--hot-only).
js-ts/m/vue : Similar to above but uploading and trying experiment with using 2 seperate (multiple) entry files (one for GUI and the other for component scripts). The idea is so you can update app.build.js (GUI stuff) without refreshing the whole browser in Hot Module Reload since main.build.js (which contains Playcanvas scripts) remains unchanged. Take note that since it uses --hot in package.json script it would mean as long as any main.build.js playcanvas scripts gets altered, a refresh will be triggered as well.
For React
tsr-js/react : Typescript or Javascript… up to you. Managed to get hot module reload of React components to work with React components with --hot setting, and using only a single entry main file. You may use --hot-only if you do not wish to auto-refresh page when changing your Playcanvas scripts.
First of all: Thank you and whydoidoit for this great template!
I am trying to use TypeScript together with PlayCanvas’ hot reloading via the swap method.
So far I’ve got TypeScript, Webpack-dev-server, Redirector Addon, and automatic browser refresh upon local file change up and running.
When I changed --hot to --hot-only in the package.json to prevent reloading of the browser window, nothing updates and I get the following logs in the console:
Ignored an update to unaccepted module ./src/example.ts -> ./src/main.ts -> 0 [log.js:26]
[HMR] The following modules couldn't be hot updated: (They would need a full reload!) [log.js:26]
[HMR] - ./src/example.ts [log.js:26]
[HMR] Nothing hot updated. [log.js:24]
[HMR] App is up to date.
Can somebody help me with this? Or is it impossible to use the swap method in this scenario?
Hi @Leonidas, thank you for this information. I didn’t know which of the two to pick, since the last commit of both has roughly the same age and playcanvas-sync didn’t mention hot swapping in the readme. But if that works with TypeScript, I will happily set this up
