Improve sig snippet to display alias statement

common-docs/reference/arrays/pop.md

@@ -3,7 +3,8 @@
 Remove and return the last element from an array.
 
 ```sig
-["hello"].pop()
+["hello"].pop();
+["hello"]._popStatement();
 ```
 
 The last element in the array is removed, so the array becomes smaller by one element.

common-docs/reference/arrays/remove-at.md

@@ -3,7 +3,8 @@
 Remove and return an element from an array at some position.
 
 ```sig
-[""].removeAt(0)
+[""].removeAt(0);
+[""]._removeAtStatement(0);
 ```
 
 The size of the array shrinks by one. The element is removed from the array at the position you want. All the other elements after it are moved (shifted) to down to the next lower position. So, an array that has the numbers
@@ -34,5 +35,4 @@ let unzapped = radLevels.removeAt(level)
 
 ## See also
 
-[remove at (no return value)](/reference/arrays/remove-at-statement),
 [insert at](/reference/arrays/insert-at)

common-docs/reference/arrays/shift.md

@@ -3,7 +3,8 @@
 Remove and return the first element from an array.
 
 ```sig
-[""].shift()
+[""].shift();
+[""]._shiftStatement();
 ```
 
 The first element in the array is removed, so the array becomes smaller by one element.

common-docs/reference/arrays/unshift.md

@@ -3,7 +3,8 @@
 Add an element to the front of an array.
 
 ```sig
-[""].unshift("hello")
+[""].unshift("hello");
+[""]._unshiftStatement("hello");
 ```
 
 You might have an array with 3 numbers, like 1, 2, and 3. If you want to add another number to the front,

libs/pxt-common/pxt-core.d.ts

@@ -245,7 +245,7 @@ interface Array<T> {
     _shiftStatement(): void;
 
     /** Remove the element at a certain index. */
-    //% help=arrays/remove-at-statement
+    //% help=arrays/remove-at
     //% shim=Array_::removeAt weight=14
     //% blockId="array_removeat_statement" block="%list| remove value at %index" blockNamespace="arrays"
     //% blockAliasFor="Array.removeAt"

pxtrunner/renderer.ts

@@ -481,7 +481,8 @@ function renderSignaturesAsync(options: ClientRenderOptions): Promise<void> {
         let cjs = r.compileProgram;
         if (!cjs) return;
         let file = cjs.getSourceFile(pxt.MAIN_TS);
-        let info = decompileCallInfo(file.statements[0]);
+        let [mainStatement, ...aliasStatements] = file.statements
+        let info = decompileCallInfo(mainStatement);
         if (!info || !r.apiInfo) return;
         const symbolInfo = r.apiInfo.byQName[info.qName];
         if (!symbolInfo) return;
@@ -497,6 +498,22 @@ function renderSignaturesAsync(options: ClientRenderOptions): Promise<void> {
         const pySig = pxt.appTarget?.appTheme?.python && ts.pxtc.service.displayStringForSymbol(symbolInfo, /** python **/ true, r.apiInfo).split("\n")[1];
         const py: JQuery = pySig && $('<code class="lang-python highlight"/>').text(pySig);
         if (options.snippetReplaceParent) c = c.parent();
+
+        // add alias svgs
+        let svgs = $('<div style="display:flex;flex-direction:column;gap:1em;" />').append(s);
+        svgs = aliasStatements.reduce((parentElement, statement) => {
+            let aliasInfo = decompileCallInfo(statement);
+            if (!aliasInfo) return parentElement;
+            const aliasSymbolInfo = r.apiInfo.byQName[aliasInfo.qName];
+            if (!aliasSymbolInfo) return parentElement;
+            if (aliasSymbolInfo.attributes.blockAliasFor !== info.qName) return parentElement;
+            let aliasBlock = Blockly.Blocks[aliasSymbolInfo.attributes.blockId];
+            let aliasXml = aliasBlock?.codeCard?.blocksXml || undefined;
+            const aliasBlocksHtml = aliasXml ? render(aliasXml) : r.compileBlocks?.success ? r.blocksSvg : undefined;
+            const aliasSvg = aliasBlocksHtml ? $(aliasBlocksHtml as HTMLElement) : undefined;
+            return parentElement.append(aliasSvg);
+        }, svgs);
+
         // add an html widge that allows to translate the block
         if (pxt.Util.isTranslationMode()) {
             const trs = $('<div class="ui segment" />');
@@ -507,7 +524,7 @@ function renderSignaturesAsync(options: ClientRenderOptions): Promise<void> {
                 trs.append($('<div class="ui message">').text(symbolInfo.attributes.jsDoc));
             trs.insertAfter(c);
         }
-        fillWithWidget(options, c, js, py, s, r, { showJs: true, showPy: true, hideGutter: true });
+        fillWithWidget(options, c, js, py, svgs, r, { showJs: true, showPy: true, hideGutter: true });
     }, { package: options.package, snippetMode: true, aspectRatio: options.blocksAspectRatio, assets: options.assetJSON });
 }