source/template.js

import { prettify } from '@tech_query/node-toolkit';

import { identifierOf } from './utility';


/**
 * @private
 *
 * @return {String}
 */
export function index_html() {

    return `<template>
    <style>
        h1 {
            color: lightblue;
        }
    </style>

    <h1>Hello, WebCell !</h1>
</template>`;
}


/**
 * @private
 *
 * @param {String}   name
 * @param {String[]} [keys=[]]
 *
 * @return {String}
 */
export function index_js(name,  keys = [ ]) {

    return prettify(`
import { component${keys[0] ? ', mapProperty, mapData' : ''} } from 'web-cell';

import template from './index.html';


@component({ template })
export default  class ${identifierOf(name, true)} extends HTMLElement {

    constructor() {  super().construct();  }
${
    keys[0] ? `
    @mapProperty
    static get observedAttributes() {

        return  ${JSON.stringify( keys )};
    }

    @mapData
    attributeChangedCallback() { }` : ''}
}`);
}


/**
 * @private
 *
 * @param {String}   name
 * @param {String[]} page
 *
 * @return {String}
 */
export  function router_js(name, page) {

    return prettify(`import { component } from 'web-cell';

import HTMLRouter, { load } from 'cell-router';


@component()
export default  class ${identifierOf(name, true)}Router extends HTMLRouter {
${page.map(name => {

        name = name.toLowerCase();

        return `
    @load('/${name}')
    ${name}Page() {  return '<page-${name} />';  }
`;}).join('\n')}
}`);
}