app-studio 0.2.8 → 0.2.11

package/dist/appstudio.cjs.development.js

@@ -722,16 +722,45 @@ const styleSheet = /*#__PURE__*/(() => {
   }
   return null;
 })();
+/**
+ * Fonction de hachage simple et rapide basée sur l'algorithme djb2.
+ * @param {string} str - La chaîne de caractères à hacher.
+ * @returns {number} - Le hachage sous forme d'entier non signé 32 bits.
+ */
+const hashString = str => {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) {
+    // hash * 33 + c
+    hash = (hash << 5) + hash + str.charCodeAt(i);
+    // Pour éviter les dépassements, on utilise l'opérateur >>> 0
+    hash = hash >>> 0;
+  }
+  return hash;
+};
+/**
+ * Fonction pour hacher un objet en utilisant JSON.stringify et hashString.
+ * @param {Object} obj - L'objet à hacher.
+ * @returns {number} - Le hachage de l'objet.
+ */
+const hashObject = obj => {
+  const str = JSON.stringify(obj);
+  return hashString(str).toString();
+};
 const classCache = /*#__PURE__*/new Map();
 const cssRulesCache = /*#__PURE__*/new Map();
 let classNameCounter = 0;
 const generateClassName = styleProps => {
-  const serialized = JSON.stringify(styleProps);
-  if (classCache.has(serialized)) {
-    return classCache.get(serialized);
+  // Extract only relevant, primitive style properties
+  console.log({
+    styleProps
+  });
+  // Generate a unique hash based on relevantProps
+  const hash = hashObject(styleProps);
+  if (classCache.has(hash)) {
+    return classCache.get(hash);
   } else {
     const className = 'clz-' + classNameCounter++;
-    classCache.set(serialized, className);
+    classCache.set(hash, className);
     return className;
   }
 };
@@ -810,7 +839,7 @@ const generateCssRules = (selector, styles, getColor, mediaQueries) => {
   return rules;
 };
 // Function to apply styles to a component
-const computeStyleProps = (props, getColor, mediaQueries, devices) => {
+const computeStyleProps = props => {
   const styleProps = {};
   const keyframesList = [];
   // Gestion de la taille de l'élément
@@ -869,22 +898,8 @@ const computeStyleProps = (props, getColor, mediaQueries, devices) => {
   }
   Object.keys(props).forEach(property => {
     if (property !== 'style' && (isStyleProp(property) || extraKeys.has(property))) {
-      const value = props[property];
-      if (typeof value === 'object' && value !== null) {
-        // For other nested styles, exclude 'on' and 'media'
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const {
-          on,
-          media,
-          ...nestedProps
-        } = value;
-        const nestedResult = computeStyleProps(nestedProps);
-        styleProps[property] = nestedResult.styleProps;
-        keyframesList.push(...(nestedResult.keyframes || []));
-      } else {
-        // Simple style property
-        styleProps[property] = value;
-      }
+      // Simple style property
+      styleProps[property] = props[property];
     }
   });
   return {
@@ -893,7 +908,7 @@ const computeStyleProps = (props, getColor, mediaQueries, devices) => {
   };
 };
 // Function to apply styles to a component
-const applyStyle = function (props, getColor, mediaQueries, devices, depth,
+const applyStyle = function (props, mediaQueries, devices, depth,
 // Add a depth parameter
 maxDepth // Set a maximum depth
 ) {
@@ -1023,9 +1038,6 @@ maxDepth // Set a maximum depth
       }
     }
   });
-  console.log({
-    styleProps
-  });
   return {
     styleProps,
     keyframes: keyframesList
@@ -1035,7 +1047,7 @@ const getStyledProps = (props, getColor, mediaQueries, devices) => {
   const {
     styleProps,
     keyframes
-  } = applyStyle(props, getColor, mediaQueries, devices);
+  } = applyStyle(props, mediaQueries, devices);
   const className = generateClassName(styleProps);
   let cssRules = [];
   if (cssRulesCache.has(className)) {