@modular-component/with-default-props 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @modular-component/with-default-props
 
+## 0.2.1
+
+### Patch Changes
+
+- 09b9673: Update readmes
+- Updated dependencies [09b9673]
+  - @modular-component/core@0.2.1
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

@@ -1,42 +1,75 @@
-# `@modular-component/with-default-props`
+# @modular-component/with-default-props
 
-Provides a `withDefaultProps` stage providing default values for props.
+Provides a `with(defaultProps)` stage allowing to set default value for props. Contrary to the standard React `defaultProps`
+field, the `with(defaultProps)` stage can also _set new props_ that are not surfaced by the component, and react to passed
+props (or other previous stages) to dynamically compute a default value.
 
-Correctly updates typing of `props` argument to mark props with default
-values as non-nullable.
+## Usage
 
-## Installation and usage
+```tsx
+import { ModularComponent } from '@modular-component/core'
+import { defaultProps } from '@modular-component/with-default-props'
+
+const MyComponent = ModularComponent<{ someFlag?: boolean }>()
+  .with(defaultProps({
+    someFlag: false,
+    someNewProp: 'hello world'
+  }))
+  .with(render(({ props }) => (
+    // props is inferred as { someFlag: boolean; someNewProp: string } at this point
+  )))
 
-```bash
-yarn add @modular-component/core @modular-component/with-default-props
+const MyDynamicProps = ModularComponent<{ 
+  role: 'user' | 'owner' | 'admin', 
+  canEdit?: boolean, 
+  canDelete?: boolean 
+}>()
+  .with(defaultProps(({ props }) => ({
+    canEdit: ['owner', 'admin'].includes(props.role),
+    canDelete: ['owner'].includes(props.role)
+  }))
+  .with(render(({ props }) => {
+    // props is inferred as { role: 'user' | 'owner' | 'admin'; canEdit: boolean; canDelete: boolean }
+    // canEdit defaults to true if the role is not "user", false otherwise
+    // canDelete defaults to true if the role is "admin", false otherwise
+    // canEdit and canDelete can still be controlled by explicitely setting the property
+  })))
 ```
 
+## Implementation
+
+`with(defaultProps)` runs a custom stage hook to shallowly merge the default props to the received component props.
+Accepted values are restricted to a partial map of the original props to only accept correct types for defined props.
+The value can also be a function of the current args.
+
 ```tsx
-import { modularFactory } from '@modular-component/core'
-import { WithDefaultProps } from '@modular-component/with-default-props'
+import { ModularStage } from '@modular-component/core'
 
-const ModularComponent = modularFactory.extend(WithDefaultProps).build()
+type Merge<Props, DefaultProps extends Partial<Props>> = {
+  [key in keyof Props | keyof DefaultProps]-?: key extends keyof Props
+    ? key extends keyof DefaultProps
+      ? NonNullable<Props[key]>
+      : Props[key]
+    : DefaultProps[key]
+}
 
