From ab87164544f924a438f1ee114d9e236ae5f738d2 Mon Sep 17 00:00:00 2001 From: Evan Date: Tue, 16 May 2023 17:19:23 -0400 Subject: [PATCH 1/3] fixed codesandbox relative to absolute imports --- .../helpers/codesandbox.js | 13 +++++--- .../scripts/md/mdx-hast-to-jsx.js | 33 ++++++++----------- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/documentation-framework/helpers/codesandbox.js b/packages/documentation-framework/helpers/codesandbox.js index b6493cbe4d..de204a0ebb 100644 --- a/packages/documentation-framework/helpers/codesandbox.js +++ b/packages/documentation-framework/helpers/codesandbox.js @@ -145,12 +145,17 @@ function getReactParams(title, code, scope, lang, relativeImports, relPath, sour } } - const relImportRegex = /(import[\s*{])([\w*{}\n\r\t, ]+)([\s*]from\s["']([\.\/]+.*)["'])/gm; + const relImportRegex = /import[\s*{]([\w*{}\n\r\t, ]+)[\s*]from\s["']([\.\/]+.*)["']/gm; let relImportMatch; while (relImportMatch = relImportRegex.exec(code)) { - const [ relImportName, _name, relImportPath ] = relImportMatch; - if (relativeImports[relImportName]) { - code = code.replace(relImportPath, relativeImports[relImportName]); + const [ _relImportStatement, _relImportItems, relImportPath ] = relImportMatch; + // Trim relative import to one level to match abs import + // ex ../../something.js => ../something.js + const relImportPathArr = relImportPath.split('./'); + const len = relImportPathArr.length; + const relImportPathOneLevel = relImportPathArr[len-2].concat('./').concat(relImportPathArr[len-1]); + if (relativeImports[relImportPathOneLevel]) { + code = code.replace(relImportPath, relativeImports[relImportPathOneLevel]); } } diff --git a/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js b/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js index 55977b0e43..f50d35dba8 100644 --- a/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js +++ b/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js @@ -71,27 +71,22 @@ function serializeRoot(node, options) { .map(node => node.value) .map(imp => imp.replace(/(['"])\./g, (_, match) => `${match}${getRelPath()}${path.posix.sep}\.`)); - // Map relative import name to '@package...' - const relativeImportsRegex = /(?:[\.\/]+.*)(@.*)['"]/gm; - let relativeImportMatch; - let relativeImportMatches = {}; - while (relativeImportMatch = relativeImportsRegex.exec(importStatements[0])) { - const [_match, absoluteImportPath] = relativeImportMatch; - if (absoluteImportPath && !absoluteImportPath.includes('srcImport')) { - // `@patternfly/react-core/src/demos/./examples/DashboardWrapper` to `DashboardWrapper` - let relativeFileImport = /(\.+\/.*)/gm.exec(absoluteImportPath); - if (relativeFileImport) { - // Build map of relative imports (from example.js code) to npm package import path (used in codesandbox.js) - const relativeFilePath = relativeFileImport[0]; - const relativeImportName = relativeFilePath - .split('/') - .pop() - .split('.') - .shift(); - relativeImportMatches[relativeImportName] = absoluteImportPath; + // Map relative import name to '@package...' + const relativeImportsRegex = /(?:[\.\/]+.*)(@.*)['"]/gm; + let relativeImportMatch; + let relativeImportMatches = {}; + while (relativeImportMatch = relativeImportsRegex.exec(importStatements.join())) { + const [_match, absoluteImportPath] = relativeImportMatch; + if (absoluteImportPath && !absoluteImportPath.includes('srcImport')) { + // `@patternfly/react-core/src/demos/./examples/DashboardWrapper` to `./examples/DashboardWrapper` + let relativeFileImport = /(\.+\/.*)/gm.exec(absoluteImportPath); + if (relativeFileImport) { + // Build map of relative imports (from example.js code) to absolute npm package import path (used in codesandbox.js) + const relativeFilePath = relativeFileImport[0]; + relativeImportMatches[relativeFilePath] = absoluteImportPath; + } } } - } const importStatementsWithThumbnails = importStatements .concat(thumbnailImports) From 41f2c6f2c9122a80bc5f186e8a9e5ec4787d30e7 Mon Sep 17 00:00:00 2001 From: Evan Date: Tue, 11 Jul 2023 00:10:08 -0400 Subject: [PATCH 2/3] inserting all absolute imports, remove relative imports --- .../components/example/example.js | 2 ++ .../helpers/codesandbox.js | 13 +++++++---- .../scripts/md/mdx-hast-to-jsx.js | 22 ++++++++++--------- 3 files changed, 23 insertions(+), 14 deletions(-) diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js index d459287822..cc9597e565 100644 --- a/packages/documentation-framework/components/example/example.js +++ b/packages/documentation-framework/components/example/example.js @@ -173,6 +173,8 @@ export const Example = ({ ? getStaticParams(title, editorCode) : getReactParams(title, editorCode, scope, lang, relativeImports, relPath, sourceLink) ); + console.log({codeBoxParams}); + debugger; const fullscreenLink = loc.pathname.replace(/\/$/, '') + (loc.pathname.endsWith(source) ? '' : `/${source}`) + '/' diff --git a/packages/documentation-framework/helpers/codesandbox.js b/packages/documentation-framework/helpers/codesandbox.js index b68661c927..a6d815f1df 100644 --- a/packages/documentation-framework/helpers/codesandbox.js +++ b/packages/documentation-framework/helpers/codesandbox.js @@ -143,7 +143,10 @@ function getReactParams(title, code, scope, lang, relativeImports, relPath, sour } } - const relImportRegex = /import[\s*{]([\w*{}\n\r\t, ]+)[\s*]from\s["']([\.\/]+.*)["']/gm; + if (relativeImports.length > 0) { + code = `${relativeImports}\n${code}`; + } + const relImportRegex = /import[\s*{]([\w*{}\n\r\t, ]+)[\s*]from\s["']([\.\/]+.*)["'];?/gm; let relImportMatch; while (relImportMatch = relImportRegex.exec(code)) { const [ _relImportStatement, _relImportItems, relImportPath ] = relImportMatch; @@ -152,9 +155,11 @@ function getReactParams(title, code, scope, lang, relativeImports, relPath, sour const relImportPathArr = relImportPath.split('./'); const len = relImportPathArr.length; const relImportPathOneLevel = relImportPathArr[len-2].concat('./').concat(relImportPathArr[len-1]); - if (relativeImports[relImportPathOneLevel]) { - code = code.replace(relImportPath, relativeImports[relImportPathOneLevel]); - } + // if (relativeImports[relImportPathOneLevel]) { + // code = code.replace(relImportPath, relativeImports[relImportPathOneLevel]); + // } + code = code.replace(_relImportStatement, ''); + debugger; } diff --git a/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js b/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js index f50d35dba8..ea8aec4f18 100644 --- a/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js +++ b/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js @@ -72,18 +72,24 @@ function serializeRoot(node, options) { .map(imp => imp.replace(/(['"])\./g, (_, match) => `${match}${getRelPath()}${path.posix.sep}\.`)); // Map relative import name to '@package...' - const relativeImportsRegex = /(?:[\.\/]+.*)(@.*)['"]/gm; + const relativeImportsRegex = /(import [^'"]*)['"](?:[\.\/]+.*)(@[^'"]*)['"]/gm; let relativeImportMatch; - let relativeImportMatches = {}; + // let relativeImportMatches = {}; + let relativeImportMatches = []; while (relativeImportMatch = relativeImportsRegex.exec(importStatements.join())) { - const [_match, absoluteImportPath] = relativeImportMatch; + const [_match, importItems, absoluteImportPath] = relativeImportMatch; + if (absoluteImportPath.includes('@patternfly/react-table')) debugger; + if (importItems.includes('Icon2')) debugger; if (absoluteImportPath && !absoluteImportPath.includes('srcImport')) { // `@patternfly/react-core/src/demos/./examples/DashboardWrapper` to `./examples/DashboardWrapper` let relativeFileImport = /(\.+\/.*)/gm.exec(absoluteImportPath); if (relativeFileImport) { + const relPath = getRelPath(); + // if (relPath && relPath?.includes && relPath.includes('demos') && relPath.includes('Table')) debugger; // Build map of relative imports (from example.js code) to absolute npm package import path (used in codesandbox.js) const relativeFilePath = relativeFileImport[0]; - relativeImportMatches[relativeFilePath] = absoluteImportPath; + // relativeImportMatches[relativeFilePath] = absoluteImportPath; + relativeImportMatches.push(`${importItems}'${absoluteImportPath}';`); } } } @@ -115,12 +121,8 @@ const pageData = ${JSON.stringify(pageData, null, 2)}; ' ' + liveContext }\n};\n` } - if (relativeImportMatches) { - res += `pageData.relativeImports = {\n${ - ' ' + Object.entries(relativeImportMatches) - .map(([key, val]) => `'${key}': '${val}'`) - .join(',\n ') - }\n};\n`; + if (relativeImportMatches.length > 0) { + res += `pageData.relativeImports = "${relativeImportMatches.join('";\n"')}",\n `; } if (examples) { res += `pageData.examples = {\n${ From a975d3e4732ef98245823f74b64a1f19c8265756 Mon Sep 17 00:00:00 2001 From: Evan Date: Thu, 13 Jul 2023 17:29:46 -0400 Subject: [PATCH 3/3] update codesandbox to react 18, cleanup code --- .../components/example/example.js | 2 - .../helpers/codesandbox.js | 37 ++++----- .../scripts/md/mdx-hast-to-jsx.js | 32 +++----- yarn.lock | 75 ------------------- 4 files changed, 25 insertions(+), 121 deletions(-) diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js index cc9597e565..d459287822 100644 --- a/packages/documentation-framework/components/example/example.js +++ b/packages/documentation-framework/components/example/example.js @@ -173,8 +173,6 @@ export const Example = ({ ? getStaticParams(title, editorCode) : getReactParams(title, editorCode, scope, lang, relativeImports, relPath, sourceLink) ); - console.log({codeBoxParams}); - debugger; const fullscreenLink = loc.pathname.replace(/\/$/, '') + (loc.pathname.endsWith(source) ? '' : `/${source}`) + '/' diff --git a/packages/documentation-framework/helpers/codesandbox.js b/packages/documentation-framework/helpers/codesandbox.js index a6d815f1df..798208aee4 100644 --- a/packages/documentation-framework/helpers/codesandbox.js +++ b/packages/documentation-framework/helpers/codesandbox.js @@ -130,12 +130,12 @@ function getReactParams(title, code, scope, lang, relativeImports, relPath, sour // Ignore } - // Point to sourcelink for @patternfly images + // Update image imports from package to sourcelink - note this relies on image import path in example .md to be accurate if (relPath.includes('@patternfly')) { const imgImportRegex = /(import \W*(\w*)\W*[^'"`]*['"`](.*\.(?:png|jpe?g|webp|gif|svg))['"])/gm; let imgImportMatch; while ((imgImportMatch = imgImportRegex.exec(code))) { - const [match, importDeclaration, imgName, relImgPath] = imgImportMatch; + const [_match, importDeclaration, imgName, relImgPath] = imgImportMatch; // Point to sourceLink hosted file const sourceLinkPath = new URL(relImgPath, sourceLink.replace('/blob/', '/raw/')).href; const hostedImageDeclaration = `const ${imgName} = "${sourceLinkPath}"`; @@ -143,25 +143,18 @@ function getReactParams(title, code, scope, lang, relativeImports, relPath, sour } } - if (relativeImports.length > 0) { - code = `${relativeImports}\n${code}`; + // Add absolute imports to codesandbox file - comes from mdx-hast-to-jsx.js + if (relativeImports?.length > 0) { + const absoluteImports = relativeImports.split(';,').join(';\n'); + code = `${absoluteImports}\n${code}`; } - const relImportRegex = /import[\s*{]([\w*{}\n\r\t, ]+)[\s*]from\s["']([\.\/]+.*)["'];?/gm; + // Remove relative imports from codesandbox file (ignore images, which are addressed separately above) + const relImportRegex = /(import [^'"]*)['"](?:[\.\/]+(?:node_modules\/)?)(@?(?:(?!\.svg|\.jpe?g|\.png).)+)['"][;?]/gm; let relImportMatch; while (relImportMatch = relImportRegex.exec(code)) { - const [ _relImportStatement, _relImportItems, relImportPath ] = relImportMatch; - // Trim relative import to one level to match abs import - // ex ../../something.js => ../something.js - const relImportPathArr = relImportPath.split('./'); - const len = relImportPathArr.length; - const relImportPathOneLevel = relImportPathArr[len-2].concat('./').concat(relImportPathArr[len-1]); - // if (relativeImports[relImportPathOneLevel]) { - // code = code.replace(relImportPath, relativeImports[relImportPathOneLevel]); - // } - code = code.replace(_relImportStatement, ''); - debugger; + const [ relImportStatement, _relImportItems, _relImportPath ] = relImportMatch; + code = code.replace(relImportStatement, ''); } - const dependencies = { '@patternfly/react-core': versions.Releases[0].versions['@patternfly/react-core'] @@ -207,14 +200,14 @@ function getReactParams(title, code, scope, lang, relativeImports, relPath, sour `, }, [lang === 'ts' ? 'index.tsx' : 'index.js']: { - content: `import ReactDOM from 'react-dom'; + content: `import { createRoot } from "react-dom/client"; import "@patternfly/react-core/dist/styles/base.css"; import './fonts.css'; ${code} -const rootElement = document.getElementById("root"); -ReactDOM.render(<${toRender} />, rootElement);` +const container = document.getElementById("root"); +createRoot(container).render(<${toRender} />);` }, 'fonts.css': { content: overpass @@ -223,8 +216,8 @@ ReactDOM.render(<${toRender} />, rootElement);` content: { dependencies: { ...dependencies, - 'react': '^16.8.0', - 'react-dom': '^16.8.0' + 'react': '^18', + 'react-dom': '^18' } }, }, diff --git a/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js b/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js index ea8aec4f18..18fcf6f13b 100644 --- a/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js +++ b/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js @@ -71,28 +71,16 @@ function serializeRoot(node, options) { .map(node => node.value) .map(imp => imp.replace(/(['"])\./g, (_, match) => `${match}${getRelPath()}${path.posix.sep}\.`)); - // Map relative import name to '@package...' - const relativeImportsRegex = /(import [^'"]*)['"](?:[\.\/]+.*)(@[^'"]*)['"]/gm; - let relativeImportMatch; - // let relativeImportMatches = {}; - let relativeImportMatches = []; - while (relativeImportMatch = relativeImportsRegex.exec(importStatements.join())) { - const [_match, importItems, absoluteImportPath] = relativeImportMatch; - if (absoluteImportPath.includes('@patternfly/react-table')) debugger; - if (importItems.includes('Icon2')) debugger; - if (absoluteImportPath && !absoluteImportPath.includes('srcImport')) { - // `@patternfly/react-core/src/demos/./examples/DashboardWrapper` to `./examples/DashboardWrapper` - let relativeFileImport = /(\.+\/.*)/gm.exec(absoluteImportPath); - if (relativeFileImport) { - const relPath = getRelPath(); - // if (relPath && relPath?.includes && relPath.includes('demos') && relPath.includes('Table')) debugger; - // Build map of relative imports (from example.js code) to absolute npm package import path (used in codesandbox.js) - const relativeFilePath = relativeFileImport[0]; - // relativeImportMatches[relativeFilePath] = absoluteImportPath; - relativeImportMatches.push(`${importItems}'${absoluteImportPath}';`); - } - } + // Build array of absolute import paths for relative imports + const relativeImportsRegex = /(import [^'"]*)['"](?:[\.\/]+(?:node_modules\/)?)(@?(?:(?!\.svg|\.jpe?g|\.png).)+)['"][;?]/gm; + let relativeImportMatch; + let relativeImportMatches = []; + while (relativeImportMatch = relativeImportsRegex.exec(importStatements.join())) { + const [match, importItems, absoluteImportPath] = relativeImportMatch; + if (absoluteImportPath && !match.includes('srcImport')) { + relativeImportMatches.push(`${importItems}'${absoluteImportPath}';`); } + } const importStatementsWithThumbnails = importStatements .concat(thumbnailImports) @@ -122,7 +110,7 @@ const pageData = ${JSON.stringify(pageData, null, 2)}; }\n};\n` } if (relativeImportMatches.length > 0) { - res += `pageData.relativeImports = "${relativeImportMatches.join('";\n"')}",\n `; + res += `pageData.relativeImports = "${relativeImportMatches}"\n`; } if (examples) { res += `pageData.examples = {\n${ diff --git a/yarn.lock b/yarn.lock index 911ba7240f..cf43694607 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2471,81 +2471,6 @@ acorn-static-class-features "^1.0.0" astring "^1.7.5" -"@patternfly/documentation-framework@2.0.0-alpha.66": - version "2.0.0-alpha.66" - resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-2.0.0-alpha.66.tgz#506c68e537a0588883475e2ccffb57949663aef2" - integrity sha512-AO1y38RkqU1n3q/185JhZMtaqyARzCjJlvERK6DFn4xdoKOhPE57+EFvmY+RrvY/7tQJ1DO8CQXMu9ttvpZPKQ== - dependencies: - "@babel/core" "7.18.2" - "@babel/plugin-proposal-class-properties" "7.17.12" - "@babel/plugin-proposal-optional-chaining" "^7.18.9" - "@babel/plugin-proposal-private-methods" "7.17.12" - "@babel/plugin-proposal-private-property-in-object" "7.17.12" - "@babel/plugin-transform-react-jsx" "7.17.12" - "@babel/preset-env" "7.18.2" - "@mdx-js/util" "1.6.16" - "@patternfly/ast-helpers" "^0.4.57" - "@reach/router" "npm:@gatsbyjs/reach-router@1.3.9" - autoprefixer "9.8.6" - babel-loader "9.1.2" - camelcase-css "2.0.1" - chokidar "3.5.3" - clean-webpack-plugin "4.0.0" - codesandbox "2.2.0" - commander "4.1.1" - copy-webpack-plugin "11.0.0" - css-loader "6.7.3" - detab "2.0.3" - express "4.18.1" - file-loader "6.2.0" - file-saver "1.3.8" - fs-extra "9.0.1" - glob "8.0.3" - handlebars "4.7.7" - hast-to-hyperscript "9.0.0" - hast-util-to-text "2.0.0" - html-formatter "0.1.9" - html-webpack-plugin "5.5.0" - js-yaml "3.14.0" - mdast-util-to-hast "9.1.1" - mdurl "1.0.1" - mini-css-extract-plugin "2.7.5" - monaco-editor "0.34.1" - monaco-editor-webpack-plugin "7.0.1" - null-loader "4.0.1" - parse-entities "2.0.0" - path-browserify "1.0.1" - postcss "7.0.32" - postcss-loader "7.1.0" - process "^0.11.10" - puppeteer "14.3.0" - puppeteer-cluster "0.23.0" - react-docgen "5.3.1" - react-monaco-editor "^0.51.0" - react-ssr-prepass "1.5.0" - remark-footnotes "1.0.0" - remark-frontmatter "2.0.0" - remark-mdx "2.0.0-next.8" - remark-mdxjs "2.0.0-next.8" - remark-parse "8.0.3" - remark-squeeze-paragraphs "4.0.0" - responsive-loader "3.1.2" - sharp "0.30.6" - style-to-object "0.3.0" - to-vfile "6.1.0" - typedoc "0.22.X" - typescript "4.3.5" - unified "9.1.0" - unist-util-remove "2.0.0" - unist-util-visit "2.0.3" - url-loader "4.1.0" - vfile-reporter "6.0.1" - webpack "5.76.3" - webpack-bundle-analyzer "4.8.0" - webpack-cli "5.0.1" - webpack-dev-server "4.13.1" - webpack-merge "5.8.0" - "@patternfly/patternfly-a11y@4.3.1": version "4.3.1" resolved "https://registry.yarnpkg.com/@patternfly/patternfly-a11y/-/patternfly-a11y-4.3.1.tgz#09f050d3a899a60471519f552d64ecaaeb5fec2f"