@variousjs/various 5.1.5 → 5.2.1

package/index.d.ts

@@ -6,7 +6,14 @@ declare module '@variousjs/various' {
 
   export { default as Nycticorax, Dispatch } from 'nycticorax'
 
-  export interface ModuleDefined { name: string, module?: string }
+  /**
+  * module name
+  * - e.g. A.B
+  * - e.g. B
+  * - e.g. app
+  * - e.g. A.default -> A
+  */
+  export type ModuleDef = string
 
   export type ObjectRecord<T = any> = Record<string, T>
 
@@ -25,31 +32,90 @@ declare module '@variousjs/various' {
     'DISPATCH' |
     'I18N' | (string & {})
 
-  export interface ComponentDefaultProps {
+  export interface ComponentDefaultProps<Ref = unknown> {
     $silent?: boolean,
     /**
      * for React Component only
      */
-    $ref?: RefObject<unknown>,
+    $ref?: RefObject<Ref>,
     [k: string]: any,
   }
 
   export interface VariousError extends Error {
     type: ErrorType,
     originalError: Error,
-    module?: ModuleDefined['module'],
-    name: ModuleDefined['name'],
+    module: ModuleDef,
   }
 
-  interface Message { event: string, value: any, trigger: ModuleDefined }
+  interface ActionDef {
+    payload: any,
+    result: any,
+  }
 
-  type $dispatch = (args: ModuleDefined & {
-    action: string,
-    value?: any,
-  }) => Promise<any>
-  type $postMessage = (event: string, value?: any) => void
+  interface MessageDef {
+    payload: any,
+  }
+
+  export type PublicAction<A extends ActionDef = never> = (params: {
+    payload: [A] extends [never] ? any : A['payload'],
+    trigger: ModuleDef,
+  }) => [A] extends [never] ? any : A['result']
+
+  type PublicActionDef = Record<string, ActionDef>
+
+  type MessagesDef = Record<string, MessageDef>
 
-  interface $logger {
+  export type DefineActions<T extends PublicActionDef> = T
+
+  export type DefineMessages<T extends MessagesDef> = T
+
+  interface Message<T extends MessagesDef = never> {
+    event: [T] extends [never] ? string : keyof T,
+    payload: [T] extends [never] ? any : T[keyof T]['payload'],
+    trigger: ModuleDef,
+  }
+
+  export type StaticMethods<T extends PublicActionDef = never> =
+    [T] extends [never]
+      ? Record<string, (params: { payload: any, trigger: ModuleDef }) => any>
+      : {
+        [K in keyof T]: T[K] extends { payload: infer V, result: infer R }
+        ? (params: { payload?: V, trigger: ModuleDef }) => R
+        : never
+      }
+
+  export type ComponentStatics<S extends PublicActionDef = never, T extends MessagesDef = never> = {
+    $i18n?: I18n,
+    $onMessage?: OnMessage<T>,
+  } & StaticMethods<S>
+
+  type ComponentPublicActionMap = {
+    [name: string]: PublicActionDef,
+  }
+
+  type $dispatch<M extends ComponentPublicActionMap = never> = [M] extends [never]
+    ? {
+      (params: {
+        target: string,
+        action: string,
+        payload?: any,
+      }): Promise<any>
+    }
+    : {
+      <T extends keyof M, A extends keyof M[T]>(
+        params: {
+          target: T,
+          action: A,
+          payload?: M[T][A]['payload'],
+        }
+      ): Promise<M[T][A]['result']>
+    }
+
+  type $postMessage<T extends MessagesDef = never> = [T] extends [never]
+    ? (params: { event: string, payload?: any }) => void
+    : <K extends keyof T>(params: { event: K, payload?: T[K]['payload'] }) => void
+
+  type $logger = {
     info: (message: any, type?: string) => void,
     warn: (message: any, type?: string) => void,
     error: (message: any, type?: string) => void,
@@ -63,17 +129,19 @@ declare module '@variousjs/various' {
     update: (config: Partial<I18nConfig>, type?: 'app') => void,
   }
 
-  interface ComponentBuiltinProps<S extends object = ObjectRecord> {
-    $store: Readonly<S>,
-    $dispatch: $dispatch,
-    $postMessage: $postMessage,
+  interface ComponentBuiltinProps<
+    Store extends object = ObjectRecord,
+    Messages extends MessagesDef = never,
+    Actions extends ComponentPublicActionMap = never
+  > {
+    $store: Readonly<Store>,
+    $dispatch: $dispatch<Actions>,
+    $postMessage: $postMessage<Messages>,
     $t: Intl,
     $logger: $logger,
-    $self: ModuleDefined & { url: string },
+    $self: { url: string, module: ModuleDef },
   }
 
-  export type PublicAction = (value: any, trigger: ModuleDefined) => any
-
   export interface I18nConfig {
     /** app store key */
     lngStoreKey: string,
@@ -82,39 +150,40 @@ declare module '@variousjs/various' {
 
   export type I18n = () => I18nConfig | Promise<I18nConfig>
 
-  export type OnMessage = (message: Message) => void
+  export type OnMessage<T extends MessagesDef = never> = (message: Message<T>) => void
 
-  export interface StaticProps {
-    $i18n?: I18n,
-    $onMessage?: OnMessage,
-    [x: string]: PublicAction,
-  }
+  export type VariousProps<
+    Props extends object = ObjectRecord,
+    Store extends object = ObjectRecord,
+    Messages extends MessagesDef = never,
+    Actions extends ComponentPublicActionMap = never
+  > = ComponentBuiltinProps<Store, Messages, Actions> & Props
 
-  export type ComponentProps<
-    S extends object = ObjectRecord,
-    P extends object = ObjectRecord
-  > = ComponentBuiltinProps<S> & P
+  export type VariousFC<
+    Props extends object = ObjectRecord,
+    Store extends object = ObjectRecord,
+    SelfActions extends PublicActionDef = never,
+    Messages extends MessagesDef = never,
+    Actions extends ComponentPublicActionMap = never
+  > = FC<VariousProps<Props, Store, Messages, Actions>> & ComponentStatics<SelfActions, Messages>
 
-  export type ComponentNode<
-    S extends object = {},
-    P extends object = {}
-  > = FC<ComponentProps<S, P>> & StaticProps
-
-  export interface ErrorFallbackProps<S extends object = ObjectRecord> {
+  export interface ErrorFallbackProps<Store extends object = ObjectRecord> {
     $reload: () => void,
     $error: VariousError,
-    $store: Readonly<S>,
-    $self: ModuleDefined & { url?: string },
+    $store: Readonly<Store>,
+    $self: { url: string, module: ModuleDef },
   }
   export type ErrorFallbackNode<
-    S extends object = ObjectRecord
-  > = ComponentType<ErrorFallbackProps<S>>
+    Store extends object = ObjectRecord
+  > = ComponentType<ErrorFallbackProps<Store>>
 
-  export interface FallbackProps<S extends object = ObjectRecord> {
-    $store: Readonly<S>,
-    $self: ModuleDefined & { url?: string },
+  export interface FallbackProps<Store extends object = ObjectRecord> {
+    $store: Readonly<Store>,
+    $self: { url: string, module: ModuleDef },
   }
-  export type FallbackNode<S extends object = ObjectRecord> = ComponentType<FallbackProps<S>>
+  export type FallbackNode<
+    Store extends object = ObjectRecord
+  > = ComponentType<FallbackProps<Store>>
 
   type Dispatch<T extends object = ObjectRecord> = (
     nycticorax: {
@@ -122,31 +191,33 @@ declare module '@variousjs/various' {
         K extends keyof T ? T[K] : T,
       emit: (next: Partial<T>) => void,
     },
-    value: any,
-    trigger: ModuleDefined,
+    payload: any,
+    trigger: ModuleDef,
   ) => Promise<any>
 
   interface MessageEventArgs {
-    trigger: ModuleDefined,
+    trigger: ModuleDef,
     event: string,
-    value?: any,
+    payload?: any,
   }
   type MessageEventRes = boolean | Omit<MessageEventArgs, 'trigger'>
   interface DispatchEventArgs {
-    target: ModuleDefined,
-    trigger: ModuleDefined,
+    target: ModuleDef,
+    trigger: ModuleDef,
     action: string,
-    value?: any,
+    payload?: any,
   }
   type DispatchEventRes = boolean | Omit<DispatchEventArgs, 'trigger'>
-  interface LoadEventArgs extends ModuleDefined {
+  interface LoadEventArgs {
+    module: ModuleDef,
     loadStart: number,
     loadEnd: number,
     beenLoaded: boolean,
   }
 
   type LogLevel = 'info' | 'warn' | 'error'
-  interface LogArgs extends ModuleDefined {
+  interface LogArgs {
+    module: ModuleDef,
     level: LogLevel,
     type?: string,
     message: any,
@@ -158,11 +229,11 @@ declare module '@variousjs/various' {
   export type ErrorEvent = (e: VariousError) => void
   export type LogEvent = (e: LogArgs) => boolean
 
-  export interface App<S extends object = ObjectRecord> {
-    store?: readonly S,
-    ErrorFallback?: ErrorFallbackNode<S>,
-    Fallback?: FallbackNode<S>,
-    actions?: Record<string, Dispatch<S>>,
+  export interface App<Store extends object = ObjectRecord> {
+    store?: Store,
+    ErrorFallback?: ErrorFallbackNode<Store>,
+    Fallback?: FallbackNode<Store>,
+    actions?: Record<string, Dispatch<Store>>,
     Root: ComponentType,
     middlewares?: {
       onLoad?: LoadEvent,
@@ -181,53 +252,74 @@ declare module '@variousjs/various' {
       react?: string,
       'react-dom'?: string,
       vue?: string,
-      [x: string]: string,
-    },
+    } & Record<string, string>,
     root?: string,
     timeout?: number,
     earlyParallelDependencies?: string[],
   }
 
   export function createComponent<
-    S extends object = ObjectRecord,
-    P extends object = ObjectRecord
+    Props extends object = ObjectRecord,
+    Ref = unknown,
+    Store extends object = ObjectRecord
   >(
-    config: ModuleDefined & {
+    config: {
       url?: string,
       type?: VariousComponentType,
+      module: ModuleDef,
     },
-    storeKeys?: (keyof S)[],
-  ): ComponentType<ComponentDefaultProps & P>
+    /**
+    * set store keys if component created before store initialization
+    */
+    storeKeys?: (keyof Store)[],
+  ): ComponentType<ComponentDefaultProps<Ref> & Props>
 
-  export function createModule<T = unknown> (params: ModuleDefined & {
+  export function createModule<T = unknown> (params: {
     url?: string,
+    module: ModuleDef,
   }, logError?: boolean): Promise<T>
 
-  export function renderComponent<P extends object = ObjectRecord>(params: ModuleDefined & {
+  export function renderComponent<
+    Props extends object = ObjectRecord
+  >(params: {
+    module: ModuleDef,
     url?: string,
     type?: VariousComponentType,
-    props?: P & ComponentDefaultProps,
+    props?: Props & ComponentDefaultProps,
     target: Element | null,
     renderNode?: (children: ReactNode) => ReactNode,
     onMounted?: () => void,
   }): Promise<() => Promise<void>>
 
-  export type VueVarious<S extends object = ObjectRecord> = PropType<ComponentBuiltinProps<S>>
+  export type VariousComponentProps<
+    Store extends object = ObjectRecord,
+    Messages extends MessagesDef = never,
+    Actions extends ComponentPublicActionMap = never,
+  > = PropType<ComponentBuiltinProps<Store, Messages, Actions>>
 
-  export const isModuleLoaded: (name: string) => boolean
-  export const removeLoadedModules: (names: string[]) => void
-  export const getMountedComponents: () => ModuleDefined[]
-  export const preloadModules: (name: string[]) => Promise<void>
+  export const isModuleLoaded: (module: ModuleDef) => boolean
+  export const removeLoadedModules: (modules: ModuleDef[]) => void
+  export const getMountedComponents: () => ModuleDef[]
+  export const preloadModules: (modules: ModuleDef[]) => Promise<void>
   export const onComponentMounted: (
-    name: ModuleDefined | ModuleDefined[], callback: () => void
+    module: ModuleDef | ModuleDef[],
+    callback: () => void
   ) => (() => void) | void
   export const defineDependencies: (deps: Record<string, string>) => void
 
   export const version: string
   export function getConfig<C extends object = ObjectRecord>(): C
-  export function getStore<S extends object = ObjectRecord>(): S
-
-  export const createDispatch: (m: ModuleDefined) => $dispatch
-  export const createPostMessage: (m: ModuleDefined) => $postMessage
-  export const createLogger: (m: ModuleDefined) => $logger
+  export function getStore<Store extends object = ObjectRecord>(): Store
+
+  export const createDispatch: <M extends ComponentPublicActionMap = never>(
+    module: ModuleDef,
+  ) => $dispatch<M>
+  export const createPostMessage: <Messages extends MessagesDef = never>(
+    module: ModuleDef
+  ) => $postMessage<Messages>
+  export const createLogger: (module: ModuleDef) => $logger
+  export const getModuleInfo: (module: ModuleDef) => {
+    name: string,
+    entry?: string,
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@variousjs/various",
-  "version": "5.1.5",
+  "version": "5.2.1",
   "description": "RequireJS(AMD) + React",
   "files": [
     "dist",
@@ -35,23 +35,24 @@
   },
   "nyc": {
     "exclude": [
-      "test/*"
+      "test/*",
+      "cypress/*"
     ],
     "excludeAfterRemap": true
   },
   "scripts": {
-    "lint": "tsc --noemit && eslint . --ext .ts,.tsx,.js",
-    "create-empty": "touch docs/dist/empty.js",
+    "lint": "tsc --noemit --skipLibCheck && eslint . --ext .ts,.tsx,.js",
+    "create-empty": "touch public/dist/empty.js",
     "test-components": "webpack --config webpack/test-components.js",
     "test-components:build": "NODE_ENV=production webpack --config webpack/test-components.js --progress",
     "package-core": "webpack --config webpack/package-core.js",
     "package-core:build": "NODE_ENV=production webpack --config webpack/package-core.js --progress",
     "entry": "webpack serve --config webpack/entry.js --no-client-overlay",
     "entry:build": "NODE_ENV=production webpack --config webpack/entry.js --progress",
-    "prestart": "mkdir -p docs/dist && npm run create-empty",
+    "prestart": "mkdir -p public/dist && npm run create-empty",
     "start": "npm run test-components & npm run package-core & npm run entry",
     "build": "npm run test-components:build && npm run package-core:build && npm run entry:build",
-    "prebuild": "npm run lint && rm -rf dist && rm -rf docs/dist",
+    "prebuild": "npm run lint && rm -rf dist && rm -rf public/dist",
     "postbuild": "npm run create-empty",
     "prepublishOnly": "npm run build",
     "cy:run": "rm -rf .nyc_output && cypress run",
@@ -74,43 +75,47 @@
   },
   "homepage": "https://github.com/variousjs/various#readme",
   "devDependencies": {
-    "@babel/core": "^7.18.10",
-    "@babel/plugin-transform-runtime": "^7.18.10",
-    "@babel/preset-env": "^7.22.9",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@babel/runtime": "^7.28.2",
-    "@cypress/code-coverage": "^3.10.0",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
+    "@babel/core": "^7.28.5",
+    "@babel/plugin-transform-runtime": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@babel/runtime": "^7.28.4",
+    "@cypress/code-coverage": "^3.14.7",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "@types/react-router-dom": "^5.3.3",
     "@types/requirejs": "^2.1.34",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
     "@vue/compiler-sfc": "^3.5.22",
-    "babel-loader": "^8.2.5",
-    "babel-plugin-istanbul": "^6.1.1",
-    "cypress": "^9.7.0",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-import-resolver-typescript": "^2.7.1",
-    "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.30.1",
+    "babel-loader": "^10.0.0",
+    "babel-plugin-istanbul": "^7.0.1",
+    "cypress": "^15.8.1",
+    "eslint": "^8.57.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "start-server-and-test": "^2.0.3",
-    "typescript": "^4.9.5",
+    "typescript": "^5.3.3",
     "vue": "^3.5.21",
-    "vue-loader": "^17.3.1",
-    "webpack": "^5.101.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.3"
+    "vue-loader": "^17.4.2",
+    "webpack": "^5.104.1",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
   },
   "dependencies": {
     "@variousjs/requirejs": "0.0.2",
-    "nycticorax": "^4.1.4"
+    "nycticorax": "^4.2.0"
+  },
+  "overrides": {
+    "qs": "6.14.1",
+    "js-yaml": "4.1.1"
   }
 }

package/standalone.d.ts

@@ -3,10 +3,8 @@ declare module '@variousjs/various/standalone' {
   import {
     VariousComponentType,
     ObjectRecord,
-    ModuleDefined,
-    FallbackNode,
-    ErrorFallbackNode,
-    Dispatch,
+    ModuleDef,
+    App,
   } from '@variousjs/various'
 
   export {
@@ -17,33 +15,42 @@ declare module '@variousjs/various/standalone' {
 
   export type DependencyType = string | object | Function
 
-  export function createComponent<P extends object = ObjectRecord>(
-    config: ModuleDefined & {
+  export function createComponent<
+    Props extends object = ObjectRecord,
+    Ref = unknown,
+    Store extends object = ObjectRecord
+  >(
+    config: {
+      module: ModuleDef,
       url: string,
       type?: VariousComponentType,
       dependencies?: Partial<Record<
         string,
         DependencyType
       >>,
-      storeKeys?: string[],
+      /**
+      * set store keys if component created before store initialization
+      */
+      storeKeys?: (keyof Store)[],
     },
-  ): ComponentType<P & {
+  ): ComponentType<Props & {
     /**
      * for React Component only
      */
-    $ref?: RefObject<unknown>,
+    $ref?: RefObject<Ref>,
   }>
 
-   export function createAppConfig<S extends object = ObjectRecord>(
-    config: {
-      dependencies: Partial<Record<
-        string,
-        DependencyType
-      >>,
-      store?: S,
-      actions?: Record<string, Dispatch<S>>,
-      fallback?: FallbackNode<S>,
-      errorFallback?: ErrorFallbackNode<S>,
-    },
+  export type AppConfig<Store extends object = ObjectRecord> = Pick<
+    App<Store>,
+    'actions' | 'store' | 'Fallback' | 'ErrorFallback'
+  > & {
+    dependencies: Partial<Record<
+      string,
+      DependencyType
+    >>
+  }
+
+  export function createAppConfig<Store extends object = ObjectRecord>(
+    config: AppConfig<Store>
   ): void
 }