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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @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
+
+- 83d453f: Rework API for better TypeScript performance and improved DX
+
+### Patch Changes
+
+- Updated dependencies [83d453f]
+  - @modular-component/core@0.2.0
+
 ## 0.1.7
 
 ### Patch 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

@@ -1,28 +1,11 @@
-declare const withDefaultProps: unique symbol;
-declare module '@modular-component/core' {
-    interface ModularStages<Args, Value> {
-        [withDefaultProps]: {
-            restrict: Partial<Args extends {
-                props: infer P;
-            } ? P : {}> | ((args: Args) => Partial<Args extends {
-                props: infer P;
-            } ? P : {}>);
-            transform: Value extends ((args: Args) => infer T) | infer T ? Args extends {
-                props: infer P;
-            } ? {
-                [key in keyof T]: key extends keyof P ? NonNullable<P[key]> : T[key];
-            } : Value : never;
-        };
-    }
-}
-export declare const WithDefaultProps: {
-    readonly DefaultProps: {
-        readonly symbol: typeof withDefaultProps;
-        readonly field: "props";
-        readonly transform: <A extends {
-            props: {};
-        }, P>(args: A, useProps: P) => any;
-    };
+import { ModularStage } from '@modular-component/core';
+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];
 };
+export declare 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>>;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,gBAAgB,eAAW,CAAA;AAEjC,OAAO,QAAQ,yBAAyB,CAAC;IACvC,UAAiB,aAAa,CAAC,IAAI,EAAE,KAAK;QACxC,CAAC,gBAAgB,CAAC,EAAE;YAClB,QAAQ,EACJ,OAAO,CAAC,IAAI,SAAS;gBAAE,KAAK,EAAE,MAAM,CAAC,CAAA;aAAE,GAAG,CAAC,GAAG,EAAE,CAAC,GACjD,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,IAAI,SAAS;gBAAE,KAAK,EAAE,MAAM,CAAC,CAAA;aAAE,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;YACvE,SAAS,EAAE,KAAK,SAAS,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,GACxD,IAAI,SAAS;gBAAE,KAAK,EAAE,MAAM,CAAC,CAAA;aAAE,GAC7B;iBACG,GAAG,IAAI,MAAM,CAAC,GAAG,GAAG,SAAS,MAAM,CAAC,GACjC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GACnB,CAAC,CAAC,GAAG,CAAC;aACX,GACD,KAAK,GACP,KAAK,CAAA;SACV,CAAA;KACF;CACF;AAED,eAAO,MAAM,gBAAgB;;;;;mBAIM,EAAE;;;CAK1B,CAAA"}
+{"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

@@ -1,13 +1,12 @@
-import { createMethodRecord } from '@modular-component/core';
-const withDefaultProps = Symbol();
-export const WithDefaultProps = createMethodRecord({
-    DefaultProps: {
-        symbol: withDefaultProps,
+export function defaultProps(defaultProps) {
+    return {
         field: 'props',
-        transform: (args, useProps) => ({
-            ...(typeof useProps === 'function' ? useProps(args) : useProps),
+        useStage: (args) => ({
+            ...(typeof defaultProps === 'function'
+                ? defaultProps(args)
+                : defaultProps),
             ...args.props,
         }),
-    },
-});
+    };
+}
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAE5D,MAAM,gBAAgB,GAAG,MAAM,EAAE,CAAA;AAqBjC,MAAM,CAAC,MAAM,gBAAgB,GAAG,kBAAkB,CAAC;IACjD,YAAY,EAAE;QACZ,MAAM,EAAE,gBAAgB;QACxB,KAAK,EAAE,OAAO;QACd,SAAS,EAAE,CAA6B,IAAO,EAAE,QAAW,EAAE,EAAE,CAAC,CAAC;YAChE,GAAG,CAAC,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;YAC/D,GAAG,IAAI,CAAC,KAAK;SACd,CAAC;KACH;CACO,CAAC,CAAA"}
+{"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.1.7",
+  "version": "0.2.1",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -26,10 +26,10 @@
     "license": "cp ../../LICENSE ./LICENSE"
   },
   "dependencies": {
-    "@modular-component/core": "0.1.7"
+    "@modular-component/core": "0.2.1"
   },
   "devDependencies": {
-    "typescript": "^4.6.4"
+    "typescript": "^5.2.2"
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts"

package/src/index.ts

@@ -1,33 +1,28 @@
-import { createMethodRecord } from '@modular-component/core'
+import { ModularStage } from '@modular-component/core'
 
-const withDefaultProps = Symbol()
-
-declare module '@modular-component/core' {
-  export interface ModularStages<Args, Value> {
-    [withDefaultProps]: {
-      restrict:
-        | Partial<Args extends { props: infer P } ? P : {}>
-        | ((args: Args) => Partial<Args extends { props: infer P } ? P : {}>)
-      transform: Value extends ((args: Args) => infer T) | infer T
-        ? Args extends { props: infer P }
-          ? {
-              [key in keyof T]: key extends keyof P
-                ? NonNullable<P[key]>
-                : T[key]
-            }
-          : Value
-        : never
-    }
-  }
+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]
 }
 
-export const WithDefaultProps = createMethodRecord({
-  DefaultProps: {
-    symbol: withDefaultProps,
+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',
-    transform: <A extends { props: {} }, P>(args: A, useProps: P) => ({
-      ...(typeof useProps === 'function' ? useProps(args) : useProps),
-      ...args.props,
-    }),
-  },
-} as const)
+    useStage: (args: Args) =>
+      ({
+        ...(typeof defaultProps === 'function'
+          ? defaultProps(args)
+          : defaultProps),
+        ...args.props,
+      } as Merge<Props, DefaultProps>),
+  }
+}