[docs-infra] Fix TypeScrit error in demo export

oliviertassinari · Jul 5, 2023 · c437555 · c437555
1 parent 41f15df
commit c437555
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 72 deletions.
diff --git a/docs/src/modules/sandbox/CodeSandbox.ts b/docs/src/modules/sandbox/CodeSandbox.ts
@@ -1,10 +1,10 @@
 // @ts-ignore
 import LZString from 'lz-string';
 import addHiddenInput from 'docs/src/modules/utils/addHiddenInput';
-import SandboxDependencies from './Dependencies';
-import * as CRA from './CreateReactApp';
-import getFileExtension from './FileExtension';
-import { CodeVariant, Product, CodeStyling } from './types';
+import SandboxDependencies from 'docs/src/modules/sandbox/Dependencies';
+import * as CRA from 'docs/src/modules/sandbox/CreateReactApp';
+import getFileExtension from 'docs/src/modules/sandbox/FileExtension';
+import { DemoData, CodeVariant, CodeStyling } from 'docs/src/modules/sandbox/types';
 
 function compress(object: any) {
   return LZString.compressToBase64(JSON.stringify(object))
@@ -33,36 +33,28 @@ function openSandbox({ files, codeVariant, initialFile = '/App' }: any) {
   document.body.removeChild(form);
 }
 
-const createReactApp = (demo: {
-  title: string;
-  language: string;
-  raw: string;
-  codeVariant: CodeVariant;
-  githubLocation: string;
-  productId?: Product;
-  codeStyling: CodeStyling;
-}) => {
-  const ext = getFileExtension(demo.codeVariant);
-  const { title, githubLocation: description } = demo;
+const createReactApp = (demoData: DemoData) => {
+  const ext = getFileExtension(demoData.codeVariant);
+  const { title, githubLocation: description } = demoData;
 
   const files: Record<string, object> = {
     'public/index.html': {
-      content: CRA.getHtml(demo),
+      content: CRA.getHtml(demoData),
     },
     [`index.${ext}`]: {
-      content: CRA.getRootIndex(demo.productId),
+      content: CRA.getRootIndex(demoData),
     },
     [`demo.${ext}`]: {
-      content: demo.raw,
+      content: demoData.raw,
     },
-    ...(demo.codeVariant === 'TS' && {
+    ...(demoData.codeVariant === 'TS' && {
       'tsconfig.json': {
         content: CRA.getTsconfig(),
       },
     }),
   };
 
-  const { dependencies, devDependencies } = SandboxDependencies(demo, {
+  const { dependencies, devDependencies } = SandboxDependencies(demoData, {
     commitRef: process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined,
   });
 
@@ -71,7 +63,7 @@ const createReactApp = (demo: {
       description,
       dependencies,
       devDependencies,
-      ...(demo.codeVariant === 'TS' && {
+      ...(demoData.codeVariant === 'TS' && {
         main: 'index.tsx',
         scripts: {
           start: 'react-scripts start',
@@ -92,26 +84,27 @@ const createReactApp = (demo: {
      * it will be appended based on the code variant.
      */
     openSandbox: (initialFile?: string) =>
-      openSandbox({ files, codeVariant: demo.codeVariant, initialFile }),
+      openSandbox({ files, codeVariant: demoData.codeVariant, initialFile }),
   };
 };
 
-const createJoyTemplate = (demo: {
+const createJoyTemplate = (templateData: {
   title: string;
   files: Record<string, string>;
   githubLocation: string;
-  codeVariant: 'TS' | 'JS';
-  codeStyling?: 'Tailwind' | 'MUI System';
+  codeVariant: CodeVariant;
+  codeStyling?: CodeStyling;
 }) => {
-  const ext = getFileExtension(demo.codeVariant);
-  const { title, githubLocation: description } = demo;
+  const ext = getFileExtension(templateData.codeVariant);
+  const { title, githubLocation: description } = templateData;
+  const type = templateData.codeVariant === 'TS' ? ' as HTMLElement' : '';
 
   const files: Record<string, object> = {
     'public/index.html': {
       content: CRA.getHtml({
-        title: demo.title,
+        title: templateData.title,
         language: 'en',
-        codeStyling: demo.codeStyling ?? 'MUI System',
+        codeStyling: templateData.codeStyling ?? 'MUI System',
       }),
     },
     [`index.${ext}`]: {
@@ -120,15 +113,15 @@ import * as ReactDOM from 'react-dom/client';
 import { StyledEngineProvider } from '@mui/joy/styles';
 import App from './App';
 
-ReactDOM.createRoot(document.querySelector("#root")).render(
+ReactDOM.createRoot(document.querySelector("#root")${type}).render(
   <React.StrictMode>
     <StyledEngineProvider injectFirst>
       <App />
     </StyledEngineProvider>
   </React.StrictMode>
 );`,
     },
-    ...Object.entries(demo.files).reduce(
+    ...Object.entries(templateData.files).reduce(
       (prev, curr) => ({
         ...prev,
         [curr[0]]: {
@@ -137,7 +130,7 @@ ReactDOM.createRoot(document.querySelector("#root")).render(
       }),
       {},
     ),
-    ...(demo.codeVariant === 'TS' && {
+    ...(templateData.codeVariant === 'TS' && {
       'tsconfig.json': {
         content: CRA.getTsconfig(),
       },
@@ -146,8 +139,8 @@ ReactDOM.createRoot(document.querySelector("#root")).render(
 
   const { dependencies, devDependencies } = SandboxDependencies(
     {
-      codeVariant: demo.codeVariant,
-      raw: Object.entries(demo.files).reduce((prev, curr) => `${prev}\n${curr}`, ''),
+      codeVariant: templateData.codeVariant,
+      raw: Object.entries(templateData.files).reduce((prev, curr) => `${prev}\n${curr}`, ''),
       productId: 'joy-ui',
     },
     {
@@ -160,7 +153,7 @@ ReactDOM.createRoot(document.querySelector("#root")).render(
       description,
       dependencies,
       devDependencies,
-      ...(demo.codeVariant === 'TS' && {
+      ...(templateData.codeVariant === 'TS' && {
         main: 'index.tsx',
         scripts: {
           start: 'react-scripts start',
@@ -175,7 +168,7 @@ ReactDOM.createRoot(document.querySelector("#root")).render(
     dependencies,
     devDependencies,
     openSandbox: (initialFile?: string) =>
-      openSandbox({ files, codeVariant: demo.codeVariant, initialFile }),
+      openSandbox({ files, codeVariant: templateData.codeVariant, initialFile }),
   };
 };
 

diff --git a/docs/src/modules/sandbox/CreateReactApp.ts b/docs/src/modules/sandbox/CreateReactApp.ts
@@ -45,14 +45,16 @@ export const getHtml = ({
 </html>`;
 };
 
-export const getRootIndex = (productId?: 'joy-ui' | 'base-ui') => {
-  if (productId === 'joy-ui') {
+export function getRootIndex(demoData) {
+  const type = demoData.codeVariant === 'TS' ? ' as HTMLElement' : '';
+
+  if (demoData.productId === 'joy-ui') {
     return `import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { StyledEngineProvider, CssVarsProvider } from '@mui/joy/styles';
 import Demo from './demo';
 
-ReactDOM.createRoot(document.querySelector("#root")).render(
+ReactDOM.createRoot(document.querySelector("#root")${type}).render(
   <React.StrictMode>
     <StyledEngineProvider injectFirst>
       <CssVarsProvider>
@@ -62,30 +64,32 @@ ReactDOM.createRoot(document.querySelector("#root")).render(
   </React.StrictMode>
 );`;
   }
-  if (productId === 'base-ui') {
+
+  if (demoData.productId === 'base-ui') {
     return `import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import Demo from './demo';
 
-ReactDOM.createRoot(document.querySelector("#root")).render(
+ReactDOM.createRoot(document.querySelector("#root")${type}).render(
   <React.StrictMode>
     <Demo />
   </React.StrictMode>
 );`;
   }
+
   return `import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { StyledEngineProvider } from '@mui/material/styles';
 import Demo from './demo';
 
-ReactDOM.createRoot(document.querySelector("#root")).render(
+ReactDOM.createRoot(document.querySelector("#root")${type}).render(
   <React.StrictMode>
     <StyledEngineProvider injectFirst>
       <Demo />
     </StyledEngineProvider>
   </React.StrictMode>
 );`;
-};
+}
 
 export const getTsconfig = () => `{
   "compilerOptions": {

diff --git a/docs/src/modules/sandbox/Dependencies.ts b/docs/src/modules/sandbox/Dependencies.ts
@@ -1,4 +1,5 @@
-import { CODE_VARIANTS } from '../constants';
+import { CODE_VARIANTS } from 'docs/src/modules/constants';
+import type { MuiProductId } from 'docs/src/modules/utils/getProductInfoFromUrl';
 
 type RegExpMatchArrayWithGroupsOnly<T> = {
   groups?: {
@@ -10,7 +11,7 @@ type RegExpMatchArrayWithGroups<T> = (RegExpMatchArray & RegExpMatchArrayWithGro
 export default function SandboxDependencies(
   demo: {
     raw: string;
-    productId?: 'joy-ui' | 'base-ui';
+    productId?: MuiProductId;
     codeVariant: keyof typeof CODE_VARIANTS;
   },
   options?: { commitRef?: string },

diff --git a/docs/src/modules/sandbox/StackBlitz.ts b/docs/src/modules/sandbox/StackBlitz.ts
@@ -1,32 +1,24 @@
 import addHiddenInput from 'docs/src/modules/utils/addHiddenInput';
 import { CODE_VARIANTS } from 'docs/src/modules/constants';
-import SandboxDependencies from './Dependencies';
-import * as CRA from './CreateReactApp';
-import getFileExtension from './FileExtension';
-import { CodeVariant, Product, CodeStyling } from './types';
+import SandboxDependencies from 'docs/src/modules/sandbox/Dependencies';
+import * as CRA from 'docs/src/modules/sandbox/CreateReactApp';
+import getFileExtension from 'docs/src/modules/sandbox/FileExtension';
+import { DemoData } from 'docs/src/modules/sandbox/types';
 
-const createReactApp = (demo: {
-  title: string;
-  language: string;
-  raw: string;
-  codeVariant: CodeVariant;
-  githubLocation: string;
-  productId?: Product;
-  codeStyling?: CodeStyling;
-}) => {
-  const ext = getFileExtension(demo.codeVariant);
-  const { title, githubLocation: description } = demo;
+const createReactApp = (demoData: DemoData) => {
+  const ext = getFileExtension(demoData.codeVariant);
+  const { title, githubLocation: description } = demoData;
 
   const files: Record<string, string> = {
-    'index.html': CRA.getHtml(demo),
-    [`index.${ext}`]: CRA.getRootIndex(demo.productId),
-    [`demo.${ext}`]: demo.raw,
-    ...(demo.codeVariant === 'TS' && {
+    'index.html': CRA.getHtml(demoData),
+    [`index.${ext}`]: CRA.getRootIndex(demoData),
+    [`demo.${ext}`]: demoData.raw,
+    ...(demoData.codeVariant === 'TS' && {
       'tsconfig.json': CRA.getTsconfig(),
     }),
   };
 
-  const { dependencies, devDependencies } = SandboxDependencies(demo, {
+  const { dependencies, devDependencies } = SandboxDependencies(demoData, {
     // Waiting for https://github.com/stackblitz/core/issues/437
     // commitRef: process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined,
   });
@@ -38,7 +30,7 @@ const createReactApp = (demo: {
     dependencies,
     devDependencies,
     openSandbox: (initialFile = 'App') => {
-      const extension = demo.codeVariant === CODE_VARIANTS.TS ? '.tsx' : '.js';
+      const extension = demoData.codeVariant === CODE_VARIANTS.TS ? '.tsx' : '.js';
       // ref: https://developer.stackblitz.com/docs/platform/post-api/
       const form = document.createElement('form');
       form.method = 'POST';

diff --git a/docs/src/modules/sandbox/types.ts b/docs/src/modules/sandbox/types.ts
@@ -1,3 +1,15 @@
-export type Product = 'joy-ui' | 'base-ui';
+import type { MuiProductId } from 'docs/src/modules/utils/getProductInfoFromUrl';
+
 export type CodeStyling = 'Tailwind' | 'MUI System';
+
 export type CodeVariant = 'TS' | 'JS';
+
+export interface DemoData {
+  title: string;
+  language: string;
+  raw: string;
+  codeVariant: CodeVariant;
+  githubLocation: string;
+  productId?: Exclude<MuiProductId, 'null'>;
+  codeStyling: CodeStyling;
+}
diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js
@@ -405,25 +405,25 @@ function createRender(context) {
 const BaseUIReexportedComponents = ['ClickAwayListener', 'NoSsr', 'Portal', 'TextareaAutosize'];
 
 /**
- * @param {string} product
+ * @param {string} productId
  * @example 'material'
  * @param {string} componentPkg
  * @example 'mui-base'
  * @param {string} component
  * @example 'Button'
  * @returns {string}
  */
-function resolveComponentApiUrl(product, componentPkg, component) {
-  if (!product) {
+function resolveComponentApiUrl(productId, componentPkg, component) {
+  if (!productId) {
     return `/api/${kebabCase(component)}/`;
   }
-  if (product === 'x-date-pickers') {
+  if (productId === 'x-date-pickers') {
     return `/x/api/date-pickers/${kebabCase(component)}/`;
   }
   if (componentPkg === 'mui-base' || BaseUIReexportedComponents.indexOf(component) >= 0) {
     return `/base-ui/react-${kebabCase(component)}/components-api/#${kebabCase(component)}`;
   }
-  return `/${product}/api/${kebabCase(component)}/`;
+  return `/${productId}/api/${kebabCase(component)}/`;
 }
 
 /**