cellery 1.2.0 → 1.3.0

package/lib/cells.js

@@ -1,3 +1,5 @@
+const { parse, walk, generate } = require('css-tree/dist/csstree.esm')
+
 class Cell {
   constructor(opts = {}) {
     this.id = opts.id
@@ -10,6 +12,7 @@ class Cell {
     this.decoration = opts.decoration
     this.size = opts.size
     this.onclick = opts.onclick
+    this.style = opts.style
   }
 
   static Styled(styledOpts = {}) {
@@ -64,6 +67,83 @@ class Cell {
   }
 }
 
+class Style {
+  constructor(opts = {}) {
+    this.content = parse(opts.children?.join('\n'))
+  }
+
+  findPropertyOfCell(name, property) {
+    return this.findProperty(`[data-cellery-cell="${name}"]`, property)
+  }
+
+  findProperty(selector, property) {
+    let value = null
+
+    walk(this.content, {
+      visit: 'Rule',
+      enter(rule) {
+        const prelude = generate(rule.prelude)
+        if (prelude !== selector) return
+
+        rule.block.children.forEach((decl) => {
+          if (decl.type === 'Declaration' && decl.property === property) {
+            value = generate(decl.value)
+          }
+        })
+      }
+    })
+
+    return value
+  }
+
+  addScope(target, parent) {
+    walk(this.content, {
+      visit: 'Rule',
+      enter(rule) {
+        rule.prelude.children.forEach((selector) => {
+          const str = generate(selector)
+          if (!str.startsWith(target)) return
+
+          const items = [...selector.children]
+          let inserted = false
+          for (let i = 0; i < items.length; i++) {
+            const node = items[i]
+            if (node.type === 'PseudoClassSelector' || node.type === 'PseudoElementSelector') {
+              selector.children.insertData({ type: 'IdSelector', name: parent }, items[i])
+              inserted = true
+              break
+            }
+          }
+          if (!inserted) {
+            selector.children.appendData({ type: 'IdSelector', name: parent })
+          }
+        })
+      }
+    })
+  }
+}
+
+class StyleHTML extends Style {
+  constructor(opts = {}) {
+    super(opts)
+
+    const cellNames = new Set(Object.keys(opts.cells))
+
+    walk(this.content, {
+      visit: 'TypeSelector',
+      enter(node) {
+        if (cellNames.has(node.name)) {
+          node.name = `[data-cellery-cell="${node.name}"]`
+        }
+      }
+    })
+  }
+
+  toCSS() {
+    return generate(this.content)
+  }
+}
+
 class Container extends Cell {
   // TODO: replace with classes
   static ScrollAll = 'all'
@@ -89,7 +169,7 @@ class App extends Cell {
 class Text extends Cell {
   constructor(opts = {}) {
     super(opts)
-    this.value = opts.value || ''
+    this.value = opts.value || this.children.filter((c) => typeof c === 'string').join('') || ''
   }
 }
 
@@ -114,5 +194,8 @@ module.exports = {
   App,
   Text,
   Paragraph,
-  Input
+  Input,
+
+  Style,
+  StyleHTML
 }

package/lib/template.js

@@ -1,8 +1,8 @@
-const { Cell, Container, App, Text, Paragraph, Input } = require('./cells')
+const { Cell, Container, App, Text, Paragraph, Input, StyleHTML, Style } = require('./cells')
 
 const SENTINEL = '\x00'
 
-const registry = { Cell, Container, App, Text, Paragraph, Input }
+const registry = { Cell, Container, App, Text, Paragraph, Input, 'Style.HTML': StyleHTML }
 
 function register(cells) {
   Object.assign(registry, cells)
@@ -44,10 +44,18 @@ function parse(input, slots) {
     while (!eof() && /\s/.test(peek())) advance()
   }
 
+  const SLOT_RE = new RegExp(SENTINEL + '(\\d+)' + SENTINEL, 'g')
+  const SLOT_PURE = new RegExp('^' + SENTINEL + '(\\d+)' + SENTINEL + '$')
+
   function resolveValue(str) {
     str = str.trim()
-    const m = str.match(new RegExp('^' + SENTINEL + '(\\d+)' + SENTINEL + '$'))
+    // Pure placeholder — preserve type
+    const m = str.match(SLOT_PURE)
     if (m) return slots[parseInt(m[1])]
+    // Mixed content — inline replace as strings
+    if (str.includes(SENTINEL)) {
+      return str.replace(SLOT_RE, (_, id) => String(slots[parseInt(id)]))
+    }
     if (str === 'true') return true
     if (str === 'false') return false
     if (str !== '' && !isNaN(str)) return Number(str)
@@ -82,7 +90,7 @@ function parse(input, slots) {
     advance() // <
 
     let name = ''
-    while (!eof() && /[a-zA-Z0-9_]/.test(peek())) name += advance()
+    while (!eof() && /[a-zA-Z0-9_.]/.test(peek())) name += advance()
 
     const attrs = parseAttrs()
 
@@ -158,9 +166,23 @@ function build(node, slots) {
   const Ctor = registry[node.tag]
   if (!Ctor) throw new Error('Unknown cell: ' + node.tag)
 
-  const children = node.children.map((c) => build(c, slots)).filter((c) => c != null)
-
-  return new Ctor({ ...node.attrs, children })
+  let style = null
+  const children = node.children
+    .map((c) => build(c, slots))
+    .filter((c) => {
+      if (c instanceof Style) {
+        style = c
+        return false
+      }
+      return c !== null
+    })
+
+  return new Ctor({
+    ...node.attrs,
+    children,
+    style,
+    cells: node.tag.startsWith('Style') ? registry : undefined
+  })
 }
 
 module.exports = { cellery, register }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cellery",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "cellery",
   "exports": {
     "./package": "./package.json",
@@ -24,8 +24,8 @@
   },
   "scripts": {
     "format": "prettier . --write",
-    "test": "prettier . --check && lunte && brittle-bare test/all.js",
-    "lint": "lunte"
+    "test": "brittle-bare test/all.js",
+    "lint": "prettier . --check && lunte"
   },
   "repository": {
     "type": "git",
@@ -38,6 +38,7 @@
   },
   "homepage": "https://github.com/holepunchto/cellery",
   "dependencies": {
+    "css-tree": "^3.2.1",
     "iambus": "^2.0.6"
   }
 }