From 62189076da38078df33796fb16576b13ecdeeb85 Mon Sep 17 00:00:00 2001 From: mauroerta Date: Fri, 21 May 2021 00:42:09 +0200 Subject: [PATCH] feat: update callback to jss function --- apps/svelte-sandbox/src/components/Box.svelte | 2 +- .../src/components/Button.svelte | 2 +- packages/core/src/index.ts | 1 + packages/core/src/utils/deepMerge.ts | 6 ++--- packages/jss/src/getStyles.ts | 27 +++++++++---------- packages/jss/tests/jss.test.ts | 8 +++++- packages/svelte/src/morfeoAction.ts | 11 ++++---- packages/svelte/tests/morfeo.test.ts | 7 +++++ 8 files changed, 39 insertions(+), 25 deletions(-) diff --git a/apps/svelte-sandbox/src/components/Box.svelte b/apps/svelte-sandbox/src/components/Box.svelte index 50f8f7e9..f506cfee 100644 --- a/apps/svelte-sandbox/src/components/Box.svelte +++ b/apps/svelte-sandbox/src/components/Box.svelte @@ -8,6 +8,6 @@ } -
+
\ No newline at end of file diff --git a/apps/svelte-sandbox/src/components/Button.svelte b/apps/svelte-sandbox/src/components/Button.svelte index a0c24bd0..dc09ac2c 100644 --- a/apps/svelte-sandbox/src/components/Button.svelte +++ b/apps/svelte-sandbox/src/components/Button.svelte @@ -5,6 +5,6 @@ export let onClick = () => undefined; - \ No newline at end of file diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index ffd8b575..05697376 100644 --- a/packages/core/src/index.ts +++ b/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'; diff --git a/packages/core/src/utils/deepMerge.ts b/packages/core/src/utils/deepMerge.ts index db7fbe55..89123c56 100644 --- a/packages/core/src/utils/deepMerge.ts +++ b/packages/core/src/utils/deepMerge.ts @@ -1,14 +1,14 @@ -function merge(oldState: T, newState: T): T { +function merge(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); diff --git a/packages/jss/src/getStyles.ts b/packages/jss/src/getStyles.ts index 486ec46e..49d09e31 100644 --- a/packages/jss/src/getStyles.ts +++ b/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,7 +17,7 @@ export function getStyleSheet( return jss.createStyleSheet(parsedStyle as any, options); } -export function getRawStyles( +export function getStyles( styles: Record, options?: StyleSheetFactoryOptions, ) { @@ -25,26 +25,25 @@ export function getRawStyles( sheet.attach(); const classes = sheet.classes; + let currentStyles = { ...styles }; - const uid = theme.subscribe(() => { + const update = (props?: Record) => { sheet.detach(); - sheet = getStyleSheet(styles, { + currentStyles = deepMerge(currentStyles, props) as Record; + sheet = getStyleSheet(currentStyles, { ...options, generateId: rule => { return classes[rule.key]; }, }); sheet.attach(); - }); - - return { classes, sheet, uid }; -} + }; + const uid = theme.subscribe(() => update()); -export function getStyles( - styles: Record, - options?: StyleSheetFactoryOptions, -) { - const { classes } = getRawStyles(styles, options); + const destroy = () => { + sheet.detach(); + theme.cleanUp(uid); + }; - return classes; + return { classes, sheet, destroy, update }; } diff --git a/packages/jss/tests/jss.test.ts b/packages/jss/tests/jss.test.ts index f9f89ce7..d7849525 100644 --- a/packages/jss/tests/jss.test.ts +++ b/packages/jss/tests/jss.test.ts @@ -29,7 +29,7 @@ describe('jss', () => { }); test('should generate the classnames', () => { - const classes = getStyles({ + const { classes } = getStyles({ button: { bg: 'primary', }, @@ -37,4 +37,10 @@ describe('jss', () => { expect(classes).toHaveProperty('button'); }); + + test('should detach the sheet', () => { + const { destroy, sheet } = getStyles({}); + destroy(); + expect(sheet.attached).toBeFalsy(); + }); }); diff --git a/packages/svelte/src/morfeoAction.ts b/packages/svelte/src/morfeoAction.ts index 989e436f..90ce0b21 100644 --- a/packages/svelte/src/morfeoAction.ts +++ b/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, }; } diff --git a/packages/svelte/tests/morfeo.test.ts b/packages/svelte/tests/morfeo.test.ts index b6cdbe16..f6371cc2 100644 --- a/packages/svelte/tests/morfeo.test.ts +++ b/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'); + }); });