+
+ );
+};
+
+export default Workspace;
diff --git a/devserver/src/components/controlBar/ControlBar.tsx b/devserver/src/components/controlBar/ControlBar.tsx
new file mode 100644
index 000000000..52b7175dc
--- /dev/null
+++ b/devserver/src/components/controlBar/ControlBar.tsx
@@ -0,0 +1,37 @@
+import { Classes } from "@blueprintjs/core";
+import classNames from "classnames";
+import React, { type JSX } from "react";
+
+export type ControlBarProps = {
+ editorButtons: Array
+
+
+
+
+ {}}
+ handlePromptAutocomplete={props.handlePromptAutocomplete}
+ handleSendReplInputToOutput={() => {}}
+ editorValue={props.editorValue}
+ />
+
+
+
+ setSideContentHeight(ref.clientHeight)}
+ >
+
+
+
+ {props.editorButtons}
+
+ );
+
+ const flowControl = props.flowButtons && (
+ {props.flowButtons}
+ );
+
+ const editingWorkspaceControl = (
+
+ {props.editingWorkspaceButtons}
+
+ );
+
+ return (
+
+ {editorControl}
+ {flowControl}
+ {editingWorkspaceControl}
+
+ );
+};
+
+export default ControlBar;
diff --git a/devserver/src/components/controlBar/ControlBarClearButton.tsx b/devserver/src/components/controlBar/ControlBarClearButton.tsx
new file mode 100644
index 000000000..95ec26220
--- /dev/null
+++ b/devserver/src/components/controlBar/ControlBarClearButton.tsx
@@ -0,0 +1,15 @@
+import { Tooltip2 } from "@blueprintjs/popover2";
+import ControlButton from "../ControlButton";
+import { IconNames } from "@blueprintjs/icons";
+
+type Props = {
+ onClick: () => void
+}
+
+export const ControlBarClearButton = (props: Props) =>
+
+
+
+ );
+};
+
+export default Editor;
diff --git a/devserver/src/components/editor/EditorHotkeys.ts b/devserver/src/components/editor/EditorHotkeys.ts
new file mode 100644
index 000000000..9002f99fe
--- /dev/null
+++ b/devserver/src/components/editor/EditorHotkeys.ts
@@ -0,0 +1,24 @@
+export const keyBindings = {
+ evaluate: {
+ win: "Shift-Enter",
+ mac: "Shift-Enter"
+ },
+ navigate: {
+ win: "Ctrl-B",
+ mac: "Command-B"
+ },
+ refactor: {
+ win: "Ctrl-M",
+ mac: "Command-M"
+ },
+ highlightScope: {
+ win: "Ctrl-Shift-H",
+ mac: "Command-Shift-H"
+ },
+ typeInferenceDisplay: {
+ win: "Ctrl-Shift-M",
+ mac: "Command-Shift-M"
+ }
+};
+
+export type KeyFunction = keyof typeof keyBindings;
diff --git a/devserver/src/components/repl/Repl.tsx b/devserver/src/components/repl/Repl.tsx
new file mode 100644
index 000000000..c98a67cf5
--- /dev/null
+++ b/devserver/src/components/repl/Repl.tsx
@@ -0,0 +1,82 @@
+import { Card, Pre } from "@blueprintjs/core";
+import { parseError } from "js-slang";
+import React from "react";
+
+import type { InterpreterOutput } from "../../types";
+
+type OutputProps = {
+ output: InterpreterOutput;
+};
+
+const Output: React.FC
+
+ {props.output.value}
+ {props.output.consoleLogs.join("\n")}
+ {props.output.value}
+ {props.output.consoleLogs.join("\n")}
+ {props.output.value}
+ {parseError(props.output.errors)}
+ {props.output.consoleLogs.join("\n")}
+ +
{parseError(props.output.errors)}
+
+
+);
+
+export default Repl;
diff --git a/devserver/src/components/sideContent/SideContent.tsx b/devserver/src/components/sideContent/SideContent.tsx
new file mode 100644
index 000000000..d54e192c7
--- /dev/null
+++ b/devserver/src/components/sideContent/SideContent.tsx
@@ -0,0 +1,100 @@
+import { Card, Icon, Tab, type TabProps, Tabs } from "@blueprintjs/core";
+import { Tooltip2 } from "@blueprintjs/popover2";
+import React from "react";
+import type { SideContentTab } from "./types";
+
+/**
+ * @property onChange A function that is called whenever the
+ * active tab is changed by the user.
+ *
+ * @property tabs An array of SideContentTabs.
+ * The tabs will be rendered in order of the array.
+ * If this array is empty, no tabs will be rendered.
+ *
+ * @property renderActiveTabPanelOnly Set this property to
+ * true to enable unmounting of tab panels whenever tabs are
+ * switched. If it is left undefined, the value will default
+ * to false, and the tab panels will all be loaded with the
+ * mounting of the SideContent component. Switching tabs
+ * will merely hide them from view.
+ */
+export type SideContentProps = {
+ renderActiveTabPanelOnly?: boolean;
+ editorWidth?: string;
+ sideContentHeight?: number;
+ dynamicTabs: SideContentTab[]
+
+ selectedTabId: string
+ alerts: string[]
+ onChange?: (newId: string, oldId: string) => void
+};
+
+const renderTab = (
+ tab: SideContentTab,
+ shouldAlert: boolean,
+ _editorWidth?: string,
+ _sideContentHeight?: number
+) => {
+ const iconSize = 20;
+ const tabTitle = (
+
+ {props.output === null
+ ?
+
+
+ {tab.body}
;
+
+ return
+
+
+
+);
+
+export default SideContent;
diff --git a/devserver/src/components/sideContent/TestTab.tsx b/devserver/src/components/sideContent/TestTab.tsx
new file mode 100644
index 000000000..645af3ee4
--- /dev/null
+++ b/devserver/src/components/sideContent/TestTab.tsx
@@ -0,0 +1,26 @@
+import { IconNames } from "@blueprintjs/icons";
+import type { SideContentTab } from "./types";
+
+const TestTab = () =>
+ {
+ if (onChange) onChange(newId, oldId);
+ }}
+ >
+ {dynamicTabs.map((tab) => renderTab(tab, alerts.includes(tab.id), editorWidth, sideContentHeight))}
+
+
+
+
;
+
+const testTabContent: SideContentTab = {
+ id: "test",
+ label: "Welcome to the tab development server!",
+ iconName: IconNames.LabTest,
+ body: Source Academy Tab Development Server
+
+ Run some code that imports modules in the editor on the left. You should see the corresponding module tab spawn.
+ Whenever you make changes to the tab, the server should automatically reload and show the changes that you've made
+ If that does not happen, you can click the refresh button to manually reload tabs
+
+
+
+
+ - '
- : parseInt(ol, 36) -
- 9 +
- '" style="list-style-type:' +
- (low ? 'low' : 'upp') +
- 'er-alpha">') +
- entry +
- '
'); - // list - src = list(src); - replace(rx_listjoin, ''); - // code - replace(rx_code, function (all, p1, p2, p3, p4) { - stash[--si] = element('pre', element('code', p3 || p4.replace(/^ {4}/gm, ''))); - return si + '\uf8ff'; - }); - // link or image - replace(rx_link, function (all, p1, p2, p3, p4, p5, p6) { - stash[--si] = p4 - ? p2 - ? '
${header}
${desc}
This is spawned from the repeat package. Counter is {counter}
- );
- }
-}
-
-export default {
- /**
- * This function will be called to determine if the component will be
- * rendered. Currently spawns when the result in the REPL is "test".
- * @param {DebuggerContext} context
- * @returns {boolean}
- */
- toSpawn: (context: any) => context.result.value === 'test',
-
- /**
- * This function will be called to render the module tab in the side contents
- * on Source Academy frontend.
- * @param {DebuggerContext} context
- */
- body: (context: any) => Test Description
'); - }); - - test('normal function without parameters', () => { - const element = { - name: 'foo', - signatures: [{ - type: { - name: 'string', - }, - comment: { - summary: [{ - text: 'Test' - }, { - text: ' Description' - }] - } - }] - } as DeclarationReflection; - - const { header, desc } = functionParser(element); - - expect(header) - .toEqual(`${element.name}() → {string}`); - - expect(desc) - .toEqual('Test Description
'); - }); - - test('normal function without return type', () => { - const element = { - name: 'foo', - signatures: [{ - comment: { - summary: [{ - text: 'Test' - }, { - text: ' Description' - }] - } - }] - } as DeclarationReflection; - - const { header, desc } = functionParser(element); - - expect(header) - .toEqual(`${element.name}() → {void}`); - - expect(desc) - .toEqual('Test Description
'); - }); - - it('should provide \'No description available\' when description is missing', () => { - const element = { - name: 'foo', - signatures: [{}] - } as DeclarationReflection; - - const { header, desc } = functionParser(element); - - expect(header) - .toEqual(`${element.name}() → {void}`); - - expect(desc) - .toEqual('No description available
'); - }); - }); - - describe('test variable parser', () => { - test('normal function', () => { - const element = { - name: 'test_variable', - type: { - name: 'number' - }, - comment: { - summary: [{ - text: 'Test' - }, { - text: ' Description' - }] - } - } as DeclarationReflection; - - const { header, desc } = variableParser(element); - - expect(header) - .toEqual(`${element.name}: number`); - - expect(desc) - .toEqual('Test Description
'); - }) - - it('should provide \'No description available\' when description is missing', () => { - const element = { - name: 'test_variable', - type: { - name: 'number' - }, - } as DeclarationReflection; - - const { header, desc } = variableParser(element); - - expect(header) - .toEqual(`${element.name}: number`); - - expect(desc) - .toEqual('No description available
'); - }) - - it("should provide 'unknown' if type information is unavailable", () => { - const element = { - name: 'test_variable', - comment: { - summary: [{ - text: 'Test' - }, { - text: 'Description' - }] - } - } as DeclarationReflection; - - const { header, desc } = variableParser(element); - - expect(header) - .toEqual(`${element.name}: unknown`); - - expect(desc) - .toEqual('TestDescription
'); - }); - }); -}); +import type { MockedFunction } from "jest-mock"; +import getJsonCommand, * as jsonModule from '../json'; +import * as tscModule from '../../prebuild/tsc'; +import fs from 'fs/promises'; +import { ReflectionKind, type DeclarationReflection } from "typedoc"; + +jest.spyOn(jsonModule, 'buildJsons'); +jest.spyOn(tscModule, 'runTsc') + .mockResolvedValue({ + elapsed: 0, + result: { + severity: 'error', + results: [], + } + }) + +const mockBuildJson = jsonModule.buildJsons as MockedFunctionTest Description
'); + }); + + test('normal function without parameters', () => { + const element = { + name: 'foo', + signatures: [{ + type: { + name: 'string', + }, + comment: { + summary: [{ + text: 'Test' + }, { + text: ' Description' + }] + } + }] + } as DeclarationReflection; + + const { header, desc } = functionParser!(element); + + expect(header) + .toEqual(`${element.name}() → {string}`); + + expect(desc) + .toEqual('Test Description
'); + }); + + test('normal function without return type', () => { + const element = { + name: 'foo', + signatures: [{ + comment: { + summary: [{ + text: 'Test' + }, { + text: ' Description' + }] + } + }] + } as DeclarationReflection; + + const { header, desc } = functionParser!(element); + + expect(header) + .toEqual(`${element.name}() → {void}`); + + expect(desc) + .toEqual('Test Description
'); + }); + + it('should provide \'No description available\' when description is missing', () => { + const element = { + name: 'foo', + signatures: [{}] + } as DeclarationReflection; + + const { header, desc } = functionParser!(element); + + expect(header) + .toEqual(`${element.name}() → {void}`); + + expect(desc) + .toEqual('No description available
'); + }); + }); + + describe('test variable parser', () => { + test('normal function', () => { + const element = { + name: 'test_variable', + type: { + name: 'number' + }, + comment: { + summary: [{ + text: 'Test' + }, { + text: ' Description' + }] + } + } as DeclarationReflection; + + const { header, desc } = variableParser!(element); + + expect(header) + .toEqual(`${element.name}: number`); + + expect(desc) + .toEqual('Test Description
'); + }) + + it('should provide \'No description available\' when description is missing', () => { + const element = { + name: 'test_variable', + type: { + name: 'number' + }, + } as DeclarationReflection; + + const { header, desc } = variableParser!(element); + + expect(header) + .toEqual(`${element.name}: number`); + + expect(desc) + .toEqual('No description available
'); + }) + + it("should provide 'unknown' if type information is unavailable", () => { + const element = { + name: 'test_variable', + comment: { + summary: [{ + text: 'Test' + }, { + text: 'Description' + }] + } + } as DeclarationReflection; + + const { header, desc } = variableParser!(element); + + expect(header) + .toEqual(`${element.name}: unknown`); + + expect(desc) + .toEqual('TestDescription
'); + }); + }); +}); diff --git a/scripts/src/build/docs/docUtils.ts b/scripts/src/build/docs/docUtils.ts index 3880ab46b..8cea83b39 100644 --- a/scripts/src/build/docs/docUtils.ts +++ b/scripts/src/build/docs/docUtils.ts @@ -1,56 +1,52 @@ -import chalk from 'chalk'; -import { type ProjectReflection, Application, TSConfigReader } from 'typedoc'; - -import { wrapWithTimer } from '../../scriptUtils.js'; -import { bundleNameExpander, divideAndRound } from '../buildUtils.js'; - -type TypedocOpts = { - srcDir: string; - bundles: string[]; - verbose: boolean; -}; - -/** - * Offload running typedoc into async code to increase parallelism - * - * @param watch Pass true to initialize typedoc in watch mode. `app.convert()` will not be called. - */ -export const initTypedoc = wrapWithTimer( - ({ - srcDir, - bundles, - verbose, - }: TypedocOpts, - watch?: boolean) => new Promise<[Application, ProjectReflection]>((resolve, reject) => { - try { - const app = new Application(); - app.options.addReader(new TSConfigReader()); - - app.bootstrap({ - categorizeByGroup: true, - entryPoints: bundles.map(bundleNameExpander(srcDir)), - excludeInternal: true, - logger: watch ? 'none' : undefined, - logLevel: verbose ? 'Info' : 'Error', - name: 'Source Academy Modules', - readme: `${srcDir}/README.md`, - tsconfig: `${srcDir}/tsconfig.json`, - skipErrorChecking: true, - watch, - }); - - if (watch) resolve([app, null]); - - const project = app.convert(); - if (!project) { - reject(new Error('Failed to initialize typedoc - Make sure to check that the source files have no compilation errors!')); - } else resolve([app, project]); - } catch (error) { - reject(error); - } - }), -); - -export const logTypedocTime = (elapsed: number) => console.log( - `${chalk.cyanBright('Took')} ${divideAndRound(elapsed, 1000)}s ${chalk.cyanBright('to initialize typedoc')}`, -); +import chalk from 'chalk'; +import { type ProjectReflection, Application, TSConfigReader } from 'typedoc'; + +import { wrapWithTimer } from '../../scriptUtils.js'; +import { bundleNameExpander, divideAndRound } from '../buildUtils.js'; + +type TypedocOpts = { + srcDir: string; + bundles: string[]; + verbose: boolean; +}; + +/** + * Typedoc initialization: Use this to get an instance of typedoc which can then be used to + * generate both json and html documentation + * + * @param watch Pass true to initialize typedoc in watch mode. `app.convert()` will not be called. + */ +export const initTypedoc = wrapWithTimer( + async ({ + srcDir, + bundles, + verbose, + }: TypedocOpts, + watch?: boolean): Promise<[Application, ProjectReflection | null]> => { + const app = await Application.bootstrap({ + categorizeByGroup: true, + entryPoints: bundles.map(bundleNameExpander(srcDir)), + excludeInternal: true, + // logger: watch ? 'none' : undefined, + logLevel: verbose ? 'Info' : 'Error', + name: 'Source Academy Modules', + readme: './scripts/src/build/docs/docsreadme.md', + tsconfig: `${srcDir}/tsconfig.json`, + skipErrorChecking: true, + watch, + }); + + app.options.addReader(new TSConfigReader()); + + if (watch) return [app, null]; + + const project = await app.convert(); + if (!project) { + throw new Error('Failed to initialize typedoc - Make sure to check that the source files have no compilation errors!'); + } else return [app, project]; + }, +); + +export const logTypedocTime = (elapsed: number) => console.log( + `${chalk.cyanBright('Took')} ${divideAndRound(elapsed, 1000)}s ${chalk.cyanBright('to initialize typedoc')}`, +); diff --git a/scripts/src/build/docs/docsreadme.md b/scripts/src/build/docs/docsreadme.md new file mode 100644 index 000000000..0adf8f5be --- /dev/null +++ b/scripts/src/build/docs/docsreadme.md @@ -0,0 +1,18 @@ +# Overview + +The Source Academy allows programmers to import functions and constants from a module, using JavaScript's `import` directive. For example, the programmer may decide to import the function `thrice` from the module `repeat` by starting the program with +``` +import { thrice } from "repeat"; +``` + +When evaluating such a directive, the Source Academy looks for a module with the matching name, here `repeat`, in a preconfigured modules site. The Source Academy at https://sourceacademy.org uses the default modules site (located at https://source-academy.github.io/modules). + +After importing functions or constants from a module, they can be used as usual. +``` +thrice(display)(8); // displays 8 three times +``` +if `thrice` is declared in the module `repeat` as follows: +``` +const thrice = f => x => f(f(f(x))); +``` +[List of modules](modules.html) available at the default modules site. \ No newline at end of file diff --git a/scripts/src/build/docs/html.ts b/scripts/src/build/docs/html.ts index 735ae76c7..5ae55a9ab 100644 --- a/scripts/src/build/docs/html.ts +++ b/scripts/src/build/docs/html.ts @@ -1,101 +1,101 @@ -import chalk from 'chalk'; -import { Command } from 'commander'; -import type { Application, ProjectReflection } from 'typedoc'; - -import { wrapWithTimer } from '../../scriptUtils.js'; -import { divideAndRound, exitOnError, retrieveBundles } from '../buildUtils.js'; -import { logTscResults, runTsc } from '../prebuild/tsc.js'; -import type { BuildCommandInputs, OperationResult } from '../types'; - -import { initTypedoc, logTypedocTime } from './docUtils.js'; - -type HTMLOptions = { - outDir: string; - modulesSpecified: boolean; -}; - -/** - * Build HTML documentation - */ -export const buildHtml = wrapWithTimer(async (app: Application, - project: ProjectReflection, { - outDir, - modulesSpecified, - }: HTMLOptions): Promise${header}
${desc}
${header}
${desc}