Compile errors - JointJS+ Trial, using older Angular release

[pfalcon64]

Introduction

I want to use JointJS+ with an existing application, that is built with Angular 8. There are too many other critical dependencies to attempt to update the Angular release (believe me, I've tried) short of a ground-up rebuild of core code. Angular 8 has a Typescript dependency of v3.5.3.

When I compile the trial version with the angular tutorial code in my project, I get the following errors:

ERROR in ../node_modules/@joint/plus/joint-plus.d.ts:499:11 - error TS1005: ';' expected.

499 override isHorizontal(): boolean;
~~~~~~~~~~~~
../node_modules/@joint/plus/joint-plus.d.ts:510:11 - error TS1005: ';' expected.

510 override isHorizontal(): boolean;
~~~~~~~~~~~~
../node_modules/@joint/plus/joint-plus.d.ts:1518:11 - error TS1005: ';' expected.

1518 override isHorizontal(): boolean;
~~~~~~~~~~~~
../node_modules/@joint/plus/joint-plus.d.ts:1529:11 - error TS1005: ';' expected.

1529 override isHorizontal(): boolean;
~~~~~~~~~~~~
../node_modules/@joint/plus/joint-plus.d.ts:2301:42 - error TS1005: ';' expected.

2301 highlighter: typeof dia.HighlighterView;
~
../node_modules/@joint/plus/joint-plus.d.ts:2301:47 - error TS1005: '(' expected.

2301 highlighter: typeof dia.HighlighterView;
~

I assume the issues reported are newer Typescript syntax that isn't compatible with the older version. Is it possible to get a release of JointJS+ that supports the above versions? If so, which one? And where can I find that information / download links...etc?

Or is there a workaround that I can use somehow?

I really want to use this as it has functionality that my clients want - but not badly enough that they will pay to rebuild half of the existing application ;-)

Steps to reproduce

No response

Restrictions & Constraints

Angular 8, Typescript 3.5.3

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

If only these errors need to be fixed, you may just need to edit the joint-plus.d.ts file inside the joint-plus.tgz archive.

[pfalcon64]

Hmm, editing the .d.ts file is a workaround to be sure, but it snot a good long term solution.

Ok, Changing override isHorizontal(): boolean; is easy, as the override keyword was added in Typescript 4.3, and this just a checking thing, so I can replace that with isHorizontal(): boolean; in each of the 4 instances.

But I'm not aware of a syntax I can use to replace the bolded line below?:

declare namespace HighlighterSelectionFrameList {
type HighlighterSelector = string | ((cell: dia.Cell, frameList: HighlighterSelectionFrameList) => string);
type HighlighterOptions = dia.HighlighterView.Options | ((cell: dia.Cell, frameList: HighlighterSelectionFrameList) => dia.HighlighterView.Options);
interface Options {
highlighter: typeof dia.HighlighterView;
selector?: HighlighterSelector;
options?: HighlighterOptions;
}
}

While horribly brute force, I replaced it with:

highlighter: any;

Now, the code and modules compile, but I am getting:

ERROR in ./node_modules/@joint/plus/joint-plus.mjs 1:34801
Module parse failed: Unexpected token (1:34801)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Wading through the minified code of the above file, it seems the offending line is:

return{"xlink:href":i="string"==typeof n?(e=e["icon-color"]??"black",n=n.replace(/${color}/g,e),"data:image/svg+xml,"+encodeURIComponent(n)):null,"data-icon-type":t}}

Now, given its a typescript version problem, the ?? is the offender here. I can fix this, but there are 38 other instances of the same syntax (and god knows how many other syntactical things that will have to be dealt with), which brings me back to the problem of editing the minified files - since the changes will be moot when I have to install the real produce later (and any newer releases).

