From 5d634d2bce64aaa27649a8cd006938059431425d Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 17 Jan 2024 14:16:38 +0700 Subject: [PATCH 1/8] remove default props from styled --- packages/zero-runtime/src/processors/styled.ts | 12 ------------ packages/zero-runtime/src/styled.jsx | 9 +-------- 2 files changed, 1 insertion(+), 20 deletions(-) diff --git a/packages/zero-runtime/src/processors/styled.ts b/packages/zero-runtime/src/processors/styled.ts index a19841510de232..b59df0c9c8a6d4 100644 --- a/packages/zero-runtime/src/processors/styled.ts +++ b/packages/zero-runtime/src/processors/styled.ts @@ -40,8 +40,6 @@ type ComponentMeta = { skipSx?: boolean; }; -type DefaultProps = Record; - /** * Linaria tag processor responsible for converting complex `styled()()` calls * at build-time to simple `styled` calls supported by runtime. @@ -115,8 +113,6 @@ export class StyledProcessor extends BaseProcessor { originalLocation: SourceLocation | null = null; - defaultProps: DefaultProps = {}; - constructor(params: Params, ...args: TailProcessorParams) { super(params, ...args); if (params.length <= 2) { @@ -333,11 +329,6 @@ export class StyledProcessor extends BaseProcessor { componentMetaExpression = parsedMeta as ObjectExpression; } } - if (this.defaultProps && Object.keys(this.defaultProps).length > 0) { - argProperties.push( - t.objectProperty(t.identifier('defaultProps'), valueToLiteral(this.defaultProps)), - ); - } const styledImportIdentifier = t.addNamedImport( this.tagSource.imported, @@ -419,9 +410,6 @@ export class StyledProcessor extends BaseProcessor { if ('variants' in componentData && componentData.variants) { variantsAccumulator.push(...(componentData.variants as unknown as VariantData[])); } - if ('defaultProps' in componentData && componentData.defaultProps) { - this.defaultProps = componentData.defaultProps as DefaultProps; - } } /** diff --git a/packages/zero-runtime/src/styled.jsx b/packages/zero-runtime/src/styled.jsx index c91633690ee652..c9c88918c2e73f 100644 --- a/packages/zero-runtime/src/styled.jsx +++ b/packages/zero-runtime/src/styled.jsx @@ -40,12 +40,7 @@ function defaultShouldForwardProp(propKey) { * @param {Object} componentMeta.defaultProps Default props object copied over and inlined from theme object */ export default function styled(tag, componentMeta = {}) { - const { - name, - slot, - defaultProps = {}, - shouldForwardProp = defaultShouldForwardProp, - } = componentMeta; + const { name, slot, shouldForwardProp = defaultShouldForwardProp } = componentMeta; /** * @TODO - Filter props and only pass necessary props to children * @@ -64,7 +59,6 @@ export default function styled(tag, componentMeta = {}) { * @param {string} options.name * @param {string} options.slot * @param {ShouldForwardProp} options.shouldForwardProp - * @param {Object} options.defaultProps Default props object copied over and inlined from theme object */ function scopedStyledWithOptions(options = {}) { const { displayName, classes = [], vars: cssVars = {}, variants = [] } = options; @@ -163,7 +157,6 @@ export default function styled(tag, componentMeta = {}) { }); StyledComponent.displayName = `Styled(${componentName})`; - StyledComponent.defaultProps = defaultProps; // eslint-disable-next-line no-underscore-dangle StyledComponent.__isStyled = true; From 7b6cbf33fecc16c69a225e878fbf5c683a025726 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 17 Jan 2024 20:42:12 +0700 Subject: [PATCH 2/8] add useThemeProps processro --- apps/zero-runtime-next-app/next.config.js | 11 +- apps/zero-runtime-next-app/src/app/page.tsx | 166 +++++++++--------- apps/zero-runtime-next-app/src/app/theme.ts | 12 ++ packages/mui-material/src/Badge/Badge.js | 2 +- .../src/zero-useThemeProps/index.ts | 2 + .../zero-runtime/exports/useThemeProps.js | 5 + packages/zero-runtime/package.json | 6 +- packages/zero-runtime/src/index.ts | 1 + .../src/processors/useThemeProps.ts | 55 ++++++ packages/zero-runtime/src/useThemeProps.d.ts | 5 + packages/zero-runtime/src/useThemeProps.js | 51 ++++++ packages/zero-runtime/tsup.config.ts | 2 +- packages/zero-unplugin/src/index.ts | 2 +- .../zero-vite-plugin/src/zero-vite-plugin.ts | 2 +- 14 files changed, 236 insertions(+), 86 deletions(-) create mode 100644 apps/zero-runtime-next-app/src/app/theme.ts create mode 100644 packages/mui-material/src/zero-useThemeProps/index.ts create mode 100644 packages/zero-runtime/exports/useThemeProps.js create mode 100644 packages/zero-runtime/src/processors/useThemeProps.ts create mode 100644 packages/zero-runtime/src/useThemeProps.d.ts create mode 100644 packages/zero-runtime/src/useThemeProps.js diff --git a/apps/zero-runtime-next-app/next.config.js b/apps/zero-runtime-next-app/next.config.js index 3524d4f9240c77..1613cdf13c5f6b 100644 --- a/apps/zero-runtime-next-app/next.config.js +++ b/apps/zero-runtime-next-app/next.config.js @@ -3,7 +3,16 @@ const { withZeroPlugin } = require('@mui/zero-next-plugin'); const { experimental_extendTheme: extendTheme } = require('@mui/material/styles'); -const theme = extendTheme({ cssVarPrefix: 'app' }); +const theme = extendTheme({ + cssVarPrefix: 'app', + components: { + MuiBadge: { + defaultProps: { + color: 'error', + }, + }, + }, +}); theme.applyDarkStyles = function applyDarkStyles(obj) { return { diff --git a/apps/zero-runtime-next-app/src/app/page.tsx b/apps/zero-runtime-next-app/src/app/page.tsx index 59edcbe6c33e14..4f12aaab004691 100644 --- a/apps/zero-runtime-next-app/src/app/page.tsx +++ b/apps/zero-runtime-next-app/src/app/page.tsx @@ -1,6 +1,11 @@ import Image from 'next/image'; import { styled } from '@mui/zero-runtime'; +import { ThemeProvider } from '@mui/material/styles'; +import Badge from '@mui/material/Badge'; +import Button from '@mui/material/Button'; + import styles from './page.module.css'; +import theme from './theme'; const Main = styled.main({ display: 'flex', @@ -74,91 +79,92 @@ const Description = styled.div({ export default function Home() { return ( -
- -

- Get started by editing  - src/app/page.tsx -

-
+ ); } diff --git a/apps/zero-runtime-next-app/src/app/theme.ts b/apps/zero-runtime-next-app/src/app/theme.ts new file mode 100644 index 00000000000000..c5f75923b9dddd --- /dev/null +++ b/apps/zero-runtime-next-app/src/app/theme.ts @@ -0,0 +1,12 @@ +'use client'; +import { createTheme } from '@mui/material/styles'; + +export default createTheme({ + components: { + MuiBadge: { + defaultProps: { + color: 'secondary', + }, + }, + }, +}); diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index bcb554b0b7f65d..20b2159ee06330 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -7,7 +7,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base/composeClas import { useBadge } from '@mui/base/useBadge'; import { useSlotProps } from '@mui/base'; import { styled } from '../zero-styled'; -import useThemeProps from '../styles/useThemeProps'; +import { useThemeProps } from '../zero-useThemeProps'; import capitalize from '../utils/capitalize'; import badgeClasses, { getBadgeUtilityClass } from './badgeClasses'; diff --git a/packages/mui-material/src/zero-useThemeProps/index.ts b/packages/mui-material/src/zero-useThemeProps/index.ts new file mode 100644 index 00000000000000..29f4fcddce6956 --- /dev/null +++ b/packages/mui-material/src/zero-useThemeProps/index.ts @@ -0,0 +1,2 @@ +// eslint-disable-next-line import/prefer-default-export +export { default as useThemeProps } from '../styles/useThemeProps'; diff --git a/packages/zero-runtime/exports/useThemeProps.js b/packages/zero-runtime/exports/useThemeProps.js new file mode 100644 index 00000000000000..b06ff81007d7ba --- /dev/null +++ b/packages/zero-runtime/exports/useThemeProps.js @@ -0,0 +1,5 @@ +Object.defineProperty(exports, '__esModule', { + value: true, +}); + +exports.default = require('../processors/useThemeProps').UseThemePropsProcessor; diff --git a/packages/zero-runtime/package.json b/packages/zero-runtime/package.json index f10bbd6f0b8b11..dac44d1b918881 100644 --- a/packages/zero-runtime/package.json +++ b/packages/zero-runtime/package.json @@ -55,7 +55,8 @@ "default": "./exports/styled.js", "sx": "./exports/sx.js", "keyframes": "./exports/keyframes.js", - "generateAtomics": "./exports/generateAtomics.js" + "generateAtomics": "./exports/generateAtomics.js", + "useThemeProps": "./exports/useThemeProps.js" } }, "files": [ @@ -102,6 +103,9 @@ }, "./exports/sx": { "default": "./exports/sx.js" + }, + "./exports/useThemeProps": { + "default": "./exports/useThemeProps.js" } } } diff --git a/packages/zero-runtime/src/index.ts b/packages/zero-runtime/src/index.ts index 7f2e376b6ce020..0aa383a3d10e82 100644 --- a/packages/zero-runtime/src/index.ts +++ b/packages/zero-runtime/src/index.ts @@ -2,3 +2,4 @@ export { default as styled, type StyledComponent } from './styled'; export { default as sx } from './sx'; export { default as keyframes } from './keyframes'; export { generateAtomics, atomics } from './generateAtomics'; +export { default as useThemeProps } from './useThemeProps'; diff --git a/packages/zero-runtime/src/processors/useThemeProps.ts b/packages/zero-runtime/src/processors/useThemeProps.ts new file mode 100644 index 00000000000000..981ba9310a94c4 --- /dev/null +++ b/packages/zero-runtime/src/processors/useThemeProps.ts @@ -0,0 +1,55 @@ +import { validateParams, BaseProcessor } from '@linaria/tags'; +import type { Expression, Params, TailProcessorParams } from '@linaria/tags'; +import { parseExpression } from '@babel/parser'; +import { ObjectExpression } from '@babel/types'; + +export class UseThemePropsProcessor extends BaseProcessor { + tagParams: ObjectExpression; + + constructor(params: Params, ...args: TailProcessorParams) { + super(params, ...args); + validateParams(params, ['callee', 'call'], `Invalid use of ${this.tagSource.imported} tag.`); + const [, [, tagParams]] = params; + console.log('tagParams.source', tagParams.source); + this.tagParams = parseExpression(tagParams.source) as ObjectExpression; + } + + build(): void {} + + doEvaltimeReplacement(): void {} + + get value(): Expression { + return this.astService.nullLiteral(); + } + + /** + * ```js + * const props = useThemeProps({ + * theme: themeConfig, + * props, + * + * }) + * ``` + */ + doRuntimeReplacement(): void { + const t = this.astService; + + const useThemePropsImportIdentifier = t.addNamedImport( + this.tagSource.imported, + process.env.PACKAGE_NAME as string, + ); + + const themeImportIdentifier = this.astService.addDefaultImport( + `${process.env.PACKAGE_NAME}/theme`, + 'theme', + ); + + this.tagParams.properties.push(t.objectProperty(t.identifier('theme'), themeImportIdentifier)); + + this.replacer(t.callExpression(useThemePropsImportIdentifier, [this.tagParams]), true); + } + + public override get asSelector(): string { + return `.${this.className}`; + } +} diff --git a/packages/zero-runtime/src/useThemeProps.d.ts b/packages/zero-runtime/src/useThemeProps.d.ts new file mode 100644 index 00000000000000..5b9a439c547293 --- /dev/null +++ b/packages/zero-runtime/src/useThemeProps.d.ts @@ -0,0 +1,5 @@ +export default function useThemeProps(params: { + theme: Record; + props: Props; + name: string; +}): Props; diff --git a/packages/zero-runtime/src/useThemeProps.js b/packages/zero-runtime/src/useThemeProps.js new file mode 100644 index 00000000000000..3b007f43b041e1 --- /dev/null +++ b/packages/zero-runtime/src/useThemeProps.js @@ -0,0 +1,51 @@ +import { internal_resolveProps as resolveProps } from '@mui/utils'; + +export default function useThemeProps({ theme, props, name }) { + if ( + !theme || + !theme.components || + !theme.components[name] || + !theme.components[name].defaultProps + ) { + return props; + } + + const defaultProps = theme.components[name].defaultProps; + + // The same logic as in packages/mui-utils/src/resolveProps.ts + // TODO: consider reusing the logic from the utils package + const output = { ...props }; + + Object.keys(defaultProps).forEach((propName) => { + if (propName.toString().match(/^(components|slots)$/)) { + output[propName] = { + ...defaultProps[propName], + ...output[propName], + }; + } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) { + const defaultSlotProps = defaultProps[propName] || {}; + const slotProps = props[propName]; + output[propName] = {}; + + if (!slotProps || !Object.keys(slotProps)) { + // Reduce the iteration if the slot props is empty + output[propName] = defaultSlotProps; + } else if (!defaultSlotProps || !Object.keys(defaultSlotProps)) { + // Reduce the iteration if the default slot props is empty + output[propName] = slotProps; + } else { + output[propName] = { ...slotProps }; + Object.keys(defaultSlotProps).forEach((slotPropName) => { + output[propName][slotPropName] = resolveProps( + defaultSlotProps[slotPropName], + slotProps[slotPropName], + ); + }); + } + } else if (output[propName] === undefined) { + output[propName] = defaultProps[propName]; + } + }); + + return output; +} diff --git a/packages/zero-runtime/tsup.config.ts b/packages/zero-runtime/tsup.config.ts index c87ce3ef6fa047..a0aacf5ba21939 100644 --- a/packages/zero-runtime/tsup.config.ts +++ b/packages/zero-runtime/tsup.config.ts @@ -2,7 +2,7 @@ import { Options, defineConfig } from 'tsup'; import config from '../../tsup.config'; import packageJson from './package.json'; -const processors = ['styled', 'sx', 'keyframes', 'generateAtomics']; +const processors = ['styled', 'sx', 'keyframes', 'generateAtomics', 'useThemeProps']; const external = ['react', 'react-is', 'prop-types']; const baseConfig: Options = { diff --git a/packages/zero-unplugin/src/index.ts b/packages/zero-unplugin/src/index.ts index 54b22b7637a3cf..7624d328457581 100644 --- a/packages/zero-unplugin/src/index.ts +++ b/packages/zero-unplugin/src/index.ts @@ -170,7 +170,7 @@ export const plugin = createUnplugin((options) => { if (tagResult) { return tagResult; } - if (source.endsWith('/zero-styled')) { + if (source.endsWith('/zero-styled') || source.endsWith('/zero-useThemeProps')) { return `${process.env.RUNTIME_PACKAGE_NAME}/exports/${tag}`; } return null; diff --git a/packages/zero-vite-plugin/src/zero-vite-plugin.ts b/packages/zero-vite-plugin/src/zero-vite-plugin.ts index e4b855d86126b0..bafee077d0c010 100644 --- a/packages/zero-vite-plugin/src/zero-vite-plugin.ts +++ b/packages/zero-vite-plugin/src/zero-vite-plugin.ts @@ -205,7 +205,7 @@ export default function zeroVitePlugin({ if (tagResult) { return tagResult; } - if (source.endsWith('/zero-styled')) { + if (source.endsWith('/zero-styled') || source.endsWith('/zero-useThemeProps')) { return `${process.env.RUNTIME_PACKAGE_NAME}/exports/${tag}`; } return null; From 2860fcfa8c36bdb59cd362dec1d66b9e1ba53422 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 18 Jan 2024 16:54:27 +0700 Subject: [PATCH 3/8] switch to createUseThemeProps --- apps/zero-runtime-next-app/src/app/layout.tsx | 3 + packages/mui-material/src/Badge/Badge.js | 4 +- .../src/zero-useThemeProps/index.ts | 6 +- packages/zero-runtime/package.json | 4 +- packages/zero-runtime/src/index.ts | 2 +- .../src/processors/useThemeProps.ts | 27 +++--- packages/zero-runtime/src/useThemeProps.d.ts | 10 +-- packages/zero-runtime/src/useThemeProps.js | 87 ++++++++++--------- packages/zero-unplugin/src/index.ts | 5 ++ 9 files changed, 81 insertions(+), 67 deletions(-) diff --git a/apps/zero-runtime-next-app/src/app/layout.tsx b/apps/zero-runtime-next-app/src/app/layout.tsx index 386d6dccbc2cb9..05d2be2260599c 100644 --- a/apps/zero-runtime-next-app/src/app/layout.tsx +++ b/apps/zero-runtime-next-app/src/app/layout.tsx @@ -2,9 +2,12 @@ import type { Metadata } from 'next'; import { styled } from '@mui/zero-runtime'; import { Inter } from 'next/font/google'; import '@mui/zero-runtime/styles.css'; +import theme from '@mui/zero-runtime/theme'; import './globals.css'; +console.log('zero theme', theme); + const inter = Inter({ subsets: ['latin'] }); export const metadata: Metadata = { diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index 20b2159ee06330..0e68dda88ed9ef 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -7,13 +7,15 @@ import { unstable_composeClasses as composeClasses } from '@mui/base/composeClas import { useBadge } from '@mui/base/useBadge'; import { useSlotProps } from '@mui/base'; import { styled } from '../zero-styled'; -import { useThemeProps } from '../zero-useThemeProps'; +import { createUseThemeProps } from '../zero-useThemeProps'; import capitalize from '../utils/capitalize'; import badgeClasses, { getBadgeUtilityClass } from './badgeClasses'; const RADIUS_STANDARD = 10; const RADIUS_DOT = 4; +const useThemeProps = createUseThemeProps(); + const useUtilityClasses = (ownerState) => { const { color, anchorOrigin, invisible, overlap, variant, classes = {} } = ownerState; diff --git a/packages/mui-material/src/zero-useThemeProps/index.ts b/packages/mui-material/src/zero-useThemeProps/index.ts index 29f4fcddce6956..a33da4893fea14 100644 --- a/packages/mui-material/src/zero-useThemeProps/index.ts +++ b/packages/mui-material/src/zero-useThemeProps/index.ts @@ -1,2 +1,6 @@ +import useThemeProps from '../styles/useThemeProps'; + // eslint-disable-next-line import/prefer-default-export -export { default as useThemeProps } from '../styles/useThemeProps'; +export function createUseThemeProps() { + return useThemeProps; +} diff --git a/packages/zero-runtime/package.json b/packages/zero-runtime/package.json index dac44d1b918881..1da466332fea7d 100644 --- a/packages/zero-runtime/package.json +++ b/packages/zero-runtime/package.json @@ -56,7 +56,7 @@ "sx": "./exports/sx.js", "keyframes": "./exports/keyframes.js", "generateAtomics": "./exports/generateAtomics.js", - "useThemeProps": "./exports/useThemeProps.js" + "createUseThemeProps": "./exports/useThemeProps.js" } }, "files": [ @@ -104,7 +104,7 @@ "./exports/sx": { "default": "./exports/sx.js" }, - "./exports/useThemeProps": { + "./exports/createUseThemeProps": { "default": "./exports/useThemeProps.js" } } diff --git a/packages/zero-runtime/src/index.ts b/packages/zero-runtime/src/index.ts index 0aa383a3d10e82..c0fceeaf188f8a 100644 --- a/packages/zero-runtime/src/index.ts +++ b/packages/zero-runtime/src/index.ts @@ -2,4 +2,4 @@ export { default as styled, type StyledComponent } from './styled'; export { default as sx } from './sx'; export { default as keyframes } from './keyframes'; export { generateAtomics, atomics } from './generateAtomics'; -export { default as useThemeProps } from './useThemeProps'; +export { default as createUseThemeProps } from './useThemeProps'; diff --git a/packages/zero-runtime/src/processors/useThemeProps.ts b/packages/zero-runtime/src/processors/useThemeProps.ts index 981ba9310a94c4..fb668206262570 100644 --- a/packages/zero-runtime/src/processors/useThemeProps.ts +++ b/packages/zero-runtime/src/processors/useThemeProps.ts @@ -1,17 +1,10 @@ import { validateParams, BaseProcessor } from '@linaria/tags'; import type { Expression, Params, TailProcessorParams } from '@linaria/tags'; -import { parseExpression } from '@babel/parser'; -import { ObjectExpression } from '@babel/types'; export class UseThemePropsProcessor extends BaseProcessor { - tagParams: ObjectExpression; - constructor(params: Params, ...args: TailProcessorParams) { super(params, ...args); - validateParams(params, ['callee', 'call'], `Invalid use of ${this.tagSource.imported} tag.`); - const [, [, tagParams]] = params; - console.log('tagParams.source', tagParams.source); - this.tagParams = parseExpression(tagParams.source) as ObjectExpression; + validateParams(params, ['callee', 'call'], BaseProcessor.SKIP); } build(): void {} @@ -23,12 +16,11 @@ export class UseThemePropsProcessor extends BaseProcessor { } /** - * ```js - * const props = useThemeProps({ - * theme: themeConfig, - * props, + * Add `theme` config to the `createUseThemeProps` call argument: * - * }) + * ```diff + * - const useThemeProps = createUseThemeProps(); + * + const useThemeProps = createUseThemeProps(theme); * ``` */ doRuntimeReplacement(): void { @@ -38,15 +30,20 @@ export class UseThemePropsProcessor extends BaseProcessor { this.tagSource.imported, process.env.PACKAGE_NAME as string, ); + console.log('useThemePropsImportIdentifier', useThemePropsImportIdentifier); const themeImportIdentifier = this.astService.addDefaultImport( `${process.env.PACKAGE_NAME}/theme`, 'theme', ); - this.tagParams.properties.push(t.objectProperty(t.identifier('theme'), themeImportIdentifier)); + console.log('themeImportIdentifier', themeImportIdentifier); - this.replacer(t.callExpression(useThemePropsImportIdentifier, [this.tagParams]), true); + this.replacer( + t.callExpression(useThemePropsImportIdentifier, [t.identifier(themeImportIdentifier.name)]), + true, + ); + console.log(this.tagSourceCode()); } public override get asSelector(): string { diff --git a/packages/zero-runtime/src/useThemeProps.d.ts b/packages/zero-runtime/src/useThemeProps.d.ts index 5b9a439c547293..7fc1bbc9ea4f37 100644 --- a/packages/zero-runtime/src/useThemeProps.d.ts +++ b/packages/zero-runtime/src/useThemeProps.d.ts @@ -1,5 +1,5 @@ -export default function useThemeProps(params: { - theme: Record; - props: Props; - name: string; -}): Props; +interface UseThemeProps { + (params: { theme: Record; props: Props; name: string }): Props; +} + +export default function createUseThemeProps(theme: any): UseThemeProps; diff --git a/packages/zero-runtime/src/useThemeProps.js b/packages/zero-runtime/src/useThemeProps.js index 3b007f43b041e1..d03c97cffe511e 100644 --- a/packages/zero-runtime/src/useThemeProps.js +++ b/packages/zero-runtime/src/useThemeProps.js @@ -1,51 +1,54 @@ import { internal_resolveProps as resolveProps } from '@mui/utils'; -export default function useThemeProps({ theme, props, name }) { - if ( - !theme || - !theme.components || - !theme.components[name] || - !theme.components[name].defaultProps - ) { - return props; - } +export default function createUseThemeProps(theme) { + console.log('theme', theme); + return function useThemeProps({ props, name }) { + if ( + !theme || + !theme.components || + !theme.components[name] || + !theme.components[name].defaultProps + ) { + return props; + } - const defaultProps = theme.components[name].defaultProps; + const defaultProps = theme.components[name].defaultProps; - // The same logic as in packages/mui-utils/src/resolveProps.ts - // TODO: consider reusing the logic from the utils package - const output = { ...props }; + // The same logic as in packages/mui-utils/src/resolveProps.ts + // TODO: consider reusing the logic from the utils package + const output = { ...props }; - Object.keys(defaultProps).forEach((propName) => { - if (propName.toString().match(/^(components|slots)$/)) { - output[propName] = { - ...defaultProps[propName], - ...output[propName], - }; - } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) { - const defaultSlotProps = defaultProps[propName] || {}; - const slotProps = props[propName]; - output[propName] = {}; + Object.keys(defaultProps).forEach((propName) => { + if (propName.toString().match(/^(components|slots)$/)) { + output[propName] = { + ...defaultProps[propName], + ...output[propName], + }; + } else if (propName.toString().match(/^(componentsProps|slotProps)$/)) { + const defaultSlotProps = defaultProps[propName] || {}; + const slotProps = props[propName]; + output[propName] = {}; - if (!slotProps || !Object.keys(slotProps)) { - // Reduce the iteration if the slot props is empty - output[propName] = defaultSlotProps; - } else if (!defaultSlotProps || !Object.keys(defaultSlotProps)) { - // Reduce the iteration if the default slot props is empty - output[propName] = slotProps; - } else { - output[propName] = { ...slotProps }; - Object.keys(defaultSlotProps).forEach((slotPropName) => { - output[propName][slotPropName] = resolveProps( - defaultSlotProps[slotPropName], - slotProps[slotPropName], - ); - }); + if (!slotProps || !Object.keys(slotProps)) { + // Reduce the iteration if the slot props is empty + output[propName] = defaultSlotProps; + } else if (!defaultSlotProps || !Object.keys(defaultSlotProps)) { + // Reduce the iteration if the default slot props is empty + output[propName] = slotProps; + } else { + output[propName] = { ...slotProps }; + Object.keys(defaultSlotProps).forEach((slotPropName) => { + output[propName][slotPropName] = resolveProps( + defaultSlotProps[slotPropName], + slotProps[slotPropName], + ); + }); + } + } else if (output[propName] === undefined) { + output[propName] = defaultProps[propName]; } - } else if (output[propName] === undefined) { - output[propName] = defaultProps[propName]; - } - }); + }); - return output; + return output; + }; } diff --git a/packages/zero-unplugin/src/index.ts b/packages/zero-unplugin/src/index.ts index 7624d328457581..2b91e96d2955bb 100644 --- a/packages/zero-unplugin/src/index.ts +++ b/packages/zero-unplugin/src/index.ts @@ -191,6 +191,11 @@ export const plugin = createUnplugin((options) => { try { const result = await transform(transformServices, code, asyncResolve); + if (id.includes('mui-material') && id.endsWith('Badge.js')) { + console.log('code', result.code); + console.log('css', result.cssText); + } + if (!result.cssText) { return null; } From 063604b450775065fb10bbdd93c0f5593c523623 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 18 Jan 2024 23:02:11 +0700 Subject: [PATCH 4/8] replace component name with defaultProps --- apps/zero-runtime-next-app/src/app/layout.tsx | 3 - packages/mui-material/src/Badge/Badge.js | 2 +- .../src/zero-useThemeProps/index.ts | 4 +- .../src/processors/useThemeProps.ts | 63 ++++++++++++------- packages/zero-runtime/src/useThemeProps.js | 22 +++---- packages/zero-unplugin/src/index.ts | 5 -- 6 files changed, 55 insertions(+), 44 deletions(-) diff --git a/apps/zero-runtime-next-app/src/app/layout.tsx b/apps/zero-runtime-next-app/src/app/layout.tsx index 05d2be2260599c..386d6dccbc2cb9 100644 --- a/apps/zero-runtime-next-app/src/app/layout.tsx +++ b/apps/zero-runtime-next-app/src/app/layout.tsx @@ -2,12 +2,9 @@ import type { Metadata } from 'next'; import { styled } from '@mui/zero-runtime'; import { Inter } from 'next/font/google'; import '@mui/zero-runtime/styles.css'; -import theme from '@mui/zero-runtime/theme'; import './globals.css'; -console.log('zero theme', theme); - const inter = Inter({ subsets: ['latin'] }); export const metadata: Metadata = { diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index 0e68dda88ed9ef..d27dae67ed0f98 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -14,7 +14,7 @@ import badgeClasses, { getBadgeUtilityClass } from './badgeClasses'; const RADIUS_STANDARD = 10; const RADIUS_DOT = 4; -const useThemeProps = createUseThemeProps(); +const useThemeProps = createUseThemeProps('MuiBadge'); const useUtilityClasses = (ownerState) => { const { color, anchorOrigin, invisible, overlap, variant, classes = {} } = ownerState; diff --git a/packages/mui-material/src/zero-useThemeProps/index.ts b/packages/mui-material/src/zero-useThemeProps/index.ts index a33da4893fea14..cc539f64807b6c 100644 --- a/packages/mui-material/src/zero-useThemeProps/index.ts +++ b/packages/mui-material/src/zero-useThemeProps/index.ts @@ -1,6 +1,6 @@ import useThemeProps from '../styles/useThemeProps'; -// eslint-disable-next-line import/prefer-default-export -export function createUseThemeProps() { +// eslint-disable-next-line import/prefer-default-export, @typescript-eslint/no-unused-vars +export function createUseThemeProps(name: string) { return useThemeProps; } diff --git a/packages/zero-runtime/src/processors/useThemeProps.ts b/packages/zero-runtime/src/processors/useThemeProps.ts index fb668206262570..395f00b6144eb4 100644 --- a/packages/zero-runtime/src/processors/useThemeProps.ts +++ b/packages/zero-runtime/src/processors/useThemeProps.ts @@ -1,52 +1,73 @@ -import { validateParams, BaseProcessor } from '@linaria/tags'; +import { validateParams, IOptions as IBaseOptions } from '@linaria/tags'; import type { Expression, Params, TailProcessorParams } from '@linaria/tags'; +import BaseProcessor from './base-processor'; +import { valueToLiteral } from '../utils/valueToLiteral'; + +type IOptions = IBaseOptions & { + themeArgs: { + theme: { components?: Record }> }; + }; +}; export class UseThemePropsProcessor extends BaseProcessor { + componentName: string; + constructor(params: Params, ...args: TailProcessorParams) { super(params, ...args); - validateParams(params, ['callee', 'call'], BaseProcessor.SKIP); + if (params.length > 2) { + // no need to do any processing if it is an already transformed call or just a reference. + throw BaseProcessor.SKIP; + } + validateParams(params, ['callee', 'call'], `Invalid use of ${this.tagSource.imported} tag.`); + const [, callParam] = params; + const [, callArg] = callParam; + if (!callArg || callArg.ex.type !== 'StringLiteral') { + throw new Error( + `Invalid usage of \`createUseThemeProps\` tag, expected one string literal argument but got ${callArg?.ex.type}.`, + ); + } + this.componentName = callArg.ex.value; } + // eslint-disable-next-line class-methods-use-this build(): void {} - doEvaltimeReplacement(): void {} + doEvaltimeReplacement(): void { + this.replacer(this.value, false); + } get value(): Expression { return this.astService.nullLiteral(); } - /** - * Add `theme` config to the `createUseThemeProps` call argument: - * - * ```diff - * - const useThemeProps = createUseThemeProps(); - * + const useThemeProps = createUseThemeProps(theme); - * ``` - */ doRuntimeReplacement(): void { const t = this.astService; + const { themeArgs: { theme } = {} } = this.options as IOptions; + if ( + !theme || + !theme.components || + !theme.components[this.componentName] || + !theme.components[this.componentName].defaultProps + ) { + return; + } + const useThemePropsImportIdentifier = t.addNamedImport( this.tagSource.imported, process.env.PACKAGE_NAME as string, ); - console.log('useThemePropsImportIdentifier', useThemePropsImportIdentifier); - - const themeImportIdentifier = this.astService.addDefaultImport( - `${process.env.PACKAGE_NAME}/theme`, - 'theme', - ); - - console.log('themeImportIdentifier', themeImportIdentifier); this.replacer( - t.callExpression(useThemePropsImportIdentifier, [t.identifier(themeImportIdentifier.name)]), + t.callExpression(useThemePropsImportIdentifier, [ + valueToLiteral(theme.components[this.componentName].defaultProps), + ]), true, ); - console.log(this.tagSourceCode()); } public override get asSelector(): string { + // For completeness, this is not intended to be used. return `.${this.className}`; } } diff --git a/packages/zero-runtime/src/useThemeProps.js b/packages/zero-runtime/src/useThemeProps.js index d03c97cffe511e..da5edcd844ca8a 100644 --- a/packages/zero-runtime/src/useThemeProps.js +++ b/packages/zero-runtime/src/useThemeProps.js @@ -1,19 +1,17 @@ import { internal_resolveProps as resolveProps } from '@mui/utils'; -export default function createUseThemeProps(theme) { - console.log('theme', theme); - return function useThemeProps({ props, name }) { - if ( - !theme || - !theme.components || - !theme.components[name] || - !theme.components[name].defaultProps - ) { +/** + * Runtime function for creating `useThemeProps`. + * In the codebase, the first argument will be a string that represent the component slug (should match one of the `theme.components.*`). + * Then, the transformation will replace the first argument with the `defaultProps` object if provided. + */ +export default function createUseThemeProps(nameOrDefaultProps) { + return function useThemeProps({ props }) { + if (typeof nameOrDefaultProps === 'string') { + // if no default props provided in the theme, return the props as is. return props; } - - const defaultProps = theme.components[name].defaultProps; - + const defaultProps = nameOrDefaultProps; // The same logic as in packages/mui-utils/src/resolveProps.ts // TODO: consider reusing the logic from the utils package const output = { ...props }; diff --git a/packages/zero-unplugin/src/index.ts b/packages/zero-unplugin/src/index.ts index 2b91e96d2955bb..7624d328457581 100644 --- a/packages/zero-unplugin/src/index.ts +++ b/packages/zero-unplugin/src/index.ts @@ -191,11 +191,6 @@ export const plugin = createUnplugin((options) => { try { const result = await transform(transformServices, code, asyncResolve); - if (id.includes('mui-material') && id.endsWith('Badge.js')) { - console.log('code', result.code); - console.log('css', result.cssText); - } - if (!result.cssText) { return null; } From ecdb59181cd8da770360c87933514824da422409 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 19 Jan 2024 10:54:57 +0700 Subject: [PATCH 5/8] render Badge --- apps/zero-runtime-next-app/src/app/page.tsx | 168 ++++++++++---------- 1 file changed, 83 insertions(+), 85 deletions(-) diff --git a/apps/zero-runtime-next-app/src/app/page.tsx b/apps/zero-runtime-next-app/src/app/page.tsx index 8f77e7a6b875fa..821cbafae8667a 100644 --- a/apps/zero-runtime-next-app/src/app/page.tsx +++ b/apps/zero-runtime-next-app/src/app/page.tsx @@ -1,11 +1,7 @@ import Image from 'next/image'; import { styled } from '@mui/zero-runtime'; -import { ThemeProvider } from '@mui/material/styles'; import Badge from '@mui/material/Badge'; -import Button from '@mui/material/Button'; - import styles from './page.module.css'; -import theme from './theme'; const Main = styled.main({ color: 'rgb(var(--foreground-rgb))', @@ -81,92 +77,94 @@ const Description = styled.div({ export default function Home() { return ( - -
- -
Hey
- - - -

