JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="drc-component" data-columns="5" data-keys="4, 1.77" data-show-thing="true">
	<!-- stuff -->
</div>

JavaScript

var toString = ({}).toString;

function type (value) {
	return toString.call(value).slice(8, -1);
}

function coerce (value, defaultValue) {
	switch (type(defaultValue)) {
		
		case "Number":
			return parseFloat(value, 10);
			break;
			
		case "Boolean":
			return (value === "true");
			break;
		
    case "Array":
    	var subvalue = (defaultValue.length) ? defaultValue[0] : null;
     	var array = value.split(/,\s*/);
    	if (subvalue !== null) {
      	array = array.map(function (value) {
        	return coerce(value, subvalue);
        });
      }
      return array;
      break;
    
		/*
		... and handling of other types ...
		*/
		
		case "String":
		default:
			break;
	}
	return value;
}

var component = document.querySelector(".drc-component");

var defaults = {
	columns: 2,
  showThing: false,
  keys: [0]
};



var options = {};

for (var name in defaults) {
	if (name in component.dataset) {
  	var value = component.dataset[name];
  	options[name] = (defaults[name] !== null) ? coerce(value, defaults[name]) : value;
  }
}

console.log(component.dataset, options);