Ideas for Improving Iles: Enhancing Usability and Expanding Features

[TechAkayy]

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: 💚

• Vitepress (one of Iles' inspirations) supports only markdown-based authoring of pages with strong opinionated theming, ideal for the best documentation site and more. Using Vue SFCs for pages is not really on their roadmap, as far as I’ve checked. Even if it is, it might still continue to be SPA-first with MPA (well, technically it's not the traditional mpa defn, rather it's no-js way) via config like now.
• Iles and Astro (one of Iles' inspirations) who love MPAs with islands architecture have many differences regarding features, architecture, and roadmap, but they primarily differ in component authoring style (.astro vs .vue).
• Users like me prefer HTML-based templating with Vue SFCs (a personal choice) over HTML-based templating with little-jsx-mixed-syntax like in Astro SFCs. Last I checked, Astro will likely continue using Astro SFCs for authoring, with no plans to support other SFC formats for layouts and pages in Astro apps.
• Both Vitepress & Astro lets us use Vue SFCs in the components folder with Astro supporting all other major JS frameworks too.
• Iles lets us build our app with both Vue SFCs+markdown for 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

• A special page for image optimization as it’s super crucial for any app.
• unjs/ipx in addition to the current Vite plugin?

Data Fetching & Client Scripts

• Dedicated Data Fetching page with commonly used flavors, including $fetch (unjs/ofetch), which is shipped with Iles.
• Best practice examples of commonly used client scripts in any site and optimizations of them.
• Here is a quick list (I confess I asked ChatGPT for this list 😆):
  • Analytics/tracking (Google Analytics)
  • Error monitoring/reporting (Sentry, LogRocket)
  • SEO/marketing (Google Tag Manager)
  • Advertisement/monetization (Google AdSense)
  • Bookings (calendar-based)
  • Social media integrations (sharing, live feeds)
  • Live chat (Hotjar)
  • A/B testing (Google Optimize)
  • Personalization (Optimizely)

Crawler by Default with getStaticPaths for Custom/Finer Control

• Like Nuxt Generate Crawler, maybe a nice idea for a new unjs/crawler package?
• With Vue’s 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.
• Also, Vue Language Tools or ESLint (I need to confirm) keeps moving imports within the script block into the top script setup block (or vice versa), which is a different issue.

Abstracting Suspense

• Using Suspense with components using script setup (which is the recommended norm) with a top-level await (data fetching on the client side) can get tricky, especially for beginners.

Site Manager Page (site.ts) & Basic Components

• It would be nice to have a Site Manager page in the default template or added via a module.
• The idea is similar to how some CMSs work where the user defines what pages (Vue/markdown) they want in their site and how they are nested, along with adding metadata to them.
• Iles on the node-end could create/rename/move the Vue or markdown files inside the pages folder, and we add the nav as well in the site.ts like in our docs repo.
• Should site.ts be outside the src folder (project root)?
• By default, have this page not included in the build; if we use Nitro, we can exclude this route via Nitro config.
• Opens at https://localhost:5173/site (or) https://localhost:5173/site-manager, etc.
• In fact, this could be done via Vue DevTools, but managing site info really feels more intuitive as a normal webpage opening within the app, and easily accessible in the navbar as a link during development.
• Multiple pages is a normal thing in the internet and components like Navbar & Button are used in any site. These essential components can be innocent-looking, but the engineering of these components (features + accessibility) can be huge. It would be great to ship a set of basic components via an Iles module for such essential components with vanilla CSS & without any css/component framework lock-in.

UnoCSS & TailwindCSS

• Apart from installing the dependency, there is generally a second or third step; we could have a module cover this part.
• Quick start templates with different flavors with basic setup.

Component Libraries

• Using component libraries is a great start if the user is already familiar with them.
• Maybe a new UnoCSS/TailwindCSS-based IlesUI component library (could be a Nuxt UI port) for the whole Vue ecosystem 😄
• Apart from installing the dependency, there is generally a second or third step; we could have a module cover this part.
• Quick start templates with different flavors with basic setup.
• Especially the usage of 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

• Unlike VitePress, which has theming built-in, with iles, we must craft our own UI, so maybe a how to create a theme with the basic set of commonly used components?
• This could even expand to a theme library with free, freemium & premium flavors if adoption is good.

Expand Markdown Authoring Support

• Support for MDC authoring, inspired by the Nuxt way.

Vue Reactivity, Pinia for Client-Side Reactivity

• We are already part of the Vue community, so there’s no excuse for not taking advantage of Vue reactivity & Pinia.
• For client-side reactivity/state, inside islands, not with the outer-app used during HMR-powered development.
• Here is an example of a Svelte component using Pinia & a Vue composable. I personally would stick to Vue SFC authoring ;-)
• This is a highly underutilized Vue feature (Vue reactivity without the template compiler for client-side reactivity).

Vue DevTools - Developer Experience

• Vue DevTools Next shows Pinia stores even when used in a Svelte component.
• Nuxt DevTools displays a timeline for Vue composables; I will add this as a feature request for Vue DevTools Next.
• Site configuration, OG image, and Robots via Vue DevTools, similar to the NuxtSEO module.

Adoption of UnJS

• We already use Unhead; there are many more nice packages that provide similar benefits as Iles using Vite.
• Go beyond SSG - consider Iles SSR with UnJS/Nitro.
• Image processing - explore UnJS/ipx in addition to the current Vite plugin.

Guide for contributors

• Could be quite basic.
• I have been having difficulty in testing my external Iles project by pnpm linking the iles-clone when working on an PR.
• I had to copy my projects into the playground folder currently to make it work without any issue.
• Anyone had any success with this, please share your expertise, its probably a pnpm/mon-repo thingy.

Other ideas 😇

• Nuxt-like Layers and sharing components & composables across Iles Projects 😉
• Explore the idea of Nested Islands 😅
• Any ex-gridsome features? Gridsome was awesome but didn't move to Vue 3?
• Consider implementing Qwik-like Resumability in Iles 🔥
• Please share your ideas, thanks bunch!

[nick-cjyx9]

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:

• Provide Static File Endpoints like Astro, it'll be rather convient

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

[TechAkayy]

Vue 3.5's lazy hydration could make hydrateOnVisible and other hydration strategies easier for us - https://blog.vuejs.org/posts/vue-3-5#lazy-hydration, thanks to @yyx990803

Vue Vapor mode might make Iles's SSG & possibly SSR capabilities easier for us 😄, video source: https://x.com/kazu_pon/status/1828704096532263035, thanks to @kazupon

Udybh-F-1OvKNSjd.mp4

[kazupon]

Hello, all

That Video is a side project I am working on separately from the vue-i18n and intlify projects. (I’m naming this project as inclusion-vapor currently)

The motivation for this project came from my day job project, 'Can we replace svelte runtime with vapor runtime?’
Counter app as the goal of the PoC, and after working on it, I ran the vapor runtime with the svelte component intact. We also tested react and were able to run it.

I am working on the project futher and will open the source code in the near future.
(If my CFP is approved on jsconf-jp, I’m going to talk about this project) :)

vapor runtime is still in the R&D phase at the moment. Inclusion-vapor uses vapor-runtime as a framework agnostic engine for components such as React, Svelte, etc., but I have some requests for vapor runtime. We might collaborate with the vapor team at some point. :)

[TechAkayy]

Very impressive @kazupon, and thanks for sharing your experiments and thoughts :-) Here is an Iles demo of usage of preact & svelte islands in our index.vue page. I'm sharing this as its quite similar to your vapor experiments. Can't wait to hear more from you in the future. Exciting times for Vue 🎉 !

Repo - https://github.com/Pinegrow/spotted-kingfisher-with-iles-tailwindcss

2024-09-15.Iles.showcase.mp4