ember-repl 2.0.63 → 3.0.0-beta.1

package/src/browser/compile/index.ts

@@ -0,0 +1,131 @@
+import { cell, resource, resourceFactory } from 'ember-resources';
+
+import { nameFor } from '../utils';
+import {
+  compileGJS as processGJS,
+  compileHBS as processHBS,
+  compileMD as processMD,
+} from './formats';
+
+import type { CompileResult } from '../types';
+import type { EvalImportMap, ScopeMap } from './types';
+import type { ComponentLike } from '@glint/template';
+type Format = 'glimdown' | 'gjs' | 'hbs';
+
+export const CACHE = new Map<string, ComponentLike>();
+
+const SUPPORTED_FORMATS = ['glimdown', 'gjs', 'hbs'];
+
+/**
+ * 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;
+    topLevelScope?: ScopeMap;
+  }
+) {
+  let id = nameFor(text);
+
+  let existing = CACHE.get(id);
+
+  if (existing) {
+    onSuccess(existing);
+
+    return;
+  }
+
+  if (!SUPPORTED_FORMATS.includes(format)) {
+    await onError(`Unsupported format: ${format}. Supported formats: ${SUPPORTED_FORMATS}`);
+
+    return;
+  }
+
+  await onCompileStart();
+
+  if (!text) {
+    await onError('No Input Document yet');
+
+    return;
+  }
+
+  let result: CompileResult;
+
+  if (format === 'glimdown') {
+    result = await processMD(text, options);
+  } else if (format === 'gjs') {
+    result = await processGJS(text, options.importMap);
+  } else if (format === 'hbs') {
+    result = await processHBS(text, {
+      scope: options.topLevelScope,
+    });
+  } else {
+    await onError(`Unsupported format: ${format}. Supported formats: ${SUPPORTED_FORMATS}`);
+
+    return;
+  }
+
+  if (result.error) {
+    await onError(result.error.message || `${result.error}`);
+
+    return;
+  }
+
+  CACHE.set(id, result.component as ComponentLike);
+
+  await onSuccess(result.component as ComponentLike);
+}
+
+type Input = string | undefined | null;
+
+/**
+ * By default, this compiles to `glimdown`. A Markdown format which
+ * extracts `live` tagged code snippets and compiles them to components.
+ */
+export const Compiled = resourceFactory(
+  (markdownText: Input | (() => Input), format?: Format | (() => Format)) => {
+    return resource(() => {
+      let _format: Format = (typeof format === 'function' ? format() : format) || 'glimdown';
+      let input = typeof markdownText === 'function' ? markdownText() : markdownText;
+      let ready = cell(false);
+      let error = cell();
+      let result = cell<ComponentLike>();
+
+      if (input) {
+        compile(input, {
+          format: _format,
+          onSuccess: async (component) => {
+            result.current = component;
+            ready.set(true);
+            error.set(null);
+          },
+          onError: async (e) => {
+            error.set(e);
+          },
+          onCompileStart: async () => {
+            ready.set(false);
+          },
+        });
+      }
+
+      return () => ({
+        isReady: ready.current,
+        error: error.current,
+        component: result.current,
+      });
+    });
+  }
+);

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

