js syntax

editor/src/app/app.module.ts

@@ -36,6 +36,8 @@ import {
   OpcodeParamsPipe,
   FilterMethodsPipe,
   StripPunctuationPipe,
+  InputParamsJsPipe,
+  OutputParamsJsPipe,
 } from './pipes';
 
 // extensions state
@@ -91,6 +93,9 @@ import {
   CommandInfoComponent,
   CommandListComponent,
   CommandGamesComponent,
+  FormatterClassComponent,
+  FormatterOpcodeComponent,
+  FormatterJsComponent,
 } from './components/commands';
 
 import {
@@ -162,6 +167,8 @@ const metaReducers: Array<MetaReducer<any, any>> = [localStorageSyncReducer];
     GameTitleSimplePipe,
     ParametrifyPipe,
     InputParamsPipe,
+    InputParamsJsPipe,
+    OutputParamsJsPipe,
     OutputParamsPipe,
     SingleParamPipe,
     SanitizePipe,
@@ -192,6 +199,9 @@ const metaReducers: Array<MetaReducer<any, any>> = [localStorageSyncReducer];
     IconButtonComponent,
     CopyButtonComponent,
     DecisionTreeComponent,
+    FormatterClassComponent,
+    FormatterOpcodeComponent,
+    FormatterJsComponent,
   ],
   imports: [
     BrowserModule,

editor/src/app/components/commands/command-info/command-info.component.html

@@ -47,37 +47,28 @@ <h5 class="text-break">{{ command.name }}</h5>
       </ng-container>
 
       <ng-container *ngIf="command.class && command.member">
-        <ng-container *ngIf="command.attrs?.is_constructor">
-          <code>
-            <span [innerHTML]="command | outputParams | sanitize"></span> =
-            <a
-              class="identifier"
-              [attr.title]="classDesc"
-              [routerLink]="['/', game, 'classes', command.class]"
-              >{{ command.class }}</a
-            >.<span class="identifier">{{ command.member }}</span
-            ><span [innerHTML]="command | inputParams | sanitize"></span
-          ></code>
-        </ng-container>
-
-        <ng-container *ngIf="!command.attrs?.is_constructor">
-          <code
-            ><a
-              class="identifier"
-              [attr.title]="classDesc"
-              [routerLink]="['/', game, 'classes', command.class]"
-              >{{ command.class }}</a
-            >.<span class="identifier">{{ command.member }}</span
-            ><span [innerHTML]="command | classParams | sanitize"></span
-          ></code>
-        </ng-container>
+        <scl-formatter-class
+          class="formatter"
+          [game]="game"
+          [command]="command"
+          [classDesc]="classDesc"
+        ></scl-formatter-class>
       </ng-container>
 
       <ng-container *ngIf="displayOpcodePresentation">
-        <code
-          >{{ command.id | opcode }}: {{ command.name | lowercase }}
-          <span [innerHTML]="command | opcodeParams | sanitize"></span
-        ></code>
+        <scl-formatter-opcode
+          class="formatter"
+          [command]="command"
+        ></scl-formatter-opcode>
+      </ng-container>
+
+      <ng-container *ngIf="displayJsPresentation">
+        <scl-formatter-js
+          class="formatter"
+          [game]="game"
+          [command]="command"
+          [classDesc]="classDesc"
+        ></scl-formatter-js>
       </ng-container>
 
       <div *ngIf="command.input?.length > 0" class="mt-3">

editor/src/app/components/commands/command-info/command-info.component.scss

@@ -1,7 +1,5 @@
-code {
+.formatter + .formatter {
   display: block;
-}
-code + code {
   margin-top: 2rem;
 }
 

editor/src/app/components/commands/command-info/command-info.component.ts

@@ -34,6 +34,8 @@ export class CommandInfoComponent {
   customPlatforms: Platform[] = [];
   customVersions: Version[] = [];
 
+  displayJsPresentation = true;
+
   @Input() set types(val: ParamType[]) {
     this._primitives = val
       .filter((v) => v.type === 'primitive')

editor/src/app/components/commands/command-list/command-list.component.html

@@ -103,54 +103,10 @@
                 </ng-container>
 
                 <ng-container *ngIf="row.command.class && row.command.member">
-                  <ng-container *ngIf="row.command.attrs?.is_constructor">
-                    <code>
-                      <span
-                        [innerHTML]="row.command | outputParams | sanitize"
-                      ></span>
-                      =
-                      <a
-                        class="identifier"
-                        [routerLink]="['/', game, 'classes', row.command.class]"
-                        ><span
-                          [innerHTML]="
-                            row.command | propExtract: 'class' | sanitize
-                          "
-                        ></span></a
-                      >.<span
-                        class="identifier"
-                        [innerHTML]="
-                          row.command | propExtract: 'member' | sanitize
-                        "
-                      ></span
-                      ><span
-                        [innerHTML]="row.command | inputParams | sanitize"
-                      ></span
-                    ></code>
-                  </ng-container>
-
-                  <ng-container *ngIf="!row.command.attrs?.is_constructor">
-                    <code>
-                      <a
-                        class="identifier"
-                        [routerLink]="['/', game, 'classes', row.command.class]"
-                      >
-                        <span
-                          [innerHTML]="
-                            row.command | propExtract: 'class' | sanitize
-                          "
-                        ></span></a
-                      >.<span
-                        class="identifier"
-                        [innerHTML]="
-                          row.command | propExtract: 'member' | sanitize
-                        "
-                      ></span
-                      ><span
-                        [innerHTML]="row.command | classParams | sanitize"
-                      ></span
-                    ></code>
-                  </ng-container>
+                  <scl-formatter-class
+                    [game]="game"
+                    [command]="row.command"
+                  ></scl-formatter-class>
                 </ng-container>
 
                 <ng-container

editor/src/app/components/commands/formatters/formatter-class/formatter-class.component.html

@@ -0,0 +1,24 @@
+<ng-container *ngIf="command.attrs?.is_constructor">
+  <code>
+    <span [innerHTML]="command | outputParams | sanitize"></span> =
+    <a
+      class="identifier"
+      [attr.title]="classDesc"
+      [routerLink]="['/', game, 'classes', command.class]"
+      >{{ command.class }}</a
+    >.<span class="identifier">{{ command.member }}</span
+    ><span [innerHTML]="command | inputParams | sanitize"></span
+  ></code>
+</ng-container>
+
+<ng-container *ngIf="!command.attrs?.is_constructor">
+  <code
+    ><a
+      class="identifier"
+      [attr.title]="classDesc"
+      [routerLink]="['/', game, 'classes', command.class]"
+      >{{ command.class }}</a
+    >.<span class="identifier">{{ command.member }}</span
+    ><span [innerHTML]="command | classParams | sanitize"></span
+  ></code>
+</ng-container>

editor/src/app/components/commands/formatters/formatter-class/formatter-class.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormatterClassComponent } from './formatter-class.component';
+
+describe('FormatterClassComponent', () => {
+  let component: FormatterClassComponent;
+  let fixture: ComponentFixture<FormatterClassComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FormatterClassComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormatterClassComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

editor/src/app/components/commands/formatters/formatter-class/formatter-class.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { Command, Game } from '../../../../models';
+
+@Component({
+  selector: 'scl-formatter-class',
+  templateUrl: './formatter-class.component.html',
+  styleUrls: ['./formatter-class.component.scss'],
+})
+export class FormatterClassComponent {
+  @Input() command: Command;
+  @Input() game: Game;
+  @Input() classDesc?: string;
+}

editor/src/app/components/commands/formatters/formatter-js/formatter-js.component.html

@@ -0,0 +1,19 @@
+<code *ngIf="command.class && command.member">
+  <ng-container *ngIf="command.output?.length === 1">
+    var {{ command.output[0].name }} =
+  </ng-container>
+  <ng-container *ngIf="command.output?.length > 1"> var result = </ng-container>
+
+  <a
+    class="identifier"
+    [attr.title]="classDesc"
+    [routerLink]="['/', game, 'classes', command.class]"
+    >{{ getClassName(command) }}</a
+  >.<span class="identifier">{{
+    !command.attrs?.is_constructor && !command.attrs?.is_static
+      ? lowerFirst(command.member)
+      : command.member
+  }}</span
+  ><span [innerHTML]="command | inputParamsJs | sanitize"></span
+  ><ng-container *ngIf="command.attrs?.is_condition">: bool</ng-container></code
+>

editor/src/app/components/commands/formatters/formatter-js/formatter-js.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormatterJsComponent } from './formatter-js.component';
+
+describe('FormatterJsComponent', () => {
+  let component: FormatterJsComponent;
+  let fixture: ComponentFixture<FormatterJsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FormatterJsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormatterJsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

editor/src/app/components/commands/formatters/formatter-js/formatter-js.component.ts

@@ -0,0 +1,32 @@
+import { Component, Input } from '@angular/core';
+import { lowerFirst } from 'lodash';
+import { braceify } from '../../../../pipes/params';
+import { Command, Game } from '../../../../models';
+
+@Component({
+  selector: 'scl-formatter-js',
+  templateUrl: './formatter-js.component.html',
+  styleUrls: ['./formatter-js.component.scss'],
+})
+export class FormatterJsComponent {
+  @Input() command: Command;
+  @Input() game: Game;
+  @Input() classDesc?: string;
+
+  lowerFirst(s: string): string {
+    return lowerFirst(s);
+  }
+
+  getClassName(command: Command) {
+    if (!command.class) {
+      throw new Error(`Class name is undefined for command ${command.id}`);
+    }
+
+    const className =
+      command.class === 'Object' ? 'ScriptObject' : command.class;
+
+    return command.attrs?.is_constructor || command.attrs?.is_static
+      ? className
+      : braceify(className, '[]');
+  }
+}

editor/src/app/components/commands/formatters/formatter-opcode/formatter-opcode.component.html

@@ -0,0 +1,5 @@
+<code
+  >{{ command.id | opcode }}:
+  <span class="identifier">{{ command.name | lowercase }}</span>
+  <span [innerHTML]="command | opcodeParams | sanitize"></span
+></code>

editor/src/app/components/commands/formatters/formatter-opcode/formatter-opcode.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormatterOpcodeComponent } from './formatter-opcode.component';
+
+describe('FormatterOpcodeComponent', () => {
+  let component: FormatterOpcodeComponent;
+  let fixture: ComponentFixture<FormatterOpcodeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FormatterOpcodeComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormatterOpcodeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

editor/src/app/components/commands/formatters/formatter-opcode/formatter-opcode.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { Command } from 'src/app/models';
+
+@Component({
+  selector: 'scl-formatter-opcode',
+  templateUrl: './formatter-opcode.component.html',
+  styleUrls: ['./formatter-opcode.component.scss'],
+})
+export class FormatterOpcodeComponent {
+  @Input() command: Command;
+}

editor/src/app/components/commands/index.ts

@@ -2,3 +2,6 @@ export * from './command-editor/command-editor.component';
 export * from './command-games/command-games.component';
 export * from './command-info/command-info.component';
 export * from './command-list/command-list.component';
+export * from './formatters/formatter-class/formatter-class.component';
+export * from './formatters/formatter-opcode/formatter-opcode.component';
+export * from './formatters/formatter-js/formatter-js.component';