@things-factory/shell 5.0.0-zeta.9 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/shell",
-  "version": "5.0.0-zeta.9",
+  "version": "5.0.0",
   "description": "Core module for framework",
   "bin": {
     "things-factory": "bin/things-factory",
@@ -31,53 +31,57 @@
     "test": "NODE_ENV=test jest"
   },
   "dependencies": {
-    "@apollo/client": "^3.6.8",
-    "@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.16",
-    "@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.40",
-    "@operato/graphql": "^1.0.0-beta.40",
-    "@operato/help": "^1.0.0-beta.40",
-    "@operato/layout": "^1.0.0-beta.40",
-    "@operato/shell": "^1.0.0-beta.40",
-    "@operato/utils": "^1.0.0-beta.40",
-    "@things-factory/ejs-remote": "^5.0.0-zeta.9",
-    "@things-factory/env": "^5.0.0-zeta.9",
-    "@things-factory/styles": "^5.0.0-zeta.9",
-    "@things-factory/utils": "^5.0.0-zeta.9",
+    "@hatiolab/things-scene": "^3.0.19",
+    "@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",
+    "@operato/graphql": "^1.0.0",
+    "@operato/help": "^1.0.0",
+    "@operato/layout": "^1.0.0",
+    "@operato/shell": "^1.0.0",
+    "@operato/utils": "^1.0.0",
+    "@things-factory/ejs-remote": "^5.0.0",
+    "@things-factory/env": "^5.0.0",
+    "@things-factory/styles": "^5.0.0",
+    "@things-factory/utils": "^5.0.0",
     "@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.10.0",
+    "apollo-server-koa": "^3.10.0",
+    "apollo-server-types": "^3.6.2",
     "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": "^16.5.0",
+    "graphql-language-service-interface": "^2.10.2",
+    "graphql-language-service-parser": "^1.10.4",
+    "graphql-language-service-utils": "^2.7.1",
     "graphql-mqtt-subscriptions": "^1.2.0",
-    "graphql-redis-subscriptions": "^2.4.2",
+    "graphql-redis-subscriptions": "^2.5.0",
     "graphql-subscriptions": "^2.0.0",
     "graphql-tag": "^2.12.6",
-    "graphql-upload": "^13.0.0",
-    "graphql-ws": "^5.9.0",
-    "haunted": "^4.8.2",
+    "graphql-upload": "^15.0.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",
@@ -86,21 +90,20 @@
     "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",
@@ -111,26 +114,22 @@
     "reselect": "^4.0.0",
     "sass": "^1.50.1",
     "scrollbooster": "^3.0.2",
-    "subscriptions-transport-ws": "^0.11.0",
     "sweetalert2": "^10.9.0",
-    "type-graphql": "^1.2.0-rc.1",
-    "typeorm": "^0.2.41",
+    "type-graphql": "npm:type-graphql-v2-fork@2.0.0-alpha2",
+    "typeorm": "^0.2.45",
     "uuid": "^3.4.0",
     "web-animations-js": "^2.3.2",
-    "web-push": "^3.4.5",
+    "web-push": "^3.5.0",
     "webfontloader": "^1.6.28",
-    "ws": "^8.8.0"
+    "ws": "^8.8.1"
   },
   "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": "af1562aba5cd179a7d10fc252b791e0a78049283"
+  "gitHead": "32cb91663e38de9ab1bb7a72af923c3bf8ac187b"
 }

package/server/schema.ts

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

package/server/server-dev.ts

@@ -1,24 +1,23 @@
-/* following lines should be located in top of the file */
-// @prettier-ignore
+// ts-import-sorter: disable
+
+/* following 2 lines should be located in top of the file */
 process.env.NODE_ENV = 'development'
 process.setMaxListeners(0)
 
-/* following lines should be located in top of the file */
-import { ApolloServerPluginLandingPageGraphQLPlayground } from 'apollo-server-core'
+import { ApolloServerPluginDrainHttpServer, ApolloServerPluginLandingPageGraphQLPlayground } from 'apollo-server-core'
 import { ApolloServer } from 'apollo-server-koa'
 import bytesFormat from 'bytes'
-import co from 'co'
-import { execute, subscribe } from 'graphql'
-import { graphqlUploadKoa } from 'graphql-upload'
+import graphqlUploadKoa from 'graphql-upload/graphqlUploadKoa.js'
+import { useServer } from 'graphql-ws/lib/use/ws'
 import { createServer } from 'http'
 import Koa from 'koa'
 import koaBodyParser from 'koa-bodyparser'
-import compose from 'koa-compose'
 import ip from 'koa-ip'
 import koaStatic from 'koa-static'
+import compose from 'koa-compose'
 import { historyApiFallback } from 'koa2-connect-history-api-fallback'
-/** Never move following lines */
-import { ConnectionContext, SubscriptionServer } from 'subscriptions-transport-ws'
+import { WebSocketServer } from 'ws'
+import co from 'co'
 
 import koaWebpack from '@hatiolab/koa-webpack'
 import cors from '@koa/cors'
