Mikael Brevik mikaelbr

Programming enthusiast. Maintainer of things, organizer of @BartJS and podcasts @BartJS & @kortslutning. Videos kodesnutt.io. CTO @varianter

mikaelbr / allowed-children.tsx

Last active November 11, 2020 19:16

	type AllowedChildren =
	\| React.ReactElement<BasicItemProps>
	\| React.ReactElement<HeaderItemProps>
	\| AllowedChildren[];

	type ListSectionProps = {
	children: AllowedChildren;
	};

	const childrenTypes = [BasicItem, HeaderItem];

mikaelbr / use-screen-dimensions.ts

Created October 27, 2020 07:13


	type ScreenDimensions = {
	height: number;
	width: number;
	}

	function useScreenDimension(): ScreenDimensions {
	const [dimensions, setDimensions] = useState<ScreenDimensions>(() =>
	Dimensions.get('screen'),
	);

mikaelbr / cloudSettings

Last active May 22, 2020 18:23

Visual Studio Code Settings Sync Gist

{"lastUpload":"2020-05-22T11:42:02.254Z","extensionVersion":"v3.4.3"}

mikaelbr / api-router-library.js

Created November 20, 2019 07:32

	import http from "http";

	const db = createDb();
	const app = createApp();
	const router = app()
	.on("GET", "/api/score", function(req, res) {
	result(res, 200, { scores: db.entries() });
	})
	.on("POST", "/api/score", function(req, res) {
	const { name, score } = req.body;

mikaelbr / own-jsx-final.js

Created October 8, 2019 20:21

Complete code example for blogpost "Using JSX for your own lightweight declarative library": https://medium.com/@mikaelbrevik/using-jsx-for-your-own-lightweight-declarative-library-a773d3796475

	// Using an IIFE to hide some implementation details.
	// If you use a bundler this should be it's own file.
	const createElement = (function() {
	const isEvent = (k, v) => k.startsWith("on") && typeof v === "function";
	const eventName = k => k.substr(2).toLowerCase();
	const isString = s => typeof s === "string";
	const isFunction = s => typeof s === "function";

	function attrs(el, props) {
	// Remember, JSX sets props to `null` if nothing is defined, so in that case we just return el

mikaelbr / own-jsx-16.js

Created October 8, 2019 20:06

Code for blogpost "Using JSX for your own lightweight declarative library": https://medium.com/@mikaelbrevik/using-jsx-for-your-own-lightweight-declarative-library-a773d3796475

	// ... inside our createElement when adding children:
	children.flat().forEach(child => {
	const node = !isString(child) ? child : document.createTextNode(child);
	el.appendChild(node);
	});
	// ... createElement continues

mikaelbr / own-jsx-15.js

Created October 8, 2019 20:05

Code for blogpost "Using JSX for your own lightweight declarative library": https://medium.com/@mikaelbrevik/using-jsx-for-your-own-lightweight-declarative-library-a773d3796475

	const isFunction = s => typeof s === "function";

	function createElement(tag, props, ...children) {
	// If first argument is function, we know it is custom component,
	// So call it as a function, passing the props with children as a property.
	// Using spread like this will work when props is `null` also
	if (isFunction(tag)) {
	return tag({ ...props, children });
	}

mikaelbr / own-jsx-13.js

Created October 8, 2019 20:03

Code for blogpost "Using JSX for your own lightweight declarative library": https://medium.com/@mikaelbrevik/using-jsx-for-your-own-lightweight-declarative-library-a773d3796475

	let myHeader = <Header id="myHeader">My important title</Header>;

	// Which outputs
	let myHeader = createElement(
	Header,
	{
	id: "myHeader"
	},
	"My important title"
	);

mikaelbr / own-jsx-14.js

Created October 8, 2019 20:02

Code for blogpost "Using JSX for your own lightweight declarative library": https://medium.com/@mikaelbrevik/using-jsx-for-your-own-lightweight-declarative-library-a773d3796475

	function Header(props) {
	return <h1 id={props.id}>Title: {props.children}</h1>;
	}

	// Or with destructuring
	function Header({ id, children }) {
	return <h1 id={id}>Title: {children}</h1>;
	}

mikaelbr / own-jsx-12.js

Created October 8, 2019 19:59

Code for blogpost "Using JSX for your own lightweight declarative library": https://medium.com/@mikaelbrevik/using-jsx-for-your-own-lightweight-declarative-library-a773d3796475

	const button = <button onClick={() => console.log("Hello!")}>Click me</button>;
	document.body.appendChild(button);
	// When clicked:
	//> Hello!
	//> Hello!