FIX: Wrap theme javascript inside IIFE to prevent using global namespace

FIX: Wrap theme javascript inside IIFE to prevent using global namespace

diff --git a/app/models/theme_field.rb b/app/models/theme_field.rb
index e695175..166cbde 100644
--- a/app/models/theme_field.rb
+++ b/app/models/theme_field.rb
@@ -60,7 +60,7 @@ class ThemeField < ActiveRecord::Base
   validates :name, format: { with: /\A[a-z_][a-z0-9_-]*\z/i },
                    if: Proc.new { |field| ThemeField.theme_var_type_ids.include?(field.type_id) }
 
-  COMPILER_VERSION = 8
+  COMPILER_VERSION = 9
 
   belongs_to :theme
 
diff --git a/lib/theme_javascript_compiler.rb b/lib/theme_javascript_compiler.rb
index eef81e8..b4290d0 100644
--- a/lib/theme_javascript_compiler.rb
+++ b/lib/theme_javascript_compiler.rb
@@ -205,15 +205,17 @@ class ThemeJavascriptCompiler
   def transpile(es6_source, version)
     template = Tilt::ES6ModuleTranspilerTemplate.new {}
     wrapped = <<~PLUGIN_API_JS
-      if ('Discourse' in window && typeof Discourse._registerPluginCode === 'function') {
-        const settings = Discourse.__container__
-          .lookup("service:theme-settings")
-          .getObjectForTheme(#{@theme_id});
-        const themePrefix = (key) => `theme_translations.#{@theme_id}.${key}`;
-        Discourse._registerPluginCode('#{version}', api => {
-          #{es6_source}
-        });
-      }
+      (function() {
+        if ('Discourse' in window && typeof Discourse._registerPluginCode === 'function') {
+          const settings = Discourse.__container__
+            .lookup("service:theme-settings")
+            .getObjectForTheme(#{@theme_id});
+          const themePrefix = (key) => `theme_translations.#{@theme_id}.${key}`;
+          Discourse._registerPluginCode('#{version}', api => {
+            #{es6_source}
+          });
+        }
+      })();
     PLUGIN_API_JS
 
     template.babel_transpile(wrapped)
diff --git a/spec/models/theme_spec.rb b/spec/models/theme_spec.rb
index 5cffdb7..88604d0 100644
--- a/spec/models/theme_spec.rb
+++ b/spec/models/theme_spec.rb
@@ -325,15 +325,17 @@ HTML
             .registerSettings(#{theme.id}, {"name":"bob"});
         }
       })();
-      if ('Discourse' in window && typeof Discourse._registerPluginCode === 'function') {
-        var settings = Discourse.__container__.lookup("service:theme-settings").getObjectForTheme(#{theme.id});
-        var themePrefix = function themePrefix(key) {
-          return 'theme_translations.#{theme.id}.' + key;
-        };
-        Discourse._registerPluginCode('1.0', function (api) {
-          alert(settings.name);var a = function a() {};
-        });
-      }
+      (function () {
+        if ('Discourse' in window && typeof Discourse._registerPluginCode === 'function') {
+          var settings = Discourse.__container__.lookup("service:theme-settings").getObjectForTheme(#{theme.id});
+          var themePrefix = function themePrefix(key) {
+            return 'theme_translations.#{theme.id}.' + key;
+          };
+          Discourse._registerPluginCode('1.0', function (api) {
+            alert(settings.name);var a = function a() {};
+          });
+        }
+      })();
       HTML
 
       theme_field.reload
@@ -351,15 +353,17 @@ HTML
             .registerSettings(#{theme.id}, {"name":"bill"});
         }
       })();
-      if ('Discourse' in window && typeof Discourse._registerPluginCode === 'function') {
-        var settings = Discourse.__container__.lookup("service:theme-settings").getObjectForTheme(#{theme.id});
-        var themePrefix = function themePrefix(key) {
-          return 'theme_translations.#{theme.id}.' + key;
-        };
-        Discourse._registerPluginCode('1.0', function (api) {
-          alert(settings.name);var a = function a() {};
-        });
-      }
+      (function () {
+        if ('Discourse' in window && typeof Discourse._registerPluginCode === 'function') {
+          var settings = Discourse.__container__.lookup("service:theme-settings").getObjectForTheme(#{theme.id});
+          var themePrefix = function themePrefix(key) {
+            return 'theme_translations.#{theme.id}.' + key;
+          };
+          Discourse._registerPluginCode('1.0', function (api) {
+            alert(settings.name);var a = function a() {};
+          });
+        }
+      })();
       HTML
 
       theme_field.reload

GitHub sha: 24b59afe

1 Like

This commit has been mentioned on Discourse Meta. There might be relevant details there: