cursorless-dev · trillium · Mar 20, 2023 · Mar 25, 2024 · Mar 27, 2024 · Mar 27, 2024
@@ -17,3 +17,4 @@ export * from "./testUtil/plainObjectToTarget";
 export * from "./util/getPartialTargetDescriptors";
 export * from "./util/getPrimitiveTargets";
 export * from "./util/grammarHelpers";
+export * from "./scripts/transformRecordedTests/transformations/upgrade";
@@ -14,15 +14,19 @@
   },
   "dependencies": {
     "@cursorless/cheatsheet": "workspace:*",
+    "@cursorless/cursorless-engine": "workspace:*",
+    "@cursorless/test-case-component": "workspace:*",
     "@mdx-js/loader": "3.0.1",
     "@mdx-js/react": "3.0.1",
     "@next/mdx": "14.1.4",
+    "js-yaml": "^4.1.0",
     "next": "14.1.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-player": "2.15.1"
   },
   "devDependencies": {
+    "@types/js-yaml": "^4.0.9",
     "@svgr/webpack": "8.1.0",
     "@types/mdx": "2.0.12",
     "@types/mdx-js__react": "1.5.8",

@@ -0,0 +1,88 @@
+import * as yaml from "js-yaml";
+import fs from "fs";
+import path from "path";
+import Head from "next/head";
+
+import {
+  TestCaseComponentPage,
+  loadFixture,
+} from "@cursorless/test-case-component";
+// import { upgrade } from "@cursorless/cursorless-engine"
+
+import { cheatsheetBodyClasses } from "@cursorless/cheatsheet";
+
+const fixturesDir = path.join("../", "../", "data", "fixtures", "recorded");
+
+async function loadYamlFiles(dir: string, selectedFiles?: string[]) {
+  const directoryPath = path.join(process.cwd(), dir);
+  const files = fs.readdirSync(directoryPath);
+  const data: any[] = [];
+
+  files.forEach((file) => {
+    if (
+      path.extname(file) === ".yml" &&
+      (!selectedFiles || selectedFiles.includes(file))
+    ) {
+      const filePath = path.join(directoryPath, file);
+      const fileContents = fs.readFileSync(filePath, "utf8");
+      const yamlData: any = yaml.load(fileContents);
+      yamlData.filename = file;
+      data.push(yamlData);
+    }
+  });
+
+  return data;
+}
+
+// See https://github.com/vercel/next.js/discussions/12325#discussioncomment-1116108
+export async function getStaticProps() {
+  const itemsDirActions = path.join(fixturesDir, "actions");
+  const itemsDirDecorations = path.join(fixturesDir, "decorations");
+  const testSelectedFiles = [
+    "bringArgMadeAfterLook.yml",
+    "chuckBlockAirUntilBatt.yml",
+    "cutFine.yml",
+    "chuckLineFine.yml",
+    "bringAirAndBatAndCapToAfterItemEach.yml",
+    "carveLineHarp.yml",
+    "chuckBlockAir.yml",
+    "chuckBlockAirUntilBatt.yml",
+    "chuckBlockBatt.yml",
+    "chuckBlockBatt2.yml",
+    "chuckBlockBattUntilAir.yml",
+    "chuckFine.yml",
+    "chuckLineFineBetweenRisk.yml",
+    "clearBlockFine.yml",
+    "clearFine.yml",
+    "clearLineFine.ym",
+  ];
+  const dataActions = await loadYamlFiles(itemsDirActions, testSelectedFiles);
+  const dataDecorations = await loadYamlFiles(
+    itemsDirDecorations,
+    testSelectedFiles,
+  );
+
+  const data = (
+    await Promise.all(
+      [...dataActions, ...dataDecorations].map((val) => {
+        // const upgraded = upgrade(val)
+        return loadFixture(val);
+      }),
+    )
+  ).filter((val) => val !== undefined);
+
+  return { props: { data, bodyClasses: cheatsheetBodyClasses } };
+}
+
+export function App({ data }: { data: any; loaded: any }) {
+  return (
+    <>
+      <Head>
+        <title>Cursorless Test Case Component Page</title>
+      </Head>
+      <TestCaseComponentPage data={data} />
+    </>
+  );
+}
+
+export default App;
@@ -23,6 +23,12 @@
   "references": [
     {
       "path": "../cheatsheet"
+    },
+    {
+      "path": "../cursorless-engine"
+    },
+    {
+      "path": "../test-case-component"
     }
   ],
   "exclude": ["node_modules"]

@@ -1252,7 +1252,9 @@
     "clean": "rm -rf ./out tsconfig.tsbuildinfo ./dist ./build"
   },
   "devDependencies": {
-    "@types/fs-extra": "11.0.4",
+    "@types/chai": "^4.3.14",
+    "@types/fs-extra": "^11.0.4",
+    "@types/glob": "^8.1.0",
     "@types/js-yaml": "^4.0.9",
     "@types/lodash-es": "4.17.0",
     "@types/nearley": "2.11.5",

@@ -0,0 +1,8 @@
+import type { Config } from "jest";
+
+const config: Config = {
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+};
+
+export default config;
@@ -0,0 +1,49 @@
+{
+  "name": "@cursorless/test-case-component",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "Component for displaying results of test cases in cursorless-vscode-e2e",
+  "main": "./out/index.js",
+  "scripts": {
+    "build": "my-ts-node src/buildDictionary.ts",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "compile:tsc": "tsc --build",
+    "compile:esbuild": "esbuild ./src/index.ts --sourcemap --format=esm --bundle --packages=external --outfile=./out/index.js",
+    "compile": "pnpm compile:tsc && pnpm compile:esbuild",
+    "watch:tsc": "pnpm compile:tsc --watch",
+    "watch:esbuild": "pnpm compile:esbuild --watch",
+    "watch": "pnpm run --filter @cursorless/test-case-component --parallel '/^watch:.*/'",
+    "clean": "rm -rf ./out tsconfig.tsbuildinfo ./dist ./build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@cursorless/common": "workspace:*",
+    "@cursorless/node-common": "workspace:*",
+    "escape-goat": "4.0.0",
+    "fs-extra": "11.2.0",
+    "js-yaml": "^4.1.0",
+    "prettier": "3.2.5",
+    "react": "^18.2.0",
+    "tsx": "3.12.7",
+    "yaml": "2.2.1"
+  },
+  "types": "./out/index.d.ts",
+  "exports": {
+    ".": {
+      "cursorless:bundler": "./src/index.ts",
+      "default": "./out/index.js"
+    }
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/jest": "29.5.12",
+    "@types/react": "18.2.71",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "shiki": "^1.4.0",
+    "ts-jest": "29.1.2"
+  }
+}
@@ -0,0 +1,35 @@
+import * as React from "react";
+
+export const ShikiComponent: React.FC<{ data: any }> = ({ data }) => {
+  return (
+    <div className="max-w-xl overflow-auto p-4">
+      <div className="p-8">
+        <h2 className="dark:text-stone-100">{data.command}</h2>
+        <div className="m-2 border">
+          {data.before && (
+            <div
+              className="p-4"
+              dangerouslySetInnerHTML={{ __html: data.before }}
+            />
+          )}
+          {data.during && (
+            <>
+              <div
+                className="p-4"
+                dangerouslySetInnerHTML={{ __html: data.during || data.before }}
+              />
+            </>
+          )}
+          <div className="command">{data.command}</div>
+          {data.after && (
+            <div
+              className="p-4"
+              dangerouslySetInnerHTML={{ __html: data.after }}
+            />
+          )}
+        </div>
+      </div>
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  );
+};
@@ -0,0 +1,3 @@
+export function generateExamples(): string {
+  return "generate-examples";
+}