always use esm to load marked packages

packages/ai-bot/tsconfig.json

@@ -9,6 +9,7 @@
     "module": "nodenext",
     "moduleResolution": "nodenext",
     "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true,
     "noImplicitAny": true,
     "noImplicitThis": true,
     "alwaysStrict": true,

packages/base/default-templates/markdown.gts

@@ -9,14 +9,16 @@ import { eq } from '@cardstack/boxel-ui/helpers';
 
 import {
   extractMermaidBlocks,
-  hasCodeBlocks,
-  markdownToHtml,
-  preloadMarkdownLanguages,
   processKatexPlaceholders,
   replaceMermaidSvgs,
   resolveCardReference,
   trimJsonExtension,
 } from '@cardstack/runtime-common';
+import {
+  hasCodeBlocks,
+  markdownToHtml,
+  preloadMarkdownLanguages,
+} from '@cardstack/runtime-common/marked-sync';
 import { type BaseDef, type CardDef, getComponent } from '../card-api';
 import { CardContextConsumer } from '../field-component';
 function wrapTablesHtml(html: string | null | undefined): string {

packages/billing/tsconfig.json

@@ -9,6 +9,7 @@
     "module": "nodenext",
     "moduleResolution": "nodenext",
     "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true,
     "noImplicitAny": true,
     "noImplicitThis": true,
     "alwaysStrict": true,

packages/bot-runner/tsconfig.json

@@ -9,6 +9,7 @@
     "module": "nodenext",
     "moduleResolution": "nodenext",
     "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true,
     "noImplicitAny": true,
     "noImplicitThis": true,
     "alwaysStrict": true,

packages/catalog-realm/blog-app/blog-post.gts

@@ -21,13 +21,16 @@ import { Author } from './author';
 import { formatDatetime, BlogApp as BlogAppCard } from './blog-app';
 import { BlogCategory, categoryStyle } from './blog-category';
 import { User } from './user';
-import { markdownToHtml } from '@cardstack/runtime-common';
+import { markdownToHtml } from '@cardstack/runtime-common/marked-sync';
 import FeaturedImageField from '../fields/featured-image';
 
 class EmbeddedTemplate extends Component<typeof BlogPost> {
   <template>
     <article class='embedded-blog-post'>
-      <div class='thumbnail' style={{setBackgroundImage @model.cardThumbnailURL}} />
+      <div
+        class='thumbnail'
+        style={{setBackgroundImage @model.cardThumbnailURL}}
+      />
       {{#if @model.categories.length}}
         <div class='categories'>
           {{#each @model.categories as |category|}}
@@ -129,7 +132,10 @@ class EmbeddedTemplate extends Component<typeof BlogPost> {
 class FittedTemplate extends Component<typeof BlogPost> {
   <template>
     <article class='fitted-blog-post'>
-      <div class='thumbnail' style={{setBackgroundImage @model.cardThumbnailURL}} />
+      <div
+        class='thumbnail'
+        style={{setBackgroundImage @model.cardThumbnailURL}}
+      />
       <div class='categories'>
         {{#each @model.categories as |category|}}
           <div class='category' style={{categoryStyle category}}>

packages/experiments-realm/blog-post.gts

@@ -22,12 +22,15 @@ import { Author } from './author';
 import { formatDatetime, BlogApp as BlogAppCard } from './blog-app';
 import { BlogCategory, categoryStyle } from './blog-category';
 import { User } from './user';
-import { markdownToHtml } from '@cardstack/runtime-common';
+import { markdownToHtml } from '@cardstack/runtime-common/marked-sync';
 
 class EmbeddedTemplate extends Component<typeof BlogPost> {
   <template>
     <article class='embedded-blog-post'>
-      <div class='thumbnail' style={{setBackgroundImage @model.cardThumbnailURL}} />
+      <div
+        class='thumbnail'
+        style={{setBackgroundImage @model.cardThumbnailURL}}
+      />
       {{#if @model.categories.length}}
         <div class='categories'>
           {{#each @model.categories as |category|}}
@@ -129,7 +132,10 @@ class EmbeddedTemplate extends Component<typeof BlogPost> {
 class FittedTemplate extends Component<typeof BlogPost> {
   <template>
     <article class='fitted-blog-post'>
-      <div class='thumbnail' style={{setBackgroundImage @model.cardThumbnailURL}} />
+      <div
+        class='thumbnail'
+        style={{setBackgroundImage @model.cardThumbnailURL}}
+      />
       <div class='categories'>
         {{#each @model.categories as |category|}}
           <div class='category' style={{categoryStyle category}}>

packages/host/app/components/ai-assistant/message/aibot-message.gts

@@ -9,7 +9,7 @@ import { cached, tracked } from '@glimmer/tracking';
 import { Alert } from '@cardstack/boxel-ui/components';
 import { and, bool, eq } from '@cardstack/boxel-ui/helpers';
 
-import { markdownToHtml } from '@cardstack/runtime-common';
+import { markdownToHtml } from '@cardstack/runtime-common/marked-sync';
 
 import CodeBlock from '@cardstack/host/components/ai-assistant/code-block';
 

packages/host/app/components/ai-assistant/toast.gts

@@ -14,7 +14,7 @@ import { TrackedObject } from 'tracked-built-ins';
 import { BoxelButton, IconButton } from '@cardstack/boxel-ui/components';
 import { IconX } from '@cardstack/boxel-ui/icons';
 
-import { markdownToHtml } from '@cardstack/runtime-common';
+import { markdownToHtml } from '@cardstack/runtime-common/marked-sync';
 
 import type { Message } from '@cardstack/host/lib/matrix-classes/message';
 import type LocalPersistenceService from '@cardstack/host/services/local-persistence-service';

packages/host/app/lib/externals.ts

@@ -176,6 +176,10 @@ export function shimExternals(virtualNetwork: VirtualNetwork) {
     id: 'uuid',
     resolve: () => import('uuid'),
   });
+  virtualNetwork.shimAsyncModule({
+    id: '@cardstack/runtime-common/marked-sync',
+    resolve: () => import('@cardstack/runtime-common/marked-sync.ts'),
+  });
 
   shimModulesForLiveTests(virtualNetwork);
 

packages/host/app/lib/matrix-classes/message.ts

@@ -3,8 +3,8 @@ import { cached, tracked } from '@glimmer/tracking';
 
 import { TrackedArray } from 'tracked-built-ins';
 
-import { markdownToHtml } from '@cardstack/runtime-common';
 import { escapeHtmlOutsideCodeBlocks } from '@cardstack/runtime-common/helpers/html';
+import { markdownToHtml } from '@cardstack/runtime-common/marked-sync';
 
 import {
   parseHtmlContent,

packages/host/tests/integration/realm-indexing-test.gts

@@ -4535,6 +4535,7 @@ module(`Integration | realm indexing`, function (hooks) {
         'https://packages/@cardstack/boxel-ui/icons',
         'https://packages/@cardstack/boxel-ui/modifiers',
         'https://packages/@cardstack/runtime-common',
+        'https://packages/@cardstack/runtime-common/marked-sync',
         'https://packages/@ember/component',
         'https://packages/@ember/component/template-only',
         'https://packages/@ember/helper',
@@ -4672,6 +4673,7 @@ module(`Integration | realm indexing`, function (hooks) {
         'https://packages/@cardstack/boxel-ui/icons',
         'https://packages/@cardstack/boxel-ui/modifiers',
         'https://packages/@cardstack/runtime-common',
+        'https://packages/@cardstack/runtime-common/marked-sync',
         'https://packages/@ember/component',
         'https://packages/@ember/component/template-only',
         'https://packages/@ember/helper',

packages/host/tsconfig.json

@@ -5,6 +5,7 @@
     "module": "nodenext",
     "moduleResolution": "nodenext",
     "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true,
     "noImplicitAny": true,
     "noImplicitThis": true,
     "alwaysStrict": true,
@@ -24,31 +25,15 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "paths": {
-      "@cardstack/host/tests/*": [
-        "tests/*"
-      ],
-      "@cardstack/host/*": [
-        "app/*"
-      ],
-      "@cardstack/boxel-host/commands/*": [
-        "app/commands/*"
-      ],
-      "https://cardstack.com/base/*": [
-        "../base/*"
-      ],
-      "@cardstack/catalog/*": [
-        "../catalog-realm/*"
-      ],
-      "@cardstack/openrouter/*": [
-        "../openrouter-realm/*"
-      ],
-      "*": [
-        "types/*"
-      ]
+      "@cardstack/host/tests/*": ["tests/*"],
+      "@cardstack/host/*": ["app/*"],
+      "@cardstack/boxel-host/commands/*": ["app/commands/*"],
+      "https://cardstack.com/base/*": ["../base/*"],
+      "@cardstack/catalog/*": ["../catalog-realm/*"],
+      "@cardstack/openrouter/*": ["../openrouter-realm/*"],
+      "*": ["types/*"]
     },
-    "types": [
-      "@cardstack/local-types"
-    ]
+    "types": ["@cardstack/local-types"]
   },
   "include": [
     "../base/**/*",
@@ -59,7 +44,5 @@
     "tests/**/*",
     "types/**/*"
   ],
-  "exclude": [
-    "../base/**/__boxel/**"
-  ]
+  "exclude": ["../base/**/__boxel/**"]
 }

packages/postgres/tsconfig.json

@@ -5,6 +5,7 @@
     "module": "NodeNext",
     "moduleResolution": "nodenext",
     "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true,
     "noImplicitAny": true,
     "noImplicitThis": true,
     "alwaysStrict": true,

packages/realm-server/tsconfig.json

@@ -5,6 +5,7 @@
     "module": "nodenext",
     "moduleResolution": "nodenext",
     "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true,
     "noImplicitAny": true,
     "noImplicitThis": true,
     "alwaysStrict": true,
@@ -24,27 +25,12 @@
     "skipLibCheck": true,
     "strict": true,
     "paths": {
-      "https://cardstack.com/base/*": [
-        "../base/*"
-      ],
-      "@cardstack/boxel-ui": [
-        "../boxel-ui/addon"
-      ],
-      "@cardstack/boxel-ui/*": [
-        "../boxel-ui/addon/*"
-      ]
+      "https://cardstack.com/base/*": ["../base/*"],
+      "@cardstack/boxel-ui": ["../boxel-ui/addon"],
+      "@cardstack/boxel-ui/*": ["../boxel-ui/addon/*"]
     },
-    "types": [
-      "@cardstack/local-types"
-    ]
+    "types": ["@cardstack/local-types"]
   },
-  "include": [
-    "../base/**/*",
-    "./**/*"
-  ],
-  "exclude": [
-    "../base/**/__boxel/**",
-    "./realms/**",
-    "./tests/fixtures/**"
-  ]
+  "include": ["../base/**/*", "./**/*"],
+  "exclude": ["../base/**/__boxel/**", "./realms/**", "./tests/fixtures/**"]
 }

packages/runtime-common/bfm-card-references.ts

@@ -2,7 +2,7 @@ import { escapeHtml } from './helpers/html';
 import { resolveCardReference } from './card-reference-resolver';
 import { trimJsonExtension } from './url';
 import { FITTED_FORMATS } from './formats';
-import type { TokenizerAndRendererExtension } from 'marked';
+import type { TokenizerAndRendererExtension } from './marked.mts';
 
 // Regex patterns for stripping code before extraction.
 // These avoid backtick-in-regex issues that break content-tag in .gts files.

packages/runtime-common/bfm-math.ts

@@ -1,5 +1,8 @@
 import { escapeHtml } from './helpers/html';
-import type { MarkedExtension, TokenizerAndRendererExtension } from 'marked';
+import type {
+  MarkedExtension,
+  TokenizerAndRendererExtension,
+} from './marked.mts';
 
 // Regex patterns adapted from marked-katex-extension.
 // Inline: $...$ or $$...$$ on one line, with standard spacing rules.

packages/runtime-common/index.ts

@@ -371,12 +371,7 @@ export {
 
 export type { JWTPayload } from './realm-auth-client';
 export { sanitizeHtml } from './dompurify-runtime';
-export {
-  hasCodeBlocks,
-  markedSync,
-  markdownToHtml,
-  preloadMarkdownLanguages,
-} from './marked-sync';
+
 export { getPlural } from './pluralize-runtime';
 
 import type {

packages/runtime-common/marked-sync.ts

@@ -1,30 +1,16 @@
-import { Marked } from 'marked';
 import { sanitizeHtml } from './dompurify-runtime';
 import { escapeHtml } from './helpers/html';
 import { bfmCardReferenceExtensions } from './bfm-card-references';
 import { markedKatexPlaceholder } from './bfm-math';
-/* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires */
-// These packages declare "type": "module" which causes TS1479 under Node16
-// module resolution (runtime-common lacks "type": "module"). Load via CJS.
-// Unwrap .default for ESM default exports — webpack unwraps automatically but
-// esbuild (used by workspace-sync-cli) preserves the { default: fn } wrapper.
-type MarkedExtensionFactory = (
-  opts?: object,
-) => import('marked').MarkedExtension;
-function unwrapDefault<T>(mod: T | { default: T }): T {
-  return (mod as { default: T }).default ?? (mod as T);
-}
-const markedAlert = unwrapDefault(
-  require('marked-alert'),
-) as MarkedExtensionFactory;
-const markedFootnote = unwrapDefault(
-  require('marked-footnote'),
-) as MarkedExtensionFactory;
-const markedExtendedTables = unwrapDefault(
-  require('marked-extended-tables/lib/index.cjs'),
-) as () => import('marked').MarkedExtension;
-/* eslint-enable @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires */
-import { gfmHeadingId } from 'marked-gfm-heading-id';
+
+import {
+  Marked,
+  gfmHeadingId,
+  markedAlert,
+  markedFootnote,
+  markedExtendedTables,
+} from './marked.mts';
+
 import type * as _MonacoSDK from 'monaco-editor';
 type MonacoSDK = typeof _MonacoSDK;
 
@@ -87,23 +73,23 @@ const DEFAULT_MARKED_SYNC_OPTIONS = {
 
 /**
  * Renders code with syntax highlighting using the Monaco editor SDK.
- * 
+ *
  * This function tokenizes code using Monaco's editor capabilities to generate
  * HTML with syntax highlighting spans. Each line is colorized separately and
  * combined into a pre/code block with Monaco token classes.
- * 
+ *
  * @param code - The source code string to highlight
  * @param language - The programming language for syntax highlighting (e.g., 'typescript', 'javascript')
  * @param opts - Configuration options
  * @param opts.monaco - Optional Monaco SDK instance. Required for highlighting to occur
  * @param opts.monacoTheme - Optional theme name to apply before colorizing (e.g., 'vs-dark', 'vs-light')
  * @param opts.tabSize - Optional tab size for indentation rendering
  * @param opts.enableMonacoSyntaxHighlighting - Flag to enable/disable Monaco syntax highlighting. If false, function returns null immediately
- * 
+ *
   let editor = monaco?.editor;
   if (monaco === null || !editor?.createModel || !editor?.colorizeModelLine) {
  * or an error occurs during colorization
- * 
+ *
  * @throws Does not throw; catches all errors and returns null instead
  */
 function renderWithMonaco(

packages/runtime-common/marked.mts

@@ -0,0 +1,7 @@
+export { Marked } from 'marked';
+export type { MarkedExtension, TokenizerAndRendererExtension } from 'marked';
+export { default as markedAlert } from 'marked-alert';
+export { default as markedFootnote } from 'marked-footnote';
+// @ts-expect-error no upstream types
+export { default as markedExtendedTables } from 'marked-extended-tables/src/index.js';
+export { gfmHeadingId } from 'marked-gfm-heading-id';