destack icon indicating copy to clipboard operation
destack copied to clipboard

Vue3 support

Open kronos-999 opened this issue 2 years ago • 3 comments

The name says it all, are there any thoughts to port the project to Vue (or Astro, etc.)?

Also, are there any strong points for keeping Next (and SSR) for this type of project?

kronos-999 avatar Jul 01 '23 01:07 kronos-999

There has being significant process to supporting more frameworks. The last time I discuss this topic was around 18 months ago in https://github.com/LiveDuo/destack/issues/28#issuecomment-955162556, might be a good time to share some more insights.

What happened since:

  1. Supported React.js and as a side effect separated the browser editor and the backend server (that saves the json files).
  2. Improved Typescript support that made all migrations easier
  3. Added support for multiple browser editors (now having Craft.js and Grapes.js)
  4. Move the components data (ie. HTML source code and preview images) to the backend

So why does it mean to get Destack other frameworks such as SvelteKit and Nuxt:

  1. Editor challenges: The editor is currently only in React. To get another framework working we'd need to transpile React down to HTML and then create wrapper components in each framework that appends that HTML to the DOM when they are loaded in Vue, Svelte etc.
  2. Server challenges: There are currently two ways to use the server. One is through Next.js API and the other is starting it directly as an NPM script (for React only projects). For for every fullstack framework (eg. SvelteKit, Nuxt) we'd need wrapper server functions that use the server endpoint. For frontend frameworks (eg. Svelte, Vue) we can use the existing standalone server implementation I think without problems.
  3. Maintenance challenges: We'd need contributors to handle each of these problems as this project is something I work on my free time. Since I not as familiar with these other frameworks as I am with React and due to the limitations of time, it's better if other developers want to maintain that part of the project.

LiveDuo avatar Jul 01 '23 18:07 LiveDuo

Hi, sorry for being a beginner,

  • have you considered adding mitosis or similar approach? it uses JSX but a little different from react and vue, and then can convert it to a variety of frameworks/libraries, so if a person learns that JSX he will be able to export to many frameworks/libraries.
  • there is another similar project called sveltosis, similar to mitosis but uses some html-like syntax instead of JSX, input code looks much smaller and cleaner, I don't know if its easier to learn or not and whether its as useful in larger projects or not.
  • it would be even better if instead of that kind of JSX or sveltosis if it uses JSON. which you can write directly or compile to it from JSX, html, etc.

abdulhakam avatar Jul 17 '23 07:07 abdulhakam

Hey @abdulhakam, thanks for the suggestion.

It could be an involved and lengthy endeavour to use an intermediate compiler for React code like mitosis. Since I don't have enough hands on experience with these tools I can't really say whether it would be worth it or even if it's possible at all.

That's been said, ideas and PRs are welcomed and I try to give my opinion based on my experience developing this library.

LiveDuo avatar Jul 18 '23 07:07 LiveDuo