V2

- Breaking: Removed dependency list

Added alternative implementation where performance is almost identical, but ergonomics is much improved. Can still useMemo for micro-optimizations on critical paths in user-space.

Not quite a breaking change in practice, since dependency lists will now be ignored. But I do plan on adding an options bag to the same arg in v3, which will turn this into a breaking change.

- Support for psuedoclasses

Uses same API as in emotion object syntax. Next up: media queries & keyframes

Author: lewisl9029

.gitignore

@@ -1,3 +1,11 @@
 /benchmarks/node_modules
 /benchmarks/dist
-/node_modules
+/node_modules
+
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarn/releases/yarn-berry.cjs

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-berry.cjs

.yarnrc.yml

@@ -1,6 +1,6 @@
 {
   "name": "@lewisl9029/use-styles",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Use styles",
   "main": "src/index.js",
   "repository": "https://github.com/lewisl9029/use-styles.git",
@@ -13,7 +13,6 @@
   "files": [
     "src/*"
   ],
-  "dependencies": {},
   "devDependencies": {
     "react": "^16.8.0"
   },

package.json

@@ -1 +1 @@
-export { useStyles, StylesProvider } from './useStyles'
+export { useStyles, StylesProvider } from "./useStyles.js";

src/index.js

@@ -1,20 +1,16 @@
-import * as React from 'react'
-import hash from './hash.js'
-import hyphenate from './hyphenate.js'
-import withUnit from './withUnit.js'
-const cacheContext = React.createContext(undefined)
-
-// TODO: support media queries or recommend component size queries instead?
-// TODO: are these even necessary? or should we recommend using react event handlers and state
-const supportedPseudoClasses = new Set([
-  ':hover',
-  ':focus',
-  ':focus-visible',
-  ':focus-within',
-])
-
-const defaultCache = {}
-const defaultInsertedRules = new Set()
+import * as React from "react";
+import hash from "./useStyles/hash.js";
+import hyphenate from "./useStyles/hyphenate.js";
+import withUnit from "./useStyles/withUnit.js";
+import cacheContext from "./useStyles/cacheContext.js";
+
+// TODO: other perf explorations:
+//   - Replace array methods with manually optimized for loops
+//   - Preallocate array size where feasible
+//   - More low-level caching and memoization
+
+const defaultCache = {};
+const defaultInsertedRules = new Set();
 
 // const measure = (name, fn) => {
 //   window.performance.mark(`${name}_start`)
@@ -30,184 +26,207 @@ const defaultInsertedRules = new Set()
 
 // window.summarize = summarize
 
-const measure = (name, fn) => fn()
+const measure = (name, fn) => fn();
 
+// Significantly more performant than `list.flat()`: https://stackoverflow.com/a/61416753
+// TODO: explore manual looping
+const flatten = (list) => [].concat(...list);
 
-const toCacheEntries = ({ styles, cache }) => {
-  // const toCacheEntries = ({ styles, pseudoClass = '', cache }) => {
-  // TODO: experiment with using single rule per styles
-  return Object.entries(styles).map(([name, value]) => {
-    // if (supportedPseudoClasses.has(name)) {
-    //   return toCacheEntries({ styles: value, pseudoClass: name, cache })
-    // }
+const toCacheEntries = ({ stylesEntries, psuedoClass, cache }) => {
+  return stylesEntries.map(([name, value]) => {
+    const existingCacheEntry = cache[psuedoClass]?.[name]?.[value];
 
-    if (cache[name] && cache[name][value]) {
-      return cache[name][value]
+    if (existingCacheEntry) {
+      return existingCacheEntry;
     }
 
-    // const id = `${name}_${value}`
-    const id = measure('id', () => `${name}_${value}`)
-    console.log("uncached rule: " + id)
-
-    // const className = `r_${hash(id)}`
-    const className = measure('hash', () => `r_${hash(id)}`)
+    // psuedoclass need to be a part of id to allow distinct targetting
+    const id = measure("id", () => `${psuedoClass}_${name}_${value}`);
+    // console.log('uncached rule: ' + id)
 
-    // const rule = `.${className} { ${styleName}: ${withUnit(
-    //   name,
-    //   value,
-    // )}; }`
-
-
-    if (!cache[name]) {
-      cache[name] = {}
+    const className = measure("hash", () => `r_${hash(id)}`);
+    if (!cache[psuedoClass]) {
+      cache[psuedoClass] = {};
+    }
+    if (!cache[psuedoClass][name]) {
+      cache[psuedoClass][name] = {};
     }
 
-    cache[name][value] = { id, className, name, value }
+    const cacheEntry = { id, className, psuedoClass, name, value };
 
-    return cache[name][value]
-  })
-}
+    cache[psuedoClass][name][value] = cacheEntry;
 
+    return cacheEntry;
+  });
+};
 
+// TODO: Psuedoclasses
+const toCacheEntriesLayer2 = ({ stylesEntries, cache }) => {
+  const { withPsuedoClass, withoutPsuedoClass } = stylesEntries.reduce(
+    (groups, entry) => {
+      const key = entry[0];
+      if (key[0] === ":") {
+        groups.withPsuedoClass.push(entry);
+      } else {
+        groups.withoutPsuedoClass.push(entry);
+      }
+      return groups;
+    },
+    { withPsuedoClass: [], withoutPsuedoClass: [] }
+  );
+
+  return [
+    ...toCacheEntries({ stylesEntries: withoutPsuedoClass, cache }),
+    ...flatten(
+      withPsuedoClass.map(([psuedoClass, styles]) =>
+        toCacheEntries({
+          stylesEntries: Object.entries(styles),
+          psuedoClass,
+          cache,
+        })
+      )
+    ),
+  ];
+};
+// TODO: support media queries or recommend component size queries instead? what about keyframes?
+const toCacheEntriesLayer3 = () => {};
 
 export const StylesProvider = ({
   children,
   options = {},
   initialCache = defaultCache,
 }) => {
-  const stylesheetRef = React.useRef()
-  const useCssTypedOm = !!(options.useCssTypedOm && window.CSS && window.CSS.number)
+  const stylesheetRef = React.useRef();
+  const useCssTypedOm = !!(
+    options.useCssTypedOm &&
+    window.CSS &&
+    window.CSS.number
+  );
 
   const insertStylesheet = React.useCallback(() => {
-    const id = `useStylesStylesheet`
-    const existingElement = window.document.getElementById(id)
+    const id = `useStylesStylesheet`;
+    const existingElement = window.document.getElementById(id);
 
     if (existingElement) {
-      stylesheetRef.current = existingElement.sheet
-      return
+      stylesheetRef.current = existingElement.sheet;
+      return;
     }
 
-    const element = window.document.createElement('style')
-    element.id = id
+    const element = window.document.createElement("style");
+    element.id = id;
 
-    window.document.head.appendChild(element)
+    window.document.head.appendChild(element);
 
-    stylesheetRef.current = element.sheet
-  },[])
+    stylesheetRef.current = element.sheet;
+  }, []);
 
   React.useEffect(() => {
     if (stylesheetRef.current) {
       return;
     }
-    insertStylesheet()
+    insertStylesheet();
     // console.log('effect')
 
     // return () => {
     //   // dom_.removeChild(window.document.body, element)
     // }
-  }, [insertStylesheet])
+  }, [insertStylesheet]);
 
   return React.createElement(
     // TODO: split contexts
     cacheContext.Provider,
     {
       value: {
         insertRule: React.useCallback(
-          ({ id, className, name, value }) => {
+          ({ id, className, psuedoClass = "", name, value }) => {
             if (!stylesheetRef.current) {
-              insertStylesheet()
+              insertStylesheet();
             }
 
             if (defaultInsertedRules.has(id)) {
               // console.log('cached rule', rule)
-              return
+              return;
             }
 
             if (useCssTypedOm) {
               // CSS Typed OM unfortunately doesn't deal with stylesheets yet, but supposedy it's coming:
               // https://github.com/w3c/css-houdini-drafts/issues/96#issuecomment-468063223
-              const rule = `.${className} {}`
-              const index = stylesheetRef.current.insertRule(rule)
-              stylesheetRef.current.cssRules[index].styleMap.set(name, value)
+              const rule = `.${className}${psuedoClass} {}`;
+              const index = stylesheetRef.current.insertRule(rule);
+              stylesheetRef.current.cssRules[index].styleMap.set(name, value);
             } else {
-              const rule = `.${className} { ${hyphenate(name)}: ${withUnit(
-                name,
-                value,
-              )}; }`
-              stylesheetRef.current.insertRule(rule)
+              const rule = `.${className}${psuedoClass} { ${hyphenate(
+                name
+              )}: ${withUnit(name, value)}; }`;
+              stylesheetRef.current.insertRule(rule);
             }
-          // mutative cache for perf
-            defaultInsertedRules.add(id)
+            // mutative cache for perf
+            defaultInsertedRules.add(id);
           },
-          [insertStylesheet, useCssTypedOm],
+          [insertStylesheet, useCssTypedOm]
         ),
         toCacheEntries: React.useCallback(
-          (styles) => toCacheEntries({ styles, cache: initialCache }),
-          [],
+          (stylesEntries) =>
+            toCacheEntriesLayer2({ stylesEntries, cache: initialCache }),
+          []
         ),
         useCssTypedOm,
       },
     },
-    children,
-  )
-}
-
-export const useStyles = (styles, dependencies) => {
-  if (!dependencies) {
-    console.warn(
-      'styles will be reprocessed every render if a dependencies array is not provided, pass in an empty array if styles are static',
-    )
-  }
+    children
+  );
+};
 
