From 537936f3265b0169cc11c248a6e26bc984e96e7d Mon Sep 17 00:00:00 2001
From: Seemann <mail@sannybuilder.com>
Date: Thu, 30 Dec 2021 11:49:23 -0500
Subject: [PATCH] temp commit

---
 editor/src/app/app.module.ts                  | 10 ++
 .../command-info/command-info.component.html  | 47 ++++------
 .../command-info/command-info.component.scss  |  4 +-
 .../command-info/command-info.component.ts    |  2 +
 .../command-list/command-list.component.html  | 52 +----------
 .../formatter-class.component.html            | 24 +++++
 .../formatter-class.component.scss            |  0
 .../formatter-class.component.spec.ts         | 25 +++++
 .../formatter-class.component.ts              | 13 +++
 .../formatter-js/formatter-js.component.html  | 19 ++++
 .../formatter-js/formatter-js.component.scss  |  0
 .../formatter-js.component.spec.ts            | 25 +++++
 .../formatter-js/formatter-js.component.ts    | 32 +++++++
 .../formatter-opcode.component.html           |  5 +
 .../formatter-opcode.component.scss           |  0
 .../formatter-opcode.component.spec.ts        | 25 +++++
 .../formatter-opcode.component.ts             | 11 +++
 editor/src/app/components/commands/index.ts   |  3 +
 .../library-page/library-page.component.html  | 93 ++++++++++++-------
 editor/src/app/pipes/index.ts                 |  2 +
 editor/src/app/pipes/input-params-js.pipe.ts  | 24 +++++
 editor/src/app/pipes/opcode-params.pipe.ts    |  6 +-
 editor/src/app/pipes/output-params-js.pipe.ts | 30 ++++++
 editor/src/app/pipes/params.ts                |  2 +-
 24 files changed, 340 insertions(+), 114 deletions(-)
 create mode 100644 editor/src/app/components/commands/formatters/formatter-class/formatter-class.component.html
 create mode 100644 editor/src/app/components/commands/formatters/formatter-class/formatter-class.component.scss
 create mode 100644 editor/src/app/components/commands/formatters/formatter-class/formatter-class.component.spec.ts
 create mode 100644 editor/src/app/components/commands/formatters/formatter-class/formatter-class.component.ts
 create mode 100644 editor/src/app/components/commands/formatters/formatter-js/formatter-js.component.html
 create mode 100644 editor/src/app/components/commands/formatters/formatter-js/formatter-js.component.scss
 create mode 100644 editor/src/app/components/commands/formatters/formatter-js/formatter-js.component.spec.ts
 create mode 100644 editor/src/app/components/commands/formatters/formatter-js/formatter-js.component.ts
 create mode 100644 editor/src/app/components/commands/formatters/formatter-opcode/formatter-opcode.component.html
 create mode 100644 editor/src/app/components/commands/formatters/formatter-opcode/formatter-opcode.component.scss
 create mode 100644 editor/src/app/components/commands/formatters/formatter-opcode/formatter-opcode.component.spec.ts
 create mode 100644 editor/src/app/components/commands/formatters/formatter-opcode/formatter-opcode.component.ts
 create mode 100644 editor/src/app/pipes/input-params-js.pipe.ts
 create mode 100644 editor/src/app/pipes/output-params-js.pipe.ts

diff --git a/editor/src/app/app.module.ts b/editor/src/app/app.module.ts
index 999b981d5..e7e820ae1 100644
--- a/editor/src/app/app.module.ts
+++ b/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,
diff --git a/editor/src/app/components/commands/command-info/command-info.component.html b/editor/src/app/components/commands/command-info/command-info.component.html
index ecfe454a1..db9b99541 100644
--- a/editor/src/app/components/commands/command-info/command-info.component.html
+++ b/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">
diff --git a/editor/src/app/components/commands/command-info/command-info.component.scss b/editor/src/app/components/commands/command-info/command-info.component.scss
index c04f6b44a..1b8de0506 100644
--- a/editor/src/app/components/commands/command-info/command-info.component.scss
+++ b/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;
 }
 
