Skip to content

Commit 3350dc2

Browse files
windsonRwindsonR
committed
add vite@8's bundledDev support
for now, it is just a experimental feature.
1 parent fa9b46a commit 3350dc2

7 files changed

Lines changed: 420 additions & 261 deletions

File tree

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"build": "tsup && npm publish && git clean -f",
1616
"test:build": "vite build",
1717
"test:dev": "vite",
18+
"test:bundleDev": "vite --config vite.config.bundle.ts",
1819
"test": "vitest"
1920
},
2021
"files": [
@@ -39,7 +40,7 @@
3940
"@types/debug": "^4.1.12",
4041
"@types/ejs": "^3.1.5",
4142
"@types/node": "^22.12.0",
42-
"@vitejs/plugin-vue": "^5.2.1",
43+
"@vitejs/plugin-vue": "^6.0.6",
4344
"@vue/compiler-sfc": "^3.5.13",
4445
"playwright-chromium": "^1.50.0",
4546
"tsup": "^8.3.6",
@@ -55,6 +56,6 @@
5556
"ejs": "^3.1.10",
5657
"fast-glob": "^3.3.3",
5758
"magic-string": "^0.30.11",
58-
"vite": "npm:rolldown-vite@7.1.13"
59+
"vite": "^8.0.13"
5960
}
6061
}

‎pnpm-lock.yaml‎

