├── .github
    ├── FUNDING.yml
    └── workflows
    │   ├── release.yml
    │   └── ci.yml
├── .npmrc
├── nuxt.d.ts
├── CONTRIBUTING.md
├── pnpm-workspace.yaml
├── test
    ├── cases
    │   ├── basic
    │   │   ├── input.html
    │   │   ├── output.ssr.js
    │   │   └── output.csr.js
    │   ├── v-show-lazy
    │   │   ├── input.html
    │   │   ├── output.ssr.js
    │   │   └── output.csr.js
    │   ├── event-props
    │   │   ├── input.html
    │   │   ├── output.ssr.js
    │   │   └── output.csr.js
    │   ├── expressions
    │   │   ├── input.html
    │   │   ├── output.ssr.js
    │   │   └── output.csr.js
    │   └── dynamic-attrs
    │   │   ├── input.html
    │   │   ├── output.ssr.js
    │   │   └── output.csr.js
    └── index.test.ts
├── playgrounds
    ├── vite
    │   ├── src
    │   │   ├── main.ts
    │   │   ├── shims-vue.d.ts
    │   │   ├── HelloWorld.vue
    │   │   └── App.vue
    │   ├── index.html
    │   ├── tsconfig.json
    │   ├── package.json
    │   └── vite.config.ts
    └── nuxt
    │   ├── tsconfig.json
    │   ├── package.json
    │   ├── HelloWorld.vue
    │   ├── nuxt.config.ts
    │   └── app.vue
├── .gitignore
├── eslint.config.js
├── src
    ├── nuxt.ts
    └── index.ts
├── tsconfig.json
├── LICENSE
├── .vscode
    └── settings.json
├── package.json
└── README.md


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: [antfu]
2 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | ignore-workspace-root-check=true
2 | 


--------------------------------------------------------------------------------
/nuxt.d.ts:
--------------------------------------------------------------------------------
1 | export { default } from './dist/nuxt.d'
2 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | Please refer to https://github.com/antfu/contribute
2 | 


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 |   - playgrounds/*
3 |   - examples/*
4 | 


--------------------------------------------------------------------------------
/test/cases/basic/input.html:
--------------------------------------------------------------------------------
1 | <span v-lazy-show="foo">
2 |   Hello
3 | </span>
4 | 


--------------------------------------------------------------------------------
/test/cases/v-show-lazy/input.html:
--------------------------------------------------------------------------------
1 | <span v-show.lazy="foo">
2 |   Hello
3 | </span>
4 | 


--------------------------------------------------------------------------------
/test/cases/event-props/input.html:
--------------------------------------------------------------------------------
1 | <span v-lazy-show="foo" @click="handle" :id="id" class="111">
2 |   Hello
3 | </span>
4 | 


--------------------------------------------------------------------------------
/playgrounds/vite/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | 
4 | createApp(App).mount('#app')
5 | 


--------------------------------------------------------------------------------
/test/cases/expressions/input.html:
--------------------------------------------------------------------------------
1 | <div v-lazy-show="foo === 1 || bar === 2">hello</div>
2 | 
3 | <div v-lazy-show="!a">world</div>
4 | 


--------------------------------------------------------------------------------
/playgrounds/nuxt/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/test/cases/dynamic-attrs/input.html:
--------------------------------------------------------------------------------
1 | <!-- https://github.com/antfu/v-lazy-show/issues/3 -->
2 | <div :role="role" v-lazy-show="isOpen">hello world</div>
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .cache
 2 | .DS_Store
 3 | .idea
 4 | *.log
 5 | *.tgz
 6 | coverage
 7 | dist
 8 | lib-cov
 9 | logs
10 | node_modules
11 | temp
12 | .nuxt
13 | .output
14 | 


--------------------------------------------------------------------------------
/playgrounds/vite/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import type { DefineComponent } from 'vue'
3 | 
4 |   const component: DefineComponent<object, object, any>
5 |   export default component
6 | }
7 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | // @ts-check
 2 | import antfu from '@antfu/eslint-config'
 3 | 
 4 | export default antfu(
 5 |   {
 6 |     ignores: [
 7 |       'test/**/output.*.*',
 8 |     ],
 9 |   },
10 |   {
11 |     rules: {
12 |       // overrides
13 |     },
14 |   },
15 | )
16 | 


--------------------------------------------------------------------------------
/src/nuxt.ts:
--------------------------------------------------------------------------------
1 | import { transformLazyShow } from '.'
2 | 
3 | export default function (_: any, nuxt: any) {
4 |   nuxt.options.vue ||= {}
5 |   nuxt.options.vue.compilerOptions ||= {}
6 |   nuxt.options.vue.compilerOptions.nodeTransforms ||= []
7 |   nuxt.options.vue.compilerOptions.nodeTransforms.unshift(transformLazyShow)
8 | }
9 | 


--------------------------------------------------------------------------------
/playgrounds/vite/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Vite + Vue + TS</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <script type="module" src="/src/main.ts"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/playgrounds/nuxt/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "nuxt build",
 6 |     "dev": "nuxt dev",
 7 |     "generate": "nuxt generate",
 8 |     "preview": "nuxt preview",
 9 |     "postinstall": "nuxt prepare"
