Merge pull request #919 from ember-learn/merge-main

Merge main

app/components/class-field-description.hbs

@@ -54,14 +54,14 @@
       <div class='parameter'>
         <dt>{{param.name}}</dt>
         <dd class='parameter-type'>{{param.type}}</dd>
-        <dd>{{param.description}}</dd>
+        <dd><MarkdownToHtml @markdown={{param.description}} /></dd>
         {{#if param.props}}
           <dl class='parameters'>
             {{#each param.props as |prop|}}
               <div class='prop'>
                 <dt>{{prop.name}}</dt>
                 <dd class='parameter-type'>{{prop.type}}</dd>
-                <dd>{{prop.description}}</dd>
+                <dd><MarkdownToHtml @markdown={{prop.description}} /></dd>
               </div>
             {{/each}}
           </dl>
@@ -72,9 +72,9 @@
       <div class='return'>
         <dt>returns</dt>
         <dd class='return-type'>{{@field.return.type}}</dd>
-        <dd>{{@field.return.description}}</dd>
+        <dd><MarkdownToHtml @markdown={{@field.return.description}} /></dd>
       </div>
     {{/if}}
   </dl>
-  {{html-safe @field.description}}
+  <MarkdownToHtml @markdown={{@field.description}} />
 </section>

app/components/import-example.hbs

@@ -1,21 +1 @@
-<div class='highlight javascript'>
-  <div class='ribbon'></div>
-  {{#if (is-clipboard-supported)}}
-    <div class='import-copy'>
-      {{#if this.showClipboardSuccessIcon}}
-        {{svg-jar 'success' width='24px' height='24px'}}
-      {{else}}
-        <CopyButton @clipboardText={{concat 'import ' @item " from '" @package "';"}} @title='Copy to clipboard' @success={{this.showSuccess}}>
-          {{svg-jar 'copy' width='24px' height='24px'}}
-        </CopyButton>
-      {{/if}}
-    </div>
-  {{/if}}
-  <table class='CodeRay'>
-    <tbody>
-      <tr>
-        <td class='code'><pre><span class='wrapper'><span class='keyword'>import</span> {{@item}} <span class='keyword'>from</span> <span class='string'>'{{@package}}'</span>;</span></pre></td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<MarkdownToHtml @markdown={{this.markdown}} />

app/components/import-example.js

@@ -1,14 +1,10 @@
-import { action } from '@ember/object';
 import Component from '@glimmer/component';
-import { later } from '@ember/runloop';
-import { tracked } from '@glimmer/tracking';
 
 export default class ImportExample extends Component {
-  @tracked showClipboardSuccessIcon = false;
-
-  @action
-  showSuccess() {
-    this.showClipboardSuccessIcon = true;
-    later(this, () => (this.showClipboardSuccessIcon = false), 950);
+  get markdown() {
+    let md = `\`\`\`js
+import ${this.args.item} from '${this.args.package}';
+\`\`\``;
+    return md;
   }
 }

app/controllers/project-version/index.js

@@ -1,5 +1,5 @@
 import Controller from '@ember/controller';
-import { htmlSafe } from '@ember/string';
+import { htmlSafe } from '@ember/template';
 
 export default Controller.extend({
   oldPackageImportSyntax: htmlSafe(

app/helpers/html-safe.js

@@ -1,5 +1,5 @@
 import { helper } from '@ember/component/helper';
-import { htmlSafe as emberHtmlSafe } from '@ember/string';
+import { htmlSafe as emberHtmlSafe } from '@ember/template';
 
 export function htmlSafe([content]) {
   return emberHtmlSafe(content);

app/routes/project-version/modules/module.js

@@ -18,7 +18,7 @@ export default class ModuleRoute extends ClassRoute.extend(ScrollTracker) {
 
     // These modules should not have `ember-` tacked onto the front of them
     // when forming the ids and URLs.
-    let isNotEmber = klass.match(/@glimmer|rsvp|jquery/);
+    let isNotEmber = klass.match(/@warp-drive|@glimmer|rsvp|jquery/);
 
     if (!~klass.indexOf(project) && !isNotEmber) {
       klass = `${project}-${klass}`;

app/templates/project-version/classes/class.hbs

@@ -68,7 +68,7 @@
   {{#if (and (not (eq this.static 1)) this.hasImportExample)}}
     <ImportExample @item={{@model.name}} @package={{this.module}} />
   {{/if}}
-  <p class="description">{{html-safe @model.description}}</p>
+  <p class="description"><MarkdownToHtml @markdown={{@model.description}} /></p>
 
   {{#if (or @model.methods @model.properties @model.events)}}
     <div class="tabbed-layout">

app/templates/project-version/modules/module.hbs

@@ -19,7 +19,7 @@
     {{/if}}
   </p>
 
-  <p class="description">{{html-safe this.model.description}}</p>
+  <p class="description"><MarkdownToHtml @markdown={{this.model.description}} /></p>
 
   {{#if this.submodules}}
     <section>

config/fastboot.js

@@ -0,0 +1,9 @@
+module.exports = function () {
+  return {
+    buildSandboxGlobals(defaultGlobals) {
+      return Object.assign({}, defaultGlobals, {
+        atob: atob,
+      });
+    },
+  };
+};

ember-cli-build.js

@@ -44,5 +44,14 @@ module.exports = function (defaults) {
     destDir: '/assets/',
   });
 
-  return mergeTrees([app.toTree(), mappingsTree]);
+  const { Webpack } = require('@embroider/webpack');
+  const appTree = require('@embroider/compat').compatBuild(app, Webpack, {
+    staticAddonTrees: true,
+    staticAddonTestSupportTrees: true,
+    staticHelpers: true,
+    staticModifiers: true,
+    staticComponents: true,
+  });
+
+  return mergeTrees([require('prember').prerender(app, appTree), mappingsTree]);
 };

package.json

@@ -29,12 +29,15 @@
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
     "@ember/test-helpers": "^2.6.0",
+    "@embroider/compat": "^3.4.3",
+    "@embroider/core": "^3.4.3",
+    "@embroider/webpack": "^3.2.1",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
     "@glint/core": "^0.9.7",
     "@glint/environment-ember-loose": "^0.9.7",
-    "@percy/cli": "^1.14.0",
-    "@percy/ember": "^3.0.1",
+    "@percy/cli": "^1.28.7",
+    "@percy/ember": "^4.2.0",
     "@tsconfig/ember": "^1.0.1",
     "@types/ember": "^4.0.2",
     "@types/ember-qunit": "^5.0.2",
@@ -58,7 +61,7 @@
     "broccoli-merge-trees": "^2.0.0",
     "ember-a11y-testing": "^0.5.4",
     "ember-anchor": "^1.0.3",
-    "ember-auto-import": "^2.7.0",
+    "ember-auto-import": "^2.7.2",
     "ember-cli": "~3.28.6",
     "ember-cli-app-version": "^5.0.0",
     "ember-cli-autoprefixer": "^1.0.0",
@@ -75,25 +78,26 @@
     "ember-cli-htmlbars": "^6.1.1",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-meta-tags": "^7.0.0",
+    "ember-cli-showdown": "^9.0.1",
     "ember-cli-terser": "^4.0.2",
     "ember-composable-helpers": "^3.1.1",
     "ember-concurrency": "^2.3.7",
     "ember-data": "~3.28.6",
     "ember-data-fastboot": "https://github.com/cardstack/ember-data-fastboot#6e6fb8bbf0b405ae174160cc1e4833c5582f68cd",
     "ember-decorators": "^6.1.1",
-    "ember-exam": "^1.0.0",
     "ember-export-application-global": "^2.0.1",
     "ember-fetch": "^8.1.1",
     "ember-inflector": "^3.0.0",
     "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-metrics": "^1.5.2",
     "ember-page-title": "^6.2.2",
-    "ember-power-select": "^4.1.6",
+    "ember-power-select": "^6.0.1",
     "ember-qunit": "^5.1.5",
     "ember-resolver": "^8.0.3",
     "ember-rfc176-data": "^0.3.17",
     "ember-route-action-helper": "^2.0.5",
+    "ember-showdown-shiki": "^1.2.1",
     "ember-sinon": "^4.1.1",
     "ember-source": "~3.28.8",
     "ember-styleguide": "^8.3.0",
@@ -125,7 +129,7 @@
     "node-sass": "^9.0.0",
     "normalize.css": "^8.0.1",
     "npm-run-all": "^4.1.5",
-    "prember": "^2.0.0",
+    "prember": "^2.1.0",
     "prettier": "^2.5.1",
     "qunit": "^2.17.2",
     "qunit-dom": "^1.6.0",
@@ -135,7 +139,7 @@
     "spawndamnit": "2.0.0",
     "testem": "^3.10.0",
     "typescript": "^4.9.3",
-    "webpack": "^5.89.0"
+    "webpack": "^5.90.0"
   },
   "engines": {
     "node": "16.* || 18.* || 20.*",