@@ -111,23 +110,29 @@ const bootstrap = async () => {
   const builtSchema = await schema()
 
   const httpServer = createServer(app.callback())
+  const websocketServer = new WebSocketServer({
+    server: httpServer,
+    path: '/graphql'
+  })
 
-  const subscriptionServer = SubscriptionServer.create(
+  // Save the returned server's info so we can shut down this server later
+  const serverCleanup = useServer(
     {
       schema: builtSchema,
-      // These are imported from `graphql`.
-      execute,
-      subscribe,
-      async onConnect(connectionParams: Object, webSocket: WebSocket, context: ConnectionContext) {
-        var { request } = context
+      context: async (ctx, msg, args) => {
+        return ctx['context']
+      },
+      onConnect: async ctx => {
+        var { extra, connectionParams } = ctx
+        var { request } = extra
 
-        var url = new URL((connectionParams['headers'] || connectionParams).referer)
+        var url = new URL(((connectionParams['headers'] as any) || connectionParams).referer)
         var accessToken = url.searchParams.get('access_token')
         connectionParams['headers']['authorization'] = accessToken
 
         request.headers = {
           ...request.headers,
-          ...(connectionParams['headers'] || connectionParams)
+          ...(connectionParams['headers'] || (connectionParams as any))
         }
 
         var koacontext = await app.createContext(request, {} as any)
@@ -139,13 +144,16 @@ const bootstrap = async () => {
 
         await fn(koacontext)
 
-        return koacontext
+        return (ctx['context'] = koacontext)
+      },
+      onDisconnect(ctx, code, reason) {
+        console.log('Disconnected!')
+      },
+      onError(ctx, msg, errors) {
+        console.error(msg, errors)
       }
     },
-    {
-      server: httpServer,
-      path: '/subscriptions'
-    }
+    websocketServer
   )
 
   const server = new ApolloServer({
@@ -155,7 +163,6 @@ const bootstrap = async () => {
       return error
     },
     formatResponse: response => {
-      // logger.info('response %s', JSON.stringify(response, null, 2))
       return response
     },
     context: async ({ connection, ctx }) => {
@@ -171,19 +178,21 @@ const bootstrap = async () => {
           'request.credentials': 'same-origin'
         }
       }),
+      ApolloServerPluginDrainHttpServer({ httpServer }),
       {
         async serverWillStart() {
           return {
             async drainServer() {
-              subscriptionServer.close()
+              await serverCleanup.dispose()
             }
           }
         }
       }
-    ]
+    ],
+    cache: 'bounded'
   })
 
-  server.start()
+  await server.start()
 
   GraphqlLocalClient.init(builtSchema, app)
 
@@ -241,7 +250,7 @@ const bootstrap = async () => {
     .use(domainPrivateRouter.routes())
     .use(domainPrivateRouter.allowedMethods())
 
-  /* should be history-fallback => webpack-middleware => koaStatic */
+  /* should follow this order : history-fallback => webpack-middleware => koaStatic */
   app.use(historyApiFallback({ whiteList: [] }))
 
   app.use(middleware)
@@ -254,7 +263,7 @@ const bootstrap = async () => {
 
   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}${'/subscriptions'}`)
+    logger.info(`🚀 Subscriptions ready at ws://0.0.0.0:${PORT}${server.graphqlPath}`)
 
     process.emit('bootstrap-module-start' as any, { app, config, builtSchema, httpServer } as any)
   })

package/server/server.ts

@@ -1,20 +1,23 @@
-// @prettier-ignore
+// ts-import-sorter: disable
+
+/* following 2 lines should be located in top of the file */
 process.env.NODE_ENV = 'production'
 process.setMaxListeners(0)
 
+import { ApolloServerPluginDrainHttpServer, ApolloServerPluginLandingPageGraphQLPlayground } from 'apollo-server-core'
 import { ApolloServer } from 'apollo-server-koa'
 import bytesFormat from 'bytes'
-import co from 'co'
-import { execute, subscribe } from 'graphql'
-import { graphqlUploadKoa } from 'graphql-upload'
+import graphqlUploadKoa from 'graphql-upload/graphqlUploadKoa.js'
+import { useServer } from 'graphql-ws/lib/use/ws'
 import { createServer } from 'http'
 import Koa from 'koa'
 import koaBodyParser from 'koa-bodyparser'
-import compose from 'koa-compose'
 import ip from 'koa-ip'
 import koaStatic from 'koa-static'
+import compose from 'koa-compose'
 import { historyApiFallback } from 'koa2-connect-history-api-fallback'
-import { ConnectionContext, SubscriptionServer } from 'subscriptions-transport-ws'
+import { WebSocketServer } from 'ws'
+import co from 'co'
 
 import cors from '@koa/cors'
 import { config, loader, logger, orderedModuleNames } from '@things-factory/env'
@@ -53,6 +56,7 @@ const fileUploadOption = {
   maxFileSize: bytesFormat.parse(fileUpload.maxFileSize) || bytesFormat.parse('10mb'),
   maxFiles: fileUpload.maxFiles || 10
 }
