@variousjs/various 4.3.0 → 5.0.0

package/index.d.ts

@@ -5,6 +5,12 @@ declare module '@variousjs/various' {
 
   export { default as Nycticorax, Dispatch } from 'nycticorax'
 
+  export interface ModuleDefined { name: string, module?: string }
+
+  export type ObjectRecord<T = any> = Record<string, T>
+
+  export type VariousComponentType = 'react' | 'vue3'
+
   export type ErrorType =
     'LOADING_ERROR' |
     'SUBMODULE_LOADING_ERROR' |
@@ -20,20 +26,20 @@ declare module '@variousjs/various' {
 
   export interface ComponentDefaultProps {
     $silent?: boolean,
+    /**
+     * for React Component only
+     */
     $ref?: RefObject<unknown>,
+    [k: string]: any,
   }
 
   export interface VariousError extends Error {
     type: ErrorType,
     originalError: Error,
-    module?: string,
-    name: string,
+    module?: ModuleDefined['module'],
+    name: ModuleDefined['name'],
   }
 
-  type ObjectAny = Record<string, any>
-
-  export interface ModuleDefined { name: string, module?: string }
-
   interface Message { event: string, value: any, trigger: ModuleDefined }
 
   type $dispatch = (args: ModuleDefined & {
@@ -48,16 +54,19 @@ declare module '@variousjs/various' {
     error: (message: any, type?: string) => void,
   }
 
-  export type Intl = (
+  export type Intl = ((
     key: string,
     paramsOrDefaultText?: Record<string, string | number> | string,
     defaultText?: string,
-  ) => string
+  ) => string) & {
+    update: (config: Partial<I18nConfig>, type?: 'app') => void,
+  }
 
   export type PublicAction = (value: any, trigger: ModuleDefined) => any
 
   export interface I18nConfig {
-    localeKey: string,
+    /** app store key */
+    lngStoreKey: string,
     resources: Record<string, Record<string, string>>,
   }
 
@@ -72,8 +81,8 @@ declare module '@variousjs/various' {
   }
 
   export type ComponentProps<
-    S extends object = {},
-    P extends object = {}
+    S extends object = ObjectRecord,
+    P extends object = ObjectRecord
   > = {
     $store: Readonly<S>,
     $dispatch: $dispatch,
@@ -87,23 +96,23 @@ declare module '@variousjs/various' {
     P extends object = {}
   > = FC<ComponentProps<S, P>> & StaticProps
 
-  export interface ErrorNodeProps<S extends object = ObjectAny> {
-    $reload?: () => void,
+  export interface ErrorNodeProps<S extends object = ObjectRecord> {
+    $reload: () => void,
     $error: VariousError,
     $store: Readonly<S>,
-    $name: string,
-    $module?: string,
+    $name: ModuleDefined['name'],
+    $module?: ModuleDefined['module'],
   }
-  export type ErrorNode<S extends object = ObjectAny> = ComponentType<ErrorNodeProps<S>>
+  export type ErrorNode<S extends object = ObjectRecord> = ComponentType<ErrorNodeProps<S>>
 
-  export interface LoaderNodeProps<S extends object = ObjectAny> {
+  export interface LoaderNodeProps<S extends object = ObjectRecord> {
     $store: Readonly<S>,
-    $name: string,
-    $module?: string,
+    $name: ModuleDefined['name'],
+    $module?: ModuleDefined['module'],
   }
-  export type LoaderNode<S extends object = ObjectAny> = ComponentType<LoaderNodeProps<S>>
+  export type LoaderNode<S extends object = ObjectRecord> = ComponentType<LoaderNodeProps<S>>
 
-  type Dispatch<T extends object = ObjectAny> = (
+  type Dispatch<T extends object = ObjectRecord> = (
     nycticorax: {
       getStore: <K extends keyof T | undefined = undefined>(k?: K | undefined) =>
         K extends keyof T ? T[K] : T,
@@ -145,7 +154,7 @@ declare module '@variousjs/various' {
   export type ErrorEvent = (e: VariousError) => void
   export type LogEvent = (e: LogArgs) => boolean
 
-  export interface App<S extends object = ObjectAny> {
+  export interface App<S extends object = ObjectRecord> {
     store?: readonly S,
     Error?: ErrorNode<S>,
     Loader?: LoaderNode<S>,
@@ -167,6 +176,7 @@ declare module '@variousjs/various' {
       '@variousjs/various'?: string,
       react?: string,
       'react-dom'?: string,
+      vue?: string,
       [x: string]: string,
     },
     root?: string,
@@ -175,36 +185,45 @@ declare module '@variousjs/various' {
   }
 
   export function createComponent<
-    S extends object = ObjectAny,
-    P extends object = ObjectAny
+    S extends object = ObjectRecord,
+    P extends object = ObjectRecord
   >(
-    config: ModuleDefined & { url?: string },
+    config: ModuleDefined & { url?: string, type?: VariousComponentType },
     storeKeys?: (keyof S)[],
   ): ComponentType<ComponentDefaultProps & P>
 
   export function createModule<T = unknown> (params: ModuleDefined & {
     url?: string,
-  }): Promise<T>
+  }, logError?: boolean): Promise<T>
 
-  export function renderComponent<P extends object = ObjectAny>(params: ModuleDefined & {
+  export function renderComponent<P extends object = ObjectRecord>(params: ModuleDefined & {
     url?: string,
+    type?: VariousComponentType,
     props?: P & ComponentDefaultProps,
     target: Element | null,
     renderNode?: (children: ReactNode) => ReactNode,
     onMounted?: () => void,
   }): () => Promise<void>
 
-  export const isDependencyLoaded: (name: string) => boolean
+  export interface VueVarious<S extends object = ObjectRecord> {
+    $dispatch: $dispatch,
+    $logger: $logger,
+    $postMessage: $postMessage,
+    $t: Intl,
+    $store: Readonly<S>,
+  }
+
+  export const isModuleLoaded: (name: string) => boolean
   export const getMountedComponents: () => ModuleDefined[]
-  export const preloadDependencies: (name: string | string[]) => Promise<void>
+  export const preloadModules: (name: string | string[]) => Promise<void>
   export const onComponentMounted: (
     name: ModuleDefined | ModuleDefined[], callback: () => void
-  ) => () => void
+  ) => (() => void) | void
   export const defineDependencies: (deps: Record<string, string>) => void
 
   export const version: string
-  export function getConfig<C extends object = ObjectAny>(): C
-  export function getStore<S extends object = ObjectAny>(): S
+  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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@variousjs/various",
-  "version": "4.3.0",
+  "version": "5.0.0",
   "description": "RequireJS(AMD) + React",
   "files": [
     "dist",
@@ -19,10 +19,11 @@
   "types": "index.d.ts",
   "scripts": {
     "lint": "tsc --noemit && eslint . --ext .ts,.tsx,.js",
-    "prestart": "mkdir -p public/dist && cp public/empty.js public/dist/empty.js",
+    "prestart": "mkdir -p docs/dist && touch docs/dist/empty.js",
     "start": "webpack --config webpack/components.js --progress & webpack serve --config webpack/index.js --progress --no-client-overlay",
-    "prebuild": "npm run lint",
-    "build": "rm -rf dist && NODE_ENV=production webpack --config webpack/index.js --progress",
+    "prebuild": "npm run lint && rm -rf dist && rm -rf docs/dist",
+    "build": "NODE_ENV=production webpack --config webpack/components.js --progress && NODE_ENV=production webpack --config webpack/index.js --progress",
+    "postbuild": "cp dist/* docs/dist/ && touch docs/dist/empty.js",
     "cy:run": "rm -rf .nyc_output && cypress run",
     "ci": "start-server-and-test start http://127.0.0.1:2333 cy:run",
     "cypress": "cypress open"
@@ -56,6 +57,7 @@
     "@types/requirejs": "^2.1.34",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
+    "@vue/compiler-sfc": "^3.5.22",
     "babel-loader": "^8.2.5",
     "babel-plugin-istanbul": "^6.1.1",
     "cypress": "^9.7.0",
@@ -69,6 +71,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "start-server-and-test": "^2.0.3",
     "typescript": "^4.9.5",
+    "vue": "^3.5.21",
+    "vue-loader": "^17.3.1",
     "webpack": "^5.101.0",
     "webpack-bundle-analyzer": "^4.6.1",
     "webpack-cli": "^4.10.0",