-  const cache = React.useContext(cacheContext)
+export const useStylesEntries = (
+  stylesEntries
+  // { resolveStyle } = {},
+) => {
+  const cache = React.useContext(cacheContext);
 
   if (cache === undefined) {
-    throw new Error('Please ensure usages of useStyles are contained within StylesProvider')
+    throw new Error(
+      "Please ensure usages of useStyles are contained within StylesProvider"
+    );
   }
 
-  const { insertRule, toCacheEntries } = cache
+  const { insertRule, toCacheEntries } = cache;
 
-  // const cacheEntries = React.useMemo(() => toCacheEntries(styles), dependencies)
-  // console.log(dependencies)
-  const cacheEntries = measure('cacheEntries', () => React.useMemo(() => toCacheEntries(styles), dependencies))
+  const cacheEntries = measure(
+    "toCacheEntries",
+    React.useMemo(() => toCacheEntries(stylesEntries), [stylesEntries])
+  );
 
-  const classNames = measure('classNames', () => React.useMemo(
-    // () => cacheEntries.map(({ className }) => className).join(' '),
-    () => {
-      const length = cacheEntries.length
-      let classNames = ''
-      for(let index = 0; index < length; index++) {
-        classNames+=cacheEntries[index].className + ' '
+  const classNames = measure(
+    "classNames",
+    React.useMemo(() => {
+      const length = cacheEntries.length;
+      let classNames = "";
+      for (let index = 0; index < length; index++) {
+        classNames += cacheEntries[index].className + " ";
       }
-      return classNames
-    },
-    [cacheEntries],
-  ))
-  // const classNames = React.useMemo(
-  //   // () => cacheEntries.map(({ className }) => className).join(' '),
-  //   () => {
-  //     const length = cacheEntries.length
-  //     let classNames = ''
-  //     for(let index = 0; index < length; index++) {
-  //       classNames+=cacheEntries[index].className + ' '
-  //     }
-  //     return classNames
-  //   },
-  //   [cacheEntries],
-  // )
 
+      return classNames;
+    }, [cacheEntries])
+  );
 
   React.useLayoutEffect(() => {
-    measure('insert', () => {
-      cacheEntries.forEach(insertRule)
-    })
+    measure("insert", () => {
+      cacheEntries.forEach(insertRule);
+    });
     // cacheEntries.forEach(insertRule)
 
     return () => {
       // This is not necessary, and hinders performance
       // stylesheet.deleteRule(index)
-    }
-  }, [cacheEntries])
-
-  return classNames
-}
+    };
+  }, [cacheEntries]);
+
+  // Add space to facilitate concatenation
+  return classNames + " ";
+};
+
+export const useStyles = (styles) => {
+  return useStylesEntries(
+    React.useMemo(() => Object.entries(styles), [styles])
+  );
+};

src/useStyles.js

@@ -0,0 +1,5 @@
+import * as React from 'react'
+
+const cacheContext = React.createContext(undefined)
+
+export default cacheContext