cellery 1.2.0 → 1.4.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
@@ -9,7 +11,10 @@ class Cell {
     this.alignment = opts.alignment
     this.decoration = opts.decoration
     this.size = opts.size
-    this.onclick = opts.onclick
+    this.events = opts.events
+    this.style = opts.style
+
+    this._eventsRegistered = false
   }
 
   static Styled(styledOpts = {}) {
@@ -36,14 +41,21 @@ class Cell {
 
   render(opts = {}) {
     const cell = this._render()
-    if (!cell.cellery) {
-      cell.register(this.cellery)
+
+    if (!this.cellery) {
+      this.cellery = Cell.cellery
+    }
+
+    // @todo explore - 'ready' style first time setup?
+    if (this.events?.length && this.id && !this._eventsRegistered) {
+      this._eventsRegistered = true
+      this.cellery.pub({ event: 'register', id: this.id, targets: this.events })
     }
 
     this.cellery.pub({
       event: 'render',
       id: cell.id,
-      content: this.cellery.adapter.render(cell),
+      content: this.cellery.adapter?.render(cell),
       ...opts
     })
   }
@@ -56,11 +68,68 @@ class Cell {
     })
   }
 
-  register(cellery) {
-    this.cellery = cellery
-    for (const c of this.children) {
-      c.register(cellery)
-    }
+  // @deprecated
+  register(cellery) {}
+}
+
+class Style {
+  constructor(opts = {}) {
+    this.content = parse(opts.children?.join('\n'))
+
+    // setup data-cellery-cell for namespaced matching
+    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}"]`
+        }
+      }
+    })
+  }
+
+  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
+
+          selector.children.prependData({ type: 'Combinator', name: ' ' })
+          selector.children.prependData({ type: 'IdSelector', name: parent })
+        })
+      }
+    })
+  }
+
+  toCSS() {
+    return generate(this.content)
   }
 }
 
@@ -80,22 +149,18 @@ class Container extends Cell {
   }
 }
 
-class App extends Cell {
+class Fragment extends Cell {
   constructor(opts = {}) {
-    super({ ...opts, id: 'app' })
+    super({ ...opts })
   }
 }
 
 class Text extends Cell {
   constructor(opts = {}) {
     super(opts)
-    this.value = opts.value || ''
-  }
-}
-
-class Paragraph extends Cell {
-  constructor(opts = {}) {
-    super(opts)
+    this.value = opts.value || this.children.filter((c) => typeof c === 'string').join('') || ''
+    this.paragraph = !!opts.paragraph
+    this.heading = opts.heading
   }
 }
 
@@ -111,8 +176,8 @@ class Input extends Cell {
 module.exports = {
   Cell,
   Container,
-  App,
+  Fragment,
   Text,
-  Paragraph,
-  Input
+  Input,
+  Style
 }

package/lib/compat.js

@@ -0,0 +1,18 @@
+const { Text, Input, Container, Fragment, Style } = require('./cells')
+
+module.exports = {
+  '': Fragment,
+  h1: Text.Styled({ heading: 1 }),
+  h2: Text.Styled({ heading: 2 }),
+  h3: Text.Styled({ heading: 3 }),
+  h4: Text.Styled({ heading: 4 }),
+  h5: Text.Styled({ heading: 5 }),
+  h6: Text.Styled({ heading: 6 }),
+  div: Container,
+  input: Input.Styled({ multiline: false }),
+  textbox: Input.Styled({ multiline: true }),
+  span: Text,
+  button: Text.Styled({ events: ['click'] }),
+  p: Text.Styled({ paragraph: true }),
+  style: Style
+}

package/lib/template.js

@@ -1,8 +1,18 @@
-const { Cell, Container, App, Text, Paragraph, Input } = require('./cells')
+const { Cell, Container, Fragment, Text, Paragraph, Input, Style } = require('./cells')
+const compat = require('./compat')
 
 const SENTINEL = '\x00'
 
-const registry = { Cell, Container, App, Text, Paragraph, Input }
+const registry = {
+  ...compat,
+  Cell,
+  Container,
+  Fragment,
+  Text,
+  Paragraph,
+  Input,
+  Style
+}
 
 function register(cells) {
   Object.assign(registry, cells)
@@ -44,10 +54,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 +100,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()
 
@@ -138,7 +156,7 @@ function parse(input, slots) {
           while (!eof() && !/[\s>\/]/.test(peek())) val += advance()
         }
 
-        attrs[name] = resolveValue(val)
+        attrs[name] = name === 'events' ? resolveValue(val).split(',') : resolveValue(val)
       } else {
         attrs[name] = true
       }
@@ -158,9 +176,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.toLowerCase() === 'style' ? registry : undefined
+  })
 }
 
 module.exports = { cellery, register }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cellery",
-  "version": "1.2.0",
+  "version": "1.4.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"
   }
 }