replace app_config schema to app runtime

.debuggers

@@ -0,0 +1,38 @@
+[
+  {
+    "key": "api",
+    "component": "CoreDebug",
+    "title": "API V3 Requester",
+    "icon": "Globe"
+  },
+  {
+    "key": "core",
+    "title": "Core",
+    "icon": "Box"
+  },
+  {
+    "key": "theme",
+    "title": "Theme",
+    "icon": "Image"
+  },
+  {
+    "key": "socket",
+    "title": "Socket",
+    "icon": "Box"
+  },
+  {
+    "key": "contextMenu",
+    "title": "contextMenu",
+    "icon": "Menu"
+  },
+  {
+    "key": "verbosity",
+    "title": "Verbosity",
+    "icon": "Edit3"
+  },
+  {
+    "key": "internals",
+    "title": "Internals",
+    "icon": "Box"
+  }
+]

.nodecore

@@ -0,0 +1,3 @@
+{
+    "src": "/src"
+}

.umirc.js

@@ -1,8 +1,10 @@
+import config from './config/index.js'
 import { defineConfig, chainWebpack } from 'umi'
 import { resolve } from 'path'
 
-export default defineConfig({
+let configs = {
   hash: true,
+  title: config.app.siteName ?? null,
   dynamicImport: {
     loading: 'components/Loader',
   },
@@ -44,5 +46,10 @@ export default defineConfig({
       'lodash',
     ],
   ],
+}
   
-})
+if (typeof(config.runtime) !== "undefined") {
+  configs = { ...configs, ...config.runtime }
+}
+
+export default defineConfig(configs)

config/index.js

