@glint/ember-tsc 1.0.1-unstable.0a00188

package/src/environment-ember-template-imports/-private/environment/index.ts

@@ -0,0 +1,83 @@
+import { GlintEnvironmentConfig, GlintSpecialFormConfig } from '@glint/ember-tsc/config-types';
+import { preprocess } from './preprocess.js';
+import { transform } from './transform.js';
+
+export default function emberTemplateImportsEnvironment(
+  options: Record<string, unknown>,
+): GlintEnvironmentConfig {
+  let additionalSpecialForms =
+    typeof options['additionalSpecialForms'] === 'object'
+      ? (options['additionalSpecialForms'] as GlintSpecialFormConfig)
+      : {};
+
+  const additionalGlobalSpecialForms = additionalSpecialForms.globals ?? {};
+
+  const additionalGlobals = Array.isArray(options['additionalGlobals'])
+    ? options['additionalGlobals']
+    : [];
+
+  return {
+    tags: {
+      '@glint/ember-tsc/environment-ember-template-imports/-private/tag': {
+        hbs: {
+          typesModule: '@glint/ember-tsc/-private/dsl',
+          specialForms: {
+            globals: {
+              if: 'if',
+              unless: 'if-not',
+              yield: 'yield',
+              component: 'bind-invokable',
+              modifier: 'bind-invokable',
+              helper: 'bind-invokable',
+              ...additionalGlobalSpecialForms,
+            },
+            imports: {
+              '@ember/helper': {
+                array: 'array-literal',
+                hash: 'object-literal',
+                ...additionalSpecialForms.imports?.['@ember/helper'],
+              },
+              ...additionalSpecialForms.imports,
+            },
+          },
+          globals: [
+            'action',
+            'component',
+            'debugger',
+            'each',
+            'each-in',
+            'has-block',
+            'has-block-params',
+            'helper',
+            'if',
+            'in-element',
+            'let',
+            'log',
+            'modifier',
+            'mount',
+            'mut',
+            'outlet',
+            'unbound',
+            'unless',
+            'with',
+            'yield',
+            ...Object.keys(additionalGlobalSpecialForms),
+            ...additionalGlobals,
+          ],
+        },
+      },
+    },
+    extensions: {
+      '.gts': {
+        kind: 'typed-script',
+        preprocess,
+        transform,
+      },
+      '.gjs': {
+        kind: 'untyped-script',
+        preprocess,
+        transform,
+      },
+    },
+  };
+}

package/src/environment-ember-template-imports/-private/environment/preprocess.ts

