From a0a5e3667d868714b0dd72f3f8598049346e4e9a Mon Sep 17 00:00:00 2001
From: Jared Galanis <jaredgalanis@users.noreply.github.com>
Date: Fri, 19 Jan 2024 09:18:02 -0500
Subject: [PATCH] Convert to Glimmer component

- this might fix a memory leak, but should be done in any case as a general upgrade
---
 .tool-versions                                |  1 +
 addon/components/markdown-to-html.hbs         |  1 +
 addon/components/markdown-to-html.js          | 56 +++++++------------
 .../templates/components/markdown-to-html.hbs |  1 -
 tests/dummy/app/templates/application.hbs     |  6 +-
 .../components/markdown-to-html-test.js       | 28 +++++-----
 6 files changed, 40 insertions(+), 53 deletions(-)
 create mode 100644 .tool-versions
 create mode 100644 addon/components/markdown-to-html.hbs
 delete mode 100644 addon/templates/components/markdown-to-html.hbs

diff --git a/.tool-versions b/.tool-versions
new file mode 100644
index 0000000..1e04d79
--- /dev/null
+++ b/.tool-versions
@@ -0,0 +1 @@
+nodejs 18.17.0
diff --git a/addon/components/markdown-to-html.hbs b/addon/components/markdown-to-html.hbs
new file mode 100644
index 0000000..2d1448c
--- /dev/null
+++ b/addon/components/markdown-to-html.hbs
@@ -0,0 +1 @@
+<div>{{this.html}}</div>
\ No newline at end of file
diff --git a/addon/components/markdown-to-html.js b/addon/components/markdown-to-html.js
index 188d8e7..444e3b8 100644
--- a/addon/components/markdown-to-html.js
+++ b/addon/components/markdown-to-html.js
@@ -1,44 +1,35 @@
-/* eslint-disable ember/no-classic-components, ember/no-classic-classes, ember/require-tagless-components, prettier/prettier, ember/no-assignment-of-untracked-properties-used-in-tracking-contexts, ember/no-get, no-prototype-builtins */
+/* eslint-disable  prettier/prettier, no-prototype-builtins */
+
 import showdown from 'showdown';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
-import { get, computed } from '@ember/object';
 import { getOwner } from '@ember/application';
-import layout from '../templates/components/markdown-to-html';
 
 const CONFIG_LOOKUP = 'config:environment';
 
