@owlmeans/client 0.1.0

package/src/services/debug.ts

@@ -0,0 +1,102 @@
+import { assertContext, createLazyService } from '@owlmeans/context'
+import { DEBUG_CONFIG_KEY, DEBUGGER_FLAG, DEF_DEBUG_ALIAS } from '../consts.js'
+import type { DebugService, DebugServiceAppend } from '../components/types.js'
+import type { ClientConfig } from '@owlmeans/client-context'
+import type { ClientContext, DebugConfigRecord } from '../types.js'
+import type { ClientDbService, ClientResource } from '@owlmeans/client-resource'
+import { DEFAULT_DB_ALIAS } from '@owlmeans/client-resource'
+
+
+export const createDebugService = (alias: string = DEF_DEBUG_ALIAS): DebugService => {
+  const location = `debug-service:${alias}`
+
+  const service: DebugService = createLazyService<DebugService>(alias, {
+    items: [
+      {
+        alias: 'close',
+        title: 'Close',
+        action: async (modal) => modal.cancel()
+      },
+      {
+        alias: 'reset',
+        title: 'Reset app',
+        action: async (modal, context) => {
+          const service = context.service<ClientDbService>(DEFAULT_DB_ALIAS)
+          await service.erase()
+          context.rerender()
+          modal.cancel()
+          void modal.navigator?._navigate('/')
+
+          return 'Client DB cleanedup!'
+        }
+      }
+    ],
+
+    addItem: item => service.items.push(item),
+
+    erase: async states => {
+      const context = assertContext(service.ctx, location) as ClientContext
+      await Promise.all(states.map(async state => {
+        await context.resource<ClientResource>(state).erase()
+      }))
+    },
+
+    open: () => {
+      const context = assertContext(service.ctx, location) as ClientContext
+      void context.modal().request(service.Debug)
+    },
+
+    select: alias => {
+      const item = service.items.find(item => item.alias === alias)
+      if (item != null) {
+        const context = assertContext(service.ctx, location) as ClientContext
+        if (item.Com != null) {
+          void context.modal().request<string>(item.Com)
+            .then(result => result != null && alert(result))
+        }
+        if (item.action != null) {
+          void item.action(context.modal(), context).then(result => result != null && alert(result))
+        }
+      }
+    },
+  }, service => async () => {
+    service.initialized = true
+    const context = assertContext(service.ctx, location) as ClientContext
+    const record = await context.getConfigResource().load<DebugConfigRecord>(DEBUG_CONFIG_KEY)
+    if (record?.states != null) {
+      service.addItem({
+        alias: 'reset-states',
+        title: `Reset states`,
+        action: async (modal, context) => {
+          const record = await context.getConfigResource().load<DebugConfigRecord>(DEBUG_CONFIG_KEY)
+          if (record?.states != null) {
+            await service.erase(record.states)
+            context.rerender()
+            modal.cancel()
+
+            return `States erased`
+          }
+          return 'No states to erase'
+        }
+      })
+    }
+  })
+
+  return service
+}
+
+export const appendDebugService = <C extends ClientConfig, T extends ClientContext<C>>(
+  ctx: T, alias: string = DEF_DEBUG_ALIAS
+): T & DebugServiceAppend => {
+  const _ctx = ctx as T & DebugServiceAppend
+
+  const debuggable = _ctx.cfg.debug.all === true || _ctx.cfg.debug[DEBUGGER_FLAG] === true
+  if (debuggable) {
+    const service = createDebugService(alias)
+    _ctx.registerService(service)
+  }
+
+  _ctx.debug = () => debuggable ? _ctx.service<DebugService>(alias) : undefined
+
+  return _ctx
+}

package/src/services/index.ts

@@ -0,0 +1,2 @@
+
+export * from './debug.js'

package/src/store.ts

