Injecting CellJs via external file #180
Description
Hi! Not sure if this is just something I am not doing correctly. I have tried everything to set up my project like a modular application. Rather than adding everything into my app via a <script> tag in my Index.html file, I have a single .js file ( index.js ) that imports everything in as individual components. Below is a simplified version of the code:
// Index.html
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css" />
<script src="https://www.celljs.org/cell.js"></script>
<script src="./index.js"></script>
</head>
<body>
</body>
</html>
// Index.js
import Coin from './Coin';
import Header from './Header';
const App = {
$cell: true,
id: 'vault-app-container',
$type: 'div',
$components: [],
_items: [Header, Coin],
$init: function() {
this.$components = this._items.map(function(item) {
return item;
});
}
};
export default App;
// Header.js
const Header = {
$cell: true,
$type: 'header',
class: 'fl w-100 pa2 bg-near-black moon-gray cf:after sans-serif',
$components: [
{
$type: 'div',
class: 'sans-serif fl w-100 pa3',
$components: [
{
$type: 'h1',
class: 'f3 lh-title tc cf:after',
$text: 'Your current Q-Vault Wallet Overview'
},
{
$type: 'div',
class: 'chart-container w-100 cf:after',
style: 'position: relative;',
$components: [
{
$type: 'canvas',
id: 'q-vault-summary',
class: 'w-70'
}
]
}
]
}
]
};
export default Header;
// Coin.js
const Coin = {
$type: 'article',
$cell: true,
class: 'dt w-100 ba b--dark-gray br4 bw2 pa3 avenir cf:after mb2',
href: '#0',
$components: [
{
$type: 'div',
class: 'fl w-100',
$components: [
{
$type: 'dl',
class: 'dib w-10 w2 w3-ns v-mid fl',
$components: [
{
$type: 'img',
src: 'https://www.cryptocompare.com/media/19633/btc.png',
class: 'ba b--black-10 db br-100 w2 w3-ns h2 h3-ns'
}
]
},
{
$type: 'dl',
class: 'dib w-30 tc v-mid fl',
$components: [
{
$type: 'dd',
class: 'ml0 b f3 f2-ns green',
$components: [
{
$type: 'small',
class: 'f6',
$text: '+ $'
},
{
$type: 'text',
$text: '206\n'
}
]
},
{
$type: 'dt',
class: 'db f6',
$text: 'Current Profit'
}
]
},
]
}
]
};
export default Coin;
I have tried everything I can possibly think of to call App in my index.html file, but no solutions work for actually rendering it to the DOM. If I add all of this in the playground or directly into index.html I can render it, but no luck with rendering App from index.js Can you provide any help?