cellery 1.3.0 → 1.4.0

package/lib/cells.js

@@ -11,8 +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 = {}) {
@@ -39,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
     })
   }
@@ -59,17 +68,25 @@ 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) {
@@ -104,40 +121,12 @@ class Style {
           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 })
-          }
+          selector.children.prependData({ type: 'Combinator', name: ' ' })
+          selector.children.prependData({ 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)
@@ -160,9 +149,9 @@ class Container extends Cell {
   }
 }
 
-class App extends Cell {
+class Fragment extends Cell {
   constructor(opts = {}) {
-    super({ ...opts, id: 'app' })
+    super({ ...opts })
   }
 }
 
@@ -170,12 +159,8 @@ class Text extends Cell {
   constructor(opts = {}) {
     super(opts)
     this.value = opts.value || this.children.filter((c) => typeof c === 'string').join('') || ''
-  }
-}
-
-class Paragraph extends Cell {
-  constructor(opts = {}) {
-    super(opts)
+    this.paragraph = !!opts.paragraph
+    this.heading = opts.heading
   }
 }
 
@@ -191,11 +176,8 @@ class Input extends Cell {
 module.exports = {
   Cell,
   Container,
-  App,
+  Fragment,
   Text,
-  Paragraph,
   Input,
-
-  Style,
-  StyleHTML
+  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, StyleHTML, Style } = 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, 'Style.HTML': StyleHTML }
+const registry = {
+  ...compat,
+  Cell,
+  Container,
+  Fragment,
+  Text,
+  Paragraph,
+  Input,
+  Style
+}
 
 function register(cells) {
   Object.assign(registry, cells)
@@ -146,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
       }
@@ -181,7 +191,7 @@ function build(node, slots) {
     ...node.attrs,
     children,
     style,
-    cells: node.tag.startsWith('Style') ? registry : undefined
+    cells: node.tag.toLowerCase() === 'style' ? registry : undefined
   })
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cellery",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "cellery",
   "exports": {
     "./package": "./package.json",