From 7b01fd11ce1a93ad446ce4ad20365d2ad16d204b Mon Sep 17 00:00:00 2001 From: Mia Hall Date: Wed, 28 May 2025 13:54:35 -0400 Subject: [PATCH 1/5] Parse array transforms --- .../utils/convertCSSTransformToLightning.ts | 1 + .../src/utils/parseTransform.ts | 32 +++++++++++++++++-- 2 files changed, 31 insertions(+), 2 deletions(-) diff --git a/packages/plugin-css-transform/src/utils/convertCSSTransformToLightning.ts b/packages/plugin-css-transform/src/utils/convertCSSTransformToLightning.ts index 17ffaad..ab1499c 100644 --- a/packages/plugin-css-transform/src/utils/convertCSSTransformToLightning.ts +++ b/packages/plugin-css-transform/src/utils/convertCSSTransformToLightning.ts @@ -96,6 +96,7 @@ export function convertCSSTransformToLightning( transformResult.scaleY = getValue(transformValue, 1, Number.parseFloat); break; case 'rotate': + case 'rotation': transformResult.rotation = getValue( transformValue, 0, diff --git a/packages/plugin-css-transform/src/utils/parseTransform.ts b/packages/plugin-css-transform/src/utils/parseTransform.ts index 9ab6415..d3ce24d 100644 --- a/packages/plugin-css-transform/src/utils/parseTransform.ts +++ b/packages/plugin-css-transform/src/utils/parseTransform.ts @@ -1,15 +1,43 @@ import type { Transform } from '@plextv/react-lightning-plugin-flexbox'; import { convertCSSTransformToLightning } from './convertCSSTransformToLightning'; +import { convertRotationValue } from './convertRotationValue'; const transformPartRegex = /(\w+)\(([^)]+)\)/g; -export function parseTransform(transform?: string): Transform { +export function parseTransform(transform?: string | object | Array): Transform { if (!transform) { return {}; } + if (Array.isArray(transform)) { + const transforms = {}; + + transform.forEach((t) => { + Object.assign( + transforms, + parseTransform(t), + ); + }); + + return transforms; + } + if (typeof transform === 'object') { - return transform; + const safeTransform: Transform = {}; + const originalTranform = transform as Record; + + Object.keys(originalTranform).forEach((t: keyof typeof originalTranform) => { + if (!originalTranform[t]) { + return; + } + + Object.assign( + safeTransform, + convertCSSTransformToLightning(t, originalTranform[t]), + ); + }) + + return safeTransform; } const transformParts = transform.match(transformPartRegex); From f3ef0d98dbda38596d09a6619b0f9b06c7515a28 Mon Sep 17 00:00:00 2001 From: Mia Hall Date: Wed, 28 May 2025 14:02:22 -0400 Subject: [PATCH 2/5] Create transforms page for testing --- apps/react-lightning-example/package.json | 1 + apps/react-lightning-example/src/index.tsx | 8 ++- .../src/pages/TransformsPage.tsx | 57 +++++++++++++++++++ pnpm-lock.yaml | 3 + 4 files changed, 68 insertions(+), 1 deletion(-) create mode 100644 apps/react-lightning-example/src/pages/TransformsPage.tsx diff --git a/apps/react-lightning-example/package.json b/apps/react-lightning-example/package.json index 3e20dbd..cf1ea21 100644 --- a/apps/react-lightning-example/package.json +++ b/apps/react-lightning-example/package.json @@ -26,6 +26,7 @@ "@plextv/react-lightning": "workspace:*", "@plextv/react-lightning-components": "workspace:*", "@plextv/react-lightning-plugin-flexbox": "workspace:*", + "@plextv/react-lightning-plugin-css-transform": "workspace:*", "react": "18.3.1", "react-dom": "18.3.1", "react-router-dom": "7.1.5", diff --git a/apps/react-lightning-example/src/index.tsx b/apps/react-lightning-example/src/index.tsx index c699df1..87d3f7f 100644 --- a/apps/react-lightning-example/src/index.tsx +++ b/apps/react-lightning-example/src/index.tsx @@ -5,6 +5,7 @@ import { createRoot as createRootLng, } from '@plextv/react-lightning'; import { plugin as flexPlugin } from '@plextv/react-lightning-plugin-flexbox'; +import { plugin as cssTransformPlugin } from '@plextv/react-lightning-plugin-css-transform'; import { createRoot as createRootDom } from 'react-dom/client'; import { RouterProvider, createBrowserRouter } from 'react-router-dom'; import { keyMap } from './keyMap'; @@ -21,6 +22,7 @@ import { MyCustomTexture } from './shaders/MyCustomTexture'; import { NoiseEffect } from './shaders/NoiseEffect'; import { SimpleRadialEffect } from './shaders/SimpleRadialEffect'; import { StaticAlphaEffect } from './shaders/StaticAlphaEffect'; +import { TransformsPage } from './pages/TransformsPage'; const router = createBrowserRouter([ { @@ -51,6 +53,10 @@ const router = createBrowserRouter([ path: '/texture', element: , }, + { + path: '/transforms', + element: , + }, { path: '/page60', element: , @@ -77,7 +83,7 @@ const options: RenderOptions = { }), ], enableContextSpy: true, - plugins: [flexPlugin()], + plugins: [cssTransformPlugin(), flexPlugin()], effects: { Noise: NoiseEffect, StaticAlpha: StaticAlphaEffect, diff --git a/apps/react-lightning-example/src/pages/TransformsPage.tsx b/apps/react-lightning-example/src/pages/TransformsPage.tsx new file mode 100644 index 0000000..d701098 --- /dev/null +++ b/apps/react-lightning-example/src/pages/TransformsPage.tsx @@ -0,0 +1,57 @@ +import { Column, Row } from '@plexinc/react-lightning-components'; +import { useCallback, useState } from 'react'; +import Button from '../components/Button'; + +const img = + 'https://images.plex.tv/photo?size=large-720&scale=2&url=https://image.tmdb.org/t/p/original/65firYWt2FoK18KuYxnmHmVaEsL.jpg'; + + +export const TransformsPage = () => { + const [scale, setScale] = useState(1); + const [rotation, setRotation] = useState(0); + + const scaleUp = useCallback(() => { + setScale((state) => state * 1.25); + }, []); + const scaleDown = useCallback(() => { + setScale((state) => state * 0.8); + }, []); + const rotateLeft = useCallback(() => { + setRotation((state) => state + 15); + }, []); + const rotateRight = useCallback(() => { + setRotation((state) => state - 15); + }, []); + + return ( + <> + + + + + + + + + + + ); +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 546c756..15d680e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -74,6 +74,9 @@ importers: '@plextv/react-lightning-components': specifier: workspace:* version: link:../../packages/react-lightning-components + '@plextv/react-lightning-plugin-css-transform': + specifier: workspace:* + version: link:../../packages/plugin-css-transform '@plextv/react-lightning-plugin-flexbox': specifier: workspace:* version: link:../../packages/plugin-flexbox From 5d625bfec0c37fd2f72f1e1062bcd8b8f5480141 Mon Sep 17 00:00:00 2001 From: Mia Hall Date: Wed, 28 May 2025 14:35:25 -0400 Subject: [PATCH 3/5] Lint --- apps/react-lightning-example/src/index.tsx | 4 +-- .../src/pages/TransformsPage.tsx | 11 ++++---- .../src/utils/parseTransform.ts | 27 ++++++++++--------- 3 files changed, 22 insertions(+), 20 deletions(-) diff --git a/apps/react-lightning-example/src/index.tsx b/apps/react-lightning-example/src/index.tsx index 87d3f7f..337c4ae 100644 --- a/apps/react-lightning-example/src/index.tsx +++ b/apps/react-lightning-example/src/index.tsx @@ -4,8 +4,8 @@ import { type RenderOptions, createRoot as createRootLng, } from '@plextv/react-lightning'; -import { plugin as flexPlugin } from '@plextv/react-lightning-plugin-flexbox'; import { plugin as cssTransformPlugin } from '@plextv/react-lightning-plugin-css-transform'; +import { plugin as flexPlugin } from '@plextv/react-lightning-plugin-flexbox'; import { createRoot as createRootDom } from 'react-dom/client'; import { RouterProvider, createBrowserRouter } from 'react-router-dom'; import { keyMap } from './keyMap'; @@ -17,12 +17,12 @@ import { Page60 } from './pages/Page60'; import { PosterPage } from './pages/PosterPage'; import { ShaderPage } from './pages/ShaderPage'; import { TexturePage } from './pages/TexturePage'; +import { TransformsPage } from './pages/TransformsPage'; import { MyCustomShader } from './shaders/MyCustomShader'; import { MyCustomTexture } from './shaders/MyCustomTexture'; import { NoiseEffect } from './shaders/NoiseEffect'; import { SimpleRadialEffect } from './shaders/SimpleRadialEffect'; import { StaticAlphaEffect } from './shaders/StaticAlphaEffect'; -import { TransformsPage } from './pages/TransformsPage'; const router = createBrowserRouter([ { diff --git a/apps/react-lightning-example/src/pages/TransformsPage.tsx b/apps/react-lightning-example/src/pages/TransformsPage.tsx index d701098..9558042 100644 --- a/apps/react-lightning-example/src/pages/TransformsPage.tsx +++ b/apps/react-lightning-example/src/pages/TransformsPage.tsx @@ -1,11 +1,10 @@ -import { Column, Row } from '@plexinc/react-lightning-components'; +import { Column, Row } from '@plextv/react-lightning-components'; import { useCallback, useState } from 'react'; import Button from '../components/Button'; const img = 'https://images.plex.tv/photo?size=large-720&scale=2&url=https://image.tmdb.org/t/p/original/65firYWt2FoK18KuYxnmHmVaEsL.jpg'; - export const TransformsPage = () => { const [scale, setScale] = useState(1); const [rotation, setRotation] = useState(0); @@ -45,12 +44,14 @@ export const TransformsPage = () => { - + transform: [{ scale }, { rotate: `${rotation}deg` }], + }} + /> ); diff --git a/packages/plugin-css-transform/src/utils/parseTransform.ts b/packages/plugin-css-transform/src/utils/parseTransform.ts index d3ce24d..bf09f09 100644 --- a/packages/plugin-css-transform/src/utils/parseTransform.ts +++ b/packages/plugin-css-transform/src/utils/parseTransform.ts @@ -1,10 +1,11 @@ import type { Transform } from '@plextv/react-lightning-plugin-flexbox'; import { convertCSSTransformToLightning } from './convertCSSTransformToLightning'; -import { convertRotationValue } from './convertRotationValue'; const transformPartRegex = /(\w+)\(([^)]+)\)/g; -export function parseTransform(transform?: string | object | Array): Transform { +export function parseTransform( + transform?: string | object | Array, +): Transform { if (!transform) { return {}; } @@ -12,30 +13,30 @@ export function parseTransform(transform?: string | object | Array { - Object.assign( - transforms, - parseTransform(t), - ); - }); + for (const t of transform) { + Object.assign(transforms, parseTransform(t)); + } return transforms; } if (typeof transform === 'object') { const safeTransform: Transform = {}; - const originalTranform = transform as Record; - - Object.keys(originalTranform).forEach((t: keyof typeof originalTranform) => { + const originalTranform = transform as Record< + string, + string | number | number[] + >; + + for (const t of Object.keys(originalTranform)) { if (!originalTranform[t]) { - return; + continue; } Object.assign( safeTransform, convertCSSTransformToLightning(t, originalTranform[t]), ); - }) + } return safeTransform; } From 29c9a45a30e2ebf07ed5a1d9ba5a77a78ad388f8 Mon Sep 17 00:00:00 2001 From: Mia Hall Date: Wed, 28 May 2025 15:53:00 -0400 Subject: [PATCH 4/5] Add changeset --- .changeset/weak-cups-attack.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/weak-cups-attack.md diff --git a/.changeset/weak-cups-attack.md b/.changeset/weak-cups-attack.md new file mode 100644 index 0000000..cd12021 --- /dev/null +++ b/.changeset/weak-cups-attack.md @@ -0,0 +1,6 @@ +--- +"@plextv/react-lightning-plugin-css-transform": patch +"@plextv/react-lightning-example": patch +--- + +Allow transforms to be given as arrays From aabfb88b11182ebaf12e2340540beba2df987f9b Mon Sep 17 00:00:00 2001 From: Mia Hall Date: Thu, 29 May 2025 09:43:58 -0400 Subject: [PATCH 5/5] Lint --- .../src/pages/TransformsPage.tsx | 56 +++++++++---------- 1 file changed, 27 insertions(+), 29 deletions(-) diff --git a/apps/react-lightning-example/src/pages/TransformsPage.tsx b/apps/react-lightning-example/src/pages/TransformsPage.tsx index 9558042..8f60c91 100644 --- a/apps/react-lightning-example/src/pages/TransformsPage.tsx +++ b/apps/react-lightning-example/src/pages/TransformsPage.tsx @@ -23,36 +23,34 @@ export const TransformsPage = () => { }, []); return ( - <> - + + + + + + + - - - - - - - - - + /> + ); };