Lines changed: 280 additions & 246 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/html/Build.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import type { HtmlPluginOptions } from './types'
2-
import { VirtualHtmlPage, VirtualPageOptions } from './types'
1+
import type { HtmlPluginOptions } from './types.js'
2+
import { VirtualHtmlPage, VirtualPageOptions } from './types.js'
33
import type { BuildEnvironmentOptions, UserConfig } from 'vite';
44
import { normalizePath } from 'vite'
5-
import { Base } from './Base'
5+
import { Base } from './Base.js'
66
import fs, { promises as fsp } from 'fs'
77
import path from 'path'
8-
interface Meta {
8+
export interface Meta {
99
rolldownVersion?:string;
1010
}
1111
export class Build extends Base {

‎src/html/Bundle.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import type { UserConfig } from 'vite';
2+
import { Build, type Meta } from './Build.js';
3+
import type { HtmlPluginOptions } from './types.js';
4+
5+
export class Bundle extends Build {
6+
constructor(virtualHtmlOptions: HtmlPluginOptions, meta: Meta) {
7+
super(virtualHtmlOptions, meta);
8+
}
9+
async bindInput(config: UserConfig) {
10+
await super._buildConfig(config);
11+
// config.build = {
12+
// ...config.build??{},
13+
// rolldownOptions:{
14+
// ...config.build?.rolldownOptions??{},
15+
// }
16+
// }
17+
}
18+
}

‎src/html/VirtualHtmlPlugin.ts‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import type { HtmlPluginOptions } from "./types";
1+
import { Bundle } from './Bundle.js';
2+
import type { HtmlPluginOptions } from "./types.js";
23
import type { ConfigEnv, Plugin, UserConfig } from "vite";
3-
import type { HistoryApiOptions } from "../history-api/types";
4-
import { Serve } from "./Serve";
5-
import { Build } from "./Build";
4+
import type { HistoryApiOptions } from "../history-api/types.js";
5+
import { Serve } from "./Serve.js";
6+
import { Build } from "./Build.js";
67

78
export const VirtualHtmlPlugin = (
89
virtualHtmlOptions: HtmlPluginOptions & HistoryApiOptions
@@ -18,6 +19,12 @@ export const VirtualHtmlPlugin = (
1819
if (_htmlOptions.useCustom??true) {
1920
config.appType = "custom";
2021
}
22+
if (config.experimental?.bundledDev) {
23+
config.appType = undefined
24+
_instance = new Bundle(_htmlOptions,this.meta)
25+
await _instance.bindInput.call(_instance,config)
26+
return
27+
}
2128
_instance = new Serve(_htmlOptions);
2229
} else if (command === "build") {
2330
_instance = new Build(_htmlOptions,this.meta);

‎tsconfig.json‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"compilerOptions": {
33
"target": "ES2020",
44
"module": "ES2020",
5-
"moduleResolution": "node",
5+
"moduleResolution": "node16",
66
"strict": true,
77
"jsx": "preserve",
88
"sourceMap": true,
@@ -19,9 +19,8 @@
1919
"skipLibCheck": true
2020
},
2121
"include": [
22-
"src/**/*.ts"
23-
],
24-
"exclude": [
25-
"vite.config.ts"
22+
"src/**/*.ts",
23+
"vite.config.ts",
24+
"vite.config.bundle.ts"
2625
]
2726
}

‎vite.config.bundle.ts‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import {defineConfig} from 'vite'
2+
import VirtualHtml from './src/index.js'
3+
import Vue from '@vitejs/plugin-vue'
4+
import Inspect from 'vite-plugin-inspect'
5+
// @ts-ignore
6+
import {POS} from './src/index.js';
7+
8+
export default defineConfig({
9+
resolve: {
10+
alias: {
11+
'vue': 'vue/dist/vue.esm-bundler.js'
12+
}
13+
},
14+
plugins: [
15+
Inspect(),
16+
Vue(),
17+
VirtualHtml({
18+
pages: {
19+
// demo1 is the html name you access in browser
20+
demo1: {
21+
template: '/demo/demo1/demo1.html',
22+
data: {
23+
users: ['a','b','c']
24+
}
25+
},
26+
'demo1/index': '/demo/demoIndex1.html',
27+
'demo2/': '/demo/demoIndex2.html',
28+
demo2: '/demo/demo2/demo2.html',
29+
demo3: {
30+
template: '/demo/demo3.html'
31+
},
32+
demo4: {
33+
template: '/demo/template.html',
34+
data: {
35+
script: '<script type="module" src="/demo/demo1/demo1.ts"></script>'
36+
}
37+
},
38+
'demo1/demo2/demo5': { // multi-level directories, the last (demo5) will be the html name
39+
template: '/demo/template.html',
40+
data: {
41+
script: '<script type="module" src="/demo/demo1/demo1.ts"></script>'
42+
}
43+
},
44+
demo6: {
45+
entry: '/demo/demo1/demo1.ts',
46+
},
47+
demo7: {
48+
entry: '/demo/demo1/demo1.ts',
49+
title: 'demo7',
50+
body: '<div id="app"></div>'
51+
},
52+
},
53+
data: {
54+
users: ['a', 'b', 'c'],
55+
script: '<script type="module" src="/demo/demo1/demo1.ts"></script>'
56+
},
57+
indexPage: 'demo1',
58+
// global render, from 0.3.0 it (this demo code) will auto configure in plugin, and you MUST install 'ejs' in your project to use it.
59+
// render(template,data){
60+
// return ejs.render(template, data, {delimiter: '%', root: process.cwd()})
61+
// },
62+
// pages: true, // when pages set to true, plugin will use extraGlobPattern to glob html file
63+
// extraGlobPattern: [
64+
// '**/*.html',
65+
// '!node_modules/**/*.html',
66+
// '!.**/*.html',
67+
// '!dist/**/*.html'
68+
// ],
69+
injectCode: {
70+
'demo1.html': {
71+
pos: POS.after,
72+
find: '<head>',
73+
replacement: '<script>window.dd = "dd";</script>'
74+
},
75+
'*': {
76+
pos: POS.after,
77+
find: '<head>',
78+
replacement: '<script>window.dd = "bbb";</script>'
79+
},
80+
},
81+
// rewrites: [
82+
// {
83+
// from: /.*/g,
84+
// to: ''
85+
// }
86+
// ]
87+
}),
88+
],
89+
optimizeDeps: {
90+
force: true
91+
},
92+
// build:{
93+
// rolldownOptions:{
94+
// input: ['./demo3.html']
95+
// }
96+
// },
97+
experimental:{
98+
bundledDev: true,
99+
}
100+
})

0 commit comments

Comments
 (0)