Mixing JSDoc + Typescript

[edflips]

Hey 👋

I've been adding TS and Glint to a large, messy codebase which has some JSDoc annotations around the place, so I'm focussed on interop between the two. I've noticed that with "allowJs": true set in tsconfig.json that running Glint from the CLI throws an error. See the bottom for that error.

This is using:

    "@glint/core": "^1.5.2",
    "@glint/environment-ember-loose": "^1.5.2",
    "@glint/template": "^1.5.2",

Ember 3.28

From a little digging it looks like in /packages/core/src/transform/template/rewrite-module.ts in calculateTransformedSource the span starts in the wrong place. Changing it to this resolves it.

function calculateTransformedSource(originalFile, sparseSpans) {
    let correlatedSpans = [];
    let originalOffset = 0;
    let transformedOffset = 0;
    for (let span of sparseSpans) {
        let interstitial = originalFile.contents.slice(originalOffset, span.insertionPoint);
        if (interstitial.length) {
    correlatedSpans.push({
                originalFile,
                originalStart: originalOffset,
                originalLength: interstitial.length,
                insertionPoint: originalOffset,
                transformedStart: transformedOffset,
                transformedLength: interstitial.length,
                transformedSource: interstitial,
            });
        }
        correlatedSpans.push(span);
        transformedOffset += interstitial.length + span.transformedLength;
        originalOffset +=
            interstitial.length + (span.originalFile === originalFile ? span.originalLength : 0);
    }
    let trailingContent = originalFile.contents.slice(originalOffset);
+    const trailingStart = trailingContent.length === 0 ? transformedOffset - 1 : transformedOffset;
+    const trailingLength = trailingContent.length === 0 ? 1 : trailingContent.length;
    correlatedSpans.push({
        originalFile,
        originalStart: originalOffset,
-      originalLength: trailingContent.length + 1
+      originalLength: trailingLength,
        insertionPoint: originalOffset,
-      transformedStart: transformedOffset,
+     transformedStart: trailingStart,
-      transformedLength: trailingContent.length + 1,
+     transformedLength: trailingLength,
        transformedSource: trailingContent,
    });
    return {
        contents: correlatedSpans.map((span) => span.transformedSource).join(''),
        correlatedSpans,
    };
}

The original error

file:///Users/edflips/apps/oops/frontend/node_modules/@glint/core/lib/transform/util.js:6
        throw new Error(typeof message === 'string' ? message : message());
              ^

Error: Internal error: offset out of bounds
    at assert (file:///Users/edflips/apps/oops/frontend/node_modules/@glint/core/lib/transform/util.js:6:15)
    at TransformedModule.determineOriginalOffsetAndSpan (file:///Users/edflips/apps/oops/frontend/node_modules/@glint/core/lib/transform/template/transformed-module.js:98:9)
    at TransformedModule.getOriginalRange (file:///Users/edflips/apps/oops/frontend/node_modules/@glint/core/lib/transform/template/transformed-module.js:37:28)
    at rewriteDiagnostic (file:///Users/edflips/apps/oops/frontend/node_modules/@glint/core/lib/transform/diagnostics/rewrite-diagnostic.js:17:61)
    at TransformManager.rewriteDiagnostic (file:///Users/edflips/apps/oops/frontend/node_modules/@glint/core/lib/common/transform-manager.js:234:35)
    at TransformManager.rewriteDiagnostics (file:///Users/edflips/apps/oops/frontend/node_modules/@glint/core/lib/common/transform-manager.js:127:66)
    at performCheck (file:///Users/edflips/apps/oops/frontend/node_modules/@glint/core/lib/cli/perform-check.js:27:44)
    at file:///Users/edflips/apps/oops/frontend/node_modules/@glint/core/lib/cli/index.js:117:9
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:336:24)

Node.js v18.19.1

[NullVoxPopuli]

what are the file contents that its operating over? more often than not this can happen due to unicode issues in the original implementation of glint (these are fixed in the alphas, I believe)

[edflips]

Thanks @NullVoxPopuli I had a proper dive in and managed to figure out the cause. It doesn't appear to be a unicode issue as far as i can tell. Glint seems to just choke on export default Component.extend({}). I'm guessing that this syntax just isn't supported? I'm not sure where I read this, but I thought that the "classic" class pattern would just be ignored by Glint.

// tsconfig.json

{
  "extends": "@tsconfig/ember/tsconfig.json",
  "compilerOptions": {
    "target": "es2020",
    "baseUrl": ".",
    "allowJs": true,
    "checkJs": true
  },
  "glint": {
    "environment": "ember-loose"
  },
  "include": ["./app/components/test.js"]
}

// app/components/test.js

import Component from '@ember/component'

export default Component.extend({})

file:///Users/edflips/apps/oops/frontend/node_modules/@glint/core/lib/transform/util.js:6
        throw new Error(typeof message === 'string' ? message : message());
              ^

Error: Internal error: offset out of bounds
    at assert (file:///Users/edflips/apps/oops/frontend/node_modules/@glint/core/lib/transform/util.js:6:15)
    at TransformedModule.determineOriginalOffsetAndSpan (file:///Users/edflips/apps/oops/frontend/node_modules/@glint/core/lib/transform/template/transformed-module.js:98:9)
    at TransformedModule.getOriginalRange (file:///Users/edflips/apps/oops/frontend/node_modules/@glint/core/lib/transform/template/transformed-module.js:37:28)
    at rewriteDiagnostic (file:///Users/edflips/apps/oops/frontend/node_modules/@glint/core/lib/transform/diagnostics/rewrite-diagnostic.js:17:61)
    at TransformManager.rewriteDiagnostic (file:///Users/edflips/apps/oops/frontend/node_modules/@glint/core/lib/common/transform-manager.js:234:35)
    at TransformManager.rewriteDiagnostics (file:///Users/edflips/apps/oops/frontend/node_modules/@glint/core/lib/common/transform-manager.js:127:66)
    at performCheck (file:///Users/edflips/apps/oops/frontend/node_modules/@glint/core/lib/cli/perform-check.js:27:44)
    at file:///Users/edflips/apps/oops/frontend/node_modules/@glint/core/lib/cli/index.js:117:9
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:336:24)

Node.js v18.19.1