@operato/shell 8.0.0-alpha.51 → 8.0.0-beta.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/shell",
   "description": "WebApplication architecturing shell following open-wc recommendations",
   "author": "heartyoh",
-  "version": "8.0.0-alpha.51",
+  "version": "8.0.0-beta.1",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -59,10 +59,10 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/graphql": "^8.0.0-alpha.37",
-    "@operato/popup": "^8.0.0-alpha.51",
-    "@operato/styles": "^8.0.0-alpha.50",
-    "@operato/utils": "^8.0.0-alpha.37",
+    "@operato/graphql": "^8.0.0-beta.1",
+    "@operato/popup": "^8.0.0-beta.1",
+    "@operato/styles": "^8.0.0-beta.1",
+    "@operato/utils": "^8.0.0-beta.1",
     "@webcomponents/scoped-custom-element-registry": "^0.0.9",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21",
@@ -102,5 +102,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "ac94e729e3647d45c921be99f96f4c2e65cef797"
+  "gitHead": "d5b28a2e9deb632c0dc80132f6a7196dd6fe4220"
 }

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
-};

package/.storybook/preview.js

@@ -1,52 +0,0 @@
-import { i18next } from '@operato/i18n'
-
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'ko', right: '🇰🇷', title: '한국어' },
-        { value: 'zh', right: '🇨🇳', title: '中文' },
-        { value: 'ja', right: '🇯🇵', title: '日本語' },
-        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
-      ],
-      showName: true
-    }
-  },
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        { value: 'light', title: 'Light' },
-        { value: 'dark', title: 'Dark' }
-      ],
-      showName: true
-    }
-  }
-}
-
-export const decorators = [
-  (Story, context) => {
-    const { locale, theme } = context.globals
-
-    if (locale) {
-      i18next.changeLanguage(locale)
-    }
-
-    // Set the theme class for the document
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.add('light')
-      document.documentElement.classList.remove('dark')
-    }
-
-    return Story()
-  }
-]

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});

package/src/actions/app.ts

@@ -1,23 +0,0 @@
-export const UPDATE_MODULES = 'UPDATE_MODULES'
-export const UPDATE_BASE_URL = 'UPDATE_BASE_URL'
-export const UPDATE_CONTEXT_PATH = 'UPDATE_CONTEXT_PATH'
-export const SET_DOMAINS = 'SET-DOMAINS'
-
-export const updateDomains =
-  (
-    domains: {
-      name: string
-      subdomain: string
-    }[],
-    domain: {
-      name: string
-      subdomain: string
-    }
-  ) =>
-  (dispatch: any) => {
-    dispatch({
-      type: SET_DOMAINS,
-      domains,
-      domain
-    })
-  }

package/src/actions/busy.ts

@@ -1,15 +0,0 @@
-import { setActiveRequestCounterCallback  } from '@operato/graphql'
-import { store } from '../store'
-
-export const UPDATE_BUSY = 'UPDATE_BUSY'
-
-setActiveRequestCounterCallback((count: number) => {
-  store.dispatch(updateBusy(count != 0) as any)
-})
-
-export const updateBusy = (busy: boolean) => (dispatch: any) => {
-  dispatch({
-    type: UPDATE_BUSY,
-    busy
-  })
-}

package/src/actions/const.ts

@@ -1,8 +0,0 @@
-export const UPDATE_PAGE = 'UPDATE_PAGE'
-export const UPDATE_CONTEXT = 'UPDATE_CONTEXT'
-export const UPDATE_ACTIVE_PAGE = 'UPDATE_ACTIVE_PAGE'
-
-export const REGISTER_NAVIGATION_CALLBACK = 'REGISTER_NAVIGATION_CALLBACK'
-export const UNREGISTER_NAVIGATION_CALLBACK = 'UNREGISTER_NAVIGATION_CALLBACK'
-
-export const HOMEPAGE = ''

package/src/actions/index.ts

@@ -1,4 +0,0 @@
-export * from './app'
-export * from './route'
-export * from './busy'
-export * from './const'

package/src/actions/route.ts

