Add simple usage stats to cheatsheet

.vscode/launch.json

@@ -16,7 +16,9 @@
         "--extensionDevelopmentPath=${workspaceFolder}/packages/cursorless-vscode/dist",
         "--profile=cursorlessDevelopment"
       ],
-      "outFiles": ["${workspaceFolder}/**/out/**/*.js"],
+      "outFiles": [
+        "${workspaceFolder}/**/out/**/*.js"
+      ],
       "preLaunchTask": "Build extension only",
       "resolveSourceMapLocations": [
         "${workspaceFolder}/**",
@@ -36,7 +38,9 @@
         "--extensionDevelopmentPath=${workspaceFolder}/packages/cursorless-vscode/dist",
         "--extensionTestsPath=${workspaceFolder}/packages/test-harness/dist/extensionTests.cjs"
       ],
-      "outFiles": ["${workspaceFolder}/**/out/**/*.js"],
+      "outFiles": [
+        "${workspaceFolder}/**/out/**/*.js"
+      ],
       "preLaunchTask": "${defaultBuildTask}",
       "resolveSourceMapLocations": [
         "${workspaceFolder}/**",
@@ -57,7 +61,9 @@
         "--extensionDevelopmentPath=${workspaceFolder}/packages/cursorless-vscode/dist",
         "--extensionTestsPath=${workspaceFolder}/packages/test-harness/dist/extensionTests.cjs"
       ],
-      "outFiles": ["${workspaceFolder}/**/out/**/*.js"],
+      "outFiles": [
+        "${workspaceFolder}/**/out/**/*.js"
+      ],
       "preLaunchTask": "Prepare test subset",
       "resolveSourceMapLocations": [
         "${workspaceFolder}/**",
@@ -73,7 +79,9 @@
         "CURSORLESS_TEST": "true",
         "CURSORLESS_REPO_ROOT": "${workspaceFolder}"
       },
-      "outFiles": ["${workspaceFolder}/**/out/**/*.js"],
+      "outFiles": [
+        "${workspaceFolder}/**/out/**/*.js"
+      ],
       "preLaunchTask": "${defaultBuildTask}",
       "resolveSourceMapLocations": [
         "${workspaceFolder}/**",
@@ -90,7 +98,9 @@
         "CURSORLESS_RUN_TEST_SUBSET": "true",
         "CURSORLESS_REPO_ROOT": "${workspaceFolder}"
       },
-      "outFiles": ["${workspaceFolder}/**/out/**/*.js"],
+      "outFiles": [
+        "${workspaceFolder}/**/out/**/*.js"
+      ],
       "preLaunchTask": "${defaultBuildTask}",
       "resolveSourceMapLocations": [
         "${workspaceFolder}/**",
@@ -106,7 +116,9 @@
         "CURSORLESS_TEST": "true",
         "CURSORLESS_REPO_ROOT": "${workspaceFolder}"
       },
-      "outFiles": ["${workspaceFolder}/**/out/**/*.js"],
+      "outFiles": [
+        "${workspaceFolder}/**/out/**/*.js"
+      ],
       "preLaunchTask": "${defaultBuildTask}",
       "resolveSourceMapLocations": [
         "${workspaceFolder}/**",
@@ -127,7 +139,9 @@
         "--extensionDevelopmentPath=${workspaceFolder}/packages/cursorless-vscode/dist",
         "--extensionTestsPath=${workspaceFolder}/packages/test-harness/dist/extensionTests.cjs"
       ],
-      "outFiles": ["${workspaceFolder}/**/out/**/*.js"],
+      "outFiles": [
+        "${workspaceFolder}/**/out/**/*.js"
+      ],
       "preLaunchTask": "${defaultBuildTask}",
       "resolveSourceMapLocations": [
         "${workspaceFolder}/**",
@@ -149,7 +163,9 @@
         "--extensionDevelopmentPath=${workspaceFolder}/packages/cursorless-vscode/dist",
         "--extensionTestsPath=${workspaceFolder}/packages/test-harness/dist/extensionTests.cjs"
       ],
-      "outFiles": ["${workspaceFolder}/**/out/**/*.js"],
+      "outFiles": [
+        "${workspaceFolder}/**/out/**/*.js"
+      ],
       "preLaunchTask": "${defaultBuildTask}",
       "resolveSourceMapLocations": [
         "${workspaceFolder}/**",
@@ -166,7 +182,9 @@
         "CURSORLESS_TEST_UPDATE_FIXTURES": "true",
         "CURSORLESS_REPO_ROOT": "${workspaceFolder}"
       },