diff --git a/editor/src/app/components/commands/command-info/command-info.component.ts b/editor/src/app/components/commands/command-info/command-info.component.ts
index 95df96745..d69e83e27 100644
--- a/editor/src/app/components/commands/command-info/command-info.component.ts
+++ b/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')
diff --git a/editor/src/app/components/commands/command-list/command-list.component.html b/editor/src/app/components/commands/command-list/command-list.component.html
index d4261306e..098c153b5 100644
--- a/editor/src/app/components/commands/command-list/command-list.component.html
+++ b/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
diff --git a/editor/src/app/components/commands/formatters/formatter-class/formatter-class.component.html b/editor/src/app/components/commands/formatters/formatter-class/formatter-class.component.html
new file mode 100644
index 000000000..1b17b3567
--- /dev/null
+++ b/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>
diff --git a/editor/src/app/components/commands/formatters/formatter-class/formatter-class.component.scss b/editor/src/app/components/commands/formatters/formatter-class/formatter-class.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/editor/src/app/components/commands/formatters/formatter-class/formatter-class.component.spec.ts b/editor/src/app/components/commands/formatters/formatter-class/formatter-class.component.spec.ts
new file mode 100644
index 000000000..317132193
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/editor/src/app/components/commands/formatters/formatter-class/formatter-class.component.ts b/editor/src/app/components/commands/formatters/formatter-class/formatter-class.component.ts
new file mode 100644
index 000000000..c92f14e8d
--- /dev/null
+++ b/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;
+}
diff --git a/editor/src/app/components/commands/formatters/formatter-js/formatter-js.component.html b/editor/src/app/components/commands/formatters/formatter-js/formatter-js.component.html
new file mode 100644
index 000000000..5bf5dee1d
--- /dev/null
+++ b/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
+>
diff --git a/editor/src/app/components/commands/formatters/formatter-js/formatter-js.component.scss b/editor/src/app/components/commands/formatters/formatter-js/formatter-js.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/editor/src/app/components/commands/formatters/formatter-js/formatter-js.component.spec.ts b/editor/src/app/components/commands/formatters/formatter-js/formatter-js.component.spec.ts
new file mode 100644
index 000000000..dbdf17efb
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/editor/src/app/components/commands/formatters/formatter-js/formatter-js.component.ts b/editor/src/app/components/commands/formatters/formatter-js/formatter-js.component.ts
new file mode 100644
index 000000000..bbfd138e5
--- /dev/null
+++ b/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, '[]');
+  }
+}
diff --git a/editor/src/app/components/commands/formatters/formatter-opcode/formatter-opcode.component.html b/editor/src/app/components/commands/formatters/formatter-opcode/formatter-opcode.component.html
new file mode 100644
index 000000000..080df0c26
--- /dev/null
+++ b/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>
diff --git a/editor/src/app/components/commands/formatters/formatter-opcode/formatter-opcode.component.scss b/editor/src/app/components/commands/formatters/formatter-opcode/formatter-opcode.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/editor/src/app/components/commands/formatters/formatter-opcode/formatter-opcode.component.spec.ts b/editor/src/app/components/commands/formatters/formatter-opcode/formatter-opcode.component.spec.ts
new file mode 100644
index 000000000..5b8e669e5
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/editor/src/app/components/commands/formatters/formatter-opcode/formatter-opcode.component.ts b/editor/src/app/components/commands/formatters/formatter-opcode/formatter-opcode.component.ts
new file mode 100644
index 000000000..d85d7fc80
--- /dev/null
+++ b/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;
+}
diff --git a/editor/src/app/components/commands/index.ts b/editor/src/app/components/commands/index.ts
index 289f3375c..9597bfae2 100644
--- a/editor/src/app/components/commands/index.ts
+++ b/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';
diff --git a/editor/src/app/components/library-page/library-page.component.html b/editor/src/app/components/library-page/library-page.component.html
index 00e5ba0b2..339308319 100644
--- a/editor/src/app/components/library-page/library-page.component.html
+++ b/editor/src/app/components/library-page/library-page.component.html
@@ -57,40 +57,69 @@
                 </li>
               </ol>
             </nav>
-            <button
-              *ngIf="canEdit$ | async"
-              class="btn btn-outline-secondary dropdown-toggle mb-3"
-              data-toggle="dropdown"
-              data-offset="0,0"
-              aria-haspopup="true"
-              aria-expanded="false"
-            >
-              <svg
-                style="margin-top: -3px"
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                fill="currentColor"
-                class="bi bi-plus"
-                viewBox="0 0 16 16"
-              >
-                <path
-                  d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"
-                />
-              </svg>
-              {{ "ui.layout.new" | translate }}
-            </button>
-            <div class="dropdown-menu dropdown-menu-right">
-              <a
-                class="dropdown-item"
-                [routerLink]="['/', game, 'enums', 'new']"
-                >{{ "ui.layout.newEnum" | translate }}</a
+
+            <div>
+              <button
+                class="btn btn-outline-secondary dropdown-toggle mb-3"
+                data-toggle="dropdown"
+                data-offset="0,0"
+                aria-haspopup="true"
+                aria-expanded="false"
               >
-              <a
-                class="dropdown-item"
-                [routerLink]="['/', game, DEFAULT_EXTENSION, 'new']"
-                >{{ "ui.layout.newCommand" | translate }}</a
+                Format
+              </button>
+              <div class="dropdown-menu dropdown-menu-right">
+                <div
+                  class="dropdown-item d-sm-inline-block d-xl-block pr-2"
+                  *ngFor="let s of ['Classes', 'Opcodes', 'JavaScript']"
+                >
+                  <label
+                    class="form-check-label"
+                    (click)="$event.stopPropagation()"
+                  >
+                    <input type="checkbox" />
+                    <span class="checkbox"></span>
+                    {{ s }}
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div>
+              <button
+                *ngIf="canEdit$ | async"
+                class="btn btn-outline-secondary dropdown-toggle mb-3 ml-2"
+                data-toggle="dropdown"
+                data-offset="0,0"
+                aria-haspopup="true"
+                aria-expanded="false"
               >