@@ -0,0 +1,57 @@
+import { useEffect, useId, useMemo, useState } from 'react'
+import type { StateModel, UseStoreHelper, UseStoreHelperOptions, UseStoreListHelper } from '@owlmeans/state'
+import { useContext } from './context.js'
+import type { ResourceRecord } from '@owlmeans/resource'
+
+export const useStoreModel: UseStoreHelper = (id, opts) => {
+  const list = useStoreList(id, opts)
+
+  if (list.length < 1) {
+    throw new SyntaxError('Store always return model and create it if not exists')
+  }
+
+  return list[0]
+}
+
+export const useStoreList: UseStoreListHelper = (ids, opts) => {
+  if (typeof ids === 'object' && !Array.isArray(ids)) {
+    opts = ids
+  }
+  const params: UseStoreHelperOptions<ResourceRecord> = typeof opts === 'object' ? opts : {}
+  if (typeof ids === 'string' || Array.isArray(ids)) {
+    params.id = ids
+  }
+  if (typeof opts === 'string') {
+    params.resource = opts
+  } else if (typeof opts === 'boolean') {
+    params.listen = opts
+  }
+  params.listen = params.listen ?? true
+
+  const context = useContext()
+  const resource = useMemo(() => context.getStateResource(params.resource), [params.resource])
+
+  const deps = [
+    Array.isArray(params.id) ? params.id.join(',') : params.id,
+    params.query == null,
+    JSON.stringify(params.default),
+    params.listen
+  ]
+  const id = useId()
+  const [unsubscribe, _initialModels] = useMemo(() => {
+    return resource.subscribe({
+      _systemId: id,
+      id: params.id,
+      listener: models => {
+        params.listen && setModels(models)
+      },
+      default: params.default,
+      query: params.query,
+    })
+  }, deps)
+  const [models, setModels] = useState(_initialModels)
+
+  useEffect(() => unsubscribe, deps)
+
+  return models as StateModel<any>[]
+}

package/src/types.ts

@@ -0,0 +1,72 @@
+import type { RouteObject, Location, NavigateFunction } from 'react-router'
+import type { Router as RemixRouter } from '@remix-run/router'
+import type { PropsWithChildren, FC, DependencyList } from 'react'
+import type { AbstractRequest } from '@owlmeans/module'
+import type { ClientConfig, ClientContext as BasicClientContext } from '@owlmeans/client-context'
+import type { StateResourceAppend } from '@owlmeans/state'
+import type { ClientModule } from '@owlmeans/client-module'
+import type { DebugServiceAppend, ModalServiceAppend } from './components/types.js'
+import type { ConfigResourceAppend } from '@owlmeans/config'
+import type { ConfigRecord } from '@owlmeans/context'
+
+export interface RouterModel {
+  routes: RouteObject[]
+  resolve: <C extends ClientConfig, T extends ClientContext<C>>(context: T) => Promise<RouteObject[]>
+}
+
+export interface RouterProvider {
+  (routes: RouteObject[]): RemixRouter | Promise<RemixRouter>
+}
+
+export interface RouterProps {
+  provide: RouterProvider | RemixRouter
+}
+
+export interface AppProps extends PropsWithChildren {
+  context: ClientContext<any>
+  provide?: RouterProvider | RemixRouter
+}
+
+export interface RoutedComponent<ExtraProps = {}> extends FC<PropsWithChildren<ModuleContextParams & ExtraProps>> {
+}
+
+export interface ModuleContextParams<T extends {} = {}> {
+  alias: string
+  params: AbstractRequest<T>['params']
+  path: string
+  context: ClientContext
+}
+
+export interface ClientContext<C extends ClientConfig = ClientConfig> extends BasicClientContext<C>,
+  ConfigResourceAppend,
+  StateResourceAppend,
+  ModalServiceAppend,
+  DebugServiceAppend {
+  registerRerenderer: (listener: CallableFunction) => () => void
+  rerender: () => void
+}
+
+export interface NavRequest<T extends Record<string, any> = Record<string, any>>
+  extends Partial<AbstractRequest<T>> {
+  replace?: boolean
+  silent?: boolean
+}
+
+export interface Navigator {
+  _navigate: NavigateFunction
+  navigate: <R extends NavRequest = NavRequest>(module: ClientModule<string, AbstractRequest>, request?: R) => Promise<void>
+  go: <R extends NavRequest = NavRequest>(alias: string, request?: R) => Promise<void>
+  back: () => Promise<void>
+  pressBack: () => () => void
+  press: <R extends NavRequest = NavRequest>(alias: string, request?: R) => () => void
+  location: <R extends NavRequest = NavRequest>() => Location<R>
+}
+
+export interface DebugConfigRecord extends ConfigRecord {
+  states?: string[]
+}
+
+export interface UseValueParams<T> {
+  default?: T
+  deps?: DependencyList
+}

package/src/utils/index.ts

@@ -0,0 +1,4 @@
+
+export * from './router.js'
+export * from './route.js'
+export * from './module.js'

package/src/utils/module.ts