@@ -1,5 +1,8 @@
 module.exports = {
-  app_config: {
+  runtime: {
+    mountElementId: "root"
+  },
+  app: {
     guid: "7d6b74b5-1b3b-432f-97df-2c5fc2c2b6ae",
     siteName: 'Comty™',
     copyright: 'RageStudio©',
@@ -21,7 +24,6 @@ module.exports = {
     appTheme_desiredContrast: 7,
     // Contrast level AA = 4.5, Level AAA = 7
     // Reference: https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0&showtechniques=143#qr-visual-audio-contrast-contrast
-
   },
 
   i18n: {
@@ -38,7 +40,7 @@ module.exports = {
     {
       name: 'primary',
       include: [/\/main/, /\/settings/, /\/saves/, /\/pro/, /\/chats/, /\//],
-      exclude: [/\/publics/, /\/login/ ],
+      exclude: [/\/publics/, /\/login/],
     },
     {
       name: 'public',
@@ -52,22 +54,22 @@ module.exports = {
 
   // Default Behaviors 
   defaults: {
-        app_model: "app",
-        verbosity: false,
-        session_noexpire: false,
-        search_ontype: false,
-        post_autoposition: true,
-        overlay_loosefocus: true,
-        render_pagetransition_preset: 'moveToRightScaleUp',
-        post_catchlimit: '20',
-        post_hidebar: true,
+    app_model: "app",
+    verbosity: false,
+    session_noexpire: false,
+    search_ontype: false,
+    post_autoposition: true,
+    overlay_loosefocus: true,
+    render_pagetransition_preset: 'moveToRightScaleUp',
+    post_catchlimit: '20',
+    post_hidebar: true,
 
-        feed_autorefresh: false,
-        keybinds: {
-          nextElement: "J",
-          prevElement: "U",
-          createNew: "N"
-        }
+    feed_autorefresh: false,
+    keybinds: {
+      nextElement: "J",
+      prevElement: "U",
+      createNew: "N"
+    }
   },
 
   stricts: {

main/index.js

@@ -21,7 +21,7 @@ const packagejson = require('../package.json')
 const is = require('electron-is')
 const waitOn = require('wait-on');
 const { getDoNotDisturb } = require('electron-notification-state');
-const { app_config } = require("../config");
+const { app } = require("../config");
 
 let app_path = is.dev()? "localhost:8000" : `file://${path.join(__dirname, '..', 'renderer')}/index.html`;
 let mainWindow;
@@ -159,7 +159,7 @@ function createWindow() {
   ];
 
   tray.setContextMenu(Menu.buildFromTemplate(trayMenuTemplate))
-  tray.setToolTip(app_config.siteName)
+  tray.setToolTip(app.siteName)
   tray.on('double-click', () => resumeApp())
 
   mainWindow.loadURL(app_path)

src/components/Layout/Sider/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { app_config } from 'config'
+import { app } from 'config'
 import { router } from 'core/libs'
 import { __legacy__objectToArray } from 'core'
 import Sider_Mobile from './mobile'
@@ -80,7 +80,7 @@ class Sider extends React.Component {
   }
 
   renderByType(type){
-    const sider_props = { handleClickMenu: this.handleClickMenu, logo: app_config.LogoPath }
+    const sider_props = { handleClickMenu: this.handleClickMenu, logo: app.LogoPath }
     const filteredMenus = this.filterMenusByType(type)
     switch (type) {
       case "desktop":{

src/core/index.js

@@ -2,7 +2,7 @@ import moment from 'moment';
 import { format } from 'timeago.js';
 import { cloneDeep } from 'lodash';
 import store from 'store';
-import { i18n, app_config } from 'config';
+import { i18n, app } from 'config';
 import handle from 'core/libs/errorhandler'
 import request from 'request'
 import html2canvas from 'html2canvas'
@@ -20,16 +20,16 @@ import * as libs from './libs'
 
 export * from '@ragestudio/nodecore-utils'
 export const package_json = require('../../package.json');
-export const GUID = app_config.guid;
+export const GUID = app.guid;
 
 export const clientInfo = {
   buildStable: getBuild()["stable"],
   packageName: package_json.name,
   packageStage: package_json.stage,
-  siteName: app_config.siteName,
+  siteName: app.siteName,
   version: package_json.version,
-  logo: app_config.FullLogoPath,
-  logo_dark: app_config.DarkFullLogoPath,
+  logo: app.FullLogoPath,
+  logo_dark: app.DarkFullLogoPath,
   os: platform.os,
   layout: platform.layout
 };
@@ -259,7 +259,7 @@ export function downloadDecodedURI(payload) {
   if (!data || !type) return false
   try {
     if (!filename) {
-      filename = `${app_config.id}_${time.now()}.${type.split("/")[1]}`
+      filename = `${app.id}_${time.now()}.${type.split("/")[1]}`
     }
     let tmp = document.createElement('a')
     tmp.href = `data:${type};charset=${charset},${encodeURIComponent(data)}`
@@ -280,7 +280,7 @@ export function downloadEncodedURI(payload) {
   if (!data) return false
   try {
     if (!filename) {
-      filename = `${app_config.id}_${time.now()}.${data.split("/")[1].split(";")[0]}`
+      filename = `${app.id}_${time.now()}.${data.split("/")[1].split(";")[0]}`
     }
     let tmp = document.createElement('a')
     tmp.href = data

src/core/libs/browser/index.ts

@@ -1,3 +1,6 @@
+import { runtime } from 'config'
+import { __legacy__objectToArray, verbosity } from '@ragestudio/nodecore-utils'
+
 const zeroStyles = (element: HTMLElement, ...properties: string[]): void => {
   for (const property of properties) {
     element.style.setProperty(property, '0')

src/core/libs/keybinds/index.js

@@ -1,2 +1,2 @@
-import { defaults, app_config } from 'config'
+import { defaults, app } from 'config'
 import { get_value } from 'core'

src/core/libs/settings/index.js

@@ -1,9 +1,9 @@
-import { defaults, app_config } from 'config'
+import { defaults, app } from 'config'
 
 export function parseLocalStorage(){
-    const a = localStorage.getItem(app_config.storage_appSettings)
+    const fromStorage = localStorage.getItem(app.storage_appSettings)
     try {
-        return JSON.parse(a)
+        return JSON.parse(fromStorage)
     } catch (error) {
         console.log(error)
     }
@@ -67,7 +67,7 @@ export const settings = {
         }
         data = tmp
         try {
-            localStorage.setItem( app_config.storage_appSettings, JSON.stringify(data) )
+            localStorage.setItem( app.storage_appSettings, JSON.stringify(data) )
         } catch (error) {
             console.log(error)
             return false

src/core/libs/style/index.js

@@ -1,17 +1,38 @@
 import store from 'store';
-import { app_config } from 'config';
+import { app } from 'config';
 import verbosity from 'core/libs/verbosity'
 import ErrorHandler from 'core/libs/errorhandler'
 
-const { appTheme_desiredContrast, storage_theme } = app_config
+const { appTheme_desiredContrast, storage_theme } = app
+
+export const updateRootStyles = (styles) => {
+  const rootContainer = document.getElementById(runtime.mountElementId ?? "root")
+  if (rootContainer) {
+    if (typeof (styles) !== "undefined" && Array.isArray(styles)) {
+      try {
+        __legacy__objectToArray(styles).forEach((e) => {
+          rootContainer.style[e.key] = e.value
+        })
+      } catch (error) {
+        verbosity([error])
+        return false
+      }
+    }
+    return false
+  }
+}
+
+export const appendStyles = (style) => {
+
+}
 
 export const theme = {
   get: (key) => {
     const raw = store.get(storage_theme)
-    if(!raw) return false
+    if (!raw) return false
     let container = []
     try {
-      raw.forEach((e)=>{container[e.key] = e.value})
+      raw.forEach((e) => { container[e.key] = e.value })
     } catch (error) {
       return ErrorHandler({ msg: error, code: 120 })
     }
@@ -20,46 +41,41 @@ export const theme = {
   set: (data) => {
     if (!data || data.length > 2) return false
     try {
-        let mix = []
-        const obj = Object.entries(data)
-        obj.forEach((e) => {
-            mix.push({key: e[0], value: e[1]})
-        })
-        return store.set(storage_theme, mix)
+      let mix = []
+      const obj = Object.entries(data)
+      obj.forEach((e) => {
+        mix.push({ key: e[0], value: e[1] })
+      })
+      return store.set(storage_theme, mix)
     } catch (error) {
-        console.log(error)
-        return false
+      console.log(error)
+      return false
     }
   },
-  raw: () =>  {
+  raw: () => {
     return store.get(storage_theme)
   }
 }
 
-export function get_style_rule_value(selector, style)
-{
- const selector_lowercase = selector.toLowerCase();
- const selector_parsed = selector_lowercase.substr(0,1)==='.' ?  selector_lowercase.substr(1) : '.'+selector_lowercase;
+export function get_style_rule_value(selector, style) {
+  const selector_lowercase = selector.toLowerCase();
+  const selector_parsed = selector_lowercase.substr(0, 1) === '.' ? selector_lowercase.substr(1) : '.' + selector_lowercase;
 
- for (let i = 0; i < document.styleSheets.length; i++)
- {
-  let styleSheet = document.styleSheets[i];
-  let rules = styleSheet.cssRules ? styleSheet.cssRules : styleSheet.rules;
+  for (let i = 0; i < document.styleSheets.length; i++) {
+    let styleSheet = document.styleSheets[i];
+    let rules = styleSheet.cssRules ? styleSheet.cssRules : styleSheet.rules;
 
-  for (var j = 0; j < rules.length; j++)
-  {
-    if (rules[j].selectorText)
-    {
-     var check = rules[j].selectorText.toLowerCase();
-     switch (check)
-     {
-      case selector_lowercase  :
-      case selector_parsed : return rules[j].style[style];
-     }
+    for (var j = 0; j < rules.length; j++) {
+      if (rules[j].selectorText) {
+        var check = rules[j].selectorText.toLowerCase();
+        switch (check) {
+          case selector_lowercase:
+          case selector_parsed: return rules[j].style[style];
+        }
+      }
     }
-   }
   }
- }
+}
 
 export function getOptimalOpacityFromIMG(payload, callback) {
   const { textColor, overlayColor, img } = payload;
@@ -70,18 +86,16 @@ export function getOptimalOpacityFromIMG(payload, callback) {
 
   image.src = img
   image.setAttribute('crossOrigin', '');
-  image.onload = () =>{
+  image.onload = () => {
     const imagePixelColors = getImagePixelColorsUsingCanvas(canvas, image);
-    if(imagePixelColors){
+    if (imagePixelColors) {
       const worstContrastColorInImage = getWorstContrastColorInImage(textColor, imagePixelColors);
       const optimalOpacity = findOptimalOverlayOpacity(textColor, overlayColor, worstContrastColorInImage, appTheme_desiredContrast);
       return callback(optimalOpacity)
-    }else{
+    } else {
       return false
     }
-
   }
-  
 }
 
 export function getImagePixelColorsUsingCanvas(canvas, image) {
@@ -128,7 +142,7 @@ export function getWorstContrastColorInImage(textColor, imagePixelColors) {
     };
 
     let contrast = getContrast(textColor, pixelColor);
-    if(contrast < worstContrast) {
+    if (contrast < worstContrast) {
       worstContrast = contrast;
       worstContrastColorInImage = pixelColor;
     }
@@ -147,7 +161,7 @@ export function getContrast(color1, color2) {
   return contrast;
 }
 
-export function getLuminance({r,g,b}) {
+export function getLuminance({ r, g, b }) {
   return (0.2126 * getLinearRGB(r) + 0.7152 * getLinearRGB(g) + 0.0722 * getLinearRGB(b));
 }
 
@@ -167,12 +181,12 @@ export function convert_8bit_RGB_to_standard_RGB(primaryColor_8bit) {
 
 export function convert_standard_RGB_to_linear_RGB(primaryColor_sRGB) {
   const primaryColor_linear = primaryColor_sRGB < 0.03928 ?
-    primaryColor_sRGB/12.92 :
+    primaryColor_sRGB / 12.92 :
     Math.pow((primaryColor_sRGB + 0.055) / 1.055, 2.4);
   return primaryColor_linear;
 }
 
-export function getTextContrastWithImagePlusOverlay({textColor, overlayColor, imagePixelColor, overlayOpacity}) {
+export function getTextContrastWithImagePlusOverlay({ textColor, overlayColor, imagePixelColor, overlayOpacity }) {
   const colorOfImagePixelPlusOverlay = mixColors(imagePixelColor, overlayColor, overlayOpacity);
   const contrast = getContrast(textColor, colorOfImagePixelPlusOverlay);
   return contrast;
@@ -232,4 +246,3 @@ export function findOptimalOverlayOpacity(textColor, overlayColor, worstContrast
   return optimalOpacity;
 }
 
-  

src/core/libs/v3_model/index.js

@@ -1,8 +1,8 @@
 import v3_request from 'api/lib/v3_request'
 import endpointList from 'config/endpoints'
-import { app_config } from 'config'
+import { app } from 'config'
 
-const { endpoint_v3prefix } = app_config;
+const { endpoint_v3prefix } = app;
 
 export async function api_request(payload, callback) {
   if (!payload) return false;

src/layouts/BaseLayout.js

@@ -47,7 +47,7 @@ class BaseLayout extends React.Component {
     return (
       <React.Fragment>
         <Helmet>
-          <title>{config.app_config.siteName}</title>
+          <title>{config.app.siteName}</title>
         </Helmet>
         {this.props.app.electron? <WindowNavbar /> : null}
         {Loader(this.renderLoading)}

src/layouts/PrimaryLayout.js

@@ -10,7 +10,7 @@ import { enquireScreen, unenquireScreen } from 'enquire-js'
 import store from 'store'
 import classnames from 'classnames'
 
-import { app_config } from 'config'
+import { app } from 'config'
 import { theme } from 'core/libs/style'
 import * as antd from 'antd'
 import contextMenuList from 'globals/contextMenu'
@@ -28,7 +28,7 @@ class PrimaryLayout extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      collapsed: app_config.default_collapse_sider ? true : false,
+      collapsed: app.default_collapse_sider ? true : false,
       isMobile: false
     }
 

src/models/app.js

@@ -1,7 +1,7 @@
 import store from 'store'
-import { app_config } from 'config'
+import { app } from 'config'
 import keys from 'config/app_keys'
-import { user, session } from 'core/models'
+import { session } from 'core/models'
 import { router, verbosity, ui } from 'core/libs'
 import settings from 'core/libs/settings'
 import { queryIndexer } from 'core'
@@ -30,19 +30,15 @@ export default {
     session_data: null,
     session_uuid: null,
 
-    sidebar_collapsed: store.get("sidebar_collapse"),
+    sidebar_collapsed: store.get("sidebar_collapse") ?? false,
     overlayActive: false,
     overlayElement: null,
     embedded: false,
     dispatcher: null,
 
-    abortRender: null,
-    controlActive: false,
-    feedOutdated: false,
-
     electron: null,
-    app_settings: store.get(app_config.storage_appSettings),
-    app_theme: store.get(app_config.storage_theme) || [],
+    app_settings: store.get(app.storage_appSettings) || [],
+    app_theme: store.get(app.storage_theme) || [],
     notifications: [],
   },
   subscriptions: {
@@ -251,25 +247,28 @@ export default {
     },
     *updateUserData({ payload }, { put, select }) {
       const state = yield select(state => state.app)
-      state.dispatcher({
-        type: "user/get",
-        payload: {
-          from: "data"
-        },
-        callback: (callbackResponse) => {
-          verbosity([callbackResponse])
-          if (callbackResponse.code == 115) {
-            verbosity(`Cannot update userdata due an data is missing`)
-            return false
-          }
-          try {
-            sessionStorage.setItem(app_config.storage_dataFrame, btoa(JSON.stringify(callbackResponse.response)))
-            state.dispatcher({ type: "updateState", payload: { session_data: callbackResponse.response } })
-          } catch (error) {
-            verbosity([error])
+
+      state.dispatch({
+        type: "socket/use",
+        scope: "users",
+        invoke: "get",
+        query: {
+          payload: {
+            from: "data",
+            user_id: state.app.session_uuid,
+            userToken: state.app.session_token
+          },
+          callback: (callbackResponse) => {
+            try {
+              sessionStorage.setItem(app.storage_dataFrame, btoa(JSON.stringify(callbackResponse.response)))
+              return state.dispatcher({ type: "updateState", payload: { session_data: callbackResponse.response } })
+            } catch (error) {
+              verbosity([error])
+            }
           }
         }
       })
+      
     },
     *updateTheme({ payload }, { put, select }) {
       if (!payload) return false
@@ -295,8 +294,8 @@ export default {
     },
     *updateFrames({ payload }, { select, put }) {
       try {
-        let sessionAuthframe = cookie.get(app_config.storage_authFrame)
-        let sessionDataframe = atob(sessionStorage.getItem(app_config.storage_dataFrame))
+        let sessionAuthframe = cookie.get(app.storage_authFrame)
+        let sessionDataframe = atob(sessionStorage.getItem(app.storage_dataFrame))
 
         if (sessionAuthframe) {
           try {
@@ -310,7 +309,7 @@ export default {
               }
             })
           } catch (error) {
-            cookie.remove(app_config.storage_authFrame)
+            cookie.remove(app.storage_authFrame)
           }
         }
         if (sessionDataframe) {
@@ -348,15 +347,12 @@ export default {
       state.session_authframe = jwt.decode(payload.token)
       state.session_valid = true
 
-      cookie.set(app_config.storage_authFrame, payload.token)
-      sessionStorage.setItem(app_config.storage_dataFrame, btoa(JSON.stringify(payload.dataFrame)))
-    },
-    handleCollapseSidebar(state, { payload }) {
-      state.sidebar_collapsed = payload
+      cookie.set(app.storage_authFrame, payload.token)
+      sessionStorage.setItem(app.storage_dataFrame, btoa(JSON.stringify(payload.dataFrame)))
     },
     handleUpdateTheme(state, { payload }) {
       verbosity([payload])
-      store.set(app_config.storage_theme, payload);
+      store.set(app.storage_theme, payload)
       state.app_theme = payload
     },
     requireQuery(state, { payload, callback }) {
@@ -405,7 +401,7 @@ export default {
       state.session_data = null;
       state.session_token = null;
       state.session_authframe = null;
-      cookie.remove(app_config.storage_authFrame)
+      cookie.remove(app.storage_authFrame)
       sessionStorage.clear()
       location.reload()
     },

src/models/socket.ts

@@ -1,5 +1,5 @@
 import store from 'store'
-import { app_config } from 'config'
+import { app } from 'config'
 import keys from 'config/app_keys'
 import { user, session } from 'core/models'
 import { router, verbosity, ui } from 'core/libs'
@@ -17,7 +17,7 @@ export default {
   namespace: 'socket',
   state: {
     nodes: {},
-    socket_address: app_config.endpoint_websocket, //set by default
+    socket_address: app.endpoint_websocket, //set by default
     socket_port: "7000",
     headerNode: "/"
   },

src/models/user.ts

@@ -1,6 +1,6 @@
 import { effect, reducer, dvaModel, subscription, path, BaseModel } from 'dva-model-enhance'
 import store from 'store'
-import { app_config } from 'config'
+import { app } from 'config'
 import keys from 'config/app_keys'
 import { user, session } from 'core/models'
 import { router, verbosity, ui } from 'core/libs'

src/pages/login/index.js

@@ -12,14 +12,14 @@ import RegistrationForm from './register.js'
 import NormalLoginForm from './login.js'
 import GuestSession from './guest.js'
 
-import { app_config } from 'config'
+import { app } from 'config'
 import { connect } from 'umi'
 
 const types = [
   {
     id: "login",
     key: 0,
-    renderText: `Sign in ${app_config.siteName}`
+    renderText: `Sign in ${app.siteName}`
   },
   {
     id: "register",