DEV: Update linting config and run gjs-codemod

assets/javascripts/discourse/components/ad-slot.gjs

@@ -1,13 +1,26 @@
+import { array } from "@ember/helper";
 import EmberObject from "@ember/object";
 import { service } from "@ember/service";
 import { isBlank } from "@ember/utils";
 import { tagName } from "@ember-decorators/component";
 import discourseComputed from "discourse/lib/decorators";
-import AdComponent from "discourse/plugins/discourse-adplugin/discourse/components/ad-component";
-import {
-  isNthPost,
-  isNthTopicListItem,
-} from "discourse/plugins/discourse-adplugin/discourse/helpers/slot-position";
+import { isNthPost, isNthTopicListItem } from "../helpers/slot-position";
+import AdComponent from "./ad-component";
+import AdbutlerAd from "./adbutler-ad";
+import AmazonProductLinks from "./amazon-product-links";
+import CarbonadsAd from "./carbonads-ad";
+import GoogleAdsense from "./google-adsense";
+import GoogleDfpAd from "./google-dfp-ad";
+import HouseAd from "./house-ad";
+
+const AD_COMPONENTS = {
+  "house-ad": HouseAd,
+  "google-adsense": GoogleAdsense,
+  "google-dfp-ad": GoogleDfpAd,
+  "amazon-product-links": AmazonProductLinks,
+  "carbonads-ad": CarbonadsAd,
+  "adbutler-ad": AdbutlerAd,
+};
 
 const adConfig = EmberObject.create({
   "google-adsense": {
@@ -201,7 +214,7 @@ export default class AdSlot extends AdComponent {
    * Depends on `router.currentRoute` so that we refresh ads when navigating around.
    */
   @discourseComputed("placement", "availableAdTypes", "router.currentRoute")
-  adComponents(placement, availableAdTypes) {
+  adComponentNames(placement, availableAdTypes) {
     if (
       !availableAdTypes.includes("house-ad") ||
       availableAdTypes.length === 1
@@ -240,4 +253,23 @@ export default class AdSlot extends AdComponent {
 
     return networkNames;
   }
+
+  get adComponents() {
+    return this.adComponentNames.map((name) => AD_COMPONENTS[name]);
+  }
+
+  <template>
+    {{#each this.adComponents as |Ad|}}
+      {{! Trick to force full destroy/re-render of component when route changes }}
+      {{#each (array this.router.currentRoute)}}
+        <Ad
+          @placement={{this.placement}}
+          @category={{this.category}}
+          @postNumber={{this.postNumber}}
+          @indexNumber={{this.indexNumber}}
+          @tagName={{this.childTagName}}
+        />
+      {{/each}}
+    {{/each}}
+  </template>
 }

assets/javascripts/discourse/components/ad-slot.hbs

@@ -1,13 +0,0 @@
-{{#each this.adComponents as |adComponent|}}
-  {{! Trick to force full destroy/re-render of component when route changes }}
-  {{#each (array this.router.currentRoute)}}
-    {{component
-      adComponent
-      placement=this.placement
-      category=this.category
-      postNumber=this.postNumber
-      indexNumber=this.indexNumber
-      tagName=this.childTagName
-    }}
-  {{/each}}
-{{/each}}

assets/javascripts/discourse/components/adbutler-ad.gjs

@@ -3,7 +3,7 @@ import RSVP from "rsvp";
 import discourseComputed from "discourse/lib/decorators";
 import { isTesting } from "discourse/lib/environment";
 import loadScript from "discourse/lib/load-script";
-import AdComponent from "discourse/plugins/discourse-adplugin/discourse/components/ad-component";
+import AdComponent from "./ad-component";
 
 let _loaded = false,
   _promise = null,
@@ -150,4 +150,10 @@ export default class AdbutlerAd extends AdComponent {
     }
     return this.isNthPost(parseInt(this.siteSettings.adbutler_nth_post, 10));
   }
+
+  <template>
+    {{#if this.showAd}}
+      <div id={{this.divId}} class={{this.className}}></div>
+    {{/if}}
+  </template>
 }

assets/javascripts/discourse/components/adbutler-ad.hbs

@@ -1,3 +0,0 @@
-{{#if this.showAd}}
-  <div id={{this.divId}} class={{this.className}}></div>
-{{/if}}

assets/javascripts/discourse/components/amazon-product-links.gjs

@@ -2,7 +2,8 @@ import { and } from "@ember/object/computed";
 import { htmlSafe } from "@ember/template";
 import { classNames } from "@ember-decorators/component";
 import discourseComputed from "discourse/lib/decorators";
-import AdComponent from "discourse/plugins/discourse-adplugin/discourse/components/ad-component";
+import { i18n } from "discourse-i18n";
+import AdComponent from "./ad-component";
 
 @classNames("amazon-product-links")
 export default class AmazonProductLinks extends AdComponent {
@@ -186,4 +187,41 @@ export default class AmazonProductLinks extends AdComponent {
 
     return this.isNthPost(parseInt(this.siteSettings.amazon_nth_post_code, 10));
   }
+
+  <template>
+    {{#if this.showAd}}
+      {{#if this.site.mobileView}}
+        <div
+          class="amazon-product-links-label"
+          style={{this.adTitleStyleMobile}}
+        ><h2>{{i18n "adplugin.advertisement_label"}}</h2></div>
+        <iframe
+          style={{this.adWrapperStyleMobile}}
+          marginwidth="0"
+          marginheight="0"
+          scrolling="no"
+          frameborder="0"
+          src={{this.userInputMobile}}
+          title={{i18n "adplugin.advertisement_label"}}
+        >
+        </iframe>
+      {{else}}
+        <div class="amazon-product-links-label"><h2>{{i18n
+              "adplugin.advertisement_label"
+            }}</h2></div>
+        <div class="container" align="center">
+          <iframe
+            style={{this.adWrapperStyle}}
+            marginwidth="0"
+            marginheight="0"
+            scrolling="no"
+            frameborder="0"
+            src={{this.userInput}}
+            title={{i18n "adplugin.advertisement_label"}}
+          >
+          </iframe>
+        </div>
+      {{/if}}
+    {{/if}}
+  </template>
 }

assets/javascripts/discourse/components/amazon-product-links.hbs

@@ -1,34 +0,0 @@
-{{#if this.showAd}}
-  {{#if this.site.mobileView}}
-    <div
-      class="amazon-product-links-label"
-      style={{this.adTitleStyleMobile}}
-    ><h2>{{i18n "adplugin.advertisement_label"}}</h2></div>
-    <iframe
-      style={{this.adWrapperStyleMobile}}
-      marginwidth="0"
-      marginheight="0"
-      scrolling="no"
-      frameborder="0"
-      src={{this.userInputMobile}}
-      title={{i18n "adplugin.advertisement_label"}}
-    >
-    </iframe>
-  {{else}}
-    <div class="amazon-product-links-label"><h2>{{i18n
-          "adplugin.advertisement_label"
-        }}</h2></div>
-    <div class="container" align="center">
-      <iframe
-        style={{this.adWrapperStyle}}
-        marginwidth="0"
-        marginheight="0"
-        scrolling="no"
-        frameborder="0"
-        src={{this.userInput}}
-        title={{i18n "adplugin.advertisement_label"}}
-      >
-      </iframe>
-    </div>
-  {{/if}}
-{{/if}}

assets/javascripts/discourse/components/carbonads-ad.gjs

@@ -1,6 +1,6 @@
 import { htmlSafe } from "@ember/template";
 import discourseComputed from "discourse/lib/decorators";
-import AdComponent from "discourse/plugins/discourse-adplugin/discourse/components/ad-component";
+import AdComponent from "./ad-component";
 
 export default class CarbonadsAd extends AdComponent {
   serve_id = null;
@@ -40,4 +40,12 @@ export default class CarbonadsAd extends AdComponent {
       placement && serveId && showCarbonAds && showToGroups && showOnCurrentPage
     );
   }
+
+  <template>
+    {{#if this.showAd}}
+      {{! template-lint-disable no-forbidden-elements }}
+      <script src={{this.url}} id="_carbonads_js" async type="text/javascript">
+      </script>
+    {{/if}}
+  </template>
 }

assets/javascripts/discourse/components/carbonads-ad.hbs

@@ -1,5 +0,0 @@
-{{#if this.showAd}}
-  {{! template-lint-disable no-forbidden-elements }}
-  <script src={{this.url}} id="_carbonads_js" async type="text/javascript">
-  </script>
-{{/if}}

assets/javascripts/discourse/components/google-adsense.gjs

@@ -5,7 +5,8 @@ import RSVP from "rsvp";
 import discourseComputed from "discourse/lib/decorators";
 import { isTesting } from "discourse/lib/environment";
 import loadScript from "discourse/lib/load-script";
-import AdComponent from "discourse/plugins/discourse-adplugin/discourse/components/ad-component";
+import { i18n } from "discourse-i18n";
+import AdComponent from "./ad-component";
 
 let _loaded = false,
   _promise = null,
@@ -247,4 +248,26 @@ export default class GoogleAdsense extends AdComponent {
       parseInt(this.siteSettings.adsense_nth_post_code, 10)
     );
   }
+
+  <template>
+    {{#if this.showAd}}
+      <div class="google-adsense-label"><h2>{{i18n
+            "adplugin.advertisement_label"
+          }}</h2></div>
+      <div
+        class="google-adsense-content"
+        id={{if this.isResponsive "google-adsense__responsive"}}
+        style={{this.adWrapperStyle}}
+      >
+        <ins
+          class="adsbygoogle"
+          style={{this.adInsStyle}}
+          data-ad-client="ca-pub-{{this.publisher_id}}"
+          data-ad-slot={{this.ad_code}}
+          data-ad-format={{this.autoAdFormat}}
+        >
+        </ins>
+      </div>
+    {{/if}}
+  </template>
 }

assets/javascripts/discourse/components/google-adsense.hbs

@@ -1,19 +0,0 @@
-{{#if this.showAd}}
-  <div class="google-adsense-label"><h2>{{i18n
-        "adplugin.advertisement_label"
-      }}</h2></div>
-  <div
-    class="google-adsense-content"
-    id={{if this.isResponsive "google-adsense__responsive"}}
-    style={{this.adWrapperStyle}}
-  >
-    <ins
-      class="adsbygoogle"
-      style={{this.adInsStyle}}
-      data-ad-client="ca-pub-{{this.publisher_id}}"
-      data-ad-slot={{this.ad_code}}
-      data-ad-format={{this.autoAdFormat}}
-    >
-    </ins>
-  </div>
-{{/if}}

assets/javascripts/discourse/components/google-dfp-ad.gjs

@@ -5,7 +5,8 @@ import RSVP from "rsvp";
 import discourseComputed, { on } from "discourse/lib/decorators";
 import { isTesting } from "discourse/lib/environment";
 import loadScript from "discourse/lib/load-script";
-import AdComponent from "discourse/plugins/discourse-adplugin/discourse/components/ad-component";
+import { i18n } from "discourse-i18n";
+import AdComponent from "./ad-component";
 
 let _loaded = false,
   _promise = null,
@@ -427,4 +428,29 @@ export default class GoogleDfpAd extends AdComponent {
   cleanup() {
     destroySlot(this.get("divId"));
   }
+
+  <template>
+    {{#if this.showAd}}
+      {{#if this.site.mobileView}}
+        <div class="google-dfp-ad-label" style={{this.adTitleStyleMobile}}><h2
+          >{{i18n "adplugin.advertisement_label"}}</h2></div>
+        <div
+          id={{this.divId}}
+          style={{this.adWrapperStyle}}
+          class="dfp-ad-unit"
+          align="center"
+        ></div>
+      {{else}}
+        <div class="google-dfp-ad-label"><h2>{{i18n
+              "adplugin.advertisement_label"
+            }}</h2></div>
+        <div
+          id={{this.divId}}
+          style={{this.adWrapperStyle}}
+          class="dfp-ad-unit"
+          align="center"
+        ></div>
+      {{/if}}
+    {{/if}}
+  </template>
 }

assets/javascripts/discourse/components/google-dfp-ad.hbs

@@ -1,22 +0,0 @@
-{{#if this.showAd}}
-  {{#if this.site.mobileView}}
-    <div class="google-dfp-ad-label" style={{this.adTitleStyleMobile}}><h2
-      >{{i18n "adplugin.advertisement_label"}}</h2></div>
-    <div
-      id={{this.divId}}
-      style={{this.adWrapperStyle}}
-      class="dfp-ad-unit"
-      align="center"
-    ></div>
-  {{else}}
-    <div class="google-dfp-ad-label"><h2>{{i18n
-          "adplugin.advertisement_label"
-        }}</h2></div>
-    <div
-      id={{this.divId}}
-      style={{this.adWrapperStyle}}
-      class="dfp-ad-unit"
-      align="center"
-    ></div>
-  {{/if}}
-{{/if}}

assets/javascripts/discourse/components/house-ad.gjs

@@ -4,8 +4,9 @@ import {
   classNameBindings,
   classNames,
 } from "@ember-decorators/component";
+import htmlSafe from "discourse/helpers/html-safe";
 import discourseComputed from "discourse/lib/decorators";
-import AdComponent from "discourse/plugins/discourse-adplugin/discourse/components/ad-component";
+import AdComponent from "./ad-component";
 
 const adIndex = {
   topic_list_top: null,
@@ -146,4 +147,10 @@ export default class HouseAd extends AdComponent {
 
     this.refreshAd();
   }
+
+  <template>
+    {{#if this.showAd}}
+      {{htmlSafe this.adHtml}}
+    {{/if}}
+  </template>
 }

assets/javascripts/discourse/components/house-ad.hbs

@@ -1,3 +0,0 @@
-{{#if this.showAd}}
-  {{html-safe this.adHtml}}
-{{/if}}

assets/javascripts/discourse/components/post-bottom-ad.gjs

@@ -0,0 +1,11 @@
+import AdSlot from "./ad-slot";
+
+const PostBottomAd = <template>
+  <AdSlot
+    @placement="post-bottom"
+    @category={{@model.topic.category.slug}}
+    @postNumber={{@model.post_number}}
+  />
+</template>;
+
+export default PostBottomAd;

assets/javascripts/discourse/components/post-bottom-ad.hbs

@@ -1,5 +0,0 @@
-{{ad-slot
-  placement="post-bottom"
-  category=@model.topic.category.slug
-  postNumber=@model.post_number
-}}

assets/javascripts/discourse/connectors/after-topic-list-item/discourse-adplugin.gjs

@@ -0,0 +1,29 @@
+import Component from "@ember/component";
+import { classNames, tagName } from "@ember-decorators/component";
+import { slotContenders } from "discourse/plugins/discourse-adplugin/discourse/components/ad-slot";
+import AdSlot from "../../components/ad-slot";
+
+@tagName("tr")
+@classNames("after-topic-list-item-outlet", "discourse-adplugin")
+export default class DiscourseAdplugin extends Component {
+  static shouldRender(args, context) {
+    return (
+      args.index &&
+      slotContenders(
+        context.site,
+        context.siteSettings,
+        "topic-list-between",
+        args.index
+      ).length > 0
+    );
+  }
+
+  <template>
+    <AdSlot
+      @placement="topic-list-between"
+      @category={{this.category.slug}}
+      @indexNumber={{this.index}}
+      @childTagName="td"
+    />
+  </template>
+}

assets/javascripts/discourse/connectors/after-topic-list-item/discourse-adplugin.hbs

@@ -1,6 +0,0 @@
-{{ad-slot
-  placement="topic-list-between"
-  category=this.category.slug
-  indexNumber=this.index
-  childTagName="td"
-}}

assets/javascripts/discourse/connectors/after-topic-list-item/discourse-adplugin.js

@@ -1,15 +0,0 @@
-import { slotContenders } from "discourse/plugins/discourse-adplugin/discourse/components/ad-slot";
-
-export default {
-  shouldRender(args, component) {
-    return (
-      args.index &&
-      slotContenders(
-        component.site,
-        component.siteSettings,
-        "topic-list-between",
-        args.index
-      ).length > 0
-    );
-  },
-};

assets/javascripts/discourse/connectors/discovery-list-container-top/discourse-adplugin.gjs

@@ -0,0 +1,11 @@
+import Component from "@ember/component";
+import { classNames, tagName } from "@ember-decorators/component";
+import AdSlot from "../../components/ad-slot";
+
+@tagName("span")
+@classNames("discovery-list-container-top-outlet", "discourse-adplugin")
+export default class DiscourseAdplugin extends Component {
+  <template>
+    <AdSlot @placement="topic-list-top" @category={{this.category.slug}} />
+  </template>
+}

assets/javascripts/discourse/connectors/discovery-list-container-top/discourse-adplugin.hbs

@@ -1 +0,0 @@
-{{ad-slot placement="topic-list-top" category=this.category.slug}}

assets/javascripts/discourse/connectors/topic-above-post-stream/discourse-adplugin.gjs

@@ -0,0 +1,14 @@
+import Component from "@ember/component";
+import { classNames, tagName } from "@ember-decorators/component";
+import AdSlot from "../../components/ad-slot";
+
+@tagName("div")
+@classNames("topic-above-post-stream-outlet", "discourse-adplugin")
+export default class DiscourseAdplugin extends Component {
+  <template>
+    <AdSlot
+      @placement="topic-above-post-stream"
+      @category={{this.model.category.slug}}
+    />
+  </template>
+}

assets/javascripts/discourse/connectors/topic-above-post-stream/discourse-adplugin.hbs

@@ -1,4 +0,0 @@
-{{ad-slot
-  placement="topic-above-post-stream"
-  category=this.model.category.slug
-}}

assets/javascripts/discourse/connectors/topic-above-suggested/discourse-adplugin.gjs

@@ -0,0 +1,14 @@
+import Component from "@ember/component";
+import { classNames, tagName } from "@ember-decorators/component";
+import AdSlot from "../../components/ad-slot";
+
+@tagName("div")
+@classNames("topic-above-suggested-outlet", "discourse-adplugin")
+export default class DiscourseAdplugin extends Component {
+  <template>
+    <AdSlot
+      @placement="topic-above-suggested"
+      @category={{this.model.category.slug}}
+    />
+  </template>
+}

assets/javascripts/discourse/connectors/topic-above-suggested/discourse-adplugin.hbs

@@ -1 +0,0 @@
-{{ad-slot placement="topic-above-suggested" category=this.model.category.slug}}