@modular-component/with-components 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @modular-component/with-components
+
+## 0.1.0
+
+### Minor Changes
+
+- be1b38e: Initial release of the ModularComponent system
+
+### Patch Changes
+
+- Updated dependencies [be1b38e]
+  - @modular-component/core@0.1.0

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,48 @@
+# `@modular-component/with-components`
+
+Provides a `withComponents` stage that fills the `components` argument with
+a map of React components. Useful when running tests in an environment that
+does not allow module mocking: sub-components can be stubbed in tests by
+calling the stage again to replace their implementations.
+
+## Installation and usage
+
+```bash
+yarn add @modular-component/core @modular-component/with-components
+```
+
+```tsx
+// Usage in apps
+import { modularFactory } from '@modular-component/core'
+import { WithComponents } from '@modular-component/with-components'
+
+const ModularComponent = modularFactory.extend(WithComponents).build()
+
+const MyModularComponent = ModularComponent()
+  .withComponents({
+    SubComponent: () => <h2>Subtitle</h2>,
+  })
+  .withRender(({ components }) => (
+    <>
+      <h1>Main Title</h1>
+      <components.SubComponent />
+    </>
+  ))
+```
+
+```tsx
+// Usage in tests
+
+const SubComponentMock = someMock()
+const TestMyModularComponent = MyModularComponent.withComponents({
+  SubComponent: SubComponentMock,
+})
+
+render(<TestMyModularComponent />)
+
+expect(someMock).toHaveBeenCalledOnce()
+```
+
+## 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

@@ -0,0 +1,8 @@
+import { ComponentType } from 'react';
+export declare const WithComponents: {
+    readonly withComponents: {
+        readonly field: "components";
+        readonly restrict: Record<string, ComponentType<any>>;
+    };
+};
+//# 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":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,eAAO,MAAM,cAAc;;;;;CAKhB,CAAA"}

package/dist/index.js

@@ -0,0 +1,8 @@
+import { createMethodRecord } from '@modular-component/core';
+export const WithComponents = createMethodRecord({
+    withComponents: {
+        field: 'components',
+        restrict: {},
+    },
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAI5D,MAAM,CAAC,MAAM,cAAc,GAAG,kBAAkB,CAAC;IAC/C,cAAc,EAAE;QACd,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,EAAwC;KACnD;CACO,CAAC,CAAA"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@modular-component/with-components",
+  "description": "Subcomponents injection for the ModularComponent system",
+  "keywords": [
+    "React",
+    "Modular",
+    "Factory",
+    "Default",
+    "Sub-components",
+    "Injection"
+  ],
+  "version": "0.1.0",
+  "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.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=17 <19"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.17",
+    "typescript": "^4.6.4"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts"
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+import { createMethodRecord } from '@modular-component/core'
+
+import { ComponentType } from 'react'
+
+export const WithComponents = createMethodRecord({
+  withComponents: {
+    field: 'components',
+    restrict: {} as Record<string, ComponentType<any>>,
+  },
+} as const)