JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<div id="uuid-1234-1234-1234-1234" class="component teaser">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
</div>

<script>RichcontentAssets.boostrap('#uuid-1234-1234-1234-1234')</script>

JavaScript 1.7

class Carousel {
	constructor() {
  	console.log("Carousel inited");
  }
}

class CarouselTeaser extends Carousel {
	constructor() {
  	super();
  	console.log("CarouselTeaser inited");
  }
}

const modules = {Carousel, CarouselTeaser};

class RichcontentLoader {
	static getModuleByComponent(component) {
  	const classes = component.classList;
    
    if(classes.contains('teaser')) {
    	return 'CarouselTeaser';
    }
    
    return null;
  }

	boostrap(selector) {
  	const component = document.querySelector(selector);
    
    if(!component) {
    	throw `Can't find ${component}. Please check Template or UUID.`;
    }
    
    const module = RichcontentLoader.getModuleByComponent(component);
    
    if(!module) {
    	throw `Can't boostrap ${module}. Please check your mapping in RichcontentLoader::getModuleByComponent.`;
    }
    
    new modules[module](component);
  }
}


const RichcontentAssets = new RichcontentLoader();