How to js import into other scripts

abrahmbrookes · September 14, 2022, 1:23pm

In Javascript I am able to:

// helper.js
export const convert = function(data){
    // function logic
}

// some other file.js
import {convert} from '../helper.js'
convert(data)

Am I able to do this in Playcanvas?

yaustar · September 14, 2022, 1:40pm

The Editor workflow doesn’t support imports and relies on expose classes/variables/functions globally.

It effectively just adds all the JS files to the HTML page with <script> tags in the loading order defined here: Loading Order | Learn PlayCanvas

Mark_Lundin · January 5, 2024, 9:42am

For anyone landing on this topic, we are actively working on native ES Modules support, you can track progress in the Github PR below.

github.com/playcanvas/engine

Add ES Modules

playcanvas:main ← playcanvas:esmodules

opened 02:14PM - 18 Oct 23 UTC

marklundin

+4307 -13

## ES Module Component System This PR adds a component system to natively s…upport ES Modules in PlayCanvas. This lays the ground work for further work such as bundling and editor support whilst retaining a familiar API. For further work and roadmap see #4767 ### New ESM format ```javascript const attributes = { number: { type: 'number', default: 10, ... }, nestedObj: { number: { type: 'number', default: 10 }, } } export default class MyModule extends EsmScriptType { static attributes = attributes; // Optional name that overrides 'MyModule' static name = 'Other Name' // @see https://developer.playcanvas.com/en/user-manual/scripting/anatomy/#initialize initialize(){} // @see https://developer.playcanvas.com/en/user-manual/scripting/anatomy/#update update(dt){} // @see https://developer.playcanvas.com/en/user-manual/scripting/anatomy/#postUpdate postUpdate(dt){} // Called when and entity is disabled or removed from the scene destroy(){} } ``` ### New API This method imports a esm script, registers it with the component, and performs a swap() when it updates if possible. See [the implementaiton](https://github.com/playcanvas/engine/blob/a56c82598578f8a91ddf1cf52263d0ab2404c82b/src/framework/components/esmscript/component.js#L418) ```javascript import * as Rotate from './utils/rotate' const script = entity.esmscript.add(Rotate, { speed: 10 }, enabled ) // initialize() called synchronously asset(entity.esmscript.get('Rotate') === script) ``` Few notes: - Familiar API to existing scripts with simple Class based syntax - Script type like functionality (events etc) provided via an optional EsmScriptType base class - Attribute definition is isolated from the class definition, it simply describes metadata for class props that are exposed to the editor. This metadata is not required at runtime. Attribute code can be shaken out. - One module exports one script - Attributes should ideally be statically analyzed, and not have to be executed in order to parse TBD - Execution order is in order for now. This will be changed to a global priority order in s separate PR. see #1857 - This does not support HMR/hot swapping. HMR should not be part of production code, and will be part of the launcher - [x] Implement Script ESM Component system - [x] Implement initialize / destroy / update methods I confirm I have read the [contributing guidelines](https://github.com/playcanvas/engine/blob/master/.github/CONTRIBUTING.md) and signed the [Contributor License Agreement](https://docs.google.com/a/playcanvas.com/forms/d/1Ih69zQfJG-QDLIEpHr6CsaAs6fPORNOVnMv5nuo0cjk/viewform).

electronyoon · January 21, 2024, 4:27am

official support beyond a year. dope.