@things-factory/shell 5.0.0-zeta.2 → 5.0.0-zeta.20

package/client/index.js

@@ -1,5 +1,5 @@
 import 'broadcastchannel-polyfill'
-import './app/app'
+import '@operato/shell/app.js'
 
 /* Export ENV */
 export const PROCESS = {

package/client/route.js

@@ -1,4 +1,4 @@
 export default function route(page) {
-  import('./app/pages/page-404')
+  import('@operato/shell/page-404.js')
   return 'page404'
 }

package/client/store.js

@@ -1,20 +1,12 @@
-import { createStore, compose, applyMiddleware, combineReducers } from 'redux'
-import thunk from 'redux-thunk'
-import { lazyReducerEnhancer } from 'pwa-helpers/lazy-reducer-enhancer.js'
+import { configureStore } from 'redux';
 
-import app from './reducers/app.js'
-import route from './reducers/route.js'
+import app from './reducers/app.js';
+import route from './reducers/route.js';
 
-// Sets up a Chrome extension for time travel debugging.
-// See https://github.com/zalmoxisus/redux-devtools-extension for more information.
-const devCompose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
-
-export const store = createStore(
-  state => state,
-  devCompose(lazyReducerEnhancer(combineReducers), applyMiddleware(thunk))
-)
+export const store = configureStore({
+  devTools: process.env['NODE-ENV'] !== 'production'
+})
 
-// Initially loaded reducers.
 store.addReducers({
   app,
   route

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/shell",
-  "version": "5.0.0-zeta.2",
+  "version": "5.0.0-zeta.20",
   "description": "Core module for framework",
   "bin": {
     "things-factory": "bin/things-factory",
@@ -31,52 +31,54 @@
     "test": "NODE_ENV=test jest"
   },
   "dependencies": {
-    "@apollo/client": "^3.5.10",
-    "@graphql-tools/merge": "^8.2.3",
-    "@graphql-tools/schema": "^8.3.2",
-    "@graphql-tools/utils": "^8.6.2",
+    "@anchan828/typeorm-history": "^1.0.16",
+    "@apollo/client": "^3.6.9",
+    "@graphql-tools/merge": "^8.3.0",
+    "@graphql-tools/schema": "^8.5.0",
+    "@graphql-tools/utils": "^8.8.0",
     "@hatiolab/koa-webpack": "^6.0.0",
-    "@hatiolab/things-scene": "^3.0.12",
-    "@koa/cors": "^3.1.0",
-    "@material/mwc-button": "^0.25.3",
-    "@material/mwc-fab": "^0.25.3",
-    "@material/mwc-icon": "^0.25.3",
-    "@material/mwc-icon-button": "^0.25.3",
-    "@material/mwc-slider": "^0.25.3",
-    "@material/mwc-textfield": "^0.25.3",
-    "@operato/board": "1.0.0-beta.30",
-    "@operato/graphql": "1.0.0-beta.30",
-    "@operato/help": "1.0.0-beta.30",
-    "@operato/layout": "1.0.0-beta.30",
-    "@operato/shell": "1.0.0-beta.30",
-    "@operato/utils": "1.0.0-beta.30",
-    "@things-factory/ejs-remote": "^5.0.0-zeta.2",
-    "@things-factory/env": "^5.0.0-zeta.2",
-    "@things-factory/styles": "^5.0.0-zeta.2",
-    "@things-factory/utils": "^5.0.0-zeta.2",
+    "@hatiolab/things-scene": "^3.0.18",
+    "@koa/cors": "^3.3.0",
+    "@material/mwc-button": "^0.26.1",
+    "@material/mwc-fab": "^0.26.1",
+    "@material/mwc-icon": "^0.26.1",
+    "@material/mwc-icon-button": "^0.26.1",
+    "@material/mwc-slider": "^0.26.1",
+    "@material/mwc-textfield": "^0.26.1",
+    "@operato/board": "^1.0.0-beta.47",
+    "@operato/graphql": "^1.0.0-beta.47",
+    "@operato/help": "^1.0.0-beta.47",
+    "@operato/layout": "^1.0.0-beta.47",
+    "@operato/shell": "^1.0.0-beta.47",
+    "@operato/utils": "^1.0.0-beta.47",
+    "@things-factory/ejs-remote": "^5.0.0-zeta.20",
+    "@things-factory/env": "^5.0.0-zeta.20",
+    "@things-factory/styles": "^5.0.0-zeta.20",
+    "@things-factory/utils": "^5.0.0-zeta.20",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "@webpack-contrib/schema-utils": "^1.0.0-beta.0",
-    "apollo-server-core": "^3.6.4",
-    "apollo-server-koa": "^3.6.4",
-    "apollo-server-types": "^3.5.1",
+    "apollo-server-core": "^3.9.0",
+    "apollo-server-koa": "^3.9.0",
+    "apollo-server-types": "^3.6.1",
     "apollo-upload-client": "^17.0.0",
     "args": "^5.0.0",
     "broadcastchannel-polyfill": "^1.0.1",
     "chalk": "^4.1.0",
     "class-validator": "^0.13.2",
-    "core-js": "^3.16.0",
+    "core-js": "^3.23.3",
     "csvtojson": "^2.0.10",
     "debug": "^4.1.1",
     "firebase": "^8.0.1",
     "fs-extra": "^9.0.1",
     "glob": "^7.1.6",
-    "graphql": "^15.7.2",
+    "graphql": "^15.8.0",
     "graphql-mqtt-subscriptions": "^1.2.0",
     "graphql-redis-subscriptions": "^2.4.2",
     "graphql-subscriptions": "^2.0.0",
     "graphql-tag": "^2.12.6",
     "graphql-upload": "^13.0.0",
-    "haunted": "^4.8.2",
+    "graphql-ws": "^5.9.1",
+    "haunted": "^5.0.0",
     "html-webpack-plugin": "^5.5.0",
     "husky": "7.0.1",
     "imports-loader": "^3.0.0",
@@ -85,21 +87,21 @@
     "json-stringify-safe": "^5.0.1",
     "json5": "^2.2.0",
     "koa": "^2.13.4",
-    "koa-bodyparser": "^4.2.0",
-    "koa-ip": "^2.1.0",
+    "koa-bodyparser": "^4.3.0",
+    "koa-ip": "^2.1.2",
     "koa-router": "^7.4.0",
     "koa-send": "^5.0.0",
     "koa-static": "^5.0.0",
     "koa-unless": "^1.0.7",
     "koa2-connect-history-api-fallback": "^0.1.2",
-    "lit": "^2.2.1",
+    "lit": "^2.2.7",
     "loader-utils": "^2.0.0",
-    "lodash": "^4.17.15",
-    "lodash-es": "^4.17.15",
-    "mkdirp": "^1.0.3",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "mkdirp": "^1.0.4",
     "mqtt": "^4.3.4",
-    "node-fetch": "^2.6.0",
-    "nodemon": "^2.0.2",
+    "node-fetch": "^3.2.6",
+    "nodemon": "^2.0.19",
     "npm-license-crawler": "^0.2.1",
     "pluralize": "^8.0.0",
     "promises-all": "^1.0.0",
@@ -113,22 +115,20 @@
     "subscriptions-transport-ws": "^0.11.0",
     "sweetalert2": "^10.9.0",
     "type-graphql": "^1.2.0-rc.1",
-    "typeorm": "^0.2.41",
+    "typeorm": "^0.2.45",
     "uuid": "^3.4.0",
     "web-animations-js": "^2.3.2",
-    "web-push": "^3.4.5",
-    "webfontloader": "^1.6.28"
+    "web-push": "^3.5.0",
+    "webfontloader": "^1.6.28",
+    "ws": "^8.8.0"
   },
   "optionalDependencies": {
-    "better-sqlite3": "^7.1.2",
+    "better-sqlite3": "^7.5.3",
     "mssql": "^8.1.2",
     "mysql2": "^2.3.3",
-    "oracledb": "^5.1.0",
-    "pg": "^8.3.0",
-    "sqlite3": "^5.0.0"
+    "oracledb": "^5.4.0",
+    "pg": "^8.7.3",
+    "sqlite3": "^5.0.8"
   },
-  "resolutions": {
-    "core-js": "^3.16.0"
-  },
-  "gitHead": "fe921b76f32ac48ceddf3c290110509bdb5750d6"
+  "gitHead": "34981af408c52ca2472fdbd70ea3b5fbe0ab4073"
 }

package/client/app/app-style.js

@@ -1,69 +0,0 @@
-import { css } from 'lit'
-
-export const AppStyle = css`
-  :host {
-    display: grid;
-
-    grid-template-rows: var(--app-grid-template-rows, auto 1fr auto);
-    grid-template-columns: var(--app-grid-template-columns, auto 1fr auto);
-    grid-template-areas: var(--app-grid-template-area, 'header header header' 'nav main aside' 'nav footer aside');
-    grid-gap: var(--app-grid-gap, 0em);
-
-    max-width: 100vw;
-    width: 100vw;
-    height: 100vh;
-  }
-
-  ox-header-bar {
-    grid-area: header;
-  }
-
-  ox-nav-bar {
-    grid-area: nav;
-  }
-
-  main {
-    grid-area: main;
-
-    overflow: hidden;
-
-    display: flex;
-    flex-direction: row;
-  }
-
-  ox-aside-bar {
-    grid-area: aside;
-  }
-
-  ox-footer-bar {
-    grid-area: footer;
-  }
-
-  main * {
-    flex: 1;
-  }
-
-  main *:not([active]) {
-    display: none;
-  }
-
-  [hidden] {
-    display: none;
-  }
-
-  ox-snack-bar {
-    z-index: 1000;
-  }
-
-  /* Wide layout */
-  @media (min-width: 460px) {
-  }
-
-  @media print {
-    :host {
-      width: 100%;
-      height: 100%;
-      min-height: 100vh;
-    }
-  }
-`

package/client/app/app.js

@@ -1,225 +0,0 @@
-import '@operato/layout'
-
-import { LitElement, html } from 'lit'
-import { UPDATE_ACTIVE_PAGE, UPDATE_CONTEXT_PATH, UPDATE_MODULES, navigateWithSilence, store } from '@operato/shell'
-
-import { AppStyle } from './app-style'
-import { ScrollbarStyles } from '@operato/styles'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-import { getPathInfo } from '@operato/utils'
-import { installRouter } from 'pwa-helpers/router.js'
-import throttle from 'lodash-es/throttle'
-
-class ThingsApp extends connect(store)(LitElement) {
-  static get properties() {
-    return {
-      _contextPath: String,
-      _page: String,
-      _pages: Object,
-      _resourceId: String,
-      _params: Object,
-      _callbacks: Array,
-      _activePage: Object,
-      _context: Object,
-      _modules: Array
-    }
-  }
-
-  static get styles() {
-    return [ScrollbarStyles, AppStyle]
-  }
-
-  render() {
-    var params = this._params || {}
-    var fullbleed = (this._context && this._context.fullbleed) || (params.fullbleed && params.fullbleed == 'Y')
-    var widebleed = (this._context && this._context.widebleed) || (params.widebleed && params.widebleed == 'Y')
-
-    return html`
-      <ox-header-bar ?fullbleed=${fullbleed}></ox-header-bar>
-
-      <ox-nav-bar ?fullbleed=${fullbleed || widebleed}></ox-nav-bar>
-
-      <main></main>
-
-      <ox-aside-bar ?fullbleed=${fullbleed || widebleed}></ox-aside-bar>
-
-      <ox-footer-bar ?fullbleed=${fullbleed}></ox-footer-bar>
-
-      <ox-snack-bar></ox-snack-bar>
-    `
-  }
-
-  constructor() {
-    super()
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    window.addEventListener('resize', () => this.resized())
-
-    /* 모듈 임포트를 동적으로 처리한다. */
-    import(
-      /* webpackPrefetch: true */
-      /* webpackPreload: true */
-      /* webpackChunkName: "modules" */
-      '../module-importer.import'
-    ).then(module => {
-      var modules = module.modules
-
-      /* lifecycle - bootstrapping */
-      this.dispatchEvent(new Event('lifecycle-bootstrap-begin'))
-      modules.forEach((m, idx) => {
-        try {
-          m.bootstrap && m.bootstrap()
-          // console.info(`[${idx} BOOTSTRAPED - ${m.name}]`)
-        } catch (e) {
-          console.error(`[${idx} BOOTSTRAP ERROR -${m.name}]`, e)
-        }
-      })
-      this.dispatchEvent(new Event('lifecycle-bootstrap-finish'))
-
-      /* shouldUpdate를 활성화한다. */
-      this._moduleInitialized = true
-
-      /* modules를 store에 dispatch 함으로써, update를 invoke 시킨다. */
-      store.dispatch({
-        type: UPDATE_MODULES,
-        modules
-      })
-
-      installRouter((location, e) => {
-        var { contextPath } = getPathInfo(location.pathname)
-
-        if (this._contextPath !== contextPath) {
-          store.dispatch({
-            type: UPDATE_CONTEXT_PATH,
-            contextPath
-          })
-        }
-
-        store.dispatch(navigateWithSilence(location))
-        this._callbacks &&
-          this._callbacks.forEach(callback => {
-            try {
-              callback.call(this, location, e)
-            } catch (ex) {
-              console.error(ex)
-            }
-          })
-      })
-    })
-
-    this.setBase()
-  }
-
-  resized() {
-    if (!this._throttledResize) {
-      this._throttledResize = throttle(() => {
-        const aside = this.renderRoot.querySelector('ox-aside-bar').clientWidth
-        const nav = this.renderRoot.querySelector('ox-nav-bar').clientWidth
-
-        this.style.setProperty(
-          '--app-grid-template-columns',
-          `auto minmax(calc(100vw - ${aside}px - ${nav}px), 1fr) auto`
-        )
-      }, 100)
-    }
-
-    this._throttledResize()
-  }
-
-  routeToPage() {
-    let activePages = this.shadowRoot.querySelectorAll('main > .page[active]')
-    activePages.forEach(page => {
-      page.removeAttribute('active')
-    })
-
-    this._activePage = this.shadowRoot.querySelector(`main > .page[data-page=${this._page}]`)
-
-    if (!this._activePage) {
-      /* 해당 route에 연결된 page가 없는 경우에 main 섹션에 해당 element를 추가해준다. */
-      var tagname = this._pages[this._page]
-      if (tagname) {
-        var main = this.shadowRoot.querySelector('main')
-
-        var el = document.createElement(tagname)
-        el.setAttribute('class', 'page')
-        el.setAttribute('data-page', this._page)
-
-        main.appendChild(el)
-
-        this._activePage = el
-      }
-    }
-
-    if (this._activePage) {
-      this._activePage.setAttribute('active', true)
-      this._activePage.setAttribute('context-path', this._contextPath)
-      this._activePage.lifecycle = {
-        ...(this._activePage.lifecycle || {}),
-        active: true,
-        params: this._params,
-        resourceId: this._resourceId,
-        page: this._page
-      }
-    }
-
-    store.dispatch({
-      type: UPDATE_ACTIVE_PAGE,
-      activePage: this._activePage
-    })
-  }
-
-  async updated(changedProps) {
-    if (changedProps.has('_modules')) {
-      this._readyPageList()
-    }
-
-    if (changedProps.has('_page') || changedProps.has('_resourceId') || changedProps.has('_params')) {
-      this.routeToPage()
-    }
-
-    if (changedProps.has('_contextPath')) {
-      this.setBase()
-    }
-
-    this.resized()
-  }
-
-  shouldUpdate() {
-    return this._moduleInitialized
-  }
-
-  stateChanged(state) {
-    this._page = state.route.page
-    this._params = state.route.params
-    this._resourceId = state.route.resourceId
-    this._callbacks = state.route.callbacks
-    this._context = state.route.context
-    this._modules = state.app.modules
-    this._contextPath = state.app.contextPath
-  }
-
-  _readyPageList() {
-    var reversedModules = [...this._modules].reverse()
-    this._pages = {}
-
-    /* 모듈 참조 순서 역순으로 page를 추가한다. (for overidable) */
-    reversedModules.forEach(m => {
-      m.routes &&
-        m.routes.forEach(route => {
-          if (!this._pages[route.page]) {
-            this._pages[route.page] = route.tagname
-          }
-        })
-    })
-  }
-
-  setBase() {
-    var base = document.querySelector('base')
-    base.setAttribute('href', this._contextPath ? `${this._contextPath}/` : '/')
-  }
-}
-
-window.customElements.define('things-app', ThingsApp)

package/client/app/pages/page-404.js

@@ -1,59 +0,0 @@
-import { css, html } from 'lit'
-
-import { PageView } from '@operato/shell'
-
-class Page404 extends PageView {
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        box-sizing: border-box;
-
-        background-color: var(--main-section-background-color);
-        --padding-wide: 15%;
-      }
-      section {
-        padding: var(--padding-wide) 0 0 0;
-        text-align: center;
-        color: var(--secondary-color);
-      }
-      mwc-icon {
-        --mdc-icon-size: 120px;
-        color: var(--status-danger-color);
-        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
-      }
-      h2 {
-        margin: 0 auto;
-        font-size: 2.5em;
-        text-transform: capitalize;
-      }
-      @media only screen and (max-width: 460px) {
-        mwc-icon {
-          padding-top: 25%;
-          --mdc-icon-size: 90px;
-        }
-        h2 {
-          font-size: 2em;
-        }
-      }
-    `
-  }
-
-  get context() {
-    return {
-      title: 'Page Not Found'
-    }
-  }
-
-  render() {
-    return html`
-      <section>
-        <mwc-icon>error_outline</mwc-icon>
-        <h2>page not found!</h2>
-        The page you requested cannot be found.
-      </section>
-    `
-  }
-}
-
-customElements.define('page-404', Page404)