feat(editor): pass all possible scripting languages to the editor

Author: Raphael Schweikert

Diff for: mock/script-builder.html

@@ -42,6 +42,7 @@
 										<div
 											class="jcr-hopper-builder"
 											data-run-endpoint="/mock/mock-response.jsonl"
+											data-valid-scripting-languages='{"js": "JavaScript", "jexl": "JEXL", "groovy": "Groovy"}'
 										></div>
 									</div>
 								</div>

Diff for: src/main/content/jcr_root/apps/jcr-hopper/script-builder/build-area/build-area.html

@@ -1 +1,6 @@
-<div data-sly-use.info="com.swisscom.aem.tools.jcrhopper.impl.HopRunnerInfo" class="jcr-hopper-builder" data-run-endpoint="${info.endpoint}"></div>
+<div
+	data-sly-use.info="com.swisscom.aem.tools.jcrhopper.impl.HopRunnerInfo"
+	class="jcr-hopper-builder"
+	data-run-endpoint="${info.endpoint}"
+	data-valid-scripting-languages="${info.validScriptingLanguages}"
+></div>

Diff for: src/main/frontend/App.tsx

@@ -9,7 +9,10 @@ import { HistoryUpdater, useHistoryImmutable } from './hooks/useHistoryImmutable
 import { useOnce } from './hooks/useOnce';
 import { ScriptEditor } from './sections/ScriptEditor';
 
-export const RunEndpointContext = createContext('');
+export const EnvironmentContext = createContext({
+	runEndpoint: '/',
+	validScriptingLanguages: {} as Record<string, string>,
+});
 export const ScriptContext = createContext<HistoryUpdater<Script>>(null!);
 
 const RootElement = styled('div')`
@@ -78,22 +81,22 @@ const RootElement = styled('div')`
 	}
 `;
 
-export const App: FC<{ runEndpoint: string }> = props => {
+export const App: FC<{ runEndpoint: string; validScriptingLanguages: Record<string, string> }> = props => {
 	const initialScript = useOnce(getInitialScript);
 
 	const scriptContext = useHistoryImmutable(initialScript, current => {
 		window.sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(current));
 	});
 
 	return (
-		<RunEndpointContext.Provider value={props.runEndpoint}>
+		<EnvironmentContext.Provider value={{ ...props }}>
 			<ScriptContext.Provider value={scriptContext}>
 				<RootElement>
 					<Toolbar />
 					<ScriptEditor />
 					<Runner />
 				</RootElement>
 			</ScriptContext.Provider>
-		</RunEndpointContext.Provider>
+		</EnvironmentContext.Provider>
 	);
 };

Diff for: src/main/frontend/editor.tsx

@@ -11,11 +11,11 @@ patchCoralUiCreateElement();
 
 function init() {
 	const target = document.querySelector<HTMLElement>('.jcr-hopper-builder')!;
-	const { runEndpoint } = target.dataset;
+	const { runEndpoint, validScriptingLanguages } = target.dataset;
 	const root = createRoot(target.parentElement!.parentElement!);
 	root.render(
 		<React.StrictMode>
-			<App runEndpoint={runEndpoint!}></App>
+			<App runEndpoint={runEndpoint!} validScriptingLanguages={JSON.parse(validScriptingLanguages || '{}')}></App>
 		</React.StrictMode>,
 	);
 }

Diff for: src/main/frontend/model/hops/runScript.ts

@@ -1,14 +1,14 @@
 import { AnyHop } from '.';
 
-export const SCRIPT_LANGUAGES = {
+export const SCRIPT_LANGUAGES: Record<string, string> = {
 	jexl: 'JEXL',
 	js: 'JavaScript',
 };
 
 export interface Type extends AnyHop {
 	type: 'runScript';
 	code: string;
-	extension: keyof typeof SCRIPT_LANGUAGES;
+	extension: string;
 	putLocalsBackIntoScope?: boolean;
 }
 
@@ -22,7 +22,7 @@ export const title = 'Run a Script';
 
 export function shortDescription(config: Type) {
 	const lang = config.extension ?? 'js';
-	const name = SCRIPT_LANGUAGES[lang] ?? lang.toUpperCase();
+	const name = lang in SCRIPT_LANGUAGES ? SCRIPT_LANGUAGES[lang] : lang.toUpperCase();
 
 	const lines = config.code?.split(/\n/).filter(Boolean).length;
 	if (!lines) {

Diff for: src/main/frontend/sections/RunControls.tsx

@@ -1,7 +1,7 @@
 import React, { FC, FormEvent, useContext, useRef } from 'react';
 
 import { styled } from 'goober';
-import { RunEndpointContext, ScriptContext } from '../App';
+import { EnvironmentContext, ScriptContext } from '../App';
 
 const Elm = styled('form', React.forwardRef)`
 	grid-auto-flow: row;
