[getStaticPaths] can be `async` you can generate paths using
data from an API or CMS.
diff --git a/docs/src/pages/guide/rss.mdx b/docs/src/pages/guide/rss.mdx
index e054aa59..108421f7 100644
--- a/docs/src/pages/guide/rss.mdx
+++ b/docs/src/pages/guide/rss.mdx
@@ -1,7 +1,7 @@
-[pages]: /guide/development#pages
+[pages]: /guide/project-structure#pages
[routing]: /guide/routing
-[@islands/feed]: /guide/plugins#islandsfeed
-[usePage]: /guide/development#using-page-data
+[@islands/feed]: /guide/modules#islandsfeed
+[usePage]: /guide/project-structure#using-page-data
[path]: /guide/routing#override-routes
[feed]: https://github.com/jpmonette/feed
diff --git a/docs/src/pages/guide/static-assets.mdx b/docs/src/pages/guide/static-assets.mdx
new file mode 100644
index 00000000..f2f7dc94
--- /dev/null
+++ b/docs/src/pages/guide/static-assets.mdx
@@ -0,0 +1,120 @@
+[@unhead/vue]: https://unhead.unjs.io/setup/vue/installation
+[app]: /guide/project-structure#app-2
+[head and meta]: /guide/head-and-meta
+[useHead]: https://unhead.unjs.io/usage/composables/use-head
+[useSeoMeta]: https://unhead.unjs.io/usage/composables/use-seo-meta
+[Head]: https://unhead.unjs.io/setup/vue/components
+[site]: /guide/project-structure#site
+[frontmatter]: /guide/project-structure#pages
+[vite static assets]: https://vite.dev/guide/assets.html
+[vite public directory]: https://vite.dev/guide/assets.html#the-public-directory
+[vite index html]: https://vite.dev/guide/#index-html-and-project-root
+
+# Static Assets 🍃
+
+Bootstrap demo
+
+
+
+
+```
+
+> During development, Îles will automatically add the following [shell][app] script to the injected or user-provided `index.html` in the project root.
+>
+> ``
+
+
+In Vue single-file components, `link` and `script` tags are ignored as side-effects, so external assets should not be included in the `template` section of layouts or pages.
+
+
+## `useHead` Composable
+
+[useHead] can be used within the `setup` function or `
+```
+
+> `useHead` options support both static values and reactive variables, such as `ref`, `computed`, and `reactive`.
+
+> In addition to using an `index.html` entry page and the `useHead` composable, external static assets can be added through other methods discussed in the [head and meta] page.
+
+## Public folder
+
+The `public` directory at your project root stores static files that do not require processing during the build.
+
+Use the `public` folder for assets that:
+- Are not imported in source code (e.g., `robots.txt`).
+- Must retain their original file names.
+- Should be directly accessible via a URL (e.g., `/logo.png`).
+
+For example, an image at `public/logo.png` can be referenced as:
+
+```html
+
+
+
+
+
+```
+
+## 7. Create your Home Page
+
+It's time to create our first page - the Home Page.
+
+Create a new folder `src/pages`, and your home page as `index.vue` inside it. Here is a simple page authored as a Vue Single File Component.
+
+The home page displays a card with your site's `name`, `description`, and `last updated date`, retrieved via the `usePage` composable (auto-imported by îles), which provides `site`, `frontmatter`, and `meta` details.
+
+> Take a note that the names of the layouts and pages must be in **lowercase**.
+
+```vue
+
+ title: Home
+ description: First Coffee, Then Conquer!
+
+
+
+
+
+
+
+
Welcome to {{ siteTitle }}
+
{{ description }}
+
Site last updated: {{ lastUpdated.toDateString() }}
+
+
+
+
+```
+
+## 8. Start your Development Server
+
+Let's experience Vite's developer experience with instant HMR while authoring our pages. Start your development server with:
+
+```bash
+npm run dev
+```
+
+Once your development server is up and running, open its URL in your browser.
+
+In your home page `index.vue`, add the following tag below the paragraph (`` tag) displaying the last-updated datetime. You'll notice that the browser updates instantly with HMR, without a page refresh.
+
+```html
+- Built with îles 💚
+```
+
+## 9. Create the About Us Page
+
+îles provides excellent support for authoring your pages with markdown (`.md`, `.mdx`). Create a second page `src/pages/about-us.md` as shown below.
+
+To see your second page, navigate to it by clicking on the `About Us` link in the navbar.
+
+> Take a note that the names of the layouts and pages must be in **kebab-case**.
+
+```md
+---
+title: About Us
+description: Crafting Memories, Brewing History!
+---
+
+# This an about page
+
+
+```
+
+## 10. Build and Preview
+
+Our minimal site is ready, let's build and preview it locally before deploying it.
+
+The following command will build your page and open it in your browser.
+
+```bash
+npm run now
+```
+
+Check the `dist` folder in your project root to find your two pages statically generated without any JavaScript, as no interactions have been added to the site yet.
+
+
+ title: Recipes
+ alias: ['/recipes']
+
+
+
+
+
+
+ Recipes
+
+
+
+
+
+
diff --git a/docs/src/pages/recipes/vanilla-vue-to-iles.mdx b/docs/src/pages/recipes/vanilla-vue-to-iles.mdx
new file mode 100644
index 00000000..72730e28
--- /dev/null
+++ b/docs/src/pages/recipes/vanilla-vue-to-iles.mdx
@@ -0,0 +1,272 @@
+---
+date: 2025-01-23
+author: Ahmed Kaja
+title: 'Vanilla Vue to îles'
+twitter: '@techakayy'
+# image is relative to src/assets folder
+image: 'assets/recipes/vanilla-vue-to-iles/vanilla-vue.jpg'
+---
+{/* This component overrides MetaTags.vue */}
+Important Remove `@vitejs/plugin-vue` (Vite plugin for Vue)
+
+- Keeping `vite.config.ts`: Remove `@vitejs/plugin-vue` from its plugins array to avoid conflicts, as îles already includes it.
+
+- Migrating to `iles.config.ts`: Do not include `@vitejs/plugin-vue` in the migration. After migrating, remove `vite.config.ts` file from your project root. You can also skip migrating `resolve.alias` object, as Îles already covers that.
+
+```ts
+import { defineConfig } from 'iles'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+export default defineConfig({
+ siteUrl: 'https://myawesomeidea.com', // Your site URL
+ modules: [
+ // Add iles modules here, refer to Modules page
+ ],
+ vite: {
+ // Vite configuration goes here
+ plugins: [
+ // Add vite plugins here
+ vueDevTools(),
+ ]
+ }
+})
+```
+
+## 4. Add `app.ts`
+
+- Create an `src/app.ts` file as shown below.
+- Copy `import './assets/main.css'` from your entry file `src/main.ts` into `app.ts`.
+- Remove or archive `main.ts` as it's not required anymore.
+
+```ts
+import '@/assets/main.css' // from `src/main.ts`
+import { defineApp } from 'iles'
+
+export default defineApp({
+ head ({ frontmatter, site }) {
+ return {
+ meta: [
+ { property: 'author', content: site.author },
+ { property: 'keywords', content: () => frontmatter.tags },
+ ],
+ htmlAttrs: { lang: 'en-US' },
+ bodyAttrs: {},
+ }
+ },
+})
+```
+
+## 5. Add `site.ts`
+
+Create an `src/site.ts` file as shown below:
+
+```ts
+export default {
+ title: 'Cafe Tee Kaapi',
+ description: 'Sip, Savor, and Spark Ideas!',
+}
+```
+
+## 6. `App.vue` to Default Layout
+
+- Create a new `src/layouts` folder, copy `App.vue` into it, and rename it to `default.vue`.
+- Convert the `RouterLink` components to simple anchor tags, change the `to` prop to `href`.
+- Replace `
+
+
+
+
+
+
+```
+
+> Remove the `src/router` folder, as îles uses file-based routing. Any custom logic might need to be migrated to `app.ts`, your default layout, or one of your interactive Islands.
+
+## 7. View to Pages
+
+îles uses the `pages` and `layouts` folder conventions with filenames in kebab-case.
+- Rename the folder that contains all your pages (for example, `src/views`) to `src/pages`.
+- Rename the `.vue` file of your home page (for example, `HomeView.vue`) to `index.vue`.
+- Rename the `.vue` files of your other pages to follow kebab-case. For example, `AboutView.vue` could be renamed to `about.vue`
+- Add a `
+ title: Home
+ description: First Coffee, Then Conquer!
+
+
+
+
+
+
+
+
+```
+
+## 8. Add a New Page
+
+îles provides excellent support for authoring your pages with markdown (`.md`, `.mdx`).
+
+- Create a third page `src/pages/our-story.md` as shown below.
+- Add a third anchor tag for `our-story` under `nav` in `layouts/default.vue`.
+
+```md
+---
+title: Our Story
+description: Crafting Memories, Brewing History!
+---
+
+# This is our story page
+```
+
+```vue
+
+
+ Home
+ About
+ Our Story
+
+```
+
+## 9. Build Your Site
+
+- Stop your development server by pressing `Cmd/Ctrl+C` in your terminal.
+- Use the following command to build your site.
+- Alternatively, refer to the [usage] to add commands to your `package.json`.
+
+```bash
+npx iles build # or pnpm, yarn, bun
+```
+
+Check the `dist` folder to see the three HTML pages generated along with their CSS assets.
+
+Note that `zero` JavaScript is shipped. To add interactive îslands, refer to the [islands] and [frameworks] pages.
+
+
diff --git a/packages/hydration/vue.ts b/packages/hydration/vue.ts
index 1948c7dc..ada7d403 100644
--- a/packages/hydration/vue.ts
+++ b/packages/hydration/vue.ts
@@ -1,22 +1,30 @@
-import { h, createApp as createClientApp, createStaticVNode, createSSRApp } from 'vue'
-import type { DefineComponent as Component, Component as App } from 'vue'
-import type { Props, Slots } from './types'
+import { createApp as createClientApp, createSSRApp, createStaticVNode, h, Suspense } from 'vue'
+import type { Component as App, DefineComponent as Component } from 'vue'
+import type { EnhanceIslands, Props, Slots } from './types'
import { onDispose } from './hydration'
const createVueApp = import.meta.env.SSR ? createSSRApp : createClientApp
// Internal: Creates a Vue app and mounts it on the specified island root.
-export default function createVueIsland (component: Component, id: string, el: Element, props: Props, slots: Slots | undefined) {
+export default async function createVueIsland (component: Component, id: string, el: Element, props: Props, slots: Slots | undefined, enhanceIslands: EnhanceIslands) {
const slotFns = slots && Object.fromEntries(Object.entries(slots).map(([slotName, content]) => {
return [slotName, () => (createStaticVNode as any)(content)]
}))
- const appDefinition: App = { render: () => h(component, props, slotFns) }
+ let appDefinition: App
+ const isAsyncSetup = component.setup?.constructor.name === 'AsyncFunction'
+ if (isAsyncSetup)
+ appDefinition = { render: () => h(Suspense, [h(component, props, slotFns)]) }
+ else
+ appDefinition = { render: () => h(component, props, slotFns) }
if (import.meta.env.DEV)
appDefinition.name = `Island: ${nameFromFile(component.__file)}`
const app = createVueApp(appDefinition)
+ if (enhanceIslands)
+ await enhanceIslands({ app })
+
app.mount(el!, Boolean(slots))
if (import.meta.env.DISPOSE_ISLANDS)
@@ -29,4 +37,4 @@ export default function createVueIsland (component: Component, id: string, el: E
function nameFromFile (file?: string) {
const regex = /(\w+?)(?:\.vue)?$/
return file?.match(regex)?.[1] || file
-}
+}
\ No newline at end of file
diff --git a/packages/icons/README.md b/packages/icons/README.md
index ae913fe1..24e53c2a 100644
--- a/packages/icons/README.md
+++ b/packages/icons/README.md
@@ -19,7 +19,7 @@
[îles]: https://github.com/ElMassimo/iles
-[components]: https://iles-docs.netlify.app/guide/development
+[components]: https://iles-docs.netlify.app/guide/project-structure
[unplugin-icons]: https://github.com/antfu/unplugin-icons
An [îles] module to add and configure [unplugin-icons]:
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 79b52d7a..77823a25 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -11,10 +11,10 @@
"dist",
"src"
],
- "types": "dist/icons.d.cts",
"type": "module",
"exports": {
".": {
+ "types": "./dist/icons.d.cts",
"import": "./src/icons.mjs",
"require": "./dist/icons.cjs"
},
@@ -34,4 +34,4 @@
"devDependencies": {
"iles": "workspace:*"
}
-}
+}
\ No newline at end of file
diff --git a/packages/iles/README.md b/packages/iles/README.md
index 54ec424f..770daae8 100644
--- a/packages/iles/README.md
+++ b/packages/iles/README.md
@@ -20,6 +20,6 @@
[îles]: https://github.com/ElMassimo/iles
[cli]: https://iles-docs.netlify.app/guide#usage
-[client library]: https://iles-docs.netlify.app/guide/development#using-page-data
+[client library]: https://iles-docs.netlify.app/guide/project-structure#using-page-data
The main [îles] package, which provides a [cli] and the [client library].
diff --git a/packages/iles/package.json b/packages/iles/package.json
index c58f3901..4294c8ab 100644
--- a/packages/iles/package.json
+++ b/packages/iles/package.json
@@ -8,7 +8,6 @@
},
"main": "./dist/node/index.js",
"module": "./dist/node/index.js",
- "types": "./types/index.d.ts",
"exports": {
".": {
"types": "./types/index.d.ts",
@@ -81,17 +80,19 @@
"mico-spinner": "^1.4.0",
"micromatch": "^4.0.7",
"minimist": "^1.2.8",
+ "parse5": "^7.2.1",
"pathe": "^1.1.2",
"picocolors": "^1.0.1",
"unist-util-visit": "^5.0.0",
+ "unplugin-auto-import": "^19.0.0",
"unplugin-vue-components": "^0.27.3",
- "vite": "^5.4.10",
+ "vite": "6.0.11",
"vue": "^3.5.12",
"vue-router": "^4.4.0"
},
"devDependencies": {
"@preact/preset-vite": "^2.9.1",
- "@sveltejs/vite-plugin-svelte": "^4.0.0",
+ "@sveltejs/vite-plugin-svelte": "^4.0.4",
"@types/debug": "^4.1.12",
"@types/fs-extra": "^11.0.4",
"@types/micromatch": "^4.0.9",
@@ -117,4 +118,4 @@
"vite-plugin-solid": "^2.10.2",
"vue-tsc": "^2.1.10"
}
-}
+}
\ No newline at end of file
diff --git a/packages/iles/src/client/app/components/Island.vue b/packages/iles/src/client/app/components/Island.vue
index d8978932..f95f64a4 100644
--- a/packages/iles/src/client/app/components/Island.vue
+++ b/packages/iles/src/client/app/components/Island.vue
@@ -83,6 +83,7 @@ export default defineComponent({
const { _, ...slots } = this.$slots
const slotVNodes = mapObject(slots, slotFn => slotFn?.())
const hydrationPkg = `${isSSR ? '' : '/@id/'}@islands/hydration`
+ const userAppPkg = `${isSSR ? '@islands/user-app' : '/@id/virtual:user-app'}`
let renderedSlots: Record
const renderSlots = async () =>
@@ -94,13 +95,16 @@ export default defineComponent({
const frameworkPath = `${hydrationPkg}/${this.framework}`
return `import { ${hydrationFns[this.strategy]} as hydrate } from '${hydrationPkg}'
+import userApp from '${userAppPkg}'
+
+const { enhanceIslands } = userApp
${isEager(this.strategy)
? `import framework from '${frameworkPath}'
import { ${this.importName} as component } from '${componentPath}'`
: `const framework = async () => (await import('${frameworkPath}')).default
const component = async () => (await import('${componentPath}')).${this.importName}`
}
-hydrate(framework, component, '${this.id}', ${serialize(props)}, ${serialize(slots)})
+hydrate(framework, component, '${this.id}', ${serialize(props)}, ${serialize(slots)}, enhanceIslands)
`
}
diff --git a/packages/iles/src/client/app/composables/pageData.ts b/packages/iles/src/client/app/composables/pageData.ts
index b81543ee..91ba2f83 100644
--- a/packages/iles/src/client/app/composables/pageData.ts
+++ b/packages/iles/src/client/app/composables/pageData.ts
@@ -42,6 +42,12 @@ export function installPageData (app: App, siteRef: Ref): PageData {
const meta = reactiveFromFn(() => page.value.meta || {})
const frontmatter = reactiveFromFn(() => page.value.frontmatter || {})
const props = computedInPage(() => propsFromRoute(route))
+
+ siteRef.value = {
+ title: 'Îles',
+ description: 'An Îles Site',
+ ...siteRef.value,
+ }
const site = toReactive(siteRef)
const pageData: PageData = { route, page, meta, frontmatter, site, props }
diff --git a/packages/iles/src/client/app/head.ts b/packages/iles/src/client/app/head.ts
index 183008b5..769ba308 100644
--- a/packages/iles/src/client/app/head.ts
+++ b/packages/iles/src/client/app/head.ts
@@ -28,10 +28,10 @@ export function defaultHead ({ frontmatter, meta, route, config, site }: AppCont
{ property: 'og:site_name', content: site.title },
{ property: 'og:title', content: title },
{ property: 'og:description', content: description },
- { property: 'twitter:domain', content: site.canonical },
- { property: 'twitter:title', content: title },
- { property: 'twitter:description', content: description },
- { property: 'twitter:url', content: currentUrl },
+ { name: 'twitter:domain', content: site.canonical },
+ { name: 'twitter:title', content: title },
+ { name: 'twitter:description', content: description },
+ { name: 'twitter:url', content: currentUrl },
)
}
diff --git a/packages/iles/src/client/app/index.ts b/packages/iles/src/client/app/index.ts
index d175c9e7..81c4dd21 100644
--- a/packages/iles/src/client/app/index.ts
+++ b/packages/iles/src/client/app/index.ts
@@ -4,9 +4,7 @@ import { createHead } from '@unhead/vue'
import routes from '@islands/routes'
import config from '@islands/app-config'
-import userApp from '@islands/user-app'
-import siteRef from '@islands/user-site'
-import type { CreateAppFactory, AppContext, RouterOptions } from '../shared'
+import type { CreateAppFactory, AppContext, RouterOptions, UserApp, UserSite } from '../shared'
import App from './components/App.vue'
import { installPageData, forcePageUpdate } from './composables/pageData'
import { installMDXComponents } from './composables/mdxComponents'
@@ -32,8 +30,28 @@ function createRouter (base: string | undefined, routerOptions: Partial {
- const { head: headConfig, enhanceApp, router: routerOptions } = userApp
+ let userApp: UserApp
+ try {
+ userApp = unwrapModule(await import('@islands/user-app'))
+ }
+ catch (err) {
+ userApp = {}
+ }
+
+ let siteRef: UserSite
+ try {
+ siteRef = unwrapModule(await import('@islands/user-site'))
+ }
+ catch (err) {
+ siteRef = {}
+ }
+
+ const { head: headConfig, enhanceIslands, enhanceApp, router: routerOptions } = userApp
const { routePath = config.base, ssrProps } = options
const app = newApp(App)
@@ -78,7 +96,14 @@ export const createApp: CreateAppFactory = async (options = {}) => {
// Apply any configuration added by the user in app.ts
// if (headConfig) useHead(ref(typeof headConfig === 'function' ? headConfig(context) : headConfig))
if (headConfig) head.push(ref(typeof headConfig === 'function' ? headConfig(context) : headConfig))
- if (enhanceApp) await enhanceApp(context)
+
+ // enhanceIslands is called on the shell app during development otherwise user will have to duplicate `app.use(pinia)` in both enhanceIslands and enhanceApp
+ if (enhanceIslands) {
+ await enhanceIslands({ app })
+ }
+ if (enhanceApp) {
+ await enhanceApp(context)
+ }
await installMDXComponents(context, userApp)
return context
diff --git a/packages/iles/src/client/index.ts b/packages/iles/src/client/index.ts
index 133286ce..f18e78d3 100644
--- a/packages/iles/src/client/index.ts
+++ b/packages/iles/src/client/index.ts
@@ -11,7 +11,6 @@ export { usePage, computedInPage } from './app/composables/pageData'
export { useMDXComponents, provideMDXComponents } from './app/composables/mdxComponents'
export { useVueRenderer } from './app/composables/vueRenderer'
export { useRouter, useRoute } from 'vue-router'
-export { useHead } from '@unhead/vue'
import type { ComponentOptionsWithoutProps, ComputedRef } from 'vue'
import type { UserApp, GetStaticPaths, Document } from '../../types/shared'
diff --git a/packages/iles/src/node/alias.ts b/packages/iles/src/node/alias.ts
index aa5fa37d..6e3c331a 100644
--- a/packages/iles/src/node/alias.ts
+++ b/packages/iles/src/node/alias.ts
@@ -30,9 +30,13 @@ export const APP_CONFIG_REQUEST_PATH = `/${APP_CONFIG_ID}`
export const USER_APP_ID = '@islands/user-app'
export const USER_APP_REQUEST_PATH = `/${USER_APP_ID}`
+export const USER_APP_ID_VIRTUAL = 'virtual:user-app'
+export const USER_APP_ID_VIRTUAL_RESOLVED = `\0${USER_APP_ID_VIRTUAL}`
export const USER_SITE_ID = '@islands/user-site'
export const USER_SITE_REQUEST_PATH = `/${USER_SITE_ID}`
+export const USER_SITE_ID_VIRTUAL = 'virtual:user-site'
+export const USER_SITE_ID_VIRTUAL_RESOLVED = `\0${USER_SITE_ID_VIRTUAL}`
export const NOT_FOUND_REQUEST_PATH = '@islands/components/NotFound'
@@ -40,7 +44,9 @@ export function resolveAliases (root: string, userConfig: UserConfig): AliasOpti
const paths: Record = {
'/@shared': SHARED_PATH,
[USER_APP_ID]: USER_APP_REQUEST_PATH,
+ [USER_APP_ID_VIRTUAL]: USER_APP_ID_VIRTUAL_RESOLVED,
[USER_SITE_ID]: USER_SITE_REQUEST_PATH,
+ [USER_SITE_ID_VIRTUAL]: USER_SITE_ID_VIRTUAL_RESOLVED,
[APP_CONFIG_ID]: APP_CONFIG_REQUEST_PATH,
}
diff --git a/packages/iles/src/node/build/render.ts b/packages/iles/src/node/build/render.ts
index 1f598617..7f82d0de 100644
--- a/packages/iles/src/node/build/render.ts
+++ b/packages/iles/src/node/build/render.ts
@@ -9,6 +9,7 @@ import type { Awaited, AppConfig, CreateAppFactory, IslandsByPath, RouteToRender
import type { bundle } from './bundle'
import { withSpinner } from './utils'
import { getRoutesToRender } from './routes'
+import { getUserShell } from '../plugin/html';
const commentsRegex = /||/g
@@ -55,7 +56,41 @@ export async function renderPage (
const { headTags, htmlAttrs, bodyTagsOpen, bodyTags, bodyAttrs } = await renderSSRHead(head)
- return `
+ const {
+ userShell,
+ isValidUserShell,
+ errorMsgUserShell,
+ } = await getUserShell(config)
+
+ if (!isValidUserShell) {
+ throw new Error(errorMsgUserShell)
+ }
+
+ // Tried prettier format(), but it adds closing tag to void tags (link) which results in css not loading correctly, hence dropped it
+ // let transformedHtml = await format(userShell, { parser: 'html' });
+ // TODO: prettierx is a prettier fork with option to format without this issue
+ // let transformedHtml = await format(userShell, { parser: 'html', htmlVoidTags: true });
+ let transformedHtml = userShell
+
+ // Add if missing
+ const doctypeRegex = /^\s*/i
+ if (!doctypeRegex.test(transformedHtml)) {
+ transformedHtml = `${transformedHtml}`;
+ }
+
+ // const ilesDevShellRegex = /]*src=["']\/@iles-entry["'][^>]*>\s*<\/script>/gi
+ const ilesDevShellRegex = /]*src=["']\/@iles-entry["'][^>]*>\s*<\/script>\s*/gi;
+
+ // TODO: Instead of string replacement, best to parse the html using parse5 to update it. User could already have meta tags defined in their userShell, and iles shall add duplicate them.
+ transformedHtml = transformedHtml
+ .replace(/]*)>/, ``) // Add placeholder to html tag
+ .replace(/<\/head>/, ` ${headTags}\n ${stylesheetTagsFrom(config, clientChunks)}\n ${await scriptTagsFrom(config, islandsByPath[route.path])}\n `) // Append placeholders to head
+ .replace(/]*)>/, ``) // Add placeholder to body tag
+ .replace(//, `${bodyTagsOpen}
${content}`) // Add placeholders to app div
+ .replace(/<\/body>/, `${bodyTags} `) // Add closing body placeholders
+ .replace(ilesDevShellRegex, ''); // Remove iles dev shell if it exists as it's only for development
+
+ const html = isValidUserShell ? transformedHtml : `
${headTags}
@@ -66,6 +101,8 @@ export async function renderPage (
${bodyTagsOpen}
${content}
${bodyTags}
`
+
+ return html
}
function stylesheetTagsFrom (config: AppConfig, clientChunks: RollupOutput['output']) {
diff --git a/packages/iles/src/node/config.ts b/packages/iles/src/node/config.ts
index 8a5d84f0..5697d63d 100644
--- a/packages/iles/src/node/config.ts
+++ b/packages/iles/src/node/config.ts
@@ -11,6 +11,9 @@ import mdx from '@islands/mdx'
import type { ComponentResolverFunction } from 'unplugin-vue-components/types'
import type { UserConfig } from 'iles'
+import autoImport from 'unplugin-auto-import/vite'
+import { unheadVueComposablesImports } from '@unhead/vue'
+
import type {
AppConfig,
ConfigEnv,
@@ -135,6 +138,7 @@ async function setNamedPlugins (config: AppConfig, env: ConfigEnv, plugins: Name
tagName.startsWith('ile-') || ceChecks.some(fn => fn!(tagName))
plugins.components = components(config.components)
+ plugins.autoImport = autoImport(config.autoImport)
plugins.vue = vue(config.vue)
const optionalPlugins = {
@@ -269,6 +273,7 @@ function appConfigDefaults (appConfig: AppConfig, userConfig: UserConfig, env: C
[remarkWrapIslands, { get config () { return appConfig } }],
],
},
+ // For details, refer to https://github.com/antfu/unplugin-vue-components#configuration
components: {
dts: true,
extensions: ['vue', 'jsx', 'tsx', 'js', 'ts', 'mdx', 'svelte'],
@@ -280,6 +285,45 @@ function appConfigDefaults (appConfig: AppConfig, userConfig: UserConfig, env: C
],
transformer: 'vue3',
},
+ // For details, refer to https://github.com/antfu/unplugin-auto-import#configuration
+ autoImport: {
+ dts: true,
+ include: [
+ /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+ /\.vue$/,
+ /\.vue\?vue/, // .vue
+ /\.md$/, // .md
+ /\.mdx$/, // .mdx
+ /\.svelte$/, // .svelte
+ ],
+ imports: [
+ 'vue',
+ // 'vue-i18n',
+ // 'vue/macros',
+ unheadVueComposablesImports,
+ // '@vueuse/core',
+ // 'pinia',
+ {
+ iles: [
+ 'usePage',
+ 'useRoute',
+ 'definePageComponent',
+ 'useDocuments',
+ ],
+ }
+ ],
+ dirs: [
+ // 'src/hooks',
+ 'src/composables', // only root modules
+ // 'src/composables/**', // all nested modules
+ // 'src/utils',
+ // 'src/stores',
+ ],
+ vueTemplate: true,
+ resolvers: [
+ /* ... */
+ ],
+ },
}
}
@@ -310,6 +354,8 @@ function viteConfigDefaults (root: string, userConfig: UserConfig): ViteOptions
'@islands/hydration',
'@islands/prerender',
'vue/server-renderer',
+ 'virtual:user-app',
+ 'virtual:user-site',
],
},
}
diff --git a/packages/iles/src/node/plugin/composables.ts b/packages/iles/src/node/plugin/composables.ts
deleted file mode 100644
index f3bf8f16..00000000
--- a/packages/iles/src/node/plugin/composables.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { promises as fs } from 'fs'
-import { resolve } from 'pathe'
-import { uniq } from './utils'
-import { parseImports } from './parse'
-
-const definitionRegex = /(?:function|const|let|var)\s+(definePageComponent|use(?:Page|Route|Head|Documents)\b)/g
-const composableUsageRegex = /\b(definePageComponent|use(?:Page|Route|Head|Documents))\s*\(/g
-
-const composables = [
- 'definePageComponent',
- 'useDocuments',
- 'useHead',
- 'usePage',
- 'useRoute',
-]
-
-export async function autoImportComposables (code: string, id: string): Promise
{
- const matches = Array.from(code.matchAll(composableUsageRegex))
- if (matches.length === 0) return
-
- const imports = await parseImports(code)
- const defined = new Set(Array.from(code.matchAll(definitionRegex)).map(a => a[1]))
-
- const composables = uniq(matches.map(a => a[1]))
- .filter(composable => !defined.has(composable) && !imports[composable])
- .join(', ')
-
- if (composables)
- return `${code}\nimport { ${composables} } from "iles"`
-}
-
-export function writeComposablesDTS (root: string) {
- fs.writeFile(resolve(root, 'composables.d.ts'), `// generated by iles
-// We suggest you to commit this file into source control
-
-declare global {
-${composables.map(fn => ` const ${fn}: typeof import('iles')['${fn}']`).join('\n')}
-}
-
-export { }
-`, 'utf-8')
-}
diff --git a/packages/iles/src/node/plugin/html.ts b/packages/iles/src/node/plugin/html.ts
new file mode 100644
index 00000000..a04c35a3
--- /dev/null
+++ b/packages/iles/src/node/plugin/html.ts
@@ -0,0 +1,363 @@
+// Inspired by Vite's html parsing with parse5 https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/html.ts
+
+import { promises as fs } from 'fs'
+import { exists } from './utils'
+import { resolve } from 'pathe'
+
+import type { AppConfig } from '../shared'
+import { ILES_APP_ENTRY } from '../constants'
+
+import type { DefaultTreeAdapterMap, ParserError, Token } from 'parse5'
+import type {
+ RollupError,
+} from 'rollup'
+
+function nodeIsElement (
+ node: DefaultTreeAdapterMap['node'],
+): node is DefaultTreeAdapterMap['element'] {
+ return node.nodeName[0] !== '#'
+}
+
+function traverseNodes (
+ node: DefaultTreeAdapterMap['node'],
+ visitor: (node: DefaultTreeAdapterMap['node']) => void,
+) {
+ if (node.nodeName === 'template') {
+ node = (node as DefaultTreeAdapterMap['template']).content
+ }
+ visitor(node)
+ if (
+ nodeIsElement(node)
+ || node.nodeName === '#document'
+ || node.nodeName === '#document-fragment'
+ ) {
+ node.childNodes.forEach((childNode) => traverseNodes(childNode, visitor))
+ }
+}
+
+const splitRE = /\r?\n/g
+
+const range: number = 2
+
+interface Pos {
+ /** 1-based */
+ line: number
+ /** 0-based */
+ column: number
+}
+
+function posToNumber (source: string, pos: number | Pos): number {
+ if (typeof pos === 'number') return pos
+ const lines = source.split(splitRE)
+ const { line, column } = pos
+ let start = 0
+ for (let i = 0; i < line - 1 && i < lines.length; i++) {
+ start += lines[i].length + 1
+ }
+ return start + column
+}
+
+function generateCodeFrame (
+ source: string,
+ start: number | Pos = 0,
+ end?: number | Pos,
+): string {
+ start = Math.max(posToNumber(source, start), 0)
+ end = Math.min(
+ end !== undefined ? posToNumber(source, end) : start,
+ source.length,
+ )
+ const lines = source.split(splitRE)
+ let count = 0
+ const res: string[] = []
+ for (let i = 0; i < lines.length; i++) {
+ count += lines[i].length
+ if (count >= start) {
+ for (let j = i - range; j <= i + range || end > count; j++) {
+ if (j < 0 || j >= lines.length) continue
+ const line = j + 1
+ res.push(
+ `${line}${' '.repeat(Math.max(3 - String(line).length, 0))}| ${lines[j]
+ }`,
+ )
+ const lineLength = lines[j].length
+ if (j === i) {
+ // push underline
+ const pad = Math.max(start - (count - lineLength), 0)
+ const length = Math.max(
+ 1,
+ end > count ? lineLength - pad : end - start,
+ )
+ res.push(` | ${' '.repeat(pad)}${'^'.repeat(length)}`)
+ }
+ else if (j > i) {
+ if (end > count) {
+ const length = Math.max(Math.min(end - count, lineLength), 1)
+ res.push(` | ${'^'.repeat(length)}`)
+ }
+ count += lineLength + 1
+ }
+ }
+ break
+ }
+ count++
+ }
+ return res.join('\n')
+}
+
+/**
+ * Format parse5 @type {ParserError} to @type {RollupError}
+ */
+function formatParseError (parserError: ParserError, id: string, html: string) {
+ const formattedError = {
+ code: parserError.code,
+ message: `parse5 error code ${parserError.code}`,
+ frame: generateCodeFrame(
+ html,
+ parserError.startOffset,
+ parserError.endOffset,
+ ),
+ loc: {
+ file: id,
+ line: parserError.startLine,
+ column: parserError.startCol,
+ },
+ } satisfies RollupError
+ return formattedError
+}
+
+function handleParseError (
+ parserError: ParserError,
+ html: string,
+ filePath: string,
+) {
+ switch (parserError.code) {
+ case 'missing-doctype':
+ // ignore missing DOCTYPE
+ return
+ case 'abandoned-head-element-child':
+ // Accept elements without closing tag in
+ return
+ case 'duplicate-attribute':
+ // Accept duplicate attributes #5966
+ // The first attribute is used, browsers silently ignore duplicates
+ return
+ case 'non-void-html-element-start-tag-with-trailing-solidus':
+ // Allow self closing on non-void elements #10439
+ return
+ case 'unexpected-question-mark-instead-of-tag-name':
+ // Allow declaration and empty elements
+ // lit generates : https://github.com/lit/lit/issues/2470
+ return
+ }
+ const parseError = formatParseError(parserError, filePath, html)
+ throw new Error(
+ `Unable to parse HTML; ${parseError.message}\n`
+ + ` at ${parseError.loc.file}:${parseError.loc.line}:${parseError.loc.column}\n`
+ + `${parseError.frame}`,
+ )
+}
+
+async function traverseHtml (
+ html: string,
+ filePath: string,
+ visitor: (node: DefaultTreeAdapterMap['node']) => void,
+): Promise {
+ // lazy load compiler
+ const { parse } = await import('parse5')
+ const ast = parse(html, {
+ scriptingEnabled: false, // parse inside
+ sourceCodeLocationInfo: true,
+ onParseError: (e: ParserError) => {
+ handleParseError(e, html, filePath)
+ },
+ })
+ traverseNodes(ast, visitor)
+}
+
+function getScriptInfo (node: DefaultTreeAdapterMap['element']): {
+ src: Token.Attribute | undefined
+ srcSourceCodeLocation: Token.Location | undefined
+ isModule: boolean
+ isAsync: boolean
+ isIgnored: boolean
+} {
+ let src: Token.Attribute | undefined
+ let srcSourceCodeLocation: Token.Location | undefined
+ let isModule = false
+ let isAsync = false
+ let isIgnored = false
+ for (const p of node.attrs) {
+ if (p.prefix !== undefined) continue
+ if (p.name === 'src') {
+ if (!src) {
+ src = p
+ srcSourceCodeLocation = node.sourceCodeLocation?.attrs!.src
+ }
+ }
+ else if (p.name === 'type' && p.value && p.value === 'module') {
+ isModule = true
+ }
+ else if (p.name === 'async') {
+ isAsync = true
+ }
+ else if (p.name === 'vite-ignore') {
+ isIgnored = true
+ }
+ }
+ return { src, srcSourceCodeLocation, isModule, isAsync, isIgnored }
+}
+
+interface HtmlTagDescriptor {
+ tag: string
+ attrs?: Record
+ children?: string | HtmlTagDescriptor[]
+ /**
+ * default: 'head-prepend'
+ */
+ injectTo?: 'head' | 'body' | 'head-prepend' | 'body-prepend'
+}
+
+const unaryTags = new Set(['link', 'meta', 'base'])
+
+function serializeTag (
+ { tag, attrs, children }: HtmlTagDescriptor,
+ indent: string = '',
+): string {
+ if (unaryTags.has(tag)) {
+ return `<${tag}${serializeAttrs(attrs)}>`
+ }
+ else {
+ return `<${tag}${serializeAttrs(attrs)}>${serializeTags(
+ children,
+ incrementIndent(indent),
+ )}`
+ }
+}
+
+function serializeTags (
+ tags: HtmlTagDescriptor['children'],
+ indent: string = '',
+): string {
+ if (typeof tags === 'string') {
+ return tags
+ }
+ else if (tags && tags.length) {
+ return tags.map((tag) => `${indent}${serializeTag(tag, indent)}\n`).join('')
+ }
+ return ''
+}
+
+const escapeHtmlReplaceMap = {
+ '&': '&',
+ '\'': ''',
+ '`': '`',
+ '"': '"',
+ '<': '<',
+ '>': '>',
+}
+
+function escapeHtml (string: string | undefined): string {
+ // @ts-ignore
+ return string.replace(/[&'`"<>]/g, (match) => escapeHtmlReplaceMap[match])
+}
+
+
+function serializeAttrs (attrs: HtmlTagDescriptor['attrs']): string {
+ let res = ''
+ for (const key in attrs) {
+ if (typeof attrs[key] === 'boolean') {
+ res += attrs[key] ? ` ${key}` : ``
+ }
+ else {
+ res += ` ${key}="${escapeHtml(attrs[key])}"`
+ }
+ }
+ return res
+}
+
+function incrementIndent (indent: string = '') {
+ return `${indent}${indent[0] === '\t' ? '\t' : ' '}`
+}
+
+// User provided index.html
+export async function getUserShell (config: AppConfig, html: string = ''): Promise<{
+ userShellPath: string
+ userShell: string
+ isValidUserShell: boolean
+ errorMsgUserShell: string
+}> {
+
+ const userShellPath = resolve(config.root, 'index.html')
+
+ let userShell = html
+
+ let ilesDevShellExists = false; let divAppForShell = false
+
+ if (!userShell) {
+ if (await exists(userShellPath)) {
+ userShell = await fs.readFile(userShellPath, 'utf-8')
+ }
+ else {
+ userShell = `
+
+
+
+
+
+
+`
+ }
+ }
+
+ await traverseHtml(userShell, userShellPath, (node) => {
+ if (!nodeIsElement(node)) {
+ return
+ }
+
+ // script tags
+ if (node.nodeName === 'script') {
+ const { src } = getScriptInfo(node)
+ if (src?.value === ILES_APP_ENTRY) {
+ ilesDevShellExists = true
+ }
+ }
+
+ if (node.nodeName === 'div') {
+ const nonTextCommentChildNodes = node.childNodes.filter(node => node.nodeName !== '#text' && node.nodeName !== '#comment')
+ if (!nonTextCommentChildNodes.length) {
+ for (const attr of node.attrs) {
+ if (attr.name === 'id' && attr.value === 'app') {
+ divAppForShell = true
+ break;
+ }
+ }
+ }
+ }
+ })
+
+ let errorMsgUserShell = ''; let isValidUserShell = true
+
+ if (!ilesDevShellExists) {
+ // Inject iles dev shell if it doesn't exist
+ const ilesDevShell = '';
+ const bodyCloseTag = '';
+ return await getUserShell(config, userShell.replace(bodyCloseTag, `${ilesDevShell}\n${bodyCloseTag}`))
+ }
+
+ if (!divAppForShell) {
+ errorMsgUserShell = `[îles] index.html doesn't contain an div#app placeholder to load shell. Add
inside body.`
+ isValidUserShell = false
+ }
+
+ if (!isValidUserShell) {
+ throw new Error(errorMsgUserShell)
+ }
+
+ return {
+ userShellPath,
+ userShell,
+ isValidUserShell,
+ errorMsgUserShell,
+ }
+}
diff --git a/packages/iles/src/node/plugin/middleware.ts b/packages/iles/src/node/plugin/middleware.ts
index e232e71f..dbfe0a0a 100644
--- a/packages/iles/src/node/plugin/middleware.ts
+++ b/packages/iles/src/node/plugin/middleware.ts
@@ -17,6 +17,13 @@ const debug = createDebugger('iles:html-page-fallback')
export function configureMiddleware (config: AppConfig, server: ViteDevServer, defaultLayoutPath: string) {
restartOnConfigChanges(config, server)
+ // If user included the vite vue plugin via their own vite.config.ts, then iles's vite vue plugin will consume a transformed sfc and error out. So, error out and alert user
+ const vueVitePlugins = server.config.plugins.filter(plugin => plugin.name === 'vite-plugin-vue' || plugin.name === 'vite:vue')
+
+ if (vueVitePlugins.length > 1) {
+ throw new Error(`[îles] Duplicate Vue Vite plugin detected. Ensure @vitejs/plugin-vue is removed from the Vite plugins array in vite.config.ts or iles.config.ts. Use the 'vue' property in iles.config.ts to pass any configuration to the Vue Vite plugin which is already included by îles.\n`)
+ }
+
const htmlPagesMiddleware: Connect.NextHandleFunction = function ilesHtmlPagesMiddleware (req, res, next) {
let { url = '' } = req
diff --git a/packages/iles/src/node/plugin/plugin.ts b/packages/iles/src/node/plugin/plugin.ts
index 5b29d434..7fd89152 100644
--- a/packages/iles/src/node/plugin/plugin.ts
+++ b/packages/iles/src/node/plugin/plugin.ts
@@ -2,19 +2,19 @@ import { promises as fs } from 'fs'
import { basename, resolve, relative } from 'pathe'
import type { PluginOption, ResolvedConfig, ViteDevServer } from 'vite'
import { transformWithEsbuild } from 'vite'
+import { getUserShell } from './html';
import MagicString from 'magic-string'
import type { AppConfig, AppClientConfig } from '../shared'
import { ILES_APP_ENTRY } from '../constants'
-import { APP_PATH, APP_COMPONENT_PATH, USER_APP_REQUEST_PATH, USER_SITE_REQUEST_PATH, APP_CONFIG_REQUEST_PATH, NOT_FOUND_COMPONENT_PATH, NOT_FOUND_REQUEST_PATH, DEBUG_COMPONENT_PATH } from '../alias'
+import { APP_PATH, APP_COMPONENT_PATH, USER_APP_REQUEST_PATH, USER_SITE_REQUEST_PATH, APP_CONFIG_REQUEST_PATH, NOT_FOUND_COMPONENT_PATH, NOT_FOUND_REQUEST_PATH, USER_APP_ID_VIRTUAL, USER_APP_ID_VIRTUAL_RESOLVED, USER_SITE_ID_VIRTUAL, USER_SITE_ID_VIRTUAL_RESOLVED, DEBUG_COMPONENT_PATH } from '../alias'
import { configureMiddleware } from './middleware'
import { serialize, pascalCase, exists, debug } from './utils'
import { parseId } from './parse'
import { wrapIslandsInSFC, wrapLayout } from './wrap'
import { extendSite } from './site'
import { detectMDXComponents } from './markdown'
-import { autoImportComposables, writeComposablesDTS } from './composables'
import documents from './documents'
function isMarkdown (path: string) {
@@ -68,8 +68,6 @@ export default function IslandsPlugins (appConfig: AppConfig): PluginOption[] {
isBuild = config.command === 'build'
appConfig.resolvePath = config.createResolver()
- writeComposablesDTS(root)
-
// Detect mdxComponents in app.ts to ensure MDX files are compiled accordingly.
const result = await transformUserFile(appPath)
detectMDXComponents(result.code, appConfig, undefined)
@@ -124,6 +122,60 @@ export default function IslandsPlugins (appConfig: AppConfig): PluginOption[] {
server = devServer
return configureMiddleware(appConfig, server, defaultLayoutPath)
},
+ async transformIndexHtml (html, ctx) {
+ const indexHtmlFilePath = resolve(root, 'index.html')
+ if (ctx.filename === indexHtmlFilePath) {
+ // Validate user provided index.html
+ const {
+ userShell,
+ isValidUserShell,
+ errorMsgUserShell,
+ } = await getUserShell(appConfig, html)
+
+ if (!isValidUserShell) {
+ throw new Error(errorMsgUserShell)
+ }
+ return userShell
+ }
+ }
+ },
+ {
+ // app.ts (optional) - use virtual if not user-provided
+ name: 'iles:user-app',
+ enforce: 'pre',
+ resolveId (id) {
+ if (id === USER_APP_ID_VIRTUAL) {
+ return USER_APP_ID_VIRTUAL_RESOLVED
+ }
+ // Prevent import analysis failure if user-app (app.ts) doesn't exist.
+ if (id === appPath) return resolve(root, id.slice(1))
+ },
+ async load (id) {
+ if (id === USER_APP_ID_VIRTUAL_RESOLVED) {
+ const userAppExists = await exists(appPath)
+ return userAppExists ? `import userApp from "${appPath.replace('.ts', '')}"
+export default userApp` : 'export default {}'
+ }
+ },
+ },
+ {
+ // site.ts (optional) - use virtual if not user-provided
+ name: 'iles:site-app',
+ enforce: 'pre',
+ resolveId (id) {
+ if (id === USER_SITE_ID_VIRTUAL) {
+ return USER_SITE_ID_VIRTUAL_RESOLVED
+ }
+ // Prevent import analysis failure if site-app (site.ts) doesn't exist.
+ if (id === sitePath) return resolve(root, id.slice(1))
+ },
+ async load (id) {
+ if (id === USER_SITE_ID_VIRTUAL_RESOLVED) {
+ const userSiteExists = await exists(sitePath)
+ return userSiteExists ? `import siteRef from "${sitePath.replace('.ts', '')}"
+export default siteRef` : 'export default {}'
+ }
+ },
},
{
name: 'iles:detect-islands-in-vue',
@@ -153,21 +205,10 @@ export default function IslandsPlugins (appConfig: AppConfig): PluginOption[] {
plugins.vue,
...appConfig.vitePlugins,
plugins.components,
-
+ plugins.autoImport,
+
documents(appConfig),
- {
- name: 'iles:composables',
- enforce: 'post',
- async transform (code, id) {
- if (!id.startsWith(appConfig.srcDir)) return
-
- const { path, query } = parseId(id)
- if (isVueScript(path, query) || /\.[tj]sx?/.test(path))
- return await autoImportComposables(code, id)
- },
- },
-
{
name: 'iles:page-data',
enforce: 'post',
@@ -216,8 +257,11 @@ export default function IslandsPlugins (appConfig: AppConfig): PluginOption[] {
}
if (isPage) {
+ const layoutPath = `${layoutsRoot}/${layout}.vue`
+ const layoutExists = await exists(resolve(root, layoutPath.slice(1)))
+
appendToSfc('layoutName', serialize(layout))
- appendToSfc('layoutFn', String(layout) === 'false'
+ appendToSfc('layoutFn', String(layout) === 'false' || !layoutExists
? 'false'
: `() => import('${layoutsRoot}/${layout}.vue').then(m => m.default)`)
}
diff --git a/packages/iles/src/node/plugin/wrap.ts b/packages/iles/src/node/plugin/wrap.ts
index 48e59d0d..af9b93d9 100644
--- a/packages/iles/src/node/plugin/wrap.ts
+++ b/packages/iles/src/node/plugin/wrap.ts
@@ -48,7 +48,7 @@ export async function wrapIslandsInSFC (config: AppConfig, code: string, filenam
if (errors.length > 0) return
if ((scriptClient && 'setup' in scriptClient.attrs) || (scriptSetup && Object.keys(scriptSetup.attrs).some(attr => attr.startsWith('client:'))))
- throw new Error('Incorrect usage of hydration strategy in script setup.\nSee https://iles-docs.netlify.app/guide/client-scripts#client-script-block')
+ throw new Error('Incorrect usage of hydration strategy in script setup.\nSee https://iles-docs.netlify.app/guide/islands#client-script-block')
if (!template?.ast?.children.length) {
if (scriptClient) { throw new Error(`Vue components with
-Updates, tips & opinions from the maintainers of Vue.js.
Published on October 10, 2022 We are happy to announce that we have released v1.0 of Volar, the official IDE/TS tooling support for Vue! 🎉
+
Updates, tips & opinions from the maintainers of Vue.js.
Published on October 10, 2022 We are happy to announce that we have released v1.0 of Volar, the official IDE/TS tooling support for Vue! 🎉
This major version ships with tons of improvements across the board. In addition to improving UX, performance, and package size, we also released Plugin API v1 and refactored the core code to be framework-agnostic.
注：結尾附有中文版本 (There is Chinese version of this post at the end)。
Published on July 1, 2022
@@ -91,7 +91,7 @@ exports[`building docs site > html files 2`] = `
Published on January 11, 2021 With a new year upon us, we also have a new blog! In this post, we would like to take a look back at some of the highlights from 2020, as well as some ideas we have for 2021.
Published on September 18, 2020
Today we are proud to announce the official release of Vue.js 3.0 "One Piece". This new major version of the framework provides improved performance, smaller bundle sizes, better TypeScript integration, new APIs for tackling large scale use cases, and a solid foundation for long-term future iterations of the framework.
-
+
Published on October 10, 2022 We are happy to announce that we have released v1.0 of Volar, the official IDE/TS tooling support for Vue! 🎉
+
Published on October 10, 2022 We are happy to announce that we have released v1.0 of Volar, the official IDE/TS tooling support for Vue! 🎉
This major version ships with tons of improvements across the board. In addition to improving UX, performance, and package size, we also released Plugin API v1 and refactored the core code to be framework-agnostic.
注：結尾附有中文版本 (There is Chinese version of this post at the end)。
Published on July 1, 2022
Today we are happy to announce that Vue 2.7 "Naruto" has been released!
-
+
-```
-
-## Components 🧱
-
-Components in the src/components dir will be auto-imported on-demand, powered by [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components).
-
-