Comments (13)
Never mind! Checked the webpack docs and existing loaders are bypassed if the require/import begins with a !
. If you change the examples to use !raw-loader!./...
this probably won't be an issue (might actually be a feature if you want to compare pre/post compilation code side by side π).
from code-surfer.
Didn't know about that option, that's exactly what we need!
I'll change the sample to use that and add it to the docs.
from code-surfer.
@spicydonuts I think I broke mdx-deck build
in the last version. Thanks for the report. Could you move it to a new issue?
@trevordmiller I updated the readme with the correct usage of raw-loader.
from code-surfer.
When using syntax like this in mdx-deck
:
components/SomeComponent/index.js
import React from "react";
const SomeComponent = () => <section>Some component</section>;
export default SomeComponent;
Use
---
import { CodeSurfer } from "mdx-deck-code-surfer"
<CodeSurfer
title="SomeComponent"
code={require("raw-loader!./components/SomeComponent")}
showNumbers={true}
notes="Some starting note"
steps={[
{ lines: [3], notes: "Some step note" }
]}
/>
---
I'm getting compiled output like this:
from code-surfer.
I tried both npm install --save raw-loader
and npm install --save-dev raw-loader
with the same result.
from code-surfer.
That's because mdx-deck webpack config is loading the .js
files with babel.
A workaround is to change the extension of the file to .jsx
and require it with the extension:
code={require("raw-loader!./components/SomeComponent.jsx")}
So, the issues to fix are:
- Better
raw-loader
usage docs - Docs for loading
.js
(and.mdx
) files -- or even better a zero-config way to load them
from code-surfer.
@pomber Thanks for the info. The workaround feels brittle - if mdx-deck adds support for .jsx
it will break in the same way as .js
. Also, .jsx
doesn't work if you want to both show the code and render it in your mdx-deck
from the same source file. For example:
components/SomeComponent/index.jsx
---
import SomeComponent from './components/SomeComponent/index.jsx'
<SomeComponent />
---
import { CodeSurfer } from "mdx-deck-code-surfer"
<CodeSurfer
...
code={require("raw-loader!./components/SomeComponent/index.jsx")}
...
/>
It would be nice if the conventional .js
extension could be used instead so that rendering in mdx-deck
still works and CodeSurfer
could display that source code from the same .js
file source without implementation details of raw-loader
and mdx-deck
:
components/SomeComponent/index.js
---
import SomeComponent from './components/SomeComponent'
<SomeComponent />
---
import { CodeSurfer } from "mdx-deck-code-surfer"
<CodeSurfer
...
codePath='./components/SomeComponent'
...
/>
from code-surfer.
Also running into this. Since I want to use the component in the slides as well as as CodeSurfer source this workaround won't work without copying the file (mdx-deck won't load .jsx files).
from code-surfer.
Awesome! Good find @spicydonuts π Does that work with the mdx-deck build
output as well? Sorry Iβm mobile now or Iβd try it. Should raw-loader
be a prod dependency or dev dependency? Iβd suggest including that in the docs too. I donβt really know because technically everything is a dev dependency with static html output...but not sure if it matters.
from code-surfer.
Depends on whether mdx-deck
is a dev dep.
It seems mdx-deck build
doesn't work if I use CodeSurfer
(regardless of how raw-loader
is used).. I get this:
[mdx-deck] building
[mdx-deck] rendering static html
Missing HeadProvider
[err] TypeError: Cannot read property 'step' of null
at _class2.render (./node_modules/mdx-deck-code-surfer/dist/deck-code-surfer.js:93:30)
at processChild (./node_modules/react-dom/cjs/react-dom-server.node.development.js:2207:18)
at resolve (./node_modules/react-dom/cjs/react-dom-server.node.development.js:2064:5)
at ReactDOMServerRenderer.render (./node_modules/react-dom/cjs/react-dom-server.node.development.js:2383:22)
at ReactDOMServerRenderer.read (./node_modules/react-dom/cjs/react-dom-server.node.development.js:2357:19)
at renderToString (./node_modules/react-dom/cjs/react-dom-server.node.development.js:2729:25)
at renderHTML (./node_modules/mdx-deck/lib/html.js:57:16)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
from code-surfer.
I'm not sure the Missing HeadProvider
bit is relevant, since it also prints when I delete the slide using CodeSurfer
and the build works.
from code-surfer.
I'm using mdx-deck
as a dev dependency, since that is what the mdx-deck
readme shows:
https://github.com/jxnblk/mdx-deck
from code-surfer.
Just tested the latest documentation. Works great! Thanks so much :)
from code-surfer.
Related Issues (20)
- `npm init code-surfer-deck` doesn't set dependencies in the package.json HOT 4
- Web component ?
- Import code from file not working with mdx-deck@4 HOT 3
- Switching slides is unreliable in Firefox
- `code-surfer-types` missing from published package HOT 1
- Set visual line-height on `pre` or `code` elements?
- New maintainers? HOT 3
- "Unexpected Token" error with mdx-deck v4 and code-surfer HOT 11
- can't have markdown lists in codesurfer steps? HOT 1
- Some prism languages layout is too large HOT 1
- Support for animations that update a line HOT 1
- Usage in nextjs app withouth mdx deck HOT 2
- Make line animations configurable: for instance, use fadein/out instead of line movement
- Is there any plan to improve performance? HOT 2
- Add ability to disable scrollAnimation HOT 1
- Is there a way to have markup in title and subtitle?
- Allow to use negative line indices to reference lines from the end (e.g. 0 or -1 for the last line)
- Allow columns to have the same font size
- Allow prism-diff to be used for highlight HOT 2
- Allow to specify zoom level on a per-step basis
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from code-surfer.