Remove reference to vanilla styles from example module (#788)

- vanillaStyles are passed via new additionalState parameter
- Clean up example tsconfig

Author: eneufeld

packages/examples/src/day1.ts

@@ -1,3 +1,5 @@
+import { registerExamples } from './register';
+
 export const schema = {
   type: 'object',
   properties: {
@@ -19,3 +21,12 @@ export const data = {
   description: 'Confirm if you have passed the subject\nHereby ...',
   done: true,
 };
+registerExamples([
+  {
+    name: 'day1',
+    label: 'Day 1',
+    data,
+    schema,
+    uiSchema: undefined
+  }
+]);

packages/examples/src/day3.ts

@@ -1,5 +1,5 @@
 import { registerExamples } from './register';
-import { schema as day2Schema, uischema as day2UiSchema, data as day2Data } from './day2';
+import { data as day2Data, schema as day2Schema, uischema as day2UiSchema } from './day2';
 
 export const schema = {
   type: 'object',

packages/examples/src/register.ts

@@ -1,17 +1,20 @@
 import { JsonFormsElement } from '@jsonforms/core';
 import { ExampleDescription } from './example';
-import { vanillaStyles } from '../../vanilla/src/helpers';
 
 declare let exampleDivId;
 declare let viewDivId;
 
 const knownExamples: {[key: string]: ExampleDescription} = {};
 
+export interface AdditionalState {
+  [x: string]: any;
+}
+
 export const registerExamples = (examples: ExampleDescription[]): void => {
   examples.forEach(example => knownExamples[example.name] = example);
 };
 
-export const changeExample = (selectedExample: string) => {
+export const changeExample = (selectedExample: string, additionalState: AdditionalState) => {
   let body = document.getElementById(viewDivId);
   if (body.firstChild !== null && body.firstChild.childNodes.length !== 0) {
     body.removeChild(body.firstChild);
@@ -29,13 +32,13 @@ export const changeExample = (selectedExample: string) => {
     data: example.data,
     schema: example.schema,
     uischema: example.uiSchema,
-    styles: vanillaStyles
+    ...additionalState,
   };
 
   body.appendChild(jsonForms);
 };
 
-export const createExampleSelection = (): HTMLSelectElement => {
+export const createExampleSelection = (additionalState?: AdditionalState): HTMLSelectElement => {
   const examplesDiv = document.getElementById(exampleDivId);
   const labelExample = document.createElement('label');
   labelExample.textContent = 'Example:';
@@ -52,10 +55,10 @@ export const createExampleSelection = (): HTMLSelectElement => {
     select.appendChild(option);
   });
   select.onchange = () => {
-    changeExample(select.value);
+    changeExample(select.value, additionalState);
   };
   examplesDiv.appendChild(select);
-  changeExample(select.value);
+  changeExample(select.value, additionalState);
 
   return select;
 };

packages/examples/tsconfig.json

@@ -1,17 +1,7 @@
 {
+  "extends": "../../tsconfig.base",
   "compilerOptions": {
-    "baseUrl": "src",
-    "declaration": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": ["es6", "dom"],
-    "module": "commonjs",
-    "moduleResolution": "node",
     "outDir": "dist/ts-build",
-    "sourceMap": true,
-    "target": "es5",
-    "jsx": "react",
-    "typeRoots": ["../../node_modules/@types"]
   },
   "exclude":[
     "node_modules"

packages/vanilla/example/index.ts

@@ -1,7 +1,8 @@
 import { createExampleSelection } from '../../examples/src/register';
 import { createThemeSelection } from './theme.switcher';
+import { vanillaStyles } from '../src/helpers';
 
 window.onload = () => {
-  createExampleSelection();
+  createExampleSelection({styles: vanillaStyles});
   createThemeSelection();
 };