import { SimpleComps } from 'https://www.jsdelivr.com/package/npm/@sharks-interactive/simple-components';
const sc = new SimpleComps('relative/path/to/components/');

window.onload = sc.render('welcome-msg').then(() => {
	// Called when the comp finishes rendering in case you need to access it
	console.log('Done rendering');
});

/// In another file at
// /relative/path/to/components/welcome-msg.html:
<div style="background-color: {color};"></div>

// In index.html or whatever else file is using this component:
<welcome-msg color="red"></welcome-msg>

// By default calling sc.render('comp-name') renders every element of that type in the DOM, but Simple-Components has a utility function for creating multiple in the DOM for rendering
import { SimpleComps } from 'https://www.jsdelivr.com/package/npm/@sharks-interactive/simple-components';
const sc = new SimpleComps('relative/path/to/components/');

// Create a new object containing a list of objects contaning a list of attributes each component should use
// Populate this via code for search results, tweets or whatever else you need
let dataObj = {
	l: [
		{ attrs: ['propName|propValue', 'resultName|https://dogs.com'] }, // Javascript object for each comp's attrs
		{ attrs: ['propName|propValue', 'resultName|https://cats.com'] }
	]
}

sc.create('result-card', 2 /* Num of comps to create */, myContainer /* Parent obj */, dataObj /* Comp data */);
sc.render('result-card'); // Renders all the comps we just created in the DOM

///
/// In the result-card.html comp file:
///
<div class="search-result">
	<h1>{resultName}</h1>
</div>