@@ -0,0 +1,90 @@
+import { GlintExtensionPreprocess } from '@glint/ember-tsc/config-types';
+import { GLOBAL_TAG, PreprocessData, TemplateLocation } from './common.js';
+
+const TEMPLATE_START = `[${GLOBAL_TAG}\``;
+const TEMPLATE_END = '`]';
+
+import { Preprocessor } from 'content-tag';
+const p = new Preprocessor();
+
+export const preprocess: GlintExtensionPreprocess<PreprocessData> = (source, path) => {
+  // NOTE: https://github.com/embroider-build/content-tag/issues/45
+  //       All indicies are byte-index, not char-index.
+  let templates = p.parse(source, { filename: path });
+
+  let templateLocations: Array<TemplateLocation> = [];
+  let contents = '';
+  let sourceOffsetBytes = 0;
+  let deltaBytes = 0;
+
+  let sourceBuffer = getBuffer(source);
+
+  for (let template of templates) {
+    let startTagLengthBytes = template.startRange.end - template.startRange.start;
+    let endTagLengthBytes = template.endRange.end - template.endRange.start;
+    let startTagOffsetBytes = template.startRange.start;
+    let endTagOffsetBytes = template.endRange.start;
+    let transformedStartBytes = startTagOffsetBytes - deltaBytes;
+    /**
+     * TODO: we want content-tag to manage all this for us, as managing indicies
+     *       can be error-prone.
+     *
+     * SEE: https://github.com/embroider-build/content-tag/issues/39#issuecomment-1832443310
+     */
+    let prefixingSegment = sourceBuffer.subarray(sourceOffsetBytes, startTagOffsetBytes);
+    contents = contents.concat(prefixingSegment.toString());
+    contents = contents.concat(TEMPLATE_START);
+
+    // For TEMPLATE_START & TEMPLATE_END, characters === bytes
+    deltaBytes += startTagLengthBytes - TEMPLATE_START.length;
+
+    let transformedEnd = endTagOffsetBytes - deltaBytes + TEMPLATE_END.length;
+    let templateContentSegment = sourceBuffer.subarray(
+      startTagOffsetBytes + startTagLengthBytes,
+      endTagOffsetBytes,
+    );
+    let templateContentSegmentString = templateContentSegment.toString();
+    let escapedTemplateContentSegment = templateContentSegmentString
+      .replaceAll('$', '\\$')
+      .replaceAll('`', '\\`');
+    deltaBytes += templateContentSegmentString.length - escapedTemplateContentSegment.length;
+
+    contents = contents.concat(escapedTemplateContentSegment);
+    contents = contents.concat(TEMPLATE_END);
+    deltaBytes += endTagLengthBytes - TEMPLATE_END.length;
+
+    sourceOffsetBytes = endTagOffsetBytes + endTagLengthBytes;
+    templateLocations.push({
+      startTagOffset: byteToCharIndex(source, startTagOffsetBytes),
+      endTagOffset: byteToCharIndex(source, endTagOffsetBytes),
+      startTagLength: byteToCharIndex(source, startTagLengthBytes),
+      endTagLength: byteToCharIndex(source, endTagLengthBytes),
+      transformedStart: byteToCharIndex(contents, transformedStartBytes),
+      transformedEnd: byteToCharIndex(contents, transformedEnd),
+    });
+  }
+
+  contents = contents.concat(sourceBuffer.subarray(sourceOffsetBytes).toString());
+  return {
+    contents,
+    data: {
+      templateLocations,
+    },
+  };
+};
+
+function byteToCharIndex(str: string, byteOffset: number): number {
+  const buf = getBuffer(str);
+  return buf.subarray(0, byteOffset).toString().length;
+}
+
+const BufferMap = new Map();
+
+function getBuffer(str: string): Buffer {
+  let buf = BufferMap.get(str);
+  if (!buf) {
+    buf = Buffer.from(str);
+    BufferMap.set(str, buf);
+  }
+  return buf;
+}

package/src/environment-ember-template-imports/-private/environment/transform.ts

