ember-repl 3.0.0-beta.4 → 3.0.0-beta.6

package/src/browser/compile/index.ts

@@ -1,44 +1,74 @@
 import { cell, resource, resourceFactory } from 'ember-resources';
 
-import { nameFor } from '../utils';
+import { nameFor } from '../utils.ts';
 import {
   compileGJS as processGJS,
   compileHBS as processHBS,
   compileMD as processMD,
-} from './formats';
+} from './formats.ts';
 
-import type { CompileResult } from '../types';
-import type { EvalImportMap, ScopeMap } from './types';
+import type { CompileResult } from '../types.ts';
+import type { UnifiedPlugin } from './types.ts';
+import type { EvalImportMap, ScopeMap } from './types.ts';
 import type { ComponentLike } from '@glint/template';
 type Format = 'glimdown' | 'gjs' | 'hbs';
 
 export const CACHE = new Map<string, ComponentLike>();
 
+interface Events {
+  onSuccess: (component: ComponentLike) => Promise<unknown> | unknown;
+  onError: (error: string) => Promise<unknown> | unknown;
+  onCompileStart: () => Promise<unknown> | unknown;
+}
+
+interface Scope {
+  importMap?: EvalImportMap;
+}
+
 const SUPPORTED_FORMATS = ['glimdown', 'gjs', 'hbs'];
 