10 |   },
11 |   "devDependencies": {
12 |     "@nuxt/devtools": "^1.0.8",
13 |     "nuxt": "^3.11.1"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/test/cases/basic/output.ssr.js:
--------------------------------------------------------------------------------
 1 | import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue"
 2 | import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer"
 3 | 
 4 | export function ssrRender(_ctx, _push, _parent, _attrs) {
 5 |   if (_ctx.foo) {
 6 |     _push(`<span${_ssrRenderAttrs(_mergeProps(_attrs, _attrs))}> Hello </span>`)
 7 |   } else {
 8 |     _push(`<!---->`)
 9 |   }
10 | }


--------------------------------------------------------------------------------
/test/cases/v-show-lazy/output.ssr.js:
--------------------------------------------------------------------------------
 1 | import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue"
 2 | import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer"
 3 | 
 4 | export function ssrRender(_ctx, _push, _parent, _attrs) {
 5 |   if (_ctx.foo) {
 6 |     _push(`<span${_ssrRenderAttrs(_mergeProps(_attrs, _attrs))}> Hello </span>`)
 7 |   } else {
 8 |     _push(`<!---->`)
 9 |   }
10 | }


--------------------------------------------------------------------------------
/playgrounds/nuxt/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { onMounted } from 'vue'
 3 | 
 4 | const props = defineProps({
 5 |   msg: {
 6 |     type: String,
 7 |     required: true,
 8 |   },
 9 | })
10 | 
11 | onMounted(() => {
12 |   // eslint-disable-next-line no-console
13 |   console.log(`${props.msg} mounted`)
14 | })
15 | </script>
16 | 
17 | <template>
18 |   <div>
19 |     Hello {{ msg }}
20 |   </div>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/test/cases/expressions/output.ssr.js:
--------------------------------------------------------------------------------
 1 | import { createVNode as _createVNode } from "vue"
 2 | 
 3 | export function ssrRender(_ctx, _push, _parent, _attrs) {
 4 |   _push(`<!--[-->`)
 5 |   if (_ctx.foo === 1 || _ctx.bar === 2) {
 6 |     _push(`<div>hello</div>`)
 7 |   } else {
 8 |     _push(`<!---->`)
 9 |   }
10 |   if (!_ctx.a) {
11 |     _push(`<div>world</div>`)
12 |   } else {
13 |     _push(`<!---->`)
14 |   }
15 |   _push(`<!--]-->`)
16 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2018",
 4 |     "lib": ["esnext", "dom"],
 5 |     "module": "esnext",
 6 |     "moduleResolution": "node",
 7 |     "resolveJsonModule": true,
 8 |     "types": [
 9 |       "vite/client"
10 |     ],
11 |     "strict": true,
12 |     "strictNullChecks": true,
13 |     "esModuleInterop": true,
14 |     "skipDefaultLibCheck": true,
15 |     "skipLibCheck": true
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/playgrounds/vite/src/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { onMounted } from 'vue'
 3 | 
 4 | const props = defineProps({
 5 |   msg: {
 6 |     type: String,
 7 |     required: true,
 8 |   },
 9 | })
10 | 
11 | onMounted(() => {
12 |   // eslint-disable-next-line no-console
13 |   console.log(`${props.msg} mounted`)
14 | })
15 | </script>
16 | 
17 | <template>
18 |   <div>
19 |     Hello {{ msg }}
20 |   </div>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/playgrounds/vite/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "jsx": "preserve",
 5 |     "lib": ["ESNext", "DOM"],
 6 |     "useDefineForClassFields": true,
 7 |     "module": "ESNext",
 8 |     "moduleResolution": "Node",
 9 |     "resolveJsonModule": true,
10 |     "strict": true,
11 |     "noEmit": true,
12 |     "esModuleInterop": true,
13 |     "isolatedModules": true,
14 |     "skipLibCheck": true
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/test/cases/event-props/output.ssr.js:
--------------------------------------------------------------------------------
 1 | import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue"
 2 | import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer"
 3 | 
 4 | export function ssrRender(_ctx, _push, _parent, _attrs) {
 5 |   if (_ctx.foo) {
 6 |     _push(`<span${_ssrRenderAttrs(_mergeProps({
 7 |       id: _ctx.id,
 8 |       class: "111"
 9 |     }, _attrs, _attrs))}> Hello </span>`)
10 |   } else {
11 |     _push(`<!---->`)
12 |   }
13 | }


--------------------------------------------------------------------------------
/playgrounds/vite/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "playground",
 3 |   "type": "module",
 4 |   "version": "0.0.0",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vue-tsc && vite build",
 9 |     "preview": "vite preview"
10 |   },
11 |   "dependencies": {
12 |     "vue": "^3.4.21"
13 |   },
14 |   "devDependencies": {
15 |     "@vitejs/plugin-vue": "^5.0.4",
16 |     "typescript": "^5.4.2",
17 |     "vite": "^5.1.6",
18 |     "vue-tsc": "^2.0.6"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/test/cases/dynamic-attrs/output.ssr.js:
--------------------------------------------------------------------------------
 1 | import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue"
 2 | import { ssrRenderAttrs as _ssrRenderAttrs } from "vue/server-renderer"
 3 | 
 4 | export function ssrRender(_ctx, _push, _parent, _attrs) {
 5 |   _push(`<!--[--><!-- https://github.com/antfu/v-lazy-show/issues/3 -->`)
 6 |   if (_ctx.isOpen) {
 7 |     _push(`<div${_ssrRenderAttrs(_mergeProps({ role: _ctx.role }, _attrs, _attrs))}>hello world</div>`)
 8 |   } else {
 9 |     _push(`<!---->`)
10 |   }
11 |   _push(`<!--]-->`)
12 | }


--------------------------------------------------------------------------------
/playgrounds/vite/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import Vue from '@vitejs/plugin-vue'
 2 | import { defineConfig } from 'vite'
 3 | import Inspect from 'vite-plugin-inspect'
 4 | import { transformLazyShow } from '../../src'
 5 | 
 6 | // https://vitejs.dev/config/
 7 | export default defineConfig({
 8 |   plugins: [
 9 |     Vue({
10 |       template: {
11 |         compilerOptions: {
12 |           hoistStatic: false,
13 |           nodeTransforms: [
14 |             transformLazyShow,
15 |           ],
16 |         },
17 |       },
18 |     }),
19 |     Inspect(),
20 |   ],
21 | })
22 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | 
 3 | permissions:
 4 |   contents: write
 5 | 
 6 | on:
 7 |   push:
 8 |     tags:
 9 |       - 'v*'
10 | 
11 | jobs:
12 |   release:
13 |     runs-on: ubuntu-latest
14 |     steps:
15 |       - uses: actions/checkout@v4
16 |         with:
17 |           fetch-depth: 0
18 | 
19 |       - name: Install pnpm
20 |         uses: pnpm/action-setup@v4
21 | 
22 |       - name: Set node
23 |         uses: actions/setup-node@v4
24 |         with:
25 |           node-version: lts/*
26 | 
27 |       - run: npx changelogithub
28 |         env:
29 |           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
30 | 


--------------------------------------------------------------------------------
/test/cases/basic/output.csr.js:
--------------------------------------------------------------------------------
 1 | import { Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, vShow as _vShow, withDirectives as _withDirectives } from "vue"
 2 | 
 3 | export function render(_ctx, _cache) {
 4 |   return (_cache._lazyshow1 || _ctx.foo)
 5 |     ? (_cache._lazyshow1 = true, (_openBlock(), _createElementBlock(_Fragment, null, [
 6 |         _withDirectives(_createElementVNode("span", null, " Hello ", 512 /* NEED_PATCH */), [
 7 |           [_vShow, _ctx.foo]
 8 |         ])
 9 |       ], 64 /* STABLE_FRAGMENT */)))
