refactor: implement cache-friendly JS configuration injection

- Created dedicated endpoint (/frak-config.js) for serving configuration
- Removed inline JavaScript injection from every page
- Added smart caching with ETag validation and 304 responses
- Implemented cache busting via version parameter (config hash)
- Added optional JavaScript minification for production
- Integrated with popular caching plugins (WP Rocket, W3TC, etc.)
- Added proper cache headers including CORS support
- Config now cacheable by browsers, CDNs, and caching plugins

Benefits:
- Better performance with separate cacheable config file
- Reduced page size (no inline JS)
- Cache-friendly for aggressive caching strategies
- Only config endpoint needs clearing on changes
- Easy debugging via direct endpoint access

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: KONFeature

admin/class-frak-admin.php

@@ -204,6 +204,11 @@ private function save_settings() {
         update_option('frak_floating_button_position', $floating_button_position);
         update_option('frak_modal_language', $modal_language);
         update_option('frak_modal_i18n', json_encode($modal_i18n));
+        
+        // Update config last modified timestamp for cache busting
+        if (class_exists('Frak_Config_Endpoint')) {
+            Frak_Config_Endpoint::update_last_modified();
+        }
 
     }
 

includes/class-frak-config-endpoint.php

@@ -0,0 +1,259 @@
+<?php
+/**
+ * Frak Config Endpoint
+ * 
+ * Handles dynamic JavaScript configuration delivery with proper caching
+ */
+class Frak_Config_Endpoint {
+
+    private static $instance = null;
+
+    public static function instance() {
+        if (null === self::$instance) {
+            self::$instance = new self();
+        }
+        return self::$instance;
+    }
+
+    private function __construct() {
+        // Register the endpoint
+        add_action('init', array($this, 'register_endpoint'));
+        add_action('template_redirect', array($this, 'handle_endpoint'));
+        
+        // Flush rewrite rules on activation
+        register_activation_hook(FRAK_PLUGIN_FILE, array($this, 'flush_rewrite_rules'));
+        register_deactivation_hook(FRAK_PLUGIN_FILE, array($this, 'flush_rewrite_rules'));
+    }
+
+    /**
+     * Register the custom endpoint
+     */
+    public function register_endpoint() {
+        add_rewrite_rule('^frak-config\.js$', 'index.php?frak_config=1', 'top');
+        add_rewrite_tag('%frak_config%', '([^&]+)');
+    }
+
+    /**
+     * Handle the endpoint request
+     */
+    public function handle_endpoint() {
+        global $wp_query;
+        
+        if (!isset($wp_query->query_vars['frak_config'])) {
+            return;
+        }
+
+        // Get the configuration
+        $config = get_option('frak_custom_config', '');
+        
+        if (empty($config)) {
+            // Generate default config if none exists
+            $admin = Frak_Admin::instance();
+            $config = $this->get_compiled_config();
+        }
+
+        // Generate ETag based on config content
+        $etag = md5($config);
+        $last_modified = get_option('frak_config_last_modified', time());
+        
+        // Set proper headers
+        $this->set_cache_headers($etag, $last_modified);
+        
+        // Check if client has valid cached version
+        if ($this->is_not_modified($etag)) {
+            status_header(304);
+            exit;
+        }
+
+        // Output the JavaScript
+        header('Content-Type: application/javascript; charset=utf-8');
+        
+        // Apply minification if enabled
+        if (get_option('frak_minify_config', 0) && !defined('SCRIPT_DEBUG')) {
+            $config = $this->minify_javascript($config);
+        } else {
+            // Add header comment for non-minified version
+            $config = "/* Frak Configuration - Generated: " . date('Y-m-d H:i:s') . " */\n" . $config;
+        }
+        
+        echo $config;
+        exit;
+    }
+
+    /**
+     * Get compiled configuration from individual options
+     */
+    private function get_compiled_config() {
+        $app_name = get_option('frak_app_name', get_bloginfo('name'));
+        $logo_url = get_option('frak_logo_url', '');
+        $modal_language = get_option('frak_modal_language', 'default');
+        $floating_button_position = get_option('frak_floating_button_position', 'right');
+        $modal_i18n = get_option('frak_modal_i18n', '{}');
+        
+        // Handle language setting
+        $lang_code = $modal_language === 'default' ? 'undefined' : "'{$modal_language}'";
+        
+        return <<<JS
+let logoUrl = '{$logo_url}';
+const lang = {$lang_code};
+
+let i18n = {};
+try {
+    i18n = JSON.parse('{$modal_i18n}'.replace(
+        /&amp;|&lt;|&gt;|&#39;|&quot;/g,
+        tag =>
+          ({
+            '&amp;': '&',
+            '&lt;': '<',
+            '&gt;': '>',
+            '&#39;': "'",
+            '&quot;': '"'
+          }[tag] || tag)
+    )) || {};
+} catch (error) {
+    console.error('Error parsing i18n customizations:', error);
+}
+
+window.FrakSetup = {
+    config: { 
+        walletUrl: 'https://wallet.frak.id', 
+        metadata: { 
+            name: '{$app_name}', 
+            lang, 
+            logoUrl 
+        }, 
+        customizations: { i18n }, 
+        domain: window.location.host 
+    },
+    modalConfig: { 
+        login: { 
+            allowSso: true, 
+            ssoMetadata: { 
+                logoUrl, 
+                homepageLink: window.location.host 
+            } 
+        } 
+    },
+    modalShareConfig: { 
+        link: window.location.href 
+    },
+    modalWalletConfig: { 
+        metadata: { 
+            position: '{$floating_button_position}' 
+        } 
+    },
+};
+JS;
+    }
+
+    /**
+     * Set proper cache headers
+     */
+    private function set_cache_headers($etag, $last_modified) {
+        // Allow caching for 1 hour, but validate with ETag
+        header('Cache-Control: public, max-age=3600, must-revalidate');
+        header('ETag: "' . $etag . '"');
+        header('Last-Modified: ' . gmdate('D, d M Y H:i:s', $last_modified) . ' GMT');
+        header('X-Content-Type-Options: nosniff');
+        
+        // Add CORS headers if needed
+        $allowed_origin = get_option('frak_cors_origin', '*');
+        header('Access-Control-Allow-Origin: ' . $allowed_origin);
+    }
+
+    /**
+     * Check if client has valid cached version
+     */
+    private function is_not_modified($etag) {
+        $if_none_match = isset($_SERVER['HTTP_IF_NONE_MATCH']) ? $_SERVER['HTTP_IF_NONE_MATCH'] : false;
+        
+        if ($if_none_match && $if_none_match === '"' . $etag . '"') {
+            return true;
+        }
+        
+        return false;
+    }
+
+    /**
+     * Flush rewrite rules
+     */
+    public function flush_rewrite_rules() {
+        $this->register_endpoint();
+        flush_rewrite_rules();
+    }
+
+    /**
+     * Get config URL with version parameter
+     */
+    public static function get_config_url() {
+        $config = get_option('frak_custom_config', '');
+        $version = substr(md5($config), 0, 8);
+        
+        return home_url('/frak-config.js?v=' . $version);
+    }
+
+    /**
+     * Update last modified timestamp when config changes
+     */
+    public static function update_last_modified() {
+        update_option('frak_config_last_modified', time());
+        
+        // Clear caches from popular caching plugins
+        self::clear_external_caches();
+    }
+    
+    /**
+     * Simple JavaScript minification
+     */
+    private function minify_javascript($js) {
+        // Remove comments
+        $js = preg_replace('/\/\*[\s\S]*?\*\/|\/\/.*$/m', '', $js);
+        
+        // Remove unnecessary whitespace
+        $js = preg_replace('/\s+/', ' ', $js);
+        
+        // Remove whitespace around operators
+        $js = preg_replace('/\s*([{}:;,=+\-*\/])\s*/', '$1', $js);
+        
+        return trim($js);
+    }
+    
+    /**
+     * Clear caches from popular caching plugins
+     */
+    private static function clear_external_caches() {
+        // WP Rocket
+        if (function_exists('rocket_clean_domain')) {
+            rocket_clean_domain();
+        }
+        
+        // W3 Total Cache
+        if (function_exists('w3tc_flush_all')) {
+            w3tc_flush_all();
+        }
+        
+        // WP Super Cache
+        if (function_exists('wp_cache_clear_cache')) {
+            wp_cache_clear_cache();
+        }
+        
+        // WP Fastest Cache
+        if (class_exists('WpFastestCache') && method_exists('WpFastestCache', 'deleteCache')) {
+            $wpfc = new WpFastestCache();
+            $wpfc->deleteCache(true);
+        }
+        
+        // LiteSpeed Cache
+        if (class_exists('LiteSpeed\Purge')) {
+            LiteSpeed\Purge::purge_all();
+        }
+        
+        // Autoptimize
+        if (class_exists('autoptimizeCache') && method_exists('autoptimizeCache', 'clearall')) {
+            autoptimizeCache::clearall();
+        }
+        
+        // Clear WordPress object cache
+        wp_cache_flush();
+    }
+}