+interface GlimdownOptions extends Scope, Events {
+  format: 'glimdown';
+  remarkPlugins?: UnifiedPlugin[];
+  CopyComponent?: string;
+  ShadowComponent?: string;
+  topLevelScope?: ScopeMap;
+}
+interface GJSOptions extends Scope, Events {
+  format: 'gjs';
+}
+
+interface HBSOptions extends Scope, Events {
+  format: 'hbs';
+  topLevelScope?: ScopeMap;
+}
+
+/**
+ * Compile GitHub-flavored Markdown with GJS support
+ * and optionally render gjs-snippets via a `live` meta tag
+ * on the code fences.
+ */
+export async function compile(text: string, options: GlimdownOptions): Promise<void>;
+
+/**
+ * Compile GJS
+ */
+export async function compile(text: string, options: GJSOptions): Promise<void>;
+
+/**
+ * Compile a stateless component using just the template
+ */
+export async function compile(text: string, options: HBSOptions): Promise<void>;
+
 /**
  * This compileMD is a more robust version of the raw compiling used in "formats".
  * This function manages cache, and has events for folks building UIs to hook in to
  */
 export async function compile(
   text: string,
-  {
-    format,
-    onSuccess,
-    onError,
-    onCompileStart,
-    ...options
-  }: {
-    format: Format;
-    onSuccess: (component: ComponentLike) => Promise<unknown> | unknown;
-    onError: (error: string) => Promise<unknown> | unknown;
-    onCompileStart: () => Promise<unknown> | unknown;
-    importMap?: EvalImportMap;
-    CopyComponent?: string;
-    ShadowComponent?: string;
-    topLevelScope?: ScopeMap;
-  }
-) {
+  options: GlimdownOptions | GJSOptions | HBSOptions
+): Promise<void> {
+  let { onSuccess, onError, onCompileStart } = options;
   let id = nameFor(text);
 
   let existing = CACHE.get(id);
@@ -49,8 +79,8 @@ export async function compile(
     return;
   }
 
-  if (!SUPPORTED_FORMATS.includes(format)) {
-    await onError(`Unsupported format: ${format}. Supported formats: ${SUPPORTED_FORMATS}`);
+  if (!SUPPORTED_FORMATS.includes(options.format)) {
+    await onError(`Unsupported format: ${options.format}. Supported formats: ${SUPPORTED_FORMATS}`);
 
     return;
   }
@@ -65,16 +95,18 @@ export async function compile(
 
   let result: CompileResult;
 
-  if (format === 'glimdown') {
+  if (options.format === 'glimdown') {
     result = await processMD(text, options);
-  } else if (format === 'gjs') {
+  } else if (options.format === 'gjs') {
     result = await processGJS(text, options.importMap);
-  } else if (format === 'hbs') {
+  } else if (options.format === 'hbs') {
     result = await processHBS(text, {
       scope: options.topLevelScope,
     });
   } else {
-    await onError(`Unsupported format: ${format}. Supported formats: ${SUPPORTED_FORMATS}`);
+    await onError(
+      `Unsupported format: ${(options as any).format}. Supported formats: ${SUPPORTED_FORMATS}`
+    );
 
     return;
   }
@@ -95,6 +127,7 @@ type Input = string | undefined | null;
 type ExtraOptions =
   | {
       format: 'glimdown';
+      remarkPlugins?: UnifiedPlugin[];
       importMap?: EvalImportMap;
       CopyComponent?: string;
       ShadowComponent?: string;
@@ -114,7 +147,7 @@ type ExtraOptions =
  */
 export interface Value {
   isReady: boolean;
-  error: unknown;
+  error: string | null;
   component: ComponentLike;
 }
 
@@ -139,12 +172,13 @@ export function buildCompiler(
 
     let input = typeof markdownText === 'function' ? markdownText() : markdownText;
     let ready = cell(false);
-    let error = cell();
+    let error = cell<string | null>();
     let result = cell<ComponentLike>();
 
     if (input) {
       compile(input, {
-        format,
+        // narrowing is hard here, but this is an implementation detail
+        format: format as any,
         onSuccess: async (component) => {
           result.current = component;
           ready.set(true);

package/src/browser/compile/markdown-to-ember.ts

@@ -6,8 +6,9 @@ import remarkRehype from 'remark-rehype';
 import { unified } from 'unified';
 import { visit } from 'unist-util-visit';
 
-import { invocationOf, nameFor } from '../utils';
+import { invocationOf, nameFor } from '../utils.ts';
 
+import type { UnifiedPlugin } from './types.ts';
 import type { Node } from 'hast';
 import type { Code, Text } from 'mdast';
 import type { Parent } from 'unist';
@@ -114,9 +115,9 @@ function liveCodeExtraction(options: Options = {}) {
 
   function enhance(code: Code) {
     code.data ??= {};
-    code.data['hProperties'] ??= {};
+    (code.data as any)['hProperties'] ??= {};
     // This is secret-to-us-only API, so we don't really care about the type
-    (code.data['hProperties'] as any)[GLIMDOWN_PREVIEW] = true;
+    (code.data as any)['hProperties'][GLIMDOWN_PREVIEW] = true;
 
     return {
       data: {
@@ -138,8 +139,8 @@ function liveCodeExtraction(options: Options = {}) {
 
   return function transformer(tree: Parent, file: VFileWithMeta) {
     visit(tree, ['code'], function (node, index, parent) {
-      if (parent === null) return;
-      if (index === null) return;
+      if (parent === null || parent === undefined) return;
+      if (index === null || index === undefined) return;
 
       if (!isRelevantCode(node as Code)) {
         let enhanced = enhance(node as Code);
@@ -218,89 +219,103 @@ function liveCodeExtraction(options: Options = {}) {
 }
 
 function buildCompiler(options: ParseMarkdownOptions) {
-  return (
-    unified()
-      .use(remarkParse)
-      .use(remarkGfm)
-      // TODO: we only want to do this when we have pre > code.
-      //       code can exist inline.
-      .use(liveCodeExtraction, {
-        snippets: {
-          classList: ['glimdown-snippet', 'relative'],
-        },
-        demo: {
-          classList: ['glimdown-render'],
-        },
-        copyComponent: options?.CopyComponent,
-        shadowComponent: options?.ShadowComponent,
-      })
-      // .use(() => (tree) => visit(tree, (node) => console.log('i', node)))
-      // remark rehype is needed to convert markdown to HTML
-      // However, it also changes all the nodes, so we need another pass
-      // to make sure our Glimmer-aware nodes are in tact
-      .use(remarkRehype, { allowDangerousHtml: true })
-      // Convert invocables to raw format, so Glimmer can invoke them
-      .use(() => (tree: Node) => {
-        visit(tree, function (node) {
-          // We rely on an implicit transformation of data.hProperties => properties
-          let properties = (node as any).properties;
-
-          if (properties?.[GLIMDOWN_PREVIEW]) {
-            // Have to sanitize anything Glimmer could try to render
-            escapeCurlies(node as Parent);
-
-            return 'skip';
-          }
-
-          if (node.type === 'element' || ('tagName' in node && node.tagName === 'code')) {
-            if (properties?.[GLIMDOWN_RENDER]) {
-              node.type = 'glimmer_raw';
-
-              return;
-            }
-
-            escapeCurlies(node as Parent);
-
-            return 'skip';
-          }
-
-          if (node.type === 'text' || node.type === 'raw') {
-            // definitively not the better way, but this is supposed to detect "glimmer" nodes
-            if (
-              'value' in node &&
-              typeof node.value === 'string' &&
-              node.value.match(/<\/?[_A-Z:0-9].*>/g)
-            ) {
-              node.type = 'glimmer_raw';
-            }
-
-            node.type = 'glimmer_raw';
-
-            return 'skip';
-          }
+  let compiler = unified().use(remarkParse).use(remarkGfm);
+
+  // TODO: we only want to do this when we have pre > code.
+  //       code can exist inline.
+  compiler = compiler.use(liveCodeExtraction, {
+    snippets: {
+      classList: ['glimdown-snippet', 'relative'],
+    },
+    demo: {
+      classList: ['glimdown-render'],
+    },
+    copyComponent: options?.CopyComponent,
+    shadowComponent: options?.ShadowComponent,
+  });
+
+  /**
+   * If this were "use"d after `remarkRehype`,
+   * remark is gone, and folks would need to work with rehype trees
+   */
+  if (options.remarkPlugins) {
+    options.remarkPlugins.forEach((plugin) => {
+      compiler = compiler.use(plugin) as any;
+    });
+  }
+
+  // .use(() => (tree) => visit(tree, (node) => console.log('i', node)))
+  // remark rehype is needed to convert markdown to HTML
+  // However, it also changes all the nodes, so we need another pass
+  // to make sure our Glimmer-aware nodes are in tact
+  compiler = compiler.use(remarkRehype, { allowDangerousHtml: true });
+
+  // Convert invocables to raw format, so Glimmer can invoke them
+  compiler = compiler.use(() => (tree: Node) => {
+    visit(tree, function (node) {
+      // We rely on an implicit transformation of data.hProperties => properties
+      let properties = (node as any).properties;
+
+      if (properties?.[GLIMDOWN_PREVIEW]) {
+        // Have to sanitize anything Glimmer could try to render
+        escapeCurlies(node as Parent);
+
+        return 'skip';
+      }
+
+      if (node.type === 'element' || ('tagName' in node && node.tagName === 'code')) {
+        if (properties?.[GLIMDOWN_RENDER]) {
+          node.type = 'glimmer_raw';
 
           return;
-        });
-      })
-      .use(rehypeRaw, { passThrough: ['glimmer_raw', 'raw'] })
-      .use(() => (tree) => {
-        visit(tree, 'glimmer_raw', (node: Node) => {
-          node.type = 'raw';
-        });
-      })
-      .use(rehypeStringify, {
-        collapseEmptyAttributes: true,
-        closeSelfClosing: true,
-        allowParseErrors: true,
-        allowDangerousCharacters: true,
-        allowDangerousHtml: true,
-      })
-  );
+        }
+
+        escapeCurlies(node as Parent);
+
+        return 'skip';
+      }
+
+      if (node.type === 'text' || node.type === 'raw') {
+        // definitively not the better way, but this is supposed to detect "glimmer" nodes
+        if (
+          'value' in node &&
+          typeof node.value === 'string' &&
+          node.value.match(/<\/?[_A-Z:0-9].*>/g)
+        ) {
+          node.type = 'glimmer_raw';
+        }
+
+        node.type = 'glimmer_raw';
+
+        return 'skip';
+      }
+
+      return;
+    });
+  });
+
+  compiler = compiler.use(rehypeRaw, { passThrough: ['glimmer_raw', 'raw'] }).use(() => (tree) => {
+    visit(tree, 'glimmer_raw', (node: Node) => {
+      node.type = 'raw';
+    });
+  });
+
+  // Finally convert to string! oofta!
+  compiler = compiler.use(rehypeStringify, {
+    collapseEmptyAttributes: true,
+    closeSelfClosing: true,
+    allowParseErrors: true,
+    allowDangerousCharacters: true,
+    allowDangerousHtml: true,
+  }) as any;
+
+  return compiler as ReturnType<typeof unified>;
 }
 
 interface ParseMarkdownOptions {
   CopyComponent?: string;
   ShadowComponent?: string;
+  remarkPlugins?: UnifiedPlugin[];
 }
 
 /**

package/src/browser/compile/types.ts

@@ -1,3 +1,5 @@
+import { type Plugin } from 'unified';
+
 export interface EvalImportMap {
   [moduleName: string]: ScopeMap;
 }
@@ -5,3 +7,5 @@ export interface EvalImportMap {
 export interface ScopeMap {
   [localName: string]: unknown;
 }
+
+export type UnifiedPlugin = Plugin; // Parameters<ReturnType<typeof unified>['use']>[0];

package/src/browser/esm/index.ts

@@ -1,8 +1,8 @@
-import { preprocess, transform } from '../gjs';
-import { modules } from '../known-modules';
-import { nameFor } from '../utils';
+import { preprocess, transform } from '../gjs.ts';
+import { modules } from '../known-modules.ts';
+import { nameFor } from '../utils.ts';
 
-import type { CompileResult, ExtraModules } from '../types';
+import type { CompileResult, ExtraModules } from '../types.ts';
 import type Component from '@glimmer/component';
 import type { ComponentLike } from '@glint/template';
 

package/src/browser/eti/babel-plugin.ts

@@ -1,7 +1,7 @@
 import { ImportUtil } from 'babel-import-util';
 
-import { transformTemplateTag } from './template-tag-transform';
-import * as util from './util';
+import { transformTemplateTag } from './template-tag-transform.ts';
+import * as util from './util.ts';
 
 import type { NodePath } from '@babel/traverse';
 import type { CallExpression, Class, Program } from '@babel/types';

package/src/browser/eti/parse-templates.ts

@@ -1,5 +1,5 @@
-import { expect } from './debug';
-import { TEMPLATE_TAG_NAME } from './util';
+import { expect } from './debug.ts';
+import { TEMPLATE_TAG_NAME } from './util.ts';
 
 export type TemplateMatch = TemplateTagMatch;
 

package/src/browser/eti/preprocess.ts

@@ -7,10 +7,10 @@ import { getTemplateLocals } from '@glimmer/syntax';
 import lineColumn from 'line-column';
 import MagicString from 'magic-string';
 
-import { expect } from './debug';
-import { parseTemplates } from './parse-templates';
+import { expect } from './debug.ts';
+import { parseTemplates } from './parse-templates.ts';
 
-import type { ParseTemplatesOptions, TemplateMatch } from './parse-templates';
+import type { ParseTemplatesOptions, TemplateMatch } from './parse-templates.ts';
 
 interface PreprocessOptionsEager {
   importIdentifier?: string;

package/src/browser/eti/template-tag-transform.ts

@@ -1,4 +1,4 @@
-import { buildPrecompileTemplateCall, registerRefs, TEMPLATE_TAG_NAME } from './util';
+import { buildPrecompileTemplateCall, registerRefs, TEMPLATE_TAG_NAME } from './util.ts';
 
 /**
  * Supports the following syntaxes:

package/src/browser/eti/util.ts

@@ -1,4 +1,4 @@
-import type { TemplateMatch } from './parse-templates';
+import type { TemplateMatch } from './parse-templates.ts';
 import type { NodePath } from '@babel/traverse';
 import type { CallExpression } from '@babel/types';
 import type { ImportUtil } from 'babel-import-util';

package/src/browser/gjs.ts

@@ -3,11 +3,11 @@ import { importSync } from '@embroider/macros';
 import babelPluginEmberTemplateCompilation from 'babel-plugin-ember-template-compilation';
 
 // TODO: use real packages, and not these copied files from ember-template-imports
-import babelPluginIntermediateGJS from './eti/babel-plugin';
-import { preprocessEmbeddedTemplates } from './eti/preprocess';
-import { TEMPLATE_TAG_NAME, TEMPLATE_TAG_PLACEHOLDER } from './eti/util';
+import babelPluginIntermediateGJS from './eti/babel-plugin.ts';
+import { preprocessEmbeddedTemplates } from './eti/preprocess.ts';
+import { TEMPLATE_TAG_NAME, TEMPLATE_TAG_PLACEHOLDER } from './eti/util.ts';
 
-import type { Babel } from './types';
+import type { Babel } from './types.ts';
 
 const compiler = importSync('ember-source/dist/ember-template-compiler.js');
 

package/src/browser/hbs.ts

@@ -11,9 +11,9 @@ import { on } from '@ember/modifier';
 import { createTemplateFactory } from '@ember/template-factory';
 import { importSync } from '@embroider/macros';
 
-import { nameFor } from './utils';
+import { nameFor } from './utils.ts';
 
-import type { CompileResult } from './types';
+import type { CompileResult } from './types.ts';
 import type { ComponentLike } from '@glint/template';
 
 // These things are pre-bundled in the old system.

package/src/browser/index.ts

@@ -1,8 +1,8 @@
-export { compile, Compiled } from './compile';
-export { compileHBS } from './hbs';
-export { compileJS } from './js';
-export { modules as frameworkModules } from './known-modules';
-export { invocationName, invocationOf, nameFor } from './utils';
+export { compile, Compiled } from './compile/index.ts';
+export { compileHBS } from './hbs.ts';
+export { compileJS } from './js.ts';
+export { modules as frameworkModules } from './known-modules.ts';
+export { invocationName, invocationOf, nameFor } from './utils.ts';
 
 // Public Types
 export type { CompileResult } from './types';

package/src/browser/js.ts

@@ -1,7 +1,7 @@
-import { compileJS as compileAMD } from './cjs';
-import { compileJS as compileESM } from './esm';
+import { compileJS as compileAMD } from './cjs/index.ts';
+import { compileJS as compileESM } from './esm/index.ts';
 
-import type { CompileResult, ExtraModules, Options } from './types';
+import type { CompileResult, ExtraModules, Options } from './types.ts';
 
 /**
  * @public

package/src/test-support/index.ts

@@ -1,4 +1,4 @@
-import { CACHE } from '../browser/compile/index';
+import { CACHE } from '../browser/compile/index.ts';
 
 export function clearCompileCache() {
   CACHE.clear();

package/dist/browser/cjs/eval.d.ts

@@ -1,10 +0,0 @@
-import { ExtraModules } from "../types.js";
-import Component from '@glimmer/component';
-declare function evalSnippet(compiled: string, extraModules?: ExtraModules): {
-    default: Component;
-    services?: {
-        [key: string]: unknown;
-    };
-};
-export { evalSnippet };
-//# sourceMappingURL=browser/cjs/eval.d.ts.map

package/dist/browser/cjs/eval.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"browser/cjs/eval.d.ts","sourceRoot":"","sources":["../src/browser/cjs/eval.ts"],"names":[],"mappings":"AAGA,OAAO,gBAAqB,oBAAiB;AAC7C,OAAO,SAAc,MAAM,oBAAoB,CAAC;AAEhD,iBAAgB,WAAW,CACzB,QAAQ,EAAE,MAAM,EAChB,YAAY,GAAE,YAAiB,GAC9B;IACD,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;CACvC,CAmBA"}

package/dist/browser/cjs/index.d.ts

@@ -1,7 +0,0 @@
-import { CompileResult, ExtraModules } from "../types.js";
-interface Info {
-    code: string;
-    name: string;
-}
-declare function compileJS(code: string, extraModules?: ExtraModules): Promise<CompileResult>;
-export { Info, compileJS };

package/dist/browser/compile/formats.d.ts

@@ -1,16 +0,0 @@
-import { CompileResult } from "../types.js";
-import { EvalImportMap, ScopeMap } from "./types.js";
-declare function compileGJS(gjsInput: string, importMap?: EvalImportMap): Promise<CompileResult>;
-declare function compileHBS(hbsInput: string, options?: {
-    moduleName?: string;
-    scope?: Record<string, unknown>;
-}): Promise<CompileResult>;
-declare function compileMD(glimdownInput: string, options?: {
-    importMap?: EvalImportMap;
-    topLevelScope?: ScopeMap;
-    CopyComponent?: string;
-    ShadowComponent?: string;
-}): Promise<CompileResult & {
-    rootTemplate?: string;
-}>;
-export { compileGJS, compileHBS, compileMD };

package/dist/browser/compile/index.d.ts

@@ -1,51 +0,0 @@
-import { EvalImportMap, ScopeMap } from "./types.js";
-import { ComponentLike } from '@glint/template';
-type Format = 'glimdown' | 'gjs' | 'hbs';
-declare const CACHE: Map<string, ComponentLike>;
-/**
- * This compileMD is a more robust version of the raw compiling used in "formats".
- * This function manages cache, and has events for folks building UIs to hook in to
- */
-declare function compile(text: string, { format, onSuccess, onError, onCompileStart, ...options }: {
-    format: Format;
-    onSuccess: (component: ComponentLike) => Promise<unknown> | unknown;
-    onError: (error: string) => Promise<unknown> | unknown;
-    onCompileStart: () => Promise<unknown> | unknown;
-    importMap?: EvalImportMap;
-    CopyComponent?: string;
-    ShadowComponent?: string;
-    topLevelScope?: ScopeMap;
-}): Promise<void>;
-type Input = string | undefined | null;
-type ExtraOptions = {
-    format: 'glimdown';
-    importMap?: EvalImportMap;
-    CopyComponent?: string;
-    ShadowComponent?: string;
-    topLevelScope?: ScopeMap;
-} | {
-    format: 'hbs';
-    topLevelScope?: ScopeMap;
-} | {
-    format: 'gjs';
-    importMap?: EvalImportMap;
-};
-/**
- * @internal
- */
-interface Value {
-    isReady: boolean;
-    error: unknown;
-    component: ComponentLike;
-}
-declare function buildCompiler(markdownText: Input | (() => Input)): Value;
-declare function buildCompiler(markdownText: Input | (() => Input), options?: Format): Value;
-declare function buildCompiler(markdownText: Input | (() => Input), options?: () => Format): Value;
-declare function buildCompiler(markdownText: Input | (() => Input), options?: ExtraOptions): Value;
-declare function buildCompiler(markdownText: Input | (() => Input), options?: () => ExtraOptions): Value;
-/**
- * By default, this compiles to `glimdown`. A Markdown format which
- * extracts `live` tagged code snippets and compiles them to components.
- */
-declare const Compiled: typeof buildCompiler;
-export { CACHE, compile, Value, buildCompiler, Compiled };

package/dist/browser/compile/markdown-to-ember.d.ts

@@ -1,18 +0,0 @@
-interface ExtractedCode {
-    name: string;
-    code: string;
-    lang: string;
-}
-interface LiveCodeExtraction {
-    templateOnlyGlimdown: string;
-    blocks: ExtractedCode[];
-}
-interface ParseMarkdownOptions {
-    CopyComponent?: string;
-    ShadowComponent?: string;
-}
-/**
- * @internal not under semver
- */
-declare function parseMarkdown(input: string, options?: ParseMarkdownOptions): Promise<LiveCodeExtraction>;
-export { ExtractedCode, LiveCodeExtraction, parseMarkdown };

package/dist/browser/compile/types.d.ts

@@ -1,7 +0,0 @@
-interface EvalImportMap {
-    [moduleName: string]: ScopeMap;
-}
-interface ScopeMap {
-    [localName: string]: unknown;
-}
-export { EvalImportMap, ScopeMap };

package/dist/browser/esm/index.d.ts

@@ -1,8 +0,0 @@
-import { CompileResult, ExtraModules } from "../types.js";
-interface Info {
-    code: string;
-    name: string;
-}
-declare function compileJS(code: string, extraModules?: ExtraModules): Promise<CompileResult>;
-declare function proxyToSkypack(code: string, extraModules?: ExtraModules): string;
-export { Info, compileJS, proxyToSkypack };

package/dist/browser/eti/debug.d.ts

@@ -1,2 +0,0 @@
-declare function expect<T>(value: T | null | undefined, message: string): T;
-export { expect };