-const MyModularComponent = ModularComponent<{
-  content?: {
-    title: string
-    subtitle: string
+export function defaultProps<
+  Args extends { props: {} },
+  Props extends Args extends { props: infer U } ? U : {},
+  DefaultProps extends Partial<Props>,
+>(
+  defaultProps: DefaultProps | ((args: Args) => DefaultProps),
+): ModularStage<
+  'props',
+  (args: Args) => Merge<Props, DefaultProps>
+> {
+  return {
+    field: 'props',
+    useStage: (args: Args) =>
+      ({
+        ...(typeof defaultProps === 'function' ? defaultProps(args) : defaultProps),
+        ...args.props,
+      } as Merge<Props, DefaultProps>),
   }
-}>()
-  .withDefaultProps({
-    content: {
-      title: 'Default title',
-      subtitle: 'Default subtitle',
-    },
-  })
-  .withRender(({ props }) => (
-    <>
-      <h1>{props.content.title}</h1>
-      <h2>{props.content.subtitle}</h2>
-    </>
-  ))
+}
 ```
-
-## Learn more
-
-Read the [`ModularComponent` ReadMe](https://github.com/jvdsande/modular-component/blob/master/README.md) for more information about the `ModularComponent` system.

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAEtD,KAAK,KAAK,CAAC,KAAK,EAAE,YAAY,SAAS,OAAO,CAAC,KAAK,CAAC,IAAI;KACtD,GAAG,IAAI,MAAM,KAAK,GAAG,MAAM,YAAY,CAAC,CAAC,GAAG,GAAG,SAAS,MAAM,KAAK,GAChE,GAAG,SAAS,MAAM,YAAY,GAC5B,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GACvB,KAAK,CAAC,GAAG,CAAC,GACZ,YAAY,CAAC,GAAG,CAAC;CACtB,CAAA;AAED,wBAAgB,YAAY,CAC1B,IAAI,SAAS;IAAE,KAAK,EAAE,EAAE,CAAA;CAAE,EAC1B,KAAK,SAAS,IAAI,SAAS;IAAE,KAAK,EAAE,MAAM,CAAC,CAAA;CAAE,GAAG,CAAC,GAAG,EAAE,EACtD,YAAY,SAAS,OAAO,CAAC,KAAK,CAAC,EAEnC,YAAY,EAAE,YAAY,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,YAAY,CAAC,GAC1D,YAAY,CACb,OAAO,EACP,CAAC,IAAI,EAAE,IAAI,KAAK,KAAK,CAAC,KAAK,EAAE,YAAY,CAAC,CAC3C,CASA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAEtD,KAAK,KAAK,CAAC,KAAK,EAAE,YAAY,SAAS,OAAO,CAAC,KAAK,CAAC,IAAI;KACtD,GAAG,IAAI,MAAM,KAAK,GAAG,MAAM,YAAY,CAAC,CAAC,GAAG,GAAG,SAAS,MAAM,KAAK,GAChE,GAAG,SAAS,MAAM,YAAY,GAC5B,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GACvB,KAAK,CAAC,GAAG,CAAC,GACZ,YAAY,CAAC,GAAG,CAAC;CACtB,CAAA;AAED,wBAAgB,YAAY,CAC1B,IAAI,SAAS;IAAE,KAAK,EAAE,EAAE,CAAA;CAAE,EAC1B,KAAK,SAAS,IAAI,SAAS;IAAE,KAAK,EAAE,MAAM,CAAC,CAAA;CAAE,GAAG,CAAC,GAAG,EAAE,EACtD,YAAY,SAAS,OAAO,CAAC,KAAK,CAAC,EAEnC,YAAY,EAAE,YAAY,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,YAAY,CAAC,GAC1D,YAAY,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,KAAK,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAWnE"}

package/dist/index.js

@@ -2,7 +2,9 @@ export function defaultProps(defaultProps) {
     return {
         field: 'props',
         useStage: (args) => ({
-            ...(typeof defaultProps === 'function' ? defaultProps(args) : defaultProps),
+            ...(typeof defaultProps === 'function'
+                ? defaultProps(args)
+                : defaultProps),
             ...args.props,
         }),
     };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAUA,MAAM,UAAU,YAAY,CAK1B,YAA2D;IAK3D,OAAO;QACL,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,CAAC,IAAU,EAAE,EAAE,CACvB,CAAC;YACC,GAAG,CAAC,OAAO,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;YAC3E,GAAG,IAAI,CAAC,KAAK;SACiB,CAAA;KACnC,CAAA;AACH,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAUA,MAAM,UAAU,YAAY,CAK1B,YAA2D;IAE3D,OAAO;QACL,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE,CAAC,IAAU,EAAE,EAAE,CACvB,CAAC;YACC,GAAG,CAAC,OAAO,YAAY,KAAK,UAAU;gBACpC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC;gBACpB,CAAC,CAAC,YAAY,CAAC;YACjB,GAAG,IAAI,CAAC,KAAK;SACiB,CAAA;KACnC,CAAA;AACH,CAAC"}

package/package.json

@@ -8,7 +8,7 @@
     "Default",
     "Conditional"
   ],
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -26,7 +26,7 @@
     "license": "cp ../../LICENSE ./LICENSE"
   },
   "dependencies": {
-    "@modular-component/core": "0.2.0"
+    "@modular-component/core": "0.2.1"
   },
   "devDependencies": {
     "typescript": "^5.2.2"

package/src/index.ts

@@ -14,15 +14,14 @@ export function defaultProps<
   DefaultProps extends Partial<Props>,
 >(
   defaultProps: DefaultProps | ((args: Args) => DefaultProps),
-): ModularStage<
-  'props',
-  (args: Args) => Merge<Props, DefaultProps>
-> {
+): ModularStage<'props', (args: Args) => Merge<Props, DefaultProps>> {
   return {
     field: 'props',
     useStage: (args: Args) =>
       ({
-        ...(typeof defaultProps === 'function' ? defaultProps(args) : defaultProps),
+        ...(typeof defaultProps === 'function'
+          ? defaultProps(args)
+          : defaultProps),
         ...args.props,
       } as Merge<Props, DefaultProps>),
   }