From e76ae1a68140689d7a8c42dd44af30ad53e1fb08 Mon Sep 17 00:00:00 2001 From: Jaya Krishna Date: Tue, 13 Aug 2024 20:42:57 +0530 Subject: [PATCH] skip passing element props to the component instances from the parent --- .../src/index.ts | 1 - .../src/index.ts | 1 - .../src/index.ts | 3 +- .../src/index.ts | 1 - packages/teleport-plugin-css/src/index.ts | 4 +- .../src/node-handlers.ts | 73 ++++++++++++++----- .../src/index.ts | 4 - .../src/index.ts | 5 +- .../src/index.ts | 1 - packages/teleport-test/src/standalone.ts | 6 +- 10 files changed, 62 insertions(+), 37 deletions(-) diff --git a/packages/teleport-component-generator-angular/src/index.ts b/packages/teleport-component-generator-angular/src/index.ts index cbbba4d31..95d6497fd 100644 --- a/packages/teleport-component-generator-angular/src/index.ts +++ b/packages/teleport-component-generator-angular/src/index.ts @@ -16,7 +16,6 @@ import { const importStatementsPlugin = createImportPlugin({ fileType: FileType.TS }) const stylePlugin = createCSSPlugin({ - forceScoping: true, inlineStyleAttributeKey: '[ngStyle]', declareDependency: 'decorator', dynamicVariantPrefix: '[ngClass]', diff --git a/packages/teleport-component-generator-html/src/index.ts b/packages/teleport-component-generator-html/src/index.ts index 7894d59ff..fa9dec338 100644 --- a/packages/teleport-component-generator-html/src/index.ts +++ b/packages/teleport-component-generator-html/src/index.ts @@ -57,7 +57,6 @@ const createHTMLComponentGenerator: HTMLComponentGeneratorInstance = ({ createCSSPlugin({ templateChunkName: 'html-chunk', declareDependency: 'import', - forceScoping: true, templateStyle: 'html', staticPropReferences: true, }) diff --git a/packages/teleport-component-generator-react/src/index.ts b/packages/teleport-component-generator-react/src/index.ts index ba763af70..9cfad04cd 100644 --- a/packages/teleport-component-generator-react/src/index.ts +++ b/packages/teleport-component-generator-react/src/index.ts @@ -22,10 +22,9 @@ const cssPlugin = createCSSPlugin({ templateStyle: 'jsx', declareDependency: 'import', classAttributeName: 'className', - forceScoping: true, }) const cssModulesPlugin = createCSSModulesPlugin({ moduleExtension: true }) -const reactStyledJSXPlugin = createReactStyledJSXPlugin({ forceScoping: true }) +const reactStyledJSXPlugin = createReactStyledJSXPlugin() const stylePlugins = { [ReactStyleVariation.InlineStyles]: inlineStylesPlugin, diff --git a/packages/teleport-component-generator-vue/src/index.ts b/packages/teleport-component-generator-vue/src/index.ts index 8314e6655..ef5a2efd4 100644 --- a/packages/teleport-component-generator-vue/src/index.ts +++ b/packages/teleport-component-generator-vue/src/index.ts @@ -21,7 +21,6 @@ const createVueComponentGenerator: ComponentGeneratorInstance = ({ const generator = createComponentGenerator() const vueStylePlugin = createCSSPlugin({ inlineStyleAttributeKey: ':style', - forceScoping: true, dynamicVariantPrefix: 'v-bind:class', }) diff --git a/packages/teleport-plugin-css/src/index.ts b/packages/teleport-plugin-css/src/index.ts index 1ccc9e3be..fc504e279 100644 --- a/packages/teleport-plugin-css/src/index.ts +++ b/packages/teleport-plugin-css/src/index.ts @@ -23,7 +23,6 @@ interface CSSPluginConfig { componentDecoratorChunkName: string inlineStyleAttributeKey: string // style vs :style vs ... classAttributeName: string // class vs className - forceScoping: boolean // class names get the component name prefix templateStyle: 'html' | 'jsx' declareDependency: 'import' | 'decorator' | 'none' dynamicVariantPrefix?: string @@ -39,7 +38,6 @@ const createCSSPlugin: ComponentPluginFactory = (config) => { classAttributeName = 'class', templateStyle = 'html', declareDependency = 'none', - forceScoping = false, dynamicVariantPrefix, staticPropReferences = false, } = config || {} @@ -100,7 +98,7 @@ const createCSSPlugin: ComponentPluginFactory = (config) => { elementType, } = element - if (forceScoping && dependency?.type === 'local') { + if (dependency?.type === 'local') { StyleBuilders.setPropValueForCompStyle({ attrs, key, diff --git a/packages/teleport-plugin-html-base-component/src/node-handlers.ts b/packages/teleport-plugin-html-base-component/src/node-handlers.ts index 53a5ddbcb..345d9c34e 100644 --- a/packages/teleport-plugin-html-base-component/src/node-handlers.ts +++ b/packages/teleport-plugin-html-base-component/src/node-handlers.ts @@ -184,7 +184,6 @@ const generateElementNode: NodeToHTML = {} - - for (const propKey of Object.keys(combinedProps)) { - // If the attribute is a named-slot, then we can directly pass the value instead of just the content - if (attrs[propKey]?.type === 'element') { - propsForInstance[propKey] = { - ...combinedProps[propKey], - defaultValue: attrs[propKey], - } - } else if (attrs[propKey]) { - propsForInstance[propKey] = { - ...combinedProps[propKey], - defaultValue: attrs[propKey]?.content || combinedProps[propKey]?.defaultValue, - } - } else { - propsForInstance[propKey] = combinedProps[propKey] - } + // We are combining props of the current component + // with props of the component that we need to generate. + // Refer to line 309, for element props. We either pick from the attr of the current instance of component + // or from the propDefinitions of the component that we are generating. + // We don't need to keep passing the props of the current component to the child component and so on + // for the case of element nodes in attributes or propDefinitions. + const combinedProps: Record = { + ...Object.keys(propDefinitions).reduce>( + (acc: Record, propKey) => { + if (propDefinitions[propKey]?.type === 'element') { + return acc + } + acc[propKey] = propDefinitions[propKey] + return acc + }, + {} + ), + ...(componentClone?.propDefinitions || {}), } + const propsForInstance: Record = {} const combinedStates = { ...stateDefinitions, ...(componentClone?.stateDefinitions || {}) } const statesForInstance = Object.keys(combinedStates).reduce( @@ -305,6 +305,40 @@ const generateComponentContent = async ( {} ) + for (const propKey of Object.keys(combinedProps)) { + // If the attribute is a named-slot, then we can directly pass the value instead of just the content + if (attrs[propKey]?.type === 'element') { + propsForInstance[propKey] = { + ...combinedProps[propKey], + defaultValue: attrs[propKey], + } + } else if (attrs[propKey]) { + // When we are using a component instance in a component and the attribute + // that is passed to the component is of dynamic reference. + // If means, the component is redirecting the prop that is received to the prop of the component that it is consuming. + // In this case, we need to pass the value of the prop that is received to the prop of the component that it is consuming. + // And similary we do the same for the states. + if ( + attrs[propKey].type === 'dynamic' && + (attrs[propKey] as UIDLDynamicReference).content.referenceType === 'prop' + ) { + propsForInstance[propKey] = combinedProps[propKey] + } else if ( + attrs[propKey].type === 'dynamic' && + (attrs[propKey] as UIDLDynamicReference).content.referenceType === 'state' + ) { + propsForInstance[propKey] = combinedStates[propKey] + } else { + propsForInstance[propKey] = { + ...combinedProps[propKey], + defaultValue: attrs[propKey]?.content || combinedProps[propKey]?.defaultValue, + } + } + } else { + propsForInstance[propKey] = combinedProps[propKey] + } + } + let componentWrapper = StringUtils.camelCaseToDashCase(`${compName}-wrapper`) const isExistingNode = nodesLookup[componentWrapper] if (isExistingNode !== undefined) { @@ -339,7 +373,6 @@ const generateComponentContent = async ( templateStyle: 'html', templateChunkName: DEFAULT_COMPONENT_CHUNK_NAME, declareDependency: 'import', - forceScoping: true, chunkName: componentClone.name, staticPropReferences: true, }) diff --git a/packages/teleport-plugin-react-styled-components/src/index.ts b/packages/teleport-plugin-react-styled-components/src/index.ts index b0479fa66..265f00d24 100644 --- a/packages/teleport-plugin-react-styled-components/src/index.ts +++ b/packages/teleport-plugin-react-styled-components/src/index.ts @@ -204,10 +204,6 @@ export const createReactStyledComponentsPlugin: ComponentPluginFactory, propsPrefix: string) => @@ -32,7 +31,7 @@ const transformStyle = (style: Record, propsPrefix: stri }) export const createReactStyledJSXPlugin: ComponentPluginFactory = (config) => { - const { componentChunkName = 'jsx-component', forceScoping = false } = config || {} + const { componentChunkName = 'jsx-component' } = config || {} const reactStyledJSXPlugin: ComponentPlugin = async (structure) => { const { uidl, chunks, options } = structure @@ -62,7 +61,7 @@ export const createReactStyledJSXPlugin: ComponentPluginFactory const className = StringUtils.camelCaseToDashCase(key) - if (forceScoping && dependency?.type === 'local') { + if (dependency?.type === 'local') { StyleBuilders.setPropValueForCompStyle({ key, jsxNodesLookup, diff --git a/packages/teleport-project-generator-react/src/index.ts b/packages/teleport-project-generator-react/src/index.ts index 19743d05d..816905d97 100644 --- a/packages/teleport-project-generator-react/src/index.ts +++ b/packages/teleport-project-generator-react/src/index.ts @@ -43,7 +43,6 @@ const createReactProjectGenerator = () => { templateStyle: 'jsx', declareDependency: 'import', classAttributeName: 'className', - forceScoping: true, }), reactAppRoutingPlugin, importStatementsPlugin, diff --git a/packages/teleport-test/src/standalone.ts b/packages/teleport-test/src/standalone.ts index b5bcb0d86..3c4843cc5 100644 --- a/packages/teleport-test/src/standalone.ts +++ b/packages/teleport-test/src/standalone.ts @@ -104,7 +104,7 @@ const run = async () => { project({ projectType: ProjectType.HTML, projectSlug: 'teleport-project-html', - plugins: [new ProjectPluginParseEmbed()], + plugins: [], options: { ...packerOptions, strictHtmlWhitespaceSensitivity: false, @@ -114,6 +114,10 @@ const run = async () => { projectType: ProjectType.HTML, projectSlug: `teleport-project-html-embeds`, plugins: [new ProjectPluginParseEmbed()], + options: { + ...packerOptions, + strictHtmlWhitespaceSensitivity: false, + }, }), project({ projectType: ProjectType.NEXT, projectSlug: 'teleport-project-next' }), project({