Comments (16)
@BrunnerLivio found a way to make Stencil and Gatsby work together with SSR. Here's his recipe, I think it would solve this feature request as long as Primsjs can work on the server side (need to check that it does no use the window
object).
Make sure you have already integrated stencil-ds-output-targets. In our case we have two packages:
@my/webcomponents-library Only the webcomponents from Stencil
@my/react-webcomponents-library The output from the React
It must have the output target dist-hydrate-script for the WebComponents package (@my/webcomponents-library)
In your stencil.config.ts
const config: Config = {
outputTargets: [
{ type: 'dist-hydrate-script' },
...
]
...
}
Use CommonJS output target for the React output target package (@my/react-bwecomponents-library)
Personally, Iβve just inspired myself by Ionic:
- Copy the rollup.config.js
- Copy the tsconfig.json
- Build your app using
tsc -p . && rollup -c
Make sure you donβt reference window anywhere within your library
More on this here
Add the following to your Gatsby App:
In gatsby-node.js :
exports.onPostBuild = async () => {
const stencil = require("@my/webcomponents-library/hydrate");
const files = glob.sync("public/**/*.html");
return Promise.all(
files.map(async (file) => {
try {
const html = fs.readFileSync(file, "utf8");
const result = await stencil.renderToString(html, {});
fs.writeFileSync(file, result.html);
return result;
} catch (e) {
// Ignore error where path is a directory
if (e.code === "EISDIR") {
// eslint-disable-next-line consistent-return
return;
}
throw e;
}
})
);
};
In gatsby-browser.js :
const { defineCustomElements } = require("@my/webcomponents-library/loader");
defineCustomElements();
Done!
Import your components via:
import { MyComponent } from "@my/react-webcomponents-library";
from gatsby-remark-highlight-code.
note: the source of web components attached by this plugin are available in our mono-repo in case you want to play with it ;)
https://github.com/deckgo/deckdeckgo/tree/master/webcomponents/highlight-code
from gatsby-remark-highlight-code.
yeah, npm run build && npm run serve
will put it on port 9000
from gatsby-remark-highlight-code.
Thanks! I'll check those out
from gatsby-remark-highlight-code.
Hey @endymion1818 thx for the issue. I do understand and see your point, but can't you render it on the server side, it doesn't work aka you are facing problem rendering it on the server?
or is the problem the fact that it is rendered both on server side and then loaded on the front end side again?
from gatsby-remark-highlight-code.
Unfortunately it doesn't render on the server at all by the looks of things ... I tried it locally and it rendered without any styles:
Code looks pretty great when JS is enabled but it would just be awesome to do this on the server first...
from gatsby-remark-highlight-code.
Thank you for your answer. To be honest with you, I am not sure that I will be able to debug it and fix it, SSR is tricky and I don't use it with this plugin by myself.
But we can give it a short try. Can you provide a simple sample repo to reproduce the issue?
from gatsby-remark-highlight-code.
I appreciate that, no worries if not ...
Here's the initial implementation PR I have: https://github.com/endymion1818/deliciousreverie/pull/94/files
Thanks for looking at it π
from gatsby-remark-highlight-code.
thank you for the repo.
I should "just" checkout the PR and then npm run build
? or what are the cmds?
Just want to be sure that I perform the exact same operations as you.
from gatsby-remark-highlight-code.
oki doki. I'll give a try this evening. Like I said, don't expect too much, but I'll try ;)
from gatsby-remark-highlight-code.
I appreciate that, thank you π
from gatsby-remark-highlight-code.
Ah, you'll also need a .env file in the root with the following value:
JS_DISABLED=true
from gatsby-remark-highlight-code.
Ok now I understand what do you mean. You want to use Gatsby prerendering
but would like the component to be generated as it would be on the browser side or with SSR
and, the result to be, including its shadowed content, added to the output files, is that correct?
Basically a prerender
which execute the scripts and save the content including the shadowed content in the html files.
For example
<component>
<div>my-content</div>
</component>
would be injected in prerendered output files as
<component>
#shadow-root
<style>:host {background: red;}</style>
<div><slot/></div>
<div>my-content</div>
</component>
Summarized you would like Gatsby to server render the Web Components to generate the output bundle files.
Well, if this is correct, I am not sure, but I would say that it is currently not possible. Not just this Web Component but generally speaking Gatsby not being able to evaluate server side render of Web Components.
I might be wrong of course and I would be more than happy if someone would correct me, otherwise looks like there isn't much I can do.
What do you think, am I missing something?
from gatsby-remark-highlight-code.
I think I understand what you mean, and also why it's not possible ... because these aren't just applied styles, you're adding to the DOM, which is not something that can happen at build time.
Thats a shame, but I totally get it.
I've done a little more research, and maybe StencilJS is a way to render web components on the server ... there seems to be a Gatsby plugin, but I assume it'll need some work to integrate with ... work which I'm not going to ask you to do, you've already created this, which is awesome.
I'll still use this plugin on the site I have with JS-enabled, I'm happy I can make code pretty there :-D
from gatsby-remark-highlight-code.
I think I've got the same understanding as you, Stencil WC can be rendered on the server side but how to achieve this with Gatsby is not that clear to me at this point.
Happy to hear you are going to use the plugin anyway and that it suits you!
Thanks again for the good issue!
Of course I suggest that we keep this open. If anyone want or can jump in and solves it or bring the discussion further, let me know, that would be awesome!
from gatsby-remark-highlight-code.
In addition: https://github.com/jonearley/gatsby-plugin-stencil
from gatsby-remark-highlight-code.
Related Issues (20)
- Syntax highlighting not working on deployed site HOT 7
- Configuration does not take effect afterwards HOT 9
- Unable to display code if language is not supported HOT 3
- Support for highlightLines attribute HOT 10
- Unable to highlight a single line using the current parseLanguageAndHighlightedLines implementation HOT 5
- couldnt get this to work HOT 11
- No highlights by default? HOT 7
- Hide the colored balls in Carbon theme HOT 1
- Highlight-lines does not work anymore
- It looks like language mermaid is not supported HOT 6
- How do I override inlineCode? HOT 7
- Hiding the header? HOT 1
- Overflow: scroll HOT 1
- Disabling wordwrap / enabling overflow:scroll? HOT 1
- Config for prismjs? HOT 3
- Support for gatsby 4? HOT 7
- Rerendering deckgo-highlight-code compontent on state change HOT 3
- My code doesn't highlight. HOT 1
- Support for gatsby 5? HOT 7
- Plugin doesnt work in gatsby v5 HOT 2
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 gatsby-remark-highlight-code.