@modular-component/with-default-props 0.2.3 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @modular-component/with-default-props
 
+## 0.3.1
+
+### Patch Changes
+
+- 6fa514f: Fix exports compatibility with some bundlers
+- Updated dependencies [6fa514f]
+  - @modular-component/core@0.3.1
+
+## 0.3.0
+
+### Minor Changes
+
+- 1784a2b: Add a clean way to extend the ModularComponent API with new dedicated stage functions
+
+### Patch Changes
+
+- Updated dependencies [1784a2b]
+  - @modular-component/core@0.3.0
+
 ## 0.2.3
 
 ### Patch Changes

package/README.md

@@ -1,74 +1,103 @@
 # @modular-component/with-default-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
+Provides a `defaultProps()` stage allowing to set default value for props. Contrary to the standard React `defaultProps`
+field, the `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.
 
 ## Usage
 
+**Stage function imports**
+
 ```tsx
-import { ModularComponent } from '@modular-component/core'
+import { ModularComponent, render } from '@modular-component/core'
 import { defaultProps } from '@modular-component/with-default-props'
 
 const MyComponent = ModularComponent<{ someFlag?: boolean }>()
-  .with(defaultProps({
+  .with(
+    defaultProps({
+      someFlag: false,
+      someNewProp: 'hello world',
+    }),
+  )
+  .with(
+    render(({ props }) => {
+      // props is inferred as { someFlag: boolean; someNewProp: string } at this point
+    }),
+  )
+
+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
+    }),
+  )
+```
+
+**Stage registration**
+
+```tsx
+import { ModularComponent } from '@modular-component/core'
+import '@modular-component/core/register'
+import '@modular-component/with-default-props/register'
+
+const MyComponent = ModularComponent<{ someFlag?: boolean }>()
+  .withDefaultProps({
     someFlag: false,
-    someNewProp: 'hello world'
-  }))
-  .with(render(({ props }) => (
+    someNewProp: 'hello world',
+  })
+  .withRender(({ props }) => {
     // props is inferred as { someFlag: boolean; someNewProp: string } at this point
-  )))
+  })
 
 const MyDynamicProps = ModularComponent<{
-  role: 'user' | 'owner' | 'admin',
-  canEdit?: boolean,
+  role: 'user' | 'owner' | 'admin'
+  canEdit?: boolean
   canDelete?: boolean
 }>()
