Injecting CellJs via external file #180

jshuadvd · 2018-08-27T04:09:28Z

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/[email protected]/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?

The text was updated successfully, but these errors were encountered:

lachdoug · 2018-10-11T11:02:28Z

const App = { $cell: true, ... } is not in the global scope (since modules have their own scope). Use window.App = { $cell: true, ... }. Here is an example:

<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <script src='https://www.celljs.org/cell.js'></script>
  <script type='module' src='/js/app.js'></script>
</head>
</html>

'/js/app.js'
import { hello } from './hello.js'
import { world } from './world.js'
window.app = {
  $cell: true, 
  $components: [ hello, world ]
}

'/js/hello.js'
export const hello = { $text: 'Hello' }

'/js/world.js'
export const world = { $text: 'World' }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Injecting CellJs via external file #180

Injecting CellJs via external file #180

jshuadvd commented Aug 27, 2018 •

edited

Loading

lachdoug commented Oct 11, 2018

Injecting CellJs via external file #180

Injecting CellJs via external file #180

Comments

jshuadvd commented Aug 27, 2018 • edited Loading

lachdoug commented Oct 11, 2018

jshuadvd commented Aug 27, 2018 •

edited

Loading