Reintroduce switchable prop and use diff syntax

Author: rvsia

packages/react-renderer-demo/src/components/code-editor/index.js

@@ -48,7 +48,18 @@ const CodeEditor = ({ value, children, className, inExample }) => {
 
   const lang = className ? className.toLowerCase().replace('language-', '') : undefined;
   let content = value || children || '';
-  content = tranformImports(content);
+
+  // read props from code in --- { "key": value } ---\n format
+  let propsFromMD = content.match(/--- .* ---/);
+  if (propsFromMD) {
+    propsFromMD = JSON.parse(propsFromMD[0].replace(/-/g, ''));
+    content = content.replace(/--- .* ---\n/, '');
+  }
+
+  if (propsFromMD?.switchable !== false) {
+    content = tranformImports(content);
+  }
+
   content = content.substring(0, content.length - 1);
 
   return (

packages/react-renderer-demo/src/pages/migration-guide-v3.md

@@ -16,6 +16,12 @@ PatternFly 3 mapper is now removed. You can still use the mapper from version 2,
 
 Migration should be simple - most of the components share the same API so replacing imports should work fine in most cases.
 
+```diff
+--- { "switchable": false } ---
+-import { componentMapper, FormTemplate } from '@data-driven-forms/pf3-component-mapper';
++import { componentMapper, FormTemplate } from '@data-driven-forms/pf4-component-mapper';
+```
+
 ---
 
 ## New build process
@@ -32,37 +38,27 @@ UMD format is no longer supported. The import paths for UMD packages now lead to
 
 Due to the new build process, you have to change your imports path, if you use relative imports of specific components or if you consume the specific module system package. There are no longer module system and the dist folder specified.
 
-**Before**
-
-`import useFieldApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-field-api';`
-
-<br />
-
-**After**
-
-`import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';`
-
-<br />
+```diff
+--- { "switchable": false } ---
+-import useFieldApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-field-api';;
++import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
+```
 
 You can use [babel-transform-plugin](/optimization#transformingimportsinbabel) to do this change for you.
 
 ### FormRenderer is longer a default export
 
 FormRenderer component is no longer a default export of the `react-form-renderer` package.
 
-**Before**
-
-`import FormRenderer from '@data-driven-forms/react-form-renderer';`
-
-<br />
-
-**After**
-
-`import { FormRenderer } from '@data-driven-forms/react-form-renderer';`
+```diff
+--- { "switchable": false } ---
+-import FormRenderer from '@data-driven-forms/react-form-renderer';
++import { FormRenderer } from '@data-driven-forms/react-form-renderer';
 
-or
+// or
 
-`import { FormRenderer } from '@data-driven-forms/react-form-renderer/form-renderer';`
++import { FormRenderer } from '@data-driven-forms/react-form-renderer/form-renderer';
+```
 
 <br />
 

packages/react-renderer-demo/src/pages/optimization.md

@@ -72,12 +72,10 @@ module.exports = {
 
 Result:
 
-
-`import { useField } from '@data-driven-forms/react-form-renderer';`
-
-will be converted to
-
-`import useField from '@data-driven-forms/react-form-renderer/use-field';`
-
+```diff
+--- { "switchable": false } ---
+-import { useField } from '@data-driven-forms/react-form-renderer';
++import useField from '@data-driven-forms/react-form-renderer/use-field';
+```
 
 </DocPage>