@@ -1,126 +0,0 @@
-import { getPathInfo } from '@operato/utils'
-
-import { HOMEPAGE, UPDATE_PAGE } from '../actions/const'
-import { store } from '../store'
-
-/**
- * Navigate to a page using one of two methods:
- * 1. Using a page link: <a href='page'>goto page</a> (equivalent to route(page))
- * 2. Using the navigate('page') function.
- *
- * 페이지를 이동하는 방법으로는 다음 두가지가 있다.
- * 1. page link를 사용하는 방법 <a href='page'>goto page</a>
- *    이 방법은 route(page)와 동일하다.
- * 2. navigate('page')를 사용하는 방법
- *
- * @param location - The path of the page to navigate to.
- * @param replace - Optional. If true, replaces the current page in the browser's history.
- */
-export const navigate = (location: string, replace?: boolean) => {
-  if (replace) history.replaceState(history.state, '', location)
-  else history.pushState({}, '', location)
-
-  window.dispatchEvent(new Event('popstate'))
-}
-
-/**
- * Navigate to a page with optional query parameters, and dispatch a Redux action to load the page.
- *
- * @param pathInfo - Object containing pathname, search, and optional params.
- * @param dispatch - Redux dispatch function.
- */
-export const navigateWithSilence =
-  ({ pathname: path, search, params }: { pathname: string; search?: string; params?: { [key: string]: any } }) =>
-  (dispatch: any) => {
-    const { path: pathname } = getPathInfo(path)
-
-    const reg = /\/([^\/]+)\/*([^\/]*)/
-    const decodePath = decodeURIComponent(pathname!)
-    const matchReturn = decodePath.match(reg) || []
-    const page = matchReturn[1] || HOMEPAGE
-    const id = matchReturn[2]
-
-    if (!params) {
-      params = {}
-
-      new URLSearchParams(search).forEach((value, key) => {
-        params![key] = value
-      })
-    }
-
-    // Any other info you might want to extract from the path (like page type),
-    // you can do here
-    dispatch(loadPage(page, id, params))
-  }
-
-/**
- * Preload a page by performing any necessary preprocessing before loading.
- *
- * @param page - The page to preload.
- * @returns - The new page path or routing result after preprocessing.
- */
-const _preLoadPage = async (page: any) => {
-  /*
-   * _preLoadPage 에서는 page를 load하기 전처리를 수행한다.
-   * 예를 들면, page dynamic import 또는 page re-routing
-   */
-  var state: any = store.getState()
-
-  /* override 기능을 위해서 dependency 관계의 역순으로 route를 실행한다. */
-  var modules = state.app.modules
-  if (modules) {
-    for (let i = modules.length - 1; i >= 0; i--) {
-      let module = modules[i]
-      let _page = module.route && (await module.route(page, module))
-      if (_page) {
-        return _page
-      }
-    }
-  }
-}
-
-/**
- * Load a page by dispatching a Redux action, and handle page navigation if necessary.
- *
- * @param page - The page to load.
- * @param id - The associated resource ID.
- * @param params - Additional parameters to pass to the page.
- */
-export const loadPage = (page: string, id: string, params: { [key: string]: any }) => async (dispatch: any) => {
-  var newPage = await _preLoadPage(page)
-
-  if (page !== newPage && newPage.indexOf('/') == 0) {
-    dispatch(
-      navigateWithSilence({
-        pathname: id ? `${newPage}/${id}` : newPage,
-        params
-      })
-    )
-    return
-  }
-
-  dispatch({
-    type: UPDATE_PAGE,
-    page: newPage,
-    resourceId: id,
-    params
-  })
-}
-
-/**
- * Route to a given URL by creating a link element and triggering a click event.
- * This approach does not work properly in a mobile environment and therefore should not be used.
- *
- * @deprecated
- *
- * @param url - The URL to route to.
- */
-export const route = (url: string) => {
-  const link = document.createElement('a')
-
-  link.setAttribute('href', url)
-
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
-}

package/src/app/app-style.ts

@@ -1,114 +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;
-    height: 100dvh;
-  }
-
-  ox-header-bar {
-    grid-area: header;
-  }
-
-  ox-nav-bar {
-    grid-area: nav;
-  }
-
-  div {
-    grid-area: main;
-
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  main {
-    flex: 1;
-
-    display: flex;
-    flex-direction: row;
-    overflow: hidden;
-  }
-
-  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;
-  }
-
-  @media print {
-    :host {
-      width: 100%;
-      height: 100%;
-      min-height: 100vh;
-      min-height: 100dvh;
-
-      max-width: unset;
-      width: unset;
-      height: unset;
-      height: unset;
-    }
-
-    main {
-      /* important for printing!!! */
-      display: block;
-      flex: unset;
-      overflow: visible;
-    }
-
-    ox-page-header-bar {
-      display: none;
-    }
-
-    ox-page-footer-bar {
-      display: none;
-    }
-
-    ox-header-bar {
-      display: none;
-    }
-
-    ox-nav-bar {
-      display: none;
-    }
-
-    ox-aside-bar {
-      display: none;
-    }
-
-    ox-footer-bar {
-      display: none;
-    }
-
-    ox-snack-bar {
-      display: none;
-    }
-  }
-`

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}/` : '/')
-  }
-}