Open TechAkayy opened 1 month ago
Totally agree with your ideas.
I think one of the main advantages of iles over Astro is that I can write components with Vue SFCs, and that is good for beginners like me to learn vue from scratch.
Here's my ideas:
Apart from installing the dependency, there is generally a second or third step; we could have a module cover this part.
- we can have
iles add
like astro add
Sharing some ideas (in no particular order) for Iles while they’re fresh in my memory (while working on the PR for Vite-5 update for Iles) for community feedback:
My need for Iles is based on these facts, I keep validating my understanding, so please share your ideas & opinions: :green_heart:
.astro
vs.vue
).layouts
andpages
in Astro apps.components
folder with Astro supporting all other major JS frameworks too.layouts, pages, components
, custom designing our theme (look n feel) with batteries included, especially ideal for Vue beginners looking for a nice SSG MPA setup, workflow, DX.Beginner-Friendly Iles Documentation
SSR MPAs are generally beginner-friendly with HTML + assets (browser cache does a good job) compared to SSR SPAs with similar prerendered HTML + assets and using JSON payloads and a client-side router.
With Iles’s current SSG capability, it has huge potential to fill the gap for users who have decided to stick with MPAs for their simple/complex apps, and paves a nice pathway for Vue beginners to go Vitepress, Nuxt, Quasar and beyond.
Our documentation can be redrafted to be beginner-friendly for users looking for SSG capabilities after learning Vue.
Vue docs have a dedicated section for SSG under different ways of using Vue, which, in my opinion, should be at the top of the sidebar. The section already mentions VitePress & Astro; it would be very beneficial to have Iles in there too.
Standard Web APIs - Highlight the usage of anchor tags and other standard web APIs (fetch, notification, history, geolocation, etc.) in the docs.
pnpm
as default +npm
&yarn
(simple tabs way) in code blocks in docs.Add an Iles “How-to” guide on adding Iles on top of a vanilla Vite-powered Vue app. Apart from installing Iles, a few additional setups are required, such as
iles.config.ts
,site.ts
, and tsconfig tweaks. Can this be achieved via CLI?Use non-Vue islands without the mandatory client directive.
index.html
shell to easily add links/scripts from CDN, with an explanation of Client Scripts and its advantages. This shell is very useful for beginners.Is our user community expecting React as a supported JS framework? Astro provides really good support for it, and react/preact uses love JSX based templating, and would probably settle for using Astro.
Auto-Import APIs - Ship auto import with Vue preset pre-included with unplugin-auto-import instead of the need to
import {ref} from ‘vue’
etc when authoring the app. Auto-Import components already work great. There is an open PR on this.It would be nice to have
the-vue-point
as a separate repo, very helpful for beginners. Currently, we have to clone the full mono-repo to test it out.Examples with both JavaScript and TypeScript flavors (similar to Svelte docs), very helpful for users who haven’t tried TypeScript yet.
Config to turn off auto-installing Iles modules, or keep it turned-off by default, and let user opt-in for auto-installing.
Interactive CLI for scaffolding with ESLint baked in.
Expand support for
.astro
component authoring. Helpful for any Astro users who are interested in migrating to Iles’s Vue-based authoring.Vite plugin ordering - GitHub Issue with the new way (not so new now) and an easy abstraction to make it easier within Iles.
Examples of blogs, landing pages, especially data pulled from various headless CMSs like WordPress (headless way), Storyblok, Strapi, Sanity, Prismic, etc.
Dedicated pages for the usual - Recipes, Showcases, Branding, Sponsors; maybe on the https://ilesjs.org domain (I have locked it with a single-digit cost for a year for now).
Community reach - Netlify, Vercel, Storyblok, etc., and other open-source patrons.
client:visible
- Iles doesn’t lazy-load dependencies as part of lazy-hydration while Astro does (JS downloading in the network tab when scrolling to the island + hydrating). Is there any advantage to the Astro way? For an interesting discussion, refer to this Discord thread.Image Optimization
Data Fetching & Client Scripts
Data Fetching
page with commonly used flavors, including $fetch (unjs/ofetch), which is shipped with Iles.Crawler by Default with getStaticPaths for Custom/Finer Control
script setup
as the recommonded way and the norm, adding a second script tag with a default export inside it seems unintuitive, at least for beginners.script
block into the topscript setup
block (or vice versa), which is a different issue.Abstracting Suspense
script setup
(which is the recommended norm) with a top-levelawait
(data fetching on the client side) can get tricky, especially for beginners.Site Manager Page (site.ts) & Basic Components
site.ts
like in our docs repo.site.ts
be outside thesrc
folder (project root)?https://localhost:5173/site
(or)https://localhost:5173/site-manager
, etc.UnoCSS & TailwindCSS
Component Libraries
getCurrentInstance
to handle using libraries like vue-i18n or vuetify, maybe via a global (composable?) vue-i8n/vuetify-like instance across all islands. Some libraries like Vuetify rely on global injects, which generally requires special care with Iles.Custom Themes
Expand Markdown Authoring Support
Vue Reactivity, Pinia for Client-Side Reactivity
Vue DevTools - Developer Experience
Adoption of UnJS
Guide for contributors
Other ideas :innocent: