shru-design-system 0.1.2 → 0.1.3

package/scripts/apply-theme-sync.js

@@ -0,0 +1,230 @@
+/**
+ * Synchronous theme application script (optimized)
+ * This script runs before React to prevent theme flash
+ * Injected automatically by init script
+ */
+
+(function() {
+  'use strict';
+  
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    return;
+  }
+
+  const STORAGE_KEY = 'design-system-theme';
+  const DEFAULT_THEMES = {
+    color: 'white',
+    typography: 'sans',
+    shape: 'smooth',
+    density: 'comfortable',
+    animation: 'gentle'
+  };
+
+  // Get theme from localStorage (optimized - single read)
+  var selectedThemes = DEFAULT_THEMES;
+  try {
+    var stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) selectedThemes = JSON.parse(stored);
+  } catch (e) {}
+
+  // Optimized helper functions
+  function isObject(item) {
+    return item && typeof item === 'object' && !Array.isArray(item);
+  }
+
+  function deepMerge(target, source) {
+    var output = {};
+    for (var key in target) output[key] = target[key];
+    if (isObject(target) && isObject(source)) {
+      for (var key in source) {
+        if (isObject(source[key])) {
+          output[key] = (key in target && isObject(target[key])) 
+            ? deepMerge(target[key], source[key])
+            : source[key];
+        } else {
+          output[key] = source[key];
+        }
+      }
+    }
+    return output;
+  }
+
+  function loadJSONSync(path) {
+    try {
+      var xhr = new XMLHttpRequest();
+      xhr.open('GET', path, false);
+      xhr.send(null);
+      if (xhr.status === 200 || xhr.status === 0) {
+        return JSON.parse(xhr.responseText);
+      }
+    } catch (e) {}
+    return null;
+  }
+
+  function resolveValue(value, palette, resolved) {
+    if (typeof value !== 'string') return value;
+    var match = value.match(/^\{([^}]+)\}$/);
+    if (!match) return value;
+    var path = match[1].split('.');
+    var current = { palette: palette };
+    for (var key in resolved) current[key] = resolved[key];
+    for (var i = 0; i < path.length; i++) {
+      var key = path[i];
+      if (current && typeof current === 'object' && key in current) {
+        current = current[key];
+      } else {
+        return value;
+      }
+    }
+    return typeof current === 'string' ? current : value;
+  }
+
+  function resolveReferences(tokens, palette) {
+    var resolved = JSON.parse(JSON.stringify(tokens));
+    function traverse(obj) {
+      for (var key in obj) {
+        if (typeof obj[key] === 'object' && obj[key] !== null) {
+          traverse(obj[key]);
+        } else {
+          obj[key] = resolveValue(obj[key], palette, resolved);
+        }
+      }
+    }
+    traverse(resolved);
+    return resolved;
+  }
+
+  function hexToHSL(hex) {
+    hex = hex.replace('#', '');
+    var r = parseInt(hex.substring(0, 2), 16) / 255;
+    var g = parseInt(hex.substring(2, 4), 16) / 255;
+    var b = parseInt(hex.substring(4, 6), 16) / 255;
+    var max = Math.max(r, g, b);
+    var min = Math.min(r, g, b);
+    var h = 0;
+    var s = 0;
+    var l = (max + min) / 2;
+    if (max !== min) {
+      var d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r:
+          h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+          break;
+        case g:
+          h = ((b - r) / d + 2) / 6;
+          break;
+        case b:
+          h = ((r - g) / d + 4) / 6;
+          break;
+      }
+    }
+    h = Math.round(h * 360);
+    s = Math.round(s * 100);
+    var lPercent = Math.round(l * 100);
+    return h + ' ' + s + '% ' + lPercent + '%';
+  }
+
+  function isHexColor(value) {
+    return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value);
+  }
+
+  function flattenToCSS(tokens, prefix, result, isColorContext) {
+    prefix = prefix || '';
+    result = result || {};
+    isColorContext = isColorContext || false;
+    
+    for (var key in tokens) {
+      var value = tokens[key];
+      if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+        var enteringColor = key === 'color' && prefix === '';
+        var inColorContext = isColorContext || enteringColor;
+        if (enteringColor) {
+          flattenToCSS(value, '', result, true);
+        } else if (inColorContext) {
+          flattenToCSS(value, '', result, true);
+        } else {
+          flattenToCSS(value, prefix ? prefix + '-' + key : key, result, false);
+        }
+      } else {
+        var cssKey = isColorContext || (prefix === '' && key === 'color')
+          ? '--' + key
+          : prefix === ''
+          ? '--' + key
+          : '--' + prefix + '-' + key;
+        
+        // Convert hex colors to HSL format for Tailwind compatibility
+        var finalValue = value;
+        if (isColorContext && typeof value === 'string' && isHexColor(value)) {
+          finalValue = hexToHSL(value);
+        }
+        
+        result[cssKey] = finalValue;
+      }
+    }
+    return result;
+  }
+
+  function mapToTailwindVars(cssVars) {
+    var mapped = {};
+    for (var key in cssVars) mapped[key] = cssVars[key];
+    if (cssVars['--radius-button']) mapped['--radius'] = cssVars['--radius-button'];
+    if (cssVars['--radius-card']) mapped['--radius-lg'] = cssVars['--radius-card'];
+    if (cssVars['--font-body']) mapped['--font-sans'] = cssVars['--font-body'];
+    if (cssVars['--spacing-base']) {
+      mapped['--spacing'] = cssVars['--spacing-base'];
+    } else if (cssVars['--spacing-component-md']) {
+      mapped['--spacing'] = cssVars['--spacing-component-md'];
+    }
+    return mapped;
+  }
+
+  // Apply theme synchronously (optimized)
+  try {
+    var base = loadJSONSync('/tokens/base.json');
+    if (!base) return;
+
+    var palettes = loadJSONSync('/tokens/palettes.json');
+    var palette = (palettes && palettes.palette) || {};
+    var merged = deepMerge(base, { palette: palette });
+
+    // Only load theme files that are actually selected (optimized)
+    var categoryOrder = ['color', 'typography', 'shape', 'density', 'animation'];
+    for (var i = 0; i < categoryOrder.length; i++) {
+      var category = categoryOrder[i];
+      var themeId = selectedThemes[category];
+      if (!themeId) continue;
+
+      var themeData = loadJSONSync('/tokens/themes/' + category + '/' + themeId + '.json');
+      if (themeData) merged = deepMerge(merged, themeData);
+    }
+
+    if (selectedThemes.custom) {
+      var customData = loadJSONSync('/tokens/themes/custom/' + selectedThemes.custom + '.json');
+      if (customData) merged = deepMerge(merged, customData);
+    }
+
+    var resolved = resolveReferences(merged, palette);
+    var cssVars = flattenToCSS(resolved);
+    var mappedVars = mapToTailwindVars(cssVars);
+
+    // Generate CSS efficiently
+    var cssLines = [':root {'];
+    for (var key in mappedVars) {
+      cssLines.push('  ' + key + ': ' + mappedVars[key] + ';');
+    }
+    cssLines.push('}');
+    var css = cssLines.join('\n');
+
+    // Apply to DOM
+    var styleTag = document.getElementById('dynamic-theme');
+    if (!styleTag) {
+      styleTag = document.createElement('style');
+      styleTag.id = 'dynamic-theme';
+      document.head.insertBefore(styleTag, document.head.firstChild);
+    }
+    styleTag.textContent = css;
+  } catch (error) {
+    // Silently fail - theme will apply via React hook
+  }
+})();

