@symbo.ls/connect 3.2.7

package/src/grabber/parse.js

@@ -0,0 +1,268 @@
+import {
+  consolidateStyles,
+  consolidateFlexCSS,
+  consolidateGridCSS,
+  splitPropsFromStyles
+} from './clean'
+import {
+  getAppliedComputedStyles,
+  getStyleDefaultsFromEmptyNode
+} from './computed'
+import { getSettings } from '../settings/settings_utils'
+import { getAllAppliedSheetStyles } from './stylesheets'
+import {
+  capitalize,
+  cleanSharedProperties,
+  convertKeysToCamelCase,
+  extractRootVars,
+  reformatChildren
+} from './utils'
+
+export function getNodeText(node) {
+  if (node.nodeType === window.Node.TEXT_NODE) {
+    return window.Node.TEXT_NODE // This node itself is text
+  }
+
+  let val = ''
+  for (const child of node.childNodes) {
+    if (
+      child.nodeType === window.Node.TEXT_NODE &&
+      child.textContent.trim() !== ''
+    ) {
+      val += child.textContent.trim()
+    }
+  }
+
+  if (val.trim() !== '') {
+    return val
+  }
+}
+
+export function parseNodeAttributes(node) {
+  const attributes = {}
+
+  if (node && node.attributes) {
+    for (const { name, value } of node.attributes) {
+      if (name !== 'class' && name !== 'style') {
+        attributes[name] = value
+      }
+    }
+  }
+
+  return Object.keys(attributes).length ? attributes : null
+}
+
+export function extendsFromTag(props) {
+  const extend = []
+
+  const tag = (props.tag ?? 'div').toLowerCase()
+
+  if (tag === 'a') {
+    extend.push('Link')
+  }
+
+  const validTags = [
+    'input',
+    'button',
+    'img',
+    'span',
+    'strong',
+    'section',
+    'picture',
+    'form',
+    'dialog',
+    'p',
+    'hr',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'header',
+    'footer',
+    'progress',
+    'select',
+    'textarea',
+    'aside',
+    'pre',
+    'code',
+    'svg',
+    'label',
+    'hgroup'
+  ]
+
+  if (validTags.includes(tag)) {
+    extend.push(capitalize(tag))
+  }
+
+  return extend
+}
+
+/**
+ * @param {HTMLElement} node
+ * @param {CSSStyleDeclaration} rootStyles
+ * @returns
+ */
+export async function parseElement(node, rootStyles) {
+  const tag = node.tagName.toLowerCase()
+  const defaults = getStyleDefaultsFromEmptyNode(tag)
+
+  const settings = await getSettings()
+
+  const [sheets, conditionalSheets] =
+    settings.useStylesheets ?? true
+      ? getAllAppliedSheetStyles(node, defaults)
+      : {}
+  const computed = settings.useComputed
+    ? getAppliedComputedStyles(node, defaults)
+    : {}
+
+  const rawStyles = {
+    ...sheets,
+    ...computed
+  }
+
+  let rootVars = extractRootVars(rawStyles, rootStyles)
+
+  const camelCased = convertKeysToCamelCase(rawStyles)
+
+  // Process all conditional styles updating both variables as well as resulting props/styles
+  const camelCasedConditionals = {}
+  Object.entries(conditionalSheets).forEach(([query, cSheet]) => {
+    rootVars = { ...extractRootVars(cSheet, rootStyles), ...rootVars }
+
+    const { props, style } = splitPropsFromStyles(
+      convertKeysToCamelCase(cSheet)
+    )
+    camelCasedConditionals[query] = {}
+    if (Object.keys(props).length) {
+      camelCasedConditionals[query] = props
+    }
+
+    if (Object.keys(style).length) {
+      camelCasedConditionals[query].style = style
+    }
+  })
+
+  let props = { ...rootVars }
+  if (tag !== 'div') {
+    props.tag = tag
+  }
+
+  const { props: styleProps, style } = splitPropsFromStyles(
+    consolidateStyles(camelCased)
+  )
+  props = { ...props, ...styleProps }
+
+  const text = getNodeText(node)
+
+  let children = []
+  const childPromises = []
+
+  if (node.children.length > 0) {
+    const ignore = ['STYLE', 'SCRIPT']
+
+    for (const childNode of node.children) {
+      if (!ignore.includes(childNode.tagName)) {
+        if (childNode.tagName === 'svg') {
+          const html = childNode.innerHTML
+          const attr = parseNodeAttributes(childNode)
+
+          children.push({
+            extend: ['Svg'],
+            attr,
+            props: { html }
+          })
+        } else {
+          childPromises.push(parseElement(childNode, rootStyles))
+        }
+      }
+    }
+  }
+
+  const results = await Promise.all(childPromises)
+  children = [...children, ...results]
+
+  // check all children for shared props and hoist them to childProps
+  let childProps = null
+  if (children.length > 1) {
+    childProps = cleanSharedProperties(children)
+    // remove shared props from each child
+    Object.keys(childProps).forEach((key) => {
+      children.forEach((child) => delete child.props[key])
+    })
+  }
+
+  const attr = parseNodeAttributes(node)
+  // process attributes of specific tags to props
+  const copyAttrFromThese = ['a', 'img', 'input', 'button', 'iframe']
+  if (attr && copyAttrFromThese.includes(tag)) {
+    Object.keys(attr).forEach((prop) => {
+      props[prop] = attr[prop]
+      delete attr[prop]
+    })
+  }
+
+  // fix relative src for images
+  if (tag === 'img' && props.src && props.src.startsWith('/')) {
+    props.src = window.location.origin + props.src
+  }
+
+  if (tag === 'a' && props.href && props.href.startsWith('/')) {
+    props.href = window.location.origin + props.href
+  }
+
+  const extend = extendsFromTag(props)
+  if (extend.length === 1) {
+    delete props.tag
+  }
+
+  if (props.display === 'flex') {
+    props = consolidateFlexCSS(props)
+    delete props.display
+    extend.push('Flex')
+  }
+
+  if (props.display === 'grid') {
+    props = consolidateGridCSS(props)
+    delete props.display
+    extend.push('Grid')
+  }
+
+  let element = {
+    props: { ...props }
+  }
+
+  if (Object.keys(style).length) {
+    element.props.style = style
+  }
+
+  if (Object.keys(camelCasedConditionals).length) {
+    element.props = { ...element.props, ...camelCasedConditionals }
+  }
+
+  if (text) {
+    element.props.text = text
+  }
+
+  if (attr && Object.keys(attr).length) {
+    element.props.attr = attr
+  }
+
+  if (extend.length) {
+    element.extend = extend
+  }
+
+  if (children.length) {
+    if (childProps && Object.keys(childProps).length) {
+      element.props.childProps = childProps
+    }
+
+    element = { ...element, ...reformatChildren(children) }
+  } else if (childProps) {
+    console.warn('childProps without children')
+  }
+
+  return element
+}

