cellery 1.1.1 → 1.3.0

package/index.js

@@ -1,9 +1,11 @@
 const Cellery = require('./lib/cellery')
 const cells = require('./lib/cells')
+const template = require('./lib/template')
 const decoration = require('./lib/decorations')
 
 module.exports = {
   Cellery,
   ...cells,
-  ...decoration
+  ...decoration,
+  ...template
 }

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

@@ -0,0 +1,188 @@
+const { Cell, Container, App, Text, Paragraph, Input, StyleHTML, Style } = require('./cells')
+
+const SENTINEL = '\x00'
+
+const registry = { Cell, Container, App, Text, Paragraph, Input, 'Style.HTML': StyleHTML }
+
+function register(cells) {
+  Object.assign(registry, cells)
+}
+
+function cellery(strings, ...values) {
+  let raw = ''
+  const slots = []
+  for (let i = 0; i < strings.length; i++) {
+    raw += strings[i]
+    if (i < values.length) {
+      const id = slots.length
+      slots.push(values[i])
+      raw += SENTINEL + id + SENTINEL
+    }
+  }
+
+  const ast = parse(raw, slots)
+  if (!ast) throw new Error('Empty template')
+  return build(ast, slots)
+}
+
+// ---- parser ----
+
+function parse(input, slots) {
+  let pos = 0
+
+  function peek() {
+    return input[pos]
+  }
+  function advance() {
+    return input[pos++]
+  }
+  function eof() {
+    return pos >= input.length
+  }
+
+  function skip() {
+    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()
+    // 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)
+    if (
+      (str[0] === '"' && str[str.length - 1] === '"') ||
+      (str[0] === "'" && str[str.length - 1] === "'")
+    ) {
+      return str.slice(1, -1)
+    }
+    return str
+  }
+
+  function parseNode() {
+    skip()
+    if (eof()) return null
+    if (peek() === '<') {
+      if (input[pos + 1] === '/') return null
+      return parseElement()
+    }
+    return parseText()
+  }
+
+  function parseText() {
+    let buf = ''
+    while (!eof() && peek() !== '<') buf += advance()
+    buf = buf.trim()
+    if (!buf) return null
+    return { type: 'text', value: resolveValue(buf) }
+  }
+
+  function parseElement() {
+    advance() // <
+
+    let name = ''
+    while (!eof() && /[a-zA-Z0-9_.]/.test(peek())) name += advance()
+
+    const attrs = parseAttrs()
+
+    let selfClose = false
+    if (peek() === '/') {
+      selfClose = true
+      advance()
+    }
+    advance() // >
+
+    if (selfClose) return { type: 'element', tag: name, attrs, children: [] }
+
+    const children = []
+    while (!eof()) {
+      skip()
+      if (eof()) break
+      if (peek() === '<' && input[pos + 1] === '/') break
+      const child = parseNode()
+      if (child) children.push(child)
+      else break
+    }
+
+    if (!eof() && peek() === '<' && input[pos + 1] === '/') {
+      advance()
+      advance()
+      while (!eof() && peek() !== '>') advance()
+      if (!eof()) advance()
+    }
+
+    return { type: 'element', tag: name, attrs, children }
+  }
+
+  function parseAttrs() {
+    const attrs = {}
+
+    while (!eof()) {
+      skip()
+      if (peek() === '>' || peek() === '/') break
+
+      let name = ''
+      while (!eof() && /[a-zA-Z0-9_\-]/.test(peek())) name += advance()
+      if (!name) break
+
+      if (peek() === '=') {
+        advance()
+        let val = ''
+
+        if (peek() === '"' || peek() === "'") {
+          const q = advance()
+          while (!eof() && peek() !== q) val += advance()
+          if (!eof()) advance()
+        } else {
+          while (!eof() && !/[\s>\/]/.test(peek())) val += advance()
+        }
+
+        attrs[name] = resolveValue(val)
+      } else {
+        attrs[name] = true
+      }
+    }
+
+    return attrs
+  }
+
+  return parseNode()
+}
+
+// ---- builder ----
+
+function build(node, slots) {
+  if (node.type === 'text') return node.value
+
+  const Ctor = registry[node.tag]
+  if (!Ctor) throw new Error('Unknown cell: ' + node.tag)
+
+  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.1.1",
+  "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"
   }
 }