@@ -13,7 +13,7 @@ const Elm = styled('form', React.forwardRef)`
 
 export const RunControls: FC<{ runWith: (data: FormData) => Promise<void> }> = ({ runWith }) => {
 	const { current: script } = useContext(ScriptContext);
-	const endpoint = useContext(RunEndpointContext);
+	const environmentContext = useContext(EnvironmentContext);
 
 	const formRef = useRef<HTMLFormElement>(null);
 
@@ -31,7 +31,14 @@ export const RunControls: FC<{ runWith: (data: FormData) => Promise<void> }> = (
 	}
 
 	return (
-		<Elm className="run-controls" ref={formRef} method="POST" action={endpoint} encType="multipart/form-data" onSubmit={run}>
+		<Elm
+			className="run-controls"
+			ref={formRef}
+			method="POST"
+			action={environmentContext.runEndpoint}
+			encType="multipart/form-data"
+			onSubmit={run}
+		>
 			{script.parameters.length ? (
 				<fieldset>
 					<legend>Arguments</legend>

Diff for: src/main/frontend/sections/Runner.tsx

@@ -1,17 +1,17 @@
 import React, { FC, useContext, useState } from 'react';
 
-import { RunEndpointContext } from '../App';
+import { EnvironmentContext } from '../App';
 import { Output } from './Output';
 import { Run } from '../model/Run';
 import { RunControls } from './RunControls';
 
 export const Runner: FC = () => {
-	const endpoint = useContext(RunEndpointContext);
+	const environmentContext = useContext(EnvironmentContext);
 
 	const [runs, setRuns] = useState<Run[]>([]);
 
 	async function runWith(data: FormData) {
-		const response = fetch(endpoint, {
+		const response = fetch(environmentContext.runEndpoint, {
 			method: 'POST',
 			body: data,
 		});

Diff for: src/main/frontend/sections/editor/types/RunScriptStep.tsx

@@ -3,26 +3,28 @@ import React, { forwardRef, useContext } from 'react';
 import { Hop } from '../../../model/hops';
 import { StepEditor } from '../../../widgets/StepEditor';
 
-import { SCRIPT_LANGUAGES, shortDescription, title, Type, iconFor } from '../../../model/hops/runScript';
+import { shortDescription, title, Type, iconFor } from '../../../model/hops/runScript';
 import { Help } from '../../../widgets/Help';
 import { Select } from '../../../widgets/Select';
-import { CodeEditor } from '../../../widgets/CodeEditor';
-import { ScriptContext } from '../../../App';
+import { CodeEditor, EditorLanguage } from '../../../widgets/CodeEditor';
+import { EnvironmentContext, ScriptContext } from '../../../App';
 import { Switch } from '../../../widgets/Switch';
 
 export const RunScriptStep = forwardRef<HTMLDivElement, { parentHops: Hop[]; hop: Type }>(function RunScriptStep({ parentHops, hop }, ref) {
 	const scriptContext = useContext(ScriptContext);
+	const { validScriptingLanguages } = useContext(EnvironmentContext);
+	const languageName = validScriptingLanguages[hop.extension];
 
 	return (
 		<StepEditor icon={iconFor(hop)} parentHops={parentHops} hop={hop} title={shortDescription(hop)} ref={ref}>
 			<Select
 				label="Language"
-				list={Object.entries(SCRIPT_LANGUAGES) as [keyof typeof SCRIPT_LANGUAGES, string][]}
+				list={Object.entries(validScriptingLanguages).map(([extension, name]) => [extension, `${name} (${extension})`])}
 				value={hop.extension}
 				onChange={extension => (hop.extension = extension)}
 			/>
 			<CodeEditor
-				language={hop.extension}
+				language={hop.extension as EditorLanguage}
 				lines={10}
 				value={hop.code}
 				onChange={code => {
@@ -36,9 +38,9 @@ export const RunScriptStep = forwardRef<HTMLDivElement, { parentHops: Hop[]; hop
 				onChange={putLocalsBackIntoScope => (hop.putLocalsBackIntoScope = putLocalsBackIntoScope)}
 			/>
 			<Help title={title}>
-				<h5>{SCRIPT_LANGUAGES[hop.extension]} Script Code</h5>
+				<h5>{languageName} Script Code</h5>
 				<p>
-					The {SCRIPT_LANGUAGES[hop.extension]} script code to run.
+					The {languageName} script code to run.
 					<br />
 					{hop.extension === 'jexl' ? (
 						<small>
@@ -47,14 +49,14 @@ export const RunScriptStep = forwardRef<HTMLDivElement, { parentHops: Hop[]; hop
 								Syntax Reference.
 							</a>
 						</small>
-					) : (
+					) : ['js', 'ecma'].includes(hop.extension) ? (
 						<small>
 							See the{' '}
 							<a href="https://www.oracle.com/technical-resources/articles/java/jf14-nashorn.html">
 								Nashorn Guide.
 							</a>
 						</small>
-					)}
+					) : undefined}
 				</p>
 				<p>The standard variables for expressions are available:</p>
 				<ul>
@@ -96,8 +98,9 @@ export const RunScriptStep = forwardRef<HTMLDivElement, { parentHops: Hop[]; hop
 					If this is set, all local variables your script creates will be available in subsequent hops.
 					<br />
 					<small>
-						Note: For JEXL scripts, that means variables not declared with `var` or `let` but implicitly created
-						by assignment without a previous declaration.
+						Note: For JEXL scripts, that means variables not declared with <code>var</code> or <code>let</code>{' '}
+						but implicitly created by assignment without a previous declaration. In JavaScript, <code>var</code>{' '}
+						creates such a variable while <code>const</code> and <code>let</code> do not.
 					</small>
 				</p>
 			</Help>

Diff for: src/main/frontend/widgets/CodeEditor.tsx

@@ -5,10 +5,12 @@ import { useDebounce } from '@uidotdev/usehooks';
 import { Editor } from '@monaco-editor/react';
 import type * as monaco from 'monaco-editor';
 
+export type EditorLanguage = 'json' | 'groovy' | 'jexl' | 'sql' | 'js';
+
 export const CodeEditor: React.FC<{
 	value: string;
 	onChange(val: string, hasErrors: boolean): void;
-	language: 'json' | 'groovy' | 'jexl' | 'sql' | 'js';
+	language: EditorLanguage;
 	lines?: number;
 }> = ({ value: outsideValue, onChange, language, lines = 13 }) => {
 	const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);

Diff for: src/main/java/com/swisscom/aem/tools/jcrhopper/impl/HopRunnerInfo.java

@@ -1,19 +1,42 @@
 package com.swisscom.aem.tools.jcrhopper.impl;
 
+import com.google.gson.Gson;
 import com.swisscom.aem.tools.jcrhopper.osgi.ConfigInfo;
+import java.util.Map;
+import java.util.stream.Collectors;
 import javax.inject.Inject;
+import javax.script.ScriptEngineFactory;
+import javax.script.ScriptEngineManager;
 import org.apache.sling.api.resource.Resource;
 import org.apache.sling.models.annotations.Model;
 import org.apache.sling.models.annotations.injectorspecific.OSGiService;
 
 @Model(adaptables = Resource.class)
 public class HopRunnerInfo {
 
+	@Inject
+	@OSGiService
+	private ScriptEngineManager scriptEngineManager;
+
 	@Inject
 	@OSGiService
 	private ConfigInfo info;
 
 	public String getEndpoint() {
 		return info.getRunnerServletPath();
 	}
+
+	/**
+	 * @return a map of script extensions to names that can be used with the runScript hop type
+	 */
+	public String getValidScriptingLanguages() {
+		final Map<String, String> extensions = scriptEngineManager
+			.getEngineFactories()
+			.stream()
+			.collect(Collectors.toMap(fac -> fac.getExtensions().get(0), ScriptEngineFactory::getLanguageName));
+
+		extensions.put("jexl", "JEXL"); // JEXL is always supported
+
+		return new Gson().toJson(extensions);
+	}
 }