ember-repl 2.0.63 → 3.0.0-beta.0

package/package.json

@@ -1,152 +1,125 @@
 {
   "name": "ember-repl",
-  "version": "2.0.63",
+  "version": "3.0.0-beta.0",
   "description": "Addon for enabling REPL and Playground creation with Ember/Glimmer",
   "keywords": [
     "ember-addon"
   ],
-  "repository": "https://github.com/NullVoxPopuli/ember-repl",
+  "repository": {
+    "type": "https",
+    "url": "https://github.com/NullVoxPopuli/limber",
+    "directory": "packages/ember-repl/addon"
+  },
   "license": "MIT",
   "author": "NullVoxPopuli",
-  "directories": {
-    "doc": "doc",
-    "test": "tests"
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/browser/*",
+        "dist/browser/*/index.d.ts"
+      ]
+    }
   },
-  "scripts": {
-    "build": "ember build --environment=production",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
-    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
-    "lint:hbs": "ember-template-lint .",
-    "lint:hbs:fix": "ember-template-lint . --fix",
-    "lint:js": "eslint . --cache",
-    "lint:js:fix": "eslint . --fix",
-    "start": "ember serve",
-    "test": "npm-run-all lint test:*",
-    "test:ember": "ember test",
-    "test:ember-compatibility": "ember try:each",
-    "prepack": "ember ts:precompile",
-    "postpack": "ember ts:clean"
+  "exports": {
+    ".": "./dist/browser/index.js",
+    "./esm": "./dist/browser/esm/index.js",
+    "./ember-cli": {
+      "require": "./src/build/ember-cli.cjs"
+    },
+    "./addon-main.js": "./addon-main.cjs"
   },
+  "files": [
+    "src",
+    "dist",
+    "addon-main.cjs"
+  ],
   "dependencies": {
-    "@babel/standalone": "^7.18.13",
-    "@embroider/macros": "^1.8.3",
-    "@glimmer/component": "^1.1.2",
-    "@glimmer/tracking": "^1.1.2",
-    "babel-plugin-htmlbars-inline-precompile": "^5.3.1",
+    "@babel/helper-plugin-utils": "^7.21.5",
+    "@babel/standalone": "^7.21.8",
+    "@embroider/addon-shim": "^1.8.4",
+    "@embroider/macros": "^1.10.0",
+    "babel-import-util": "^1.3.0",
+    "babel-plugin-ember-template-compilation": "^2.0.2",
     "broccoli-file-creator": "^2.1.1",
-    "broccoli-funnel": "^3.0.8",
-    "broccoli-merge-trees": "^4.2.0",
+    "change-case": "^4.1.2",
     "common-tags": "^1.8.2",
-    "ember-auto-import": "2.4.2",
-    "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.1.0",
-    "ember-cli-typescript": "^5.1.0",
-    "ember-compatibility-helpers": "^1.2.6",
-    "path-browserify": "^1.0.1",
-    "uuid": "8.3.2"
+    "line-column": "^1.0.2",
+    "magic-string": "^0.30.0",
+    "parse-static-imports": "^1.1.0",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^15.0.0",
-    "@commitlint/config-conventional": "^15.0.0",
-    "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^2.8.1",
+    "@babel/core": "^7.21.8",
+    "@babel/types": "^7.21.5",
+    "@ember/test-helpers": "^2.9.3",
     "@ember/test-waiters": "^3.0.2",
-    "@embroider/test-setup": "^1.8.3",
-    "@glimmer/interfaces": "^0.84.2",
-    "@glimmer/reference": "^0.84.2",
-    "@glimmer/util": "^0.84.2",
-    "@nullvoxpopuli/eslint-configs": "^2.2.49",
-    "@semantic-release/changelog": "^6.0.1",
-    "@semantic-release/git": "^10.0.1",
-    "@types/babel__core": "^7.1.19",
+    "@embroider/addon-dev": "^3.0.0",
+    "@glimmer/compiler": "^0.84.3",
+    "@glimmer/component": "^1.1.2",
+    "@glimmer/interfaces": "^0.84.3",
+    "@glimmer/reference": "^0.84.3",
+    "@glimmer/syntax": "^0.84.3",
+    "@glimmer/tracking": "^1.1.2",
+    "@glimmer/util": "^0.84.3",
+    "@glint/core": "^1.0.2",
+    "@glint/environment-ember-loose": "^1.0.2",
+    "@glint/environment-ember-template-imports": "^1.0.2",
+    "@glint/template": "^1.0.2",
+    "@nullvoxpopuli/eslint-configs": "^3.1.3",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@tsconfig/ember": "^2.0.0",
+    "@types/babel__core": "^7.20.0",
     "@types/babel__standalone": "^7.1.4",
-    "@types/ember-qunit": "^5.0.0",
-    "@types/ember-resolver": "^5.0.11",
-    "@types/ember__application": "^4.0.0",
-    "@types/ember__array": "^4.0.1",
-    "@types/ember__component": "^4.0.8",
-    "@types/ember__controller": "^4.0.0",
-    "@types/ember__debug": "^4.0.1",
-    "@types/ember__destroyable": "^4.0.0",
-    "@types/ember__engine": "^4.0.0",
-    "@types/ember__error": "^4.0.0",
-    "@types/ember__object": "^4.0.2",
-    "@types/ember__polyfills": "^4.0.0",
-    "@types/ember__routing": "^4.0.7",
-    "@types/ember__runloop": "^4.0.1",
-    "@types/ember__service": "^4.0.0",
-    "@types/ember__string": "^3.16.3",
-    "@types/ember__template": "^4.0.0",
-    "@types/ember__test": "^4.0.0",
-    "@types/ember__test-helpers": "^2.6.1",
-    "@types/ember__utils": "^4.0.0",
-    "@types/htmlbars-inline-precompile": "^3.0.0",
-    "@types/qunit": "^2.11.3",
-    "@types/rsvp": "^4.0.4",
-    "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.33.1",
-    "@typescript-eslint/parser": "^5.33.1",
-    "babel-eslint": "^10.1.0",
-    "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~4.6.0",
-    "ember-cli-dependency-checker": "^3.3.1",
-    "ember-cli-inject-live-reload": "^2.1.0",
-    "ember-cli-sri": "^2.1.1",
-    "ember-cli-terser": "^4.0.2",
-    "ember-could-get-used-to-this": "^1.0.1",
-    "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-export-application-global": "^2.0.1",
-    "ember-load-initializers": "^2.1.2",
-    "ember-page-title": "^7.0.0",
-    "ember-qunit": "^5.1.5",
-    "ember-resolver": "^8.0.3",
-    "ember-source": "~4.6.0",
-    "ember-source-channel-url": "^3.0.0",
-    "ember-template-lint": "^4.12.0",
-    "ember-try": "^2.0.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-decorator-position": "^4.0.1",
-    "eslint-plugin-ember": "^10.6.1",
-    "eslint-plugin-import": "^2.26.0",
+    "@types/babel__traverse": "^7.18.5",
+    "@types/uuid": "^9.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
+    "@typescript-eslint/parser": "^5.59.2",
+    "concurrently": "^8.0.1",
+    "ember-source": "^4.12.0",
+    "ember-template-imports": "^3.4.2",
+    "ember-template-lint": "^5.7.3",
+    "eslint": "^8.40.0",
+    "eslint-plugin-ember": "^11.5.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-qunit": "^7.3.1",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "loader.js": "^4.7.0",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
-    "qunit": "^2.19.1",
-    "qunit-dom": "^2.0.0",
-    "semantic-release": "^19.0.3",
-    "typescript": "^4.7.4",
-    "webpack": "^5.74.0"
-  },
-  "release": {
-    "branches": [
-      "main",
-      "master"
-    ],
-    "plugins": [
-      "@semantic-release/commit-analyzer",
-      "@semantic-release/release-notes-generator",
-      "@semantic-release/changelog",
-      "@semantic-release/npm",
-      "@semantic-release/github",
-      "@semantic-release/git"
-    ]
+    "prettier": "^2.8.8",
+    "prettier-plugin-ember-template-tag": "^0.3.2",
+    "rollup": "^3.21.6",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-glimmer-template-tag": "^0.4.1",
+    "rollup-plugin-ts": "^3.2.0",
+    "typescript": "^5.0.4",
+    "@nullvoxpopuli/limber-untyped": "0.0.0"
   },
   "volta": {
-    "node": "16.17.0",
-    "yarn": "1.22.19"
-  },
-  "engines": {
-    "node": "12.* || >= 14.*"
+    "extends": "../../../package.json"
   },
   "ember": {
     "edition": "octane"
   },
   "ember-addon": {
-    "configPath": "tests/dummy/config"
+    "version": 2,
+    "type": "addon",
+    "main": "addon-main.cjs",
+    "app-js": {}
+  },
+  "peerDependencies": {
+    "@glimmer/compiler": "^0.84.3",
+    "@glimmer/component": "^1.1.2",
+    "@glimmer/syntax": "^0.84.3",
+    "ember-source": "^4.12.0"
+  },
+  "scripts": {
+    "build": "rollup --config",
+    "lint:types": "glint",
+    "lint:fix": "pnpm -w exec lint fix",
+    "start": "rollup --config --watch",
+    "lint": "pnpm -w exec lint",
+    "lint:js": "pnpm -w exec lint js",
+    "lint:js:fix": "pnpm -w exec lint js:fix",
+    "lint:hbs": "pnpm -w exec lint hbs",
+    "lint:hbs:fix": "pnpm -w exec lint hbs:fix",
+    "lint:prettier:fix": "pnpm -w exec lint prettier:fix",
+    "lint:prettier": "pnpm -w exec lint prettier"
   }
-}
+}

