feat(feat-option): PoC for options.features

src/lib/Preview.js

@@ -892,6 +892,13 @@ class Preview extends EventEmitter {
         // Reset all options
         this.options = {};
 
+        // Features
+        /* NOTES:
+         - This makes features available everywhere that features is passed which includes
+         all of the viewers for different files
+        */
+        this.options.features = options.features;
+
         // Container for preview
         this.options.container = options.container;
 

src/lib/featureChecking.ts

@@ -0,0 +1,29 @@
+import get from 'lodash/get';
+
+/* NOTES:
+ - Right now this uses the same types as BUIE but should look into using something more
+specific to constrain it more
+*/
+type FeatureOptions = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [key: string]: any;
+};
+
+type FeatureConfig = {
+    [key: string]: FeatureOptions;
+};
+
+/* NOTES:
+ - isFeatureEnabled and getFeatureConfig were copied from BUIE
+ - BUIE also has other methods for accessing features but these seemed like the ones
+most commonly used for Preview features
+*/
+function isFeatureEnabled(features: FeatureConfig, featureName: string): boolean {
+    return !!get(features, featureName, false);
+}
+
+function getFeatureConfig(features: FeatureConfig, featureName: string): FeatureConfig {
+    return get(features, featureName, {});
+}
+
+export { isFeatureEnabled, getFeatureConfig };

src/lib/viewers/text/PlainTextViewer.js

@@ -6,6 +6,7 @@ import { ICON_PRINT_CHECKMARK } from '../../icons';
 import { HIGHLIGHTTABLE_EXTENSIONS } from '../../extensions';
 import { openContentInsideIframe, createAssetUrlCreator, createStylesheet } from '../../util';
 import { VIEWER_EVENT } from '../../events';
+import { isFeatureEnabled, getFeatureConfig } from '../../featureChecking';
 import './PlainText.scss';
 
 // Inline web worker JS
@@ -48,6 +49,26 @@ class PlainTextViewer extends TextBaseViewer {
     load() {
         super.load();
 
+        /* NOTES:
+         - This is an example of getting the features. An example could be putting a
+         new feature of the plain text viewer behind a feature to better control roll-out.
+          - The output below will show up in the browser console
+        */
+        const newPlainTextEnabled = isFeatureEnabled(this.options.features, 'newPlainText.enabled');
+        // eslint-disable-next-line no-console
+        console.log('***** Feature *****');
+        // eslint-disable-next-line no-console
+        console.log(
+            'Is plain text viewer feature on:',
+            newPlainTextEnabled,
+            '; value type:',
+            typeof newPlainTextEnabled,
+        );
+        // eslint-disable-next-line no-console
+        console.log('Feature config:');
+        // eslint-disable-next-line no-console
+        console.log(getFeatureConfig(this.options.features, 'newPlainText'));
+
         const loadAssetsPromise = this.loadAssets(this.getJS(), this.getCSS());
         return Promise.all([loadAssetsPromise, this.getRepStatus().getPromise()])
             .then(this.postLoad)