Bump Plug JS to 0.11.6 (#370)

croct-tech · Jan 14, 2023 · da66757 · da66757
1 parent e52d532
commit da66757
Show file tree

Hide file tree

Showing 11 changed files with 92 additions and 44 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,11 +3,11 @@ require('@rushstack/eslint-patch/modern-module-resolution');
 
 module.exports = {
     root: true,
+    plugins: ['@croct'],
     extends: [
         'plugin:@croct/react',
         'plugin:@croct/typescript',
     ],
-    plugins: ['@croct'],
     parserOptions: {
         project: ['./tsconfig.json'],
         ecmaFeatures: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,8 +37,8 @@
     "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@croct/plug": "^0.11.4",
-    "@croct/sdk": "^0.12.0"
+    "@croct/plug": "^0.11.6",
+    "@croct/sdk": "^0.12.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.2",
@@ -47,11 +47,11 @@
     "@babel/preset-typescript": "^7.18.6",
     "@croct/eslint-plugin": "^0.6.3",
     "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-essentials": "^6.4.22",
     "@storybook/addon-links": "^6.5.13",
     "@storybook/builder-webpack5": "^6.5.13",
     "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/react": "^6.5.13",
+    "@storybook/react": "^6.1.21",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^29.2.3",

diff --git a/src/api/fetchContent.test.ts b/src/api/fetchContent.test.ts
@@ -1,5 +1,6 @@
 import {ContentFetcher} from '@croct/sdk/contentFetcher';
 import {FetchResponse} from '@croct/plug/plug';
+import {SlotContent} from '@croct/plug/slot';
 import {fetchContent, FetchOptions} from './fetchContent';
 
 const mockFetch: ContentFetcher['fetch'] = jest.fn();
@@ -33,10 +34,14 @@ describe('fetchContent', () => {
             apiKey: apiKey,
             baseEndpointUrl: 'https://croct.example.com',
             timeout: 100,
+            fallback: {
+                _component: 'component-id',
+            },
         };
 
         const result: FetchResponse<typeof slotId> = {
             content: {
+                _component: 'component',
                 id: 'test',
             },
         };
@@ -67,6 +72,7 @@ describe('fetchContent', () => {
 
         const result: FetchResponse<typeof slotId> = {
             content: {
+                _component: 'component',
                 id: 'test',
             },
         };
@@ -97,6 +103,7 @@ describe('fetchContent', () => {
 
         const result: FetchResponse<typeof slotId> = {
             content: {
+                _component: 'component',
                 id: 'test',
             },
         };
@@ -117,7 +124,8 @@ describe('fetchContent', () => {
     it('should return the fallback value on error', async () => {
         const slotId = 'slot-id';
 
-        const fallback = {
+        const fallback: SlotContent = {
+            _component: 'component-id',
             id: 'fallback',
         };
 

diff --git a/src/api/fetchContent.ts b/src/api/fetchContent.ts
@@ -19,7 +19,7 @@ export type DynamicContentOptions<T extends JsonObject = JsonObject> =
 export type StaticContentOptions<T extends JsonObject = JsonObject> =
     Omit<BaseStaticOptions, 'version'> & ServerSideOptions<T>;
 
-export type FetchOptions<T extends JsonObject = JsonObject> = DynamicContentOptions<T> | StaticContentOptions<T>;
+export type FetchOptions<T extends JsonObject = SlotContent> = DynamicContentOptions<T> | StaticContentOptions<T>;
 
 export function fetchContent<I extends VersionedSlotId, C extends JsonObject>(
     slotId: I,

diff --git a/src/components/Slot/index.d.test.tsx b/src/components/Slot/index.d.test.tsx
@@ -199,7 +199,7 @@ describe('<Slot  /> typing', () => {
 
         expect(() => compileCode(code)).not.toThrow();
 
-        expect(getParameterType(code)).toBe('HomeBannerProps');
+        expect(getParameterType(code)).toBe('HomeBannerProps & {_component: string | null;}');
     });
 
     it('should allow a covariant renderer parameter type for mapped slots', () => {
@@ -240,7 +240,7 @@ describe('<Slot  /> typing', () => {
 
         expect(() => compileCode(code)).not.toThrow();
 
-        expect(getParameterType(code)).toBe('boolean | HomeBannerProps');
+        expect(getParameterType(code)).toBe('boolean | (HomeBannerProps & {_component: string | null;})');
     });
 
     it('should allow a renderer that accepts the initial value for mapped slots', () => {
@@ -281,7 +281,7 @@ describe('<Slot  /> typing', () => {
 
         expect(() => compileCode(code)).not.toThrow();
 
-        expect(getParameterType(code)).toBe('boolean | HomeBannerProps');
+        expect(getParameterType(code)).toBe('boolean | (HomeBannerProps & {_component: string | null;})');
     });
 
     it('should allow a renderer that accepts the fallback value for mapped slots', () => {
@@ -322,7 +322,7 @@ describe('<Slot  /> typing', () => {
 
         expect(() => compileCode(code)).not.toThrow();
 
-        expect(getParameterType(code)).toBe('number | boolean | HomeBannerProps');
+        expect(getParameterType(code)).toBe('number | boolean | (HomeBannerProps & {_component: string | null;})');
     });
 
     it('should allow a renderer that accepts both the initial and fallback values for mapped slots', () => {

diff --git a/src/components/Slot/index.tsx b/src/components/Slot/index.tsx
@@ -1,5 +1,5 @@
 import {Fragment, ReactElement, ReactNode} from 'react';
-import {SlotContent, SlotId, VersionedSlotId, VersionedSlotMap} from '@croct/plug/slot';
+import {SlotContent, VersionedSlotId, VersionedSlotMap} from '@croct/plug/slot';
 import {JsonObject} from '@croct/plug/sdk/json';
 import {useContent, UseContentOptions} from '../../hooks';
 
@@ -31,7 +31,7 @@ type SlotComponent = {
 
 export const Slot: SlotComponent = <I, F>(props: SlotProps<JsonObject, I, F>): ReactElement => {
     const {id, children, ...options} = props;
-    const data: SlotContent<SlotId> | I | F = useContent(id, options);
+    const data = useContent(id, options);
 
     return <Fragment>{children(data)}</Fragment>;
 };
diff --git a/src/hooks/useContent.d.test.tsx b/src/hooks/useContent.d.test.tsx
@@ -4,9 +4,6 @@ import {create} from 'ts-node';
 const tsService = create({
     cwd: __dirname,
     transpileOnly: false,
-    ignore: [
-        'lib/slots.d.ts',
-    ],
 });
 
 const testFilename = pathJoin(__dirname, 'test.tsx');
@@ -17,14 +14,40 @@ describe('useContent typing', () => {
     `;
 
     const slotMapping = `
-        type HomeBannerProps = {
+        type HomeBanner = {
+            title: string,
+            subtitle: string,
+        };
+        
+        type Banner = {
+            title: string,
+            subtitle: string,
+        };
+        
+        type Carousel = {
             title: string,
             subtitle: string,
         };
         
         declare module '@croct/plug/slot' {
-            interface SlotMap {
-                'home-banner': HomeBannerProps;
+            interface VersionedSlotMap {
+                'home-banner': {
+                    'latest': HomeBanner,
+                    '1': HomeBanner,
+                };
+            }
+        }
+        
+        declare module '@croct/plug/component' {
+            interface VersionedComponentMap {
+                'banner': {
+                    'latest': Banner,
+                    '1': Banner,
+                };
+                'carousel': {
+                    'latest': Carousel,
+                    '1': Carousel,
+                };
             }
         }
     `;
@@ -99,6 +122,25 @@ describe('useContent typing', () => {
         expect(getReturnType(code)).toBe('JsonObject');
     });
 
+    it('should define the return type as an union of component for unknown slots', () => {
+        const code: CodeOptions = {
+            code: `
+                useContent('dynamic-id' as any);
+            `,
+            mapping: true,
+        };
+
+        expect(() => compileCode(code)).not.toThrow();
+
+        expect(getTypeName(code)).toBe(
+            'useContent<any>',
+        );
+
+        expect(getReturnType(code)).toBe(
+            '(Banner & {_component: "banner@1";}) | (Carousel & {_component: "carousel@1";})',
+        );
+    });
+
     it('should include the type of the initial value on the return type for unmapped slots', () => {
         const code: CodeOptions = {
             code: `
@@ -241,7 +283,7 @@ describe('useContent typing', () => {
 
         expect(getTypeName(code)).toBe('useContent<"home-banner">');
 
-        expect(getReturnType(code)).toBe('HomeBannerProps');
+        expect(getReturnType(code)).toBe('HomeBanner & {_component: string | null;}');
     });
 
     it('should include the type of the initial value on the return type for mapped slots', () => {
@@ -256,7 +298,7 @@ describe('useContent typing', () => {
 
         expect(getTypeName(code)).toBe('useContent<boolean, "home-banner">');
 
-        expect(getReturnType(code)).toBe('boolean | HomeBannerProps');
+        expect(getReturnType(code)).toBe('boolean | (HomeBanner & {_component: string | null;})');
     });
 
     it('should include the type of the fallback value on the return type for mapped slots', () => {
@@ -271,7 +313,7 @@ describe('useContent typing', () => {
 
         expect(getTypeName(code)).toBe('useContent<number, "home-banner">');
 
-        expect(getReturnType(code)).toBe('number | HomeBannerProps');
+        expect(getReturnType(code)).toBe('number | (HomeBanner & {_component: string | null;})');
     });
 
     it('should include the types of both the initial and fallback values on the return type for mapped slots', () => {
@@ -286,7 +328,7 @@ describe('useContent typing', () => {
 
         expect(getTypeName(code)).toBe('useContent<boolean, number, "home-banner">');
 
-        expect(getReturnType(code)).toBe('number | boolean | HomeBannerProps');
+        expect(getReturnType(code)).toBe('number | boolean | (HomeBanner & {...;})');
     });
 
     it('should not allow overriding the return type for mapped slots', () => {

diff --git a/src/hooks/useContent.ts b/src/hooks/useContent.ts
@@ -15,7 +15,7 @@ export type UseContentOptions<I, F> = FetchOptions & {
 function useCsrContent<I, F>(
     id: VersionedSlotId,
     options: UseContentOptions<I, F> = {},
-): SlotContent<VersionedSlotId> | I | F {
+): SlotContent | I | F {
     const {fallback, initial, cacheKey, expiration, ...fetchOptions} = options;
     const croct = useCroct();
 
@@ -31,7 +31,7 @@ function useCsrContent<I, F>(
 function useSsrContent<I, F>(
     _: VersionedSlotId,
     {initial}: UseContentOptions<I, F> = {},
-): SlotContent<VersionedSlotId> | I | F {
+): SlotContent | I | F {
     if (initial === undefined) {
         throw new Error('The initial value is required for server-side rendering (SSR).');
     }

diff --git a/src/hooks/useEvaluation.d.test.tsx b/src/hooks/useEvaluation.d.test.tsx
@@ -4,9 +4,6 @@ import {create} from 'ts-node';
 const tsService = create({
     cwd: __dirname,
     transpileOnly: false,
-    ignore: [
-        'lib/slots.d.ts',
-    ],
 });
 
 const testFilename = pathJoin(__dirname, 'test.tsx');

diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,6 @@
 export * from '@croct/plug/sdk/json';
 export * from '@croct/plug/slot';
+export * from '@croct/plug/component';
 export * from './CroctProvider';
 export * from './hooks';
 export * from './components';