package/src/grabber/stylesheets.js

@@ -0,0 +1,117 @@
+const getRelevantRules = (node, rules) => {
+  let relevantRules = []
+
+  for (const rule of rules) {
+    const { selectorText, conditionText, media, cssRules } = rule
+
+    if (selectorText && node.matches(selectorText)) {
+      relevantRules.push(rule)
+    } else if ((conditionText || (media && media.length > 0)) && cssRules) {
+      relevantRules = [
+        ...relevantRules,
+        ...getRelevantRules(node, rule.cssRules)
+      ]
+    }
+  }
+
+  return relevantRules
+}
+
+const extractStylesFromRule = (rule, defaults = {}) => {
+  const { style } = rule
+  const results = {}
+
+  // Loop through each property and add it to the styles object
+  for (let k = 0; k < style.length; k++) {
+    const prop = style[k]
+    const value = style.getPropertyValue(prop)
+    const defaultValue = defaults[prop]
+
+    if (value && value !== defaultValue) {
+      results[prop] = value
+    }
+  }
+
+  return results
+}
+
+const processMediaQueries = (rule, parentRule) => {
+  const { conditionText } = parentRule
+  let key = `@media ${conditionText}`
+  if (
+    ['(prefers-color-scheme: dark)', '(prefers-color-scheme: light)'].includes(
+      conditionText
+    )
+  ) {
+    key = conditionText.includes('dark') ? '@dark' : '@light'
+  }
+
+  return { [key]: { ...extractStylesFromRule(rule) } }
+}
+
+const getAppliedStylesheets = (node) => {
+  let styles = {}
+  let conditionalStyles = {}
+
+  // Loop through all stylesheets
+  for (const styleSheet of document.styleSheets) {
+    let baseRules = null
+    // Try to access the cssRules of the stylesheet (some stylesheets may be cross-origin and not accessible)
+    try {
+      baseRules = styleSheet.cssRules
+    } catch (error) {
+      // Unable to access stylesheet (possibly cross-origin), skip it
+      console.log('Could not access stylesheet rules:', { styleSheet, error })
+    }
+
+    if (baseRules !== null) {
+      // filter rules down to relevant ones with selectors
+      const rules = getRelevantRules(node, baseRules)
+
+      // Loop through all rules within the stylesheet
+      for (const rule of rules) {
+        const { parentRule } = rule
+
+        // Rule is enclosed within a media query
+        if (parentRule && parentRule.conditionText) {
+          conditionalStyles = {
+            ...conditionalStyles,
+            ...processMediaQueries(rule, parentRule)
+          }
+        } else if (rule.selectorText.includes(':hover')) {
+          // Hover styles should be extracted separately as they do not
+          // follow the same patterns as other conditional styles
+          const hoverKey = ':hover'
+          conditionalStyles[hoverKey] = {
+            ...conditionalStyles[hoverKey],
+            ...extractStylesFromRule(rule)
+          }
+        } else {
+          styles = { ...styles, ...extractStylesFromRule(rule) }
+        }
+      }
+    }
+  }
+
+  return [styles, conditionalStyles]
+}
+
+const getInlineStyles = (node, defaults) => {
+  const styles = {}
+  for (let i = 0; i < node.style.length; i++) {
+    const prop = node.style[i]
+    const val = node.style.getPropertyValue(prop)
+
+    if (val && val !== defaults[prop]) {
+      styles[prop] = val
+    }
+  }
+
+  return styles
+}
+
+export function getAllAppliedSheetStyles(node, defaults) {
+  const inlineStyles = getInlineStyles(node, defaults)
+  const [stylesheetStyles, conditionalStyles] = getAppliedStylesheets(node)
+  return [{ ...stylesheetStyles, ...inlineStyles }, conditionalStyles]
+}

