From e72436e553dd15a9600f1f0fa6f52a08dcec0393 Mon Sep 17 00:00:00 2001 From: Evan Date: Tue, 9 Aug 2022 16:41:03 -0400 Subject: [PATCH 01/10] fix(docs): codesandbox relative imports point to package import --- .../components/example/example.js | 6 ++-- .../helpers/codesandbox.js | 14 ++++++++ .../scripts/md/mdx-hast-to-jsx.js | 35 ++++++++++++++++--- 3 files changed, 48 insertions(+), 7 deletions(-) diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js index c2e07ef647..2e88edefe0 100644 --- a/packages/documentation-framework/components/example/example.js +++ b/packages/documentation-framework/components/example/example.js @@ -78,7 +78,9 @@ export const Example = ({ // Content that appears between h3 and code block to explain example children, // Show dark theme switcher on full page examples - hasDarkThemeSwitcher = process.env.hasDarkThemeSwitcher + hasDarkThemeSwitcher = process.env.hasDarkThemeSwitcher, + // Map of relative imports matched to their npm package import path (passed to Codesandbox) + relativeImports }) => { if (isFullscreenPreview) { isFullscreen = false; @@ -97,9 +99,9 @@ export const Example = ({ const [editorCode, setEditorCode] = React.useState(code); const loc = useLocation(); - const scope = { ...liveContext, + ...relativeImports, // These 2 are in the bundle anyways for the site since we dogfood ...reactCoreModule, ...reactTableModule, diff --git a/packages/documentation-framework/helpers/codesandbox.js b/packages/documentation-framework/helpers/codesandbox.js index 854699c976..1d05c0a1a7 100644 --- a/packages/documentation-framework/helpers/codesandbox.js +++ b/packages/documentation-framework/helpers/codesandbox.js @@ -130,6 +130,7 @@ function getReactParams(title, code, scope, lang) { // Ignore } + // Update image imports to point to pf.org const imgImportRegex = /import\s*(\w*).*['"](.*)(\.(png|jpe?g|webp|gif|svg))['"]/g; let imgImportMatch; while ((imgImportMatch = imgImportRegex.exec(code))) { @@ -137,6 +138,19 @@ function getReactParams(title, code, scope, lang) { code = code.replace(imgImportMatch[0], `const ${imgName} = "https://www.patternfly.org/v4${scope[imgName]}"`); } + const relImportRegex = /(?<=import[\s*{])([\w*{}\n\r\t, ]+)(?=[\s*]from?[\s*]["']([\.+\/+]+.*)["'])/gm; + let relImportMatch; + while (relImportMatch = relImportRegex.exec(code)) { + const relImportPath = relImportMatch[2]; + console.log({relImportMatch, relImportPath, scope}); + if (scope[relImportPath]) { + + code = code.replace(relImportPath, scope[relImportPath]); + console.log({code}); + } + } + + const dependencies = { '@patternfly/react-core': versions.Releases[0].versions['@patternfly/react-core'] }; 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 5377210040..74e1d3ceca 100644 --- a/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js +++ b/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js @@ -69,12 +69,31 @@ function serializeRoot(node, options) { const importStatements = groups.import .map(node => node.value) - .map(imp => imp.replace(/(['"])\./g, (_, match) => `${match}${getRelPath()}${path.posix.sep}\.`)) + .map(imp => imp.replace(/(['"])\./g, (_, match) => `${match}${getRelPath()}${path.posix.sep}\.`)); + + // Map relative import path to '@package...' + const relativeImportsRegex = /(?:[\.+\/+]+.*)(@.*)['"]/gm; + let relativeImportMatch; + let relativeImportMatches = {}; + while (relativeImportMatch = relativeImportsRegex.exec(importStatements[0])) { + const [_match, importPath] = relativeImportMatch; + if (importPath && !importPath.includes('srcImport')) { + // `@patternfly/react-core/src/demos/./examples/DashboardWrapper` to `./examples/DashboardWrapper` + let relativeFileImport = /(?<=\/)(\.\/.*)/gm.exec(importPath); + if (relativeFileImport) { + // Build map of relative imports (from example.js code) to npm package import path (used in codesandbox.js) + const relativeFileName = relativeFileImport[1]; + relativeImportMatches[relativeFileName] = importPath; + } + } + } + + const importStatementsWithThumbnails = importStatements .concat(thumbnailImports) - .join('\n') + .join('\n'); // https://astexplorer.net/#/gist/9c531dd372dfc57e194c13c2889d31c3/03f2d6e889db1a733c6a079554e8af7784863739 - options.importSpecifiers = parse(importStatements).body + options.importSpecifiers = parse(importStatementsWithThumbnails).body .map(node => node.specifiers) .flat(1) .map(spec => spec.local ? spec.local.name : null) @@ -82,14 +101,13 @@ function serializeRoot(node, options) { const liveContext = options.importSpecifiers .filter(localName => !/srcImport.*/.test(localName)) // Images in MD like [!img](./src) .join(',\n '); - const childNodes = groups.rest .map(childNode => toJSX(childNode, node, options)) .join(''); let res = `import React from 'react'; import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components'; -${importStatements} +${importStatementsWithThumbnails} const pageData = ${JSON.stringify(pageData, null, 2)}; `; if (liveContext) { @@ -97,6 +115,13 @@ 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 (examples) { res += `pageData.examples = {\n${ ' ' + Object.entries(examples) From e0cc4e5f4a54d9d7d0f6787e8d83bdaf6e3b9b48 Mon Sep 17 00:00:00 2001 From: Evan Date: Tue, 9 Aug 2022 16:54:59 -0400 Subject: [PATCH 02/10] fix(docs): remove console logs --- packages/documentation-framework/helpers/codesandbox.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/documentation-framework/helpers/codesandbox.js b/packages/documentation-framework/helpers/codesandbox.js index 1d05c0a1a7..023b48514b 100644 --- a/packages/documentation-framework/helpers/codesandbox.js +++ b/packages/documentation-framework/helpers/codesandbox.js @@ -142,11 +142,8 @@ function getReactParams(title, code, scope, lang) { let relImportMatch; while (relImportMatch = relImportRegex.exec(code)) { const relImportPath = relImportMatch[2]; - console.log({relImportMatch, relImportPath, scope}); if (scope[relImportPath]) { - code = code.replace(relImportPath, scope[relImportPath]); - console.log({code}); } } From c77305ef6ddb63caf8b57289a98a348d7e859a7e Mon Sep 17 00:00:00 2001 From: Evan Date: Thu, 1 Sep 2022 22:53:09 -0400 Subject: [PATCH 03/10] fix relativeImports throwing syntax error when being attached to scope --- .../documentation-framework/components/example/example.js | 3 +-- packages/documentation-framework/helpers/codesandbox.js | 7 ++++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js index 58959a5542..b0227899f3 100644 --- a/packages/documentation-framework/components/example/example.js +++ b/packages/documentation-framework/components/example/example.js @@ -102,7 +102,6 @@ export const Example = ({ const loc = useLocation(); const scope = { ...liveContext, - ...relativeImports, // These 2 are in the bundle anyways for the site since we dogfood ...reactCoreModule, ...reactTableModule, @@ -161,7 +160,7 @@ export const Example = ({ const codeBoxParams = getParameters( lang === 'html' ? getStaticParams(title, editorCode) - : getReactParams(title, editorCode, scope, lang) + : getReactParams(title, editorCode, scope, lang, relativeImports) ); 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 023b48514b..51007fd6ed 100644 --- a/packages/documentation-framework/helpers/codesandbox.js +++ b/packages/documentation-framework/helpers/codesandbox.js @@ -106,7 +106,7 @@ function prettyExampleCode(title, code, declaration, identifier) { } // TODO: Make React examples work and use a template that has our assets. -function getReactParams(title, code, scope, lang) { +function getReactParams(title, code, scope, lang, relativeImports) { let toRender = null; try { let declaration = getExampleDeclaration(code); @@ -141,9 +141,10 @@ function getReactParams(title, code, scope, lang) { const relImportRegex = /(?<=import[\s*{])([\w*{}\n\r\t, ]+)(?=[\s*]from?[\s*]["']([\.+\/+]+.*)["'])/gm; let relImportMatch; while (relImportMatch = relImportRegex.exec(code)) { + debugger; const relImportPath = relImportMatch[2]; - if (scope[relImportPath]) { - code = code.replace(relImportPath, scope[relImportPath]); + if (relativeImports[relImportPath]) { + code = code.replace(relImportPath, relativeImports[relImportPath]); } } From ddfbb107878120d1cb3d2ac70b8010d5029ee4f4 Mon Sep 17 00:00:00 2001 From: Evan Date: Thu, 1 Sep 2022 23:24:45 -0400 Subject: [PATCH 04/10] fix regex to allow for /../ in addition to /./ --- packages/documentation-framework/helpers/codesandbox.js | 4 ++-- .../documentation-framework/scripts/md/mdx-hast-to-jsx.js | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/documentation-framework/helpers/codesandbox.js b/packages/documentation-framework/helpers/codesandbox.js index 51007fd6ed..f5dea3d7ed 100644 --- a/packages/documentation-framework/helpers/codesandbox.js +++ b/packages/documentation-framework/helpers/codesandbox.js @@ -138,12 +138,12 @@ function getReactParams(title, code, scope, lang, relativeImports) { code = code.replace(imgImportMatch[0], `const ${imgName} = "https://www.patternfly.org/v4${scope[imgName]}"`); } - 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)) { - debugger; const relImportPath = relImportMatch[2]; if (relativeImports[relImportPath]) { + console.log({code, relImportPath, scope, relativeImports}); code = code.replace(relImportPath, relativeImports[relImportPath]); } } 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 74e1d3ceca..bcabe4de7b 100644 --- a/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js +++ b/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js @@ -75,11 +75,12 @@ function serializeRoot(node, options) { const relativeImportsRegex = /(?:[\.+\/+]+.*)(@.*)['"]/gm; let relativeImportMatch; let relativeImportMatches = {}; + if (importStatements.length && importStatements[0].includes('DashboardWrapper')) debugger; while (relativeImportMatch = relativeImportsRegex.exec(importStatements[0])) { const [_match, importPath] = relativeImportMatch; if (importPath && !importPath.includes('srcImport')) { // `@patternfly/react-core/src/demos/./examples/DashboardWrapper` to `./examples/DashboardWrapper` - let relativeFileImport = /(?<=\/)(\.\/.*)/gm.exec(importPath); + let relativeFileImport = /(?<=\/)(\.+\/.*)/gm.exec(importPath); if (relativeFileImport) { // Build map of relative imports (from example.js code) to npm package import path (used in codesandbox.js) const relativeFileName = relativeFileImport[1]; From 0be3770b329166da709841c83472dfc19510db42 Mon Sep 17 00:00:00 2001 From: Evan Date: Sat, 3 Sep 2022 14:06:49 -0400 Subject: [PATCH 05/10] update hast regex --- packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 bcabe4de7b..30523698a5 100644 --- a/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js +++ b/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js @@ -72,7 +72,7 @@ function serializeRoot(node, options) { .map(imp => imp.replace(/(['"])\./g, (_, match) => `${match}${getRelPath()}${path.posix.sep}\.`)); // Map relative import path to '@package...' - const relativeImportsRegex = /(?:[\.+\/+]+.*)(@.*)['"]/gm; + const relativeImportsRegex = /(?:[\.\/]+.*)(@.*)['"]/gm; let relativeImportMatch; let relativeImportMatches = {}; if (importStatements.length && importStatements[0].includes('DashboardWrapper')) debugger; From d0036d4bf9e414486cf2136afe0d081344d58717 Mon Sep 17 00:00:00 2001 From: Evan Date: Sat, 3 Sep 2022 15:31:59 -0400 Subject: [PATCH 06/10] replace import based on name rather than relative path, allow for imported examples to have different rel paths --- .../helpers/codesandbox.js | 8 ++++---- .../scripts/md/mdx-hast-to-jsx.js | 19 ++++++++++++------- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/packages/documentation-framework/helpers/codesandbox.js b/packages/documentation-framework/helpers/codesandbox.js index f5dea3d7ed..9a0c138168 100644 --- a/packages/documentation-framework/helpers/codesandbox.js +++ b/packages/documentation-framework/helpers/codesandbox.js @@ -141,10 +141,10 @@ function getReactParams(title, code, scope, lang, relativeImports) { const relImportRegex = /(?<=import[\s*{])([\w*{}\n\r\t, ]+)(?=[\s*]from\s["']([\.\/]+.*)["'])/gm; let relImportMatch; while (relImportMatch = relImportRegex.exec(code)) { - const relImportPath = relImportMatch[2]; - if (relativeImports[relImportPath]) { - console.log({code, relImportPath, scope, relativeImports}); - code = code.replace(relImportPath, relativeImports[relImportPath]); + const [ relImportName, _name, relImportPath ] = relImportMatch; + console.log({relImportPath}, relativeImports[relImportName]); + if (relativeImports[relImportName]) { + code = code.replace(relImportPath, relativeImports[relImportName]); } } 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 30523698a5..826f2b0599 100644 --- a/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js +++ b/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js @@ -75,16 +75,21 @@ function serializeRoot(node, options) { const relativeImportsRegex = /(?:[\.\/]+.*)(@.*)['"]/gm; let relativeImportMatch; let relativeImportMatches = {}; - if (importStatements.length && importStatements[0].includes('DashboardWrapper')) debugger; while (relativeImportMatch = relativeImportsRegex.exec(importStatements[0])) { - const [_match, importPath] = relativeImportMatch; - if (importPath && !importPath.includes('srcImport')) { - // `@patternfly/react-core/src/demos/./examples/DashboardWrapper` to `./examples/DashboardWrapper` - let relativeFileImport = /(?<=\/)(\.+\/.*)/gm.exec(importPath); + 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 relativeFileName = relativeFileImport[1]; - relativeImportMatches[relativeFileName] = importPath; + const relativeFilePath = relativeFileImport[0]; + const relativeImportName = relativeFilePath + .split('/') + .pop() + .split('.') + .shift(); + // { DashboardWrapper: ['./examples/DashboardWrapper', '@patternfly...DashboardWrapper]} + relativeImportMatches[relativeImportName] = absoluteImportPath; } } } From 353226674a7093ac94f7a871dbfa87333e5df955 Mon Sep 17 00:00:00 2001 From: Evan Date: Sat, 3 Sep 2022 15:33:17 -0400 Subject: [PATCH 07/10] remove console log --- packages/documentation-framework/helpers/codesandbox.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/documentation-framework/helpers/codesandbox.js b/packages/documentation-framework/helpers/codesandbox.js index 9a0c138168..8443c457a2 100644 --- a/packages/documentation-framework/helpers/codesandbox.js +++ b/packages/documentation-framework/helpers/codesandbox.js @@ -142,7 +142,6 @@ function getReactParams(title, code, scope, lang, relativeImports) { let relImportMatch; while (relImportMatch = relImportRegex.exec(code)) { const [ relImportName, _name, relImportPath ] = relImportMatch; - console.log({relImportPath}, relativeImports[relImportName]); if (relativeImports[relImportName]) { code = code.replace(relImportPath, relativeImports[relImportName]); } From a83045caca7d9816d11aa7562e148f4910d92569 Mon Sep 17 00:00:00 2001 From: Evan Date: Sat, 3 Sep 2022 15:34:51 -0400 Subject: [PATCH 08/10] cleanup comments --- packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 826f2b0599..3e7c4729b4 100644 --- a/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js +++ b/packages/documentation-framework/scripts/md/mdx-hast-to-jsx.js @@ -71,7 +71,7 @@ function serializeRoot(node, options) { .map(node => node.value) .map(imp => imp.replace(/(['"])\./g, (_, match) => `${match}${getRelPath()}${path.posix.sep}\.`)); - // Map relative import path to '@package...' + // Map relative import name to '@package...' const relativeImportsRegex = /(?:[\.\/]+.*)(@.*)['"]/gm; let relativeImportMatch; let relativeImportMatches = {}; @@ -88,7 +88,6 @@ function serializeRoot(node, options) { .pop() .split('.') .shift(); - // { DashboardWrapper: ['./examples/DashboardWrapper', '@patternfly...DashboardWrapper]} relativeImportMatches[relativeImportName] = absoluteImportPath; } } From 2e759c952c7fac62d571e1744df9a5b6818d71ca Mon Sep 17 00:00:00 2001 From: Evan Date: Sun, 4 Sep 2022 10:54:01 -0400 Subject: [PATCH 09/10] add pathPrefix for image src urls --- packages/documentation-framework/helpers/codesandbox.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/documentation-framework/helpers/codesandbox.js b/packages/documentation-framework/helpers/codesandbox.js index 8443c457a2..132e6e8884 100644 --- a/packages/documentation-framework/helpers/codesandbox.js +++ b/packages/documentation-framework/helpers/codesandbox.js @@ -2,6 +2,7 @@ const { parse } = require('@patternfly/ast-helpers'); const versions = require('../versions.json'); const overpass = require('./fonts'); const { capitalize } = require('./capitalize'); +const pathPrefix = process.env.pathPrefix; const getStaticParams = (title, html) => { const imgAssetRegex = /['"](\/assets\/images\/.*)['"]/g; @@ -135,7 +136,7 @@ function getReactParams(title, code, scope, lang, relativeImports) { let imgImportMatch; while ((imgImportMatch = imgImportRegex.exec(code))) { const imgName = imgImportMatch[1]; - code = code.replace(imgImportMatch[0], `const ${imgName} = "https://www.patternfly.org/v4${scope[imgName]}"`); + code = code.replace(imgImportMatch[0], `const ${imgName} = "https://www.patternfly.org/${pathPrefix}${scope[imgName]}"`); } const relImportRegex = /(?<=import[\s*{])([\w*{}\n\r\t, ]+)(?=[\s*]from\s["']([\.\/]+.*)["'])/gm; From a9eb8ad9f0543e62356caf870e88d77cce3dce44 Mon Sep 17 00:00:00 2001 From: Evan Date: Sun, 4 Sep 2022 21:42:24 -0400 Subject: [PATCH 10/10] revert pathPrefix --- packages/documentation-framework/helpers/codesandbox.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/documentation-framework/helpers/codesandbox.js b/packages/documentation-framework/helpers/codesandbox.js index 132e6e8884..907d761099 100644 --- a/packages/documentation-framework/helpers/codesandbox.js +++ b/packages/documentation-framework/helpers/codesandbox.js @@ -130,13 +130,12 @@ function getReactParams(title, code, scope, lang, relativeImports) { catch (err) { // Ignore } - // Update image imports to point to pf.org const imgImportRegex = /import\s*(\w*).*['"](.*)(\.(png|jpe?g|webp|gif|svg))['"]/g; let imgImportMatch; while ((imgImportMatch = imgImportRegex.exec(code))) { const imgName = imgImportMatch[1]; - code = code.replace(imgImportMatch[0], `const ${imgName} = "https://www.patternfly.org/${pathPrefix}${scope[imgName]}"`); + code = code.replace(imgImportMatch[0], `const ${imgName} = "https://www.patternfly.org/v4${scope[imgName]}"`); } const relImportRegex = /(?<=import[\s*{])([\w*{}\n\r\t, ]+)(?=[\s*]from\s["']([\.\/]+.*)["'])/gm;