-      "outFiles": ["${workspaceFolder}/**/out/**/*.js"],
+      "outFiles": [
+        "${workspaceFolder}/**/out/**/*.js"
+      ],
       "preLaunchTask": "${defaultBuildTask}",
       "resolveSourceMapLocations": [
         "${workspaceFolder}/**",
@@ -182,7 +200,9 @@
       },
       "cwd": "${workspaceFolder}/packages/cursorless-org-docs",
       "runtimeExecutable": "pnpm",
-      "runtimeArgs": ["start"],
+      "runtimeArgs": [
+        "start"
+      ],
       "resolveSourceMapLocations": [
         "${workspaceFolder}/**",
         "!**/node_modules/**"
@@ -197,12 +217,24 @@
       },
       "cwd": "${workspaceFolder}/packages/cursorless-org-docs",
       "runtimeExecutable": "pnpm",
-      "runtimeArgs": ["build"],
+      "runtimeArgs": [
+        "build"
+      ],
       "resolveSourceMapLocations": [
         "${workspaceFolder}/**",
         "!**/node_modules/**"
       ]
     },
+    {
+      "name": "Cheatsheet",
+      "type": "chrome",
+      "request": "launch",
+      "url": "file://${workspaceFolder}/packages/cheatsheet-local/dist/index.html",
+      "env": {
+        "CURSORLESS_REPO_ROOT": "${workspaceFolder}"
+      },
+      "preLaunchTask": "Build cheatsheet with local data",
+    },
     {
       "name": "cursorless.org client-side",
       "type": "chrome",
@@ -211,4 +243,4 @@
       "webRoot": "${workspaceFolder}/packages/cursorless-org"
     }
   ]
-}
+}

.vscode/tasks.json

@@ -18,15 +18,20 @@
     },
     {
       "label": "Build extension only",
-      "dependsOn": ["Populate dist", "ESBuild"],
+      "dependsOn": [
+        "Populate dist",
+        "ESBuild"
+      ],
       "group": "build"
     },
     {
       "label": "ESBuild",
       "type": "npm",
       "script": "esbuild",
       "path": "packages/cursorless-vscode",
-      "dependsOn": ["Generate grammar"],
+      "dependsOn": [
+        "Generate grammar"
+      ],
       "presentation": {
         "reveal": "silent"
       },
@@ -95,13 +100,19 @@
     },
     {
       "label": "Prepare test subset",
-      "dependsOn": ["Ensure test subset file exists", "Build"],
+      "dependsOn": [
+        "Ensure test subset file exists",
+        "Build"
+      ],
       "dependsOrder": "sequence",
       "group": "test"
     },
     {
       "label": "watch",
-      "dependsOn": ["Watch esbuild", "Watch typescript"],
+      "dependsOn": [
+        "Watch esbuild",
+        "Watch typescript"
+      ],
       "group": "build"
     },
     {
@@ -148,6 +159,17 @@
       "type": "shell",
       "command": "pre-commit run",
       "presentation": {}
+    },
+    {
+      "label": "Build cheatsheet with local data",
+      "options": {
+        "cwd": "packages/cheatsheet-local",
+        "env": {
+          "CURSORLESS_REPO_ROOT": "${workspaceFolder}"
+        }
+      },
+      "type": "shell",
+      "command": "pnpm build:dev",
     }
   ]
-}
+}

cursorless-talon/src/cheatsheet/cheat_sheet.py

@@ -42,6 +42,7 @@ def private_cursorless_open_instructions():
 
 @ctx.action_class("user")
 class CursorlessActions:
+    # NOCOMMIT hmm, so I am now confused, is talon opening the cheatsheet.html or is cursorless vscode extension?
     def private_cursorless_cheat_sheet_show_html():
         """Show cursorless html cheat sheet"""
         # On Linux browsers installed using snap can't open files in a hidden directory
@@ -54,6 +55,8 @@ def private_cursorless_cheat_sheet_show_html():
 
         cheatsheet_out_dir.mkdir(parents=True, exist_ok=True)
         cheatsheet_out_path = cheatsheet_out_dir / cheatsheet_filename
+
+        # Despite the showCheatsheet name, will only update the cheatsheet.html file,
         actions.user.private_cursorless_run_rpc_command_and_wait(
             "cursorless.showCheatsheet",
             {
@@ -62,6 +65,8 @@ def private_cursorless_cheat_sheet_show_html():
                 "outputPath": str(cheatsheet_out_path),
             },
         )
+
+        # Show cheatsheet.html
         webbrowser.open(cheatsheet_out_path.as_uri())
 
     def private_cursorless_cheat_sheet_update_json():

packages/cheatsheet-local/package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@cursorless/cheatsheet": "workspace:*",
+    "@cursorless/common": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -59,4 +60,4 @@
     }
   },
   "type": "module"
