Playground and development environment fixes for Lerna

azure-pipelines.yml

@@ -22,10 +22,11 @@ jobs:
       displayName: 'Install Node.js'
     - script: |
         npm install
-        npm test
+        npm run bootstrap
+        npm run build
+        npm run test
         npm run lint
         npm run cs-check
-        npm run dist
       displayName: 'npm install and build'
   - job: Docs
     steps:
@@ -37,4 +38,4 @@ jobs:
     - script: |
         pip install mkdocs==1.0.4
         mkdocs build --clean
-      displayName: 'build docs'
+      displayName: 'build docs'

docs/advanced-customization.md

@@ -550,7 +550,7 @@ You can provide your own implementation of the `SchemaField` base React componen
 To proceed so, pass a `fields` object having a `SchemaField` property to your `Form` component; here's a rather silly example wrapping the standard `SchemaField` lib component:
 
 ```jsx
-import SchemaField from "react-jsonschema-form/lib/components/fields/SchemaField";
+import SchemaField from "@rjsf/core/lib/components/fields/SchemaField";
 
 const CustomSchemaField = function(props) {
   return (

docs/contributing.md

@@ -2,11 +2,23 @@
 
 ### Development server
 
-When developing a package, to run the playground with your latest changes, cd to the package directory and then run `npm start`. For example, to run the playground, run:
+When developing a package, first run from the root-level directory:
+
+```bash
+lerna bootstrap
+```
+
+Then, go to the package directory and then run `npm start` to live-recompile the files for that package. For example, to edit the core package:
 
 ```bash
 cd packages/core
-npm install
+npm start
+```
+
+Finally, to run the playground, go to the playground directory and run `npm start` in another terminal.
+
+```bash
+cd packages/playground
 npm start
 ```
 
@@ -38,28 +50,13 @@ npm test
 Code coverage reports are currently available only for the `@rjsf/core` package. They are generated using [nyc](https://github.com/istanbuljs/nyc) each time the `npm test-coverage` script is run.
 The full report can be seen by opening `./coverage/lcov-report/index.html`.
 
-### Notes on the local playground
-
-The playground located in `packages/playground` contains code that is published as the `@rjsf/playground` package. This package is used by the local playgrounds in packages such as `packages/core`, so that when you run `npm start` from `packages/core`, it will run the playground component from `@rjsf/playground` but with the local changes to react-jsonschema-form.
-
-Note that when doing local development in a package such as `packages/core`, making changes to `packages/playground` will not affect the local playground that is run from `packages/core`. This should be fine in most cases for development, unless you need to update and test the default playground examples. In this case, you could use `npm link` to use the latest changes both from the playground and your package. As an example, to do this when developing locally on `packages/core`, you can run:
-
-```bash
-cd packages/playground
-npm run build:lib
-npm link
-cd ../core
-npm link @rjsf/playground
-npm start
-```
-
-After the above is run, you will have a playground that has both your local changes to `packages/core` and `packages/playground`. Note that while the `packages/core` changes will live reload, the `packages/playground` changes will not -- you will need to run `npm run build:lib` from `packages/playground` each time you update a playground example.
 
 ### Releasing
 
 To release, run:
 
 ```bash
+lerna build
 lerna version
 lerna publish
 git push --tags origin master
@@ -73,7 +70,7 @@ Docs are automatically released using [Read The Docs](https://readthedocs.org/)
 
 #### Releasing the playground
 
-Note that publishing the `@rjsf/playground` package will update the version of the playground used in the local development playgrounds for packages such as `@rjsf/core`, etc. However, in order to publish the latest playground to [https://rjsf-team.github.io/react-jsonschema-form/](https://rjsf-team.github.io/react-jsonschema-form/) after a new rjsf release, run:
+In order to publish the latest playground to [https://rjsf-team.github.io/react-jsonschema-form/](https://rjsf-team.github.io/react-jsonschema-form/) after a new rjsf release, run:
 
 ```bash
 cd packages/playground

docs/index.md

@@ -57,7 +57,7 @@ const {default: Form} = JSONSchemaForm;
 import React, { Component } from "react";
 import { render } from "react-dom";
 
-import Form from "react-jsonschema-form";
+import Form from "@rjsf/core";
 
 const schema = {
   title: "Todo",

docs/theme-customization.md

@@ -7,10 +7,11 @@ The `withTheme` component provides an easy way to extend the functionality of re
 
 ```jsx
 import React, { Component } from 'react';
-import { withTheme } from 'react-jsonschema-form';
-import Bootstrap4Theme from 'react-jsonschema-form-theme-bs4';
+import { withTheme } from '@rjsf/core';
 
-const ThemedForm = withTheme(Bootstrap4Theme); 
+const theme = { widgets: {test: () => <div>test</div> } };
+
+const ThemedForm = withTheme(theme); 
 class Demo extends Component {
     render() {
         return <ThemedForm schema={{...}} uiSchema={{...}} />

netlify.toml

@@ -1,7 +1,7 @@
 [build]
-  base = "packages/playground"
-  publish = "build"
-  command = "npm run build:playground"
+  base = ""
+  publish = "packages/playground/build"
+  command = "npm run bootstrap && npm run build"
 
 [build.environment]
   SHOW_NETLIFY_BADGE = "true"

package.json

@@ -12,7 +12,8 @@
     "lint": "lerna run lint",
     "cs-check": "lerna run cs-check",
     "cs-format": "lerna run cs-format",
-    "dist": "lerna run dist"
+    "build": "lerna run --stream build",
+    "start": "lerna run start --stream --parallel"
   },
   "dependencies": {
     "prettier": "^1.18.2",

packages/core/babel.config.js

@@ -0,0 +1,44 @@
+const BABEL_ENV = process.env.BABEL_ENV;
+
+const defaultPlugins = [
+  '@babel/plugin-proposal-class-properties',
+  '@babel/plugin-proposal-object-rest-spread',
+  '@babel/plugin-proposal-optional-chaining',
+  // IE 11 support
+  '@babel/plugin-transform-object-assign'
+];
+
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        modules: ["cjs", "test"].includes(BABEL_ENV) ? "commonjs" : false,
+        targets:
+          BABEL_ENV === "test" ? { node: "current" } : { browsers: "defaults" },
+      },
+    ],
+    "@babel/preset-react",
+  ],
+  env: {
+    cjs: {
+      plugins: defaultPlugins,
+      ignore: ['test/**/*.js']
+    },
+    umd: {
+      plugins: defaultPlugins,
+      ignore: ['test/**/*.js']
+    },
+    es: {
+      plugins: [
+        ...defaultPlugins,
+        ['@babel/plugin-transform-runtime', { useESModules: true, corejs: 2 }]
+      ],
+      ignore: ['test/**/*.js']
+    },
+    test: {
+      plugins: defaultPlugins,
+      ignore: []
+    }
+  },
+};