Switch to lazy import in code examples

Fixed code duplication in all code examples. This was cause due to the
require context. It was forcing webpack to parse the whole directory.

Author: Hyperkid123

packages/react-renderer-demo/src/app/src/components/code-example.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment, useEffect, useState, lazy, useRef } from 'react';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
@@ -24,10 +24,6 @@ const CodeEditor = dynamic(import('./code-editor'), {
   ssr: false
 });
 
-const reqSource = require.context('!raw-loader!@docs/examples', true, /\.js/);
-const reqCss = require.context('!raw-loader!@docs/examples', true, /\.css/);
-const req = require.context('@docs/examples', true, /\.js/);
-
 const useStyles = makeStyles((theme) => ({
   codeWrapper: {
     background: '#1D1F21',
@@ -138,23 +134,16 @@ const getPayload = (type, code, sourceFiles = {}) =>
   });
 
 const CodeExample = ({ source, mode, mapper, additionalSources }) => {
+  const {current: Component} = useRef(mode === 'preview' ? dynamic(import(`@docs/examples/${source}`)) : Fragment)
+  const [codeSource, setCodeSource] = useState('');
+  const sourceFiles = [];
+  useEffect(() => {
+    import(`!raw-loader!@docs/examples/${source}`).then(file => {
+      setCodeSource(file.default)
+    })
+  }, [source])
   const classes = useStyles();
-  const codeSource = reqSource(`./${source}.js`).default;
-  let Component;
   if (mode === 'preview') {
-    Component = req(`./${source}.js`).default;
-    const sourceFiles = additionalSources
-      ? additionalSources.split(',').reduce(
-          (acc, curr) => ({
-            ...acc,
-            [`src/${curr.split('/').pop()}`]: {
-              content: curr.match(/\.css$/) ? reqCss(`./${curr}`).default : reqSource(`./${curr}`).default
-            }
-          }),
-          {}
-        )
-      : {};
-
     return (
       <Grid container spacing={0} className="DocRawComponent">
         <Grid item xs={12}>