@things-factory/shell 4.0.0-alpha.6 → 4.0.0-beta.0

package/helps/about/things-factory.ko.md

@@ -7,6 +7,10 @@ Things-Factory 프레임워크는 수많은 NPM 패키지들로 구성된 모노
 이 패키지들은 자바스크립트 앱을 개발하기위한 최적의 계층적 구조를 구성하도록 개발되었습니다.
 Typescript를 포함하여, 서버사이들의 Koa, 웹컴포넌트 UI를 위한 LitElement, 클라이언트 서버간의 Graphql 통신을 위한 Apollo 그리고 테스트를 위한 Jest 등이 적용되었습니다. 이들을 잘 연결하고 조립하여 최고의 어플리케이션을 만들어보세요.
 
+- [Contents for modules](./modules.md)
+- [Contents for components](./components.md)
+- [Concepts for framework](./framework.md)
+
 ## features
 
 - It is based on module structure.

package/helps/components/oops-progress.md

@@ -0,0 +1,73 @@
+# OOPS Progress 컴포넌트
+
+긴 시간 진행되는 작업의 진행 상황을 표현해주기 위해 서버에 진행율을 Subscribe하는 클라이언트 컴포넌트이다.
+이 컴포넌트는 자체적으로 시각적 요소를 포함하지 않지만, 시각적 표현을 위해서 자식 노드(Light DOM)를 포함할 수는 있다.
+
+## properties
+
+- tag: String 서브스크립션 태그이며, 서버의 'publishProgress'의 tag와 일치시키도록 한다.
+- subscription: String (readonly) 이 속성이 값을 가지고 있으면, 서브스크립션 중임을 의미한다.
+
+## methods
+
+- startSubscribe() 진행율 구독을 시작한다.
+- stopSubscribe() 진행율 구독을 종료한다.(서버쪽 작업의 종료를 의미하지 않으며, 클라이언트에서 구독을 종료한다는 의미임.)
+
+## event
+
+- progress(event) 서버로부터 진행율이 Subscribe 되었을 때 발생한다.
+  - event.detail : progress 값을 갖는다.
+- finish(event) 진행율이 100% 도달하면 발생한다.
+
+## 예시
+
+### 클라이언트 사이드
+
+```
+  <oops-progress
+    .tag='progress-pending-job'
+    @progress=${e => {
+      this.progress = e.detail
+    }}
+    @finish=${() => {
+      console.log('complete')
+    }}
+    ?hidden=${progress < 0 || progress > 100}
+  >
+    <div>
+      <mwc-linear-progress .progress=${progress / 100}></mwc-linear-progress>
+      <span>Progress : ${progress} % (${message})</span>
+    </div>
+  </oops-progress>
+
+```
+
+### 서버사이드
+
+```
+import { sleep } from '@things-factory/utils'
+
+...
+
+@Mutation(returns => String, { description: 'To reference of pending job progress' })
+async referencePendingJob(
+  @Root() _,
+  @Ctx() context: any
+) : Promise<string> {
+
+  const { domain } = context.state
+
+  for(var i = 0;i <= 100;i++) {
+    await sleep(100)
+
+    publishProgress({
+      domain,
+      tag: 'progress-pending-job',
+      progress: i,
+      message: `${i * 10} / 1000`
+    })
+  }
+
+  return 'success'
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/shell",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-beta.0",
   "description": "Core module for framework",
   "bin": {
     "things-factory": "bin/things-factory",
@@ -31,9 +31,11 @@
     "test": "NODE_ENV=test jest"
   },
   "dependencies": {
+    "@apollo/client": "^3.4.16",
     "@graphql-tools/merge": "^7.0.0",
-    "@graphql-tools/utils": "^8.0.2",
-    "@hatiolab/things-scene": "^2.7.6",
+    "@graphql-tools/schema": "^8.2.0",
+    "@graphql-tools/utils": "^8.3.0",
+    "@hatiolab/things-scene": "^2.7.11",
     "@koa/cors": "^3.1.0",
     "@material/mwc-button": "^0.22.1",
     "@material/mwc-fab": "^0.22.1",
@@ -41,18 +43,15 @@
     "@material/mwc-icon-button": "^0.22.1",
     "@material/mwc-slider": "^0.22.1",
     "@material/mwc-textfield": "^0.22.1",
-    "@things-factory/env": "^4.0.0-alpha.6",
-    "@things-factory/styles": "^4.0.0-alpha.6",
-    "@things-factory/utils": "^4.0.0-alpha.6",
-    "@webcomponents/webcomponentsjs": "^2.2.7",
-    "apollo-cache-inmemory": "^1.6.6",
-    "apollo-cache-persist": "^0.1.1",
-    "apollo-client": "^2.6.10",
-    "apollo-link": "^1.2.14",
-    "apollo-link-error": "^1.1.13",
-    "apollo-link-http": "^1.5.17",
-    "apollo-server-koa": "^2.25.2",
-    "apollo-upload-client": "^12.1.0",
+    "@things-factory/ejs-remote": "^4.0.0-beta.0",
+    "@things-factory/env": "^4.0.0-beta.0",
+    "@things-factory/styles": "^4.0.0-beta.0",
+    "@things-factory/utils": "^4.0.0-beta.0",
+    "@webcomponents/webcomponentsjs": "^2.6.0",
+    "apollo-server-core": "^3.4.0",
+    "apollo-server-koa": "^3.4.0",
+    "apollo-server-types": "^3.4.0",
+    "apollo-upload-client": "^16.0.0",
     "args": "^5.0.0",
     "broadcastchannel-polyfill": "^1.0.1",
     "chalk": "^4.1.0",
@@ -63,31 +62,29 @@
     "firebase": "^8.0.1",
     "fs-extra": "^9.0.1",
     "glob": "^7.1.6",
-    "graphql": "^15.5.1",
+    "graphql": "^15.6.1",
     "graphql-mqtt-subscriptions": "^1.2.0",
     "graphql-redis-subscriptions": "^2.4.0",
-    "graphql-subscriptions": "^1.2.1",
-    "graphql-tag": "^2.12.5",
+    "graphql-subscriptions": "^2.0.0",
+    "graphql-tag": "^2.12.6",
     "graphql-upload": "^12.0.0",
     "haunted": "^4.8.2",
-    "headroom.js": "^0.12.0",
     "html-webpack-plugin": "^4.3.0",
     "husky": "7.0.1",
     "imports-loader": "^3.0.0",
-    "inquirer": "^8.1.2",
-    "ioredis": "^4.27.6",
+    "inquirer": "^8.2.0",
+    "ioredis": "^4.28.0",
     "json5": "^2.2.0",
-    "koa": "^2.13.1",
+    "koa": "^2.13.4",
     "koa-bodyparser": "^4.2.0",
-    "koa-ejs-remote": "^1.1.6",
     "koa-ip": "^2.1.0",
     "koa-router": "^7.4.0",
     "koa-send": "^5.0.0",
     "koa-static": "^5.0.0",
     "koa-unless": "^1.0.7",
-    "koa-webpack": "^5.1.0",
+    "koa-webpack": "^6.0.0",
     "koa2-connect-history-api-fallback": "^0.1.2",
-    "lit-element": "^2.5.1",
+    "lit-element": "^3.0.1",
     "loader-utils": "^2.0.0",
     "lodash": "^4.17.15",
     "mkdirp": "^1.0.3",
@@ -102,14 +99,13 @@
     "redux": "^4.0.0",
     "redux-thunk": "^2.3.0",
     "regenerator-runtime": "^0.13.2",
-    "require-json5": "^1.1.0",
     "reselect": "^4.0.0",
     "scrollbooster": "^3.0.2",
-    "subscriptions-transport-ws": "^0.9.19",
+    "subscriptions-transport-ws": "^0.11.0",
     "sweetalert2": "^10.9.0",
     "swipe-listener": "^1.3.0",
     "type-graphql": "^1.1.1",
-    "typeorm": "^0.2.34",
+    "typeorm": "^0.2.38",
     "web-animations-js": "^2.3.2",
     "web-push": "^3.4.5",
     "webfontloader": "^1.6.28"
@@ -124,5 +120,5 @@
   "resolutions": {
     "core-js": "^3.16.0"
   },
-  "gitHead": "79a276f40a3229fbf08f439d772f2c183871adfa"
+  "gitHead": "371b38f377c7e647bbe38bf79571d861b1bbe6f8"
 }

package/server/pubsub.ts

@@ -1,22 +1,14 @@
-import { config } from '@things-factory/env'
-const { middleware, host, port, options } = config.get('pubsub', {})
-
-import { PubSub } from 'graphql-subscriptions'
+import { MQTTPubSub } from 'graphql-mqtt-subscriptions'
 import { RedisPubSub } from 'graphql-redis-subscriptions'
+import { PubSub } from 'graphql-subscriptions'
 import Redis from 'ioredis'
-
 import { connect } from 'mqtt'
-import { MQTTPubSub } from 'graphql-mqtt-subscriptions'
 
-const debug = require('debug')('things-factory:shell')
+import { config } from '@things-factory/env'
 
-// override publish because payload of redis publish is required string only.
-class MyRedisPubSub extends RedisPubSub {
-  publish(trigger: string, payload: any): Promise<void> {
-    debug('payload', payload)
-    return super.publish(trigger, JSON.stringify(payload))
-  }
-}
+const { middleware, host, port, nodes, options } = config.get('pubsub', {})
+
+const debug = require('debug')('things-factory:shell')
 
 let pubsub: any
 
@@ -39,12 +31,21 @@ switch (middleware) {
       },
       ...options
     }
-    pubsub = new MyRedisPubSub({
+    pubsub = new RedisPubSub({
       publisher: new Redis(redisOption),
       subscriber: new Redis(redisOption)
     })
+    break
+  case 'redisCluster':
+    const cluster = new Redis.Cluster(nodes, options)
+    pubsub = new RedisPubSub({
+      publisher: cluster,
+      subscriber: cluster
+    })
+    break
   default:
     pubsub = new PubSub()
+    break
 }
 
 export { pubsub }

package/server/schema.ts

@@ -1,10 +1,10 @@
-import { buildSchema } from 'type-graphql'
-import { mergeSchemas } from '@graphql-tools/merge'
-import { deepMerge } from '@things-factory/utils'
+import { loader, orderedModuleNames } from '@things-factory/env'
+
 import { GraphQLSchema } from 'graphql'
 import { GraphQLUpload } from 'graphql-upload'
-
-import { orderedModuleNames, loader } from '@things-factory/env'
+import { buildSchema } from 'type-graphql'
+import { deepMerge } from '@things-factory/utils'
+import { mergeSchemas } from '@graphql-tools/schema'
 
 export async function schema() {
   const schemas = orderedModuleNames

package/server/server-dev.ts

@@ -1,27 +1,26 @@
 process.env.NODE_ENV = 'development'
 process.setMaxListeners(0)
 
-import Koa from 'koa'
-import ip from 'koa-ip'
-import cors from '@koa/cors'
-import koaStatic from 'koa-static'
-import koaBodyParser from 'koa-bodyparser'
-import { historyApiFallback } from 'koa2-connect-history-api-fallback'
-
-import koaWebpack from 'koa-webpack'
+import { ConnectionContext, SubscriptionServer } from 'subscriptions-transport-ws'
+import { config, loader, logger, orderedModuleNames } from '@things-factory/env'
+import { domainPrivateRouter, domainPublicRouter, globalPrivateRouter, globalPublicRouter } from './routers'
+import { execute, subscribe } from 'graphql'
 
 import { ApolloServer } from 'apollo-server-koa'
-import { graphqlUploadKoa } from 'graphql-upload'
-
+import { ApolloServerPluginLandingPageGraphQLPlayground } from 'apollo-server-core'
+import { GraphqlLocalClient } from './graphql-local-client'
+import Koa from 'koa'
 import co from 'co'
 import compose from 'koa-compose'
-
-import { config, logger, orderedModuleNames, loader } from '@things-factory/env'
-
+import cors from '@koa/cors'
+import { createServer } from 'http'
 import { databaseInitializer } from './initializers/database'
-import { globalPublicRouter, globalPrivateRouter, domainPublicRouter, domainPrivateRouter } from './routers'
-import { GraphqlLocalClient } from './graphql-local-client'
-
+import { graphqlUploadKoa } from 'graphql-upload'
+import { historyApiFallback } from 'koa2-connect-history-api-fallback'
+import ip from 'koa-ip'
+import koaBodyParser from 'koa-bodyparser'
+import koaStatic from 'koa-static'
+import koaWebpack from 'koa-webpack'
 import { schema } from './schema'
 
 const debug = require('debug')('things-factory:shell:server-dev')
@@ -32,7 +31,7 @@ args.option('port', 'The port on which the app will be running', config.get('por
 args.option(
   'inspect',
   `The address on which the inspection will be running. Used in development mode only.
