ember-repl 1.8.10 → 2.0.0

package/.github/workflows/ci.yml

@@ -21,8 +21,8 @@ jobs:
     strategy:
       matrix:
         node:
-          - "12"
           - "14"
+          - "16"
     steps:
       - uses: actions/checkout@v2
       - uses: volta-cli/action@v1
@@ -42,8 +42,8 @@ jobs:
     strategy:
       matrix:
         node:
-          - "12"
           - "14"
+          - "16"
 
     steps:
       - uses: actions/checkout@v2
@@ -68,6 +68,7 @@ jobs:
       matrix:
         ember-try-scenario:
           - ember-3.27
+          - ember-3.28
           - ember-release
           - ember-beta
           - ember-canary
@@ -77,7 +78,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: volta-cli/action@v1
         with:
-          node-version: 12.x
+          node-version: 14.x
       - name: install dependencies
         run: yarn install --frozen-lockfile
       - name: test

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [2.0.0](https://github.com/NullVoxPopuli/ember-repl/compare/v1.8.10...v2.0.0) (2021-12-04)
+
+
+### chore
+
+* **internal:** ci updates, drop node 12 ([77637a9](https://github.com/NullVoxPopuli/ember-repl/commit/77637a94c5d30809ceeb4895a21434dfb3bd4d3a))
+
+
+### BREAKING CHANGES
+
+* **internal:** drop support for node 12
+Add support for Node 16, Ember 3.28
+
 ## [1.8.10](https://github.com/NullVoxPopuli/ember-repl/compare/v1.8.9...v1.8.10) (2021-11-19)
 
 

package/addon/cjs/eval.ts

@@ -1,48 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-/**
- * We need to import and hang on to these references so that they
- * don't get optimized away during deploy
- */
-import _GlimmerComponent from '@glimmer/component';
-import * as _tracking from '@glimmer/tracking';
-import * as _application from '@ember/application';
-import * as _array from '@ember/array';
-import * as _EmberComponent from '@ember/component';
-import _TO from '@ember/component/template-only';
-import * as _debug from '@ember/debug';
-import * as _destroyable from '@ember/destroyable';
-import * as _helpers from '@ember/helper';
-import * as _modifier from '@ember/modifier';
-import * as _object from '@ember/object';
-import * as _runloop from '@ember/runloop';
-import * as _service from '@ember/service';
-import * as _string from '@ember/string';
-import { createTemplateFactory } from '@ember/template-factory';
-import * as _utils from '@ember/utils';
+import { modules } from '../known-modules';
 
 import type Component from '@glimmer/component';
-
-const modules = {
-  '@ember/application': _application,
-  '@ember/array': _array,
-  '@ember/component': _EmberComponent,
-  '@ember/component/template-only': _TO,
-  '@ember/debug': _debug,
-  '@ember/destroyable': _destroyable,
-  '@ember/helper': _helpers,
-  '@ember/modifier': _modifier,
-  '@ember/object': _object,
-  '@ember/runloop': _runloop,
-  '@ember/service': _service,
-  '@ember/string': _string,
-  '@ember/template-factory': { createTemplateFactory },
-  '@ember/utils': _utils,
-
-  '@glimmer/component': _GlimmerComponent,
-  '@glimmer/tracking': _tracking,
-};
-
-export type ExtraModules = Record<string, unknown>;
+import type { ExtraModules } from 'ember-repl/types';
 
 export function evalSnippet(
   compiled: string,

package/addon/cjs/index.ts

@@ -6,31 +6,13 @@ import { precompile as precompileTemplate } from 'ember-template-compiler';
 import { nameFor } from '../utils';
 import { evalSnippet } from './eval';
 
-import type { ExtraModules } from './eval';
-import type { Babel } from './types';
+import type { Babel, ExtraModules } from '../types';
 
 export interface Info {
   code: string;
   name: string;
 }
 
-/**
- * @public
- * Transpiles GlimmerJS (*.gjs) formatted text into and evaluates as a JS Module.
- * The returned component can be invoked explicitly in the consuming project.
- *
- * SEE: README for example usage
- *
- * @param {string} code: the code to be compiled
- * @param {Object} extraModules: map of import paths to modules. This isn't needed
- *  for classic ember projects, but for strict static ember projects, extraModules
- *  will need to be pasesd if compileJS is intended to be used in a styleguide or
- *  if there are additional modules that could be imported in the passed `code`.
- *
- *  Later on, imports that are not present by default (ember/glimmer) or that
- *  are not provided by extraModules will be searched on npm to see if a package
- *  needs to be downloaded before running the `code` / invoking the component
- */
 export async function compileJS(code: string, extraModules?: ExtraModules) {
   let name = nameFor(code);
   let component: undefined | unknown;

package/addon/esm/index.ts

@@ -0,0 +1,131 @@
+import { getTemplateLocals } from '@glimmer/syntax';
+
+import HTMLBars, { preprocessEmbeddedTemplates } from 'babel-plugin-htmlbars-inline-precompile';
+import { modules } from 'ember-repl/known-modules';
+import { precompile as precompileTemplate } from 'ember-template-compiler';
+
+import { nameFor } from '../utils';
+
+import type { ExtraModules } from '../types';
+import type Component from '@glimmer/component';
+
+export interface Info {
+  code: string;
+  name: string;
+}
+
+export async function compileJS(code: string, extraModules?: ExtraModules) {
+  let name = nameFor(code);
+  let component: undefined | unknown;
+  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);
+  } catch (e) {
+    error = e;
+  }
+
+  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 babel = await import('@babel/standalone');
+
+  let preprocessed = preprocessEmbeddedTemplates(input, {
+    getTemplateLocals,
+    relativePath: `${name}.js`,
+    includeSourceMaps: false,
+    includeTemplateTokens: true,
+    templateTag: 'template',
+    templateTagReplacement: 'GLIMMER_TEMPLATE',
+    getTemplateLocalsExportPath: 'getTemplateLocals',
+  });
+
+  let result = babel.transform(preprocessed.output, {
+    filename: `${name}.js`,
+    plugins: [
+      [
+        HTMLBars,
+        {
+          precompile: precompileTemplate,
+          // this needs to be true until Ember 3.27+
+          ensureModuleApiPolyfill: false,
+          modules: {
+            'ember-template-imports': {
+              export: 'hbs',
+              useTemplateLiteralProposalSemantics: 1,
+            },
+
+            'TEMPLATE-TAG-MODULE': {
+              export: 'GLIMMER_TEMPLATE',
+              debugName: '<template>',
+              useTemplateTagProposalSemantics: 1,
+            },
+          },
+        },
+      ],
+      [babel.availablePlugins['proposal-decorators'], { legacy: true }],
+      [babel.availablePlugins['proposal-class-properties']],
+    ],
+    presets: [
+      [
+        babel.availablePresets['env'],
+        {
+          // false -- keeps ES Modules...
+          // it means "compile modules to this: ..."
+          modules: false,
+          targets: { esmodules: true },
+          loose: true,
+          forceAllTransforms: false,
+        },
+      ],
+    ],
+  });
+
+  if (!result) {
+    return;
+  }
+
+  let { code } = result;
+
+  return code;
+}

package/addon/index.ts

@@ -1,5 +1,6 @@
-export { compileJS } from './cjs';
 export { compileHBS } from './hbs';
+export { compileJS } from './js';
+export { modules as frameworkModules } from './known-modules';
 export { invocationName, invocationOf, nameFor } from './utils';
 
 // Public Types

package/addon/js.ts

@@ -0,0 +1,38 @@
+import { compileJS as compileAMD } from './cjs';
+import { compileJS as compileESM } from './esm';
+
+import type { ExtraModules, Options } from './types';
+
+/**
+ * @public
+ * Transpiles GlimmerJS (*.gjs) formatted text into and evaluates as a JS Module.
+ * The returned component can be invoked explicitly in the consuming project.
+ *
+ * SEE: README for example usage
+ *
+ * @param {string} code: the code to be compiled
+ * @param {Object} extraModules: map of import paths to modules. This isn't needed
+ *  for classic ember projects, but for strict static ember projects, extraModules
+ *  will need to be pasesd if compileJS is intended to be used in a styleguide or
+ *  if there are additional modules that could be imported in the passed `code`.
+ *
+ *  Later on, imports that are not present by default (ember/glimmer) or that
+ *  are not provided by extraModules will be searched on npm to see if a package
+ *  needs to be downloaded before running the `code` / invoking the component
+ */
+export function compileJS(code: string, extraModules?: ExtraModules, options?: Options) {
+  if (options?.skypack) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // if (!(window as any).webpackChunkDummy) {
+    //   return {
+    //     component: undefined,
+    //     name: undefined,
+    //     error: `Your environment is using AMD utilities -- using native ESM is not allowed unless the environment is also ESM`,
+    //   };
+    // }
+
+    return compileESM(code, extraModules);
+  }
+
+  return compileAMD(code, extraModules);
+}

package/addon/known-modules.ts

@@ -0,0 +1,40 @@
+/**
+ * We need to import and hang on to these references so that they
+ * don't get optimized away during deploy
+ */
+import _GlimmerComponent from '@glimmer/component';
+import * as _tracking from '@glimmer/tracking';
+import * as _application from '@ember/application';
+import * as _array from '@ember/array';
+import * as _EmberComponent from '@ember/component';
+import _TO from '@ember/component/template-only';
+import * as _debug from '@ember/debug';
+import * as _destroyable from '@ember/destroyable';
+import * as _helpers from '@ember/helper';
+import * as _modifier from '@ember/modifier';
+import * as _object from '@ember/object';
+import * as _runloop from '@ember/runloop';
+import * as _service from '@ember/service';
+import * as _string from '@ember/string';
+import { createTemplateFactory } from '@ember/template-factory';
+import * as _utils from '@ember/utils';
+
+export const modules = {
+  '@ember/application': _application,
+  '@ember/array': _array,
+  '@ember/component': _EmberComponent,
+  '@ember/component/template-only': _TO,
+  '@ember/debug': _debug,
+  '@ember/destroyable': _destroyable,
+  '@ember/helper': _helpers,
+  '@ember/modifier': _modifier,
+  '@ember/object': _object,
+  '@ember/runloop': _runloop,
+  '@ember/service': _service,
+  '@ember/string': _string,
+  '@ember/template-factory': { createTemplateFactory },
+  '@ember/utils': _utils,
+
+  '@glimmer/component': _GlimmerComponent,
+  '@glimmer/tracking': _tracking,
+};

package/addon/types.ts

@@ -1,5 +1,19 @@
+import type { availablePlugins, availablePresets, transform } from '@babel/standalone';
+
 export interface CompileResult {
   component?: unknown;
   error?: Error;
   name: string;
 }
+
+export interface Babel {
+  availablePlugins: typeof availablePlugins;
+  availablePresets: typeof availablePresets;
+  transform: typeof transform;
+}
+
+export type Options = {
+  skypack?: boolean;
+};
+
+export type ExtraModules = Record<string, unknown>;

package/cjs/eval.d.ts

@@ -1,5 +1,5 @@
 import type Component from '@glimmer/component';
-export declare type ExtraModules = Record<string, unknown>;
+import type { ExtraModules } from 'ember-repl/types';
 export declare function evalSnippet(compiled: string, extraModules?: ExtraModules): {
     default: Component;
     services?: {

package/cjs/index.d.ts

@@ -1,25 +1,8 @@
-import type { ExtraModules } from './eval';
+import type { ExtraModules } from '../types';
 export interface Info {
     code: string;
     name: string;
 }
-/**
- * @public
- * Transpiles GlimmerJS (*.gjs) formatted text into and evaluates as a JS Module.
- * The returned component can be invoked explicitly in the consuming project.
- *
- * SEE: README for example usage
- *
- * @param {string} code: the code to be compiled
- * @param {Object} extraModules: map of import paths to modules. This isn't needed
- *  for classic ember projects, but for strict static ember projects, extraModules
- *  will need to be pasesd if compileJS is intended to be used in a styleguide or
- *  if there are additional modules that could be imported in the passed `code`.
- *
- *  Later on, imports that are not present by default (ember/glimmer) or that
- *  are not provided by extraModules will be searched on npm to see if a package
- *  needs to be downloaded before running the `code` / invoking the component
- */
 export declare function compileJS(code: string, extraModules?: ExtraModules): Promise<{
     name: string;
     component: unknown;

package/esm/index.d.ts

@@ -0,0 +1,11 @@
+import type { ExtraModules } from '../types';
+export interface Info {
+    code: string;
+    name: string;
+}
+export declare function compileJS(code: string, extraModules?: ExtraModules): Promise<{
+    name: string;
+    component: unknown;
+    error: Error | undefined;
+}>;
+export declare function proxyToSkypack(code: string, extraModules?: ExtraModules): string;

package/index.d.ts

@@ -1,4 +1,5 @@
-export { compileJS } from './cjs';
 export { compileHBS } from './hbs';
+export { compileJS } from './js';
+export { modules as frameworkModules } from './known-modules';
 export { invocationName, invocationOf, nameFor } from './utils';
 export type { CompileResult } from './types';

package/index.js

@@ -1,6 +1,9 @@
 'use strict';
 
+const path = require('path');
 const { stripIndents } = require('common-tags');
+const Funnel = require('broccoli-funnel');
+const mergeTrees = require('broccoli-merge-trees');
 
 module.exports = {
   name: require('./package').name,
@@ -38,6 +41,34 @@ module.exports = {
     //  - @glimmer/syntax
     app.import('vendor/ember/ember-template-compiler.js');
   },
+
+  /**
+   * This technique can't be used because it duplicates the modules
+   * in traditional builds. Additionally, because this way
+   * doesn't utilize a service worker, we can't also point all the
+   * imports within these files to the other files we've copied.
+   */
+  __treeForPublic() {
+    const publicTree = this._super.treeForPublic.apply(this, arguments);
+
+    const app = this._findHost(this);
+    const root = app.project.root;
+    const dist = path.join(root, 'node_modules/ember-source/dist/packages');
+    const trees = [];
+
+    if (publicTree) {
+      trees.push(publicTree);
+    }
+
+    let packages = new Funnel(dist, {
+      annotation: 'ember-repl adding ember ESM from ember-source/dist/packages',
+      destDir: '/',
+    });
+
+    trees.push(packages);
+
+    return mergeTrees(trees);
+  },
 };
 
 /**

package/js.d.ts

@@ -0,0 +1,23 @@
+import type { ExtraModules, Options } from './types';
+/**
+ * @public
+ * Transpiles GlimmerJS (*.gjs) formatted text into and evaluates as a JS Module.
+ * The returned component can be invoked explicitly in the consuming project.
+ *
+ * SEE: README for example usage
+ *
+ * @param {string} code: the code to be compiled
+ * @param {Object} extraModules: map of import paths to modules. This isn't needed
+ *  for classic ember projects, but for strict static ember projects, extraModules
+ *  will need to be pasesd if compileJS is intended to be used in a styleguide or
+ *  if there are additional modules that could be imported in the passed `code`.
+ *
+ *  Later on, imports that are not present by default (ember/glimmer) or that
+ *  are not provided by extraModules will be searched on npm to see if a package
+ *  needs to be downloaded before running the `code` / invoking the component
+ */
+export declare function compileJS(code: string, extraModules?: ExtraModules, options?: Options): Promise<{
+    name: string;
+    component: unknown;
+    error: Error | undefined;
+}>;

package/known-modules.d.ts

@@ -0,0 +1,37 @@
+/**
+ * We need to import and hang on to these references so that they
+ * don't get optimized away during deploy
+ */
+import _GlimmerComponent from '@glimmer/component';
+import * as _tracking from '@glimmer/tracking';
+import * as _application from '@ember/application';
+import * as _array from '@ember/array';
+import * as _EmberComponent from '@ember/component';
+import _TO from '@ember/component/template-only';
+import * as _debug from '@ember/debug';
+import * as _destroyable from '@ember/destroyable';
+import * as _object from '@ember/object';
+import * as _runloop from '@ember/runloop';
+import * as _service from '@ember/service';
+import * as _string from '@ember/string';
+import * as _utils from '@ember/utils';
+export declare const modules: {
+    '@ember/application': typeof _application;
+    '@ember/array': typeof _array;
+    '@ember/component': typeof _EmberComponent;
+    '@ember/component/template-only': typeof _TO;
+    '@ember/debug': typeof _debug;
+    '@ember/destroyable': typeof _destroyable;
+    '@ember/helper': any;
+    '@ember/modifier': any;
+    '@ember/object': typeof _object;
+    '@ember/runloop': typeof _runloop;
+    '@ember/service': typeof _service;
+    '@ember/string': typeof _string;
+    '@ember/template-factory': {
+        createTemplateFactory: any;
+    };
+    '@ember/utils': typeof _utils;
+    '@glimmer/component': typeof _GlimmerComponent;
+    '@glimmer/tracking': typeof _tracking;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-repl",
-  "version": "1.8.10",
+  "version": "2.0.0",
   "description": "Addon for enabling REPL and Playground creation with Ember/Glimmer",
   "keywords": [
     "ember-addon"
@@ -34,6 +34,8 @@
     "@glimmer/tracking": "^1.0.4",
     "babel-plugin-htmlbars-inline-precompile": "^5.3.1",
     "broccoli-file-creator": "^2.1.1",
+    "broccoli-funnel": "^3.0.8",
+    "broccoli-merge-trees": "^4.2.0",
     "common-tags": "^1.8.2",
     "ember-auto-import": "2.2.4",
     "ember-cli-babel": "^7.26.6",
@@ -44,8 +46,8 @@
     "uuid": "8.3.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "^13.2.1",
-    "@commitlint/config-conventional": "^13.2.0",
+    "@commitlint/cli": "^15.0.0",
+    "@commitlint/config-conventional": "^15.0.0",
     "@ember/optional-features": "^2.0.0",
     "@ember/test-helpers": "^2.6.0",
     "@ember/test-waiters": "^3.0.0",
@@ -53,12 +55,12 @@
     "@glimmer/interfaces": "^0.83.1",
     "@glimmer/reference": "^0.83.1",
     "@glimmer/util": "^0.83.1",
-    "@nullvoxpopuli/eslint-configs": "^2.1.5",
+    "@nullvoxpopuli/eslint-configs": "^2.1.9",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.1",
     "@types/babel__core": "^7.1.16",
     "@types/babel__standalone": "^7.1.3",
-    "@types/ember-qunit": "^3.4.14",
+    "@types/ember-qunit": "^3.4.15",
     "@types/ember-resolver": "^5.0.10",
     "@types/ember__application": "^3.16.3",
     "@types/ember__array": "^3.16.4",
@@ -75,14 +77,14 @@
     "@types/ember__string": "^3.16.3",
     "@types/ember__template": "^3.16.1",
     "@types/ember__test": "^3.16.1",
-    "@types/ember__test-helpers": "^2.0.2",
+    "@types/ember__test-helpers": "^2.6.0",
     "@types/ember__utils": "^3.16.2",
     "@types/htmlbars-inline-precompile": "^1.0.1",
     "@types/qunit": "^2.11.2",
     "@types/rsvp": "^4.0.4",
-    "@types/uuid": "^8.3.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@types/uuid": "^8.3.3",
+    "@typescript-eslint/eslint-plugin": "^5.5.0",
+    "@typescript-eslint/parser": "^5.5.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-cli": "~3.28.4",
@@ -97,27 +99,27 @@
     "ember-page-title": "^7.0.0",
     "ember-qunit": "^5.1.5",
     "ember-resolver": "^8.0.3",
-    "ember-source": "~4.0.0",
+    "ember-source": "~4.0.1",
     "ember-source-channel-url": "^3.0.0",
-    "ember-template-lint": "^3.13.0",
-    "ember-try": "^1.4.0",
+    "ember-template-lint": "^3.14.0",
+    "ember-try": "^2.0.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-decorator-position": "^2.2.29",
-    "eslint-plugin-ember": "^10.5.7",
+    "eslint-plugin-decorator-position": "^4.0.1",
+    "eslint-plugin-ember": "^10.5.8",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-qunit": "^6.2.0",
+    "eslint-plugin-qunit": "^7.1.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.4.1",
+    "prettier": "^2.5.1",
     "qunit": "^2.17.2",
     "qunit-dom": "^2.0.0",
     "semantic-release": "^17.4.7",
     "typescript": "^4.5.2",
-    "webpack": "^5.64.1"
+    "webpack": "^5.64.4"
   },
   "release": {
     "branches": [
@@ -134,11 +136,11 @@
     ]
   },
   "volta": {
-    "node": "16.13.0",
+    "node": "16.13.1",
     "yarn": "1.22.17"
   },
   "engines": {
-    "node": "10.* || >= 12.22.1"
+    "node": "12.* || >= 14.*"
   },
   "ember": {
     "edition": "octane"

package/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2020",
+    "target": "es2021",
     "allowJs": true,
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,

package/types.d.ts

@@ -1,5 +1,15 @@
+import type { availablePlugins, availablePresets, transform } from '@babel/standalone';
 export interface CompileResult {
     component?: unknown;
     error?: Error;
     name: string;
 }
+export interface Babel {
+    availablePlugins: typeof availablePlugins;
+    availablePresets: typeof availablePresets;
+    transform: typeof transform;
+}
+export declare type Options = {
+    skypack?: boolean;
+};
+export declare type ExtraModules = Record<string, unknown>;

package/addon/cjs/types.ts

@@ -1,7 +0,0 @@
-import type { availablePlugins, availablePresets, transform } from '@babel/standalone';
-
-export interface Babel {
-  availablePlugins: typeof availablePlugins;
-  availablePresets: typeof availablePresets;
-  transform: typeof transform;
-}

package/cjs/types.d.ts

@@ -1,6 +0,0 @@
-import type { availablePlugins, availablePresets, transform } from '@babel/standalone';
-export interface Babel {
-    availablePlugins: typeof availablePlugins;
-    availablePresets: typeof availablePresets;
-    transform: typeof transform;
-}