Merge pull request #79 from headwirecom/feature/strict-mode-examplePackage

Turn on strict mode, validate packages on CI

Author: mburri

.travis.yml

@@ -13,6 +13,7 @@ install:
   - npm run init
 
 script:
+  - npm run validate
   - npm run build
   - npm run bundle
   - npm run test-cov

package.json

@@ -11,6 +11,7 @@
     "clean": "lerna run clean",
     "test": "lerna run test",
     "test-cov": "lerna run test-cov",
+    "validate": "lerna run validate",
     "lint": "tslint 'packages/**/*.{ts,tsx}' -c ./tslint.json"
   },
   "devDependencies": {

packages/example/package.json

@@ -20,6 +20,7 @@
     "redux": "^4.0.4"
   },
   "scripts": {
+    "validate": "../../node_modules/.bin/tsc --noEmit",
     "build": "echo 'Nothing to do'",
     "test": "echo 'Nothing to do'"
   }

packages/example/src/App.tsx

@@ -43,10 +43,13 @@ import { TextArea } from './TextArea';
 
 function App(props: AppProps) {
   const setExampleByName = useCallback(
-    (exampleName: string) => {
-      props.changeExample(
-        props.examples.find((example) => example.name === exampleName)
+    (exampleName: string | number) => {
+      const example = props.examples.find(
+        (example) => example.name === exampleName
       );
+      if (example) {
+        props.changeExample(example);
+      }
     },
     [props.changeExample, props.examples]
   );
@@ -149,7 +152,7 @@ export default initializedConnect(App);
 
 function ExamplesPicker(
   props: Omit<AppProps, 'onChange'> & {
-    onChange: (exampleName: string) => void;
+    onChange: (exampleName: string | number) => void;
   }
 ) {
   const options = [

packages/example/src/geographical-location.schema.ts

@@ -44,4 +44,4 @@ export default {
       maximum: 180,
     },
   },
-} as any;
+};

packages/example/src/index.tsx

@@ -59,16 +59,6 @@ import {
 const getExampleSchemas = () => {
   if (window.samples) {
     registerExamples(window.samples);
-  } else {
-    registerExamples([
-      {
-        name: 'spectrum-test',
-        label: 'test',
-        data: { name: 'a sample name' },
-        schema: undefined,
-        uischema: undefined,
-      },
-    ]);
   }
 
   const examples = getExamples();
@@ -90,9 +80,10 @@ const setupStore = (
       renderers: renderers,
     },
     examples: {
+      selectedExample: exampleData[exampleData.length - 1],
       data: exampleData,
     },
-  } as any);
+  });
 
   // Resolve example configuration
   // Add schema to validation

packages/example/src/reduxUtil.ts