@@ -0,0 +1,318 @@
+import rehypeRaw from 'rehype-raw';
+import rehypeStringify from 'rehype-stringify';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import { unified } from 'unified';
+import { visit } from 'unist-util-visit';
+
+import { invocationOf, nameFor } from '../utils';
+
+import type { Node } from 'hast';
+import type { Code, Text } from 'mdast';
+import type { Parent } from 'unist';
+import type { VFile } from 'vfile';
+
+export interface ExtractedCode {
+  name: string;
+  code: string;
+  lang: string;
+}
+
+export interface LiveCodeExtraction {
+  templateOnlyGlimdown: string;
+  blocks: ExtractedCode[];
+}
+type LiveData = {
+  liveCode?: ExtractedCode[];
+};
+type VFileWithMeta = VFile & {
+  data: LiveData;
+};
+
+interface Options {
+  snippets?: {
+    classList?: string[];
+  };
+  demo?: {
+    classList?: string[];
+  };
+  copyComponent?: string;
+  shadowComponent?: string;
+}
+
+const GLIMDOWN_PREVIEW = Symbol('__GLIMDOWN_PREVIEW__');
+const GLIMDOWN_RENDER = Symbol('__GLIMDOWN_RENDER__');
+const ALLOWED_LANGUAGES = ['gjs', 'hbs'] as const;
+
+type AllowedLanguage = (typeof ALLOWED_LANGUAGES)[number];
+type RelevantCode = Omit<Code, 'lang'> & { lang: AllowedLanguage };
+
+const escapeCurlies = (node: Text | Parent) => {
+  if ('value' in node && node.value) {
+    node.value = node.value.replace(/{{/g, '\\{{');
+  }
+
+  if ('children' in node && node.children) {
+    node.children.forEach((child) => escapeCurlies(child as Parent));
+  }
+
+  if (!node.data) {
+    return;
+  }
+
+  if ('hChildren' in node.data && Array.isArray(node.data['hChildren'])) {
+    node.data['hChildren'].forEach(escapeCurlies);
+
+    return;
+  }
+};
+
+function isLive(meta: string) {
+  return meta.includes('live');
+}
+
+function isPreview(meta: string) {
+  return meta.includes('preview');
+}
+
+function isBelow(meta: string) {
+  return meta.includes('below');
+}
+
+// TODO: extract and publish remark plugin
+function liveCodeExtraction(options: Options = {}) {
+  let { copyComponent, snippets, demo } = options;
+  let { classList: snippetClasses } = snippets || {};
+  let { classList: demoClasses } = demo || {};
+
+  snippetClasses ??= [];
+  demoClasses ??= [];
+
+  function isRelevantCode(node: Code): node is RelevantCode {
+    if (node.type !== 'code') return false;
+
+    let { meta, lang } = node;
+
+    meta = meta?.trim();
+
+    if (!meta || !lang) return false;
+
+    if (!meta.includes('live')) {
+      return false;
+    }
+
+    if (!(ALLOWED_LANGUAGES as unknown as string[]).includes(lang)) return false;
+
+    return true;
+  }
+
+  let copyNode = {
+    type: 'html',
+    value: copyComponent,
+  };
+
+  function enhance(code: Code) {
+    code.data ??= {};
+    code.data['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;
+
+    return {
+      data: {
+        hProperties: { className: snippetClasses },
+      },
+      type: 'div',
+      hProperties: { className: snippetClasses },
+      children: [code, copyNode],
+    };
+  }
+
+  function flatReplaceAt<T>(array: T[], index: number, replacement: T[]) {
+    array.splice(index, 1, ...replacement);
+  }
+
+  // because we mutate the tree as we iterate,
+  // we need to make sure we don't loop forever
+  const seen = new Set();
+
+  return function transformer(tree: Parent, file: VFileWithMeta) {
+    visit(tree, ['code'], function (node, index, parent) {
+      if (parent === null) return;
+      if (index === null) return;
+
+      if (!isRelevantCode(node as Code)) {
+        let enhanced = enhance(node as Code);
+
+        parent.children[index] = enhanced;
+
+        return 'skip';
+      }
+
+      if (seen.has(node)) return 'skip';
+
+      seen.add(node);
+
+      let { meta, lang, value } = node as Code;
+
+      if (!meta) return 'skip';
+      if (!lang) return 'skip';
+
+      file.data.liveCode ??= [];
+
+      let code = value.trim();
+      let name = nameFor(code);
+      let invocation = invocationOf(name);
+
+      let shadow = options.shadowComponent;
+
+      let wrapInShadow = shadow && !meta?.includes('no-shadow');
+
+      if (wrapInShadow) {
+        invocation = `<${shadow}>${invocation}</${shadow}>`;
+      }
+
+      let invokeNode = {
+        type: 'html',
+        data: {
+          hProperties: { [GLIMDOWN_RENDER]: true },
+        },
+        value: `<div class="${demoClasses}">${invocation}</div>`,
+      };
+
+      let wrapper = enhance(node as Code);
+
+      file.data.liveCode.push({
+        lang,
+        name,
+        code,
+      });
+
+      let live = isLive(meta);
+      let preview = isPreview(meta);
+      let below = isBelow(meta);
+
+      if (live && preview && below) {
+        flatReplaceAt(parent.children, index, [wrapper, invokeNode]);
+
+        return 'skip';
+      }
+
+      if (live && preview) {
+        flatReplaceAt(parent.children, index, [invokeNode, wrapper]);
+
+        return 'skip';
+      }
+
+      if (live) {
+        parent.children[index] = invokeNode;
+
+        return 'skip';
+      }
+
+      parent.children[index] = wrapper;
+
+      return;
+    });
+  };
+}
+
+function buildCompiler(options: ParseMarkdownOptions) {
+  return (
+    unified()
+      // .use(markdown)
+      .use(remarkParse)
+      // 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';
+          }
+
+          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,
+      })
+  );
+}
+
+interface ParseMarkdownOptions {
+  CopyComponent?: string;
+  ShadowComponent?: string;
+}
+
+/**
+ * @internal not under semver
+ */
+export async function parseMarkdown(
+  input: string,
+  options: ParseMarkdownOptions = {}
+): Promise<LiveCodeExtraction> {
+  let markdownCompiler = buildCompiler(options);
+  let processed = await markdownCompiler.process(input);
+  let liveCode = (processed.data as LiveData).liveCode || [];
+  let templateOnly = processed.toString();
+
+  return { templateOnlyGlimdown: templateOnly, blocks: liveCode };
+}

