diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..f21e0de --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,14 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Debug test: Current file", + "program": "${workspaceRoot}/node_modules/.bin/jest", + "args": ["${relativeFile}", "--runInBand"], + "cwd": "${workspaceRoot}", + "sourceMaps": true + } + ] +} diff --git a/package.json b/package.json index 96f2a39..1e65322 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "build:esm": "tsc -p ./tsconfig.build.json --outDir ./dist/esm --module es2015", "build": "yarn build:commonjs && yarn build:esm", "lint": "eslint --ext .js,.ts .", - "test": "jest" + "test": "jest", + "verify": "yarn build && yarn test && yarn lint" }, "jest": { "transform": { @@ -25,7 +26,7 @@ "devDependencies": { "@types/enzyme-adapter-react-16": "^1.0.5", "@types/jest": "^24.0.18", - "@types/node": "^10.14.16", + "@types/node": "^12.7.3", "@types/react": "^16.9.2", "@typescript-eslint/eslint-plugin": "^2.0.0", "@typescript-eslint/parser": "^2.0.0", @@ -42,12 +43,13 @@ "react-ssr-data-loader": "^1.1.0", "ts-jest": "^24.0.2", "tslib": "^1.10.0", - "typescript": "^3.5.3" + "typescript": "3.5.3" }, "dependencies": { - "typescript-log": "^1.1.0" + "json-react-layouts": "^1.0.3", + "typescript-log": "^1.1.1" }, "peerDependencies": { "react-ssr-data-loader": "^1.1.0" } -} +} \ No newline at end of file diff --git a/src/DataLoading.ts b/src/DataLoading.ts index 450a5a9..f8b5ed6 100644 --- a/src/DataLoading.ts +++ b/src/DataLoading.ts @@ -1,4 +1,4 @@ -import { ComponentRegistrar } from 'react-json-page-layout' +import { LayoutApi } from 'json-react-layouts' export interface DataDefinition { getCacheKey?: (config: TConfig, services: LoadDataServices) => string @@ -10,9 +10,9 @@ export interface ComponentState { data: MaybeLoaded } -export interface LoadArguments { +export interface LoadArguments { componentRenderPath: string - dataDefinition: DataDefinition + dataDefinition: DataDefinition dataDefinitionArgs: any - componentRegistrar: ComponentRegistrar + layout: LayoutApi } diff --git a/src/__snapshots__/data-loading.test.tsx.snap b/src/__snapshots__/data-loading.test.tsx.snap new file mode 100644 index 0000000..4d7b4ec --- /dev/null +++ b/src/__snapshots__/data-loading.test.tsx.snap @@ -0,0 +1,18 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`can load data for component 1`] = ` +Object { + "componentRenderPath": "test[0]", + "componentType": "test-with-data", + "dataProps": Object { + "data": Object { + "dataDefinitionArgs": Object { + "dataArg": "Foo", + }, + "loaded": true, + "result": 3, + }, + }, + "length": 3, +} +`; diff --git a/src/data-loading.test.tsx b/src/data-loading.test.tsx index f775a72..6246b9f 100644 --- a/src/data-loading.test.tsx +++ b/src/data-loading.test.tsx @@ -2,14 +2,20 @@ import React from 'react' import Adapter from 'enzyme-adapter-react-16' import { init } from '.' import { DataDefinition } from './DataLoading' +// eslint-disable-next-line @typescript-eslint/no-unused-vars import { DataLoaderResources, DataProvider } from 'react-ssr-data-loader' -import { getRegistrationCreators, ComponentRegistrar, CompositionRegistrar, RouteBuilder } from 'react-json-page-layout' +import { getRegistrationCreators, LayoutRegistration } from 'json-react-layouts' import { mount, configure } from 'enzyme' configure({ adapter: new Adapter() }) const lengthCalculatorDataDefinition: DataDefinition<{ dataArg: string }, number, {}> = { - loadData: props => new Promise(resolve => setTimeout(() => resolve(props.dataArg.length))), + loadData: props => + new Promise(resolve => + setTimeout(() => { + resolve(props.dataArg.length) + }), + ), } // Test component with data @@ -41,30 +47,31 @@ export const testComponentWithDataRegistration = createRegisterableComponentWith ) it('can load data for component', async () => { - const componentRegistrar = new ComponentRegistrar() - .register(testComponentWithDataRegistration) - .registerMiddleware(middleware) - const compositionRegisrar = CompositionRegistrar.create(componentRegistrar).registerComposition( - testCompositionRegistration, - ) - const routeBuilder = new RouteBuilder(compositionRegisrar) + const layout = new LayoutRegistration() + .registerComponents(registrar => + registrar + .registerComponent(testComponentWithDataRegistration) + .registerMiddleware(middleware), + ) + .registerCompositions(registrar => + registrar.registerComposition(testCompositionRegistration), + ) const wrapper = mount( - , ) expect(wrapper.find(TestComponentWithData).text()).toBe('Loading') await new Promise(resolve => setTimeout(resolve)) - await new Promise(resolve => setTimeout(resolve)) const component = wrapper.update().find(TestComponentWithData) expect(component.text()).toBe('Length: 3') diff --git a/src/index.tsx b/src/index.tsx index 20c1391..eb551c4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,7 +4,7 @@ import { RenderFunctionServices, ComponentRegistration, RenderFunction, -} from 'react-json-page-layout' +} from 'json-react-layouts' import { ComponentState, LoadArguments, DataDefinition, MaybeLoaded } from './DataLoading' import { DataLoaderResources } from 'react-ssr-data-loader' @@ -37,6 +37,7 @@ export function init( ) => ComponentRegistration middleware: ComponentRendererMiddleware } { + // eslint-disable-next-line @typescript-eslint/no-unused-vars const ComponentDataLoader = resources.registerResource>( 'component-data-loader', params => { @@ -77,17 +78,15 @@ export function init( return registrationWithData }, middleware: (componentProps, middlewareProps, services, next) => { - const componentDataDefinition = services.routeBuilder.compositionRegistrar.componentRegistrar.get( - componentProps.type, - ) + const componentRegistrar = (services.layout as any).compositionRegistrar + .componentRegistrar + const componentDataDefinition = componentRegistrar.get(componentProps.componentType) const dataDefinition = (componentDataDefinition as any).dataDefinition if (dataDefinition) { return (