Updating Phoenix library settings

[EdwardMoyse]

As part of updating the threejs r167, I ran into some problems, and was advised to update our tsconfig. I am now trying to follow this: https://www.typescriptlang.org/docs/handbook/modules/guides/choosing-compiler-options.html#im-writing-a-library (have a look at the tsconfig changes to see what I did here)

Enabling stricter compilation however caused a VAST number of errors, and I have been slowly working through them. In some cases the fix was obvious, in some I'm really not sure what the original intention was (and so my 'fix' might be wrong).

I had to use a lot of object as Mesh casts, so I hope these work okay (in some cases I check the cast, where I think it might fail).

However I am stuck on this:

src/managers/ui-manager/phoenix-menu/phoenix-menu-node.ts(218,11): error TS7053: Element implicitly has an 'any' type because expression of type 'keyof PhoenixMenuConfigs' can't be used to index type 'ConfigLabel | ConfigCheckbox | ConfigSlider | ConfigButton | ConfigColor | ConfigRangeSlider | ConfigSelect'.
  Property 'button' does not exist on type 'ConfigLabel | ConfigCheckbox | ConfigSlider | ConfigButton | ConfigColor | ConfigRangeSlider | ConfigSelect'.

Since I'm about to time out on working on this for a bit, let me ask in @9inpachi @sponce @DraTeots if they have any idea?

(Incidentally prop as PhoenixMenuConfigs[keyof PhoenixMenuConfigs] does not work, since then I get e.g. Type 'ConfigButton' cannot be used as an index type.ts(2538)

Actually, on reflection I would think it should be:

      const nodeConfig = nodeConfigs[0];
      if (nodeConfig) {
        for (const prop in configState) {
          nodeConfig[prop as keyof typeof nodeConfig] = configState[prop];
        }

        this.applyConfigState(nodeConfig);
      }

But this gives:

Type 'any' is not assignable to type 'never'.ts(2322)

)

[EdwardMoyse]

Hmm. Maybe there's a bigger problem - if I comment out that line (see latest commits) and fix some issues in phoenix-ng then I can compile and start. But <app-root/> is empty:

[EdwardMoyse]

Right, I am hopelessly lost here. I suspect that my efforts to update Phoenix have broken it. But if I look at https://hepsoftwarefoundation.org/phoenix/#/ I see:

Whilst locally I see:

(I added TEST just so I could be sure that it was actually picking up the local file).

So, somehow angular is not running properly? I would expect to see SOME errors/warnings though!

[9inpachi]

@EdwardMoyse try pulling the latest commit and the application should run. I notice issues like the gltf models not being colored and also the tests failing but I think that's related to the other changes that you introduced in the PR. So I will leave you to that.

[EdwardMoyse]

Thanks @9inpachi!

But I see you reverted 'moduleResolution' back to 'node'

As discussed here:

https://github.com/three-types/three-ts-types/issues/1136#issuecomment-2258295707

This is deprecated:

https://www.typescriptlang.org/docs/handbook/modules/reference.html#node10-formerly-known-as-node

And I think some of the other changes you reverted came from that (but I'm not positive).

[EdwardMoyse]

When I cherry-pick 975521a I get :

../../node_modules/@types/three/examples/jsm/loaders/KTX2Loader.d.ts(2,42): error TS2307: Cannot find module 'three/webgpu' or its corresponding type declarations.
  There are types at '/Users/emoyse/LocalDocuments/phoenix/node_modules/@types/three/build/three.webgpu.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.

I did a git reset --hard and then git clean -fdx so I'm not sure how you could run but I can't.

[EdwardMoyse]

The geometry is now back to the correct colour, as are the EDM objects. However the tests are failing.

  ● Test suite failed to run

    src/tests/helpers/active-variable.test.ts:1:10 - error TS1286: ESM syntax is not allowed in a CommonJS module when 'verbatimModuleSyntax' is enabled.

    1 import { ActiveVariable } from '../../../src/helpers/active-variable.js';
               ~~~~~~~~~~~~~~

This looks very painful to fix ... I'm really not sure why we're using CommonJS when ESM is the Typescript default (and which we use internally). :-(

[EdwardMoyse]

Hmm. It's interesting that phoenix-ng works... I wouldn't have expected this!

Edit: locally I see:

  console.error
    NG0304: 'app-tree-menu-item' is not a known element (used in the 'TreeMenuComponent' component template):
    1. If 'app-tree-menu-item' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
    2. If 'app-tree-menu-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

but it still passes! :-(

[EdwardMoyse]

Good grief ... that was an ordeal.