package/scripts/init.js

@@ -124,6 +124,10 @@ export default {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      fontFamily: {
+        sans: ["var(--font-sans)", "system-ui", "sans-serif"],
+        body: ["var(--font-body)", "var(--font-sans)", "system-ui", "sans-serif"],
+      },
     },
   },
   plugins: [],
@@ -600,6 +604,66 @@ function createTokenFiles() {
   }
 }
 
+function injectThemeScript() {
+  const scriptPath = path.join(__dirname, 'apply-theme-sync.js');
+  const scriptContent = fs.readFileSync(scriptPath, 'utf8');
+  
+  // Try to find and update index.html
+  const htmlPaths = [
+    path.join(process.cwd(), 'index.html'),
+    path.join(process.cwd(), 'public', 'index.html'),
+  ];
+  
+  for (const htmlPath of htmlPaths) {
+    if (fs.existsSync(htmlPath)) {
+      let htmlContent = fs.readFileSync(htmlPath, 'utf8');
+      
+      // Check if script is already injected
+      if (htmlContent.includes('dynamic-theme') || htmlContent.includes('apply-theme-sync')) {
+        log('Theme sync script already in index.html', 'green');
+        return;
+      }
+      
+      // Add resource hints for token files (helps browser preload)
+      // Preload critical token files that are always needed
+      const preloadLinks = `    <!-- Preload token files for faster theme application - Created by ${LIBRARY_NAME} -->
+    <link rel="preload" href="/tokens/base.json" as="fetch" crossorigin>
+    <link rel="preload" href="/tokens/palettes.json" as="fetch" crossorigin>
+    <link rel="preload" href="/tokens/themes/color/white.json" as="fetch" crossorigin>
+    <link rel="preload" href="/tokens/themes/color/dark.json" as="fetch" crossorigin>`;
+      
+      // Inject blocking script in <head> (runs before React)
+      const scriptTag = `    <!-- Blocking theme script to prevent flash - Created by ${LIBRARY_NAME} -->
+    <script>${scriptContent}</script>`;
+      
+      if (htmlContent.includes('</head>')) {
+        // Add preload links and script before </head>
+        htmlContent = htmlContent.replace('</head>', `${preloadLinks}\n${scriptTag}\n</head>`);
+        fs.writeFileSync(htmlPath, htmlContent);
+        log('Injected theme sync script and preload links into index.html', 'green');
+        return;
+      } else if (htmlContent.includes('<head>')) {
+        // If no closing </head>, try to add after <head>
+        htmlContent = htmlContent.replace('<head>', `<head>\n${preloadLinks}\n${scriptTag}`);
+        fs.writeFileSync(htmlPath, htmlContent);
+        log('Injected theme sync script and preload links into index.html', 'green');
+        return;
+      } else if (htmlContent.includes('</body>')) {
+        // Last resort: add before </body>
+        htmlContent = htmlContent.replace('</body>', `${preloadLinks}\n${scriptTag}\n</body>`);
+        fs.writeFileSync(htmlPath, htmlContent);
+        log('Injected theme sync script and preload links into index.html (before </body>)', 'yellow');
+        return;
+      }
+    }
+  }
+  
+  log('⚠️  Could not find index.html. Add these to <head> manually:', 'yellow');
+  log('   <link rel="preload" href="/tokens/base.json" as="fetch" crossorigin>', 'blue');
+  log('   <link rel="preload" href="/tokens/palettes.json" as="fetch" crossorigin>', 'blue');
+  log('   <script>/* apply-theme-sync.js content */</script>', 'blue');
+}
+
 function checkMainFile() {
   const possiblePaths = [
     path.join(process.cwd(), 'src', 'main.tsx'),
@@ -657,6 +721,7 @@ function main() {
   createPostCSSConfig();
   createCSSFile();
   createTokenFiles();
+  injectThemeScript();
   checkMainFile();
   
   log('\n✅ Setup complete!', 'green');