@modular-component/with-fragment 0.2.2

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @modular-component/with-fragment
+
+## 0.2.2
+
+### Patch Changes
+
+- 77c46f4: Fix an issue in core rendering system
+- Updated dependencies [77c46f4]
+  - @modular-component/core@0.2.2

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright © Jérémie van der Sande
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the “Software”), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+The Software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the
+warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or
+copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise,
+arising from, out of or in connection with the software or the use or other dealings in the Software.

package/README.md

@@ -0,0 +1,67 @@
+# @modular-component/with-fragment
+
+ModularComponent stage allowing to cut the render phase into multiple fragments that can be composed together in the
+render stage. It can make conditional rendering easier to read and reduce duplication.
+
+It can either return a map of React node accessible through the `fragments` field, or be called multiple times by
+specifying a field key to use and returning a single React node.
+
+## Usage
+
+```tsx
+import { ModularComponent, render } from '@modular-component/core'
+import { fragment } from '@modular-component/with-fragment'
+
+// Through multiple calls
+const MultipleCalls = ModularComponent<{ loading: boolean }>()
+  .with(fragment('loading', () => <div>Loading...</div>))
+  .with(fragment('loaded', () => <div>Loaded</div>))
+  .with(render(({ props, loading, loaded }) => (
+    <div>Current status: {props.loading ? loading : loaded}</div>
+  )))
+
+// Through a single call
+const SingleCall = ModularComponent<{ loading: boolean }>()
+  .with(fragment(() => ({
+    loading: <div>Loading...</div>,
+    loaded: <div>Loaded</div>,
+  }))
+  .with(render(({ props, fragments }) => (
+    <div>Current status: {props.loading ? fragments.loading : fragments.loaded}</div>
+  ))))
+```
+
+## Implementation
+
+`with(fragment)` receives a function taking the current arguments map as parameter and returns either a map of React node
+or a single React node, to set as stage function, and optionally a key to be used as the field.
+
+```ts
+import { ReactNode } from 'react'
+import { ModularStage } from '@modular-component/core'
+
+export function fragment<
+  Args extends {},
+  Fragments extends Record<string, ReactNode>,
+>(
+  useFragment: (args: Args) => Fragments,
+): ModularStage<'fragments', (args: Args) => Fragments>
+export function fragment<
+  Args extends {},
+  Fragment extends ReactNode,
+  Key extends string,
+>(
+  key: Key,
+  useFragment: (args: Args) => Fragment,
+): ModularStage<Key, (args: Args) => Fragment>
+
+export function fragment<Key extends string, Stage extends () => unknown>(
+  key: Key | Stage,
+  useFragment?: Stage,
+): ModularStage<Key, Stage> {
+  return {
+    field: (typeof key === 'string' ? key : 'fragments') as Key,
+    useStage: (typeof key === 'string' ? useFragment : key) as Stage,
+  }
+}
+```

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+import { ModularStage } from '@modular-component/core';
+export declare function fragment<Args extends {}, Fragments extends Record<string, ReactNode>>(useFragment: (args: Args) => Fragments): ModularStage<'fragments', (args: Args) => Fragments>;
+export declare function fragment<Args extends {}, Fragment extends ReactNode, Key extends string>(key: Key, useFragment: (args: Args) => Fragment): ModularStage<Key, (args: Args) => Fragment>;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAEtD,wBAAgB,QAAQ,CACtB,IAAI,SAAS,EAAE,EACf,SAAS,SAAS,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAE3C,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,GACrC,YAAY,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,SAAS,CAAC,CAAA;AACvD,wBAAgB,QAAQ,CACtB,IAAI,SAAS,EAAE,EACf,QAAQ,SAAS,SAAS,EAC1B,GAAG,SAAS,MAAM,EAElB,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,QAAQ,GACpC,YAAY,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAA"}

package/dist/index.js

@@ -0,0 +1,7 @@
+export function fragment(key, useFragment) {
+    return {
+        field: (typeof key === 'string' ? key : 'fragments'),
+        useStage: (typeof key === 'string' ? useFragment : key),
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAkBA,MAAM,UAAU,QAAQ,CACtB,GAAgB,EAChB,WAAmB;IAEnB,OAAO;QACL,KAAK,EAAE,CAAC,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,WAAW,CAAQ;QAC3D,QAAQ,EAAE,CAAC,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAU;KACjE,CAAA;AACH,CAAC"}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@modular-component/with-fragment",
+  "description": "ModularComponent stage for handling render fragments",
+  "keywords": [
+    "React",
+    "Modular",
+    "Factory",
+    "Default",
+    "Conditional"
+  ],
+  "version": "0.2.2",
+  "type": "module",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "dist",
+    "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",
+    "license": "cp ../../LICENSE ./LICENSE"
+  },
+  "dependencies": {
+    "@modular-component/core": "0.2.2"
+  },
+  "peerDependencies": {
+    "react": ">=17 <19"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.17",
+    "typescript": "^5.2.2"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts"
+}

package/src/index.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react'
+import { ModularStage } from '@modular-component/core'
+
+export function fragment<
+  Args extends {},
+  Fragments extends Record<string, ReactNode>,
+>(
+  useFragment: (args: Args) => Fragments,
+): ModularStage<'fragments', (args: Args) => Fragments>
+export function fragment<
+  Args extends {},
+  Fragment extends ReactNode,
+  Key extends string,
+>(
+  key: Key,
+  useFragment: (args: Args) => Fragment,
+): ModularStage<Key, (args: Args) => Fragment>
+
+export function fragment<Key extends string, Stage extends () => unknown>(
+  key: Key | Stage,
+  useFragment?: Stage,
+): ModularStage<Key, Stage> {
+  return {
+    field: (typeof key === 'string' ? key : 'fragments') as Key,
+    useStage: (typeof key === 'string' ? useFragment : key) as Stage,
+  }
+}