Hyperscript Syntaxes: https://github.com/hyperhype/hyperscript/issues/65

style-01.js

// my initial code from https://github.com/bevry/outpatient/blob/455fd3a32791259931e0fa4e3b9b3b7d1dc26d8b/source/block.js#L55-L75
'use strict'

const h = require('hyperscript')

module.exports = function (opts = {}) {
	// Prepare
	const { document, content } = this
	const {
		permalink = document.url,
		heading = document.title,
		subheading = document.subheading,
		author = document.author,
		cssClasses = (document.cssClasses || []),
		editUrl = document.editUrl,
		date,
		prev,
		next,
		up,
		parents = []
	} = opts

	// Render
	const classes = ['block'].concat(cssClasses)
	return h('article', {
		class: classes.join(' ')
	}, [
		h('header', {class: 'block-header'}, [
			parents.length ? h('nav', { class: 'parentcrumbs' }, [
				h('ul', parents.map((parent) => h('li', [
					h('a', {
						class: 'permalink',
						href: parent.url
					}, [
						h('h3', parent.title)
					])
				])
				))
			]) : null,
			permalink ? h('a', {
				class: 'permalink hover-link',
				href: permalink
			}, [
				h('h1', heading)
			]) : h('h1', heading),
			subheading ? h('h2', subheading) : '',
			date ? h('span', { class: 'date' }, date) : '',
			author ? h('a', {
				class: 'author',
				href: `/people/${author}`
			}, author) : ''
		]),
		h('section', { class: 'block-content', innerHTML: content }),
		h('footer', { class: 'block-footer' }, [
			(prev || up || next) ? h('nav', { class: 'prev-next' }, [
				prev ? h('a', {
					class: 'prev',
					href: prev.url
				}, [
					h('span', { class: 'icon' }),
					h('span', { class: 'title' }, prev.title)
				]) : '',
				up ? h('a', {
					class: 'up',
					href: up.url
				}, [
					h('span', { class: 'icon' }),
					h('span', { class: 'title' }, up.title)
				]) : '',
				next ? h('a', {
					class: 'next',
					href: next.url
				}, [
					h('span', { class: 'icon' }),
					h('span', { class: 'title' }, next.title)
				]) : ''
			]) : ''
		]),
		editUrl ? h('aside', { class: 'block-edit' }, [
			h('a', { href: editUrl }, 'Edit and improve this page!')
		]) : ''
	])
}

style-02.js

// single object argument: tag and children properties
'use strict'

const h = require('hyperscript')

module.exports = function (opts = {}) {
	// Prepare
	const { document, content } = this
	const {
		permalink = document.url,
		heading = document.title,
		subheading = document.subheading,
		author = document.author,
		cssClasses = (document.cssClasses || []),
		editUrl = document.editUrl,
		date,
		prev,
		next,
		up,
		parents = []
	} = opts

	// Render
	const classes = ['block'].concat(cssClasses)
	return h({
		tag: 'article',
		class: classes.join(' '),
		children: [
			h({
				tag: 'header',
				class: 'block-header',
				children: [
					(parents.length || null) && h({
						tag: 'nav',
						class: 'parentcrumbs',
						children: h({
							tag: 'ul',
							children: parents.map((parent) => h({
								tag: 'li',
								children: h({
									tag: 'a',
									class: 'permalink',
									href: parent.url,
									children: h('h3', parent.title)
								})
							}))
						})
					}),
					(permalink || h('h1', heading)) && h({
						tag: 'a',
						class: 'permalink hover-link',
						href: permalink,
						children: h('h1', heading)
					}),
					(subheading || null) && h('h2', subheading),
					(date || null) && h({
						tag: 'span',
						class: 'date',
						children: date
					}),
					(author || null) && h({
						tag: 'a',
						class: 'author',
						href: `/people/${author}`,
						children: author
					})
				]
			}),
			h({
				tag: 'section',
				class: 'block-content',
				innerHTML: content
			}),
			h({
				tag: 'footer',
				class: 'block-footer',
				children: ((prev || up || next) || null) && h({
					tag: 'nav',
					class: 'prev-next',
					children: [
						(prev || null) && h({
							tag: 'a',
							class: 'prev',
							href: prev.url,
							children: [
								h('span.icon'),
								h('span.title', prev.title)
							]
						}),
						(up || null) && h({
							tag: 'a',
							class: 'up',
							href: up.url,
							children: [
								h('span.icon'),
								h('span.title', up.title)
							]
						}),
						(next || null) && h({
							tag: 'a',
							class: 'next',
							href: next.url,
							children: [
								h('span.icon'),
								h('span.title', next.title)
							]
						})
					]
				})
			}),
			(editUrl || null) && h({
				tag: 'aside',
				class: 'block-edit',
				children: [
					h({
						tag: 'a',
						href: editUrl,
						children: 'Edit and improve this page!'
					})
				]
			})
		]
	})
}

