@operato/shell 0.3.7

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

@@ -0,0 +1,56 @@
+import { css, html } from 'lit'
+
+import { PageView } from './page-view'
+
+class Page404 extends PageView {
+  static styles = 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)

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

@@ -0,0 +1,142 @@
+import { LitElement, PropertyValues } from 'lit'
+import { property } from 'lit/decorators.js'
+import isEqual from 'lodash/isEqual'
+
+import { UPDATE_CONTEXT } from '../../actions/route'
+import { store } from '../../store'
+
+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
+}
+
+export class PageView extends LitElement {
+  // Only render this page if it's actually visible.
+  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
+  }
+
+  @property({ type: Boolean }) active: boolean = false
+  @property({ type: Object }) lifecycle: any
+  @property({ type: String, attribute: 'context-path' }) contextPath?: string
+
+  _oldLifecycleInfo$: any
+
+  /* lifecycle */
+  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()
+    }
+  }
+
+  async pageReset() {
+    var { initialized } = this._oldLifecycleInfo$ || {}
+
+    if (initialized) {
+      await this.pageDispose()
+      await this.pageUpdate({}, true)
+    }
+  }
+
+  async pageDispose() {
+    await this.pageUpdate({
+      initialized: false
+    })
+  }
+
+  pageInitialized(pageInfo: any) {}
+  pageUpdated(changes: any, after: any, before: any) {}
+  pageDisposed(pageInfo: any) {}
+
+  /* context */
+  updateContext(override?: any) {
+    store.dispatch({
+      type: UPDATE_CONTEXT,
+      context: override ? { ...this.context, ...override } : this.context
+    })
+  }
+
+  get context() {
+    return {}
+  }
+}

package/src/entries/public/home.ts

@@ -0,0 +1,95 @@
+import '@material/mwc-icon-button'
+import '@material/mwc-button'
+
+import { css, html, LitElement } from 'lit'
+import { customElement } from 'lit/decorators'
+
+@customElement('home-page')
+export class HomePage extends LitElement {
+  static styles = css`
+    :host {
+      background-color: var(--main-section-background-color);
+
+      display: block;
+      position: relative;
+
+      --mdc-theme-primary: white;
+    }
+
+    [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;
+    }
+    [message] strong {
+      display: block;
+      font-size: 2.5rem;
+    }
+    [message] img {
+      width: 450px;
+      max-width: 90%;
+      display: block;
+      margin: auto;
+      margin-top: 20px;
+    }
+
+    @media screen and (max-width: 480px) {
+      [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 { icon, title, description } = this.applicationMeta
+
+    return html`
+      <mwc-icon-button home icon="home" @click=${() => (window.location.href = '/')}></mwc-icon-button>
+
+      <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/reducers/app.ts

@@ -0,0 +1,48 @@
+import { getPathInfo } from '@operato/utils'
+
+import { SET_DOMAINS, UPDATE_BASE_URL, UPDATE_CONTEXT_PATH, UPDATE_MODULES } from '../actions/app.js'
+
+const INITIAL_STATE: {
+  baseUrl: string
+  contextPath: string
+  domains: {
+    name: string
+    subdomain: string
+  }[]
+} = {
+  baseUrl: location.origin,
+  contextPath: getPathInfo(location.pathname).contextPath,
+  domains: []
+}
+
+const app = (state = INITIAL_STATE, action: any) => {
+  switch (action.type) {
+    case UPDATE_MODULES:
+      return {
+        ...state,
+        modules: action.modules
+      }
+    case UPDATE_BASE_URL:
+      return {
+        ...state,
+        baseUrl: action.baseUrl
+      }
+    case UPDATE_CONTEXT_PATH:
+      return {
+        ...state,
+        contextPath: action.contextPath
+      }
+
+    case SET_DOMAINS:
+      return {
+        ...state,
+        domains: action.domains,
+        domain: action.domain
+      }
+
+    default:
+      return state
+  }
+}
+
+export default app

package/src/reducers/route.ts

@@ -0,0 +1,77 @@
+import startCase from 'lodash/startCase'
+import { updateMetadata } from 'pwa-helpers/metadata.js'
+
+import {
+  REGISTER_NAVIGATION_CALLBACK,
+  UNREGISTER_NAVIGATION_CALLBACK,
+  UPDATE_ACTIVE_PAGE,
+  UPDATE_CONTEXT,
+  UPDATE_PAGE
+} from '../actions/route.js'
+
+const APP_TITLE_EL = document.querySelector('meta[name="application-name"]') as HTMLMetaElement
+
+var appTitle: string | undefined
+if (APP_TITLE_EL) {
+  appTitle = APP_TITLE_EL.content
+}
+
+const INITIAL_STATE: {
+  page: string
+  resourceId: string
+  params: any
+  activePage: any
+  context: any
+  callbacks: any[]
+} = {
+  page: '',
+  resourceId: '',
+  params: {},
+  activePage: null,
+  context: {},
+  callbacks: []
+}
+
+const route = (state = INITIAL_STATE, action: any) => {
+  switch (action.type) {
+    case UPDATE_PAGE:
+      return {
+        ...state,
+        page: action.page,
+        resourceId: action.resourceId,
+        params: action.params
+      }
+    case UPDATE_CONTEXT:
+      let title = action.context?.title
+      let text = typeof title === 'object' ? title.text : title
+
+      updateMetadata({
+        title: appTitle + (text ? ` - ${startCase(text)}` : '')
+      })
+      return {
+        ...state,
+        context: action.context || (state.activePage && state.activePage.context) || {}
+      }
+    case UPDATE_ACTIVE_PAGE:
+      return {
+        ...state,
+        activePage: action.activePage
+      }
+
+    case REGISTER_NAVIGATION_CALLBACK:
+      return {
+        ...state,
+        callbacks: [...state.callbacks, action.callback]
+      }
+    case UNREGISTER_NAVIGATION_CALLBACK:
+      return {
+        ...state,
+        callbacks: state.callbacks.filter(callback => callback !== action.callback)
+      }
+
+    default:
+      return state
+  }
+}
+
+export default route

package/src/store.ts

@@ -0,0 +1,26 @@
+import { lazyReducerEnhancer } from 'pwa-helpers/lazy-reducer-enhancer.js'
+import { applyMiddleware, combineReducers, compose, createStore } from 'redux'
+import thunk from 'redux-thunk'
+
+import app from './reducers/app.js'
+import route from './reducers/route.js'
+
+declare global {
+  var __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: any
+}
+
+// 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))
+)
+
+// Initially loaded reducers.
+// @ts-ignore
+store.addReducers({
+  app,
+  route
+})

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true,
+    "types": ["node", "mocha"]
+  },
+  "include": ["**/*.ts"]
+}

package/web-dev-server.config.mjs

@@ -0,0 +1,27 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  open: '/demo/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.mjs

@@ -0,0 +1,41 @@
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});