peerreynders

## firstResolvedByArrayOrderWins.js
function log(value) {
  console.log(value);
}

function executor(resolve, _reject) {
  const resolveValue = () => resolve('3 Resolved now');
  self.setTimeout(resolveValue, 1000);
}

const pending = new Promise(executor);

## filterMap.html
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Filter Map</title>
  </head>
  <body>
    <script>

## DisclosureToggle.svelte
<!-- file: src/DisclosureToggle.svelte -->
<svelte:options tag={ null }/>
<script>
 import { onMount } from 'svelte';

 // prop names ("buttonLabel") aren't converted to
 // attribute names ("button-label")
 export let label = 'Toggle content';

 let trigger;

## reactIsAFramework.md

      
              1 file
            
          
              2 forks
            
          
              5 comments
            
          
              20 stars
            
          
                peerreynders
                / reactIsAFramework.md
            
            
              Last active
              March 23, 2024 02:34
            
              
                React is a (view component) framework
              
          
    "Art prior" to React:
Martin Fowler: InversionOfControl (2005-Jun-26)

Inversion of Control is a key part of what makes a framework different to a library. A library is essentially a set of functions that you can call, these days usually organized into classes. Each call does some work and returns control to the client.
A framework embodies some abstract design, with more behavior built in. In order to use it you need to insert your behavior into various places in the framework either by subclassing or by plugging in your own classes. The framework's code then calls your code at these points.

The litmus test:

If your code calls it, it's a library.


## demo.exs
# Cobbled together ("untested") demonstration code - no production value
# The intention is to flood all CPU cores with "work"
#
# Created for: https://elixirforum.com/t/finding-vampire-numbers/25098/10
#
defmodule Primes do
  require Integer

  @primes :primes
  @init_last 3

## another_handler.ex
# file: lib/em_demo/some_handler.ex
#
defmodule EmDemo.AnotherHandler do
  use GenServer

  @impl true
  def init([to_pid, token] = arg) do
    IO.puts("#{__MODULE__}: init(#{inspect(arg)})")
    {:ok, {to_pid, token}}
  end

## colorpicker_karma-test.mjs
/* file: components/wcia-color-picker/test/karma-test.mjs
   original: https://github.com/bengfarrell/webcomponentsinaction/blob/master/chapter12and13/components/colorpicker/test/karma-test.js
 */
import _dontCare from '../src/wcia-color-picker.mjs'

const makePicker = (function() {
  const pickerSize = 500
  const thumbCenterOffset = 5/2 + 3 // width/2 + left border
  const markup =`
<wcia-color-picker

## index.html
<!DOCTYPE html>
<html>
  <head lang="en">
    <!--
         file: index.html
         Web Components in Action MEAP v6
         original: https://github.com/bengfarrell/webcomponentsinaction/blob/master/chapter10/10.2-cssvariables/shadow.html

         #1
         Defining a default value in case the custom property is not defined

## index.html
<html>
  <head>
    <!--
         file: index.html
         Web Components in Action MEAP v6
         https://livebook.manning.com/#!/book/web-components-in-action/chapter-7/v-6/comment-487676
         original: https://github.com/bengfarrell/webcomponentsinaction/blob/master/chapter7/7.5-slotsandtemplates/unnamedslots.html

         #1:
         prevent undefined custom element FOUC (flash of unstyled content)

## biz-card.mjs
// file: components/biz-card/biz-card.mjs
import { patchContentMap } from '../../helpers/templateLoader.mjs'

/*
  #1:
  See patchContentMap call below which creates
  static get _contentMap
  static set _templateUri

  #2:
	function log(value) {
	console.log(value);
	}

	function executor(resolve, _reject) {
	const resolveValue = () => resolve('3 Resolved now');
	self.setTimeout(resolveValue, 1000);
	}

	const pending = new Promise(executor);
	<!DOCTYPE html>
	<html lang="en-us">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Filter Map</title>
	</head>
	<body>
	<script>
	<!-- file: src/DisclosureToggle.svelte -->
	<svelte:options tag={ null }/>
	<script>
	import { onMount } from 'svelte';

	// prop names ("buttonLabel") aren't converted to
	// attribute names ("button-label")
	export let label = 'Toggle content';

	let trigger;
	# Cobbled together ("untested") demonstration code - no production value
	# The intention is to flood all CPU cores with "work"
	#
	# Created for: https://elixirforum.com/t/finding-vampire-numbers/25098/10
	#
	defmodule Primes do
	require Integer

	@primes :primes
	@init_last 3
	# file: lib/em_demo/some_handler.ex
	#
	defmodule EmDemo.AnotherHandler do
	use GenServer

	@impl true
	def init([to_pid, token] = arg) do
	IO.puts("#{__MODULE__}: init(#{inspect(arg)})")
	{:ok, {to_pid, token}}
	end
	/* file: components/wcia-color-picker/test/karma-test.mjs
	original: https://github.com/bengfarrell/webcomponentsinaction/blob/master/chapter12and13/components/colorpicker/test/karma-test.js
	*/
	import _dontCare from '../src/wcia-color-picker.mjs'

	const makePicker = (function() {
	const pickerSize = 500
	const thumbCenterOffset = 5/2 + 3 // width/2 + left border
	const markup =`
	<wcia-color-picker
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<!--
	file: index.html
	Web Components in Action MEAP v6
	original: https://github.com/bengfarrell/webcomponentsinaction/blob/master/chapter10/10.2-cssvariables/shadow.html

	#1
	Defining a default value in case the custom property is not defined
	// file: components/biz-card/biz-card.mjs
	import { patchContentMap } from '../../helpers/templateLoader.mjs'

	/*
	#1:
	See patchContentMap call below which creates
	static get _contentMap
	static set _templateUri

	#2: