Remove ember-prism, use primsjs in docs (#940)

* Remove `ember-prism`

* Fix tests

* Fix tests

Author: mkszepp

docs/app/app.ts

@@ -2,6 +2,20 @@ import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from 'docs/config/environment';
+// @ts-expect-error no types shipped from prismjs
+import Prism from 'prismjs';
+import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-handlebars';
+import 'prismjs/components/prism-markup-templating';
+// @ts-expect-error no types shipped from prismjs-glimmer
+import { setup } from 'prismjs-glimmer';
+
+import 'prismjs/themes/prism.css';
+
+setup(Prism);
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;

docs/app/components/code-block.hbs

@@ -0,0 +1,12 @@
+<pre
+  class="{{this.languageClass}} {{if @showLineNumbers "line-numbers"}}"
+  data-start={{@start}}
+>
+  {{~! ~}}
+  <CodeInline
+    ...attributes
+    @code={{@code}}
+    @language={{@language}}
+  />
+  {{~! ~}}
+</pre>

docs/app/components/code-block.ts

@@ -0,0 +1,27 @@
+import Component from '@glimmer/component';
+
+interface CodeBlockSignature {
+  Element: HTMLElement;
+  Args: {
+    code: string;
+    language?: string;
+    showLineNumbers?: boolean;
+    start?: string;
+  };
+}
+
+export default class CodeBlock extends Component<CodeBlockSignature> {
+  get language() {
+    return this.args.language ?? 'markup';
+  }
+
+  get languageClass() {
+    return `language-${this.language}`;
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    CodeBlock: typeof CodeBlock;
+  }
+}

docs/app/templates/components/code-example.hbs renamed to docs/app/components/code-example.hbs

@@ -18,12 +18,12 @@
   </nav>
   {{#if (and @hbs (eq this.activeTab 'hbs'))}}
     {{#let (get-code-snippet @hbs) as |snippet|}}
-      <CodeBlock @language="markup" @code={{snippet.source}} />
+      <CodeBlock @language="handlebars" @code={{snippet.source}} />
     {{/let}}
   {{/if}}
   {{#if @hbs2}}
     {{#let (get-code-snippet @hbs2) as |snippet|}}
-      <CodeBlock @language="markup" @code={{snippet.source}} />
+      <CodeBlock @language="handlebars" @code={{snippet.source}} />
     {{/let}}
   {{/if}}
   {{#if (and @js (eq this.activeTab 'js'))}}

docs/app/components/code-inline.hbs

@@ -0,0 +1,7 @@
+<code
+  ...attributes
+  class="{{this.languageClass}}"
+  {{this.setPrismCode}}
+>
+  {{~! ~}}{{this.prismCode}}{{~! ~}}
+</code>

docs/app/components/code-inline.ts

@@ -0,0 +1,67 @@
+import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
+import { htmlSafe, type SafeString } from '@ember/template';
+import { tracked } from '@glimmer/tracking';
+import { assert } from '@ember/debug';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const Prism: any;
+
+interface CodeInlineSignature {
+  Element: HTMLElement;
+  Args: {
+    code: string;
+    language?: string;
+  };
+}
+
+export default class CodeInline extends Component<CodeInlineSignature> {
+  @tracked prismCode: string | SafeString = '';
+
+  get code() {
+    const code = this.args.code;
+
+    assert(
+      "ember-prism's <CodeBlock/> and <CodeInline/> components require a `code` parameter to be passed in.",
+      code !== undefined,
+    );
+    if (Prism?.plugins?.NormalizeWhitespace) {
+      return Prism.plugins.NormalizeWhitespace.normalize(code);
+    }
+
+    return code;
+  }
+
+  get language() {
+    return this.args.language ?? 'markup';
+  }
+
+  get languageClass() {
+    return `language-${this.language}`;
+  }
+
+  setPrismCode = modifier((element: Element) => {
+    const code = this.code;
+    const language = this.language;
+    const grammar = Prism.languages[language];
+
+    if (code && language && grammar) {
+      this.prismCode = htmlSafe(Prism.highlight(code, grammar, language));
+    } else {
+      this.prismCode = '';
+    }
+
+    // Force plugin initialization, required for Prism.highlight usage.
+    // See https://github.com/PrismJS/prism/issues/1234
+    Prism.hooks.run('complete', {
+      code,
+      element,
+    });
+  });
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    CodeInline: typeof CodeInline;
+  }
+}

docs/ember-cli-build.js

@@ -7,9 +7,6 @@ module.exports = function (defaults) {
   let app = new EmberApp(defaults, {
     'ember-cli-babel': { enableTypeScriptTransform: true },
     snippetPaths: ['app/components/snippets', 'app/templates/snippets'],
-    'ember-prism': {
-      components: ['scss', 'javascript', 'handlebars', 'markup-templating'], //needs to be an array, or undefined.
-    },
     prember: {
       urls: crawl,
     },

docs/package.json

@@ -93,7 +93,6 @@
     "ember-load-initializers": "^2.1.2",
     "ember-modifier": "^4.2.0",
     "ember-page-title": "^8.2.3",
-    "ember-prism": "^1.0.0",
     "ember-qunit": "^8.1.0",
     "ember-resolver": "^12.0.1",
     "ember-source": "~5.11.0",
@@ -109,6 +108,8 @@
     "loader.js": "^4.7.0",
     "prember": "~2.1.0",
     "prember-crawler": "^1.0.0",
+    "prismjs": "^1.29.0",
+    "prismjs-glimmer": "^1.1.1",
     "prettier": "^3.3.3",
     "prettier-plugin-ember-template-tag": "^2.0.2",
     "qunit": "^2.22.0",

docs/tests/integration/components/code-block-test.ts

@@ -0,0 +1,19 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'docs/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | code-block', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(
+      hbs`<CodeBlock @language="js" @code="console.log('hello');" />`,
+    );
+
+    assert.dom().hasText("console.log('hello');");
+  });
+});

docs/tests/integration/components/code-inline-test.ts

@@ -0,0 +1,19 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'docs/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | code-inline', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(
+      hbs`<CodeInline @language="js" @code="console.log('hello');" />`,
+    );
+
+    assert.dom().hasText("console.log('hello');");
+  });
+});