@@ -0,0 +1,14 @@
+
+import { createContext } from 'react'
+import type { ModuleContextParams, ClientContext } from '../types.js'
+import type { ClientConfig } from '@owlmeans/client-context'
+
+type Config = ClientConfig
+interface Context<C extends Config = Config> extends ClientContext<C> { }
+
+export const ModuleContext = createContext<ModuleContextParams>({
+  alias: '',
+  params: {},
+  path: '',
+  context: {} as Context
+})

package/src/utils/route.tsx

@@ -0,0 +1,82 @@
+import type { FC, PropsWithChildren, ReactElement } from 'react'
+import type { ModuleContextParams, RoutedComponent, ClientContext } from '../types.js'
+import { isValidElement, memo, useEffect } from 'react'
+import type { ClientModule } from '@owlmeans/client-module'
+import { provideRequest } from '@owlmeans/client-module'
+import { provideResponse } from '@owlmeans/module'
+import type { GuardService } from '@owlmeans/module'
+import { Outlet, useParams } from 'react-router'
+import { AuthorizationError } from '@owlmeans/auth'
+import type { ClientConfig } from '@owlmeans/client-context'
+
+type Config = ClientConfig
+interface Context<C extends Config = Config> extends ClientContext<C> { }
+
+export const createRouteRenderer: (params: RendererParams) => FC = ({ context, module, hasChildren }) => () => {
+  const params = useParams()
+  const reply = provideResponse()
+
+  useEffect(() => {
+    if (module.guards != null) {
+      const guards = module.getGuards().map(guard => context.service<GuardService>(guard))
+      const request = provideRequest(module.alias, module.getPath())
+      const reply = provideResponse()
+      let canceled = false
+      Promise.all(guards.map(async guard => {
+        if (canceled) return
+        return await guard.match(request, reply) ? guard : undefined
+      })).then(async guards => {
+        if (canceled) return
+        const guard = guards.find(guard => guard != null)
+        if (guard == null) {
+          throw new AuthorizationError('frontend-guard')
+        }
+        await guard.handle(request, reply)
+      }).catch(e => {
+        if (canceled) return
+        // @TODO Process error properly - redirect somewhere
+        throw e
+      })
+      return () => { canceled = true }
+    }
+  }, module.guards ?? [])
+
+  let Renderer: HandledRenderer<{}> = module.handle?.({
+    alias: module.alias, path: module.getPath(),
+    params, body: {}, headers: {}, query: {},
+  }, reply) as HandledRenderer<{}>
+
+  if (reply.error != null) {
+    throw reply.error
+  }
+
+  if (isValidElement(Renderer)) {
+    return Renderer
+  }
+  if (isComponent(Renderer)) {
+    const EnsuredRenderer = memo(Renderer) as RoutedComponent
+    const props: ModuleContextParams = {
+      context, params, alias: module.getAlias(), path: module.getPath()
+    }
+    if (hasChildren) {
+      return <EnsuredRenderer {...props}><Outlet /></EnsuredRenderer>
+    } else {
+      return <EnsuredRenderer {...props} />
+    }
+  }
+  if (hasChildren) {
+    return <Outlet />
+  }
+  return undefined
+}
+
+export type HandledRenderer<T extends {}> = FC<PropsWithChildren<T> | T> | ReactElement
+
+interface RendererParams {
+  context: Context,
+  module: ClientModule<unknown>
+  hasChildren: boolean
+}
+
+const isComponent = <T extends {}>(element: HandledRenderer<T>): element is FC<PropsWithChildren<T> | T | unknown> =>
+  element != null && typeof element === 'function' && !isValidElement(element)

package/src/utils/router.ts

