@teleporthq/teleport-plugin-common 0.42.35 → 0.43.0

package/src/utils/style-utils.ts

@@ -1,6 +1,147 @@
 import { StringUtils } from '@teleporthq/teleport-shared'
 import { UIDLStaticValue, UIDLStyleDefinitions, UIDLStyleValue } from '@teleporthq/teleport-types'
 
+const CSS_FUNCTIONS = [
+  'radial-gradient',
+  'linear-gradient',
+  'conic-gradient',
+  'repeating-linear-gradient',
+  'repeating-radial-gradient',
+  'repeating-conic-gradient',
+]
+
+// CSS `content` property has the strictest value grammar of any
+// property the AI emits: it must be either a quoted string, one of
+// a fixed set of keywords, or a recognised function call. The AI
+// occasionally produces garbage here (e.g. the raw fragment `';`
+// straight out of a hallucinated declaration), and the
+// downstream JSS serializer happily concatenates that into
+// `content: ';;` — a CSS parse error that breaks the entire
+// stylesheet on Next.js dev (the browser stops applying any rule
+// after the malformed one). When we can't recognise the value as
+// valid, we fall back to an empty string literal — losing the
+// decoration but keeping the stylesheet parseable.
+const CONTENT_KEYWORDS = new Set([
+  'none',
+  'normal',
+  'open-quote',
+  'close-quote',
+  'no-open-quote',
+  'no-close-quote',
+  'inherit',
+  'initial',
+  'unset',
+  'revert',
+  'revert-layer',
+])
+
+const CONTENT_FUNCTION_PREFIXES = [
+  'attr(',
+  'counter(',
+  'counters(',
+  'var(',
+  'url(',
+  'image(',
+  'image-set(',
+  'linear-gradient(',
+  'radial-gradient(',
+  'conic-gradient(',
+]
+
+const isProperlyQuotedString = (value: string): boolean => {
+  if (value.length < 2) {
+    return false
+  }
+  const first = value.charAt(0)
+  const last = value.charAt(value.length - 1)
+  if (first !== last) {
+    return false
+  }
+  if (first !== '"' && first !== "'") {
+    return false
+  }
+  // Walk the interior and reject unescaped occurrences of the same
+  // quote character — those would close the string early and leak
+  // arbitrary CSS into the surrounding stylesheet.
+  for (let i = 1; i < value.length - 1; i++) {
+    const ch = value.charAt(i)
+    if (ch === '\\') {
+      i++ // skip the escaped character
+      continue
+    }
+    if (ch === first) {
+      return false
+    }
+  }
+  return true
+}
+
+export const sanitizeContentValue = (raw: string): string => {
+  const trimmed = raw.trim()
+  if (trimmed === '') {
+    return "''"
+  }
+  if (CONTENT_KEYWORDS.has(trimmed)) {
+    return trimmed
+  }
+  for (const prefix of CONTENT_FUNCTION_PREFIXES) {
+    if (trimmed.startsWith(prefix) && trimmed.endsWith(')')) {
+      return trimmed
+    }
+  }
+  if (isProperlyQuotedString(trimmed)) {
+    return trimmed
+  }
+  // Last-resort repair: strip every quote and semicolon (the two
+  // characters that break the surrounding rule) and wrap the
+  // remainder in single quotes. If nothing legible survives, fall
+  // through to an empty string. We deliberately do NOT try to
+  // preserve "almost a quoted string" inputs — the AI's malformed
+  // emissions don't have a clear repair path and silently keeping
+  // them risks injecting CSS the user didn't author.
+  const stripped = trimmed.replace(/['";]/g, '').trim()
+  return "'" + stripped + "'"
+}
+
+const isValidCSSValue = (value: string | number, key?: string): boolean => {
+  if (typeof value === 'number') {
+    return true
+  }
+
+  // Check for CSS functions that are missing their parentheses (e.g. "radial-gradientfoo")
+  for (const fn of CSS_FUNCTIONS) {
+    if (value.includes(fn) && !value.includes(`${fn}(`)) {
+      return false
+    }
+  }
+
+  // The `content` property is treated separately by
+  // `sanitizeContentValue` — it has its own grammar (quoted string
+  // OR keyword OR function call) that the general colon/paren
+  // check below would mis-evaluate for a legitimate quoted string
+  // that happens to contain a `:`.
+  if (key === 'content') {
+    return true
+  }
+
+  // Check for values that contain embedded CSS declarations (e.g. "valueproperty-name: other")
+  // A colon in a CSS value normally only appears inside url() or var() or similar functions.
+  // If a colon appears outside of parentheses, the value is likely corrupted.
+  let parenDepth = 0
+  for (let i = 0; i < value.length; i++) {
+    if (value[i] === '(') {
+      parenDepth++
+    } else if (value[i] === ')') {
+      parenDepth--
+    } else if (value[i] === ':' && parenDepth === 0) {
+      // Colons outside parentheses in a CSS value indicate a corrupted/merged declaration
+      return false
+    }
+  }
+
+  return true
+}
+
 const getContentOfStyleKey = (styleValue: UIDLStyleValue) => {
   if (styleValue.type === 'static') {
     return styleValue.content
@@ -16,7 +157,22 @@ const getContentOfStyleKey = (styleValue: UIDLStyleValue) => {
 
 export const getContentOfStyleObject = (styleObject: UIDLStyleDefinitions) => {
   return Object.keys(styleObject).reduce((acc: Record<string, unknown>, key) => {
-    acc[key] = getContentOfStyleKey(styleObject[key])
+    const value = getContentOfStyleKey(styleObject[key])
+    if (typeof value === 'string' || typeof value === 'number') {
+      if (isValidCSSValue(value, key)) {
+        // The `content` CSS property is the only one in the AI's
+        // typical output that consistently arrives malformed — the
+        // sanitiser repairs or empty-strings it so the surrounding
+        // rule stays parseable.
+        if (key === 'content' && typeof value === 'string') {
+          acc[key] = sanitizeContentValue(value)
+        } else {
+          acc[key] = value
+        }
+      }
+    } else {
+      acc[key] = value
+    }
     return acc
   }, {})
 }

package/src/utils/url-search-params.ts

@@ -0,0 +1,122 @@
+import * as types from '@babel/types'
+import type { UIDLSearchParamsDefinition } from '@teleporthq/teleport-types'
+
+/**
+ * Builds the Next.js-style prelude nodes for a page that declares URL search
+ * params. Emits:
+ *
+ *   const router = useRouter()
+ *
+ * The returned `registry` carries per-key defaults so `createDynamicValueExpression`
+ * can fall back to the declared default via `router?.query?.<key> ?? '<default>'`.
+ */
+export const buildNextJsUrlSearchParamsPrelude = (
+  searchParams: UIDLSearchParamsDefinition | undefined
+): {
+  statements: types.Statement[]
+  registry: Record<string, { defaultValue?: string }>
+  prefixMap: Record<string, string>
+} => {
+  if (!searchParams || searchParams.length === 0) {
+    return { statements: [], registry: {}, prefixMap: {} }
+  }
+  const registry: Record<string, { defaultValue?: string }> = {}
+  for (const entry of searchParams) {
+    registry[entry.key] = {
+      defaultValue: entry.defaultValue,
+    }
+  }
+  // const router = useRouter()
+  const routerDecl = types.variableDeclaration('const', [
+    types.variableDeclarator(
+      types.identifier('router'),
+      types.callExpression(types.identifier('useRouter'), [])
+    ),
+  ])
+  return {
+    statements: [routerDecl],
+    registry,
+    prefixMap: { urlSearchParams: 'router.query' },
+  }
+}
+
+/**
+ * Builds the static-export prelude for a page that declares URL search params.
+ * Emits:
+ *
+ *   const __urlSearchParams =
+ *     typeof window !== 'undefined'
+ *       ? Object.fromEntries(new URLSearchParams(window.location.search).entries())
+ *       : {}
+ *   useEffect(() => {
+ *     if (typeof window === 'undefined') return
+ *     const handler = () =>
+ *       setUrlSearchParams(
+ *         Object.fromEntries(new URLSearchParams(window.location.search).entries())
+ *       )
+ *     window.addEventListener('popstate', handler)
+ *     return () => window.removeEventListener('popstate', handler)
+ *   }, [])
+ *
+ * For simplicity the snippet stays at the "read on mount" level — the listing
+ * renders with the current query params. Implementations that want live
+ * re-filtering on popstate can subscribe via the returned hook shape.
+ */
+export const buildStaticUrlSearchParamsPrelude = (
+  searchParams: UIDLSearchParamsDefinition | undefined
+): {
+  statements: types.Statement[]
+  registry: Record<string, { defaultValue?: string }>
+  prefixMap: Record<string, string>
+} => {
+  if (!searchParams || searchParams.length === 0) {
+    return { statements: [], registry: {}, prefixMap: {} }
+  }
+  const registry: Record<string, { defaultValue?: string }> = {}
+  for (const entry of searchParams) {
+    registry[entry.key] = {
+      defaultValue: entry.defaultValue,
+    }
+  }
+  // const __urlSearchParams = typeof window !== 'undefined'
+  //   ? Object.fromEntries(new URLSearchParams(window.location.search).entries())
+  //   : {}
+  const decl = types.variableDeclaration('const', [
+    types.variableDeclarator(
+      types.identifier('__urlSearchParams'),
+      types.conditionalExpression(
+        types.binaryExpression(
+          '!==',
+          types.unaryExpression('typeof', types.identifier('window')),
+          types.stringLiteral('undefined')
+        ),
+        types.callExpression(
+          types.memberExpression(types.identifier('Object'), types.identifier('fromEntries')),
+          [
+            types.callExpression(
+              types.memberExpression(
+                types.newExpression(types.identifier('URLSearchParams'), [
+                  types.memberExpression(
+                    types.memberExpression(
+                      types.identifier('window'),
+                      types.identifier('location')
+                    ),
+                    types.identifier('search')
+                  ),
+                ]),
+                types.identifier('entries')
+              ),
+              []
+            ),
+          ]
+        ),
+        types.objectExpression([])
+      )
+    ),
+  ])
+  return {
+    statements: [decl],
+    registry,
+    prefixMap: { urlSearchParams: '__urlSearchParams' },
+  }
+}