package/src/grabber/utils.js

@@ -0,0 +1,238 @@
+/**  Helper function to check if all values in an array are equal
+ * @param {Array} arr
+ * @returns {boolean}
+ */
+export const allEqual = (arr) => arr.every((v) => v === arr[0])
+
+// Capitalize function for the border properties
+export const capitalize = (string) =>
+  string.charAt(0).toUpperCase() + string.slice(1)
+
+// Convert kebab-case to camelCase
+export const toCamelCase = (str) =>
+  str.replace(/[_\- ]+(?<first>[a-z])/giu, (_, char, offSet) =>
+    offSet > 0 ? char.toUpperCase() : char
+  )
+
+/**
+ * Convert all keys in a style object to camelCase, separating out CSS variables
+ * @param {Record<string, string>} styles
+ * @returns {Record<string, string>}
+ */
+export function extractCssVars(styles) {
+  const cssVariables = {}
+
+  for (const key in styles) {
+    if (Object.hasOwn(styles, key) && key.includes('--')) {
+      cssVariables[key] = styles[key]
+    }
+  }
+
+  return cssVariables
+}
+
+/**
+ * Convert all keys in a style object to camelCase except CSS variables
+ * @param {Record<string, string>} styles
+ * @returns {Record<string, string>}
+ */
+export function convertKeysToCamelCase(styles) {
+  const camelCased = {}
+
+  for (const key in styles) {
+    if (Object.hasOwn(styles, key) && !key.includes('--')) {
+      camelCased[toCamelCase(key)] = styles[key]
+    }
+  }
+
+  return camelCased
+}
+
+function findVarPattern(input) {
+  // Regex to capture variable names with letters, numbers, and hyphens
+  const regex = /var\(--(?<varName>[a-zA-Z0-9-]+)(?:,\s*[a-zA-Z0-9%-]+)?\)/gu
+  const matches = []
+  let match = regex.exec(input)
+
+  // Find all matches in the input string
+  while (match !== null) {
+    const varName = `--${match.groups.varName}`
+    matches.push(varName)
+
+    match = regex.exec(input)
+  }
+
+  // Remove duplicates and return the result
+  return [...new Set(matches)]
+}
+
+/**
+ * @param {Record<string, string>} css
+ * @param {CSSStyleDeclaration} globalStyles
+ * @returns {Record<string, string>} extracted root variables
+ */
+export const extractRootVars = (css, globalStyles) => {
+  const variables = extractCssVars(css)
+  let rootVars = Object.values(css).reduce((acc, value) => {
+    const vars = {}
+
+    if (value.includes('var(')) {
+      const varNames = findVarPattern(value)
+      varNames.forEach((v) => {
+        let val = variables[v]
+        if (val || val === '') {
+          vars[v] = val || ' '
+        } else {
+          val = globalStyles.getPropertyValue(v)
+          if (val || val === '') {
+            vars[v] = val || ' '
+          }
+        }
+      })
+    }
+
+    return { ...acc, ...vars }
+  }, {})
+
+  // Check for nested root variables
+  if (Object.keys(rootVars).length) {
+    let checkingNested = true
+    let nested = {}
+    while (checkingNested) {
+      const parsed = Object.values({
+        ...rootVars,
+        ...variables,
+        ...nested
+      }).reduce(
+        /*  eslint-disable-next-line no-loop-func -- checking the contents of rootVars and nested is safe */
+        (acc, value) => {
+          const vars = {}
+          if (value.includes('var(')) {
+            const varNames = findVarPattern(value)
+            varNames.forEach((v) => {
+              if (v in rootVars || v in nested) {
+                return // Skip if already in rootVars or nested to prevent infinite loop
+              }
+              let val = variables[v]
+              if (val || val === '') {
+                vars[v] = val || ' '
+              } else {
+                val = globalStyles.getPropertyValue(v)
+                if (val || val === '') {
+                  vars[v] = val || ' '
+                }
+              }
+            })
+          }
+
+          return { ...acc, ...vars }
+        },
+        {}
+      )
+
+      // If no new variables found stop checking, otherwise merge them into nested
+      if (Object.keys(parsed).length) {
+        nested = { ...nested, ...parsed }
+      } else {
+        checkingNested = false
+      }
+    }
+
+    rootVars = { ...rootVars, ...nested }
+  }
+
+  return rootVars
+}
+
+// Helper function to deep compare objects, with support for circular references
+function isEqual(objA, objB, visited = new WeakSet()) {
+  if (objA === objB) {
+    return true
+  } // Check for reference equality
+  if (objA == null || objB == null) {
+    return false
+  } // Handle null or undefined
+
+  if (typeof objA !== 'object' || typeof objB !== 'object') {
+    return false // Both must be objects
+  }
+
+  // Handle circular references
+  if (visited.has(objA) || visited.has(objB)) {
+    return false
+  }
+  visited.add(objA)
+  visited.add(objB)
+
+  const keysA = Object.keys(objA)
+  const keysB = Object.keys(objB)
+
+  if (keysA.length !== keysB.length) {
+    return false
+  } // Different number of keys
+
+  for (const key of keysA) {
+    if (!keysB.includes(key) || !isEqual(objA[key], objB[key], visited)) {
+      return false // Keys don't match or values are different
+    }
+  }
+
+  return true // Objects are equal
+}
+
+// Function to find shared properties
+export function cleanSharedProperties(children) {
+  // Extract props from children
+  const props = children.map((child) => child.props)
+  const shared = {}
+
+  // Get keys from the first style object
+  const keys = Object.keys(props[0])
+
+  for (const key of keys) {
+    // Check if all style objects have the same value for this key
+    const values = props.map((style) => style[key])
+
+    if (values.every((value) => isEqual(value, values[0]))) {
+      const [val] = values
+      shared[key] = val // Add to shared properties
+    }
+  }
+
+  return shared // Return the shared properties object
+}
+
+/**
+ *  Converts an array of children objects into a single object with unique keys.
+ * @param {Array<any>} children
+ * @returns {Record<string, any>} reformatted children object
+ */
+export function reformatChildren(children) {
+  const childrenObj = {}
+
+  const keyCounts = {}
+
+  children.forEach((child) => {
+    let key = child.extend ?? 'Child' // Default key if `extend` is missing
+
+    // Check for multiple `extends` in the array
+    if (Array.isArray(key)) {
+      key = child.extend.shift()
+      if (!child.extend.length) {
+        delete child.extend
+      }
+    }
+
+    // Increment the key count to handle duplicates
+    if (!(key in keyCounts)) {
+      keyCounts[key] = 0
+    }
+    keyCounts[key]++
+
+    const newKey = keyCounts[key] > 1 ? `${key}_${keyCounts[key]}` : key
+
+    childrenObj[newKey] = { ...child }
+  })
+
+  return childrenObj
+}