Add a showdown extension to strip non-enabled feature flags. Feature …

…flags can be enabled via the features service (features#setupFeatures).
ember-learn · Nov 26, 2024 · e1258c6 · e1258c6
1 parent b718042
commit e1258c6
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 4 deletions.
diff --git a/guidemaker-ember-template/package.json b/guidemaker-ember-template/package.json
@@ -96,8 +96,9 @@
       "./components/table-of-contents.js": "./dist/_app_/components/table-of-contents.js",
       "./helpers/html-safe.js": "./dist/_app_/helpers/html-safe.js",
       "./helpers/starts-with.js": "./dist/_app_/helpers/starts-with.js",
-      "./initializers/ember-template-showdown-extensions.js": "./dist/_app_/initializers/ember-template-showdown-extensions.js",
+      "./instance-initializers/ember-template-showdown-extensions.js": "./dist/_app_/instance-initializers/ember-template-showdown-extensions.js",
       "./modifiers/highlight-active-title.js": "./dist/_app_/modifiers/highlight-active-title.js",
+      "./services/features.js": "./dist/_app_/services/features.js",
       "./services/search.js": "./dist/_app_/services/search.js",
       "./templates/application.js": "./dist/_app_/templates/application.js",
       "./templates/error.js": "./dist/_app_/templates/error.js",

diff --git a/guidemaker-ember-template/rollup.config.mjs b/guidemaker-ember-template/rollup.config.mjs
@@ -31,7 +31,7 @@ export default {
       'modifiers/**/*.js',
       'services/**/*.js',
       'templates/**/*.js',
-      'initializers/**/*.js',
+      'instance-initializers/**/*.js',
     ]),
 
     // Follow the V2 Addon rules about dependencies. Your code can import from

diff --git a/guidemaker-ember-template/src/components/guides-article.hbs b/guidemaker-ember-template/src/components/guides-article.hbs
@@ -66,7 +66,7 @@
 
       <MarkdownToHtml
         @markdown={{@model.content}}
-        @extensions="showdown-section-groups header-links"
+        @extensions="showdown-section-groups header-links feature-flags"
       />
 
       <ChapterLinks />

diff --git a/...ers/ember-template-showdown-extensions.js → ...ers/ember-template-showdown-extensions.js b/...ers/ember-template-showdown-extensions.js → ...ers/ember-template-showdown-extensions.js
@@ -1,6 +1,6 @@
 import showdown from 'showdown';
 
-export function initialize(/* application */) {
+export function initialize(application) {
   showdown.extension('header-links', function () {
     return [
       {
@@ -12,6 +12,38 @@ export function initialize(/* application */) {
       },
     ];
   });
+
+  const features = application.lookup('service:features');
+  showdown.extension('feature-flags', function () {
+    return [
+      {
+        type: 'lang',
+        filter: function (text) {
+          return text
+            .replace(
+              /<feature-flag-on-([^>]+)>([\s\S]*?)<\/feature-flag-on-\1>/g,
+              function (match, featureName, content) {
+                if (features.isEnabled(featureName)) {
+                  return content;
+                } else {
+                  return '';
+                }
+              },
+            )
+            .replace(
+              /<feature-flag-off-([^>]+)>([\s\S]*?)<\/feature-flag-off-\1>/g,
+              function (match, featureName, content) {
+                if (!features.isEnabled(featureName)) {
+                  return content;
+                } else {
+                  return '';
+                }
+              },
+            );
+        },
+      },
+    ];
+  });
 }
 
 export default {

diff --git a/guidemaker-ember-template/src/services/features.js b/guidemaker-ember-template/src/services/features.js
@@ -0,0 +1,12 @@
+import Service from '@ember/service';
+
+export default class Features extends Service {
+  features = {};
+  setupFeatures(features) {
+    this.features = features;
+  }
+
+  isEnabled(featureName) {
+    return this.features[featureName];
+  }
+}
diff --git a/test-app/tests/integration/components/guides-article-test.js b/test-app/tests/integration/components/guides-article-test.js
@@ -98,4 +98,41 @@ module('Integration | Component | guides-article', function (hooks) {
         'https://github.com/ember-learn/guidemaker-ember-template/edit/master/guides/v1.0.0/model-id.md',
       );
   });
+
+  test('it renders content based on feature flags', async function (assert) {
+    this.owner.register('service:page', PageStub);
+    this.owner.lookup('service:features').setupFeatures({
+      'template-tag': true,
+    });
+
+    this.model = {
+      id: 'model-id',
+      content: `
+<feature-flag-on-template-tag>
+  This is template tag content.
+</feature-flag-on-template-tag>
+
+<feature-flag-off-template-tag>
+  This is classic template content.
+</feature-flag-off-template-tag>`,
+    };
+
+    await render(hbs`
+          <GuidesArticle @model={{this.model}} @version="v1.0.0" />
+      `);
+
+    assert
+      .dom('.guides-article-content')
+      .includesText('This is template tag content.');
+    assert
+      .dom('.guides-article-content')
+      .doesNotIncludeText('This is classic template content.');
+
+    assert
+      .dom('feature-flag-off-template-tag')
+      .doesNotExist('Feature flag tags are stripped');
+    assert
+      .dom('feature-flag-on-template-tag')
+      .doesNotExist('Feature flag tags are stripped');
+  });
 });