Add edit/run for kata examples - issue 591 (#1829)

Add the edit/run for kata examples. This PR closes #591 Monaco editor model should have a unique URI (with few exceptions). So, either kata lesson ID or kata exercise ID is provided to the model. The Editor.tsx implementation is replacing "kataExercise" parameter with "kataSection" that contains both lesson.id and exercise.id. The function parameter "key" is not in use and was removed.
microsoft · Aug 20, 2024 · df339be · df339be
1 parent e6af3bd
commit df339be
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 14 deletions.
diff --git a/playground/src/editor.tsx b/playground/src/editor.tsx
@@ -19,6 +19,8 @@ import { Exercise, getExerciseSources } from "qsharp-lang/katas-md";
 import { codeToCompressedBase64, lsRangeToMonacoRange } from "./utils.js";
 import { ActiveTab } from "./main.js";
 
+import type { KataSection } from "qsharp-lang/katas";
+
 type ErrCollection = {
   checkDiags: VSDiagnostic[];
   shotDiags: VSDiagnostic[];
@@ -80,7 +82,7 @@ export function Editor(props: {
   compilerState: CompilerState;
   defaultShots: number;
   evtTarget: QscEventTarget;
-  kataExercise?: Exercise;
+  kataSection?: KataSection;
   onRestartCompiler: () => void;
   shotError?: VSDiagnostic;
   showExpr: boolean;
@@ -197,9 +199,9 @@ export function Editor(props: {
     } as ProgramConfig;
 
     try {
-      if (props.kataExercise) {
+      if (props.kataSection?.type === "exercise") {
         // This is for a kata exercise. Provide the sources that implement the solution verification.
-        const sources = await getExerciseSources(props.kataExercise);
+        const sources = await getExerciseSources(props.kataSection as Exercise);
         // check uses the unrestricted profile and doesn't do code gen,
         // so we just pass the sources
         await props.compiler.checkExerciseSolution(
@@ -243,12 +245,12 @@ export function Editor(props: {
     editor.current = newEditor;
     const srcModel =
       monaco.editor.getModel(
-        monaco.Uri.parse(props.kataExercise?.id ?? "main.qs"),
+        monaco.Uri.parse(props.kataSection?.id ?? "main.qs"),
       ) ??
       monaco.editor.createModel(
         "",
         "qsharp",
-        monaco.Uri.parse(props.kataExercise?.id ?? "main.qs"),
+        monaco.Uri.parse(props.kataSection?.id ?? "main.qs"),
       );
     srcModel.setValue(props.code);
     newEditor.setModel(srcModel);
@@ -293,8 +295,8 @@ export function Editor(props: {
   useEffect(() => {
     props.languageService.updateConfiguration({
       targetProfile: profile,
-      packageType: props.kataExercise ? "lib" : "exe",
-      lints: props.kataExercise
+      packageType: props.kataSection ? "lib" : "exe",
+      lints: props.kataSection
         ? []
         : [{ lint: "needlessOperation", level: "warn" }],
     });
@@ -314,7 +316,7 @@ export function Editor(props: {
       log.info("Removing diagnostics listener");
       props.languageService.removeEventListener("diagnostics", onDiagnostics);
     };
-  }, [props.languageService, props.kataExercise]);
+  }, [props.languageService, props.kataSection]);
 
   useEffect(() => {
     const theEditor = editor.current;

diff --git a/playground/src/kata.tsx b/playground/src/kata.tsx
@@ -81,6 +81,9 @@ function LessonElem(props: Props & { section: KataSection }) {
   if (props.section.type !== "lesson") throw "Invalid section type";
   const lesson = props.section;
 
+  const [shotError, setShotError] = useState<VSDiagnostic>();
+  const [evtHandler] = useState(() => new QscEventTarget(true));
+
   return (
     <div>
       <div class="section-title">
@@ -94,9 +97,38 @@ function LessonElem(props: Props & { section: KataSection }) {
           switch (item.type) {
             case "example":
               return (
-                <pre>
-                  <code>{item.code}</code>
-                </pre>
+                <>
+                  <Editor
+                    code={item.code}
+                    compiler={props.compiler}
+                    compiler_worker_factory={props.compiler_worker_factory}
+                    compilerState={props.compilerState}
+                    onRestartCompiler={props.onRestartCompiler}
+                    kataSection={lesson}
+                    evtTarget={evtHandler}
+                    defaultShots={1}
+                    showShots={false}
+                    showExpr={false}
+                    shotError={shotError}
+                    profile={getProfile()}
+                    setAst={() => ({})}
+                    setHir={() => ({})}
+                    setQir={() => ({})}
+                    activeTab="results-tab"
+                    languageService={props.languageService}
+                  ></Editor>
+                  <OutputTabs
+                    evtTarget={evtHandler}
+                    showPanel={false}
+                    kataMode={true}
+                    onShotError={(diag?: VSDiagnostic) => setShotError(diag)}
+                    ast=""
+                    hir=""
+                    qir=""
+                    activeTab="results-tab"
+                    setActiveTab={() => undefined}
+                  ></OutputTabs>
+                </>
               );
             case "text-content":
               return <Markdown markdown={item.content}></Markdown>;
@@ -140,8 +172,7 @@ function ExerciseElem(props: Props & { section: KataSection }) {
           compiler_worker_factory={props.compiler_worker_factory}
           onRestartCompiler={props.onRestartCompiler}
           code={exercise.placeholderCode}
-          kataExercise={exercise}
-          key={exercise.id}
+          kataSection={exercise}
           profile={getProfile()}
           setAst={() => ({})}
           setHir={() => ({})}
@@ -150,7 +181,6 @@ function ExerciseElem(props: Props & { section: KataSection }) {
           languageService={props.languageService}
         ></Editor>
         <OutputTabs
-          key={exercise.id + "-results"}
           evtTarget={evtHandler}
           showPanel={false}
           kataMode={true}