+
 /* bootstrap */
 const bootstrap = async () => {
   await databaseInitializer()
@@ -93,41 +97,50 @@ const bootstrap = async () => {
   const builtSchema = await schema()
 
   const httpServer = createServer(app.callback())
+  const websocketServer = new WebSocketServer({
+    server: httpServer,
+    path: '/graphql'
+  })
 
-  const subscriptionServer = SubscriptionServer.create(
+  // Save the returned server's info so we can shut down this server later
+  const serverCleanup = useServer(
     {
       schema: builtSchema,
-      // These are imported from `graphql`.
-      execute,
-      subscribe,
-      async onConnect(connectionParams: Object, webSocket: WebSocket, context: ConnectionContext) {
-        var { request } = context
+      context: async (ctx, msg, args) => {
+        return ctx['context']
+      },
+      onConnect: async ctx => {
+        var { extra, connectionParams } = ctx
+        var { request } = extra
 
-        var url = new URL((connectionParams['headers'] || connectionParams).referer)
+        var url = new URL(((connectionParams['headers'] as any) || connectionParams).referer)
         var accessToken = url.searchParams.get('access_token')
         connectionParams['headers']['authorization'] = accessToken
 
         request.headers = {
           ...request.headers,
-          ...(connectionParams['headers'] || connectionParams)
+          ...(connectionParams['headers'] || (connectionParams as any))
         }
 
-        /* in case connect error(like a authentication error) just throw exception */
         var koacontext = await app.createContext(request, {} as any)
         koacontext['state'] = {}
 
+        /* in case connect error(like a authentication error) just throw exception */
         var middlewares = [...subscriptionMiddleware]
         const fn = co.wrap(compose(middlewares))
 
         await fn(koacontext)
 
-        return koacontext
+        return (ctx['context'] = koacontext)
+      },
+      onDisconnect(ctx, code, reason) {
+        console.log('Disconnected!')
+      },
+      onError(ctx, msg, errors) {
+        console.error(msg, errors)
       }
     },
-    {
-      server: httpServer,
-      path: '/subscriptions'
-    }
+    websocketServer
   )
 
   const server = new ApolloServer({
@@ -149,16 +162,18 @@ const bootstrap = async () => {
       }
     },
     plugins: [
+      ApolloServerPluginDrainHttpServer({ httpServer }),
       {
         async serverWillStart() {
           return {
             async drainServer() {
-              subscriptionServer.close()
+              await serverCleanup.dispose()
             }
           }
         }
       }
-    ]
+    ],
+    cache: 'bounded'
   })
 
   await server.start()
@@ -205,7 +220,7 @@ const bootstrap = async () => {
     .use(domainPrivateRouter.routes())
     .use(domainPrivateRouter.allowedMethods())
 
-  /* should be history-fallback => koaStatic */
+  /* should follow this order : history-fallback => koaStatic */
   app.use(historyApiFallback({ whiteList: [] }))
 
   app.use(
@@ -216,7 +231,7 @@ const bootstrap = async () => {
 
   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}${'/subscriptions'}`)
+    logger.info(`🚀 Subscriptions ready at ws://0.0.0.0:${PORT}${server.graphqlPath}`)
 
     process.emit('bootstrap-module-start' as any, { app, config, builtSchema, httpServer } as any)
   })

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

@@ -11,7 +11,7 @@ export const ScalarDate = new GraphQLScalarType({
      * Note: Allow value to be date only like "2021-01-31" to be serialize before passing data to clientside for TypeGraphql.
      * Usage: When database column datatype is "date" and data do not contain any time component.
      */
-    return new Date(value).getTime() // value sent to the client
+    return new Date(value as any).getTime() // value sent to the client
   },
   parseLiteral(ast) {
     if (ast.kind === Kind.INT) {

package/server/service/directive-transaction/transaction.ts

@@ -1,7 +1,8 @@
-import { GraphQLSchema, defaultFieldResolver } from 'graphql'
-import { gql } from 'graphql-tag'
+import { defaultFieldResolver, GraphQLSchema } from 'graphql'
+import gql from 'graphql-tag'
 import { getConnection } from 'typeorm'
-import { mapSchema, getDirective, MapperKind } from '@graphql-tools/utils'
+
+import { getDirective, MapperKind, mapSchema } from '@graphql-tools/utils'
 
 const debug = require('debug')('things-factory:shell:directive-transaction')
 

package/server/utils/get-query-builder-from-list-params.ts

@@ -1,6 +1,6 @@
-import { Filter, ListParam } from 'server/service'
 import { Brackets, EntityMetadata, Repository, SelectQueryBuilder, WhereExpressionBuilder } from 'typeorm'
 
+import { Filter, ListParam } from '../service/common-types/list-param'
 import { Domain } from '../service/domain/domain'
 
 const debug = require('debug')('things-factory:shell:get-query-builder-from-list-params')

package/things-factory.config.js

@@ -3,10 +3,6 @@ import route from './client/route'
 export default {
   route,
   routes: [
-    {
-      tagname: 'ox-help-home',
-      page: 'help'
-    },
     {
       tagname: 'page-404',
       page: 'page404'

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;
-    }
-  }
-`