wkitd/src/index.js

/**
 * {wkitd}
 * @author yutent<yutent.io@gmail.com>
 * @date 2023/08/10 10:02:15
 */

import './init.js'
import { html, css, Component } from 'wkit'
import { noop } from './utils.js'

export * from './router/index.js'
export { createStore } from './store.js'

class App extends Component {}

export function createApp({
  data = {},
  methods = {},
  mounted = noop,
  render
} = {}) {
  //

  return new (function () {
    App.props = data
    Object.assign(App.prototype, methods, { mounted })

    this.use = function (plugin = noop, ...args) {
      plugin.apply(this, args)
      return this
    }
    this.mount = function () {
      let $router = window.__wkitd__.get('$router')
      if (render) {
        App.prototype.render = render
      } else {
        if ($router) {
          App.prototype.render = function () {
            return html`<router-view></router-view>`
          }
        } else {
          App.styles = css`
            :host {
              font-family: monospace;
              color: #647889;
            }
            .code {
              margin: 16px 0;
              background: #f7f8fb;
            }
          `
          App.prototype.render = function () {
            return html`
              <h1>It works!!!</h1>
              <cite>
                If you don't use router, you may define the
                <b>render</b> property.
              </cite>
              <div class="code">
                <pre><code>  createApp({</code></pre>
                <pre><code>    render() {</code></pre>
                <pre><code>      return html\`&lt;wc-home&gt;&lt;/wc-home&gt;\`</code></pre>
                <pre><code>    }</code></pre>
                <pre><code>  })</code></pre>
                <pre><code>  .mount()</code></pre>
              </div>
            `
          }
        }
      }
      if ($router) {
        App.prototype.mounted = function (...args) {
          let $view = window.__wkitd__.get('ROUTER_VIEW')
          if ($view) {
            $view.sync($router.getViews())
            $router.init()
            mounted.call(this, ...args)
          } else {
            throw new Error(
              `<router-view /> not found, "Router" works Unexpected.`
            )
          }
        }
      }
      App.reg('app')
    }
  })()
}