Code Surfer v3 RC about code-surfer HOT 29 CLOSED

Wow this version is soooo good. The transitions and animations are perfect and the CodeSurferColumns component is extremely useful for comparing code.

from code-surfer.

Shameless plug for my twitch stream, codequests, we used in the stream and everyone thought it was sick! Link to vid coming soon!

from code-surfer.

Would love to see support for raw-loader again. I like having my source files be the single source of truth for what I code surf through - so that I can run linting / formatting / tests etc. on them and know that the code I am stepping through is working.

from code-surfer.

@pomber Hey! Great library! I used v3 recently for a talk I did last week (repo link). The experience was mostly smooth.

My only feedback was that it was difficult to find out from the docs how to zoom in on different parts of the same code file.

Thanks!

from code-surfer.

Thanks @MPLIS 🙏
And thanks a lot for your contribution in Open Collective!

from code-surfer.

@ashrafhasson see here how to add languages: https://github.com/pomber/code-surfer/blob/code-surfer-v2/readme.md#languages

I'm going to add more info to the error to make it easier to fix.

from code-surfer.

Would love to see support for raw-loader again. I like having my source files be the single source of truth for what I code surf through - so that I can run linting / formatting / tests etc. on them and know that the code I am stepping through is working.

@trevordmiller have you tried the file prop?

from code-surfer.

I've seen the same problem as @trevordmiller even with the file prop:

<CodeSurfer theme={nightOwl}>

  \`\`\`js file=./code/transferable-objects.js title="transferable objects"
  \`\`\`

</CodeSurfer>

Yields this in Prettier (via VS Code, doesn't matter if I have eslint-prettier turned off or on, result is the same):

Unexpected closing tag "CodeSurfer". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (1:1)

from code-surfer.

I see. Here is the error in prettier playground.

I belive it should be valid MDX. At least it's valid markdown according to the commonsmark spec.

Maybe open an issue for Prettier? I think it was working before, I always used prettier for my code surfer decks.

from code-surfer.

@pomber I've opened an issue with Prettier:
prettier/prettier#7041

It sounds like it is unrelated to this repo so it shouldn't hold back the release (assuming the new API is valid MDX syntax).

from code-surfer.

Strangely, I just got this Cannot read property 'internal' of null while I was working, and then remembered I'd seen it pass through my e-mail. In my case it ended up being a JSX that was supposed to be self-closing that I left as <Component>. Just thought I'd make a note in case it's useful.

And thanks @trevordmiller for doing that additional testing of the Prettier issue and filing the bug; I got super busy last week and thus unresponsive! I agree it seems to be a Prettier problem.

from code-surfer.

Awesome work! 🎉

I'm working on some slides modeling.now.sh (repo). So far the experience is great!

from code-surfer.

Seems to function beautifully—nice work!

from code-surfer.

FYI I'm getting fairly frequent crashes when using 250+ line code blocks (imported).

Will dig in more later, running mdx-deck as a child process so I can't really see the logs

RangeError [ERR_CHILD_PROCESS_STDIO_MAXBUFFER]: stdout maxBuffer length exceeded
  at Socket.onChildStdout (child_process.js:348:14)
  at Socket.emit (events.js:189:13)
  at addChunk (_stream_readable.js:284:12)
  at readableAddChunk (_stream_readable.js:261:13)
  at Socket.Readable.push (_stream_readable.js:220:10)
  at Pipe.onStreamRead (internal/stream_base_commons.js:94:17)

Occurs after making several edits with hot reload

from code-surfer.

Just wanted to say thanks for all this work! Been playing around with it for a presentation and it's amazing right now!

from code-surfer.

Thanks for the awesome work!
I'm getting the following error when specifying a few languages:

Oops, there's a problem
Error: Missing syntax highlighting for language "elixir"

I see that react-syntax-highlighter 11.0.2 is installed and that should have support for elixir, not sure if there's a dependency issue here?

from code-surfer.

@pomber thanks for the quick response .. I should have read that more carefully, assumed all prismjs languages were loaded out of the box .. sorry

Once more, thanks for the awesome work!

from code-surfer.

FYI I'm getting fairly frequent crashes when using 250+ line code blocks (imported).

Will dig in more later, running mdx-deck as a child process so I can't really see the logs

RangeError [ERR_CHILD_PROCESS_STDIO_MAXBUFFER]: stdout maxBuffer length exceeded
  at Socket.onChildStdout (child_process.js:348:14)
  at Socket.emit (events.js:189:13)
  at addChunk (_stream_readable.js:284:12)
  at readableAddChunk (_stream_readable.js:261:13)
  at Socket.Readable.push (_stream_readable.js:220:10)
  at Pipe.onStreamRead (internal/stream_base_commons.js:94:17)

Occurs after making several edits with hot reload

Seems like a limitation of Socket.io.
Dunno if anything could be done in this library. Saving frequently probably builds up that buffer and gets overloaded. Socket.io is well battle tested so I imagine they have their reasons for such a limitation.

250 lines also sounds quite big, probably should break that up.

@pomber I think any further changes would be in the hotfix tier. I would vote ship it :)

from code-surfer.

@pomber I think any further changes would be in the hotfix tier. I would vote ship it :)

I'll try to publish the new version next week!

from code-surfer.

@pomber Noticed a bug -- when using an imported language (ex: protobuf) it seems to parse and highlight correctly as part of a <CodeSurfer> element, but not within in a <Step> element.

from code-surfer.

It seems that perhaps the children of <CodeSurfer> are not valid MDX? For example, the MDX below breaks with syntax highlighting and prettier auto formatting.

deck.mdx

import { CodeSurfer } from "code-surfer";

# Some title

---

<CodeSurfer>

\`\`\`js
console.log(1);
\`\`\`

\`\`\`js
console.log(1);
console.log(2);
\`\`\`

</CodeSurfer>

---

# The end

npx prettier deck.mdx

SyntaxError: Unexpected closing tag "CodeSurfer". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags

from code-surfer.

@pomber Noticed a bug -- when using an imported language (ex: protobuf) it seems to parse and highlight correctly as part of a <CodeSurfer> element, but not within in a <Step> element.

@JackWink could you share the mdx for the bug?

from code-surfer.

@trevordmiller @jebeck I'm not sure I'm understanding the issue.

Does it happen everytime? For example, does the deck from npm init code-surfer-deck my-deck work for you?

from code-surfer.

@pomber I get the issue with npm init code-surfer-deck my-deck and then npx prettier deck.mdx. So this suggest that the new API (<CodeSurfer>{newline}{markdown code}{newline}</CodeSurfer>) may not be valid MDX? Either that or Prettier parsing needs to be updated to support this type of syntax if it is valid. My editor doesn't recognize the syntax either so my gut says it is most likely not valid MDX.

from code-surfer.

Whenever I run npm start and change the deck.mdx file (no matter what the change is) I run into this error:

 ERROR 

Cannot read property 'internal' of null



  TypeError: Cannot read property 'internal' of null
  
  - gen-mdx.js:48 payloadCacheKey
    [hooks]/[gatsby-plugin-mdx]/utils/gen-mdx.js:48:46
  
  - gen-mdx.js:51 genMDX
    [hooks]/[gatsby-plugin-mdx]/utils/gen-mdx.js:51:43
  
  - source-nodes.js:108 processMDX
    [hooks]/[gatsby-plugin-mdx]/gatsby/source-nodes.js:108:5
  
  - source-nodes.js:158 resolve
    [hooks]/[gatsby-plugin-mdx]/gatsby/source-nodes.js:158:35
  
  - gatsby-node.js:40 
    [hooks]/[gatsby-theme-mdx-deck]/gatsby-node.js:40:24
  
  - gatsby-node.js:47 resolveTitle
    [hooks]/[gatsby-theme-mdx-deck]/gatsby-node.js:47:60
  

not finished createPages - 0.075s


———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
3 pages                                                           In Progress                                                          mdx-deck
Error: Command failed with exit code 1 (EPERM): gatsby develop --host localhost --port 8000 --open
    at makeError (/Users/mxstbr/projects/mxstbr/modern-react-workshop/hooks/node_modules/mdx-deck/node_modules/execa/lib/error.js:59:11)
    at handlePromise (/Users/mxstbr/projects/mxstbr/modern-react-workshop/hooks/node_modules/mdx-deck/node_modules/execa/index.js:112:26)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

from code-surfer.

@mxstbr I've just tried with a fresh npm init code-surfer-deck and coudn't reproduce your issue (I change the text and it works).
Do you have more info to reproduce it?

from code-surfer.

Interesting, let me try to see what's special about my setup. 🤔

from code-surfer.

I figured out what the issue is! When running yarn start the initial build completes successfully, however if you change anything the process crashes with the above error.

However, if you use npm start it works perfectly! Good enough for me 👍

from code-surfer.

I can't reproduce it with yarn neither, maybe it's because the template comes with a package-lock.json but not a yarn.lock.

Also gatsby-plugin-mdx has some problems with the cache and hot reloading (jxnblk/mdx-deck#551), but it's mostly when adding new imports.

However, if you use npm start it works perfectly! Good enough for me +1

Glad it works with npm, let me know if you have any other problem.

from code-surfer.