My issue right now i that I want to see if JointJS simply WORKs with my code (I'm evaluating it after all). An older release that matches my typescript/angular version will enable me to do that, and if it checks out, THEN I can put the effort into discovering if I can use the latest code, albeit with a lot of stuffing about. Can someone provide me a suitable link please? The email used for the trial is a client one: [email protected]

[pfalcon64]

Oh, the problems with the coalesce operation (??) are because Angular 8 used Webpack 4 (which aggressively does NOT understand that syntax)... arrgghh

[pfalcon64]

Ok, some updates:

The instructions in the link above work for @JointJS/Core (4.1.1).

However the JointJS Plus (v4.1.1) trial code still fails.

• I am still getting the original issues with override isHorizontal(): boolean; as explained earlier. I can correct these manually.
• The ?? operator issues are now dealt with by the instructions link above, but now I have this error:

ERROR in ./node_modules/@joint/plus/joint-plus.mjs 1:84044
Module parse failed: Unexpected token (1:84044)
File was processed with these loaders:
./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

The statement in question is:

if(-1===n)this.setAsParent(t);else{if(n===e)return;i.splice(n,1),n<e?e--:e=Math.min(e,i.length)}

Technically the "?" operator is the exact offset, which makes no sense to me. The bit in the above code that I can't work out is the comma shortly before it? In any case, I'm at a loss as to what Babel plugin I should be using to address this, or if its some other issue?

I can make do with the functionality that is in the open source toolkit if I have to but I'd really like to get the plus version working!

[kumilingus]

Can you please try installing also the @babel/plugin-transform-optional-chaining?

You need these transform plugins:

@babel/plugin-transform-nullish-coalescing-operator
@babel/plugin-transform-optional-chaining

[pfalcon64]

(sorry for taking so long to get back, I was trying various combinations of things, and it takes time when a dodgy update forces you to restore backups...etc).

Ok, The short version:

• JointJS Plus 4.1.1 (trial version) is working in Development (yarn start / ng serve) for Angular 8
• but its not working for a production build

You need the following babel plugins to compile the code (taken from my extra-webpack.config.js file):

            plugins: [
              '@babel/plugin-proposal-nullish-coalescing-operator',
              '@babel/plugin-transform-optional-chaining',
              '@babel/plugin-transform-object-rest-spread',
              '@babel/plugin-transform-class-properties'
            ]

You still have to manually correct the joint-plus.d.ts file (as per errors in the top of this post). But once done, I can get the Angular JointPlus tutorial code working just fine!

When I try a Production build, I am running into a terser problem:

ERROR in 26.6b566be6faf7dd573cf2.js from Terser Parameter g was used already [26.6b566be6faf7dd573cf2.js:9225,428953] at ne (D:\Source\Bevington\XeP3\API\Client\node_modules\@angular-devkit\build-angular\node_modules\terser-webpack-plugin\node_modules\terser\dist\bundle.min.js:1:19592) at c (D:\Source\Bevington\XeP3\API\Client\node_modules\@angular-devkit\build-angular\node_modules\terser-webpack-plugin\node_modules\terser\dist\bundle.min.js:1:28298) at l (D:\Source\Bevington\XeP3\API\Client\node_modules\@angular-devkit\build-angular\node_modules\terser-webpack-plugin\node_modules\terser\dist\bundle.min.js:1:28389) at Object.check_strict (D:\Source\Bevington\XeP3\API\Client\node_modules\@angular-devkit\build-angular\node_modules\terser-webpack-plugin\node_modules\terser\dist\bundle.min.js:1:35518) at Object.add_parameter (D:\Source\Bevington\XeP3\API\Client\node_modules\@angular-devkit\build-angular\node_modules\terser-webpack-plugin\node_modules\terser\dist\bundle.min.js:1:35094) at w (D:\Source\Bevington\XeP3\API\Client\node_modules\@angular-devkit\build-angular\node_modules\terser-webpack-plugin\node_modules\terser\dist\bundle.min.js:1:36380) at I (D:\Source\Bevington\XeP3\API\Client\node_modules\@angular-devkit\build-angular\node_modules\terser-webpack-plugin\node_modules\terser\dist\bundle.min.js:1:39075) at L (D:\Source\Bevington\XeP3\API\Client\node_modules\@angular-devkit\build-angular\node_modules\terser-webpack-plugin\node_modules\terser\dist\bundle.min.js:1:39457) at D:\Source\Bevington\XeP3\API\Client\node_modules\@angular-devkit\build-angular\node_modules\terser-webpack-plugin\node_modules\terser\dist\bundle.min.js:1:33196 at D:\Source\Bevington\XeP3\API\Client\node_modules\@angular-devkit\build-angular\node_modules\terser-webpack-plugin\node_modules\terser\dist\bundle.min.js:1:29030

Now, reports of similar errors usually come down to needing to rollback terser to an earlier release, but I've tried several different versions, editing the package.json file...etc and I can't make the error go away (and Angular 8 insists that it needs a specific release of terser and the terser-webpack plugin).

I have enough to proceed with my evaluation for the next few days, but the final stage will be to deploy to our test server so I can show my client - and this needs the --prod option to be working. So, I'm hoping you might have some more ideas?

Also, editing the joint-plus.d.ts file is a short term solution only (and never a good idea long term). Are the issues here likely to be corrected? I would at least like to know what a good alternative for

highlighter: typeof dia.HighlighterView<any>;

might be? I have just been using the brute force:

highlighter: any;

[kumilingus]

Typescript

From the JointJS perspective, this is not an issue. We are providing a valid TypeScript file, so it should be addressed within your project.

Have you tried upgrading your Typescript? See https://stackoverflow.com/a/77495469

I’m also not sure what TypeScript is complaining about. The typeof operator is supported in version 3.

class MyClass {

}

const classRef: typeof MyClass = MyClass;

See live example.

Terser

Could you please try to reserve g, V joint variables? See https://labrodev.substack.com/p/resolving-global-variable-conflicts

[pfalcon64]

Using typeof for a class property is a newer feature - thats why it was failing on my PC. I can't upgrade typescript, unfortunately the version I have is a dependency for Angular 8 (why they did that is anyone's guess, but its embedded in every single one of their components...sigh). I understand I'm stuck with that - I was hoping you could provide a more generalised (typeof) statement that will provide better type checking.