package/src/browser/compile/types.ts

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

package/src/browser/esm/index.ts

@@ -0,0 +1,80 @@
+import { preprocess, transform } from '../gjs';
+import { modules } from '../known-modules';
+import { nameFor } from '../utils';
+
+import type { CompileResult, ExtraModules } from '../types';
+import type Component from '@glimmer/component';
+import type { ComponentLike } from '@glint/template';
+
+export interface Info {
+  code: string;
+  name: string;
+}
+
+export async function compileJS(code: string, extraModules?: ExtraModules): Promise<CompileResult> {
+  let name = nameFor(code);
+  let component: undefined | ComponentLike;
+  let error: undefined | Error;
+
+  try {
+    let compiled = await compileGJS({ code: code, name });
+
+    if (!compiled) {
+      throw new Error(`Compiled output is missing`);
+    }
+
+    // NOTE: we cannot `eval` ESM
+    compiled = proxyToSkypack(compiled, extraModules);
+    component = (await evalSnippet(compiled)) as unknown as ComponentLike;
+  } catch (e) {
+    error = e as Error | undefined;
+  }
+
+  return { name, component, error };
+}
+
+export function proxyToSkypack(code: string, extraModules?: ExtraModules) {
+  let knownModules = [...Object.keys(extraModules || {}), ...Object.keys(modules)];
+  let origin = location.origin;
+
+  let result = code.replaceAll(/from ('|")([^"']+)('|")/g, (_, __, modulePath) => {
+    if (knownModules.includes(modulePath)) {
+      return `from '${origin}/${modulePath}'`;
+    }
+
+    return `from 'https://cdn.skypack.dev/${modulePath}'`;
+  });
+
+  return result;
+}
+
+async function evalSnippet(code: string) {
+  let encodedJs = encodeURIComponent(code);
+  let result = await import(
+    /* webpackIgnore: true */ `data:text/javascript;charset=utf-8,${encodedJs}`
+  );
+
+  if (!result.default) {
+    throw new Error(`Expected module to have a default export, found ${Object.keys(result)}`);
+  }
+
+  return result as {
+    default: Component;
+    services?: { [key: string]: unknown };
+  };
+}
+
+async function compileGJS({ code: input, name }: Info) {
+  let preprocessed = preprocess(input, name);
+  let result = await transform(preprocessed, name, {
+    modules: false,
+  });
+
+  if (!result) {
+    return;
+  }
+
+  let { code } = result;
+
+  return code;
+}

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

