Testing type definitions (Typescript) #506

kalwalt · 2023-01-16T17:54:54Z

⚠️ All PRs have to be done versus 'dev' branch, so be aware of that, or we'll close your issue ⚠️

What kind of change does this PR introduce?

This PR will try to add Type definitions to be used in a Typescript project.

Can it be referenced to an Issue? If so what is the issue # ?
see #402

How can we test it?

No test provided yet, but i will create a Typescript project for testing.
Summary

Does this PR introduce a breaking change?
It shouldn't create any issue.

Please TEST your PR before proposing it. Specify here what device you have used for tests, version of OS and version of Browser
I'm testing types defs in this my repository https://github.com/kalwalt/AR.js-typescript

Other information

kalwalt · 2023-01-16T18:00:40Z

three.js/src/markers-area/arjs-markersareacontrols.js

@@ -36,7 +42,7 @@ const MarkersAreaControls = function (arToolkitContext, object3d, parameters) {
 };

 MarkersAreaControls.prototype = Object.create(ArBaseControls.prototype);
-MarkersAreaControls.prototype.constructor = MarkersAreaControls;
+//MarkersAreaControls.prototype.constructor = MarkersAreaControls;


@nickw1 this is odd. I think this is an error in the code design. Actually the constructor of the class is created at line 6:

