Remove registerStartupRenderer and replace with explicit initialization

packages/core/src/index.ts

@@ -1,4 +1,3 @@
-export * from './core';
 export * from './util';
 
 export * from './models/jsonSchema';
@@ -24,8 +23,8 @@ import { ControlElement, LabelDescription } from './models/uischema';
 
 const Helpers: {
   createLabelDescriptionFrom(withLabel: ControlElement): LabelDescription;
-  convertToValidClassName(s: string): string } = {
-
+  convertToValidClassName(s: string): string
+} = {
   createLabelDescriptionFrom,
   convertToValidClassName
 };

packages/core/src/util/field.ts

@@ -1,33 +1,16 @@
 import * as _ from 'lodash';
 import { ControlElement } from '../models/uischema';
-import { RankedTester } from '../testers';
-import { JsonFormsInit } from '../core';
 import { getData, getErrorAt } from '../reducers';
 import {
   composeWithUi,
-  StatePropsOfField,
   isEnabled,
   isVisible,
-  Resolve
+  Resolve,
+  StatePropsOfField
 } from '../util';
 import { mapDispatchToControlProps } from './renderer';
 import { DispatchPropsOfControl } from '../renderers';
 
-/**
- * Registers the given field renderer when a JSON Forms store is created.
- * @param {RankedTester} tester
- * @param field the field to be registered
- * @returns {any}
- */
-export const registerStartupField = (tester: RankedTester, field: any) => {
-  JsonFormsInit.fields.push({
-    tester,
-    field
-  });
-
-  return field;
-};
-
 /**
  * Map state to field props.
  *

packages/core/src/util/renderer.ts

@@ -1,7 +1,6 @@
 import * as _ from 'lodash';
 import { connect } from 'react-redux';
 import { JsonSchema } from '../models/jsonSchema';
-import { JsonFormsInit } from '../core';
 import {
   composeWithUi,
   createLabelDescriptionFrom,
@@ -80,15 +79,6 @@ export const mapStateToLayoutProps = (state, ownProps): StatePropsOfLayout => {
   };
 };
 
-export const registerStartupRenderer = (tester: RankedTester, renderer: any) => {
-  JsonFormsInit.renderers.push({
-    tester,
-    renderer
-  });
-
-  return renderer;
-};
-
 const isRequired = (schema: JsonSchema, schemaPath: string): boolean => {
      const pathSegments = schemaPath.split('/');
      const lastSegment = pathSegments[pathSegments.length - 1];

packages/core/test/renderers/JsonForms.test.tsx

@@ -9,7 +9,7 @@ import { test } from 'ava';
 import * as _ from 'lodash';
 import { combineReducers, createStore } from 'redux';
 import { Provider } from 'react-redux';
-import { JsonForms, JsonFormsInit, JsonSchema, UISchemaElement} from '../../src';
+import { JsonForms, JsonSchema, UISchemaElement } from '../../src';
 import { RendererProps, StatelessRenderer } from '../../src/renderers';
 import '../../src/renderers';
 import { registerRenderer, unregisterRenderer } from '../../src/actions';
@@ -58,8 +58,6 @@ export const initJsonFormsStore = ({
           schema,
           uischema
         },
-        renderers: JsonFormsInit.renderers,
-        fields: JsonFormsInit.fields,
         ...props
       }
     }

packages/examples/src/register.ts

@@ -1,6 +1,6 @@
 import { JsonFormsElement } from '@jsonforms/webcomponent';
 import { ExampleDescription } from './example';
-import { JsonFormsInit, jsonformsReducer } from '@jsonforms/core';
+import { jsonformsReducer, RankedTester } from '@jsonforms/core';
 import { combineReducers, createStore, Reducer } from 'redux';
 import { i18nReducer, translateProps } from '@jsonforms/i18n';
 
@@ -11,97 +11,108 @@ const knownExamples: {[key: string]: ExampleDescription} = {};
 
 export interface AdditionalStoreParams {
   name: string;
-  reducer: Reducer<any>;
+  reducer?: Reducer<any>;
   state: any;
 }
 
 export const registerExamples = (examples: ExampleDescription[]): void => {
   examples.forEach(example => knownExamples[example.name] = example);
 };
 
-export const changeExample = (selectedExample: string, ...additionalStoreParams: AdditionalStoreParams[]) => {
-  let body = document.getElementById(viewDivId);
-  if (body.firstChild !== null && body.firstChild.childNodes.length !== 0) {
-    body.removeChild(body.firstChild);
-  }
-  const example: ExampleDescription = knownExamples[selectedExample];
-  if (example.setupCallback !== undefined) {
-    const div = document.createElement('div');
-    example.setupCallback(div);
-    body.appendChild(div);
-    body = div;
-  }
+export const changeExample =
+  (selectedExample: string,
+   renderers: { tester: RankedTester, renderer: any}[],
+   fields: { tester: RankedTester, field: any}[],
+   ...additionalStoreParams: AdditionalStoreParams[]) => {
+    let body = document.getElementById(viewDivId);
+    if (body.firstChild !== null && body.firstChild.childNodes.length !== 0) {
+      body.removeChild(body.firstChild);
+    }
+    const example: ExampleDescription = knownExamples[selectedExample];
+    if (example.setupCallback !== undefined) {
+      const div = document.createElement('div');
+      example.setupCallback(div);
+      body.appendChild(div);
+      body = div;
+    }
+
+    const jsonForms = document.createElement('json-forms') as JsonFormsElement;
+    const additionalReducers = additionalStoreParams.reduce(
+      (acc, x) => {
+        if (x.reducer) {
+          acc[x.name] = x.reducer;
+        }
+        return acc;
+      },
+      {}
+    );
+    const additionalInitState = additionalStoreParams.reduce(
+      (acc, x) => {
+        acc[x.name] = x.state;
 
-  const jsonForms = document.createElement('json-forms') as JsonFormsElement;
-  const additionalReducers = additionalStoreParams.reduce(
-    (acc, x) => {
-      acc[x.name] = x.reducer;
-      return acc;
-    },
-    {}
-  );
-  const additionalInitState = additionalStoreParams.reduce(
-    (acc, x) => {
-      acc[x.name] = x.state;
-      return acc;
-    },
-    {}
-  );
+        return acc;
+      },
+      {}
+    );
 
-  jsonForms.store = createStore(
-    combineReducers({
+    jsonForms.store = createStore(
+      combineReducers({
         jsonforms: jsonformsReducer(
           {
             i18n: i18nReducer,
             ...additionalReducers
           },
         )
       }
-    ),
-    {
-      jsonforms: {
-        core: {
-          data: example.data,
-          schema: example.schema,
-          uischema: example.uiSchema
-        },
-        i18n: {
-          translations: example.translations,
-          locale: example.locale || navigator.language
-        },
-        transformProps: [translateProps],
-        renderers: JsonFormsInit.renderers,
-        fields: JsonFormsInit.fields,
-        ...additionalInitState
+      ),
+      {
+        jsonforms: {
+          core: {
+            data: example.data,
+            schema: example.schema,
+            uischema: example.uiSchema
+          },
+          renderers,
+          fields,
+          i18n: {
+            translations: example.translations,
+            locale: example.locale || navigator.language
+          },
+          transformProps: [translateProps],
+          ...additionalInitState
+        }
       }
-    }
-  );
+    );
 
-  body.appendChild(jsonForms);
-};
+    body.appendChild(jsonForms);
+  };
 
-export const createExampleSelection = (...additionalStoreParams: AdditionalStoreParams[]): HTMLSelectElement => {
+export const createExampleSelection = (
+  renderers: { tester: RankedTester, renderer: any}[],
+  fields: { tester: RankedTester, field: any}[],
+  ...additionalStoreParams: AdditionalStoreParams[]
+): HTMLSelectElement => {
 
-  const examplesDiv = document.getElementById(exampleDivId);
-  const labelExample = document.createElement('label');
-  labelExample.textContent = 'Example:';
-  labelExample.htmlFor = 'example_select';
-  examplesDiv.appendChild(labelExample);
-  const select = document.createElement('select');
-  select.id = 'example_select';
-  Object.keys(knownExamples).forEach(key => {
-    const example = knownExamples[key];
-    const option = document.createElement('option');
-    option.value = example.name;
-    option.label = example.label;
-    option.text = example.label;
-    select.appendChild(option);
-  });
-  select.onchange = () => {
-    changeExample(select.value, ...additionalStoreParams);
-  };
-  examplesDiv.appendChild(select);
-  changeExample(select.value, ...additionalStoreParams);
+    const examplesDiv = document.getElementById(exampleDivId);
+    const labelExample = document.createElement('label');
+    labelExample.textContent = 'Example:';
+    labelExample.htmlFor = 'example_select';
+    examplesDiv.appendChild(labelExample);
+    const select = document.createElement('select');
+    select.id = 'example_select';
+    Object.keys(knownExamples).forEach(key => {
+      const example = knownExamples[key];
+      const option = document.createElement('option');
+      option.value = example.name;
+      option.label = example.label;
+      option.text = example.label;
+      select.appendChild(option);
+    });
+    select.onchange = () => {
+      changeExample(select.value, renderers, fields,  ...additionalStoreParams);
+    };
+    examplesDiv.appendChild(select);
+    changeExample(select.value, renderers, fields, ...additionalStoreParams);
 
-  return select;
-};
+    return select;
+  };

packages/material/example/index.ts

@@ -1,5 +1,9 @@
 import { createExampleSelection } from '../../examples/src/register';
+import { materialFields, materialRenderers } from '../src';
 
 window.onload = () => {
-  createExampleSelection();
+  createExampleSelection(
+    materialRenderers,
+    materialFields
+  );
 };

packages/material/package.json

@@ -37,8 +37,6 @@
     "material-ui": "1.0.0-beta.25",
     "material-ui-icons": "^1.0.0-beta.17",
     "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-redux": "^5.0.6",
     "redux": "^3.7.2"
   },
   "devDependencies": {
@@ -50,6 +48,7 @@
     "jsdom": "^11.5.1",
     "jsdom-global": "^3.0.2",
     "react-dom": "^16.2.0",
+    "react-redux": "^5.0.6",
     "source-map-loader": "^0.2.3",
     "ts-loader": "^3.2.0",
     "tslint-loader": "^3.5.3",

packages/material/src/complex/MaterialArrayControlRenderer.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 
 import {
+  connectToJsonForms,
   mapDispatchToTableControlProps,
   mapStateToTableControlProps,
   RendererComponent,
   TableControlProps
 } from '@jsonforms/core';
-import { connect } from 'react-redux';
 import { TableToolbar } from './TableToolbar';
 import { MaterialTableControl } from './MaterialTableControl';
 import Button from 'material-ui/Button';
@@ -129,7 +129,7 @@ export interface TableState {
   openConfirmDelete: boolean;
 }
 
-export default connect(
+export default connectToJsonForms(
   mapStateToTableControlProps,
-  mapDispatchToTableControlProps)
-(MaterialArrayControlRenderer);
+  mapDispatchToTableControlProps
+)(MaterialArrayControlRenderer);

packages/material/src/complex/index.ts

@@ -1,13 +1,9 @@
 import {
-    isArrayObjectControl,
-    rankWith,
-    registerStartupRenderer,
+  isArrayObjectControl,
+  RankedTester,
+  rankWith,
 } from '@jsonforms/core';
 import MaterialArrayControlRenderer from './MaterialArrayControlRenderer';
 
-registerStartupRenderer(
-    rankWith(3, isArrayObjectControl),
-    MaterialArrayControlRenderer
-);
-
-export default MaterialArrayControlRenderer;
+export const materialArrayControlTester: RankedTester = rankWith(3, isArrayObjectControl);
+export { MaterialArrayControlRenderer };

packages/material/src/controls/MaterialBooleanControl.tsx

@@ -4,8 +4,8 @@ import {
   ControlProps,
   isBooleanControl,
   mapStateToControlProps,
-  rankWith,
-  registerStartupRenderer
+  RankedTester,
+  rankWith
 } from '@jsonforms/core';
 
 import { FormControlLabel } from 'material-ui/Form';
@@ -32,6 +32,5 @@ const ConnectedMaterialBooleanControl = connectToJsonForms(
   mapStateToControlProps
 )(MaterialBooleanControl);
 
-registerStartupRenderer(rankWith(2, isBooleanControl), ConnectedMaterialBooleanControl);
-
+export const materialBooleanControlTester: RankedTester = rankWith(2, isBooleanControl);
 export default ConnectedMaterialBooleanControl;