@@ -56,10 +56,10 @@ export interface ExampleStateProps {
 
 export interface ExampleDispatchProps {
   changeExample(example: ReactExampleDescription): void;
-  getComponent(example: ReactExampleDescription): React.Component;
+  getComponent(example: ReactExampleDescription): React.Component | null;
   onChange?(
     example: ReactExampleDescription
-  ): (state: Pick<JsonFormsCore, 'data' | 'errors'>) => void;
+  ): ((state: Pick<JsonFormsCore, 'data' | 'errors'>) => void) | null;
 }
 
 export interface AppProps extends ExampleStateProps {
@@ -70,17 +70,17 @@ export interface AppProps extends ExampleStateProps {
 
 const mapStateToProps = (state: any) => {
   const examples = state.examples.data;
-  const selectedExample =
-    state.examples.selectedExample || examples[examples.length - 1];
   const extensionState = state.examples.extensionState;
   return {
     dataAsString: JSON.stringify(getData(state), null, 2),
     examples,
-    selectedExample,
+    selectedExample: state.examples.selectedExample,
     extensionState,
   };
 };
-const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) => ({
+const mapDispatchToProps = (
+  dispatch: Dispatch<AnyAction>
+): ExampleDispatchProps => ({
   changeExample: (example: ReactExampleDescription) => {
     dispatch(changeExample(example));
     dispatch(Actions.init(example.data, example.schema, example.uischema));
@@ -91,7 +91,7 @@ const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) => ({
       ? example.customReactExtension(dispatch)
       : null,
   onChange: (example: ReactExampleDescription) =>
-    example.onChange ? example.onChange(dispatch) : undefined,
+    example.onChange ? example.onChange(dispatch) : null,
 });
 const mergeProps = (
   stateProps: ExampleStateProps,
@@ -105,8 +105,7 @@ const mergeProps = (
       dispatchProps.getComponent(stateProps.selectedExample),
     onChange:
       dispatchProps.onChange &&
-      dispatchProps.onChange(stateProps.selectedExample) &&
-      dispatchProps.onChange(stateProps.selectedExample)(
+      dispatchProps.onChange(stateProps.selectedExample)?.(
         stateProps.extensionState
       ),
   });
@@ -119,7 +118,13 @@ interface ExamplesState {
 
 const initState: ExamplesState = {
   data: [],
-  selectedExample: undefined,
+  selectedExample: {
+    name: 'init',
+    label: 'Init',
+    data: undefined,
+    schema: {},
+    uischema: { type: 'HorizontalLayout' },
+  },
 };
 
 export const exampleReducer = (

packages/example/src/util.tsx

@@ -80,25 +80,32 @@ export interface OwnPropsOfI18nExample {
   ) => (state: Pick<JsonFormsCore, 'data' | 'errors'>) => void;
 }
 
+const supportedLocales = ['de-DE', 'en-US'] as const;
+type SupportedLocale = typeof supportedLocales[number];
+
+function isSupportedLocale(locale: string): locale is SupportedLocale {
+  return (supportedLocales as readonly string[]).includes(locale);
+}
+
 class I18nExampleRenderer extends React.Component<
   I18nExampleProps,
   {
-    localizedSchemas: Map<string, JsonSchema>;
-    localizedUISchemas: Map<string, UISchemaElement>;
+    localizedSchemas: Map<SupportedLocale, JsonSchema>;
+    localizedUISchemas: Map<SupportedLocale, UISchemaElement>;
   }
 > {
   constructor(props: I18nExampleProps) {
     super(props);
     const { schema, uischema } = props;
-    const localizedSchemas = new Map<string, JsonSchema>();
+    const localizedSchemas = new Map<SupportedLocale, JsonSchema>();
     _.set(schema, '$id', 'http://test.json');
     const deSchema = _.cloneDeep(schema);
     _.set(deSchema, 'properties.name.description', 'Name der Person');
     _.set(deSchema, 'properties.name.birthDate', 'Geburtstag der Person');
     localizedSchemas.set('de-DE', deSchema);
     localizedSchemas.set('en-US', schema);
 
-    const localizedUISchemas = new Map<string, UISchemaElement>();
+    const localizedUISchemas = new Map<SupportedLocale, UISchemaElement>();
     const deUISchema = _.cloneDeep(uischema);
     _.set(deUISchema, 'elements.0.elements.1.label', 'Geburtstag');
     _.set(deUISchema, 'elements.2.elements.0.label', 'Nationalität');
@@ -115,11 +122,14 @@ class I18nExampleRenderer extends React.Component<
   }
 
   changeLocale = (locale: string) => {
+    if (!isSupportedLocale(locale)) {
+      throw new Error(`The locale ${locale} is not supported`);
+    }
     const { dispatch, onChange, data, errors } = this.props;
     const { localizedSchemas, localizedUISchemas } = this.state;
     dispatch(setLocale(locale));
-    dispatch(setSchema(localizedSchemas.get(locale)));
-    dispatch(setUISchema(localizedUISchemas.get(locale)));
+    dispatch(setSchema(localizedSchemas.get(locale)!));
+    dispatch(setUISchema(localizedUISchemas.get(locale)!));
     dispatch(updateExampleExtensionState({ locale }));
     onChange(dispatch)({ locale })({ data, errors });
   };
@@ -139,7 +149,7 @@ const withContextToI18nProps = (
 ): React.ComponentType<OwnPropsOfI18nExample> => ({
   ctx,
   props,
-}: JsonFormsStateContext & I18nExampleProps) => {
+}: JsonFormsStateContext & Omit<I18nExampleProps, 'data' | 'errors'>) => {
   const { data, errors } = ctx.core;
   return <Component {...props} data={data} errors={errors} />;
 };

packages/example/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  },
+  "include": ["src/**/*"]
+}

packages/spectrum/package.json

@@ -19,6 +19,7 @@
     "report": "../../node_modules/.bin/nyc report --reporter=html",
     "test": "jest --no-cache",
     "test-cov": "jest --no-cache --coverage",
+    "validate": "../../node_modules/.bin/tsc --noEmit",
     "doc": "../../node_modules/.bin/typedoc --name 'JSON Forms React Spectrum Renderers' --mode file --excludeExternals --theme ../../typedoc-jsonforms --out docs src"
   },
   "keywords": [