10 |     : _createCommentVNode("v-show-if", true)
11 | }


--------------------------------------------------------------------------------
/test/cases/v-show-lazy/output.csr.js:
--------------------------------------------------------------------------------
 1 | import { Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, vShow as _vShow, withDirectives as _withDirectives } from "vue"
 2 | 
 3 | export function render(_ctx, _cache) {
 4 |   return (_cache._lazyshow1 || _ctx.foo)
 5 |     ? (_cache._lazyshow1 = true, (_openBlock(), _createElementBlock(_Fragment, null, [
 6 |         _withDirectives(_createElementVNode("span", null, " Hello ", 512 /* NEED_PATCH */), [
 7 |           [_vShow, _ctx.foo]
 8 |         ])
 9 |       ], 64 /* STABLE_FRAGMENT */)))
10 |     : _createCommentVNode("v-show-if", true)
11 | }


--------------------------------------------------------------------------------
/test/cases/event-props/output.csr.js:
--------------------------------------------------------------------------------
 1 | import { Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, vShow as _vShow, withDirectives as _withDirectives } from "vue"
 2 | 
 3 | export function render(_ctx, _cache) {
 4 |   return (_cache._lazyshow1 || _ctx.foo)
 5 |     ? (_cache._lazyshow1 = true, (_openBlock(), _createElementBlock(_Fragment, null, [
 6 |         _withDirectives(_createElementVNode("span", {
 7 |           onClick: _cache[1] || (_cache[1] = $event => (_ctx._ctx.handle && _ctx.handle(...args))),
 8 |           id: _ctx.id,
 9 |           class: "111"
10 |         }, " Hello ", 8 /* PROPS */, ["id"]), [
11 |           [_vShow, _ctx.foo]
12 |         ])
13 |       ], 64 /* STABLE_FRAGMENT */)))
14 |     : _createCommentVNode("v-show-if", true)
15 | }


