barneycarroll

const css = (...x) =>
  m(`style`, `\n@scope to (slot) {${ String.raw(...x) }}\n`)

barneycarroll

// Mithril dev harness backend
//
// Exports a `registry` of components, active `instances`, an
// `activeTree` with the hierarchicy of components in vdom structure,
// and a `wrapper` to be used instead of `m` hyperscript.
//
// Intended for use as a backend to a GUI for visual inspection &
// debugging of the Mithril virtual DOM tree.

// Each component called by Mithril needs to be wrapped in a

barneycarroll

/** Return a unique selector for a specific element. */
const getUniqueSelector = (/** @type {Element} */ element) => {
	/** Unique selector for this element */
	let selector = ''

	/** @type {Element} */
	let parent

	while (parent = element.parentElement) {
		/** @type {number} Nth-child order of the element. */

barneycarroll

function BeforeUnload(){
  const route.  = m.route.set
  const handler = e => {
    if(
      e.target.href 
      && 
      e.target != '_blank' 
      && 
      !confirm(message)
    ){

barneycarroll

:root {
  --separator-text : ' | ';
  --separator-size : .45em;
}

.inline-separators {  
  &:dir(ltr) {
    clip-path : inset(-100vh -100vw -100vh 0);
  }
  

barneycarroll

const object = {a: 1, b: 2}
const array  = [3,4]

// Value expression
const foo = {...object, c: 3} // == {a: 1, b: 2, c: 3}
const bar = [...array,  5, 6] // == [3, 4, 5, 6]

// Destructuring assignment
{
  const {a, ...rest} = foo // a == {a: 1}; rest == {b: 2, c: 3}

barneycarroll

// Disable mobile zoom on focus
{
  // Customise the selector value as necessary
  const selector  = '[data-nozoom]'
  const $viewport =
    document.querySelector('meta[name=viewport]')
    ??
    Object.assign(document.createElement('meta'), {name: 'viewport'})

  const $scale0 = Object.assign($viewport.cloneNode(), {content: 'user-scalable=0'})

barneycarroll

import {ordinals, defaultRange, rangeFromOrdinal, Calendar} from './DateRange.js'

const state = {
  ...rangeFromOrdinal('Today'),
  showCalendar : false,
}

m.mount(document.body, {
  view: () => [
    m('form',

barneycarroll

<span
  class="ordinal"
  data-number="22">
  22
</span>
<span
  class="ordinal"
  data-number="0">
  0
</span>

barneycarroll

@property --columns {
  syntax: '<integer>';
  inherits: false;
  initial-value: 1;
}

table {
  display: grid;
  grid-template-columns: repeat(var(--columns, 1), auto);
}