-}
+}

packages/cheatsheet-local/src/app/app.tsx

@@ -1,4 +1,5 @@
-import { CheatsheetPage, CheatsheetInfo } from "@cursorless/cheatsheet";
+import { CheatsheetInfo, FeatureUsageStats } from "@cursorless/common";
+import { CheatsheetPage } from "@cursorless/cheatsheet";
 import "../styles.css";
 
 declare global {
@@ -11,11 +12,22 @@ declare global {
      * {@link document}.
      */
     cheatsheetInfo: CheatsheetInfo;
+
+    /**
+     * The data describing the cheatsheet feature usage stats.
+     * Injected in the same way as {@link cheatsheetInfo}.
+     */
+    cheatsheetFeatureUsageStats: FeatureUsageStats;
   }
 }
 
 export function App() {
-  return <CheatsheetPage cheatsheetInfo={document.cheatsheetInfo} />;
+  return (
+    <CheatsheetPage
+      cheatsheetInfo={document.cheatsheetInfo}
+      cheatsheetFeatureUsageStats={document.cheatsheetFeatureUsageStats}
+    />
+  );
 }
 
 export default App;

packages/cheatsheet-local/src/index.html

@@ -8,7 +8,8 @@
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <script id="cheatsheet-data">
       // Dummy data for use in debugging
-      document.cheatsheetInfo = <%= fakeCheatsheetInfo %>;
+      document.cheatsheetInfo = <%= cheatsheetInfo %>;
+      document.cheatsheetFeatureUsageStats = <%= cheatsheetUsageStats %>;
     </script>
   </head>
   <body class="<%= bodyClasses %>">

packages/cheatsheet-local/src/webpack.config.ts

@@ -4,6 +4,9 @@
 import {
   cheatsheetBodyClasses,
   fakeCheatsheetInfo,
+  fakeFeatureUsageStats,
+  defaultCheatsheetInfo,
+  defaultFeatureUsageStats,
 } from "@cursorless/cheatsheet";
 import HtmlWebpackInlineSourcePlugin from "@effortlessmotion/html-webpack-inline-source-plugin";
 import HtmlWebpackPlugin from "html-webpack-plugin";
@@ -23,7 +26,8 @@ const config: Configuration = {
       template: "src/index.html",
       templateParameters: {
         bodyClasses: cheatsheetBodyClasses,
-        fakeCheatsheetInfo: JSON.stringify(fakeCheatsheetInfo),
+        cheatsheetInfo: isProduction ? JSON.stringify(fakeCheatsheetInfo) : JSON.stringify(defaultCheatsheetInfo, null, 2),
+        cheatsheetUsageStats: isProduction ? JSON.stringify(fakeFeatureUsageStats) : JSON.stringify(defaultFeatureUsageStats, null, 2)
       },
       inlineSource: ".(js|css)$", // embed all javascript and css inline
     }),

packages/cheatsheet-local/tsconfig.json

@@ -4,7 +4,11 @@
     "rootDir": "src",
     "outDir": "out",
     "jsx": "react-jsx",
-    "lib": ["es5", "es6", "dom"],
+    "lib": [
+      "es5",
+      "es6",
+      "dom"
+    ],
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -17,6 +21,9 @@
   "references": [
     {
       "path": "../cheatsheet"
+    },
+    {
+      "path": "../common"
     }
   ],
   "include": [
@@ -25,4 +32,4 @@
     "src/**/*.tsx",
     "../../typings/**/*.d.ts"
   ]
-}
+}

packages/cheatsheet/package.json

@@ -27,6 +27,7 @@
     "*.css"
   ],
   "dependencies": {
+    "@cursorless/common": "workspace:*",
     "@fortawesome/fontawesome-svg-core": "6.3.0",
     "@fortawesome/free-solid-svg-icons": "6.3.0",
     "@fortawesome/react-fontawesome": "0.2.0",
@@ -47,4 +48,4 @@
     "typescript": "^5.2.2"
   },
   "type": "module"
-}
+}

packages/cheatsheet/src/index.ts

@@ -1,6 +1,6 @@
 export * from "./lib/cheatsheet";
-export * from "./lib/CheatsheetInfo";
 export * from "./lib/cheatsheetBodyClasses";
 export * from "./lib/fakeCheatsheetInfo";
-import defaultCheatsheetInfo from "./lib/sampleSpokenFormInfos/defaults.json";
-export { defaultCheatsheetInfo };
+import defaultCheatsheetInfo from "./lib/sampleData/spokenFormInfos.json";
+import defaultFeatureUsageStats from "./lib/sampleData/featureUsageStats.json";
+export { defaultCheatsheetInfo, defaultFeatureUsageStats };