fix(examples and docs): adding react-live… #666
Conversation
… for the docs examples affects: patternfly4-react-lerna-root, @patternfly/react-core, @patternfly/react-docs
jschuler
requested review from
dmiller9911,
karelhala,
tlabaj and
amarie401
|
PatternFly documentation deployment: https://666-pr-patternfly-react-patternfly.surge.sh |
Pull Request Test Coverage Report for Build 2243
💛 - Coveralls |
| const transformCode = code => { | ||
| try { | ||
| // LiveEditor doesn't work properly with these so need to remove | ||
| code = code.replace(/^\s*import.*$/gm, ''); |
There was a problem hiding this comment.
Are you able to do this on gatsby node? It might speed up client-side rendering. Not a big deal if it is not possible though.
There was a problem hiding this comment.
Good suggestion, I will try it out
There was a problem hiding this comment.
Had trouble getting the raw file contents in gatsby-node. Going to stick with this for now.
| code = code.replace(/extends Component/gm, 'extends React.Component'); | ||
| code = code.replace(/^\s*export.*$/gm, ''); | ||
| code = code.replace(/^\s*static.*$/gm, ''); | ||
| const transformedCode = transform(code, { |
There was a problem hiding this comment.
Internally it looks like React-Live uses (buble)[https://buble.surge.sh/guide/#jsx] which supports jsx. I did not try this without babel so it might actually be needed.
There was a problem hiding this comment.
Yes I had more issues with buble so I switched to babel
| @@ -32,12 +32,17 @@ const Layout = ({ children, data }) => { | |||
|
|
|||
| return ( | |||
| <React.Fragment> | |||
| <Helmet | |||
| {/* <Helmet | |||
There was a problem hiding this comment.
This can either be removed or readded. Might be nice to include the meta tags though. You should be able to keep the links that you added as children.
There was a problem hiding this comment.
Added them back in
| @@ -2,8 +2,8 @@ import React from 'react'; | |||
| import { Badge } from '@patternfly/react-core'; | |||
| import getContainerProps from './common/getContainerProps'; | |||
|
|
|||
| class UnreadBadge extends React.Component { | |||
There was a problem hiding this comment.
I think these changes were already made with pr #662 that was merged yesterday.
There was a problem hiding this comment.
Ah ok good, I will merge with master and repush
|
Added env variables so it can also be disabled if needed. Btw #666 😈 |
… for the docs examples
affects: patternfly4-react-lerna-root, @patternfly/react-core, @patternfly/react-docs
What:
Added react-live to react-docs for live running examples