-  This option is just to preventprevent termination for reasons of not recognizing the 'inspect' option.`,
+  This option is just to prevent termination for reasons of not recognizing the 'inspect' option.`,
   config.get('inspect', ':9229')
 )
 
@@ -91,13 +90,15 @@ const bootstrap = async () => {
 
   const builtSchema = await schema()
 
-  const server = new ApolloServer({
-    schema: builtSchema,
-    uploads: false,
-    subscriptions: {
-      path: '/subscriptions',
-      onConnect: async (connectionParams, webSocket, context) => {
-        /* To maintain the same method as the http(s) request */
+  const httpServer = createServer(app.callback())
+
+  const subscriptionServer = SubscriptionServer.create(
+    {
+      schema: builtSchema,
+      // These are imported from `graphql`.
+      execute,
+      subscribe,
+      async onConnect(connectionParams: Object, webSocket: WebSocket, context: ConnectionContext) {
         var { request } = context
 
         var url = new URL((connectionParams['headers'] || connectionParams).referer)
@@ -121,6 +122,14 @@ const bootstrap = async () => {
         return koacontext
       }
     },
+    {
+      server: httpServer,
+      path: '/subscriptions'
+    }
+  )
+
+  const server = new ApolloServer({
+    schema: builtSchema,
     formatError: error => {
       logger.error(error)
       return error
@@ -129,20 +138,33 @@ const bootstrap = async () => {
       // logger.info('response %s', JSON.stringify(response, null, 2))
       return response
     },
-    playground: {
-      settings: {
-        'request.credentials': 'include'
-      }
-    },
     context: async ({ connection, ctx }) => {
       if (connection) {
         return connection.context
       } else {
         return ctx
       }
-    }
+    },
+    plugins: [
+      ApolloServerPluginLandingPageGraphQLPlayground({
+        settings: {
+          'request.credentials': 'same-origin'
+        }
+      }),
+      {
+        async serverWillStart() {
+          return {
+            async drainServer() {
+              subscriptionServer.close()
+            }
+          }
+        }
+      }
+    ]
   })
 
+  server.start()
+
   GraphqlLocalClient.init(builtSchema, app)
 
   orderedModuleNames.forEach(name => {
@@ -150,7 +172,7 @@ const bootstrap = async () => {
     initMiddlewares && initMiddlewares(app)
   })
 
-  const render = require('koa-ejs-remote')
+  const render = require('@things-factory/ejs-remote')
   render(app, {
     root: '/views',
     host: `http://127.0.0.1:${PORT}`,
@@ -210,15 +232,12 @@ const bootstrap = async () => {
     })
   )
 
-  /* httpServer */
-  const httpServer = app.listen({ port: PORT }, () => {
+  httpServer.listen({ port: PORT }, () => {
     logger.info(`🚀 Server ready at http://0.0.0.0:${PORT}${server.graphqlPath}`)
-    logger.info(`🚀 Subscriptions ready at ws://0.0.0.0:${PORT}${server.subscriptionsPath}`)
+    logger.info(`🚀 Subscriptions ready at ws://0.0.0.0:${PORT}${'/subscriptions'}`)
 
     process.emit('bootstrap-module-start' as any, { app, config, builtSchema, httpServer } as any)
   })
-
-  server.installSubscriptionHandlers(httpServer)
 }
 
 bootstrap()

package/server/server.ts

@@ -1,25 +1,24 @@
 process.env.NODE_ENV = 'production'
 process.setMaxListeners(0)
 
-import Koa from 'koa'
-import ip from 'koa-ip'
-import cors from '@koa/cors'
-import koaStatic from 'koa-static'
-import koaBodyParser from 'koa-bodyparser'
-import { historyApiFallback } from 'koa2-connect-history-api-fallback'
+import { ConnectionContext, SubscriptionServer } from 'subscriptions-transport-ws'
+import { config, loader, logger, orderedModuleNames } from '@things-factory/env'
+import { domainPrivateRouter, domainPublicRouter, globalPrivateRouter, globalPublicRouter } from './routers'
+import { execute, subscribe } from 'graphql'
 
 import { ApolloServer } from 'apollo-server-koa'
-import { graphqlUploadKoa } from 'graphql-upload'
-
+import { GraphqlLocalClient } from './graphql-local-client'
+import Koa from 'koa'
 import co from 'co'
 import compose from 'koa-compose'
-
-import { config, logger, orderedModuleNames, loader } from '@things-factory/env'
-
+import cors from '@koa/cors'
+import { createServer } from 'http'
 import { databaseInitializer } from './initializers/database'
-import { globalPublicRouter, globalPrivateRouter, domainPublicRouter, domainPrivateRouter } from './routers'
-import { GraphqlLocalClient } from './graphql-local-client'
-
+import { graphqlUploadKoa } from 'graphql-upload'
+import { historyApiFallback } from 'koa2-connect-history-api-fallback'
+import ip from 'koa-ip'
+import koaBodyParser from 'koa-bodyparser'
+import koaStatic from 'koa-static'
 import { schema } from './schema'
 
 const args = require('args')
@@ -77,12 +76,15 @@ const bootstrap = async () => {
 
   const builtSchema = await schema()
 
-  const server = new ApolloServer({
-    schema: builtSchema,
-    uploads: false,
-    subscriptions: {
-      path: '/subscriptions',
-      onConnect: async (connectionParams, webSocket, context) => {
+  const httpServer = createServer(app.callback())
+
+  const subscriptionServer = SubscriptionServer.create(
+    {
+      schema: builtSchema,
+      // These are imported from `graphql`.
+      execute,
+      subscribe,
+      async onConnect(connectionParams: Object, webSocket: WebSocket, context: ConnectionContext) {
         var { request } = context
 
         var url = new URL((connectionParams['headers'] || connectionParams).referer)
@@ -106,6 +108,14 @@ const bootstrap = async () => {
         return koacontext
       }
     },
+    {
+      server: httpServer,
+      path: '/subscriptions'
+    }
+  )
+
+  const server = new ApolloServer({
+    schema: builtSchema,
     formatError: error => {
       logger.error(error)
       return error
@@ -115,20 +125,28 @@ const bootstrap = async () => {
       return response
     },
     introspection: true,
-    playground: {
-      settings: {
-        'request.credentials': 'include'
-      }
-    },
     context: async ({ connection, ctx }) => {
       if (connection) {
         return connection.context
       } else {
         return ctx
       }
-    }
+    },
+    plugins: [
+      {
+        async serverWillStart() {
+          return {
+            async drainServer() {
+              subscriptionServer.close()
+            }
+          }
+        }
+      }
+    ]
   })
 
+  await server.start()
+
   GraphqlLocalClient.init(builtSchema, app)
 
   orderedModuleNames.forEach(name => {
@@ -136,7 +154,7 @@ const bootstrap = async () => {
     initMiddlewares && initMiddlewares(app)
   })
 
-  const render = require('koa-ejs-remote')
+  const render = require('@things-factory/ejs-remote')
   render(app, {
     root: '/views',
     host: `http://127.0.0.1:${PORT}`,
@@ -180,14 +198,12 @@ const bootstrap = async () => {
     })
   )
 
-  const httpServer = app.listen({ port: PORT }, () => {
+  httpServer.listen({ port: PORT }, () => {
     logger.info(`🚀 Server ready at http://0.0.0.0:${PORT}${server.graphqlPath}`)
-    logger.info(`🚀 Subscriptions ready at ws://0.0.0.0:${PORT}${server.subscriptionsPath}`)
+    logger.info(`🚀 Subscriptions ready at ws://0.0.0.0:${PORT}${'/subscriptions'}`)
 
     process.emit('bootstrap-module-start' as any, { app, config, builtSchema, httpServer } as any)
   })
-
-  server.installSubscriptionHandlers(httpServer)
 }
 
 bootstrap()

package/server/service/common-types/list-param.ts

@@ -28,7 +28,7 @@ export class Filter {
   operator: string
 
   @Field(type => ScalarAny)
-  value: object
+  value: any
 
   @Field({ nullable: true })
   relation?: boolean

package/server/service/common-types/scalar-any.ts

@@ -1,8 +1,35 @@
 import { GraphQLScalarType, Kind } from 'graphql'
 
+function parseObject(ast) {
+  const value = Object.create(null)
+  ast.fields.forEach(field => {
+    value[field.name.value] = parseAst(field.value)
+  })
+  return value
+}
+
+function parseAst(ast) {
+  switch (ast.kind) {
+    case Kind.INT:
+      return parseInt(ast.value)
+    case Kind.FLOAT:
+      return parseFloat(ast.value)
+    case Kind.BOOLEAN:
+      return ast.value
+    case Kind.STRING:
+      return ast.value
+    case Kind.LIST:
+      return ast.values.map(parseAst)
+    case Kind.OBJECT:
+      return parseObject(ast)
+    default:
+      return null
+  }
+}
+
 export const ScalarAny = new GraphQLScalarType({
   name: 'Any',
-  description: 'Any Scalar type (String, Boolean, Int, Float)',
+  description: 'Any Scalar type (String, Boolean, Int, Float, Object, List)',
   serialize(value) {
     // Implement your own behavior here by setting the 'result' variable
     return value
@@ -12,17 +39,6 @@ export const ScalarAny = new GraphQLScalarType({
     return value
   },
   parseLiteral(ast) {
-    switch (ast.kind) {
-      case Kind.INT:
-        return parseInt(ast.value)
-      case Kind.FLOAT:
-        return parseFloat(ast.value)
-      case Kind.BOOLEAN:
-        return ast.value
-      case Kind.STRING:
-        return ast.value
-      case Kind.LIST:
-        return ast.values.map((v: any) => v.value)
-    }
+    return parseAst(ast)
   }
 })

package/server/service/domain/domain-resolver.ts

@@ -1,19 +1,21 @@
-import { Resolver, Query, Mutation, Args, Arg, Ctx, Directive } from 'type-graphql'
+import { Arg, Args, Ctx, Directive, Mutation, Query, Resolver } from 'type-graphql'
 import { getRepository, In, Repository } from 'typeorm'
-import { ListParam } from '../common-types/list-param'
+
 import { slugger } from '@things-factory/utils'
-import { Domain } from './domain'
-import { DomainPatch, DomainList } from './domain-types'
+
 import { buildQuery } from '../../utils/list-query-builder'
+import { ListParam } from '../common-types/list-param'
+import { Domain } from './domain'
+import { DomainList, DomainPatch } from './domain-types'
 
 @Resolver(Domain)
 export class DomainResolver {
   @Directive('@privilege(category: "system", privilege: "mutation", domainOwnerGranted: true, superUserGranted: true)')
   @Query(returns => Domain, { description: 'To fetch domain' })
-  async domain(@Arg('name') name: string): Promise<Domain> {
+  async domain(@Arg('id') id: string): Promise<Domain> {
     const repository = getRepository(Domain)
 
-    return await repository.findOne({ name })
+    return await repository.findOne({ id })
   }
 
   @Directive('@privilege(category: "system", privilege: "query", superUserGranted: true)')