@@ -0,0 +1,105 @@
+import { ImportUtil } from 'babel-import-util';
+
+import { transformTemplateTag } from './template-tag-transform';
+import * as util from './util';
+
+import type { NodePath } from '@babel/traverse';
+import type { CallExpression, Class, Program } from '@babel/types';
+
+/**
+ * This Babel plugin takes parseable code emitted by the string-based
+ * preprocessor plugin in this package and converts it into calls to
+ * the standardized `precompileTemplate` macro from `@ember/template-compilation`.
+ *
+ * Its goal is to convert code like this:
+ *
+ * ```js
+ * import { hbs } from 'ember-template-imports';
+ *
+ * const A = hbs(`A`, {...});
+ * const B = [__GLIMMER_TEMPLATE(`B`, {...})];
+ * class C {
+ *   template = hbs(`C`, {...});
+ * }
+ *
+ * [__GLIMMER_TEMPLATE(`default`, {...})];
+ *
+ * class D {
+ *   [__GLIMMER_TEMPLATE(`D`, {...})]
+ * }
+ * ```
+ *
+ * Into this:
+ *
+ * ```js
+ * import { precompileTemplate } from '@ember/template-compilation';
+ * import { setComponentTemplate } from '@ember/component';
+ * import templateOnlyComponent from '@ember/component/template-only';
+ *
+ * const A = setComponentTemplate(
+ *   precompileTemplate(`A`, {...}),
+ *   templateOnlyComponent('this-module.js', 'A')
+ * );
+ * const B = setComponentTemplate(
+ *   precompileTemplate(`B`, {...}),
+ *   templateOnlyComponent('this-module.js', 'B')
+ * );
+ * class C {}
+ * setComponentTemplate(precompileTemplate(`C`, {...}), C);
+ *
+ * export default setComponentTemplate(
+ *   precompileTemplate(`default`, {...}),
+ *   templateOnlyComponent('this-module.js', '_thisModule')
+ * );
+ *
+ * class D {}
+ * setComponentTemplate(precompileTemplate(`D`, {...}), D);
+ * ```
+ */
+export default function (babel: any) {
+  let t = babel.types;
+
+  let visitor: any = {
+    Program: {
+      enter(path: NodePath<Program>, state: any) {
+        state.importUtil = new ImportUtil(t, path);
+      },
+    },
+
+    // Process class bodies before things like class properties get transformed
+    // into imperative constructor code that we can't recognize. Taken directly
+    // from babel-plugin-htmlbars-inline-precompile https://git.io/JMi1G
+    Class(path: NodePath<Class>, state: any) {
+      let bodyPath = path.get('body.body');
+
+      if (!Array.isArray(bodyPath)) return;
+
+      bodyPath.forEach((path) => {
+        if (path.type !== 'ClassProperty') return;
+
+        let keyPath = path.get('key');
+        let valuePath = path.get('value');
+
+        if (Array.isArray(keyPath)) return;
+
+        if (keyPath && visitor[keyPath.type]) {
+          visitor[keyPath.type](keyPath, state);
+        }
+
+        if (Array.isArray(valuePath)) return;
+
+        if (valuePath && visitor[valuePath.type]) {
+          visitor[valuePath.type](valuePath, state);
+        }
+      });
+    },
+
+    CallExpression(path: NodePath<CallExpression>, state: any) {
+      if (util.isTemplateTag(path)) {
+        transformTemplateTag(t, path, state);
+      }
+    },
+  };
+
+  return { visitor };
+}

package/src/browser/eti/debug.ts

@@ -0,0 +1,7 @@
+export function expect<T>(value: T | null | undefined, message: string): T {
+  if (value === undefined || value === null) {
+    throw new Error(`LIBRARY BUG: ${message}`);
+  }
+
+  return value;
+}