@@ -0,0 +1,60 @@
+import type { ClientModule } from '@owlmeans/client-module'
+import { AppType } from '@owlmeans/context'
+import { makeRouterModel } from '../router.js'
+import type { ClientConfig } from '@owlmeans/client-context'
+import type { ClientContext } from '../types.js'
+
+type Config = ClientConfig
+interface Context<C extends Config = Config> extends ClientContext<C> { }
+
+export const buildModuleTree = <R, C extends Config = Config, T extends Context<C> = Context<C>>(context: T): ModuleTree<R> => {
+  const modules = context.modules<ClientModule<R>>().filter(
+    module => module.route.route.type === AppType.Frontend
+      && (module.sticky || module.route.route.service == null
+        || module.route.route.service === context.cfg.service)
+  )
+
+  const flatTree = new Map<ClientModule<R>, ClientModule<R>[]>()
+  const roots: ClientModule<R>[] = []
+
+  modules.forEach(module => {
+    const parentAlias = module.getParentAlias()
+    if (parentAlias == null) {
+      roots.push(module)
+    } else {
+      const parent = context.module<ClientModule<R>>(parentAlias)
+      const list = flatTree.get(parent) ?? []
+      list.push(module)
+      flatTree.set(parent, list)
+    }
+  })
+
+  const reduceModules = (modules: ClientModule<R>[]): ModuleTree<R> => modules.reduce(
+    (tree, module) => tree.set(module, reduceModules(flatTree.get(module) ?? [])), new Map()
+  )
+
+  return reduceModules(roots)
+}
+
+export const visitModuleTree = async <T, R>(tree: ModuleTree<T>, visitor: ModuleTreeVisitor<T, R>): Promise<R[]> =>
+  Array.from(tree.entries()).reduce<Promise<R[]>>(
+    async (result, [module, tree], _, source) => [
+      ...(await result),
+      await visitor(module, await visitModuleTree(tree, visitor), source.length === 1)
+    ], Promise.resolve([]))
+
+export const initializeRouter = async (context: Context) => {
+  if (!context.cfg.ready) {
+    await context.configure().init()
+    await context.waitForInitialized()
+  }
+  const model = makeRouterModel()
+  return await model.resolve(context)
+}
+
+export interface ModuleTreeVisitor<T, R> {
+  (module: ClientModule<T>, children: R[], alone: boolean): Promise<R>
+}
+
+interface ModuleTree<T> extends Map<ClientModule<T>, ModuleTree<T>> {
+}

package/src/value.ts

@@ -0,0 +1,60 @@
+import { useEffect, useState, useRef, useId } from 'react'
+import type { MutableRefObject, DependencyList } from 'react'
+import type { UseValueParams } from './types.js'
+
+const _complexValues: { [key: string]: any } = {}
+
+export const useValue = <T>(
+  loader: (cancel?: MutableRefObject<boolean>) => Promise<T>,
+  def?: T | DependencyList | UseValueParams<T> | null,
+  forceDefault?: boolean
+): T | null => {
+  const deps = Array.isArray(def)
+    ? def : typeof def === 'object' && def != null && 'deps' in def
+      ? def.deps ?? [] : []
+  def = forceDefault === true
+    ? def as T | null : Array.isArray(def)
+      ? null : typeof def === 'object' && def != null && "default" in def
+        ? def.default : def as T | null
+  const id = useId()
+  let [value, setValue] = useState<T>()
+  const [prevDeps, setPrevDeps] = useState<DependencyList>(deps)
+
+  const cancel = useRef(false)
+
+  useEffect(() => {
+    if (deps.some((dep, idx) => prevDeps[idx] !== dep)) {
+      cancel.current = false
+      setPrevDeps(deps)
+    }
+    void (async () => {
+      if (await Promise.resolve(cancel.current)) {
+        return
+      }
+      const value = await loader(cancel)
+      if (typeof value === 'function') {
+        _complexValues[id] = value
+        setValue(id as any)
+      } else {
+        if (_complexValues[id] != null) {
+          delete _complexValues[id]
+        }
+        setValue(value)
+      }
+    })()
+
+    return () => {
+      if (_complexValues[id] != null) {
+        delete _complexValues[id]
+        value = undefined
+      }
+      cancel.current = true
+    }
+  }, deps)
+
+  return (
+    typeof value === 'string' && value === id
+      ? _complexValues[value]
+      : value
+  ) ?? def ?? null
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": [
+    "../tsconfig.default.json",
+    "../tsconfig.react.json",
+  ],
+  "compilerOptions": {
+    "rootDir": "./src/", /* Specify the root folder within your source files. */
+    "outDir": "./build/", /* Specify an output folder for all emitted files. */
+  },
+  "exclude": [
+    "./dist/**/*",
+    "./build/**/*",
+    "./*.ts"
+  ]
+}

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/app.tsx","./src/consts.ts","./src/context.ts","./src/debug.ts","./src/errors.ts","./src/helper.tsx","./src/index.ts","./src/module.ts","./src/navigate.ts","./src/router.ts","./src/store.ts","./src/types.ts","./src/value.ts","./src/components/index.ts","./src/components/modal.ts","./src/components/toggle.ts","./src/components/types.ts","./src/services/debug.ts","./src/services/index.ts","./src/utils/index.ts","./src/utils/module.ts","./src/utils/route.tsx","./src/utils/router.ts"],"version":"5.6.3"}