Better Type Errors

devserver/src/components/Playground.tsx

@@ -1,9 +1,9 @@
 import { Button, Classes, Intent, OverlayToaster, Popover, Tooltip, type ToastProps } from '@blueprintjs/core';
-import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import { SourceDocumentation, getNames, runInContext, type Context } from 'js-slang';
 // Importing this straight from js-slang doesn't work for whatever reason
 import createContext from 'js-slang/dist/createContext';
+import { ModuleInternalError } from 'js-slang/dist/modules/errors';
 import { setModulesStaticURL } from 'js-slang/dist/modules/loader';
 import { Chapter, Variant } from 'js-slang/dist/types';
 import { stringify } from 'js-slang/dist/utils/stringify';
@@ -159,6 +159,12 @@ const Playground: React.FC = () => {
             value: stringify(result.value)
           });
         } else if (result.status === 'error') {
+          codeContext.errors.forEach(error => {
+            if (error instanceof ModuleInternalError) {
+              console.error(error);
+            }
+          });
+
           setReplOutput({
             type: 'errors',
             errors: codeContext.errors,
@@ -210,7 +216,7 @@ const Playground: React.FC = () => {
               <Tooltip content="Settings">
                 <Button
                   {...targetProps}
-                  icon={IconNames.SETTINGS}
+                  icon='settings'
                 />
               </Tooltip>
             );

devserver/src/components/controlBar/ControlBarClearButton.tsx

@@ -1,5 +1,4 @@
 import { Tooltip } from '@blueprintjs/core';
-import { IconNames } from '@blueprintjs/icons';
 import ControlButton from '../ControlButton';
 
 type Props = {
@@ -9,7 +8,7 @@ type Props = {
 export const ControlBarClearButton = (props: Props) => <Tooltip content="Clear the editor and context">
   <ControlButton
     label="Clear"
-    icon={IconNames.Trash}
+    icon='trash'
     onClick={props.onClick}
   />
 </Tooltip>;

devserver/src/components/controlBar/ControlBarRefreshButton.tsx

@@ -1,5 +1,4 @@
 import { Tooltip } from '@blueprintjs/core';
-import { IconNames } from '@blueprintjs/icons';
 import ControlButton from '../ControlButton';
 
 type Props = {
@@ -9,7 +8,7 @@ type Props = {
 export const ControlBarRefreshButton = (props: Props) => <Tooltip content="Manually refresh the side content">
   <ControlButton
     onClick={props.onClick}
-    icon={IconNames.Refresh}
+    icon='refresh'
     label="Refresh"
   />
 </Tooltip>;

devserver/src/components/controlBar/ControlBarRunButton.tsx

@@ -1,5 +1,4 @@
 import { Position, Tooltip } from '@blueprintjs/core';
-import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
 
 import ControlButton from '../ControlButton';
@@ -22,7 +21,7 @@ export const ControlBarRunButton: React.FC<ControlButtonRunButtonProps> = (props
     <Tooltip content={tooltipContent} placement={Position.TOP}>
       <ControlButton
         label="Run"
-        icon={IconNames.PLAY}
+        icon='play'
         onClick={props.handleEditorEval}
         options={{
           iconColor: props.color,

docs/.vitepress/config.ts

@@ -64,12 +64,18 @@ const vitepressOptions: UserConfig = {
         text: 'Libraries',
         items: [
           {
-            text: 'Common Libraries',
-            link: '/lib'
-          }, {
+            text: 'Common Library',
+            link: '/lib/modules-lib'
+          },
+          {
             text: 'Developer Docs',
             link: '/lib/dev'
-          }]
+          },
+          {
+            text: 'Lint Plugin',
+            link: '/lib/lintplugin/1-overview'
+          }
+        ]
       },
       {
         text: 'Dev Tools',

docs/src/modules/1-getting-started/1-overview.md

@@ -31,6 +31,8 @@ children:
 
 - name: src
   children:
+  - name: archive
+    comment: Archived bundles and tabs
   - name: bundles
     comment: Directories containing bundles
   - name: tabs

docs/src/modules/2-bundle/4-conventions/2-abstractions.md

@@ -257,7 +257,14 @@ interface TextOptions {
   color: string;
   size: number;
 }
-export function create_text_options(color: string, size: number): TextOptions;
+export function create_text_options(color: string, size: number): TextOptions {
+  return {
+    color,
+    size,
+    // Of course, don't forget to implement `ReplResult`:
+    toReplString: () => '<TextOptions>'
+  };
+}
 export function change_text_options(options: TextOptions): void;
 
 // Used like this:

docs/src/modules/2-bundle/4-conventions/3-errors.md

@@ -53,4 +53,45 @@ Then, the error can be thrown with the correct function name. Otherwise, cadets
 that is visible to them. Many other functions might rely on `throwIfNotRune`. If they were all called in the same program, it doesn't tell the cadet which function the error was thrown from
 (was it `show`? or `anaglyph`? or something else?)
 
-An important use for error handling is when it comes to validating types. More information about type checking can be found in the next section.
+An important use for error handling is when it comes to validating types. More information about type checking can be found in the [next](./4-types) section.
+
+> [!WARNING] Undefined Name Property
+>
+> It's possible to create functions without names using anonymous expressions:
+>
+> ```ts
+> function getFunc(value: string) {
+>   return () => value;
+> }
+>
+> export const getFoo = getFunc('foo');
+> 
+> // getFoo.name is undefined!
+> console.log(getFoo.name);
+> ```
+>
+> A common case (especially if you are using type maps) is using an expression when defining a class function. This causes an anonymous function to be assigned to that property:
+>
+> ```ts
+> class Functions {
+>   static bar = () => 'bar';
+> }
+> 
+> // the name is also undefined!
+> console.log(Functions.bar.name);
+> ```
+>
+> In such a case, you should take care to define the `name` property manually (at least on the exported version):
+>
+> ```ts
+> function getFunc(value: string, func_name: string) {
+>   const func = () => value;
+>   Object.defineProperty(func, 'name', { value: func_name });
+>   return func;
+> }
+>
+> export const getFoo = getFunc('foo', 'foo');
+> 
+> // Now correctly prints foo!
+> console.log(getFoo.name);
+> ```