package/{addon → src/browser}/cjs/eval.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { modules } from '../known-modules';
 
+import type { ExtraModules } from '../types';
 import type Component from '@glimmer/component';
-import type { ExtraModules } from 'ember-repl/types';
 
 export function evalSnippet(
   compiled: string,
@@ -13,16 +13,20 @@ export function evalSnippet(
 } {
   const exports = {};
 
-  // https://github.com/glimmerjs/glimmer-experimental/blob/master/packages/examples/playground/src/utils/eval-snippet.ts
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
   function require(moduleName: keyof typeof modules): unknown {
     let preConfigured = modules[moduleName] || extraModules[moduleName];
 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     return preConfigured || window.require(moduleName);
   }
 
+  // https://github.com/glimmerjs/glimmer-experimental/blob/master/packages/examples/playground/src/utils/eval-snippet.ts
   eval(compiled);
 
-  return exports as { default: Component; services?: { [key: string]: unknown } };
+  return Object.assign(exports, { require }) as {
+    default: Component;
+    services?: { [key: string]: unknown };
+    require: unknown;
+  };
 }

package/src/browser/cjs/index.ts

@@ -0,0 +1,44 @@
+import { preprocess, transform } from '../gjs';
+import { nameFor } from '../utils';
+import { evalSnippet } from './eval';
+
+import type { CompileResult, ExtraModules } from '../types';
+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`);
+    }
+
+    component = evalSnippet(compiled, extraModules).default as unknown as ComponentLike;
+  } catch (e) {
+    error = e as Error | undefined;
+  }
+
+  return { name, component, error };
+}
+
+async function compileGJS({ code: input, name }: Info) {
+  let preprocessed = preprocess(input, name);
+  let result = await transform(preprocessed, name);
+
+  if (!result) {
+    return;
+  }
+
+  let { code } = result;
+
+  return code;
+}

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;
+}