@teleporthq/teleport-plugin-common 0.43.22 → 0.43.30

package/__tests__/node-handlers/node-to-jsx/index.ts

@@ -2,12 +2,12 @@ import * as types from '@babel/types'
 import componentUIDLSample from '../../../../../examples/test-samples/component-sample.json'
 import generateJSXSyntax from '../../../src/node-handlers/node-to-jsx'
 
-import { slotNode, elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
+import { slotNode, elementNode, staticNode, dynamicNode } from '@teleporthq/teleport-uidl-builders'
 import {
   JSXGenerationParams,
   JSXGenerationOptions,
 } from '../../../src/node-handlers/node-to-jsx/types'
-import { ComponentUIDL } from '@teleporthq/teleport-types'
+import { ComponentUIDL, UIDLNode } from '@teleporthq/teleport-types'
 
 const uidl = componentUIDLSample as ComponentUIDL
 
@@ -110,6 +110,73 @@ describe('generateJSXSyntax', () => {
     })
   })
 
+  describe('markdown-node with dynamic/expr children (CMS rich text)', () => {
+    const buildParams = (): JSXGenerationParams => ({
+      dependencies: {},
+      propDefinitions: {},
+      stateDefinitions: {},
+      globalStateDefinitions: {},
+      nodesLookup: {},
+      windowImports: {},
+      localeReferences: [],
+      globalReferences: [],
+      globalStateReferences: [],
+      hoistedConstants: [],
+    })
+
+    // Asserts the element is a <Markdown>{<expr> || ''}</Markdown> tag from markdown-to-jsx,
+    // which renders both markdown syntax and embedded HTML.
+    const expectMarkdownTag = (result: types.JSXElement, localParams: JSXGenerationParams) => {
+      expect((result.openingElement.name as types.JSXIdentifier).name).toBe('Markdown')
+
+      const container = result.children[0] as types.JSXExpressionContainer
+      expect(container.type).toBe('JSXExpressionContainer')
+      // dynamic content is guarded with `<expr> || ''` so a nullish value renders empty
+      expect((container.expression as types.LogicalExpression).operator).toBe('||')
+
+      expect(localParams.dependencies.Markdown).toEqual({
+        type: 'package',
+        path: 'markdown-to-jsx',
+        version: '7.7.12',
+      })
+    }
+
+    it('renders an expr child through the markdown-to-jsx <Markdown> component', () => {
+      const localParams = buildParams()
+      const node = elementNode('markdown-node', {}, [
+        { type: 'expr', content: 'props.cmsRichtext' } as UIDLNode,
+      ])
+
+      const result = generateJSXSyntax(node, localParams, options) as types.JSXElement
+
+      expectMarkdownTag(result, localParams)
+    })
+
+    it('renders a dynamic child through the markdown-to-jsx <Markdown> component', () => {
+      const localParams = buildParams()
+      const node = elementNode('markdown-node', {}, [dynamicNode('prop', 'cmsRichtext')])
+
+      const result = generateJSXSyntax(node, localParams, options) as types.JSXElement
+
+      expectMarkdownTag(result, localParams)
+    })
+
+    it('leaves a non-markdown div with an expr child as a plain value', () => {
+      const localParams = buildParams()
+      const node = elementNode('container', {}, [
+        { type: 'expr', content: 'props.cmsRichtext' } as UIDLNode,
+      ])
+
+      const result = generateJSXSyntax(node, localParams, options) as types.JSXElement
+
+      // generic expression handling wraps in a typeof/JSON.stringify guard, no markdown render
+      const container = result.children[0] as types.JSXExpressionContainer
+      expect(container.expression.type).toBe('ConditionalExpression')
+      expect((result.openingElement.name as types.JSXIdentifier).name).not.toBe('Markdown')
+      expect(localParams.dependencies.Markdown).toBeUndefined()
+    })
+  })
+
   describe('renderingConditions on elements', () => {
     it('wraps the element with a logical `&&` when renderingConditions are set', () => {
       const ownerContainer = elementNode('container', {}, [])
@@ -182,6 +249,76 @@ describe('generateJSXSyntax', () => {
     })
   })
 
+  describe('controlled <textarea> must not render children (React SSR contract)', () => {
+    const buildParams = (): JSXGenerationParams => ({
+      dependencies: {},
+      propDefinitions: {},
+      stateDefinitions: {},
+      globalStateDefinitions: {},
+      nodesLookup: {},
+      windowImports: {},
+      localeReferences: [],
+      globalReferences: [],
+      globalStateReferences: [],
+      hoistedConstants: [],
+    })
+
+    it('drops the children of a textarea that has a value attribute', () => {
+      // The details/entity binder can add value={{ ctx.field }} to a <textarea>
+      // while leaving its original text child in place. React's server renderer
+      // throws "If you supply value on a <textarea> you must not supply children",
+      // aborting static export — so the children must not be attached.
+      const localParams = buildParams()
+      const node = elementNode('textarea', { value: dynamicNode('prop', 'description') }, [
+        elementNode('span', {}, [dynamicNode('prop', 'description')]),
+      ])
+      const result = generateJSXSyntax(node, localParams, options) as types.JSXElement
+
+      expect((result.openingElement.name as types.JSXIdentifier).name).toBe('textarea')
+      expect(result.children.length).toBe(0)
+      // The child <span> is still generated into nodesLookup so the later
+      // styled-jsx traversal doesn't fail with "missing from the template chunk".
+      expect(Object.keys(localParams.nodesLookup).length).toBeGreaterThanOrEqual(2)
+    })
+
+    it('drops the children of a textarea that has a defaultValue attribute', () => {
+      const localParams = buildParams()
+      const node = elementNode('textarea', { defaultValue: dynamicNode('prop', 'description') }, [
+        elementNode('span', {}, [staticNode('initial')]),
+      ])
+      const result = generateJSXSyntax(node, localParams, options) as types.JSXElement
+      expect(result.children.length).toBe(0)
+    })
+
+    it('keeps the children of an uncontrolled textarea (no value/defaultValue)', () => {
+      const localParams = buildParams()
+      const node = elementNode('textarea', {}, [staticNode('initial content')])
+      const result = generateJSXSyntax(node, localParams, options) as types.JSXElement
+      expect(result.children.length).toBeGreaterThan(0)
+    })
+
+    it('drops the children of a named textarea controlled by the form-store binding', () => {
+      // maybeAddFormStoreFieldBinding injects value={formState['field'] ?? ''}
+      // onto named inputs inside a data-store-values-state form AFTER the UIDL
+      // attrs are processed — the textarea has NO value in its UIDL attrs but
+      // ends up controlled all the same, so its children must also be skipped.
+      const localParams = { ...buildParams(), formStoreStateName: 'formValues' }
+      const node = elementNode('textarea', { name: staticNode('description') }, [
+        staticNode('initial content'),
+      ])
+      const result = generateJSXSyntax(node, localParams, options) as types.JSXElement
+
+      const hasInjectedValue = result.openingElement.attributes.some(
+        (attr) =>
+          attr.type === 'JSXAttribute' &&
+          attr.name.type === 'JSXIdentifier' &&
+          attr.name.name === 'value'
+      )
+      expect(hasInjectedValue).toBe(true)
+      expect(result.children.length).toBe(0)
+    })
+  })
+
   describe('plan v15 Layer 4 — codegen safety net for junk attrs and corrupt values', () => {
     // Suppress the console.warn that fires when junk attrs are dropped so
     // the test runner output stays clean. Reset between tests.

package/__tests__/utils/style-utils.ts

@@ -36,6 +36,65 @@ describe('JSS Utils ', () => {
     })
   })
 
+  it('drops a value with unbalanced parentheses (truncated color-mix)', () => {
+    const styleValue: UIDLStyleDefinitions = {
+      color: {
+        type: 'static',
+        content: 'color-mix(in srgb, var(--color-surface) 50%,',
+      },
+      display: {
+        type: 'static',
+        content: 'flex',
+      },
+    }
+    // The corrupted `color` is dropped; the surrounding rule stays parseable.
+    expect(getContentOfStyleObject(styleValue)).toEqual({ display: 'flex' })
+  })
+
+  it('drops a value with a stray closing parenthesis', () => {
+    const styleValue: UIDLStyleDefinitions = {
+      width: {
+        type: 'static',
+        content: 'calc(100% - 10px))',
+      },
+    }
+    expect(getContentOfStyleObject(styleValue)).toEqual({})
+  })
+
+  it('keeps valid values with balanced nested parentheses', () => {
+    const styleValue: UIDLStyleDefinitions = {
+      color: {
+        type: 'static',
+        content: 'color-mix(in srgb, var(--color-surface) 50%, transparent)',
+      },
+      background: {
+        type: 'static',
+        content: 'linear-gradient(90deg, rgba(0,0,0,0.5), #fff)',
+      },
+    }
+    expect(getContentOfStyleObject(styleValue)).toEqual({
+      color: 'color-mix(in srgb, var(--color-surface) 50%, transparent)',
+      background: 'linear-gradient(90deg, rgba(0,0,0,0.5), #fff)',
+    })
+  })
+
+  it('keeps values whose parentheses/colons live inside a quoted string', () => {
+    const styleValue: UIDLStyleDefinitions = {
+      background: {
+        type: 'static',
+        content: 'url("data:image/svg+xml;utf8,<svg viewBox=\'0 0 (1)\'></svg>")',
+      },
+      fontFamily: {
+        type: 'static',
+        content: '"Foo (Bold)", sans-serif',
+      },
+    }
+    expect(getContentOfStyleObject(styleValue)).toEqual({
+      background: 'url("data:image/svg+xml;utf8,<svg viewBox=\'0 0 (1)\'></svg>")',
+      fontFamily: '"Foo (Bold)", sans-serif',
+    })
+  })
+
   it('fails with other type than static or nested-style', () => {
     const styleValue: UIDLStyleDefinitions = {
       content: {

package/dist/cjs/node-handlers/node-to-jsx/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/node-handlers/node-to-jsx/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,cAAc,CAAA;AACrC,OAAO,EACL,eAAe,EAiBhB,MAAM,4BAA4B,CAAA;AAEnC,OAAO,EAA+D,SAAS,EAAE,MAAM,SAAS,CAAA;AA4fhG,QAAA,MAAM,mBAAmB,EAAE,SAAS,CAAC,eAAe,EAAE,KAAK,CAAC,UAAU,CAgNrE,CAAA;AAED,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/node-handlers/node-to-jsx/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,cAAc,CAAA;AACrC,OAAO,EACL,eAAe,EAiBhB,MAAM,4BAA4B,CAAA;AAEnC,OAAO,EAA+D,SAAS,EAAE,MAAM,SAAS,CAAA;AA4fhG,QAAA,MAAM,mBAAmB,EAAE,SAAS,CAAC,eAAe,EAAE,KAAK,CAAC,UAAU,CA2QrE,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/dist/cjs/node-handlers/node-to-jsx/index.js

@@ -532,11 +532,62 @@ var generateElementNode = function (node, params, jsxOptions) {
         var handler = (0, ast_utils_1.parseJSExpressionAsAST)(handlerCode);
         elementTag.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('onClick'), types.jsxExpressionContainer(handler)));
     }
-    if (!selfClosing && children) {
+    // A markdown-node can carry its rich-text content as a dynamic/expr child
+    // (e.g. CMS-bound rich text) rather than as a `raw` attribute. The raw-attribute
+    // path is handled in addAttributesToJSXTag; here we handle the children path so
+    // the content is injected as HTML (dangerouslySetInnerHTML) instead of being
+    // printed as an escaped raw value by the generic expression handler.
+    var isMarkdownNode = node.content.semanticType === 'markdown-node' || originalElementName === 'markdown-node';
+    var hasRawAttr = attrs
+        ? Object.keys(attrs).some(function (attrKey) { var _a; return ((_a = attrs[attrKey]) === null || _a === void 0 ? void 0 : _a.type) === 'raw'; })
+        : false;
+    var markdownChildrenHandled = false;
+    if (isMarkdownNode && !selfClosing && !hasRawAttr && children && children.length > 0) {
+        var markdownChild = children.find(function (child) { return child.type === 'expr' || child.type === 'dynamic'; });
+        var markdownExpr = void 0;
+        if ((markdownChild === null || markdownChild === void 0 ? void 0 : markdownChild.type) === 'expr') {
+            markdownExpr = __1.ASTUtils.getExpressionFromUIDLExpressionNode(markdownChild);
+        }
+        else if ((markdownChild === null || markdownChild === void 0 ? void 0 : markdownChild.type) === 'dynamic') {
+            markdownExpr = resolveDynamicReferenceExpression(markdownChild, childParams, options);
+        }
+        if (markdownExpr) {
+            injectMarkdownExpression(elementTag, markdownExpr, '', childParams);
+            markdownChildrenHandled = true;
+        }
+    }
+    // A controlled <textarea> — one carrying a `value` (or `defaultValue`) prop —
+    // must NOT also render children. React's server renderer throws
+    // "If you supply `value` on a <textarea> you must not supply children.", which
+    // aborts static export of the whole page. The details-page / entity binder can
+    // leave the original text content in place when it adds a `value` binding to a
+    // textarea (harmless for <input>, fatal for <textarea>). We still GENERATE the
+    // children below so every UIDL node lands in `nodesLookup` (the styled-jsx pass
+    // requires it), but we do not attach them to the textarea — the value prop is
+    // the single source of truth.
+    var isTextArea = originalElementName.toLowerCase() === 'textarea' || node.content.semanticType === 'textarea';
+    // The check must run against the JSX opening element (not just UIDL attrs):
+    // maybeAddFormStoreFieldBinding injects a `value` attr onto named textareas
+    // inside a data-store-values-state form AFTER UIDL attrs are processed, and
+    // that injected binding makes the textarea controlled all the same.
+    var jsxTagHasControlledValue = elementTag.openingElement.attributes.some(function (attr) {
+        return attr.type === 'JSXAttribute' &&
+            attr.name.type === 'JSXIdentifier' &&
+            (attr.name.name === 'value' || attr.name.name === 'defaultValue');
+    });
+    var skipAttachingChildren = isTextArea &&
+        (jsxTagHasControlledValue ||
+            (!!attrs &&
+                (Object.prototype.hasOwnProperty.call(attrs, 'value') ||
+                    Object.prototype.hasOwnProperty.call(attrs, 'defaultValue'))));
+    if (!markdownChildrenHandled && !selfClosing && children) {
         // Reorder children to ensure search nodes appear before DataProvider nodes
         var reorderedChildren = reorderChildrenForSearch(children);
         reorderedChildren.forEach(function (child) {
             var childTags = generateNode(child, childParams, options);
+            if (skipAttachingChildren) {
+                return;
+            }
             childTags.forEach(function (childTag) {
                 if (typeof childTag === 'string') {
                     (0, ast_utils_1.addChildJSXText)(elementTag, childTag);
@@ -1249,48 +1300,51 @@ var applyDynamicHtmlInjection = function (elementTag, rawValue, params, options)
     });
 };
 var applyStaticMarkdownInjection = function (elementTag, rawValue, params) {
-    var content = rawValue.content || '';
-    elementTag.openingElement.name.name = 'div';
-    elementTag.openingElement.selfClosing = true;
-    elementTag.closingElement = null;
-    elementTag.children = [];
-    elementTag.openingElement.attributes.push(types.jsxAttribute(types.jsxIdentifier('dangerouslySetInnerHTML'), types.jsxExpressionContainer(types.objectExpression([
-        types.objectProperty(types.identifier('__html'), types.stringLiteral(content)),
-    ]))));
-    cleanupMarkdownMappingDependencies(params);
+    injectMarkdownExpression(elementTag, types.stringLiteral(rawValue.content || ''), '', params);
 };
 var applyDynamicMarkdownInjection = function (elementTag, rawValue, params, options) {
     var dynamicExpr = resolveDynamicReferenceExpression(rawValue.dynamic, params, options);
     var fallbackContent = rawValue.fallback || rawValue.content;
-    var reactMarkdownTag = (0, ast_builders_1.createJSXTag)('ReactMarkdown');
-    (0, ast_utils_1.addChildJSXTag)(reactMarkdownTag, types.jsxExpressionContainer(types.cloneNode(dynamicExpr)));
-    var fallbackTag = __1.ASTBuilders.createDOMInjectionNode(fallbackContent);
-    var conditionalExpr = types.conditionalExpression(dynamicExpr, reactMarkdownTag, fallbackTag);
-    elementTag.openingElement.name.name = 'div';
+    injectMarkdownExpression(elementTag, dynamicExpr, fallbackContent, params);
+};
+/**
+ * Renders a markdown-node's rich-text content through the `markdown-to-jsx` <Markdown>
+ * component (the React generator's mapping for markdown-node).
+ *
+ * markdown-to-jsx parses BOTH markdown syntax AND embedded HTML, so it renders correctly
+ * whether the CMS field returns markdown (`# Heading`) or HTML markup (`<p>…</p>`). A raw
+ * HTML approach (dangerouslySetInnerHTML) would ignore markdown, and a markdown-only
+ * renderer (react-markdown) escapes HTML — markdown-to-jsx covers both at once.
+ *
+ * Shared by every way a markdown-node can carry its content:
+ * - a static `raw` attribute (see applyStaticMarkdownInjection)
+ * - a `raw` attribute holding a dynamic reference (see applyDynamicMarkdownInjection)
+ * - a dynamic/expr child, e.g. CMS-bound rich text (see generateElementNode)
+ *
+ * Produces: <Markdown>{expr || fallback}</Markdown>
+ */
+var injectMarkdownExpression = function (elementTag, expression, fallbackContent, params) {
+    // markdown-to-jsx requires a string child; guard dynamic expressions with a fallback so
+    // a nullish CMS value renders as empty rather than throwing. Static literals need no guard.
+    var childExpr = types.isStringLiteral(expression)
+        ? expression
+        : types.logicalExpression('||', expression, types.stringLiteral(fallbackContent || ''));
+    elementTag.openingElement.name.name = 'Markdown';
     elementTag.openingElement.selfClosing = false;
     if (!elementTag.closingElement) {
-        elementTag.closingElement = types.jsxClosingElement(types.jsxIdentifier('div'));
+        elementTag.closingElement = types.jsxClosingElement(types.jsxIdentifier('Markdown'));
     }
     else {
         ;
-        elementTag.closingElement.name.name = 'div';
+        elementTag.closingElement.name.name = 'Markdown';
     }
-    elementTag.children = [types.jsxExpressionContainer(conditionalExpr)];
-    cleanupMarkdownMappingDependencies(params);
-    params.dependencies.ReactMarkdown = {
+    elementTag.children = [types.jsxExpressionContainer(childExpr)];
+    params.dependencies.Markdown = {
         type: 'package',
-        path: 'react-markdown',
-        version: '^8.0.7',
+        path: 'markdown-to-jsx',
+        version: '7.7.12',
     };
 };
-var cleanupMarkdownMappingDependencies = function (params) {
-    Object.keys(params.dependencies).forEach(function (key) {
-        var _a, _b;
-        if ((_b = (_a = params.dependencies[key]) === null || _a === void 0 ? void 0 : _a.path) === null || _b === void 0 ? void 0 : _b.includes('markdown-to-jsx')) {
-            delete params.dependencies[key];
-        }
-    });
-};
 /**
  * Handles raw attributes on a rich-text-editor-node element.
  *