feat(resolveConfig)!: add option options.camelizePropNames, move props to options.props

Author: cloydlau

README.md

@@ -190,13 +190,16 @@ Get global props, attrs, listeners & hooks by analysing global parameters passed
 
 ```ts
 /**
- * @param {object} globalConfig - global parameters
- * @param {string[] | object} [localProps] - local props, for the purpose of differentiating between props and attrs
+ * @param {Record<keyof any, any>} globalConfig - global parameters
+ * @param {Record<keyof any, any>} [options] - Options
+ * @param {string[] | Record<keyof any, any>} [options.props = []] - local props, for the purpose of differentiating between props and attrs
+ * @param {boolean} [options.camelizePropNames = false] - whether to camelize prop names
  * @returns {{
- *   props: object,
- *   attrs: object,
- *   listeners: object,
- *   hooks: object
+ *   props: Record<keyof any, any>,
+ *   attrs: Record<keyof any, any>,
+ *   listeners: Record<string, (...args: any) => unknown>,
+ *   hooks: Record<string, (...args: any) => unknown>
+ *   slots: Record<string, (...args: any) => unknown>
  * }} global props, attrs, listeners & hooks
  */
 ```
@@ -215,6 +218,7 @@ resolveConfig({
   'placeholder': 'some attr',
   '@blur': function () {},
   '@hook:mounted': function () {},
+  '#left-footer': () => h('Fragment', undefined, 'Global Slot'),
 })
 ```
 
@@ -247,17 +251,17 @@ The role of `conclude` is to help you figure out the final configuration.
 ```ts
 /**
  * @param {any[]} configSequence - Config sequence (priority from highest to lowest, last is the default value)
- * @param {object} [config] - Configuration
- * @param {PropType<any>} [config.type] - Data type checking
- * @param {any} [config.default] - Default value (explicit)
- * @param {boolean} [config.defaultIsDynamic = false] - Dynamic generation of default values
- * @param {boolean} [config.required = false] - Requirement checking
- * @param {Function} [config.validator] - Custom validator
- * @param {string} [config.camelizeObjectKeys = false] - Whether or not to camelize object keys
- * @param {false|string} [config.mergeObject = 'deep'] - The way to merge objects
- * @param {boolean} [config.mergeObjectApplyOnlyToDefault = false] - `mergeObject` only works on `default`
- * @param {false|((accumulator, currentValue, index?, array?) => )} [config.mergeFunction = false] - The way to fuse functions
- * @param {boolean} [config.mergeFunctionApplyOnlyToDefault = true] - `mergeFunction` only works on `default`
+ * @param {Record<keyof any, any>} [options] - Options
+ * @param {PropType<any>} [options.type] - Data type checking
+ * @param {any} [options.default] - Default value (explicit)
+ * @param {boolean} [options.defaultIsDynamic = false] - Dynamic generation of default values
+ * @param {boolean} [options.required = false] - Requirement checking
+ * @param {(prop: any) => boolean} [options.validator] - Custom validator
+ * @param {string} [options.camelizeObjectKeys = false] - whether to camelize object keys
+ * @param {false|string} [options.mergeObject = 'deep'] - The way to merge objects
+ * @param {boolean} [options.mergeObjectApplyOnlyToDefault = false] - `mergeObject` only works on `default`
+ * @param {false|((accumulator, currentValue, index?, array?) => )} [options.mergeFunction = false] - The way to fuse functions
+ * @param {boolean} [options.mergeFunctionApplyOnlyToDefault = true] - `mergeFunction` only works on `default`
  * @returns {any} Final prop
  */
 ```

demo/vue2.7/YourComponent/index.ts

@@ -4,7 +4,7 @@ import Component from './Component.vue'
 
 type SFCWithInstall<T> = T & Plugin & { install: typeof install }
 
-function withInstall<T, E extends Record<string, any>>(main: T, extra?: E) {
+function withInstall<T, E extends Record<keyof any, any>>(main: T, extra?: E) {
   (main as SFCWithInstall<T>).install = (app): void => {
     for (const comp of [main, ...Object.values(extra ?? {})]) {
       app?.component(comp.name, comp)
@@ -19,11 +19,11 @@ function withInstall<T, E extends Record<string, any>>(main: T, extra?: E) {
   return main as SFCWithInstall<T> & E
 }
 
-const globalProps: Record<string, any> = {}
-const globalAttrs: Record<string, any> = {}
-const globalListeners: Record<string, any> = {}
-const globalHooks: Record<string, any> = {}
-const globalSlots: Record<string, any> = {}
+const globalProps: Record<keyof any, any> = {}
+const globalAttrs: Record<keyof any, any> = {}
+const globalListeners: Record<keyof any, any> = {}
+const globalHooks: Record<keyof any, any> = {}
+const globalSlots: Record<keyof any, any> = {}
 
 const ComponentWithInstall = withInstall(Component)
 

demo/vue3/YourComponent/index.ts

@@ -4,7 +4,7 @@ import Component from './Component.vue'
 
 type SFCWithInstall<T> = T & Plugin & { install: typeof install }
 
-function withInstall<T, E extends Record<string, any>>(main: T, extra?: E) {
+function withInstall<T, E extends Record<keyof any, any>>(main: T, extra?: E) {
   (main as SFCWithInstall<T>).install = (app): void => {
     for (const comp of [main, ...Object.values(extra ?? {})]) {
       app?.component(comp.name, comp)
@@ -19,11 +19,11 @@ function withInstall<T, E extends Record<string, any>>(main: T, extra?: E) {
   return main as SFCWithInstall<T> & E
 }
 
-const globalProps: Record<string, any> = {}
-const globalAttrs: Record<string, any> = {}
-const globalListeners: Record<string, any> = {}
-const globalHooks: Record<string, any> = {}
-const globalSlots: Record<string, any> = {}
+const globalProps: Record<keyof any, any> = {}
+const globalAttrs: Record<keyof any, any> = {}
+const globalListeners: Record<keyof any, any> = {}
+const globalHooks: Record<keyof any, any> = {}
+const globalSlots: Record<keyof any, any> = {}
 
 const ComponentWithInstall = withInstall(Component)
 

src/conclude.ts

@@ -148,7 +148,7 @@ function MergeFunction(
 
 export default function conclude(
   configSequence: any[],
-  config: {
+  options: {
     type?: PropType<any>
     default?: any
     defaultIsDynamic?: boolean
@@ -172,9 +172,9 @@ export default function conclude(
     camelizeObjectKeys = false,
     mergeObjectApplyOnlyToDefault = false,
     mergeFunctionApplyOnlyToDefault = true,
-  } = config
+  } = options
 
-  let { mergeObject = MergeObjectOptions.deep, mergeFunction = false } = config
+  let { mergeObject = MergeObjectOptions.deep, mergeFunction = false } = options
 
   const configSequenceCopy: any[] = []
   let result: any
@@ -214,7 +214,7 @@ export default function conclude(
     configSequenceCopy.push(handleProp(defaultValue))
   } else if (!(typeof defaultValue === 'function')) {
     throw new TypeError(
-      `Invalid option: config.default should be Function when config.defaultIsDynamic enabled, receiving: ${defaultValue}`,
+      `Invalid option: options.default should be Function when options.defaultIsDynamic enabled, receiving: ${defaultValue}`,
     )
   }
 
@@ -270,7 +270,7 @@ export default function conclude(
 
   if (defaultIsDynamic) {
     return conclude(configSequence, {
-      ...config,
+      ...options,
       default: defaultValue(result),
       defaultIsDynamic: false,
     })

src/getLocalListeners.ts

@@ -1,15 +1,15 @@
 function objectFilter(
-  obj: Record<string, any>,
+  obj: Record<keyof any, any>,
   predicate: (key: string) => boolean,
-): Record<string, any> {
+): Record<keyof any, any> {
   return Object.keys(obj)
     .filter(key => predicate(key))
-    .reduce((prev: Record<string, any>, curr) => {
+    .reduce((prev: Record<keyof any, any>, curr) => {
       prev[curr] = obj[curr]
       return prev
     }, {})
 }
 
-export default function getLocalListeners(listeners: Record<string, any>) {
+export default function getLocalListeners(listeners: Record<keyof any, any>) {
   return objectFilter(listeners, key => !key.startsWith('hook:'))
 }

src/listenGlobalHooks.ts

@@ -6,7 +6,7 @@ import type { ComponentPublicInstance } from 'vue-demi'
 
 export default function listenGlobalHooks(
   this: ComponentPublicInstance,
-  globalHooks: Record<string, any>,
+  globalHooks: Record<keyof any, any>,
 ) {
   if (Object.getOwnPropertyNames(globalHooks || {}).length) {
     const originalEmit = this.$emit

src/resolveConfig.ts

@@ -9,16 +9,22 @@ function atToOn(eventName: string) {
 }
 
 interface ResolvedResult {
-  props: Record<string, any>
-  attrs: Record<string, any>
+  props: Record<keyof any, any>
+  attrs: Record<keyof any, any>
   listeners: Record<string, (...args: any) => unknown>
   hooks: Record<string, (...args: any) => unknown>
   slots: Record<string, (...args: any) => unknown>
 }
 
 export default function resolveConfig(
-  config: Record<string, any>,
-  props: string[] | Record<string, any> = [],
+  config: Record<keyof any, any>,
+  {
+    props = [],
+    camelizePropNames = false,
+  }: {
+    props?: string[] | Record<keyof any, any>
+    camelizePropNames?: boolean
+  } = {},
 ): ResolvedResult {
   const res: ResolvedResult = {
     props: {},
@@ -28,7 +34,17 @@ export default function resolveConfig(
     slots: {},
   }
 
-  const propsList = (Array.isArray(props) ? props : Object.keys(props)).map(v => kebabToCamel(v))
+  let propsList
+  if (Array.isArray(props)) {
+    propsList = camelizePropNames ? props.map(v => kebabToCamel(v)) : props
+  } else if (camelizePropNames) {
+    propsList = []
+    for (const k in props) {
+      propsList.push(kebabToCamel(k))
+    }
+  } else {
+    propsList = Object.keys(props)
+  }
 
   for (const k in config) {
     if (k.startsWith('@')) {
@@ -75,9 +91,9 @@ export default function resolveConfig(
         res.slots[slotName] = config[k]
       }
     } else {
-      const camelizedKey = kebabToCamel(k)
-      if (propsList.includes(camelizedKey)) {
-        res.props[camelizedKey] = config[k]
+      const propName = camelizePropNames ? kebabToCamel(k) : k
+      if (propsList.includes(propName)) {
+        res.props[propName] = config[k]
       } else {
         res.attrs[k] = config[k]
       }