d0ruk/a-counter.js Secret

## a-counter.js
import { html } from "https://unpkg.com/hybrids";

import { store } from "../../index.js";
import { connect } from "../../util.js";
import { increment, decrement } from "./module.js";

const onInc = ({ offset }) => store.dispatch(increment(offset));
const onDec = ({ offset }) => store.dispatch(decrement(offset));

export default {
  count: connect(store, state => state.count),
  offset: 1,
  render: ({ count, offset }) => {
    console.warn("render <a-counter>");

    return html`
      <button onclick="${onInc}">+${offset}</button>
      <button onclick="${onDec}">-${offset}</button>

      <p>Count: ${count}</p>
    `;
  },
};

## flex-box.js
import { html, children } from "https://unpkg.com/hybrids";

import { store } from "../../index.js";
import { connect } from "../../util.js";
// import { setObject } from "./module.js";

// import { MySelect } from "../index.js";

const makeBox = (el, idx) => html`<div>${idx + 1}</div>`;

export default {
  count: 20,
  flexAttrs: connect(store, state => state.flexbox),
  // CSSString: ({ flexAttrs }) =>
  //   Object.entries(flexAttrs)
  //     .filter(([key, value]) => value)
  //     .reduce((acc, [key, value]) => {
  //       return acc + ` ${key}: ${value};`;
  //     }, ""),
  render: ({ CSSString, count }) => {
    console.warn("render <flex-box>");
    return html` <style>
        div {
          border: 3px solid blue;
          display: flex;
        }
        div div {
          border: 1px solid red;
          font-size: 3rem;
          height: 5rem;
          width: 5rem;
        }
      </style>

      <div>
        ${Array.from({ length: count }).map(makeBox)}
      </div>`;
  },
};

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flax</title>
    <script type="module" src="index.js" defer></script>
  </head>
  <body>
    <a-counter></a-counter>
    <a-counter offset="10"></a-counter>
    <!-- <my-select options="north,east,south,west"></my-select> -->
    <select-group path="flexbox">
      <my-select
        key="flex-direction"
        options="row,column,row-reverse,column-reverse,unset"
        vertical
      ></my-select>
      <my-select
        key="flex-wrap"
        options="wrap,nowrap,wrap-reverse,unset"
        vertical
      ></my-select>
      <my-select
        key="justify-content"
        options="flex-start,flex-end,center,space-around,space-between,space-evenly,stretch"
        vertical
      ></my-select>
      <my-select
        key="align-items"
        options="flex-start,flex-end,center,baseline,self-end,self-start,stretch,unset"
        vertical
      ></my-select>
      <my-select
        key="align-content"
        options="flex-start,flex-end,center,stretch,unset"
        vertical
      ></my-select>
    </select-group>
    <flex-box count="8"></flex-box>
  </body>
</html>

## select-group.js
import { html, children } from "https://unpkg.com/hybrids";

import { store } from "../../index.js";
import { setObject } from "./module.js";

import { MySelect } from "../index.js";

export default {
  path: "",
  items: children(MySelect),
  render: ({ items, path }) => {
    console.warn("render <select-group>");
    // construct { k: "v" } from <my-select> children
    const statePatch = Object.fromEntries(
      items
        .map(({ key, selected }) => {
          if (!key) {
            console.warn(
              "Required attribute 'key' missing on <select> in <select-group>"
            );
            return [];
          }

          return [key, selected];
        })
        .filter(([k, v]) => k && v)
    );

    Object.keys(statePatch).length &&
      store.dispatch(setObject(statePatch, path));

    return html`<slot></slot>`;
  },
};
	import { html } from "https://unpkg.com/hybrids";

	import { store } from "../../index.js";
	import { connect } from "../../util.js";
	import { increment, decrement } from "./module.js";

	const onInc = ({ offset }) => store.dispatch(increment(offset));
	const onDec = ({ offset }) => store.dispatch(decrement(offset));

	export default {
	count: connect(store, state => state.count),
	offset: 1,
	render: ({ count, offset }) => {
	console.warn("render <a-counter>");

	return html`
	<button onclick="${onInc}">+${offset}</button>
	<button onclick="${onDec}">-${offset}</button>

	<p>Count: ${count}</p>
	`;
	},
	};
	import { html, children } from "https://unpkg.com/hybrids";

	import { store } from "../../index.js";
	import { connect } from "../../util.js";
	// import { setObject } from "./module.js";

	// import { MySelect } from "../index.js";

	const makeBox = (el, idx) => html`<div>${idx + 1}</div>`;

	export default {
	count: 20,
	flexAttrs: connect(store, state => state.flexbox),
	// CSSString: ({ flexAttrs }) =>
	// Object.entries(flexAttrs)
	// .filter(([key, value]) => value)
	// .reduce((acc, [key, value]) => {
	// return acc + ` ${key}: ${value};`;
	// }, ""),
	render: ({ CSSString, count }) => {
	console.warn("render <flex-box>");
	return html` <style>
	div {
	border: 3px solid blue;
	display: flex;
	}
	div div {
	border: 1px solid red;
	font-size: 3rem;
	height: 5rem;
	width: 5rem;
	}
	</style>

	<div>
	${Array.from({ length: count }).map(makeBox)}
	</div>`;
	},
	};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>flax</title>
	<script type="module" src="index.js" defer></script>
	</head>
	<body>
	<a-counter></a-counter>
	<a-counter offset="10"></a-counter>
	<!-- <my-select options="north,east,south,west"></my-select> -->
	<select-group path="flexbox">
	<my-select
	key="flex-direction"
	options="row,column,row-reverse,column-reverse,unset"
	vertical
	></my-select>
	<my-select
	key="flex-wrap"
	options="wrap,nowrap,wrap-reverse,unset"
	vertical
	></my-select>
	<my-select
	key="justify-content"
	options="flex-start,flex-end,center,space-around,space-between,space-evenly,stretch"
	vertical
	></my-select>
	<my-select
	key="align-items"
	options="flex-start,flex-end,center,baseline,self-end,self-start,stretch,unset"
	vertical
	></my-select>
	<my-select
	key="align-content"
	options="flex-start,flex-end,center,stretch,unset"
	vertical
	></my-select>
	</select-group>
	<flex-box count="8"></flex-box>
	</body>
	</html>
	import { html, children } from "https://unpkg.com/hybrids";

	import { store } from "../../index.js";
	import { setObject } from "./module.js";

	import { MySelect } from "../index.js";

	export default {
	path: "",
	items: children(MySelect),
	render: ({ items, path }) => {
	console.warn("render <select-group>");
	// construct { k: "v" } from <my-select> children
	const statePatch = Object.fromEntries(
	items
	.map(({ key, selected }) => {
	if (!key) {
	console.warn(
	"Required attribute 'key' missing on <select> in <select-group>"
	);
	return [];
	}

	return [key, selected];
	})
	.filter(([k, v]) => k && v)
	);

	Object.keys(statePatch).length &&
	store.dispatch(setObject(statePatch, path));

	return html`<slot></slot>`;
	},
	};