+                <svg
+                  style="margin-top: -3px"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  fill="currentColor"
+                  class="bi bi-plus"
+                  viewBox="0 0 16 16"
+                >
+                  <path
+                    d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"
+                  />
+                </svg>
+                {{ "ui.layout.new" | translate }}
+              </button>
+              <div class="dropdown-menu dropdown-menu-right">
+                <a
+                  class="dropdown-item"
+                  [routerLink]="['/', game, 'enums', 'new']"
+                  >{{ "ui.layout.newEnum" | translate }}</a
+                >
+                <a
+                  class="dropdown-item"
+                  [routerLink]="['/', game, DEFAULT_EXTENSION, 'new']"
+                  >{{ "ui.layout.newCommand" | translate }}</a
+                >
+              </div>
             </div>
           </div>
 
diff --git a/editor/src/app/pipes/index.ts b/editor/src/app/pipes/index.ts
index ef486a1a7..1de8d108e 100644
--- a/editor/src/app/pipes/index.ts
+++ b/editor/src/app/pipes/index.ts
@@ -14,3 +14,5 @@ export * from './opcode-params.pipe';
 export * from './filter-methods';
 export * from './strip-punctuation';
 export * from './game-title-simple.pipe';
+export * from './input-params-js.pipe';
+export * from './output-params-js.pipe';
diff --git a/editor/src/app/pipes/input-params-js.pipe.ts b/editor/src/app/pipes/input-params-js.pipe.ts
new file mode 100644
index 000000000..a48a9893a
--- /dev/null
+++ b/editor/src/app/pipes/input-params-js.pipe.ts
@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Command } from '../models';
+import { inputParams } from '../utils';
+import { braceify, stringify } from './params';
+
+@Pipe({
+  name: 'inputParamsJs',
+})
+export class InputParamsJsPipe implements PipeTransform {
+  transform(command: Command): string {
+    if (!command.num_params) {
+      return '()';
+    }
+    return braceify(
+      stringify(
+        inputParams(command)
+          .filter((p) => p.name !== 'self')
+          .map((p) => ({ ...p, type: '' })),
+        ', '
+      ),
+      '()'
+    );
+  }
+}
diff --git a/editor/src/app/pipes/opcode-params.pipe.ts b/editor/src/app/pipes/opcode-params.pipe.ts
index 16d80a213..eed7d0221 100644
--- a/editor/src/app/pipes/opcode-params.pipe.ts
+++ b/editor/src/app/pipes/opcode-params.pipe.ts
@@ -27,14 +27,16 @@ export class OpcodeParamsPipe implements PipeTransform {
     );
 
     if (output) {
-      return `${input} store_to ${output}`;
+      return `${input} <span class="identifier">store_to</span> ${output}`;
     }
     return input;
   }
 
   private _tranformParamName(p: Param) {
     return p.name
-      ? `<span class="param-name">${snakeCase(p.name)}</span>`
+      ? `<span class="param-name">${
+          p.name.startsWith('_') ? p.name : snakeCase(p.name)
+        }</span>`
       : p.name;
   }
 }
diff --git a/editor/src/app/pipes/output-params-js.pipe.ts b/editor/src/app/pipes/output-params-js.pipe.ts
new file mode 100644
index 000000000..93f010bae
--- /dev/null
+++ b/editor/src/app/pipes/output-params-js.pipe.ts
@@ -0,0 +1,30 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Command, SourceType } from '../models';
+import { outputParams } from '../utils';
+
+@Pipe({
+  name: 'outputParamsJs',
+})
+export class OutputParamsJsPipe implements PipeTransform {
+  transform(command: Command): string {
+    if (!command.num_params) {
+      return '';
+    }
+    const output = outputParams(command);
+
+    if (output.length === 1) {
+      return `var ${output[0].name}`;
+    }
+    return 'var result';
+  }
+}
+
+/*
+     braceify(
+        stringify(output, ', ', (p) =>
+          stringifyWithColon({ ...p, source: SourceType.any, type: '' })
+        ),
+        '{}'
+      )
+
+      */
diff --git a/editor/src/app/pipes/params.ts b/editor/src/app/pipes/params.ts
index 6a58ef584..b8bb61c48 100644
--- a/editor/src/app/pipes/params.ts
+++ b/editor/src/app/pipes/params.ts
@@ -35,7 +35,7 @@ export function stringifyTypeAndSource(p: Param) {
     .join(' ');
 }
 
-export function braceify(value: string, braces: '[]' | '()') {
+export function braceify(value: string, braces: '[]' | '()' | '{}') {
   return `${braces[0]}${value}${braces[1]}`;
 }