--------------------------------------------------------------------------------
/playgrounds/nuxt/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Plugin } from 'vite'
 2 | import vLazyShow from '../../src/nuxt'
 3 | 
 4 | // https://nuxt.com/docs/api/configuration/nuxt-config
 5 | // eslint-disable-next-line ts/ban-ts-comment
 6 | // @ts-ignore
 7 | export default defineNuxtConfig({
 8 |   modules: [
 9 |     '@nuxt/devtools',
10 |     vLazyShow,
11 |   ],
12 |   devtools: {
13 |     componentInspector: false,
14 |   },
15 |   vite: {
16 |     plugins: [
17 |       <Plugin>{
18 |         name: 'log',
19 |         enforce: 'post',
20 |         transform(code, id, ctx) {
21 |           if (id.includes('app.vue') && ctx?.ssr) {
22 |             const line = `${'-'.repeat(15)}`
23 |             console.log(line)
24 |             console.log(id)
25 |             console.log(line)
26 |             console.log(code)
27 |             console.log(line)
28 |           }
29 |         },
30 |       },
31 |     ],
32 |   },
33 | })
34 | 


--------------------------------------------------------------------------------
/playgrounds/vite/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | import HelloWorld from './HelloWorld.vue'
 4 | 
 5 | const enabled = ref(false)
 6 | 
 7 | function handler(msg?: string) {
 8 |   // eslint-disable-next-line no-console
 9 |   console.log(msg || '111')
10 | }
11 | </script>
12 | 
13 | <template>
14 |   <button @click="enabled = !enabled">
15 |     Toggle
16 |   </button>
17 |   <div v-lazy-show="enabled" @click="handler('v-lazy-show')">
18 |     v-lazy-show
19 |   </div>
20 |   <div v-show="enabled" @click="handler('v-show')">
21 |     v-show
22 |   </div>
23 |   <div v-if="enabled">
24 |     v-if
25 |   </div>
26 |   <hr>
27 |   <div v-lazy-show="enabled">
28 |     <HelloWorld msg="v-lazy-show" :handler="handler" />
29 |   </div>
30 |   <div v-show="enabled">
31 |     <HelloWorld msg="v-show" />
32 |   </div>
33 |   <div v-if="enabled">
34 |     <HelloWorld msg="v-if" />
35 |   </div>
36 | </template>
37 | 


--------------------------------------------------------------------------------
/test/cases/dynamic-attrs/output.csr.js:
--------------------------------------------------------------------------------
 1 | import { createCommentVNode as _createCommentVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, vShow as _vShow, withDirectives as _withDirectives } from "vue"
 2 | 
 3 | export function render(_ctx, _cache) {
 4 |   return (_openBlock(), _createElementBlock(_Fragment, null, [
 5 |     _createCommentVNode(" https://github.com/antfu/v-lazy-show/issues/3 "),
 6 |     (_cache._lazyshow1 || _ctx.isOpen)
 7 |       ? (_cache._lazyshow1 = true, (_openBlock(), _createElementBlock(_Fragment, null, [
 8 |           _withDirectives(_createElementVNode("div", { role: _ctx.role }, "hello world", 8 /* PROPS */, ["role"]), [
 9 |             [_vShow, _ctx.isOpen]
10 |           ])
11 |         ], 64 /* STABLE_FRAGMENT */)))
12 |       : _createCommentVNode("v-show-if", true)
13 |   ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))
14 | }


--------------------------------------------------------------------------------
/playgrounds/nuxt/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | import HelloWorld from './HelloWorld.vue'
 4 | 
 5 | const enabled = ref(false)
 6 | const role = ref('button')
 7 | 
 8 | function handler() {
 9 |   // eslint-disable-next-line no-console
10 |   console.log('click')
11 | }
12 | </script>
13 | 
14 | <template>
15 |   <button @click="enabled = !enabled">
16 |     Toggle
17 |   </button>
18 |   <div v-lazy-show="enabled" @click="handler">
19 |     v-lazy-show
20 |   </div>
21 |   <div v-show="enabled">
22 |     v-show
23 |   </div>
24 |   <div v-if="enabled">
25 |     v-if
26 |   </div>
27 |   <hr>
28 |   <div v-lazy-show="enabled">
29 |     <HelloWorld msg="v-lazy-show" />
30 |   </div>
31 |   <div v-show="enabled">
32 |     <HelloWorld msg="v-show" />
33 |   </div>
34 |   <div v-if="enabled">
35 |     <HelloWorld msg="v-if" />
36 |   </div>
37 |   <hr>
38 |   <!-- https://github.com/antfu/v-lazy-show/issues/3 -->
39 |   <div v-lazy-show="enabled" :role="role">
40 |     hello world
41 |   </div>
42 | </template>
43 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Anthony Fu <https://github.com/antfu>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // Disable the default formatter, use eslint instead
 3 |   "prettier.enable": false,
 4 |   "editor.formatOnSave": false,
 5 | 
 6 |   // Auto fix
 7 |   "editor.codeActionsOnSave": {
 8 |     "source.fixAll": "explicit",
 9 |     "source.organizeImports": "never"
10 |   },
11 | 
12 |   // Silent the stylistic rules in you IDE, but still auto fix them
13 |   "eslint.rules.customizations": [
14 |     { "rule": "style/*", "severity": "off" },
15 |     { "rule": "*-indent", "severity": "off" },
16 |     { "rule": "*-spacing", "severity": "off" },
17 |     { "rule": "*-spaces", "severity": "off" },
18 |     { "rule": "*-order", "severity": "off" },
19 |     { "rule": "*-dangle", "severity": "off" },
20 |     { "rule": "*-newline", "severity": "off" },
21 |     { "rule": "*quotes", "severity": "off" },
22 |     { "rule": "*semi", "severity": "off" }
23 |   ],
24 | 
25 |   // Enable eslint for all supported languages
26 |   "eslint.validate": [
27 |     "javascript",
28 |     "javascriptreact",
29 |     "typescript",
30 |     "typescriptreact",
31 |     "vue",
32 |     "html",
33 |     "markdown",
34 |     "json",
35 |     "jsonc",
36 |     "yaml"
37 |   ]
38 | }
39 | 