const MarkersAreaControls = function (arToolkitContext, object3d, parameters) { var _this = this; ArBaseControls.call(this, object3d);

I have to comment out this line because tsc compiler will create another constructor as a property function instead with a resulting error.

Probably we should convert the code to really ES6 standard before adding type defs.
so converting the above class to:

class MarkersAreaControls extends ArBaseControl { constructor(arToolkitContext, object3d, parameters) { // other code here } }

@kalwalt I'm not familiar with this code, but I would strongly support using ES6 classes over older methods.

I think that AR.js can be improved a lot in terms of readability if rewritten using ES6 classes. Not sure if this task it can be done before or after adding type definitions. This PR is a kind of test at the moment.

Anyway removing that line has no side effect, i recompiled the libs and tested most of the examples with success. I think this was an old bug.

Reading in the mdn documentation prototype.constructor is actually the constructor of the created object (class). So not a mistake but maybe it's not needed. Anyway i will continue to convert the code ot Typescript and a more modern standard.

kalwalt · 2023-01-16T18:04:32Z

three.js/src/threex/arjs-markercontrols.js

@@ -99,7 +106,7 @@ const MarkerControls = function (context, object3d, parameters) {
 };

 MarkerControls.prototype = Object.create(ArBaseControls.prototype);
-MarkerControls.prototype.constructor = MarkerControls;
+//MarkerControls.prototype.constructor = MarkerControls;


same as in comment https://github.com/AR-js-org/AR.js/pull/506/files#r1071485190

commentatorboy · 2023-01-17T18:22:59Z

Hey.
So I tried to implement this on my vue project
https://github.com/commentatorboy/ARJSVue

As mentioned previously when installing the package, and setting up the project it will only work if you click the "VR" button on the video.

To test this just do the following:

npm install
npm run dev
Go to localhost and go into the "MyARProjects" page.
You will be promted to use the camera
Accept and then scan the hiro marker.
It does not show up.
Now there should be a "vr" button or a "full screen" button where it does not show the camera as background, but a black screen.
Scanning the hiro marker then shows the T-Rex.

You can see what I am scanning with my webcam. (Also notice the "fullscreen" button at the lower right corner)

Pressing that "fullscreen" button shows the T rex

Btw. I have not done anything other than using the Vue quick start guide.
https://vuejs.org/guide/quick-start.html#creating-a-vue-application
And then adding a new page that has hiro marker example:
https://github.com/AR-js-org/AR.js#-marker-based-example

kalwalt · 2023-01-17T18:58:37Z

Hey. So I tried to implement this on my vue project https://github.com/commentatorboy/ARJSVue

As mentioned previously when installing the package, and setting up the project it will only work if you click the "VR" button on the video.

To test this just do the following:

npm install

npm run dev

Go to localhost and go into the "MyARProjects" page.

You will be promted to use the camera

Accept and then scan the hiro marker.

It does not show up.

Now there should be a "vr" button or a "full screen" button where it does not show the camera as background, but a black screen.

Scanning the hiro marker then shows the T-Rex.

You can see what I am scanning with my webcam. (Also notice the "fullscreen" button at the lower right corner)

Pressing that "fullscreen" button shows the T rex

Btw. I have not done anything other than using the Vue quick start guide. https://vuejs.org/guide/quick-start.html#creating-a-vue-application And then adding a new page that has hiro marker example: https://github.com/AR-js-org/AR.js#-marker-based-example

@commentatorboy i forgot to add types entry to the package.json file, i will add soon as i can.

kalwalt · 2023-01-18T18:17:27Z

I'm testing type definitons in this my repository: https://github.com/kalwalt/AR.js-typescript This is what i found:

type definitions are not completely created -> example types/three.js/src/index-threex.d.ts:

import ArMultiMarkerControls from "./markers-area/arjs-markersareacontrols";
import ArMultiMakersLearning from "./markers-area/arjs-markersarealearning";
import ArMultiMarkerUtils from "./markers-area/arjs-markersareautils";
export {
  ArMarkerControls,
  ArMarkerHelper,
  ArSmoothedControls,
  ArToolkitContext,
  ArToolkitProfile,
  ArToolkitSource,
  ArMultiMarkerControls,
  ArMultiMakersLearning,
  ArMultiMarkerUtils,
};
//# sourceMappingURL=index-threex.d.ts.map

but should be instead:

import ArMarkerControls from "./threex/arjs-markercontrols";
import ArMarkerHelper from "./threex/threex-armarkerhelper";
import ArSmoothedControls from "./threex/threex-arsmoothedcontrols";
import ArToolkitContext from "./threex/arjs-context";
import ArToolkitProfile from "./threex/arjs-profile";
import ArToolkitSource from "./threex/arjs-source";
import ArMultiMarkerControls from "./markers-area/arjs-markersareacontrols";
import ArMultiMakersLearning from "./markers-area/arjs-markersarealearning";
import ArMultiMarkerUtils from "./markers-area/arjs-markersareautils";
export {
  ArMarkerControls,
  ArMarkerHelper,
  ArSmoothedControls,
  ArToolkitContext,
  ArToolkitProfile,
  ArToolkitSource,
  ArMultiMarkerControls,
  ArMultiMakersLearning,
  ArMultiMarkerUtils,
};
//# sourceMappingURL=index-threex.d.ts.map

not all type definitions are created by the tsc compiler, don't know why...

i exported all d.ts files in types folder in two separate folder (aframe and three.js), but it seems that are not recognized when imported the module, maybe this is not optimal.
The example can detect and display a model but i think because i hardocded the index-threex.d.ts file ( ? at least i suppose ).
AR.js code is written in an old syntax but we should rewrite it with a newer standard.
A Class should be declrared with the class keyword and eventually extended. Some classes are treated as private by the tsc compiler now v but we should decide how to declare them.
We should really think in terms of modularity and not put all the code under the same umbrella. I'm planning to start to develop an ar.js-threex module entirely in Typescript to avoid these issues and eventually integrate inside AR.js.

commentatorboy · 2023-01-18T19:05:09Z

Now I am not entirely into typescript, so I might be not be of too much help here 😓

But I have some questions though
Why should it be
import ArMarkerControls from "./threex/arjs-markercontrols";

It is not exported in https://github.com/AR-js-org/AR.js/blob/master/three.js/src/threex/arjs-markercontrols.js
It is just called MarkerControls.

Where is this "mapping" defined?

I agree on point 4.
It would make sense to start with upgrading the code to Typescript, to at least be able to make it more modular.

kalwalt · 2023-01-18T19:27:35Z

Now I am not entirely into typescript, so I might be not be of too much help here

I'm not a Typescript guruu but i think i can develop a Typescript version with help of the AR.js community!

But I have some questions though
Why should it be
import ArMarkerControls from "./threex/arjs-markercontrols";

It is not exported in https://github.com/AR-js-org/AR.js/blob/master/three.js/src/threex/arjs-markercontrols.js
It is just called MarkerControls.

Where is this "mapping" defined?

This because the old implementation doesn't adopt the new ES6 syntax when it was developed ( that come later... take a look at the old code here: https://github.com/AR-js-org/AR.js/blob/aaad9847f67a4738b00724c38d9f501d78e0a8af/three.js/src/threex/threex-armarkercontrols.js

var ARjs = ARjs || {}
var THREEx = THREEx || {}

ARjs.MarkerControls = THREEx.ArMarkerControls = function(context, object3d, parameters){
	var _this = this
        // other code here...
}

I think we should go over this and think in a more modern approach. As i said, and i remark this, we should start to redesign the code with a modular concept in mind. In 2023 we all the tools for doing this. We could start with a new AR.js-threex and AR.js-base modules, that can be integrated into AR.js.

kalwalt · 2023-01-18T19:39:23Z

And more: With Typescript we can create two namespaces AR.js and THREEx and create inside the two, all the classes.

// inside ArMarkerControls.ts

import { IContext, IObject3d, IParams } from 'interfaces/CommonInterfaces'

namespace THREEx {

  class ArMarkerControls {
    constructor(context: IContext, object3d: IObject3D, parameters: IParams) {

    }
  }
}


// inside MarkerControls.ts
import ArMarkerControls from '@ar-js-org/arjs-threex'

namespace ARjs {

  class MarkerControls extends ArMarkerControls {
    constructor(context: any, object3d: any, parameters: any) {
      super(context, object3d, parameters)
    }
  }
}

commentatorboy · 2023-01-21T11:32:55Z

I think we should go over this and think in a more modern approach. As i said, and i remark this, we should start to redesign the code with a modular concept in mind

Agreed.
If we start with AR.js-threex and AR.js-base
Then I think we should have a repo and layout the files that we can work on :D And also what exactly the tasks are.
I and try and help with converting one of the files to ES6. And then we can continue from there 👍

kalwalt · 2023-01-21T15:56:41Z

Working on a typescript version this my repo ARj.s-threex. There is a basic example, but not fully working yet. I hope to have more time next week to improve the code.

kalwalt · 2023-01-21T16:00:04Z

In regards of this PR i think i will not merge. I think there are many issues in it to be solved.

nickw1 · 2023-01-21T18:59:12Z

@kalwalt sounds the best plan if so.

kalwalt · 2023-09-30T20:02:14Z

@commentatorboy have you tried AR.js-threejs?
Closing this PR because as i said there are too many issues. I will think how we can add typedefintions to Ar.js before we can refactor the code with a more modern approach.

testing type defs

ae6d36e

kalwalt commented Jan 16, 2023

View reviewed changes

kalwalt self-assigned this Jan 16, 2023

kalwalt added the enhancement New feature or request label Jan 16, 2023

kalwalt added 4 commits January 16, 2023 19:30

removing fake constructor

4fb5021

formatting code with prettier

3388396

rebuilding libs

6f78ef3

separating three.js and aframe type defs

2a3720f

kalwalt mentioned this pull request Jan 16, 2023

AR.js with new ES6 standard and npm package #234

Closed

kalwalt and others added 3 commits January 18, 2023 16:10

type definition entry in package.json

b6f9a0b

running prettier to fix github-action failure

c3b9b50

adding types to files

2904e71

kalwalt changed the title ~~testing type defs~~ Testing type definitions (Typescript) Jan 18, 2023

kalwalt mentioned this pull request Jan 22, 2023

TypeScript version of the library and modularity #509

Open

22 tasks

kalwalt closed this Sep 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Testing type definitions (Typescript) #506

Testing type definitions (Typescript) #506

kalwalt commented Jan 16, 2023 •

edited

Loading

kalwalt Jan 16, 2023

kalwalt Jan 16, 2023 •

edited

Loading

nickw1 Jan 16, 2023

kalwalt Jan 16, 2023

kalwalt Jan 16, 2023

kalwalt Jan 22, 2023

kalwalt Jan 16, 2023

commentatorboy commented Jan 17, 2023 •

edited

Loading

kalwalt commented Jan 17, 2023

kalwalt commented Jan 18, 2023 •

edited

Loading

commentatorboy commented Jan 18, 2023 •

edited

Loading

kalwalt commented Jan 18, 2023

kalwalt commented Jan 18, 2023 •

edited

Loading

commentatorboy commented Jan 21, 2023 •

edited

Loading

kalwalt commented Jan 21, 2023 •

edited

Loading

kalwalt commented Jan 21, 2023

nickw1 commented Jan 21, 2023

kalwalt commented Sep 30, 2023

Testing type definitions (Typescript) #506

Testing type definitions (Typescript) #506

Conversation

kalwalt commented Jan 16, 2023 • edited Loading

kalwalt Jan 16, 2023

Choose a reason for hiding this comment

kalwalt Jan 16, 2023 • edited Loading

Choose a reason for hiding this comment

nickw1 Jan 16, 2023

Choose a reason for hiding this comment

kalwalt Jan 16, 2023

Choose a reason for hiding this comment

kalwalt Jan 16, 2023

Choose a reason for hiding this comment

kalwalt Jan 22, 2023

Choose a reason for hiding this comment

kalwalt Jan 16, 2023

Choose a reason for hiding this comment

commentatorboy commented Jan 17, 2023 • edited Loading

kalwalt commented Jan 17, 2023

kalwalt commented Jan 18, 2023 • edited Loading

commentatorboy commented Jan 18, 2023 • edited Loading

kalwalt commented Jan 18, 2023

kalwalt commented Jan 18, 2023 • edited Loading

commentatorboy commented Jan 21, 2023 • edited Loading

kalwalt commented Jan 21, 2023 • edited Loading

kalwalt commented Jan 21, 2023

nickw1 commented Jan 21, 2023

kalwalt commented Sep 30, 2023

kalwalt commented Jan 16, 2023 •

edited

Loading

kalwalt Jan 16, 2023 •

edited

Loading

commentatorboy commented Jan 17, 2023 •

edited

Loading

kalwalt commented Jan 18, 2023 •

edited

Loading

commentatorboy commented Jan 18, 2023 •

edited

Loading

kalwalt commented Jan 18, 2023 •

edited

Loading

commentatorboy commented Jan 21, 2023 •

edited

Loading

kalwalt commented Jan 21, 2023 •

edited

Loading