Will try your suggestion for terser and get back to you! Thanks.

[pfalcon64]

I have a brain-dead solution working for a --prod deployment - basically turning OFF terser's optimisation:

My extra-webpack.config.js file:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production', // "production" | "development" | "none"
  resolve: {
    extensions: ['*', '.mjs', '.js', '.json']
  },
  optimization: {
    minimize: false,
    minimizer: [
        new TerserPlugin({
            exclude: /node_modules/,
            terserOptions: {
                mangle: { reserved: ['g','v','joint'] },
                keep_classnames: true,
                keep_fnames: true
            }
        })
    ]
},
module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env', { targets: "defaults" }
              ]
            ],
            plugins: [
              '@babel/plugin-proposal-nullish-coalescing-operator',
              '@babel/plugin-transform-optional-chaining',
              '@babel/plugin-transform-object-rest-spread',
              '@babel/plugin-transform-class-properties'
            ]
          }
        }
      }
    ]
  }
};

Its far from perfect, but it allows me to continue working (and deploy to my test server). The TerserPlugin is how you can control how tersor works within the angular build process. The options present do NOT work by themselves if I turn minimize on - I still haven't found the exact settings required.

I have a week or so of work to finish some sample screens using JointJS+ for my client. I'll come back to this after thats done, and I have permission to get it all working for real... I'll post what I am able to find.

If you have any ideas please let me know. Thanks for the assistance to date.

[kumilingus]

Do you still get the same error ("from Terser Parameter g was used already") when you set minimize to true?

This is the list of global variables that are exposed by JointJS.

mangle: { reserved: ['g', 'V', 'joint', 'Vectorizer'] }

Note: it's a capital V.

I was hoping you could provide a more generalised (typeof) statement that will provide better type checking.

Theoretically, typeof can be modified as follows:

class MyClass {}
const classRef: typeof MyClass = MyClass;

to:

class MyClass {}
const classRef: { new(...args: any[]): MyClass } = MyClass;

However, we would need to remember not to use the typeof for class properties in the future or enforce its avoidance with a linting rule.

As for the override keyword, there’s no equivalent alternative in v3 other than simply removing it, which is not a desirable solution. On the contrary, we intend to promote its usage by enabling the noImplicitOverride option.