docs(Examples): refactor SourceManager, add toggle for languages #650
Conversation
layershifter
requested review from
dvdzkwsk,
kuzhelov,
levithomason,
miroslavstastny and
mnajdova
as code owners
layershifter
force-pushed
the
docs/add-code-togle
branch
from
7e1820f to
06c53bd
Compare
layershifter
changed the title
…om/stardust-ui/react into docs/add-code-togle # Conflicts: # docs/src/components/ComponentDoc/ComponentExample/SourceCodeManager.ts # docs/src/components/ComponentDoc/ComponentExamples.tsx # docs/src/components/ExternalExampleLayout.tsx # docs/src/utils/exampleContexts.ts # docs/src/utils/exampleKebabNameToSourceFilename.ts # docs/src/utils/index.tsx
…om/stardust-ui/react into docs/add-code-togle
…om/stardust-ui/react into docs/add-code-togle
…om/stardust-ui/react into docs/add-code-togle
| import getExampleSource from './getExampeSource' | ||
|
|
||
| export type ComponentSourceManagerRenderProps = ComponentSourceManagerState & { | ||
| handleCodeAPIChange: (newApi: keyof ComponentAPIs) => void |
There was a problem hiding this comment.
The Shorthand API should be the first selected option. This is the one we want to advertise. With the latest changes the Children API is first.
There was a problem hiding this comment.
Also, would recommend the Shorthand API to be the first option, as it was before.
There was a problem hiding this comment.
Agree, done with the latest commit :)
| const currentCode = storedCode || originalCode | ||
| const currentCodePath = examplePath + componentAPIs[currentCodeAPI].fileSuffix | ||
|
|
||
| const codeParser = currentCodeLanguage === 'ts' ? 'typescript' : 'babylon' |
There was a problem hiding this comment.
It seems that this doesn't raise any error in the Typescript mode:
const notString: string = 3
There was a problem hiding this comment.
Yep, we don't have TS checks there. And I'm not sure that we actually need them for now.
I renamed codeParser to prettierParser to avoid confusion
There was a problem hiding this comment.
Got it now, I thought it was actually a code parser. I know that the Monaco editor was configurable to parse and show ts errors, so I thought there is something similar here.
| this.sourceCodeMgr.codeType = codeType | ||
| this.updateAndRenderSourceCode() | ||
| if (wasCodeChanged) { | ||
| if (confirm('Lose your changes?')) { |
There was a problem hiding this comment.
It was awkward to me to lose the changes between switching to Javascript and Typescript. Can't we store both source codes in state? Not sure if this will really be used by the users, but just wondering...
There was a problem hiding this comment.
I want to avoid implementation complications there.
If we will get claims about it, we can refactor ComponentSourceManager somehow to store both source codes.
|
One more thought. Now that we are autogenerating the js code, maybe we should disable the |
Agree, I pushed changes with this 👍 |
| href={ghEditHref} | ||
| target="_blank" | ||
| /> | ||
| )} | ||
| </Menu> | ||
| ) | ||
| } | ||
|
|
||
| renderJSX = () => { |
There was a problem hiding this comment.
For consistency, let's rename this one too to renderSourceCode
Fixes #495.
Fixes #615.
This PR:
SourceManagerto a React component to provide declarative controls