dts2hx
dts2hx copied to clipboard
Support native JS import syntax
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;
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
Is there any way to support these features right now by hand hard code or string replace ?
There is! Details here https://github.com/HaxeFoundation/haxe/issues/10615#issuecomment-1061788619
well,I will try ,thank you. @haxiomic
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 {
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
Make sure your using my fork of jsImport: https://github.com/haxiomic/jsImport I added a feature that solves this
@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
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/
hello,@haxiomic ,what version of your haxe?
the r138-test.zip still not work.
haxe 4.2.4, what does your app.js look like?
left: my haxe build version .
right:your version
@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
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
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
@haxiomic
after
haxelib update jsImport
work.
batch: use this reg replace.
@:jsRequire\((.+)(",.+)
@:js.import($1.js$2
I'm going to reopen this as a feature request for js import syntax
@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";