includes/class-frak-frontend.php

@@ -17,21 +17,26 @@ private function __construct() {
     }
 
     public function enqueue_scripts() {
-        // Load the configuration
-        $custom_config = get_option('frak_custom_config', '');
+        // Check if we have a configuration
+        $has_config = !empty(get_option('frak_custom_config', '')) || 
+                      !empty(get_option('frak_app_name', ''));
 
-        if (!empty($custom_config)) {
-            // Inject the configuration inline instead of using a separate file
-            wp_register_script('frak-config', false);
-            wp_enqueue_script('frak-config');
-            wp_add_inline_script('frak-config', $custom_config, 'before');
+        if ($has_config) {
+            // Load configuration from endpoint with cache busting
+            wp_enqueue_script(
+                'frak-config',
+                Frak_Config_Endpoint::get_config_url(),
+                array(),
+                null,
+                false // Load in head for early initialization
+            );
         }
 
         // Load the Frak SDK
         wp_enqueue_script(
             'frak-sdk',
             'https://cdn.jsdelivr.net/npm/@frak-labs/components@latest/cdn/components.js',
-            array('frak-config'),
+            $has_config ? array('frak-config') : array(),
             null,
             array('strategy' => 'defer')
         );

includes/class-frak-plugin.php

@@ -24,8 +24,10 @@ private function define_constants() {
     }
 
     private function includes() {
+        require_once FRAK_PLUGIN_DIR . 'includes/class-frak-webhook-helper.php';
         require_once FRAK_PLUGIN_DIR . 'admin/class-frak-admin.php';
         require_once FRAK_PLUGIN_DIR . 'includes/class-frak-frontend.php';
+        require_once FRAK_PLUGIN_DIR . 'includes/class-frak-config-endpoint.php';
 
         if (class_exists('WooCommerce')) {
             require_once FRAK_PLUGIN_DIR . 'includes/class-frak-woocommerce.php';
@@ -40,6 +42,9 @@ private function init_hooks() {
     }
 
     public function init() {
+        // Initialize config endpoint for all contexts
+        Frak_Config_Endpoint::instance();
+        
         if (is_admin()) {
             Frak_Admin::instance();
         } else {
@@ -52,7 +57,8 @@ public function init() {
     }
 
     public function activate() {
-        // Activation logic if needed
+        // Flush rewrite rules for config endpoint
+        Frak_Config_Endpoint::instance()->flush_rewrite_rules();
     }
 
     public function deactivate() {