-  .with(defaultProps(({ props }) => ({
+  .withDefaultProps(({ props }) => ({
     canEdit: ['owner', 'admin'].includes(props.role),
-    canDelete: ['owner'].includes(props.role)
+    canDelete: ['owner'].includes(props.role),
   }))
-  .with(render(({ props }) => {
+  .withRender(({ 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
+## Stage registration
 
-`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.
+You can either automatically register the stage on `withDefaultProps` by importing `@modular-component/with-default-props/register`,
+or handle the registration manually thanks to the `defaultProps` function and `WithDefaultProps` type exports.
 
-```tsx
-import { ModularStage } from '@modular-component/core'
+```ts
+import { ModularComponent, ModularContext } from '@modular-component/core'
+import {
+  defaultProps,
+  WithDefaultProps,
+} from '@modular-component/with-default-props'
 
-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]
-}
+// Register the stage on the factory
+ModularComponent.register({ defaultProps })
 
-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>),
+// Extend the type definition
+declare module '@modular-component/stages' {
+  export interface ModularComponentStages<Context extends ModularContext> {
+    withDefaultProps: WithDefaultProps<Context>
   }
 }
 ```

package/dist/index.d.ts

@@ -1,11 +1,30 @@
-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];
+import { ModularContext, GetConstraintFor, GetValueGetterFor, StageParams, StageReturn } from '@modular-component/core/extend';
+type NonNullableFields<Type> = {
+    [key in keyof Type]-?: undefined extends Type[key] ? never : key;
+}[keyof Type];
+type NullableFields<Type> = {
+    [key in keyof Type]: undefined extends Type[key] ? key : never;
+}[keyof Type];
+type OptionalNullable<Type> = {
+    [key in NonNullableFields<Type>]: Type[key];
+} & {
+    [key in NullableFields<Type>]?: Type[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>>;
+type Merge<Props, DefaultProps extends Partial<Props>> = OptionalNullable<{
+    [key in keyof Props | keyof DefaultProps]-?: key extends keyof Props ? key extends keyof DefaultProps ? Props[key] extends undefined | infer U ? U : Props[key] : Props[key] : DefaultProps[key];
+}> extends infer U ? {
+    [key in keyof U]: U[key];
+} : never;
+type OnlyRequiredInConstraint<Original, Constraint> = {
+    [key in keyof Constraint & keyof Original]: undefined extends Original[key] ? undefined extends Constraint[key] ? never : key : never;
+}[keyof Constraint & keyof Original];
+type Constraint<Context extends ModularContext> = Partial<Context['props']> & Pick<GetConstraintFor<Context, 'props'>, OnlyRequiredInConstraint<Context['props'], GetConstraintFor<Context, 'props'>>> extends infer U ? {
+    [key in keyof U]: U[key];
+} : never;
+export declare function defaultProps<Context extends ModularContext, Default extends Constraint<Context>>(useDefault: GetValueGetterFor<Context, 'props', Default>): (_?: Context | undefined) => {
+    field: "props";
+    provide: (args: import("@modular-component/core/extend").GetArgsFor<Context, "props">) => Merge<Context["props"], Default>;
+};
+export type WithDefaultProps<Context extends ModularContext> = <Default extends Constraint<Context>>(...args: StageParams<typeof defaultProps<Context, Default>>) => StageReturn<typeof defaultProps<Context, Default>>;
 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":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,WAAW,EACZ,MAAM,gCAAgC,CAAA;AAEvC,KAAK,iBAAiB,CAAC,IAAI,IAAI;KAC5B,GAAG,IAAI,MAAM,IAAI,CAAC,CAAC,GAAG,SAAS,SAAS,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,GAAG;CACjE,CAAC,MAAM,IAAI,CAAC,CAAA;AACb,KAAK,cAAc,CAAC,IAAI,IAAI;KACzB,GAAG,IAAI,MAAM,IAAI,GAAG,SAAS,SAAS,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,KAAK;CAC/D,CAAC,MAAM,IAAI,CAAC,CAAA;AACb,KAAK,gBAAgB,CAAC,IAAI,IAAI;KAC3B,GAAG,IAAI,iBAAiB,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC;CAC5C,GAAG;KACD,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC;CAC1C,CAAA;AAED,KAAK,KAAK,CAAC,KAAK,EAAE,YAAY,SAAS,OAAO,CAAC,KAAK,CAAC,IAAI,gBAAgB,CAAC;KACvE,GAAG,IAAI,MAAM,KAAK,GAAG,MAAM,YAAY,CAAC,CAAC,GAAG,GAAG,SAAS,MAAM,KAAK,GAChE,GAAG,SAAS,MAAM,YAAY,GAC5B,KAAK,CAAC,GAAG,CAAC,SAAS,SAAS,GAAG,MAAM,CAAC,GACpC,CAAC,GACD,KAAK,CAAC,GAAG,CAAC,GACZ,KAAK,CAAC,GAAG,CAAC,GACZ,YAAY,CAAC,GAAG,CAAC;CACtB,CAAC,SAAS,MAAM,CAAC,GACd;KAAG,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;CAAE,GAC5B,KAAK,CAAA;AAET,KAAK,wBAAwB,CAAC,QAAQ,EAAE,UAAU,IAAI;KACnD,GAAG,IAAI,MAAM,UAAU,GAAG,MAAM,QAAQ,GAAG,SAAS,SAAS,QAAQ,CAAC,GAAG,CAAC,GACvE,SAAS,SAAS,UAAU,CAAC,GAAG,CAAC,GAC/B,KAAK,GACL,GAAG,GACL,KAAK;CACV,CAAC,MAAM,UAAU,GAAG,MAAM,QAAQ,CAAC,CAAA;AAEpC,KAAK,UAAU,CAAC,OAAO,SAAS,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GACzE,IAAI,CACF,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,EAClC,wBAAwB,CACtB,OAAO,CAAC,OAAO,CAAC,EAChB,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CACnC,CACF,SAAS,MAAM,CAAC,GACf;KAAG,GAAG,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;CAAE,GAC5B,KAAK,CAAA;AAET,wBAAgB,YAAY,CAC1B,OAAO,SAAS,cAAc,EAC9B,OAAO,SAAS,UAAU,CAAC,OAAO,CAAC,EACnC,UAAU,EAAE,iBAAiB,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC;;8FAGrC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;EAcpD;AAED,MAAM,MAAM,gBAAgB,CAAC,OAAO,SAAS,cAAc,IAAI,CAC7D,OAAO,SAAS,UAAU,CAAC,OAAO,CAAC,EAEnC,GAAG,IAAI,EAAE,WAAW,CAAC,OAAO,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,KACxD,WAAW,CAAC,OAAO,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAA"}

package/dist/index.js

@@ -1,12 +1,18 @@
-export function defaultProps(defaultProps) {
-    return {
-        field: 'props',
-        useStage: (args) => ({
-            ...(typeof defaultProps === 'function'
-                ? defaultProps(args)
-                : defaultProps),
-            ...args.props,
-        }),
-    };
+import { addTo, wrap, } from '@modular-component/core/extend';
+export function defaultProps(useDefault) {
+    return addTo()
+        .on('props')
+        .provide((args) => {
+        const defaultProps = wrap(useDefault)(args);
+        const merged = {
+            ...args.props
+        };
+        Object.entries(defaultProps).forEach(([prop, value]) => {
+            if (merged[prop] === undefined) {
+                merged[prop] = value;
+            }
+        });
+        return merged;
+    });
 }
 //# sourceMappingURL=index.js.map

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;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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,IAAI,GAML,MAAM,gCAAgC,CAAA;AA6CvC,MAAM,UAAU,YAAY,CAG1B,UAAwD;IACxD,OAAO,KAAK,EAAW;SACpB,EAAE,CAAC,OAAO,CAAC;SACX,OAAO,CAAC,CAAC,IAAI,EAAoC,EAAE;QAClD,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAA;QAC3C,MAAM,MAAM,GAAG;YACb,GAAI,IAAoC,CAAC,KAAK;SAC/C,CAAA;QAED,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE;YACrD,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,SAAS,EAAE,CAAC;gBAC/B,MAAM,CAAC,IAAI,CAAC,GAAG,KAAK,CAAA;YACtB,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,MAAM,CAAA;IACf,CAAC,CAAC,CAAA;AACN,CAAC"}

package/package.json

@@ -8,7 +8,7 @@
     "Default",
     "Conditional"
   ],
-  "version": "0.2.3",
+  "version": "0.3.1",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -17,20 +17,27 @@
   "files": [
     "src",
     "dist",
+    "register.js",
+    "register.d.ts",
     "CHANGELOG.md"
   ],
   "scripts": {
     "build": "yarn build:core && yarn build:self",
     "build:core": "yarn workspace @modular-component/core build",
-    "build:self": "tsc -p tsconfig.build.json",
+    "build:self": "tsc -p tsconfig.build.json && tsc --noEmit register",
     "license": "cp ../../LICENSE ./LICENSE"
   },
-  "dependencies": {
-    "@modular-component/core": "0.2.3"
+  "peerDependencies": {
+    "@modular-component/core": "0.3.1"
   },
   "devDependencies": {
-    "typescript": "^5.2.2"
+    "@modular-component/core": "*",
+    "typescript": "^5.9.3"
   },
   "main": "dist/index.js",
-  "types": "dist/index.d.ts"
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./register": "./register.js"
+  }
 }

package/register.d.ts

@@ -0,0 +1,8 @@
+import { ModularContext } from '@modular-component/core'
+import { WithDefaultProps } from '@modular-component/with-default-props'
+
+declare module '@modular-component/stages' {
+  export interface ModularComponentStages<Context extends ModularContext> {
+    withDefaultProps: WithDefaultProps<Context>
+  }
+}

package/register.js

@@ -0,0 +1,4 @@
+import { ModularComponent } from '@modular-component/core'
+import { defaultProps } from '@modular-component/with-default-props'
+
+ModularComponent.register({ defaultProps })

package/src/index.ts

@@ -1,28 +1,80 @@
-import { ModularStage } from '@modular-component/core'
+import {
+  addTo,
+  wrap,
+  ModularContext,
+  GetConstraintFor,
+  GetValueGetterFor,
+  StageParams,
+  StageReturn,
+} from '@modular-component/core/extend'
 
-type Merge<Props, DefaultProps extends Partial<Props>> = {
+type NonNullableFields<Type> = {
+  [key in keyof Type]-?: undefined extends Type[key] ? never : key
+}[keyof Type]
+type NullableFields<Type> = {
+  [key in keyof Type]: undefined extends Type[key] ? key : never
+}[keyof Type]
+type OptionalNullable<Type> = {
+  [key in NonNullableFields<Type>]: Type[key]
+} & {
+  [key in NullableFields<Type>]?: Type[key]
+}
+
+type Merge<Props, DefaultProps extends Partial<Props>> = OptionalNullable<{
   [key in keyof Props | keyof DefaultProps]-?: key extends keyof Props
     ? key extends keyof DefaultProps
-      ? NonNullable<Props[key]>
+      ? Props[key] extends undefined | infer U
+        ? U
+        : Props[key]
       : Props[key]
     : DefaultProps[key]
-}
+}> extends infer U
+  ? { [key in keyof U]: U[key] }
+  : never
+
+type OnlyRequiredInConstraint<Original, Constraint> = {
+  [key in keyof Constraint & keyof Original]: undefined extends Original[key]
+    ? undefined extends Constraint[key]
+      ? never
+      : key
+    : never
+}[keyof Constraint & keyof Original]
+
+type Constraint<Context extends ModularContext> = Partial<Context['props']> &
+  Pick<
+    GetConstraintFor<Context, 'props'>,
+    OnlyRequiredInConstraint<
+      Context['props'],
+      GetConstraintFor<Context, 'props'>
+    >
+  > extends infer U
+  ? { [key in keyof U]: U[key] }
+  : never
 
 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>),
-  }
+  Context extends ModularContext,
+  Default extends Constraint<Context>,
+>(useDefault: GetValueGetterFor<Context, 'props', Default>) {
+  return addTo<Context>()
+    .on('props')
+    .provide((args): Merge<Context['props'], Default> => {
+      const defaultProps = wrap(useDefault)(args)
+      const merged = {
+        ...(args as { props: Context['props'] }).props
+      }
+
+      Object.entries(defaultProps).forEach(([prop, value]) => {
+        if (merged[prop] === undefined) {
+          merged[prop] = value
+        }
+      })
+
+      return merged
+    })
 }
+
+export type WithDefaultProps<Context extends ModularContext> = <
+  Default extends Constraint<Context>,
+>(
+  ...args: StageParams<typeof defaultProps<Context, Default>>
+) => StageReturn<typeof defaultProps<Context, Default>>