-const ShowdownComponent = Component.extend({
-  layout,
-  markdown: '',
-  extensions: null,
-
-  _globalOptions: null,
+export default class ShowdownComponent extends Component {
+  _globalOptions = null
 
-  defaultOptionKeys: computed(function() {
+  get defaultOptionKeys() {
     return Object.keys(showdown.getDefaultOptions());
-  }).readOnly(),
+  }
 
-  init() {
-    this._super(...arguments);
+  constructor() {
+    super(...arguments);
     const owner = getOwner(this);
 
-    if (!this.extensions) {
-      this.extensions = [];
-    }
-
     if (owner && owner.hasRegistration(CONFIG_LOOKUP)) {
       this._globalOptions = (
         owner.resolveRegistration(CONFIG_LOOKUP) || {}
       ).showdown;
     }
-  },
+  }
 
-  html: computed('converter', 'defaultOptionKeys', 'markdown', function() {
+  get html() {
     let showdownOptions = this.getShowdownProperties(
-      get(this, 'defaultOptionKeys')
+      this.defaultOptionKeys
     );
-    let converter = get(this, 'converter');
+    let converter = this.converter;
 
     for (let option in showdownOptions) {
       if (
@@ -49,25 +40,25 @@ const ShowdownComponent = Component.extend({
       }
     }
 
-    return htmlSafe(converter.makeHtml(get(this, 'markdown')));
-  }).readOnly(),
+    return htmlSafe(converter.makeHtml(this.args.markdown));
+  }
 
-  converter: computed('extensions', function() {
-    let extensions = get(this, 'extensions');
+  get converter() {
+    let extensions = this.args.extensions ?? [];
 
     if (typeof extensions === 'string') {
       extensions = extensions.split(' ');
     }
 
     return new showdown.Converter({ extensions });
-  }),
+  }
 
   getShowdownProperties(keyNames) {
     return keyNames.reduce((accumulator, keyName) => {
-      let value = get(this, keyName);
+      let value = this.args[keyName];
 
       if (value === undefined && this._globalOptions) {
-        value = get(this._globalOptions, keyName);
+        value = this._globalOptions[keyName];
       }
 
       accumulator[keyName] = value;
@@ -75,10 +66,5 @@ const ShowdownComponent = Component.extend({
       return accumulator;
     }, {});
   }
-});
-
-ShowdownComponent.reopenClass({
-  positionalParams: ['markdown']
-});
+}
 
-export default ShowdownComponent;
diff --git a/addon/templates/components/markdown-to-html.hbs b/addon/templates/components/markdown-to-html.hbs
deleted file mode 100644
index ce91777..0000000
--- a/addon/templates/components/markdown-to-html.hbs
+++ /dev/null
@@ -1 +0,0 @@
-{{this.html}}
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index 84db6b2..ee14539 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/tests/dummy/app/templates/application.hbs
@@ -1,9 +1,9 @@
 {{! template-lint-disable require-input-label no-curly-component-invocation no-implicit-this }}
 <h2 id="title">ember-cli-showdown demo</h2>
 
-{{textarea value=editableText}}
-{{markdown-to-html markdown=editableText}}
+<Textarea @value={{this.editableText}} />
+<MarkdownToHtml @markdown={{this.editableText}}/>
 
-{{markdown-to-html markdown="#Markdown is cool [link](https://google.com)"}}
+<MarkdownToHtml @markdown={{"#Markdown is cool [link](https://google.com)"}} />
 
 {{outlet}}
\ No newline at end of file
diff --git a/tests/integration/components/markdown-to-html-test.js b/tests/integration/components/markdown-to-html-test.js
index b3dc87d..548b3fa 100644
--- a/tests/integration/components/markdown-to-html-test.js
+++ b/tests/integration/components/markdown-to-html-test.js
@@ -10,7 +10,7 @@ module('Integration | Component | markdown-to-html', function(hooks) {
 
   test('it renders', async function(assert) {
     this.set('markdown', '*hello world*');
-    await render(hbs`{{markdown-to-html this.markdown}}`);
+    await render(hbs`<MarkdownToHtml @markdown={{this.markdown}} />`);
 
     assert.strictEqual(this.element.querySelector('div').innerHTML.trim(), '<p><em>hello world</em></p>');
   });
@@ -28,9 +28,9 @@ module('Integration | Component | markdown-to-html', function(hooks) {
 
   test('it produces markdown', async function(assert) {
     this.markdown = '##Hello, [world](#)';
-    await render(hbs`{{markdown-to-html this.markdown}}`);
+    await render(hbs`<MarkdownToHtml @markdown={{this.markdown}} />`);
 
-    let expectedHtml = '<h2 id="helloworld">Hello, <a href="#">world</a></h2>\n';
+    let expectedHtml = '<h2 id="helloworld">Hello, <a href="#">world</a></h2>';
 
     assert.strictEqual(
       this
@@ -43,21 +43,21 @@ module('Integration | Component | markdown-to-html', function(hooks) {
 
   test('it inserts <br> tag', async function(assert) {
     this.markdown = 'foo  \nbar';
-    await render(hbs`{{markdown-to-html this.markdown}}`);
+    await render(hbs`<MarkdownToHtml @markdown={{this.markdown}} />`);
 
     let actualHtml = this.element.querySelector('div').innerHTML;
 
-    assert.strictEqual(actualHtml, '<p>foo<br>\nbar</p>\n');
+    assert.strictEqual(actualHtml, '<p>foo<br>\nbar</p>');
   });
 
   test('supports setting showdown options', async function(assert) {
     assert.expect(1);
 
     this.markdown = '# title\nI ~~dislike~~ enjoy visiting http://www.google.com';
-    await render(hbs`{{markdown-to-html this.markdown simplifiedAutoLink=true headerLevelStart=3 strikethrough=true}}`);
+    await render(hbs`<MarkdownToHtml @markdown={{this.markdown}} @simplifiedAutoLink={{true}} @headerLevelStart={{3}} @strikethrough={{true }} />`);
 
     let expectedHtml =
-      '<h3 id="title">title</h3>\n<p>I <del>dislike</del> enjoy visiting <a href="http://www.google.com">http://www.google.com</a></p>\n';
+      '<h3 id="title">title</h3>\n<p>I <del>dislike</del> enjoy visiting <a href="http://www.google.com">http://www.google.com</a></p>';
 
     assert.strictEqual(this.element.querySelector('div').innerHTML, expectedHtml);
   });
@@ -72,10 +72,10 @@ module('Integration | Component | markdown-to-html', function(hooks) {
     });
 
     this.markdown = '# title\nI ~~dislike~~ enjoy visiting http://www.google.com';
-    await render(hbs`{{markdown-to-html this.markdown headerLevelStart=3 strikethrough=true}}`);
+    await render(hbs`<MarkdownToHtml @markdown={{this.markdown}} @headerLevelStart={{3}} @strikethrough={{true}} />`);
 
     let expectedHtml =
-      '<h3 id="title">title</h3>\n<p>I <del>dislike</del> enjoy visiting <a href="http://www.google.com">http://www.google.com</a></p>\n';
+      '<h3 id="title">title</h3>\n<p>I <del>dislike</del> enjoy visiting <a href="http://www.google.com">http://www.google.com</a></p>';
 
     assert.strictEqual(this.element.querySelector('div').innerHTML, expectedHtml);
   });
@@ -96,9 +96,9 @@ module('Integration | Component | markdown-to-html', function(hooks) {
     });
 
     this.markdown =  'this is an ember showdown!'
-    await render(hbs`<MarkdownToHtml @markdown={{this.markdown}} @extensions="demo" />`);
+    await render(hbs`<MarkdownToHtml @markdown={{this.markdown}} @extensions={{"demo"}} />`);
 
-    let expectedHtml = "<p>no it isn't!</p>\n";
+    let expectedHtml = "<p>no it isn't!</p>";
     assert.strictEqual(this.element.querySelector('div').innerHTML, expectedHtml);
   });
 
@@ -112,7 +112,7 @@ module('Integration | Component | markdown-to-html', function(hooks) {
     await render(hbs`<MarkdownToHtml @markdown={{this.markdown}} />`);
 
 
-    let expectedHtml = '<p><del>dislike</del></p>\n';
+    let expectedHtml = '<p><del>dislike</del></p>';
 
     assert.strictEqual(this.element.querySelector('div').innerHTML, expectedHtml);
 
@@ -149,7 +149,7 @@ module('Integration | Component | markdown-to-html', function(hooks) {
     this.markdown =  'this is a showdown';
     await render(hbs`<MarkdownToHtml @markdown={{this.markdown}} @extensions="demo excited" />`);
 
-    let expectedHtml = '<p>this is an ember showdown!</p>\n';
+    let expectedHtml = '<p>this is an ember showdown!</p>';
     assert.strictEqual(this.element.querySelector('div').innerHTML, expectedHtml);
   });
 
@@ -160,7 +160,7 @@ module('Integration | Component | markdown-to-html', function(hooks) {
     await render(hbs`<MarkdownToHtml @markdown={{this.markdown}} @ghCodeBlocks={{true}} />`);
 
     let expectedHtml =
-      '<pre><code class="html language-html">&lt;strong&gt;hello&lt;/strong&gt;\n&lt;em&gt;world&lt;/em&gt;\n</code></pre>\n';
+      '<pre><code class="html language-html">&lt;strong&gt;hello&lt;/strong&gt;\n&lt;em&gt;world&lt;/em&gt;\n</code></pre>';
     assert.strictEqual(this.element.querySelector('div').innerHTML, expectedHtml);
   });
 });