search

intercellular / cell

A self-driving web app framework
https://www.celljs.org
MIT License
1.51k stars 94 forks source link

Injecting CellJs via external file #180

Open jshuadvd opened 5 years ago

jshuadvd commented 5 years ago

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?

lachdoug commented 5 years ago

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' }