feat: update callback to jss function

apps/svelte-sandbox/src/components/Box.svelte

@@ -8,6 +8,6 @@
   }
 </script>
 
-<div use:morfeo={{...style, ...$$props}}>
+<div use:morfeo={{...style, ...$$restProps}}>
   <slot></slot>
 </div>

apps/svelte-sandbox/src/components/Button.svelte

@@ -5,6 +5,6 @@
 	export let onClick = () => undefined;
 </script>
 
-<button on:click={onClick} use:morfeo={{...$$props, componentName}}>
+<button on:click={onClick} use:morfeo={{...$$restProps, componentName}}>
   <slot></slot>
 </button>

packages/core/src/index.ts

@@ -1,5 +1,6 @@
 export * from './theme';
 export * from './types';
 export * from './parsers';
+export * from './utils';
 
 export * from '@morfeo/spec';

packages/core/src/utils/deepMerge.ts

@@ -1,14 +1,14 @@
-function merge<T>(oldState: T, newState: T): T {
+function merge<T>(oldState: T, newState?: T): T {
   if (typeof oldState !== typeof newState) {
     return newState || oldState;
   }
 
   if (Array.isArray(newState)) {
-    return newState;
+    return newState as T;
   }
 
   if (typeof newState !== 'object') {
-    return newState;
+    return newState as T;
   }
 
   const keys = Object.keys(newState);

packages/jss/src/getStyles.ts

@@ -1,4 +1,4 @@
-import { parsers, Style, ResolvedStyle, theme } from '@morfeo/web';
+import { parsers, Style, ResolvedStyle, theme, deepMerge } from '@morfeo/web';
 import jss, { StyleSheetFactoryOptions } from 'jss';
 import './initJSS';
 
@@ -17,34 +17,33 @@ export function getStyleSheet<K extends string>(
   return jss.createStyleSheet<K>(parsedStyle as any, options);
 }
 
-export function getRawStyles<K extends string>(
+export function getStyles<K extends string>(
   styles: Record<K, Style>,
   options?: StyleSheetFactoryOptions,
 ) {
   let sheet = getStyleSheet<K>(styles, options);
   sheet.attach();
 
   const classes = sheet.classes;
+  let currentStyles = { ...styles };
 
-  const uid = theme.subscribe(() => {
+  const update = (props?: Record<K, Style>) => {
     sheet.detach();
-    sheet = getStyleSheet(styles, {
+    currentStyles = deepMerge(currentStyles, props) as Record<K, Style>;
+    sheet = getStyleSheet(currentStyles, {
       ...options,
       generateId: rule => {
         return classes[rule.key];
       },
     });
     sheet.attach();
-  });
-
-  return { classes, sheet, uid };
-}
+  };
+  const uid = theme.subscribe(() => update());
 
-export function getStyles<K extends string>(
-  styles: Record<K, Style>,
-  options?: StyleSheetFactoryOptions,
-) {
-  const { classes } = getRawStyles(styles, options);
+  const destroy = () => {
+    sheet.detach();
+    theme.cleanUp(uid);
+  };
 
-  return classes;
+  return { classes, sheet, destroy, update };
 }

packages/jss/tests/jss.test.ts

@@ -29,12 +29,18 @@ describe('jss', () => {
   });
 
   test('should generate the classnames', () => {
-    const classes = getStyles({
+    const { classes } = getStyles({
       button: {
         bg: 'primary',
       },
     });
 
     expect(classes).toHaveProperty('button');
   });
+
+  test('should detach the sheet', () => {
+    const { destroy, sheet } = getStyles({});
+    destroy();
+    expect(sheet.attached).toBeFalsy();
+  });
 });

packages/svelte/src/morfeoAction.ts

@@ -1,5 +1,5 @@
-import { getRawStyles } from '@morfeo/jss';
-import { Style, theme } from '@morfeo/web';
+import { getStyles } from '@morfeo/jss';
+import { Style } from '@morfeo/web';
 
 function getElementName({ componentName, variant }: Style) {
   if (componentName && variant) {
@@ -11,13 +11,14 @@ function getElementName({ componentName, variant }: Style) {
 
 export function morfeo(node: HTMLElement, props: Style = {}) {
   const elementName = getElementName(props);
-  const { classes, uid } = getRawStyles({ [elementName]: props });
+  let { classes, update, destroy } = getStyles({ [elementName]: props });
 
   node.classList.add(classes[elementName]);
 
   return {
-    destroy() {
-      theme.cleanUp(uid);
+    update(nextProps: Style) {
+      update({ [elementName]: nextProps });
     },
+    destroy,
   };
 }

packages/svelte/tests/morfeo.test.ts

@@ -54,4 +54,11 @@ describe('morfeo', () => {
     destroy();
     expect(typeof destroy).toBe('function');
   });
+
+  test('should return a function that will update the style on changes', () => {
+    const element = document.createElement('div');
+    const { update } = morfeo(element);
+    update({} as any);
+    expect(typeof update).toBe('function');
+  });
 });