Closure Values Demo

by actualwave

HTML

<script src="https://unpkg.com/@actualwave/dom-console@latest/console.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@actualwave/dom-console@latest/console.css">
<script src="https://unpkg.com/@actualwave/closure-value@latest/closure-value.umd.js"></script>

JavaScript

/*
	Setting up demo environment
*/

const { log, info, error } = DOMConsole.create(document.body);
const {
  singleValueFactory,
  valuesMapFactory,
  valuesSetFactory,
} = ClosureValue;

/*
	Single Value
*/
const singleValue = singleValueFactory(1, (value) => !!value);
info('Single Value API:', singleValue);

/*
	Let's destructure to have better naming
*/
const { get: isEnabled, set: setEnabled } = singleValue;

/*
  Change value
*/
setEnabled(0);
log('Is Enabled?', isEnabled());

/*
	Map of values
*/
const mapValues = valuesMapFactory(
  [['one', 1]],
  (value) => String(value)
);
info('Values Map API:', mapValues);

/*
	Let's destructure to have better naming
*/
const { set: setStringValue, get: getStringValue, copy: listStrings } = mapValues;

/*
  Add more types
*/
setStringValue(
  () => null,
  () => null
);

setStringValue(
  { toString: () => 'my-object' },
  { toString: () => 'my-object' }
);
log('Retrieve one value:', getStringValue('one'));
log('Get copy of the map with all values:', listStrings());

/*
	Set of values
*/
const setValues = valuesSetFactory(
  [Number, Boolean, String],
  (value) => Object.getPrototypeOf(value).constructor
);
info('Values Set API:', setValues);

/*
	Let's destructure to have better naming
*/
const { add: registerTypeOf, has: isTypeRegistered, get: listTypes } = setValues;

/*
  Add more types
*/
registerTypeOf({});
registerTypeOf([]);
registerTypeOf(document);
registerTypeOf(window);

log('Do we have Object type registered?', isTypeRegistered(Object));
log('Is Array registered?', isTypeRegistered(Array));
log('What ypes we have registered?', listTypes());