Support imported languages

Author: AndreasArvidsson

.eslintrc.json

@@ -97,7 +97,6 @@
         "jest.config.ts",
         "docusaurus.config.mts",
         "mdx-components.tsx",
-        "prepare-assets.ts",
         "typings/**"
       ],
       "extends": ["plugin:@typescript-eslint/disable-type-checked"]

packages/cursorless-org-docs/package.json

@@ -42,7 +42,7 @@
     "write-heading-ids": "docusaurus write-heading-ids",
     "compile": "tsc --build",
     "watch": "tsc --build --watch",
-    "prepare-assets": "my-ts-node scripts/prepare-assets.ts",
+    "prepare-assets": "my-ts-node src/scripts/prepare-assets.ts",
     "clean": "pnpm clear && rm -rf ./out tsconfig.tsbuildinfo ./dist ./build"
   },
   "dependencies": {

packages/cursorless-org-docs/src/docs/user/languages/components/Code.tsx

@@ -85,8 +85,13 @@ function getDecorations(
 }
 
 // Use a fallback language for languages that are not supported by Shiki
+// https://shiki.style/languages
 function getFallbackLanguage(languageId: string): string {
   switch (languageId) {
+    case "javascriptreact":
+      return "jsx";
+    case "typescriptreact":
+      return "tsx";
     case "scm":
       return "scheme";
     default:

packages/cursorless-org-docs/src/docs/user/languages/components/ScopeVisualizer.tsx

@@ -1,39 +1,19 @@
 import { Range } from "@cursorless/common";
 import React, { useState } from "react";
-import scopeTestsExport from "../../../../../static/scopeTests.json";
+import scopeTestsJson from "../../../../../static/scopeTests.json";
 import { Code, type Highlight } from "./Code";
+import type { Fixture, ScopeTestsJson } from "./types";
 
 type RangeType = "content" | "removal";
 
-interface Fixture {
-  name: string;
-  facet: string;
-  languageId: string;
-  code: string;
-  scopes: Scope[];
-}
-
-interface Scope {
-  domain?: string;
-  targets: Target[];
-}
-
-interface Target {
-  content: string;
-  removal?: string;
-  insertionDelimiter?: string;
-}
-
-const scopeTests = scopeTestsExport as Fixture[];
+const scopeTests = scopeTestsJson as ScopeTestsJson;
 
 interface Props {
   languageId: string;
 }
 
 export function ScopeVisualizer({ languageId }: Props) {
-  const [fixtures] = useState(
-    scopeTests.filter((s) => s.languageId === languageId),
-  );
+  const [fixtures] = useState(getFixtures(languageId));
   const [rangeType, setRangeType] = useState<RangeType>("content");
   const [renderWhitespace, setRenderWhitespace] = useState(false);
 
@@ -56,22 +36,25 @@ export function ScopeVisualizer({ languageId }: Props) {
         Render whitespace
       </label>
 
-      {fixtures.map((f) => renderFixture(f, rangeType, renderWhitespace))}
+      {fixtures.map((f) =>
+        renderFixture(languageId, rangeType, renderWhitespace, f),
+      )}
     </div>
   );
 }
 
 function renderFixture(
-  fixture: Fixture,
+  languageId: string,
   rangeType: RangeType,
   renderWhitespace: boolean,
+  fixture: Fixture,
 ) {
   const highlights = getHighlights(fixture, rangeType);
   return (
     <div key={fixture.name}>
       {fixture.facet}
       <Code
-        languageId={fixture.languageId}
+        languageId={languageId}
         renderWhitespace={renderWhitespace}
         highlights={highlights}
       >
@@ -154,3 +137,10 @@ function getOverlap(a: Range, b: Range): Range | null {
     ? intersection
     : null;
 }
+
+function getFixtures(languageId: string): Fixture[] {
+  const languageIds = new Set<string>(
+    scopeTests.imports[languageId] ?? [languageId],
+  );
+  return scopeTests.fixtures.filter((f) => languageIds.has(f.languageId));
+}

packages/cursorless-org-docs/src/docs/user/languages/components/types.ts

@@ -0,0 +1,23 @@
+export interface ScopeTestsJson {
+  imports: Record<string, string[]>;
+  fixtures: Fixture[];
+}
+
+export interface Fixture {
+  name: string;
+  facet: string;
+  languageId: string;
+  code: string;
+  scopes: Scope[];
+}
+
+export interface Scope {
+  domain?: string;
+  targets: Target[];
+}
+
+export interface Target {
+  content: string;
+  removal?: string;
+  insertionDelimiter?: string;
+}

packages/cursorless-org-docs/scripts/prepare-assets.ts renamed to packages/cursorless-org-docs/src/scripts/prepare-assets.ts

@@ -1,40 +1,35 @@
 import {
+  getPackagePath,
+  getScopeTestLanguagesRecursively,
   getScopeTestPaths,
   type ScopeTestPath,
-  getPackagePath,
 } from "@cursorless/node-common";
 import * as fs from "node:fs";
 import * as path from "node:path";
-
-interface Fixture {
-  name: string;
-  facet: string;
-  languageId: string;
-  code: string;
-  scopes: Scope[];
-}
-
-interface Scope {
-  domain?: string;
-  targets: Target[];
-}
-
-interface Target {
-  content?: string;
-  removal?: string;
-  insertionDelimiter?: string;
-}
+import type {
+  Fixture,
+  Scope,
+  ScopeTestsJson,
+  Target,
+} from "../docs/user/languages/components/types";
 
 const fixtures: Fixture[] = [];
 
+const importedLanguages = getScopeTestLanguagesRecursively();
+
 for (const test of getScopeTestPaths()) {
   const fixture = parseTest(test);
   if (fixture != null) {
     fixtures.push(fixture);
   }
 }
 
-saveFixtures(fixtures);
+const result: ScopeTestsJson = {
+  imports: importedLanguages,
+  fixtures,
+};
+
+saveJson(result);
 
 function parseTest(test: ScopeTestPath) {
   const fixture = fs
@@ -54,7 +49,7 @@ function parseTest(test: ScopeTestPath) {
   const unprocessedTypes: string[] = [];
   let currentScopeIndex = "1";
   let currentTargetIndex = "1";
-  let currentTarget: Target = {};
+  let currentTarget: Target = { content: "" };
   let currentScope: Scope = { targets: [currentTarget] };
 
   function processLine(type: string, value: string) {
@@ -107,11 +102,11 @@ function parseTest(test: ScopeTestPath) {
       scopes.push(currentScope);
       currentScopeIndex = scopeIndex;
       currentTargetIndex = "1";
-      currentTarget = {};
+      currentTarget = { content: "" };
       currentScope = { targets: [currentTarget] };
     } else if (targetIndex != null && targetIndex !== currentTargetIndex) {
       currentTargetIndex = targetIndex;
-      currentTarget = {};
+      currentTarget = { content: "" };
       currentScope.targets.push(currentTarget);
     }
 
@@ -132,6 +127,13 @@ function parseTest(test: ScopeTestPath) {
 
   scopes.push(currentScope);
 
+  if (scopes.some((s) => s.targets.some((t) => !t.content))) {
+    throw Error(`Scope fixture ${test.path} contains targets without content.`);
+  }
+  if (scopes.some((s) => s.targets.length === 0)) {
+    throw Error(`Scope fixture ${test.path} contains empty scopes.`);
+  }
+
   const result: Fixture = {
     name: test.name,
     languageId: test.languageId,
@@ -173,12 +175,12 @@ function parseLine(line: string) {
   return { scopeIndex, targetIndex, type, value };
 }
 
-function saveFixtures(fixtures: Fixture[]) {
+function saveJson(result: ScopeTestsJson) {
   const assetPath = path.join(
     getPackagePath("cursorless-org-docs"),
     "static",
     "scopeTests.json",
   );
-  const content = JSON.stringify(fixtures, null, 2) + "\n";
+  const content = JSON.stringify(result, null, 2) + "\n";
   fs.writeFileSync(assetPath, content, "utf8");
 }