Add dynamic prettier loader

packages/embla-carousel-docs/src/components/CodeSandbox/Basic/Default.tsx

@@ -1,17 +1,20 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { createSandboxReactPackageJson } from '../createSandboxReactPackageJson'
 import { createSandboxReact } from '../createSandboxReact'
+import { useRoutes } from 'hooks/useRoutes'
 
 const CarouselJs: string =
   require('!!raw-loader!embla-carousel-react-sandboxes/src/SandboxFilesDist/CarouselDefault.jsx').default
+
 const packageJson = createSandboxReactPackageJson({
   name: 'embla-carousel-react-default',
 })
 
-export const createSandboxReactDefault = async (): Promise<string> =>
+export const createSandboxReactDefault = (): Promise<string> =>
   createSandboxReact(packageJson, CarouselJs)
 
 export const CreateSandboxReactDefault = () => {
+  const { setIsLoading } = useRoutes()
   const [sandbox, setSandbox] = useState('')
   const formRef = useRef<HTMLFormElement>(null)
 
@@ -20,15 +23,18 @@ export const CreateSandboxReactDefault = () => {
       event.preventDefault()
       if (sandbox) return formRef.current?.submit()
 
+      setIsLoading(true)
       const codeSandbox = await createSandboxReactDefault()
       setSandbox(codeSandbox)
     },
-    [sandbox],
+    [sandbox, setIsLoading],
   )
 
   useEffect(() => {
-    if (sandbox) formRef.current?.submit()
-  }, [sandbox])
+    if (!sandbox) return
+    formRef.current?.submit()
+    setIsLoading(false)
+  }, [sandbox, setIsLoading])
 
   return (
     <form

packages/embla-carousel-docs/src/components/CodeSandbox/createSandboxReact.ts

@@ -1,19 +1,18 @@
 import { EmblaOptionsType } from 'embla-carousel-react'
-import prettierrc from '../../../../../.prettierrc'
 import { getParameters } from 'codesandbox/lib/api/define'
 import { PackageJsonType, SandboxConfigType } from './types'
 import { resetStyles } from 'components/Layout/GlobalStyles/reset'
 import { baseStyles } from 'components/Layout/GlobalStyles/base'
 import { fontStyles } from 'components/Layout/GlobalStyles/font'
 import { themeStyles } from 'consts/themes'
-import { Options as PretterOptions } from 'prettier'
 import { styledComponentsStylesToString } from 'utils/styledComponentStylesToString'
 import { createSandboxReactIndexHtml } from './createSandboxReactIndexHtml'
 import { createSandboxReactDefaultEntry } from './createSandboxReactEntry'
 import { createCarouselDefaultStyles } from 'components/Examples/createCarouselStyles'
 import { createSandboxReactHeader } from './createSandboxReactHeader'
 import { createSandboxReactFooter } from './createSandboxReactFooter'
 import { createSandboxReactImages } from './createSandboxReactImages'
+import { loadPrettier } from 'utils/loadPrettier'
 import { URLS } from 'consts/urls'
 import {
   sandboxCarouselStyles,
@@ -22,8 +21,6 @@ import {
   sandboxWrapperStyles,
 } from 'components/Examples/sandboxStyles'
 
-const PRETTIER_CONFIG = <PretterOptions>prettierrc
-
 const BASE_CSS = styledComponentsStylesToString(
   themeStyles,
   resetStyles,
@@ -37,6 +34,10 @@ const SANDBOX_CSS = styledComponentsStylesToString(
   sandboxFooterStyles,
 )
 
+const SANDBOX_CAROUSEL_CSS = styledComponentsStylesToString(
+  sandboxCarouselStyles,
+)
+
 export const createSandboxReact = async (
   packageJson: PackageJsonType,
   carousel: string,
@@ -45,23 +46,12 @@ export const createSandboxReact = async (
   styles: string = createCarouselDefaultStyles(),
   customConfig?: SandboxConfigType['files'],
 ): Promise<string> => {
-  const prettier = await import('prettier')
-  const prettierPostCssParser = await import('prettier/parser-postcss')
-  const prettierBabelParser = await import('prettier/parser-babel')
-
-  const emblaCss = prettier.format(
-    styledComponentsStylesToString(sandboxCarouselStyles) + styles,
-    {
-      ...PRETTIER_CONFIG,
-      parser: 'css',
-      plugins: [prettierPostCssParser],
-    },
-  )
+  const { prettierConfig, formatCss, formatJs } = await loadPrettier()
 
   const DEFAULT_CONFIG: SandboxConfigType['files'] = {
     '.prettierrc': {
       isBinary: false,
-      content: JSON.stringify(prettierrc, null, '\t'),
+      content: JSON.stringify(prettierConfig, null, '\t'),
     },
     'package.json': {
       isBinary: false,
@@ -73,39 +63,35 @@ export const createSandboxReact = async (
     },
     'src/css/base.css': {
       isBinary: false,
-      content: BASE_CSS,
+      content: formatCss(BASE_CSS),
     },
     'src/css/sandbox.css': {
       isBinary: false,
-      content: SANDBOX_CSS,
+      content: formatCss(SANDBOX_CSS),
     },
     'src/css/embla.css': {
       isBinary: false,
-      content: emblaCss,
+      content: formatCss(SANDBOX_CAROUSEL_CSS + styles),
     },
     'src/js/index.js': {
       isBinary: false,
-      content: createSandboxReactDefaultEntry(slideCount, options),
+      content: formatJs(createSandboxReactDefaultEntry(slideCount, options)),
     },
     'src/js/Header.js': {
       isBinary: false,
-      content: createSandboxReactHeader(packageJson.name),
+      content: formatJs(createSandboxReactHeader(packageJson.name)),
     },
     'src/js/Footer.js': {
       isBinary: false,
-      content: createSandboxReactFooter(),
+      content: formatJs(createSandboxReactFooter()),
     },
     'src/js/EmblaCarousel.js': {
       isBinary: false,
-      content: prettier.format(carousel, {
-        ...PRETTIER_CONFIG,
-        parser: 'babel',
-        plugins: [prettierBabelParser],
-      }),
+      content: formatJs(carousel),
     },
     'src/js/imageByIndex.js': {
       isBinary: false,
-      content: createSandboxReactImages(),
+      content: formatJs(createSandboxReactImages()),
     },
     'src/images/slide-1.jpg': {
       isBinary: true,

packages/embla-carousel-docs/src/components/CodeSandbox/createSandboxReactPackageJson.ts

@@ -28,7 +28,7 @@ const sandboxReactPackageJsonTemplate: PackageJsonType = {
 }
 
 export const createSandboxReactPackageJson = (
-  customConfig: Record<string, unknown>,
+  customConfig: Partial<PackageJsonType>,
 ): PackageJsonType => {
   return Object.assign({}, sandboxReactPackageJsonTemplate, customConfig)
 }

packages/embla-carousel-docs/src/utils/loadPrettier.ts

@@ -0,0 +1,35 @@
+import prettierrc from '../../.prettierrc'
+import { Options as PretterOptions } from 'prettier'
+
+const PRETTIER_CONFIG = <PretterOptions>prettierrc
+
+export const loadPrettier = async () => {
+  const prettier = await import('prettier')
+  const cssParser = await import('prettier/parser-postcss')
+  const babelParser = await import('prettier/parser-babel')
+
+  const prettierCssParser: PretterOptions = {
+    ...PRETTIER_CONFIG,
+    parser: 'css',
+    plugins: [cssParser],
+  }
+
+  const prettierBabelParser: PretterOptions = {
+    ...PRETTIER_CONFIG,
+    parser: 'babel',
+    plugins: [babelParser],
+  }
+
+  const formatCss = (css: string): string =>
+    prettier.format(css, prettierCssParser)
+
+  const formatJs = (js: string): string =>
+    prettier.format(js, prettierBabelParser)
+
+  return {
+    prettier,
+    prettierConfig: PRETTIER_CONFIG,
+    formatCss,
+    formatJs,
+  }
+}