style-03.js

// minimal with children accepting a single component
'use strict'

const h = require('hyperscript')

module.exports = function (opts = {}) {
	// Prepare
	const { document, content } = this
	const {
		permalink = document.url,
		heading = document.title,
		subheading = document.subheading,
		author = document.author,
		cssClasses = (document.cssClasses || []),
		editUrl = document.editUrl,
		date,
		prev,
		next,
		up,
		parents = []
	} = opts

	// Render
	const classes = ['block'].concat(cssClasses)
	return h('article', { class: classes.join(' ') }, [
		h('header.block-header', [
			(parents.length || null) && h('nav.parentcrumbs',
				h('ul', parents.map((parent) =>
					h('li',
						h('a.permalink', { href: parent.url },
							h('h3', parent.title)
						)
					)
				))
			),
			(permalink || h('h1', heading)) && h('a.permalink.hover-link', { href: permalink }, h('h1', heading)),
			(subheading || null) && h('h2', subheading),
			(date || null) && h('span.date', date),
			(author || null) && h('a.author', { href: `/people/${author}` }, author)
		]),
		h('section.block-content', { innerHTML: content }),
		h('footer.block-footer', ((prev || up || next) || null) && h('nav.prev-next', [
			(prev || null) && h('a.prev', { href: prev.url }, [
				h('span.icon'),
				h('span.title', prev.title)
			]),
			(up || null) && h('a.up', { href: up.url }, [
				h('span.icon'),
				h('span.title', up.title)
			]),
			(next || null) && h('a.next', { href: next.url }, [
				h('span.icon'),
				h('span.title', next.title)
			])
		])),
		(editUrl || null) && h('aside.block-edit',
			h('a', { href: editUrl }, 'Edit and improve this page!')
		)
	])
}

style-04.js

// minimal with multiple children arguments - eliminating need for manual children arrays
'use strict'

const h = require('hyperscript')

module.exports = function (opts = {}) {
	// Prepare
	const { document, content } = this
	const {
		permalink = document.url,
		heading = document.title,
		subheading = document.subheading,
		author = document.author,
		cssClasses = (document.cssClasses || []),
		editUrl = document.editUrl,
		date,
		prev,
		next,
		up,
		parents = []
	} = opts

	// Render
	const classes = ['block'].concat(cssClasses)
	return h('article', { class: classes.join(' ') },
		h('header.block-header',
			(parents.length || null) && h('nav.parentcrumbs',
				h('ul', parents.map((parent) =>
					h('li',
						h('a.permalink', { href: parent.url },
							h('h3', parent.title)
						)
					)
				))
			),
			(permalink || h('h1', heading)) && h('a.permalink.hover-link', { href: permalink }, h('h1', heading)),
			(subheading || null) && h('h2', subheading),
			(date || null) && h('span.date', date),
			(author || null) && h('a.author', { href: `/people/${author}` }, author)
		),
		h('section.block-content', { innerHTML: content }),
		h('footer.block-footer', ((prev || up || next) || null) && h('nav.prev-next',
			(prev || null) && h('a.prev', { href: prev.url },
				h('span.icon'),
				h('span.title', prev.title)
			),
			(up || null) && h('a.up', { href: up.url },
				h('span.icon'),
				h('span.title', up.title)
			),
			(next || null) && h('a.next', { href: next.url },
				h('span.icon'),
				h('span.title', next.title)
			)
		)),
		(editUrl || null) && h('aside.block-edit',
			h('a', { href: editUrl }, 'Edit and improve this page!')
		)
	)
}