@operato/shell 7.1.27 → 7.1.32

package/src/app/app.ts

@@ -1,274 +0,0 @@
-import { html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-import { installRouter } from 'pwa-helpers/router.js'
-
-import { ScrollbarStyles } from '@operato/styles'
-import { setContextPathPrefix, getPathInfo } from '@operato/utils'
-
-import { navigateWithSilence, UPDATE_ACTIVE_PAGE, UPDATE_CONTEXT_PATH, UPDATE_MODULES } from '../actions'
-import { store } from '../store'
-import { AppStyle } from './app-style'
-import { PageView } from './pages/page-view'
-
-enum MODULES_STATE {
-  NOT_INITIALIZED,
-  INITIALIZING,
-  INITIALIZED
-}
-
-@customElement('things-app')
-export class ThingsApp extends connect(store)(LitElement) {
-  static styles = [ScrollbarStyles, AppStyle]
-
-  static moduleInitialized: MODULES_STATE = MODULES_STATE.NOT_INITIALIZED
-  static modules: Array<any> = []
-
-  /* 
-    모든 모듈의 routes 리스트가 수집될 때까지, routeToPage(..) 를 hold 시키기 위해서 ThingsApp.pages를 Promise로 정의한다. 
-  */
-  static pagesResolver: (
-    value:
-      | {
-          [path: string]: string
-        }
-      | PromiseLike<{
-          [path: string]: string
-        }>
-  ) => void
-  static pages: Promise<{ [path: string]: string }>
-
-  static callbacks: Array<any> = []
-  static contextPath?: string
-
-  @property({ type: String, attribute: 'context-path-prefix' }) contextPathPrefix?: string
-
-  @state() resourceId?: string
-  @state() page?: string
-  @state() params?: any
-  @state() activePage?: PageView
-  @state() context: any
-  @state() contextPath?: string = ThingsApp.contextPath
-  @state() modules: Array<any> = ThingsApp.modules
-
-  @query('main') private main!: HTMLElement
-
-  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`
-      <div>
-        <ox-page-header-bar header></ox-page-header-bar>
-        <main></main>
-        <ox-page-footer-bar footer></ox-page-footer-bar>
-      </div>
-
-      <ox-header-bar ?fullbleed=${fullbleed}></ox-header-bar>
-
-      <ox-nav-bar ?fullbleed=${fullbleed || widebleed}></ox-nav-bar>
-
-      <ox-aside-bar ?fullbleed=${fullbleed || widebleed}></ox-aside-bar>
-
-      <ox-footer-bar ?fullbleed=${fullbleed}></ox-footer-bar>
-
-      <ox-snack-bar></ox-snack-bar>
-    `
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this.setBase()
-
-    if (ThingsApp.moduleInitialized != MODULES_STATE.NOT_INITIALIZED) {
-      /* 첫번째 이후로 생성되는 경우에는 강제로 'popstate'를 발생시켜서, routing 기회를 준다 */
-      window.dispatchEvent(new CustomEvent('popstate'))
-
-      return
-    }
-
-    ThingsApp.moduleInitialized = MODULES_STATE.INITIALIZING
-
-    /* 모듈 임포트를 동적으로 처리한다. */
-    import(
-      /* webpackPrefetch: true */
-      /* webpackPreload: true */
-      /* webpackChunkName: "modules" */
-      '../module-importer.import'
-    ).then(module => {
-      var modules: {
-        name: string
-        bootstrap: (m?: any /* self */) => void
-      }[] = module.modules
-
-      /* lifecycle - bootstrapping */
-      modules.forEach(async (m, idx) => {
-        try {
-          m.bootstrap && (await m.bootstrap(m))
-        } catch (e) {
-          console.error(`[${idx} BOOTSTRAP ERROR -${m.name}]`, e)
-        }
-      })
-
-      /* shouldUpdate를 활성화한다. */
-      ThingsApp.moduleInitialized = MODULES_STATE.INITIALIZED
-
-      /* modules를 store에 dispatch 함으로써, update를 invoke 시킨다. */
-      store.dispatch({
-        type: UPDATE_MODULES,
-        modules
-      })
-
-      var lastPathName: string = ''
-
-      installRouter(async (location, e) => {
-        var { pathname } = location
-        var { contextPath } = getPathInfo(pathname)
-
-        /* 페이지를 나가기 전에 옮기지 않도록 개입할 기회를 준다 */
-        if (
-          lastPathName &&
-          lastPathName != pathname &&
-          this.activePage &&
-          this.activePage.canDeactivate &&
-          !(await this.activePage.canDeactivate())
-        ) {
-          history.pushState({}, this.activePage.title, lastPathName)
-          return
-        }
-
-        lastPathName = pathname
-
-        if (ThingsApp.contextPath !== contextPath) {
-          store.dispatch({
-            type: UPDATE_CONTEXT_PATH,
-            contextPath
-          })
-        }
-
-        store.dispatch(navigateWithSilence(location) as any)
-
-        ThingsApp.callbacks &&
-          ThingsApp.callbacks.forEach(callback => {
-            try {
-              callback.call(this, location, e)
-            } catch (ex) {
-              console.error(ex)
-            }
-          })
-      })
-    })
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-  }
-
-  async routeToPage() {
-    const activePages = this.renderRoot.querySelectorAll('main > .page[active]')
-    activePages.forEach(page => {
-      page.removeAttribute('active')
-    })
-
-    this.activePage = this.renderRoot.querySelector(`main > .page[data-page=${this.page}]`) as PageView
-
-    if (!this.activePage) {
-      /* 해당 route에 연결된 page가 없는 경우에 main 섹션에 해당 element를 추가해준다. */
-      const tagname = (await ThingsApp.pages)[this.page!]
-      if (tagname) {
-        const el = document.createElement(tagname) as PageView
-        el.setAttribute('class', 'page')
-        el.setAttribute('data-page', this.page!)
-
-        this.main.appendChild(el)
-
-        this.activePage = el
-      }
-    }
-
-    if (this.activePage) {
-      this.activePage.setAttribute('active', '')
-      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(changes: PropertyValues<this>) {
-    if (changes.has('contextPathPrefix')) {
-      setContextPathPrefix(this.contextPathPrefix)
-    }
-
-    if (changes.has('modules')) {
-      ThingsApp.registerPages()
-    }
-
-    if (changes.has('page') || changes.has('resourceId') || changes.has('params')) {
-      this.routeToPage()
-    }
-
-    if (changes.has('contextPath')) {
-      this.setBase()
-    }
-  }
-
-  shouldUpdate() {
-    return ThingsApp.moduleInitialized == 2
-  }
-
-  stateChanged(state: any) {
-    this.page = state.route.page
-    this.params = state.route.params
-    this.resourceId = state.route.resourceId
-    this.context = state.route.context
-
-    ThingsApp.modules = this.modules = state.app.modules
-    ThingsApp.contextPath = this.contextPath = state.app.contextPath
-    ThingsApp.callbacks = state.route.callbacks
-  }
-
-  static async registerPages() {
-    ThingsApp.pages = new Promise<{ [path: string]: string }>(resolve => (ThingsApp.pagesResolver = resolve))
-
-    var reversedModules = [...ThingsApp.modules].reverse()
-    const pages: { [path: string]: string } = {}
-
-    /* 모듈 참조 순서 역순으로 page를 추가한다. (for overidable) */
-    for (const m of reversedModules) {
-      if (!m.routes) {
-        continue
-      }
-
-      /* 
-        각 모듈의 routes가 모두 완성될 때까지 ThingsApp.pages 구성을 지연한다.
-        각 모듈의 routes를 동적으로도 구성할 수 있도록 하기 위해서이다.
-      */
-      const routes = await m.routes
-
-      routes.forEach((route: any) => {
-        if (!pages[route.page]) {
-          pages[route.page] = route.tagname
-        }
-      })
-    }
-
-    ThingsApp.pagesResolver(pages)
-  }
-
-  setBase() {
-    const base = document.querySelector('base')
-    base?.setAttribute('href', this.contextPath ? `${this.contextPath}/` : '/')
-  }
-}

package/src/app/pages/page-404.ts

@@ -1,62 +0,0 @@
-import { css, html } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-import { PageView } from './page-view'
-
-@customElement('page-404')
-export class Page404 extends PageView {
-  static styles = css`
-    :host {
-      display: block;
-      box-sizing: border-box;
-      background-color: var(--md-sys-color-background);
-      --spacing-large: 15%;
-    }
-
-    section {
-      padding: var(--spacing-large) 0 0 0;
-      text-align: center;
-      color: var(--md-sys-color-on-background);
-    }
-
-    md-icon {
-      --md-icon-size: 120px;
-      color: var(--md-sys-color-error);
-      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
-    }
-
-    h2 {
-      margin: 0 auto;
-      font-size: 2.5em;
-      text-transform: capitalize;
-      color: var(--md-sys-color-primary);
-    }
-
-    @media only screen and (max-width: 460px) {
-      md-icon {
-        padding-top: 25%;
-        --md-icon-size: 90px;
-      }
-
-      h2 {
-        font-size: 2em;
-      }
-    }
-  `
-
-  get context() {
-    return {
-      title: 'Page Not Found'
-    }
-  }
-
-  render() {
-    return html`
-      <section>
-        <md-icon>error_outline</md-icon>
-        <h2>page not found!</h2>
-        The page you requested cannot be found.
-      </section>
-    `
-  }
-}

package/src/app/pages/page-view.ts

@@ -1,215 +0,0 @@
-import { LitElement, PropertyValues } from 'lit'
-import { property } from 'lit/decorators.js'
-import isEqual from 'lodash-es/isEqual'
-
-import { UPDATE_CONTEXT } from '../../actions/const'
-import { store } from '../../store'
-
-export type PageLifecycle = {
-  active: boolean
-  params: object
-  resourceId?: string
-  page?: string
-}
-
-function diff(after: any, before: any): any {
-  var changed = false
-  var changes: { [key: string]: any } = {}
-
-  Object.getOwnPropertyNames(after).forEach(function (key) {
-    let before_val = before[key]
-    let after_val = after[key]
-
-    if (!isEqual(before_val, after_val)) {
-      changes[key] = after_val
-      changed = true
-    }
-  })
-
-  return changed && changes
-}
-
-/**
- * PageView is a base class for creating page elements with lifecycle management.
- * Subclasses can extend PageView to define custom behavior and handle page lifecycle events.
- */
-export class PageView extends LitElement {
-  /**
-   * Determines whether the page can be deactivated. Subclasses can override this method
-   * to implement custom deactivation logic.
-   * @returns A Promise that resolves to true if the page can be deactivated, or false otherwise.
-   */
-  async canDeactivate(): Promise<boolean> {
-    return true
-  }
-
-  /**
-   * Determines whether the page should update. This method is called whenever there are
-   * changes to the page's properties.
-   * @param changes - A map of changed property values.
-   * @returns True if the page should update, or false otherwise.
-   */
-  shouldUpdate(changes: PropertyValues<this>) {
-    var active = String(this.active) == 'true'
-    var { active: oldActive = false } = this._oldLifecycleInfo$ || {}
-
-    /*
-     * page lifecycle
-     * case 1. page가 새로 activate 되었다.
-     * case 2. page가 active 상태에서 lifecycle 정보가 바뀌었다.
-     **/
-    if (active) {
-      this.pageUpdate({
-        active
-      })
-    } else if (oldActive) {
-      this.pageUpdate({
-        active
-      })
-    }
-
-    return active
-  }
-
-  /**
-   * Indicates whether the page is currently active.
-   */
-  @property({ type: Boolean }) active: boolean = false
-
-  /**
-   * Stores information about the page's lifecycle.
-   */
-  @property({ type: Object }) lifecycle!: PageLifecycle
-
-  /**
-   * The context path for the page.
-   */
-  @property({ type: String, attribute: 'context-path' }) contextPath?: string
-
-  _oldLifecycleInfo$: any
-
-  /* lifecycle */
-
-  /**
-   * Handles page updates and lifecycle events. Subclasses can override this method
-   * to implement custom logic for initializing, updating, and disposing of the page.
-   * @param changes - A map of changed properties.
-   * @param force - If true, forces an update of the page.
-   */
-  async pageUpdate(changes: any = {}, force: boolean = false) {
-    var before = this._oldLifecycleInfo$ || {}
-
-    var after = {
-      ...before,
-      ...this.lifecycle,
-      contextPath: this.contextPath,
-      ...changes
-    }
-
-    if (!('initialized' in changes) && after.active && !before.initialized) {
-      after.initialized = true
-    }
-
-    if (force) {
-      after.updated = Date.now()
-    }
-
-    var changed = diff(after, before)
-    if (!changed) {
-      return
-    }
-
-    this._oldLifecycleInfo$ = after
-
-    /* page의 이미 초기화된 상태에서 contextPath가 바뀐다면, 무조건 page가 리셋되어야 한다. */
-    if (before.initialized && changed.contextPath) {
-      await this.pageReset()
-      return
-    }
-
-    if (changed.initialized) {
-      await this.pageInitialized(after)
-    }
-
-    if ('initialized' in changed) {
-      if (changed.initialized) {
-        /*
-         * 방금 초기화된 경우라면, 엘리먼트들이 만들어지지 않았을 가능성이 있으므로,
-         * 다음 animationFrame에서 pageUpdated 콜백을 호출한다.
-         */
-        requestAnimationFrame(async () => {
-          await this.pageUpdated(changed, after, before)
-          /* active page인 경우에는, page Context 갱신도 필요할 것이다. */
-          after.active && this.updateContext()
-        })
-      } else {
-        await this.pageDisposed(after)
-      }
-    } else {
-      await this.pageUpdated(changed, after, before)
-      /* active page인 경우에는, page Context 갱신도 필요할 것이다. */
-      after.active && this.updateContext()
-    }
-  }
-
-  /**
-   * Resets the page. Subclasses can override this method to perform custom reset logic.
-   */
-  async pageReset() {
-    var { initialized } = this._oldLifecycleInfo$ || {}
-
-    if (initialized) {
-      await this.pageDispose()
-      await this.pageUpdate({}, true)
-    }
-  }
-
-  /**
-   * Disposes of the page. Subclasses can override this method to perform custom disposal logic.
-   */
-  async pageDispose() {
-    await this.pageUpdate({
-      initialized: false
-    })
-  }
-
-  /**
-   * Initializes the page. Subclasses can override this method to perform custom initialization logic.
-   * @param pageInfo - Information about the page's state.
-   */
-  pageInitialized(pageInfo: any) {}
-
-  /**
-   * Handles page updates and changes in properties.
-   * Subclasses can override this method to implement custom update logic.
-   * @param changes - A map of changed properties.
-   * @param after - The current state of the page.
-   * @param before - The previous state of the page.
-   */
-  pageUpdated(changes: any, after: any, before: any) {}
-
-  /**
-   * Handles the disposal of the page. Subclasses can override this method
-   * to implement custom disposal logic.
-   * @param pageInfo - Information about the page's state.
-   */
-  pageDisposed(pageInfo: any) {}
-
-  /* context */
-  updateContext(override?: any) {
-    store.dispatch({
-      type: UPDATE_CONTEXT,
-      context: override ? { ...this.context, ...override } : this.context
-    })
-  }
-
-  /**
-   * Updates the context of the page. Subclasses can override the `context` getter
-   * to provide specific context information for the page. The context will be updated
-   * using the `updateContext` method inherited from PageView.
-   * @param override - An optional object with context properties to override.
-   */
-  get context() {
-    return {}
-  }
-}

package/src/custom-alert.ts

@@ -1,43 +0,0 @@
-import { OxPrompt } from '@operato/popup'
-
-const TYPES_ICON: { [type: string]: string } = {
-  success: 'verified',
-  error: 'error',
-  warning: 'warning',
-  info: 'info',
-  question: 'question_mark'
-}
-
-export async function CustomAlert({
-  type,
-  icon,
-  title,
-  text,
-  confirmButton,
-  cancelButton,
-  callback
-}: {
-  type?: 'info' | 'success' | 'error' | 'warning' | 'question'
-  icon?: string
-  title?: string
-  text?: string
-  confirmButton?: { color?: string; text: string } | string
-  cancelButton?: { color?: string; text: string } | string
-  callback?: (val: { isConfirmed: boolean; isDismissed: boolean; value: boolean }) => any
-}) {
-  const result = await OxPrompt.open({
-    type: type || 'info',
-    icon: (icon && TYPES_ICON[icon]) || icon,
-    title,
-    text,
-    confirmButton: typeof confirmButton == 'string' ? { text: confirmButton } : confirmButton,
-    cancelButton: typeof cancelButton == 'string' ? { text: cancelButton } : cancelButton
-  })
-
-  const val = { isConfirmed: result, isDismissed: !result, value: result }
-  if (callback && typeof callback === 'function') {
-    callback(val)
-  } else {
-    return val
-  }
-}

package/src/entries/public/home.ts

@@ -1,94 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement } from 'lit/decorators.js'
-
-@customElement('home-page')
-export class HomePage extends LitElement {
-  static styles = css`
-    :host {
-      background-color: var(--md-sys-color-background);
-
-      display: block;
-      position: relative;
-    }
-
-    [home] {
-      position: absolute;
-      left: 20px;
-      top: 20px;
-      font-size: 2em;
-      color: white;
-    }
-
-    [message] {
-      background-color: rgba(50, 66, 97, 0.8);
-      padding: 60px 50px 0 50px;
-      color: #fff;
-      text-align: center;
-      font-size: 20px;
-
-      strong {
-        display: block;
-        font-size: 2.5rem;
-      }
-
-      img {
-        width: 450px;
-        max-width: 90%;
-        display: block;
-        margin: auto;
-        margin-top: 20px;
-      }
-    }
-
-    @media screen and (max-width: 460px) {
-      [message] {
-        padding: 60px 30px 0 30px;
-        color: #fff;
-        text-align: center;
-        font-size: 15px;
-      }
-
-      [message] strong {
-        font-size: 1.6rem;
-      }
-    }
-  `
-
-  _applicationMeta?: {
-    icon: string
-    title: string
-    description: string
-  }
-
-  render() {
-    var { title, description } = this.applicationMeta
-
-    return html`
-      <md-icon home @click=${() => (window.location.href = '/')}>home</md-icon>
-
-      <div message>
-        <strong>${title}</strong>
-        ${description}
-        <img src="/assets/images/home.png" />
-      </div>
-    `
-  }
-
-  get applicationMeta() {
-    if (!this._applicationMeta) {
-      var iconLink = document.querySelector('link[rel="application-icon"]') as HTMLLinkElement
-      var titleMeta = document.querySelector('meta[name="application-name"]') as HTMLMetaElement
-      var descriptionMeta = document.querySelector('meta[name="application-description"]') as HTMLMetaElement
-
-      this._applicationMeta = {
-        icon: iconLink?.href,
-        title: titleMeta ? titleMeta.content : 'Things Factory',
-        description: descriptionMeta ? descriptionMeta.content : 'Reimagining Software'
-      }
-    }
-
-    return this._applicationMeta
-  }
-}

package/src/index.ts

@@ -1,6 +0,0 @@
-export * from './types'
-export * from './store'
-export * from './actions'
-export * from './app/pages/page-view'
-export * from './object-store'
-export * from './custom-alert'