let editor extensions contribute experiments

microsoft · Oct 31, 2024 · be52bbc · be52bbc
1 parent e3e9ec7
commit be52bbc
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 14 deletions.
diff --git a/localtypings/pxteditor.d.ts b/localtypings/pxteditor.d.ts
@@ -1120,6 +1120,7 @@ declare namespace pxt.editor {
         blocklyToolbox: ToolboxDefinition;
         monacoToolbox: ToolboxDefinition;
         projectView: IProjectView;
+        showNotification: (msg) => void;
     }
 
     export interface IToolboxOptions {
@@ -1152,6 +1153,17 @@ declare namespace pxt.editor {
         // Used with @codeStart, @codeStop metadata (MINECRAFT HOC ONLY)
         onCodeStart?: () => void;
         onCodeStop?: () => void;
+
+        experiments?: Experiment[];
+    }
+
+    export interface Experiment {
+        id: string; // == field in apptheme also assumes image at /static/experiments/ID.png
+        name: string;
+        description: string;
+        feedbackUrl?: string; // allows user to put feedback
+        enableOnline?: boolean; // requires internet connection, disable in offline app
+        onClick?: () => void; // code to run when the experiment is clicked
     }
 
     export interface FieldExtensionOptions {

diff --git a/pxteditor/experiments.ts b/pxteditor/experiments.ts
@@ -1,16 +1,16 @@
-export interface Experiment {
-    id: string; // == field in apptheme also assumes image at /static/experiments/ID.png
-    name: string;
-    description: string;
-    feedbackUrl?: string; // allows user to put feedback
-    enableOnline?: boolean; // requires internet connection, disable in offline app
-}
+import Experiment = pxt.editor.Experiment;
 
 function key(experiment: Experiment | string): string {
     const id = (typeof experiment === "object") ? experiment.id : experiment;
     return `experiments-${id}`
 }
 
+let editorExtensionExperiments: Experiment[];
+
+export function setEditorExtensionExperiments(experiments: Experiment[]) {
+    editorExtensionExperiments = experiments;
+}
+
 export function syncTheme() {
     const theme: pxt.Map<boolean> = <pxt.Map<boolean>><any>pxt.savedAppTheme();
     const r: pxt.Map<string | number> = {};
@@ -31,7 +31,7 @@ export function syncTheme() {
 export function all(): Experiment[] {
     const ids = pxt.appTarget.appTheme.experiments;
     if (!ids) return [];
-    return [
+    const exps: Experiment[] = [
         {
             id: "print",
             name: lf("Print Code"),
@@ -182,7 +182,11 @@ export function all(): Experiment[] {
             name: lf("Time Machine"),
             description: lf("Save and restore past versions of a project")
         },
-    ].filter(experiment => ids.indexOf(experiment.id) > -1 && !(pxt.BrowserUtils.isPxtElectron() && experiment.enableOnline));
+    ];
+
+    return exps.filter(experiment => ids.indexOf(experiment.id) > -1)
+        .concat(editorExtensionExperiments || [])
+        .filter(experiment => !(pxt.BrowserUtils.isPxtElectron() && experiment.enableOnline));
 }
 
 export function clear() {
@@ -199,7 +203,12 @@ export function isEnabled(experiment: Experiment | string): boolean {
 }
 
 export function toggle(experiment: Experiment) {
-    setState(experiment, !isEnabled(experiment));
+    if (experiment.onClick) {
+        experiment.onClick();
+    }
+    else {
+        setState(experiment, !isEnabled(experiment));
+    }
 }
 
 export function state(): string {

diff --git a/webapp/src/app.tsx b/webapp/src/app.tsx
@@ -5858,7 +5858,8 @@ function initExtensionsAsync(): Promise<void> {
     const opts: pxt.editor.ExtensionOptions = {
         blocklyToolbox: blocklyToolbox.getToolboxDefinition(),
         monacoToolbox: monacoToolbox.getToolboxDefinition(),
-        projectView: theEditor
+        projectView: theEditor,
+        showNotification: (msg) => core.infoNotification(msg)
     };
     return pxt.BrowserUtils.loadScriptAsync("editor.js")
         .then(() => pxt.editor.initExtensionsAsync(opts))

diff --git a/webapp/src/cmds.ts b/webapp/src/cmds.ts
@@ -12,6 +12,7 @@ import * as pxtblockly from "../../pxtblocks";
 
 import ExtensionResult = pxt.editor.ExtensionResult;
 import NativeHostMessage = pxt.editor.NativeHostMessage;
+import { setEditorExtensionExperiments } from "../../pxteditor/experiments";
 
 
 function log(msg: string) {
@@ -397,6 +398,9 @@ function applyExtensionResult() {
         log(`extension onMarkdownActivityLoad`);
         pxt.commands.onMarkdownActivityLoad = res.onMarkdownActivityLoad;
     }
+    if (res.experiments) {
+        setEditorExtensionExperiments(res.experiments);
+    }
 }
 
 export async function initAsync() {

diff --git a/webapp/src/scriptsearch.tsx b/webapp/src/scriptsearch.tsx
@@ -204,7 +204,7 @@ export class ScriptSearch extends data.Component<ISettingsProps, ScriptSearchSta
 
     }
 
-    fetchExperiments(): experiments.Experiment[] {
+    fetchExperiments(): pxt.editor.Experiment[] {
         if (this.state.mode != ScriptSearchMode.Experiments) return [];
         return experiments.all();
     }
@@ -309,7 +309,7 @@ export class ScriptSearch extends data.Component<ISettingsProps, ScriptSearchSta
         }
     }
 
-    toggleExperiment(experiment: experiments.Experiment) {
+    toggleExperiment(experiment: pxt.editor.Experiment) {
         experiments.toggle(experiment);
         pxt.tickEvent(`experiments.toggle`, { "experiment": experiment.id, "enabled": experiments.isEnabled(experiment) ? 1 : 0 }, { interactiveConsent: true })
         this.forceUpdate();
@@ -505,7 +505,7 @@ export class ScriptSearch extends data.Component<ISettingsProps, ScriptSearchSta
                                     description={experiment.description}
                                     key={'exp' + experiment.id}
                                     role="button"
-                                    label={experiments.isEnabled(experiment) ? lf("Enabled") : lf("Disabled")}
+                                    label={experiment.onClick ? undefined : (experiments.isEnabled(experiment) ? lf("Enabled") : lf("Disabled"))}
                                     labelClass={experiments.isEnabled(experiment) ? "green right ribbon" : "grey right ribbon"}
                                     onCardClick={this.toggleExperiment}
                                     feedbackUrl={experiment.feedbackUrl}