@owlmeans/client 0.1.0

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@owlmeans/client",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "build": "tsc -b",
+    "dev": "sleep 54 && nodemon -e ts,tsx,json --watch src --exec \"tsc -p ./tsconfig.json\"",
+    "watch": "tsc -b -w --preserveWatchOutput --pretty"
+  },
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./build/index.js",
+      "require": "./build/index.js",
+      "default": "./build/index.js",
+      "module": "./build/index.js",
+      "types": "./build/index.d.ts"
+    },
+    "./utils": {
+      "import": "./build/utils/index.js",
+      "require": "./build/utils/index.js",
+      "default": "./build/utils/index.js",
+      "module": "./build/utils/index.js",
+      "types": "./build/utils/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@owlmeans/auth": "0.1.0",
+    "@owlmeans/client-context": "0.1.0",
+    "@owlmeans/client-module": "0.1.0",
+    "@owlmeans/client-resource": "0.1.0",
+    "@owlmeans/config": "0.1.0",
+    "@owlmeans/context": "0.1.0",
+    "@owlmeans/error": "0.1.0",
+    "@owlmeans/module": "0.1.0",
+    "@owlmeans/resource": "0.1.0",
+    "@owlmeans/state": "0.1.0"
+  },
+  "peerDependencies": {
+    "@remix-run/router": "*",
+    "react": "*",
+    "react-router": "*",
+    "react-router-dom": "*"
+  },
+  "peerDependenciesMeta": {
+    "@remix-run/router": {
+      "optional": true
+    },
+    "react-router-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.11",
+    "nodemon": "^3.1.7",
+    "npm-check": "^6.0.1",
+    "react-router": "^6.26.2",
+    "typescript": "^5.6.3"
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/app.tsx

@@ -0,0 +1,17 @@
+
+import type { FC } from 'react'
+import type { AppProps } from './types.js'
+import { useEffect, useState } from 'react'
+import { Context } from './context.js'
+import { Router } from './router.js'
+
+export const App: FC<AppProps> = ({ context, provide, children }) => {
+  const [render, rerender] = useState(0)
+
+  useEffect(() => context.registerRerenderer(() => rerender(render + 1)), [])
+
+  return <Context value={context}>
+    {children}
+    {provide != null ? <Router provide={provide} /> : undefined}
+  </Context>
+}

package/src/components/index.ts

@@ -0,0 +1,4 @@
+
+export type * from './types.js'
+export * from './toggle.js'
+export * from './modal.js'

package/src/components/modal.ts

@@ -0,0 +1,89 @@
+import { createService } from '@owlmeans/context'
+import { DEF_MODAL_ALIAS } from '../consts.js'
+import type { ModalService, ModalServiceAppend, ModalStackLayer } from './types.js'
+import type { ClientConfig } from '@owlmeans/client-context'
+import type { ClientContext } from '../types.js'
+import { useContext } from '../context.js'
+import { useNavigate } from '../navigate.js'
+import { useEffect } from 'react'
+
+export const createModalService = (alias: string = DEF_MODAL_ALIAS): ModalService => {
+  const close = () => {
+    service.stack.pop()
+    service.toggle.close()
+    if (service.stack.length > 0) {
+      // @TODO Figure out how to remove this hack
+      setTimeout(() => service.toggle.open(), 500)
+    }
+  }
+
+  const service: ModalService = createService<ModalService>(alias, {
+    stack: [],
+
+    link: toggle => service.toggle = toggle,
+
+    layer: () => {
+      if (service.stack.length === 0) {
+        return undefined
+      }
+
+      return service.stack[service.stack.length - 1]
+    },
+
+    request: async Com => {
+      const layer: ModalStackLayer = { Com }
+      const defer = new Promise<any | null>((resolve, reject) => {
+        layer.resolve = resolve
+        layer.reject = reject
+      })
+      service.stack.push(layer)
+
+      service.toggle.open()
+
+      const result = await defer
+      service.stack.pop()
+
+      return result
+    },
+
+    error: error => {
+      service.layer()?.reject?.(error)
+      close()
+    },
+
+    response: result => {
+      service.layer()?.resolve?.(result)
+      close()
+    },
+
+    cancel: () => {
+      service.layer()?.resolve?.(null)
+      close()
+    }
+  }, service => async () => { service.initialized = true })
+
+  return service
+}
+
+export const appendModalService = <C extends ClientConfig, T extends ClientContext<C>>(
+  ctx: T, alias: string = DEF_MODAL_ALIAS
+): T & ModalServiceAppend => {
+  const service = createModalService(alias)
+
+  const _ctx = ctx as T & ModalServiceAppend
+
+  _ctx.registerService(service)
+
+  _ctx.modal = () => _ctx.service(alias)
+
+  return _ctx
+}
+
+export const useSetupModalNavigator = () => {
+  const context = useContext()
+  const navigator = useNavigate()
+  useEffect(() => {
+    const modal = context.modal()
+    modal.navigator = navigator
+  }, [])
+}

package/src/components/toggle.ts

@@ -0,0 +1,22 @@
+import { useMemo, useState } from 'react'
+import type { Toggleable } from './types.js'
+
+export const useToggle = (opened?: boolean): Toggleable => {
+  if (opened === undefined) {
+    opened = false
+  }
+  const [_opened, setOpened] = useState<boolean>(opened)
+  return useMemo<Toggleable>(() => {
+    const _handler: Toggleable = {
+      opened: _opened === undefined ? false : _opened,
+      set: opened => {
+        setOpened(_handler.opened = opened)
+      },
+      open: () => { _handler.set(true) },
+      close: () => { _handler.set(false) },
+      toggle: () => { _handler.set(!_handler.opened) }
+    }
+
+    return _handler
+  }, [])
+}

package/src/components/types.ts

@@ -0,0 +1,57 @@
+import type { InitializedService, LazyService } from '@owlmeans/context'
+import type { FC } from 'react'
+import type { ClientContext, Navigator } from '../types.js'
+
+export interface Toggleable {
+  opened: boolean
+  open: () => void
+  close: () => void
+  set: (opened: boolean) => void
+  toggle: () => void
+}
+
+export interface ModalService extends InitializedService {
+  toggle: Toggleable
+  stack: ModalStackLayer[]
+  navigator?: Navigator
+  layer: () => ModalStackLayer | undefined
+  link: (toggle: Toggleable) => void
+  request: <T>(Com: FC<ModalBodyProps>) => Promise<T | null>
+  error: (error: Error) => void
+  response: <T>(value: T) => void
+  cancel: () => void
+}
+
+export interface ModalStackLayer {
+  Com: FC<ModalBodyProps>
+  resolve?: (v: unknown | null) => void,
+  reject?: (e: Error) => void
+}
+
+export interface ModalBodyProps {
+  modal?: ModalService
+}
+
+export interface ModalServiceAppend {
+  modal: () => ModalService
+}
+
+export interface DebugService extends LazyService {
+  Debug: FC<ModalBodyProps>
+  items: DebugMenuItem[]
+  addItem: (item: DebugMenuItem) => void
+  erase: (states: string[]) => Promise<void>
+  select: (alias: string) => void
+  open: () => void
+}
+
+export interface DebugMenuItem {
+  alias: string
+  title: string
+  Com?: FC<ModalBodyProps>
+  action?: (modal: ModalService, context: ClientContext) => Promise<void | string>
+}
+
+export interface DebugServiceAppend {
+  debug: () => DebugService | undefined
+}

package/src/consts.ts

@@ -0,0 +1,7 @@
+
+export const DEF_MODAL_ALIAS = 'modal'
+export const DEF_DEBUG_ALIAS = 'debug'
+
+export const DEBUGGER_FLAG = 'debugger'
+export const DEBUG_CONFIG_KEY = 'debugger'
+

package/src/context.ts

@@ -0,0 +1,61 @@
+
+import { createContext, useContext as useCtx } from 'react'
+import type { Context as ReactContext } from 'react'
+import { makeClientContext as makeBasicContext, PLUGINS } from '@owlmeans/client-context'
+import type { ClientConfig } from '@owlmeans/client-context'
+import { AppType, CONFIG_RECORD, Layer } from '@owlmeans/context'
+import type { ClientContext } from './types.js'
+import { appendStateResource } from '@owlmeans/state'
+import { appendModalService } from './components/modal.js'
+import { appendDebugService } from './services/debug.js'
+import { appendConfigResource, PLUGIN_RECORD } from '@owlmeans/config'
+
+const defaultCfg: ClientConfig = {
+  services: {},
+  brand: {},
+  layer: Layer.Service,
+  trusted: [],
+  [CONFIG_RECORD]: [],
+  ready: false,
+  service: '',
+  debug: {},
+  type: AppType.Frontend,
+}
+
+export const makeClientContext = <C extends ClientConfig, T extends ClientContext<C> = ClientContext<C>>(cfg: C): T => {
+  const context = makeBasicContext(cfg) as T
+  appendStateResource<C, T>(context)
+  appendModalService<C, T>(context)
+  appendConfigResource<C, T>(context)
+  appendConfigResource<C, T>(context, PLUGINS, PLUGIN_RECORD)
+  appendDebugService<C, T>(context)
+
+  if (context.registerRerenderer == null) {
+    const rerenderers: CallableFunction[] = []
+    
+    context.registerRerenderer = listener => {
+      rerenderers.push(listener)
+      return () => {
+        const index = rerenderers.indexOf(listener)
+        if (index >= 0) {
+          rerenderers.splice(index, 1)
+        }
+      }
+    }
+    context.rerender = () => {
+      rerenderers.forEach(callback => callback())
+    }
+  }
+
+  context.makeContext = makeClientContext as typeof context.makeContext
+
+  return context
+}
+
+export const ClientContextContainer = createContext(makeClientContext(defaultCfg))
+
+export const Context = ClientContextContainer.Provider
+
+export const useContext = <C extends ClientConfig, T extends ClientContext<C>>() => useCtx<T>(
+  ClientContextContainer as unknown as ReactContext<T>
+)

package/src/debug.ts

@@ -0,0 +1,14 @@
+import type { ClientConfig } from '@owlmeans/client-context'
+import { DEBUG_CONFIG_KEY } from './consts.js'
+import type { ClientContext, DebugConfigRecord } from './types.js'
+
+export const appendStateDebug = <C extends ClientConfig, T extends ClientContext<C>>(ctx: T, state: string) => {
+  let debugRecord = ctx.cfg.records
+    .find(record => record.id === DEBUG_CONFIG_KEY) as DebugConfigRecord
+  if (debugRecord == null) {
+    debugRecord = { id: DEBUG_CONFIG_KEY }
+    ctx.cfg.records.push(debugRecord)
+  }
+  debugRecord.states = debugRecord.states ?? []
+  debugRecord.states.push(state)
+}

package/src/errors.ts

@@ -0,0 +1,44 @@
+
+import { ResilientError } from '@owlmeans/error'
+
+export class ClientError extends ResilientError {
+  public static override typeName: string = 'ClientError'
+
+  constructor(message: string = 'error') {
+    super(ClientError.typeName, `client:${message}`)
+  }
+}
+
+export class ComponentError extends ClientError {
+  public static override typeName: string = `${ClientError.typeName}Component`
+
+  constructor(message: string = 'error') {
+    super(`component:${message}`)
+    this.type = ComponentError.typeName
+  }
+}
+
+export class ComponentPropError extends ComponentError {
+  public static override typeName: string = `${ComponentError.typeName}Prop`
+
+  constructor(message: string = 'error') {
+    super(`prop:${message}`)
+    this.type = ComponentPropError.typeName
+  }
+}
+
+export class ComponentPropUndefined extends ComponentPropError {
+  public static override typeName: string = `${ComponentPropError.typeName}Undefined`
+
+  constructor(message: string = 'error') {
+    super(`undefined:${message}`)
+    this.type = ComponentPropUndefined.typeName
+  }
+}
+
+
+ResilientError.registerErrorClass(ClientError)
+ResilientError.registerErrorClass(ComponentError)
+ResilientError.registerErrorClass(ComponentPropError)
+ResilientError.registerErrorClass(ComponentPropUndefined)
+ResilientError.registerErrorClass(ComponentPropUndefined)

package/src/helper.tsx

@@ -0,0 +1,51 @@
+import type { AbstractRequest, AbstractResponse } from '@owlmeans/module'
+import type { ModuleContextParams, RoutedComponent, ClientContext } from './types.js'
+import type { RefedModuleHandler } from '@owlmeans/client-module'
+import { HandledRenderer } from './utils/route.js'
+import { isValidElement } from 'react'
+import type { PropsWithChildren } from 'react'
+import { ModuleContext } from './utils/module.js'
+import type { ClientConfig } from '@owlmeans/client-context'
+import { assertContext } from '@owlmeans/context'
+
+type Config = ClientConfig
+interface Context<C extends Config = Config> extends ClientContext<C> { }
+
+export const handler = <T extends {}>(
+  Component: HandledRenderer<T>, preprender?: boolean
+): RefedModuleHandler<T> => ref => <
+  R extends AbstractRequest = AbstractRequest,
+  P extends AbstractResponse<HandledRenderer<T>> = AbstractResponse<HandledRenderer<T>>
+>(req: R, res: P): any => {
+  const location = `client-handler:${ref.ref?.getAlias() ?? 'unknown'}`
+  if (ref.ref == null) {
+    throw new SyntaxError('Module reference is not provided')
+  }
+  const ctx = assertContext<Config, Context>(ref.ref.ctx as Context, location)
+  if (ctx == null) {
+    throw new SyntaxError('Module context is not provided')
+  }
+  if (isValidElement(Component)) {
+    res.resolve(Component)
+    return Component
+  }
+
+  if (preprender === true) {
+    const Renderer = Component as RendererType
+    const element = <Renderer {...req} context={ctx} />
+    res.resolve(element as HandledRenderer<T>)
+
+    return element
+  }
+
+  const Renderer: RoutedComponent = ({ children, ...props }) => {
+    const Renderer = Component as RendererType
+    return <ModuleContext.Provider value={props}>
+      <Renderer {...props}>{children}</Renderer>
+    </ModuleContext.Provider>
+  }
+
+  return Renderer
+}
+
+type RendererType = HandledRenderer<PropsWithChildren<ModuleContextParams>> & RoutedComponent

package/src/index.ts

@@ -0,0 +1,15 @@
+
+export * from './context.js'
+export * from './components/index.js'
+export * from './services/index.js'
+export * from './helper.js'
+export * from './navigate.js'
+export * from './module.js'
+export * from './router.js'
+export * from './types.js'
+export * from './store.js'
+export * from './value.js'
+export * from './consts.js'
+export * from './debug.js'
+export * from './app.js'
+export * from './errors.js'

package/src/module.ts

@@ -0,0 +1,6 @@
+
+import { useContext } from 'react'
+import { ModuleContext } from './utils/index.js'
+import type { ModuleContextParams } from './types.js'
+
+export const useModule = <T extends {} = {}>() => useContext(ModuleContext) as ModuleContextParams<T>

package/src/navigate.ts

@@ -0,0 +1,51 @@
+import { useMemo } from 'react'
+import { useLocation, useNavigate as useNav } from 'react-router'
+import type { Navigator } from './types.js'
+import { ModuleOutcome } from '@owlmeans/module'
+import { useContext } from './context.js'
+import type { ClientModule } from '@owlmeans/client-module'
+
+export const useNavigate = (): Navigator => {
+  const context = useContext()
+  const navigate = useNav()
+  const location = useLocation()
+  const navigator: Navigator = useMemo(() => {
+    const navigator: Navigator = {
+      _navigate: navigate,
+      
+      navigate: async (module, request) => {
+        const [url, ok] = await module.call(request)
+
+        if (ok === ModuleOutcome.Ok) {
+          navigate(url, {
+            state: {
+              ...module.route.route, silent: request?.silent
+            },
+            replace: request?.replace ?? false
+          })
+        }
+      },
+
+      go: async (alias, request) =>
+        navigator.navigate(context.module<ClientModule<string>>(alias), request),
+
+      press: (alias, request) => () => {
+        void navigator.go(alias, request)
+      },
+
+      back: async () => {
+        navigate(-1)
+      },
+
+      pressBack: () => () => {  
+        void navigator.back()
+      },
+
+      location: () => location
+    }
+
+    return navigator
+  }, [navigate])
+
+  return navigator
+}

package/src/router.ts

@@ -0,0 +1,78 @@
+import type { FC } from 'react'
+import type { RouterModel, RouterProps } from './types.js'
+import type { RouteObject } from 'react-router'
+import { createElement, useEffect, useRef, useState } from 'react'
+import { buildModuleTree, initializeRouter, visitModuleTree } from './utils/router.js'
+import { createRouteRenderer } from './utils/route.js'
+import { RouterProvider } from 'react-router'
+import type { Router as RemixRouter } from '@remix-run/router'
+import { useContext } from './context.js'
+import type { ClientConfig } from '@owlmeans/client-context'
+import type { ClientContext } from './types.js'
+import { assertContext } from '@owlmeans/context'
+import type { BasicConfig, BasicContext } from '@owlmeans/context'
+
+type Config = ClientConfig
+interface Context<C extends Config = Config> extends ClientContext<C> { }
+
+export const Router: FC<RouterProps> = ({ provide }) => {
+  const progress = useRef(false)
+  const context = useContext()
+
+  const [router, setRouter] = useState<RemixRouter>(
+    (typeof provide === 'function' ? undefined : provide) as RemixRouter
+  )
+  // @TODO We expect that this use memo will do the trick and we don't need to useEffect
+  // @TODO Show debug only in debug mode
+  useEffect(() => {
+    if (!progress.current && !context.cfg.ready) {
+      progress.current = true
+
+      if (typeof provide === 'function') {
+        initializeRouter(context as any).then(router => provide(router))
+          .then(routes => setRouter(routes))
+      }
+    }
+  }, [])
+
+  // @TODO We need to allow drawing something here :)
+  if (router == null) {
+    return undefined
+  }
+
+  return createElement(RouterProvider, { router })
+}
+
+export const makeRouterModel = (): RouterModel => {
+  const location = `client-router`
+  const model: RouterModel = {
+    routes: [],
+    resolve: async (ctx) => {
+      const context = assertContext<Config, Context>(ctx as Context, location)
+      const moduleTree = buildModuleTree(context as Context)
+
+      const reactRoutes: RouteObject[] = await visitModuleTree(moduleTree, async (module, children) => {
+        const ctx = assertContext<BasicConfig, BasicContext<BasicConfig>>(
+          (module.ctx ?? context) as BasicContext<BasicConfig>, location
+        )
+        await module.route.resolve(ctx)
+
+        const renderer = module.handle != null
+          ? { Component: createRouteRenderer({ context, module, hasChildren: children.length > 0 }) }
+          : undefined
+
+        const route: RouteObject = {
+          ...(module.route.route.default ? { index: true } as any : undefined),
+          ...(!module.route.route.default ? { path: module.getPath(true), children } : undefined),
+          ...renderer
+        }
+
+        return route
+      })
+
+      return model.routes = reactRoutes
+    }
+  }
+
+  return model
+}