Support native JS import syntax

[sonygod]

Question about three.js es6 version

hello ,after update three.js r138 , it seem all class write in es6 style.

and try to use esbuild and got these error. Don't know How to fix that error.

   X [ERROR] Could not resolve "three/examples/jsm/controls/OrbitControls"

    dist/main.js:40471:70:
      40471 │ var three_examples_jsm_controls_orbitcontrols_OrbitControls = require("three/examples/jsm/controls/OrbitControls").OrbitControls;

[haxiomic]

Good question! Looks like they've dropped support for require(), which is how haxe currently handles js modules. I've opened a feature request for import syntax support https://github.com/HaxeFoundation/haxe/issues/10615

When that arrives, I will also need to update dts2hx to support this

So it could take a few months for this to work. In the meantime best thing to do is use an older version of three

[sonygod]

Is there any way to support these features right now by hand hard code or string replace ?

[haxiomic]

There is! Details here https://github.com/HaxeFoundation/haxe/issues/10615#issuecomment-1061788619

[sonygod]

well,I will try ,thank you. @haxiomic

[sonygod]

now ,the code can compile,but runtime still get error.

Uncaught ReferenceError ReferenceError: three_examples_jsm_controls_orbitcontrols_OrbitControls is not defined

@:js.import("three/examples/jsm/controls/OrbitControls.js", "OrbitControls") extern class OrbitControls {

test code

build.hxml

--main Main

--class-path src
--library three
--library jsImport

--js bin/app.js

# optimization settings
--dce full
-D analyzer-optimize

# generate ES6 output
-D js-es=6
--debug

# this bundles three.js into the output (only required because we are using three.js)
--cmd npx esbuild bin/app.js --bundle --outfile=bin/bundle.js  --sourcemap

@haxiomic

[haxiomic]

Make sure your using my fork of jsImport: https://github.com/haxiomic/jsImport I added a feature that solves this

[sonygod]

@haxiomic I'm sure use your version of jsImport

haxelib git jsImport https://github.com/haxiomic/jsImport

You already have jsImport version git installed.

Updating jsImport version git ...

jsImport was updated

Library jsImport current version is now git

and gen app.js still

let controls = new three_examples_jsm_controls_orbitcontrols_OrbitControls(camera,canvas);

instead of

let controls = new OrbitControls(camera,canvas);

Generated by Haxe 4.3.0-rc.1+2810be1

[haxiomic]

hmm, here's a test project that works for me, do npm install to get node_modules r138-test.zip

Also try a direct haxe build.hxml to rule out haxe cache server issues

Going to bed, will check back tomorrow o/

[sonygod]

hello,@haxiomic ,what version of your haxe?

the r138-test.zip still not work.

[haxiomic]

haxe 4.2.4, what does your app.js look like?

[sonygod]

left: my haxe build version .

right:your version

[haxiomic]

@sonygod Ahh I understand what is going on, this is my bad. I made my changes to jsimport too quickly. I think I've fixed it now

Try updating jsimport haxelib git jsImport https://github.com/haxiomic/jsImport

[sonygod]

after update? @haxiomic

r138-test\.haxelib\three/0,138,0/three/examples/jsm/controls/orbitcontrols/OrbitControls.hx:3: characters 1-12 : 

@:js.import requires a string parameter, optionally preceeded by an identifier

[haxiomic]

That looks like you're probably using the original version, not my mod, however my PR has now merged so if you haxelib update jsImport again it should work

If it's not, double check you have this line in jsImport Macro.hx https://github.com/back2dos/jsImport/blob/b75bda11cf8805b514d585d9c48b1d15d41664ed/src/jsImport/Macro.hx#L41

[sonygod]

@haxiomic

after

haxelib update jsImport

work.

batch: use this reg replace.

   @:jsRequire\((.+)(",.+)

   @:js.import($1.js$2

[haxiomic]

I'm going to reopen this as a feature request for js import syntax

[sonygod]

@haxiomic I add a macro about namespace..

look this code

import {
    GridHelper,
    EllipseCurve,
    BufferGeometry,
    Line,
    LineBasicMaterial,
    Raycaster,
    Group,
    Box3,
    Sphere,
    Quaternion,
    Vector2,
    Vector3,
    Matrix4,
    MathUtils,
    EventDispatcher
} from 'three';

the new version of three.js is import {XXX} from 'three'

so I add some code in Macro.hx

case [{ params: [macro @ns $v{(v:String)}] }]:  
                lines.push('import { $className as $id } from "$v";');

and test code.

    @:js.import(@ns "three") extern class PerspectiveCamera extends Camera {

        //will compile 

         import { PerspectiveCamera as three_PerspectiveCamera } from "three";