Comments (16)
from vike-react.
@brillout
Great, I've make a PR,
Please review it, I have a question in the code comment
from vike-react.
Makes sense, I think it's a regression that got introduced by #33.
from vike-react.
@AndrejNemec PR welcome in case that's something you'd be interested in. The change is quite easy. Let us know if you're busy; we'll quickly fix it ourselves then.
from vike-react.
Thank you for considering me for the PR contribution. I'm currently involved in a project named "vike-painless-react", which brings several key enhancements to the table:
- i18n Support: Integrated with the i18next package for comprehensive internationalization.
- Dark/Light Theme Support: Facilitates an easy switch between dark and light themes, fully compatible with both SSR and client-side environments.
- Enhanced HTML Head Management: Offers improved handling and functionality of the HTML head section.
You can explore the project here: vike-painless-react
For a practical implementation example, check out: vike-painless-react example
While I'm currently focused on developing this package, I see potential synergies with Vike. If integrating these features aligns with your vision, my package could serve as a useful reference or even as a direct addition to Vike. I'm open to discussions about possibly making this an official part of the Vike portfolio. Looking forward to hearing your thoughts! ππ
NPM: https://www.npmjs.com/package/vike-painless-react
from vike-react.
Shouldn't we just stream the page in the page-view tag? not the whole html?
from vike-react.
I'm currently involved in a project named "vike-painless-react", which brings several key enhancements to the table:
@AndrejNemec It sounds like some of these enhancement should be made to vike-react (whose goal is also to be painless) and to the equivalent vike-vue and vike-solid packages. PRs welcome
from vike-react.
Fixed in v0.3.5
from vike-react.
I had a look at vike-painless-react
: there are a lot of things to like in there π. Some of it, if you're interested, can be extracted in re-usable Vike packages e.g. vike-react-i18next
, see converstaion we had with Dani at vikejs/vike#1263.
(I grabbed the npm name of relevant Vike packages such as vike-react-i18next
; feel free to let me know your npm user name and I'll add you as owner.)
As for your <head>
management, I've my own ideas about it. Let's see which one turns out to be better π¦Ύ π
In general, composing stacks from re-usable Vike packages and monolithic Vike stacks such as vike-painless-react
are both valid approaches. I'm curious to see which one of the two approaches will turn out to be the most useful for users π
from vike-react.
This proposal I've put forward is just an initial idea. My goal is to create a monorepo containing specific packages and then set up an npm organization @vike-painless-react/X
to develop several "painless" packages for vikejs
.
The packages I've been considering are:
@vike-painless-react/core
@vike-painless-react/i18next
@vike-painless-react/theming
@vike-painless-react/head
@vike-painless-react/routing
If you like this vision, we can jointly design it into the vike-react
package, potentially replacing the vike-painless-react
package. Furthermore, I believe it would be more maintainable to turn vike-react
into a monorepo and create an npm organization @vike-react
, structuring packages similarly to my proposal for vike-painless-react
.
Additionally, I have a question regarding head management. How do you plan to implement it? I have used code from react-helmet-async
. Many people are interested in implementing heads as found in next.js
, where anywhere in the project, one can set the title, meta, etc., and at the same time, the title,meta,etc.. is fully reactive and SSR-friendly. Setting heads using +config.ts/+Head.tsx
... doesn't seem like the most appropriate solution when I need to modify heads according to the state of the application.
from vike-react.
create an npm organization
@vike-react
,
That's a great idea. I just created four npm orgs: @vike-{react,vue,solid,svelte}
.
If you like this vision, we can jointly design it into the
vike-react
package, potentially replacing thevike-painless-react
package.
Yes π
regarding head management. How do you plan to implement it?
One major issue with title/description defined by components is that it contradicts streaming: when the HTML stream starts then it's too late for setting title/description (because the <head>
content is already sent).
That's why I'm relunctant to allow users to let components define <head>
values.
I'm thinking +title.js
and +description.js
is more future-proof.
As much as I'd love to have title/description defined by components, I don't think it's possible because of how browsers work.
from vike-react.
Actually, I'm wrong: a workaround would be to push this after the stream ends:
<script>
document.title = 'someTitleSetByAnyComponent'
</script>
As for SEO/social crawlers I'd recommend to disable streaming. This is actually what react-streaming
does: https://github.com/brillout/react-streaming#options.
As for DX I'm thinking of that:
import { useTitle } from 'vike-react/useTitle'
// Can be vike-react-query or vike-react-telefunc
import { useData } from 'vike-react-someDataFetchingLibrary'
function Product() {
const data = useData(() => fetch('...'))
const head = useHead()
head.setTitle(data.product.name)
// No effect if streaming (which is fine since streaming is disabled for SEO/social bots)
head.setDescription(data.product.description)
}
@AndrejNemec Thoughts?
from vike-react.
That's a great idea. I would definitely also create components that use the useHead
hook, allowing the setting of the title, description,
and other useful meta tags like og:X, twitter:X
through components like <HeadTitle/>
, <HeadMeta/>
, <HeadLink/>
, etc.
Furthermore, it would be beneficial to implement a robust injection system for packages that will be outside of the vike-react repository. Currently, it's not properly resolved and there are quite a few shortcomings. If I want to register a plugin to vike-react, it's quite a pain.
I propose something like this:
Let's say in the application I want to register the module: @vike-react/head
In the application, a config would be created: +modules.ts
export default {
'vike-react-head': {
server: 'import:@vike-react/head/module/server...',
client: 'import:@vike-react/head/module/client...'
},
'vike-react-query': { /* ... */ },
// ...etc
}
from vike-react.
I'm not sure I understand your issue: what's wrong with https://vike.dev/extends?
from vike-react.
The problem with "https://vike.dev/extends" is that some important values for the injection of multiple packages requiring the same methods are getting overwritten. This requires modifying the vike-react
package every time to add new configuration attributes for each additional module I want to integrate into vike-react
. For instance, I can't modify onRenderHtml
without overwriting the original onRenderHtml
, etc. This could be useful for developers who want to create more advanced packages for vike-react
.
from vike-react.
The plan so far is this: vikejs/vike#1283. Which is actually needed for seamlessly integrating vike-react-query
with vike-react
. But, if you think it isn't enough, then elaborate on any concrete issue you're having.
from vike-react.
Related Issues (20)
- SSR issue with Mui HOT 4
- vike-react-query withFallback error prop does not include error properties HOT 3
- `clientOnly()` instead of `<ClientOnly>` HOT 1
- Need a way to add html attributes to the root `<html>` element HOT 7
- routeParams did not pass on the client-side by default HOT 4
- Feedback on upgrading from vite-plugin-ssr to vike-react HOT 5
- Disable HTML streaming HOT 2
- StrictMode Config HOT 4
- Ability to run code before hydration HOT 3
- Vike error on HOT 2
- useData() - Error with new vike project HOT 7
- v1 Migration error with useData HOT 1
- Improvements around page transition animations HOT 5
- Make `Layout` cumulative HOT 2
- vike-react-query throws error in `onRenderHtml` HOT 4
- Vike react bug HOT 4
- vike-react-telefunc HOT 2
- Title is being set to an empty string on client-side navigation with SSR HOT 1
- `vike-react-query` + Telefunc + Authentication
- Publish `vike-react-query` as `v1.0.0`? HOT 1
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 vike-react.