From c4375555d7fc12708090395608371852c85cb325 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 5 Jul 2023 15:28:24 +0200 Subject: [PATCH] [docs-infra] Fix TypeScrit error in demo export --- docs/src/modules/sandbox/CodeSandbox.ts | 65 ++++++++++------------ docs/src/modules/sandbox/CreateReactApp.ts | 18 +++--- docs/src/modules/sandbox/Dependencies.ts | 5 +- docs/src/modules/sandbox/StackBlitz.ts | 34 +++++------ docs/src/modules/sandbox/types.ts | 14 ++++- packages/markdown/parseMarkdown.js | 10 ++-- 6 files changed, 74 insertions(+), 72 deletions(-) diff --git a/docs/src/modules/sandbox/CodeSandbox.ts b/docs/src/modules/sandbox/CodeSandbox.ts index 854b84784811fc..43608f800f0ba1 100644 --- 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 = { '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; 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 = { '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,7 +113,7 @@ 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( @@ -128,7 +121,7 @@ ReactDOM.createRoot(document.querySelector("#root")).render( );`, }, - ...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 index bb97230e984058..690be48dbd6a2a 100644 --- a/docs/src/modules/sandbox/CreateReactApp.ts +++ b/docs/src/modules/sandbox/CreateReactApp.ts @@ -45,14 +45,16 @@ export const getHtml = ({ `; }; -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( @@ -62,30 +64,32 @@ ReactDOM.createRoot(document.querySelector("#root")).render( );`; } - 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( );`; } + 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( );`; -}; +} export const getTsconfig = () => `{ "compilerOptions": { diff --git a/docs/src/modules/sandbox/Dependencies.ts b/docs/src/modules/sandbox/Dependencies.ts index 094cb0d41d74fa..cfb952c223256f 100644 --- 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 = { groups?: { @@ -10,7 +11,7 @@ type RegExpMatchArrayWithGroups = (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 index ec91bac912fe8b..753a00d5bd5d66 100644 --- 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 = { - '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 index b4a6179e5f5459..8e1f1d756bdc79 100644 --- 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; + codeStyling: CodeStyling; +} diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js index 9f43bb5004c876..7fe03f01c30e20 100644 --- a/packages/markdown/parseMarkdown.js +++ b/packages/markdown/parseMarkdown.js @@ -405,7 +405,7 @@ function createRender(context) { const BaseUIReexportedComponents = ['ClickAwayListener', 'NoSsr', 'Portal', 'TextareaAutosize']; /** - * @param {string} product + * @param {string} productId * @example 'material' * @param {string} componentPkg * @example 'mui-base' @@ -413,17 +413,17 @@ const BaseUIReexportedComponents = ['ClickAwayListener', 'NoSsr', 'Portal', 'Tex * @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)}/`; } /**