From 5c483c3adca7ff014fb0346f0a1448c86d766c55 Mon Sep 17 00:00:00 2001 From: Lucas Bebber Date: Wed, 2 Oct 2019 19:30:25 -0300 Subject: [PATCH 1/5] Update changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f78e3d8..64ae583 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). ## [Unreleased] +### Added +- `migrationFrom` option. ## [0.2.1] - 2019-10-03 ### Changed From 0e4f1e997ebb8b4e63fdc6973cd6f0b9212a70bd Mon Sep 17 00:00:00 2001 From: Lucas Bebber Date: Wed, 2 Oct 2019 19:35:25 -0300 Subject: [PATCH 2/5] Update docs --- docs/README.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index 56b7616..badc778 100644 --- a/docs/README.md +++ b/docs/README.md @@ -4,7 +4,7 @@ Utility for generating CSS handles for store components. 🚧 Under Construction 🚧 -### Usage +## Usage ```tsx import React, { FunctionComponent } from 'react' @@ -35,3 +35,14 @@ const Component: FunctionComponent = () => { ) } ``` + +### Options + +- `migrationFrom`: Adds additional CSS handles for cases where a component is migrating from another app. + +#### Usage: +```tsx +const CSS_HANDLES = ['container'] +const handles = useCssHandles(CSS_HANDLES, { migrationFrom: 'vtex.store-components@2.x' }) +// Returns { container: 'vtex-current-app-0-x-container vtex-store-components-2-x-container' } +``` From 4ac57808542057ef10a5d985fa10cac94fc63cf5 Mon Sep 17 00:00:00 2001 From: Lucas Bebber Date: Thu, 3 Oct 2019 15:31:00 -0300 Subject: [PATCH 3/5] Nit picked on readme --- docs/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/README.md b/docs/README.md index badc778..5d9c61c 100644 --- a/docs/README.md +++ b/docs/README.md @@ -43,6 +43,6 @@ const Component: FunctionComponent = () => { #### Usage: ```tsx const CSS_HANDLES = ['container'] -const handles = useCssHandles(CSS_HANDLES, { migrationFrom: 'vtex.store-components@2.x' }) -// Returns { container: 'vtex-current-app-0-x-container vtex-store-components-2-x-container' } +const handles = useCssHandles(CSS_HANDLES, { migrationFrom: 'vtex.store-components@3.x' }) +// Returns { container: 'vtex-current-app-0-x-container vtex-store-components-3-x-container' } ``` From 70292165b07cdb9fa9d60eba5480ae262c0685ea Mon Sep 17 00:00:00 2001 From: Lucas Bebber Date: Thu, 3 Oct 2019 15:48:13 -0300 Subject: [PATCH 4/5] Refrains from repeating a migration app if is the same as the current one --- react/useCssHandles.tsx | 45 ++++++++++++++++++++++++++++++----------- 1 file changed, 33 insertions(+), 12 deletions(-) diff --git a/react/useCssHandles.tsx b/react/useCssHandles.tsx index 60464b2..7be107f 100644 --- a/react/useCssHandles.tsx +++ b/react/useCssHandles.tsx @@ -9,11 +9,7 @@ interface CssHandlesOptions { migrationFrom?: string | string[] } -const generateCssHandles = ( - component: string, - handles: T, - modifiers?: string | string[] -) => { +const parseComponentName = (componentName: string) => { /* Matches until the first `.` or `@`. * Used to split something like `vtex.style-guide@2.0.1` into * `vtex`, `style-guide`, and `2`. */ @@ -23,12 +19,24 @@ const generateCssHandles = ( * provides 3 different results. Yeah I know. * There exists a `String.matchAll()` function but it's not * supported on Safari */ - const [vendor] = splitAppName.exec(component) || [null] - const [name] = splitAppName.exec(component) || [null] - const [major] = splitAppName.exec(component) || [null] + const [vendor] = splitAppName.exec(componentName) || [null] + const [name] = splitAppName.exec(componentName) || [null] + const [major] = splitAppName.exec(componentName) || [null] - const namespace = vendor && name && major && `${vendor}-${name}-${major}-x` + return { vendor, name, major } +} + +const normalizeComponentName = (componentName: string) => { + const { vendor, name, major } = parseComponentName(componentName) + + return vendor && name && major && `${vendor}-${name}-${major}-x` +} +const generateCssHandles = ( + namespace: string, + handles: T, + modifiers?: string | string[] +) => { return handles.reduce>((acc, handle) => { const isValid = !!namespace && validateCssHandle(handle) const transformedHandle = `${namespace}-${handle}` @@ -66,11 +74,24 @@ const useCssHandles = ( const values = useMemo>(() => { const { migrationFrom } = options - const components = [component] + const normalizedComponent = normalizeComponentName(component) + + const namespaces = normalizedComponent ? [normalizedComponent] : [] if (migrationFrom) { - components.push(...([] as string[]).concat(migrationFrom)) + const migrations = Array.isArray(migrationFrom) + ? migrationFrom + : [migrationFrom] + + const normalizedMigrations = migrations + .map(normalizeComponentName) + .filter( + current => !!current && current !== normalizedComponent + ) as string[] + + namespaces.push(...normalizedMigrations) } - return components + + return namespaces .map(component => generateCssHandles(component, handles, blockClass)) .reduce>( (acc: null | CssHandles, cur: CssHandles) => { From 89d81acf5968f3eefe26296ed3fb57eb9772b9fc Mon Sep 17 00:00:00 2001 From: Lucas Bebber Date: Thu, 3 Oct 2019 15:48:17 -0300 Subject: [PATCH 5/5] Update tests --- react/__tests__/useCssHandles.test.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/react/__tests__/useCssHandles.test.tsx b/react/__tests__/useCssHandles.test.tsx index 665d965..5661130 100644 --- a/react/__tests__/useCssHandles.test.tsx +++ b/react/__tests__/useCssHandles.test.tsx @@ -70,5 +70,24 @@ describe('useCssHandles', () => { 'vtex-app-2-x-element2 vtex-app-2-x-element2--blockClass vtex-previous-app-2-x-element2 vtex-previous-app-2-x-element2--blockClass vtex-previous-app-3-x-element2 vtex-previous-app-3-x-element2--blockClass', }) }) + + it('doesnt repeat the migration if the current app happens to be the same as the migration one', () => { + const CSS_HANDLES = ['element1', 'element2'] + + const handles = useCssHandles(CSS_HANDLES, { + migrationFrom: [ + 'vtex.previous-app@2.0.0', + 'vtex.previous-app@3.0.0', + 'vtex.app@2.1.0', + ], + }) + + expect(handles).toStrictEqual({ + element1: + 'vtex-app-2-x-element1 vtex-app-2-x-element1--blockClass vtex-previous-app-2-x-element1 vtex-previous-app-2-x-element1--blockClass vtex-previous-app-3-x-element1 vtex-previous-app-3-x-element1--blockClass', + element2: + 'vtex-app-2-x-element2 vtex-app-2-x-element2--blockClass vtex-previous-app-2-x-element2 vtex-previous-app-2-x-element2--blockClass vtex-previous-app-3-x-element2 vtex-previous-app-3-x-element2--blockClass', + }) + }) }) })