@@ -0,0 +1,202 @@
+import { GlintExtensionTransform } from '@glint/ember-tsc/config-types';
+import type ts from 'typescript';
+import { GLOBAL_TAG, PreprocessData, TemplateLocation } from './common.js';
+
+type TSLib = typeof ts;
+
+export const transform: GlintExtensionTransform<PreprocessData> = (
+  data,
+  { ts, context, setEmitMetadata },
+) => {
+  let f = ts.factory;
+  let { templateLocations } = data;
+  if (!templateLocations.length) return (sf) => sf;
+
+  return function visit(node: ts.Node): ts.Node {
+    let visitedNode = ts.visitEachChild(node, visit, context);
+    let transformedNode = transformNode(visitedNode);
+    return repairAncestry(transformedNode);
+  };
+
+  function transformNode(node: ts.Node): ts.Node {
+    if (ts.isSourceFile(node)) {
+      // Add `import { hbs as __T } from 'ember-template-imports'` to the file
+      return addTagImport(f, node);
+    } else if (isETIDefaultTemplate(ts, node)) {
+      // Annotate that this template is a default export
+      setEmitMetadata(node.expression, { prepend: 'export default ' });
+      return node;
+    } else if (isETIDefaultSatisfiesTemplate(ts, node)) {
+      // Annotate that this template is a default export
+      setEmitMetadata(node.expression.expression, { prepend: 'export default ' });
+      return node;
+    } else if (isETITemplateExpression(ts, node)) {
+      // Convert '[__T`foo`]' as an expression to just '__T`foo`'
+      let location = findTemplateLocation(templateLocations, node);
+
+      let template = node.elements[0];
+      setEmitMetadata(template, {
+        templateLocation: {
+          start: location.startTagOffset,
+          end: location.endTagOffset + location.endTagLength,
+          contentStart: location.startTagOffset + location.startTagLength,
+          contentEnd: location.endTagOffset,
+        },
+      });
+      return template;
+    } else if (isETITemplateProperty(ts, node)) {
+      // Convert '[__T`foo`]' in a class body to 'static { __T`foo` }'
+      let location = findTemplateLocation(templateLocations, node);
+      let template = node.name.expression;
+
+      setEmitMetadata(template, {
+        prepend: 'static { ',
+        append: ' }',
+        templateLocation: {
+          start: location.startTagOffset,
+          end: location.endTagOffset + location.endTagLength,
+          contentStart: location.startTagOffset + location.startTagLength,
+          contentEnd: location.endTagOffset,
+        },
+      });
+
+      return buildStaticBlockForTemplate(f, template);
+    }
+
+    return node;
+  }
+};
+
+// Many location operations in the TS AST rely on having an unbroken chain
+// of `.parent` values fron a given node up to its containing `SourceFile`,
+// but its transformation framework does not maintain these by default,
+// so we explicitly reconnect nodes as we go.
+function repairAncestry(node: ts.Node, parent: ts.Node = node.parent): ts.Node {
+  // If the node already has a parent AND it's correct, we don't need
+  // to descend further.
+  if (parent && node.parent === parent) return node;
+
+  Object.assign(node, { parent });
+
+  node.forEachChild((child) => {
+    repairAncestry(child, node);
+  });
+
+  return node;
+}
+
+function addTagImport(f: ts.NodeFactory, sourceFile: ts.SourceFile): ts.SourceFile {
+  return f.updateSourceFile(sourceFile, [
+    f.createImportDeclaration(
+      [],
+      f.createImportClause(
+        false,
+        undefined,
+        f.createNamedImports([
+          f.createImportSpecifier(false, f.createIdentifier('hbs'), f.createIdentifier(GLOBAL_TAG)),
+        ]),
+      ),
+      f.createStringLiteral('@glint/ember-tsc/environment-ember-template-imports/-private/tag'),
+    ),
+    ...sourceFile.statements,
+  ]);
+}
+
+type ETITemplateLiteral = ts.TaggedTemplateExpression & {
+  template: ts.NoSubstitutionTemplateLiteral;
+};
+
+type ETITemplateExpression = ts.ArrayLiteralExpression & {
+  elements: [ETITemplateLiteral];
+};
+
+type ETITemplateProperty = ts.PropertyDeclaration & {
+  name: ts.ComputedPropertyName & { expression: ETITemplateLiteral };
+};
+
+type ETIDefaultTemplate = ts.ExpressionStatement & {
+  expression: ETITemplateLiteral;
+};
+
+type ETIDefaultSatisfiesTemplate = ts.ExpressionStatement & {
+  expression: ts.SatisfiesExpression & { expression: ETITemplateLiteral };
+};
+
+/**
+ * Implicit default export:
+ *
+ *   ( <template></template> )
+ *   ^ ExpressionStatement
+ *
+ *   ( <template></template> satisfies ... )
+ *   ^ SatisfiesExpression
+ *
+ * But!
+ *
+ *   ( const X = <template></template> satisfies ... )
+ *   ^ VariableStatement
+ *
+ * So when we check for a wrapping SatisfiesExpression, we need to also make sure
+ * the parent node is not a variable Statement.
+ */
+function isETIDefaultTemplate(ts: TSLib, node: ts.Node): node is ETIDefaultTemplate {
+  return ts.isExpressionStatement(node) && isETITemplateLiteral(ts, node.expression);
+}
+
+function isETIDefaultSatisfiesTemplate(
+  ts: TSLib,
+  node: ts.Node,
+): node is ETIDefaultSatisfiesTemplate {
+  return (
+    ts.isExpressionStatement(node) &&
+    ts.isSatisfiesExpression(node.expression) &&
+    isETITemplateLiteral(ts, node.expression.expression)
+  );
+}
+
+function isETITemplateProperty(ts: TSLib, node: ts.Node): node is ETITemplateProperty {
+  return (
+    ts.isPropertyDeclaration(node) &&
+    ts.isComputedPropertyName(node.name) &&
+    isETITemplateLiteral(ts, node.name.expression)
+  );
+}
+
+function isETITemplateExpression(ts: TSLib, node: ts.Node): node is ETITemplateExpression {
+  return (
+    ts.isArrayLiteralExpression(node) &&
+    node.elements.length === 1 &&
+    isETITemplateLiteral(ts, node.elements[0])
+  );
+}
+
+function isETITemplateLiteral(ts: TSLib, node: ts.Node): node is ETITemplateLiteral {
+  return (
+    ts.isTaggedTemplateExpression(node) &&
+    ts.isNoSubstitutionTemplateLiteral(node.template) &&
+    ts.isIdentifier(node.tag) &&
+    node.tag.text === GLOBAL_TAG
+  );
+}
+
+function findTemplateLocation(
+  locations: Array<TemplateLocation>,
+  node: ETITemplateExpression | ETITemplateProperty,
+): TemplateLocation {
+  let location = locations.find((loc) => loc.transformedStart === node.getStart());
+
+  if (!location) {
+    throw new Error('Internal error: missing location info for template');
+  }
+
+  return location;
+}
+
+function buildStaticBlockForTemplate(
+  f: ts.NodeFactory,
+  template: ts.TaggedTemplateExpression,
+): ts.Node {
+  return f.createClassStaticBlockDeclaration(
+    f.createBlock([f.createExpressionStatement(template)]),
+  );
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+import { GlintConfig, loadConfig, findConfig } from './config/index.js';
+import { createEmberLanguagePlugin } from './volar/ember-language-plugin.js';
+
+import { VirtualGtsCode } from './volar/gts-virtual-code.js';
+import { augmentDiagnostics } from './transform/diagnostics/augmentation.js';
+
+export { loadConfig, findConfig, createEmberLanguagePlugin, VirtualGtsCode, augmentDiagnostics };
+
+export type { GlintConfig };

package/src/plugins/g-compiler-errors.ts

@@ -0,0 +1,67 @@
+import type { LanguageServicePlugin } from '@volar/language-service';
+import type * as vscode from 'vscode-languageserver-protocol';
+import { getEmbeddedInfo } from './utils.js';
+
+/**
+ * This LanguageServicePlugin surfaces compiler/syntax errors as diagnostics
+ * within .gts/.gjs files, e.g. if there is an unclosed html tag or `{{` curly brace,
+ * the entire `<template>` tag region will be highlighted as an error.
+ *
+ * @GLINT_FEATURE_DIAGNOSTICS
+ * @GLINT_FEATURE_DIAGNOSTICS_LANGUAGE_SERVER
+ * @GLINT_FEATURE_DIAGNOSTICS_LANGUAGE_SERVER_GTS_COMPILER_ERRORS
+ */
+export function create(): LanguageServicePlugin {
+  return {
+    name: 'g-compiler-errors',
+    capabilities: {
+      diagnosticProvider: {
+        interFileDependencies: false,
+        workspaceDiagnostics: false,
+      },
+    },
+    create(context) {
+      return {
+        provideDiagnostics(document) {
+          // `gts` is the ID of the root virtual code within the virtual/embedded code tree of our GtsVirtualCode.
+          // It is the untransformed .gts file; we use this file to generate diagnostics for
+          // `<template>` tag compiler errors because the diagnostic regions within the errors
+          // we get back from the compiler are already relative to the root/outer .gts file
+          // rather than relative to start of the template tag.
+          const info = getEmbeddedInfo(context, document, 'gts');
+
+          if (!info) {
+            return;
+          }
+
+          const virtualCode = info.root;
+
+          const transformedModule = virtualCode.transformedModule;
+          if (!transformedModule) {
+            return;
+          }
+
+          const parseErrors: vscode.Diagnostic[] = [];
+
+          for (const error of transformedModule.errors) {
+            const start = document.positionAt(error.location.start);
+            const end = document.positionAt(error.location.end);
+
+            parseErrors.push({
+              range: {
+                start: start,
+                end: end,
+              },
+              severity: 1 satisfies typeof vscode.DiagnosticSeverity.Error,
+              code: 9999,
+              source: 'glint',
+              message: error.message,
+            });
+          }
+
+          return parseErrors;
+        },
+      };
+    },
+  };
+}

package/src/plugins/g-template-tag-symbols.ts

@@ -0,0 +1,54 @@
+import type { LanguageServicePlugin } from '@volar/language-service';
+import type * as vscode from 'vscode-languageserver-protocol';
+import { getEmbeddedInfo } from './utils.js';
+
+/**
+ * Provides symbols for `<template>` tags within .gts/.gjs files.
+ * This among other things faciliates code folding of the `<template>` region.
+ *
+ * Note that this ONLY provides symbols for the `<template>` tag and none of the
+ * contents of the template tag. Symbols inside or outside the template tag are actually
+ * generated by the syntactic TS LanguageServicePlugin (search `createTypeScriptSyntacticPlugin`).
+ */
+export function create(): LanguageServicePlugin {
+  return {
+    name: 'g-template-symbols',
+    capabilities: {
+      documentSymbolProvider: true,
+    },
+    create(context) {
+      return {
+        provideDocumentSymbols(document) {
+          const virtualCode = getEmbeddedInfo(context, document, 'gts')?.root;
+
+          if (!virtualCode) {
+            return;
+          }
+
+          const result: vscode.DocumentSymbol[] = [];
+          const { transformedModule } = virtualCode;
+
+          if (transformedModule) {
+            const templateSymbols = transformedModule.templateSymbols();
+            for (const templateSymbol of templateSymbols) {
+              result.push({
+                name: 'template',
+                kind: 2 satisfies typeof vscode.SymbolKind.Module,
+                range: {
+                  start: document.positionAt(templateSymbol.start),
+                  end: document.positionAt(templateSymbol.end),
+                },
+                selectionRange: {
+                  start: document.positionAt(templateSymbol.start),
+                  end: document.positionAt(templateSymbol.startTagEnd),
+                },
+              });
+            }
+          }
+
+          return result;
+        },
+      };
+    },
+  };
+}

package/src/plugins/utils.ts

@@ -0,0 +1,86 @@
+// based on https://github.com/vuejs/language-tools/blob/master/packages/language-service/lib/utils.ts
+
+import {
+  type LanguageServiceContext,
+  type SourceScript,
+  type TextDocument,
+  type VirtualCode,
+} from '@volar/language-service';
+import { URI } from 'vscode-uri';
+import { VirtualGtsCode } from '../volar/gts-virtual-code.js';
+
+type EmbeddedInfo = {
+  sourceScript: Required<SourceScript<URI>>;
+  virtualCode: VirtualCode;
+  root: VirtualGtsCode;
+};
+
+/**
+ * Helper function that accepts a document URI and, if it matches the format
+ * of Volar's special URI format for representing embedded codes within a virtual code,
+ * will look up and return the embedded code and its root VirtualGtsCode.
+ *
+ * A example Volar embedded document URI would be something like:
+ *
+ *    volar-embedded-content://gts/file%253A%252F%252F%252FUsers%252Fmachty%252Fcode%252Fglint%252Ftest-packages%252Fts-template-imports-app%252Fsrc%252Fempty-fixture.gts
+ *
+ * Note that the hostname/authority part of the URI is the embedded code ID, e.g. `gts`. These correspond
+ * to the IDs we assign to parsed embedded virtual codes contained within the root virtual code,
+ * e.g. `ts` corresponds to the TypeScript representation of .gts files where all `<template>` tags
+ * have been converted to type-checkable TS.
+ */
+export function getEmbeddedInfo(
+  context: LanguageServiceContext,
+  document: TextDocument,
+  desiredEmbeddedCodeId?: string | ((id: string) => boolean),
+  desiredDocumentLanguageId?: string | ((id: string) => boolean),
+): EmbeddedInfo | undefined {
+  const uri = URI.parse(document.uri);
+  const decoded = context.decodeEmbeddedDocumentUri(uri);
+  if (!decoded) {
+    return;
+  }
+
+  const [documentUri, embeddedCodeId] = decoded;
+
+  if (desiredEmbeddedCodeId) {
+    if (typeof desiredEmbeddedCodeId === 'string') {
+      if (embeddedCodeId !== desiredEmbeddedCodeId) {
+        return;
+      }
+    } else if (!desiredEmbeddedCodeId(embeddedCodeId)) {
+      return;
+    }
+  }
+
+  if (desiredDocumentLanguageId) {
+    if (typeof desiredDocumentLanguageId === 'string') {
+      if (document.languageId !== desiredDocumentLanguageId) {
+        return;
+      }
+    } else if (!desiredDocumentLanguageId(document.languageId)) {
+      return;
+    }
+  }
+
+  const sourceScript = context.language.scripts.get(documentUri);
+  if (!sourceScript?.generated) {
+    return;
+  }
+
+  const virtualCode = sourceScript.generated.embeddedCodes.get(embeddedCodeId);
+  if (!virtualCode) {
+    return;
+  }
+
+  const root = sourceScript.generated.root;
+  if (!(root instanceof VirtualGtsCode)) {
+    return;
+  }
+
+  return {
+    sourceScript: sourceScript as Required<SourceScript<URI>>,
+    virtualCode,
+    root,
+  };
+}