--------------------------------------------------------------------------------
/test/cases/expressions/output.csr.js:
--------------------------------------------------------------------------------
 1 | import { Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, vShow as _vShow, withDirectives as _withDirectives } from "vue"
 2 | 
 3 | export function render(_ctx, _cache) {
 4 |   return (_openBlock(), _createElementBlock(_Fragment, null, [
 5 |     (_cache._lazyshow1 || _ctx.foo === 1 || _ctx.bar === 2)
 6 |       ? (_cache._lazyshow1 = true, (_openBlock(), _createElementBlock(_Fragment, null, [
 7 |           _withDirectives(_createElementVNode("div", null, "hello", 512 /* NEED_PATCH */), [
 8 |             [_vShow, _ctx.foo === 1 || _ctx.bar === 2]
 9 |           ])
10 |         ], 64 /* STABLE_FRAGMENT */)))
11 |       : _createCommentVNode("v-show-if", true),
12 |     (_cache._lazyshow2 || !_ctx.a)
13 |       ? (_cache._lazyshow2 = true, (_openBlock(), _createElementBlock(_Fragment, null, [
14 |           _withDirectives(_createElementVNode("div", null, "world", 512 /* NEED_PATCH */), [
15 |             [_vShow, !_ctx.a]
16 |           ])
17 |         ], 64 /* STABLE_FRAGMENT */)))
18 |       : _createCommentVNode("v-show-if", true)
19 |   ], 64 /* STABLE_FRAGMENT */))
20 | }


--------------------------------------------------------------------------------
/test/index.test.ts:
--------------------------------------------------------------------------------
 1 | import type { CompilerOptions } from '@vue/compiler-core'
 2 | import { getBaseTransformPreset } from '@vue/compiler-core'
 3 | import { describe, expect, it } from 'vitest'
 4 | import { compileTemplate } from 'vue/compiler-sfc'
 5 | import { transformLazyShow } from '../src'
 6 | 
 7 | function parseWithForTransform(
 8 |   template: string,
 9 |   options: CompilerOptions = {},
10 |   ssr = false,
11 | ) {
12 |   const [nodeTransforms, directiveTransforms] = getBaseTransformPreset()
13 | 
14 |   const result = compileTemplate({
15 |     id: 'foo.vue',
16 |     filename: 'foo.vue',
17 |     source: template,
18 |     ssr,
19 |     ssrCssVars: [],
20 |     compilerOptions: {
21 |       nodeTransforms: [
22 |         transformLazyShow,
23 |         ...nodeTransforms,
24 |       ],
25 |       directiveTransforms,
26 |       ...options,
27 |     },
28 |   })
29 | 
30 |   return result
31 | }
32 | 
33 | describe('cases', () => {
34 |   const cases = import.meta.glob('./cases/**/input.html', { as: 'raw' })
35 |   for (const [path, fn] of Object.entries(cases)) {
36 |     it(path, async () => {
37 |       const csr = parseWithForTransform(await fn()).code
38 |       await expect(csr).toMatchFileSnapshot(path.replace('input.html', 'output.csr.js'))
39 |       const ssr = parseWithForTransform(await fn(), {}, true).code
40 |       await expect(ssr).toMatchFileSnapshot(path.replace('input.html', 'output.ssr.js'))
41 |     })
42 |   }
43 | })
44 | 
45 | describe('errors', () => {
46 |   it('error on template', () => {
47 |     expect(() => {
48 |       parseWithForTransform(
49 |         `
50 | <template v-lazy-show="foo">
51 | Hello
52 | </template>
53 | `,
54 |       )
55 |     }).toThrowErrorMatchingInlineSnapshot(`[Error: v-lazy-show can not be used on <template>]`)
56 |   })
57 | })
58 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 |   pull_request:
 9 |     branches:
10 |       - main
11 | 
12 | jobs:
13 |   lint:
14 |     runs-on: ubuntu-latest
15 |     steps:
16 |       - uses: actions/checkout@v4
17 | 
18 |       - name: Install pnpm
19 |         uses: pnpm/action-setup@v4
20 | 
21 |       - name: Set node
22 |         uses: actions/setup-node@v4
23 |         with:
24 |           node-version: lts/*
25 |           cache: pnpm
26 | 
27 |       - name: Setup
28 |         run: npm i -g @antfu/ni
29 | 
30 |       - name: Install
31 |         run: nci
32 | 
33 |       - name: Lint
34 |         run: nr lint
35 | 
36 |   typecheck:
37 |     runs-on: ubuntu-latest
38 |     steps:
39 |       - uses: actions/checkout@v4
40 | 
41 |       - name: Install pnpm
42 |         uses: pnpm/action-setup@v4
43 | 
44 |       - name: Set node
45 |         uses: actions/setup-node@v4
46 |         with:
47 |           node-version: lts/*
48 |           cache: pnpm
49 | 
50 |       - name: Setup
51 |         run: npm i -g @antfu/ni
52 | 
53 |       - name: Install
54 |         run: nci
55 | 
56 |       - name: Typecheck
57 |         run: nr typecheck
58 | 
59 |   test:
60 |     runs-on: ${{ matrix.os }}
61 | 
62 |     strategy:
63 |       matrix:
64 |         node: [18.x, lts/*]
65 |         os: [ubuntu-latest, windows-latest, macos-latest]
66 |       fail-fast: false
67 | 
68 |     steps:
69 |       - name: Set git to use LF
70 |         run: |
71 |           git config --global core.autocrlf false
72 |           git config --global core.eol lf
73 | 
74 |       - uses: actions/checkout@v4
75 | 
76 |       - name: Install pnpm
77 |         uses: pnpm/action-setup@v4
78 | 
79 |       - name: Set node ${{ matrix.node }}
80 |         uses: actions/setup-node@v4
81 |         with:
82 |           node-version: ${{ matrix.node }}
83 |           cache: pnpm
84 | 
85 |       - name: Setup
86 |         run: npm i -g @antfu/ni
87 | 
88 |       - name: Install
89 |         run: nci
90 | 
91 |       - name: Build
92 |         run: nr build
93 | 
94 |       - name: Test
95 |         run: nr test
96 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "v-lazy-show",
 3 |   "type": "module",
 4 |   "version": "0.3.0",
 5 |   "packageManager": "pnpm@9.15.0",
 6 |   "description": "Compile-time directive to lazy initialize v-show for Vue",
 7 |   "author": "Anthony Fu <anthonyfu117@hotmail.com>",
 8 |   "license": "MIT",
 9 |   "funding": "https://github.com/sponsors/antfu",
10 |   "homepage": "https://github.com/antfu/v-lazy-show#readme",
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/antfu/v-lazy-show.git"
14 |   },
15 |   "bugs": "https://github.com/antfu/v-lazy-show/issues",
16 |   "keywords": [],
17 |   "sideEffects": false,
18 |   "exports": {
19 |     ".": {
20 |       "types": "./dist/index.d.ts",
21 |       "import": "./dist/index.mjs",
22 |       "require": "./dist/index.cjs"
23 |     },
24 |     "./nuxt": {
25 |       "types": "./dist/nuxt.d.ts",
26 |       "import": "./dist/nuxt.mjs",
27 |       "require": "./dist/nuxt.cjs"
28 |     }
29 |   },
30 |   "main": "./dist/index.mjs",
31 |   "module": "./dist/index.mjs",
32 |   "types": "./dist/index.d.ts",
33 |   "typesVersions": {
34 |     "*": {
35 |       "*": [
36 |         "./dist/*",
37 |         "./dist/index.d.ts"
38 |       ]
39 |     }
40 |   },
41 |   "files": [
42 |     "*.d.ts",
43 |     "dist"
44 |   ],
45 |   "scripts": {
46 |     "build": "unbuild",
47 |     "stub": "unbuild --stub",
48 |     "dev": "nr -C playgrounds/vite dev",
49 |     "lint": "eslint .",
50 |     "prepublishOnly": "nr build",
51 |     "release": "bumpp && npm publish",
52 |     "start": "esno src/index.ts",
53 |     "test": "vitest",
54 |     "typecheck": "vue-tsc --noEmit"
55 |   },
56 |   "peerDependencies": {
57 |     "@vue/compiler-core": "^3.5"
58 |   },
59 |   "devDependencies": {
60 |     "@antfu/eslint-config": "^3.12.0",
61 |     "@antfu/ni": "^0.23.1",
62 |     "@antfu/utils": "^0.7.10",
63 |     "@types/node": "^22.10.2",
64 |     "bumpp": "^9.9.1",
65 |     "eslint": "^9.17.0",
66 |     "esno": "^4.8.0",
67 |     "lint-staged": "^15.2.11",
68 |     "pnpm": "^9.15.0",
69 |     "rimraf": "^6.0.1",
70 |     "simple-git-hooks": "^2.11.1",
71 |     "typescript": "~5.6.3",
72 |     "unbuild": "^3.0.1",
73 |     "vite": "^6.0.3",
74 |     "vite-plugin-inspect": "^0.10.3",
75 |     "vitest": "^2.1.8",
76 |     "vue": "^3.5.13",
77 |     "vue-tsc": "^2.1.10"
78 |   },
79 |   "resolutions": {
80 |     "vite": "^6.0.3",
81 |     "vite-plugin-inspect": "^0.10.3"
82 |   },
83 |   "simple-git-hooks": {
84 |     "pre-commit": "pnpm lint-staged"
85 |   },
86 |   "lint-staged": {
87 |     "*": "eslint --fix"
88 |   }
89 | }
90 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # v-lazy-show
  2 | 
  3 | [![NPM version](https://img.shields.io/npm/v/v-lazy-show?color=a1b858&label=)](https://www.npmjs.com/package/v-lazy-show)
  4 | 
  5 | A compile-time directive to lazy initialize v-show for Vue. It makes components mount after first truthy value (`v-if`), and the DOM keep alive when toggling (`v-show`).
  6 | 
  7 | ## Install
  8 | 
  9 | ```bash
 10 | npm i -D v-lazy-show
 11 | ```
 12 | 
 13 | This package is completely compile-time, installed it as a `nodeTransformer` in Vue's compiler options.
 14 | 
 15 | For example in Vite:
 16 | 
 17 | ```ts
 18 | // vite.config.ts
 19 | import { transformLazyShow } from 'v-lazy-show'
 20 | import { defineConfig } from 'vite'
 21 | 
 22 | export default defineConfig({
 23 |   plugins: [
 24 |     Vue({
 25 |       template: {
 26 |         compilerOptions: {
 27 |           nodeTransforms: [
 28 |             transformLazyShow, // <--- add this
 29 |           ],
 30 |         },
 31 |       },
 32 |     }),
 33 |   ]
 34 | })
 35 | ```
 36 | 
 37 | In Nuxt:
 38 | 
 39 | ```ts
 40 | // nuxt.config.ts
 41 | export default defineNuxtConfig({
 42 |   modules: [
 43 |     'v-lazy-show/nuxt'
 44 |   ]
 45 | })
 46 | ```
 47 | 
 48 | ## Usage
 49 | 
 50 | You can use it as a directive. Both `v-lazy-show` and `v-show.lazy` are supported and equivalent.
 51 | 
 52 | ```vue
 53 | <script setup lang="ts">
 54 | const show = ref(false)
 55 | </script>
 56 | 
 57 | <template>
 58 |   <div v-lazy-show="show">
 59 |     <MyComponent />
 60 |   </div>
 61 | </template>
 62 | ```
 63 | 
 64 | With it, `<MyComponent />` will not be mounted for the first render. Until the first time `show.value = true`, it will be mounted and the DOM will be kept alive. Later if you switch `show.value` back to `false`, `<MyComponent />` will not be unmounted, instead, `display: none` will be applied to the DOM just like `v-show`.
 65 | 
 66 | ## Use Cases
 67 | 
 68 | It can be helpful to use with some component that is expensive to create/mount. For example, if you have a tabs component, that some tab contains a heavy component. Using `v-if`, it will get the component destroyed and re-created when switching tabs. Using `v-show`, you will need to pay the mounting cost on the initial render even you haven't switch to that tab yet.
 69 | 
 70 | With `v-lazy-show`, you can have the best of both worlds. You can think it as a `v-show` that lazy initializes, or a `v-if` that caches the DOM.
 71 | 
 72 | Similarly, this can be helpful for `<details>`, `<dialog>`, `<tabs>`, `<popups>` and other components that you want to keep the DOM alive when toggling.
 73 | 
 74 | ## How does it work?
 75 | 
 76 | Like how `v-if` works, when you use this directive, it hint the compiler to do some transformation to the generated vnodes.
 77 | 
 78 | ```vue
 79 | <template>
 80 |   <div v-lazy-show="foo">
 81 |     Hello
 82 |   </div>
 83 | </template>
 84 | ```
 85 | 
 86 | will be compiled to
 87 | 
 88 | ```ts
 89 | import { createCommentVNode as _createCommentVNode, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, vShow as _vShow, withDirectives as _withDirectives } from 'vue'
 90 | 
 91 | export function render(_ctx, _cache) {
 92 |   return (_cache._lazyshow1 || _ctx.foo)
 93 |     ? (_cache._lazyshow1 = true, (_openBlock(),
 94 |       _withDirectives(_createElementVNode('div', null, ' Hello ', 512 /* NEED_PATCH */), [
 95 |         [_vShow, _ctx.foo]
 96 |       ])))
 97 |     : _createCommentVNode('v-show-if', true)
 98 | }
 99 | ```
100 | 
101 | ## Sponsors
102 | 
103 | <p align="center">
104 |   <a href="https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg">
105 |     <img src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'/>
106 |   </a>
107 | </p>
108 | 
109 | ## License
110 | 
111 | [MIT](./LICENSE) License © 2022 [Anthony Fu](https://github.com/antfu)
112 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
  1 | import type { TemplateChildNode } from '@vue/compiler-core'
  2 | import {
  3 |   CREATE_COMMENT,
  4 |   createCallExpression,
  5 |   createCompoundExpression,
  6 |   createConditionalExpression,
  7 |   createSequenceExpression,
  8 |   createSimpleExpression,
  9 |   createStructuralDirectiveTransform,
 10 |   createVNodeCall,
 11 |   FRAGMENT,
 12 |   traverseNode,
 13 | } from '@vue/compiler-core'
 14 | 
 15 | const indexMap = new WeakMap()
 16 | 
 17 | /**
 18 |  * @see {@link https://github.com/vuejs/core/blob/f5971468e53683d8a54d9cd11f73d0b95c0e0fb7/packages/shared/src/patchFlags.ts#L19 |@vue/compiler-core}
 19 |  */
 20 | const PATCH_FLAGS = {
 21 |   STABLE_FRAGMENT: 64,
 22 | } as const
 23 | 
 24 | const DIRECTIVE_NODES = {
 25 |   SHOW: 'show',
 26 | } as const
 27 | 
 28 | export const transformLazyShow = createStructuralDirectiveTransform(
 29 |   /^(lazy-show|show)$/,
 30 |   (node, dir, context) => {
 31 |     // forward normal `v-show` as-is
 32 |     if (dir.name === DIRECTIVE_NODES.SHOW && !dir.modifiers.some(i => i.content === 'lazy')) {
 33 |       return () => {
 34 |         node.props.push(dir)
 35 |       }
 36 |     }
 37 | 
 38 |     const directiveName = dir.name === DIRECTIVE_NODES.SHOW
 39 |       ? 'v-show.lazy'
 40 |       : 'v-lazy-show'
 41 | 
 42 |     if (node.tag === 'template')
 43 |       throw new Error(`${directiveName} can not be used on <template>`)
 44 | 
 45 |     // FIXME: Not sure why Vue prefixes `_ctx.` twice in the generated code, workaround it here
 46 |     const conditionExp = dir.exp!
 47 | 
 48 |     node.props
 49 |       .forEach((prop) => {
 50 |         if (prop.name === 'on')
 51 |           return
 52 |         if ('exp' in prop && prop.exp && 'content' in prop.exp && prop.exp.loc.source)
 53 |           prop.exp = createSimpleExpression(prop.exp.loc.source)
 54 |       })
 55 | 
 56 |     if (conditionExp.loc.source)
 57 |       dir.exp = createSimpleExpression(conditionExp.loc.source)
 58 | 
 59 |     if (context.ssr || context.inSSR) {
 60 |       /**
 61 |        * rename `v-lazy-show` to `v-if` in SSR, and let Vue handles it
 62 |        *
 63 |        * since user nodeTransforms always runs after built-in,
 64 |        * we need to grab the built-in transform to let it process again.
 65 |        *
 66 |        * we are relying on the order of them, which is an implementation detail.
 67 |        * https://github.com/vuejs/core/blob/f811dc2b60ba7efdbb9b1ab330dcbc18c1cc9a75/packages/compiler-ssr/src/index.ts#L58
 68 |        */
 69 |       const ssrTransformIf = context.nodeTransforms[0]
 70 | 
 71 |       node.props
 72 |         .push({
 73 |           ...dir,
 74 |           modifiers: dir.modifiers.filter(modifier => modifier.content !== 'lazy'),
 75 |           name: 'if',
 76 |         })
 77 | 
 78 |       ssrTransformIf(node, context)
 79 |       return
 80 |     }
 81 | 
 82 |     const { helper } = context
 83 |     const keyIndex = (indexMap.get(context.root) ?? 0) + 1
 84 |     indexMap.set(context.root, keyIndex)
 85 | 
 86 |     const key = `_lazyshow${keyIndex}`
 87 | 
 88 |     const wrapNode = createConditionalExpression(
 89 |       createCompoundExpression([`_cache.${key}`, ' || ', conditionExp]),
 90 |       createSequenceExpression([
 91 |         createCompoundExpression([`_cache.${key} = true`]),
 92 |         createVNodeCall(
 93 |           context,
 94 |           helper(FRAGMENT),
 95 |           undefined,
 96 |           [node],
 97 |           PATCH_FLAGS.STABLE_FRAGMENT,
 98 |           undefined,
 99 |           undefined,
100 |           true,
101 |           false,
102 |           false /* isComponent */,
103 |           node.loc,
104 |         ),
105 |       ]),
106 |       createCallExpression(helper(CREATE_COMMENT), [
107 |         '"v-show-if"',
108 |         'true',
109 |       ]),
110 |     )
111 | 
112 |     // rename `v-lazy-show` to `v-show` and let Vue handles it
113 |     node.props.push({
114 |       ...dir,
115 |       modifiers: dir.modifiers.filter(modifier => modifier.content !== 'lazy'),
116 |       name: DIRECTIVE_NODES.SHOW,
117 |     })
118 | 
119 |     const _context = Object.assign({}, context)
120 |     context.replaceNode(<TemplateChildNode><unknown>wrapNode)
121 | 
122 |     return () => {
123 |       if (!node.codegenNode)
124 |         traverseNode(node, _context)
125 |     }
126 |   },
127 | )
128 | 


--------------------------------------------------------------------------------