Typescript errors in generator.

[stefjoosten]

What happened

I am generating an application on the new Angular front-end framework. Generation of the back-end fails with this message (a log fragment):

=> CACHED [prototype 1/8] FROM docker.io/ampersandtarski/prototype-framework:main@sha256:82cf23df696f3cac43f3b95678fdea2c36fdcd8c6c4a89ff4c74ca20f437bf9a                                                                                                                                                                                                                                                                             0.0s
 => [prototype 2/8] COPY . /usr/local/project/                                                                                                                                                                                                                                                                                                                                                                                         0.1s
 => [prototype 3/8] RUN ampersand proto --no-frontend /usr/local/project/main.adl   --proto-dir /var/www/backend   --verbose                                                                                                                                                                                                                                                                                                          58.5s
 => [prototype 4/8] RUN ampersand proto --frontend-version Angular --no-backend /usr/local/project/main.adl   --proto-dir /var/www/frontend/src/app/generated   --verbose                                                                                                                                                                                                                                                             57.9s
 => [prototype 5/8] COPY customizations /var/www/                                                                                                                                                                                                                                                                                                                                                                                      0.0s 
 => [prototype 6/8] WORKDIR /var/www/frontend                                                                                                                                                                                                                                                                                                                                                                                          0.0s 
 => ERROR [prototype 7/8] RUN npx ng build                                                                                                                                                                                                                                                                                                                                                                                            92.1s 
------                                                                                                                                                                                                                                                                                                                                                                                                                                      
 > [prototype 7/8] RUN npx ng build:                                                                                                                                                                                                                                                                                                                                                                                                        
4.082 - Generating browser application bundles (phase: setup)...                                                                                                                                                                                                                                                                                                                                                                            
90.16 ✔ Browser application bundle generation complete.                                                                                                                                                                                                                                                                                                                                                                                     
91.75 ✔ Browser application bundle generation complete.                                                                                                                                                                                                                                                                                                                                                                                     
91.76                                                                                                                                                                                                                                                                                                                                                                                                                                       
91.76 Error: src/app/generated/project.views.ts:9:4 - error TS1138: Parameter declaration expected.
91.76 
91.76 9   (: '(';
91.76      ~
91.76 
91.76 
91.76 Error: src/app/generated/project.views.ts:9:5 - error TS7006: Parameter '(Missing)' implicitly has an 'any' type.
91.76 
91.76 9   (: '(';
91.76       
91.76 
91.76 
91.76 Error: src/app/generated/project.views.ts:9:6 - error TS1003: Identifier expected.
91.76 
91.76 9   (: '(';
91.76        ~~~
91.76 
91.76 
91.76 Error: src/app/generated/project.views.ts:9:9 - error TS1138: Parameter declaration expected.
91.76 
91.76 9   (: '(';
91.76           ~

What I expected

Version of ampersand that was used

Steps to reproduce

1. 2. 3. 4.

Screenshot / Video

Context / Source of Dockerfile

FROM ampersandtarski/prototype-framework:main

COPY . /usr/local/project/

# Run ampersand compiler to generated backend json model files (in generics folder)
RUN ampersand proto --no-frontend /usr/local/project/main.adl \
  --proto-dir /var/www/backend \
  --verbose

# Run ampersand compiler to generated new frontend
RUN ampersand proto --frontend-version Angular --no-backend /usr/local/project/main.adl \
  --proto-dir /var/www/frontend/src/app/generated \
  --verbose

## At this place you can copy any frontend customizations (if applicable)
## Do this before running `npx ng build` below
## You can also copy here any project specific backend code

COPY customizations /var/www/

WORKDIR /var/www/frontend

# Build + bundle Angular frontend
RUN npx ng build

# Copy Angular frontend to public folder in web server
RUN cp -r /var/www/frontend/dist/prototype-frontend/* /var/www/html/

[stefjoosten]

Analysis

This deployment is similar to what @hanjoosten , @Michiel-s and I did last week with project-template. The only difference is that I have customizations here. I excluded this by removing the customizations temporarily. The error messages were the same, so the customizations cannot explain this.

[hanjoosten]

You probably cannot use your customizations as-is. We use angular now, not angularjs. Hopefully @Michiel-s can give you some hints/tips on how to upgrade.

[stefjoosten]

Diagnosis

The Ampersand code explains what happens here. Consider this snippet:

VIEW Kamer: RAV DEFAULT
   { "("  : TXT "("
   , "id"  : I
   , ")"  : TXT ") "
   , naam : ravNaam
   }
ENDVIEW

This translates to the following Typescript code in the front-end:

export type KamerView = {
  (: '(';
  I: string;
  ): ') ';
  naam: string;
};

This is consistent with the TypeScript errors we got in this issue.

Workaround

The obvious workaround is to avoid strings with special characters in the VIEW syntax.

Solution

From a user perspective, the error messages we get from npx do not point in the right direction. These messages are useless for Ampersand users. I can think of three different solutions:

1. Forbid special characters in view labels
2. let the Ampersand compiler generate correct TypeScript code, by transforming every label in Ampersand to a TypeScript-valid label in the TypeScript code.
3. Change the syntax of the VIEW declaration so that this cannot occur anymore.

Arguments

• Alternative 1 can be built easily in the Ampersand parser.
• Alternative 1 feels weird in the eyes of a user, because the label is not used in any way, but some of them are forbidden. The user can see no apparent logic.
• To allow every possible string, we need a function (in the Ampersand compiler) that generates a valid TypeScript label for every conceivable string. This solution solves the problem without any noticeable effect for the user.
• Isn't it weird that the labels in a view can be anything because the generator ignores them? yet, they have to be unique. This calls for a syntax change.

[hanjoosten]

I think it is a no-brainer that we should go for the second option. The label is given in interface.json as a plain text without restrictions. I suppose that in handling this text at the frontend part it should be handled properly. So I expect this can be solved somewhere at the frontend code. @Michiel-s , do you agree?