- Get started by editing  - src/app/page.tsx -

- - -
- Next.js Logo -
-
); } From cc17bba32a1d4c3e98f6f1d1e869bb08faa00ef5 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 19 Jan 2024 10:55:30 +0700 Subject: [PATCH 6/8] revert theme --- apps/zero-runtime-next-app/src/app/theme.ts | 12 ------------ 1 file changed, 12 deletions(-) delete mode 100644 apps/zero-runtime-next-app/src/app/theme.ts diff --git a/apps/zero-runtime-next-app/src/app/theme.ts b/apps/zero-runtime-next-app/src/app/theme.ts deleted file mode 100644 index c5f75923b9dddd..00000000000000 --- a/apps/zero-runtime-next-app/src/app/theme.ts +++ /dev/null @@ -1,12 +0,0 @@ -'use client'; -import { createTheme } from '@mui/material/styles'; - -export default createTheme({ - components: { - MuiBadge: { - defaultProps: { - color: 'secondary', - }, - }, - }, -}); From d3209fd3369fa299ebe59d927e8848a7d23a70b7 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 19 Jan 2024 11:29:54 +0700 Subject: [PATCH 7/8] add eslint check for createUseThemeProps --- .../rules/mui-name-matches-component-name.js | 9 +++++ .../mui-name-matches-component-name.test.js | 35 +++++++++++++++++++ 2 files changed, 44 insertions(+) diff --git a/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.js b/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.js index 70aabd06e4d7f8..db51e2b85a4023 100644 --- a/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.js +++ b/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.js @@ -68,6 +68,15 @@ const rule = { return { CallExpression(node) { + const isCreateUseThemePropsCall = node.callee.name === 'createUseThemeProps'; + if (isCreateUseThemePropsCall) { + if (!node.arguments.length) { + context.report({ node, messageId: 'noNameValue' }); + } else if (node.arguments[0].type !== 'Literal' || !node.arguments[0].value) { + context.report({ node: node.arguments[0], messageId: 'noNameValue' }); + } + } + let nameLiteral = null; const isUseThemePropsCall = node.callee.name === 'useThemeProps'; if (isUseThemePropsCall) { diff --git a/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.test.js b/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.test.js index 34f55378923bed..b151a90806a1f4 100644 --- a/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.test.js +++ b/packages/eslint-plugin-material-ui/src/rules/mui-name-matches-component-name.test.js @@ -45,6 +45,9 @@ ruleTester.run('mui-name-matches-component-name', rule, { useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiGrid2' }), }) as OverridableComponent; `, + ` + const useThemeProps = createUseThemeProps('MuiBadge'); + `, { code: ` const StaticDateRangePicker = React.forwardRef(function StaticDateRangePicker( @@ -142,5 +145,37 @@ ruleTester.run('mui-name-matches-component-name', rule, { }, ], }, + { + code: ` + const useThemeProps = createUseThemeProps(); + + const Badge = React.forwardRef(function Badge(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiBadge' }); + }); + `, + errors: [ + { + message: + 'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.', + type: 'CallExpression', + }, + ], + }, + { + code: ` + const useThemeProps = createUseThemeProps({ name: 'MuiBadge' }); + + const Badge = React.forwardRef(function Badge(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiBadge' }); + }); + `, + errors: [ + { + message: + 'Unable to resolve `name`. Please hardcode the `name` i.e. use a string literal.', + type: 'ObjectExpression', + }, + ], + }, ], }); From 874fd66a453ba51d8741305229d4636795be28e4 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 24 Jan 2024 18:08:55 +0700 Subject: [PATCH 8/8] update as suggestion --- apps/zero-runtime-next-app/next.config.js | 2 ++ apps/zero-runtime-next-app/src/app/page.tsx | 2 +- packages/mui-material/src/Badge/Badge.js | 3 +-- packages/mui-material/src/zero-styled/index.d.ts | 2 -- packages/mui-material/src/zero-styled/index.js | 2 -- .../src/{zero-useThemeProps => zero-styled}/index.ts | 4 +++- packages/zero-runtime/exports/createUseThemeProps.js | 5 +++++ packages/zero-runtime/exports/useThemeProps.js | 5 ----- packages/zero-runtime/package.json | 4 ++-- .../src/{useThemeProps.d.ts => createUseThemeProps.d.ts} | 0 .../src/{useThemeProps.js => createUseThemeProps.js} | 0 packages/zero-runtime/src/index.ts | 2 +- .../{useThemeProps.ts => createUseThemeProps.ts} | 9 ++------- packages/zero-runtime/tsup.config.ts | 2 +- packages/zero-unplugin/src/index.ts | 2 +- 15 files changed, 19 insertions(+), 25 deletions(-) delete mode 100644 packages/mui-material/src/zero-styled/index.d.ts delete mode 100644 packages/mui-material/src/zero-styled/index.js rename packages/mui-material/src/{zero-useThemeProps => zero-styled}/index.ts (53%) create mode 100644 packages/zero-runtime/exports/createUseThemeProps.js delete mode 100644 packages/zero-runtime/exports/useThemeProps.js rename packages/zero-runtime/src/{useThemeProps.d.ts => createUseThemeProps.d.ts} (100%) rename packages/zero-runtime/src/{useThemeProps.js => createUseThemeProps.js} (100%) rename packages/zero-runtime/src/processors/{useThemeProps.ts => createUseThemeProps.ts} (89%) diff --git a/apps/zero-runtime-next-app/next.config.js b/apps/zero-runtime-next-app/next.config.js index efb75c12861667..57a52d81b50b8d 100644 --- a/apps/zero-runtime-next-app/next.config.js +++ b/apps/zero-runtime-next-app/next.config.js @@ -13,6 +13,8 @@ const theme = extendTheme({ }, }, }); +theme.getColorSchemeSelector = (targetColorScheme) => + `[data-mui-color-scheme="${targetColorScheme}"] &`; /** * @typedef {import('@mui/zero-next-plugin').ZeroPluginConfig} ZeroPluginConfig diff --git a/apps/zero-runtime-next-app/src/app/page.tsx b/apps/zero-runtime-next-app/src/app/page.tsx index 821cbafae8667a..377dca936779c3 100644 --- a/apps/zero-runtime-next-app/src/app/page.tsx +++ b/apps/zero-runtime-next-app/src/app/page.tsx @@ -78,7 +78,7 @@ const Description = styled.div({ export default function Home() { return (
- +
Hey
 diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index d27dae67ed0f98..0acd4237363ddf 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -6,8 +6,7 @@ import { usePreviousProps } from '@mui/utils'; import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses'; import { useBadge } from '@mui/base/useBadge'; import { useSlotProps } from '@mui/base'; -import { styled } from '../zero-styled'; -import { createUseThemeProps } from '../zero-useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import capitalize from '../utils/capitalize'; import badgeClasses, { getBadgeUtilityClass } from './badgeClasses'; diff --git a/packages/mui-material/src/zero-styled/index.d.ts b/packages/mui-material/src/zero-styled/index.d.ts deleted file mode 100644 index 1fe160d7d76817..00000000000000 --- a/packages/mui-material/src/zero-styled/index.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -// eslint-disable-next-line import/prefer-default-export -export { default as styled } from '../styles/styled'; diff --git a/packages/mui-material/src/zero-styled/index.js b/packages/mui-material/src/zero-styled/index.js deleted file mode 100644 index 1fe160d7d76817..00000000000000 --- a/packages/mui-material/src/zero-styled/index.js +++ /dev/null @@ -1,2 +0,0 @@ -// eslint-disable-next-line import/prefer-default-export -export { default as styled } from '../styles/styled'; diff --git a/packages/mui-material/src/zero-useThemeProps/index.ts b/packages/mui-material/src/zero-styled/index.ts similarity index 53% rename from packages/mui-material/src/zero-useThemeProps/index.ts rename to packages/mui-material/src/zero-styled/index.ts index cc539f64807b6c..fc74b033f7d4a6 100644 --- a/packages/mui-material/src/zero-useThemeProps/index.ts +++ b/packages/mui-material/src/zero-styled/index.ts @@ -1,6 +1,8 @@ import useThemeProps from '../styles/useThemeProps'; -// eslint-disable-next-line import/prefer-default-export, @typescript-eslint/no-unused-vars +export { default as styled } from '../styles/styled'; + +// eslint-disable-next-line @typescript-eslint/no-unused-vars export function createUseThemeProps(name: string) { return useThemeProps; } diff --git a/packages/zero-runtime/exports/createUseThemeProps.js b/packages/zero-runtime/exports/createUseThemeProps.js new file mode 100644 index 00000000000000..2d5e6f3f8bd60d --- /dev/null +++ b/packages/zero-runtime/exports/createUseThemeProps.js @@ -0,0 +1,5 @@ +Object.defineProperty(exports, '__esModule', { + value: true, +}); + +exports.default = require('../processors/createUseThemeProps').CreateUseThemePropsProcessor; diff --git a/packages/zero-runtime/exports/useThemeProps.js b/packages/zero-runtime/exports/useThemeProps.js deleted file mode 100644 index b06ff81007d7ba..00000000000000 --- a/packages/zero-runtime/exports/useThemeProps.js +++ /dev/null @@ -1,5 +0,0 @@ -Object.defineProperty(exports, '__esModule', { - value: true, -}); - -exports.default = require('../processors/useThemeProps').UseThemePropsProcessor; diff --git a/packages/zero-runtime/package.json b/packages/zero-runtime/package.json index 9f131d55b07630..8cd0476ddf4a8e 100644 --- a/packages/zero-runtime/package.json +++ b/packages/zero-runtime/package.json @@ -59,7 +59,7 @@ "keyframes": "./exports/keyframes.js", "generateAtomics": "./exports/generateAtomics.js", "css": "./exports/css.js", - "createUseThemeProps": "./exports/useThemeProps.js" + "createUseThemeProps": "./exports/createUseThemeProps.js" } }, "files": [ @@ -108,7 +108,7 @@ "default": "./exports/sx.js" }, "./exports/createUseThemeProps": { - "default": "./exports/useThemeProps.js" + "default": "./exports/createUseThemeProps.js" } } } diff --git a/packages/zero-runtime/src/useThemeProps.d.ts b/packages/zero-runtime/src/createUseThemeProps.d.ts similarity index 100% rename from packages/zero-runtime/src/useThemeProps.d.ts rename to packages/zero-runtime/src/createUseThemeProps.d.ts diff --git a/packages/zero-runtime/src/useThemeProps.js b/packages/zero-runtime/src/createUseThemeProps.js similarity index 100% rename from packages/zero-runtime/src/useThemeProps.js rename to packages/zero-runtime/src/createUseThemeProps.js diff --git a/packages/zero-runtime/src/index.ts b/packages/zero-runtime/src/index.ts index 1dd2c93fe0fc2c..52c2a5e4bc993f 100644 --- a/packages/zero-runtime/src/index.ts +++ b/packages/zero-runtime/src/index.ts @@ -3,4 +3,4 @@ export { default as sx } from './sx'; export { default as keyframes } from './keyframes'; export { generateAtomics, atomics } from './generateAtomics'; export { default as css } from './css'; -export { default as createUseThemeProps } from './useThemeProps'; +export { default as createUseThemeProps } from './createUseThemeProps'; diff --git a/packages/zero-runtime/src/processors/useThemeProps.ts b/packages/zero-runtime/src/processors/createUseThemeProps.ts similarity index 89% rename from packages/zero-runtime/src/processors/useThemeProps.ts rename to packages/zero-runtime/src/processors/createUseThemeProps.ts index 395f00b6144eb4..381285222dd683 100644 --- a/packages/zero-runtime/src/processors/useThemeProps.ts +++ b/packages/zero-runtime/src/processors/createUseThemeProps.ts @@ -9,7 +9,7 @@ type IOptions = IBaseOptions & { }; }; -export class UseThemePropsProcessor extends BaseProcessor { +export class CreateUseThemePropsProcessor extends BaseProcessor { componentName: string; constructor(params: Params, ...args: TailProcessorParams) { @@ -44,12 +44,7 @@ export class UseThemePropsProcessor extends BaseProcessor { const t = this.astService; const { themeArgs: { theme } = {} } = this.options as IOptions; - if ( - !theme || - !theme.components || - !theme.components[this.componentName] || - !theme.components[this.componentName].defaultProps - ) { + if (!theme?.components?.[this.componentName]?.defaultProps) { return; } diff --git a/packages/zero-runtime/tsup.config.ts b/packages/zero-runtime/tsup.config.ts index 26c9a66a604c2e..635ac6fa9b2f64 100644 --- a/packages/zero-runtime/tsup.config.ts +++ b/packages/zero-runtime/tsup.config.ts @@ -2,7 +2,7 @@ import { Options, defineConfig } from 'tsup'; import config from '../../tsup.config'; import packageJson from './package.json'; -const processors = ['styled', 'sx', 'keyframes', 'generateAtomics', 'css', 'useThemeProps']; +const processors = ['styled', 'sx', 'keyframes', 'generateAtomics', 'css', 'createUseThemeProps']; const external = ['react', 'react-is', 'prop-types']; const baseConfig: Options = { diff --git a/packages/zero-unplugin/src/index.ts b/packages/zero-unplugin/src/index.ts index 986c3b85646240..fe99d24e29e0c1 100644 --- a/packages/zero-unplugin/src/index.ts +++ b/packages/zero-unplugin/src/index.ts @@ -174,7 +174,7 @@ export const plugin = createUnplugin((options) => { if (tagResult) { return tagResult; } - if (source.endsWith('/zero-styled') || source.endsWith('/zero-useThemeProps')) { + if (source.endsWith('/zero-styled')) { return `${process.env.RUNTIME_PACKAGE_NAME}/exports/${tag}`; } return null;