Skip to content

Commit 6a5026d

Browse files
gguoyuzealotchen0
gguoyu
authored and
zealotchen0
committed
fix(vue-next): fix vuejs ugrade issue (#4004)
* fix(vue-next): fix vuejs ugrade issue 1. fix vuejs 3.4.32 patchProps API change issue 2. compatible vuejs compiler-core API change issue 3. upgrade vue-next demo package version * fix(vue-next): fix vue-next-ssr-demo issue 1. compatible vue upgrade issue 2. fix vue-next-ssr demo issue
1 parent 4cb7bc1 commit 6a5026d

File tree

18 files changed

+192
-81
lines changed

18 files changed

+192
-81
lines changed

‎driver/js/examples/hippy-vue-next-demo/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@
1919
"@hippy/vue-next": "latest",
2020
"@hippy/vue-router-next-history": "latest",
2121
"@hippy/web-renderer": "latest",
22-
"@vue/runtime-core": "^3.2.46",
23-
"@vue/shared": "^3.2.46",
24-
"vue": "^3.2.46",
22+
"@vue/runtime-core": "^3.4.32",
23+
"@vue/shared": "^3.4.32",
24+
"vue": "^3.4.32",
2525
"vue-router": "^4.0.12"
2626
},
2727
"devDependencies": {
@@ -43,7 +43,7 @@
4343
"@hippy/vue-css-loader": "^2.0.1",
4444
"@vitejs/plugin-vue": "^1.9.4",
4545
"@vue/cli-service": "^4.5.19",
46-
"@vue/compiler-sfc": "^3.2.46",
46+
"@vue/compiler-sfc": "^3.4.32",
4747
"babel-loader": "^8.1.0",
4848
"case-sensitive-paths-webpack-plugin": "^2.2.0",
4949
"clean-webpack-plugin": "^4.0.0",

‎driver/js/examples/hippy-vue-next-ssr-demo/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ ensure you were at `examples/hippy-vue-next-ssr-demo`.
2525

2626
#### Development
2727

28-
1. run `npm run ssr:dev-build` to build client entry & client bundle, then running hippy debug server
28+
1. run `npm run ssr:dev-client` to build client entry & client bundle, then running hippy debug server
2929
2. run `npm run ssr:dev-server` to build server bundle and start SSR web server to listen port **8080**.
3030
3. debug your app with [reference](https://hippyjs.org/en-us/#/guide/debug)
3131
> You can change server listen port 8080 in `server.ts` by your self, but you also need change request port 8080 in

‎driver/js/examples/hippy-vue-next-ssr-demo/package.json‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,13 @@
2424
"@hippy/vue-router-next-history": "latest",
2525
"@hippy/web-renderer": "latest",
2626
"@hippy/vue-next": "latest",
27-
"@hippy/vue-next-server-renderer": "file:../../packages/hippy-vue-next-server-renderer",
28-
"@hippy/vue-next-style-parser": "file:../../packages/hippy-vue-next-style-parser",
29-
"@vue/runtime-core": "^3.2.46",
30-
"@vue/shared": "^3.2.46",
27+
"@hippy/vue-next-server-renderer": "latest",
28+
"@hippy/hippy-vue-next-style-parser": "latest",
29+
"@vue/runtime-core": "^3.4.32",
30+
"@vue/server-renderer": "^3.4.32",
31+
"@vue/shared": "^3.4.32",
3132
"core-js": "^3.20.2",
32-
"vue": "^3.2.46",
33+
"vue": "^3.4.32",
3334
"vue-router": "^4.0.12",
3435
"express": "^4.18.2",
3536
"pinia": "2.0.30"
@@ -52,10 +53,10 @@
5253
"@hippy/rejection-tracking-polyfill": "^1.0.0",
5354
"@hippy/vue-css-loader": "^2.0.1",
5455
"@vitejs/plugin-vue": "^1.9.4",
55-
"@hippy/vue-next-compiler-ssr": "file:../../packages/hippy-vue-next-compiler-ssr",
56+
"@hippy/vue-next-compiler-ssr": "latest",
5657
"@types/shelljs": "^0.8.5",
5758
"@vue/cli-service": "^4.5.19",
58-
"@vue/compiler-sfc": "^3.2.46",
59+
"@vue/compiler-sfc": "^3.4.32",
5960
"babel-loader": "^8.1.0",
6061
"case-sensitive-paths-webpack-plugin": "^2.2.0",
6162
"chokidar": "^3.5.3",

‎driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.dev.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,26 @@ module.exports = {
189189
console.warn('* Using the @hippy/vue-next defined in package.json');
190190
}
191191

192+
// If @hippy/vue-next-style-parser was built exist in packages directory then make an alias
193+
// Remove the section if you don't use it
194+
const hippyVueNextStyleParserPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-style-parser/dist');
195+
if (fs.existsSync(path.resolve(hippyVueNextStyleParserPath, 'index.js'))) {
196+
console.warn(`* Using the @hippy/vue-next-style-parser in ${hippyVueNextStyleParserPath} as @hippy/vue-next-style-parser alias`);
197+
aliases['@hippy/vue-next-style-parser'] = hippyVueNextStyleParserPath;
198+
} else {
199+
console.warn('* Using the @hippy/vue-next-style-parser defined in package.json');
200+
}
201+
202+
// If @hippy/vue-next-server-render was built exist in packages directory then make an alias
203+
// Remove the section if you don't use it
204+
const hippyVueNextSsrPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-server-renderer/dist');
205+
if (fs.existsSync(path.resolve(hippyVueNextSsrPath, 'index.js'))) {
206+
console.warn(`* Using the @hippy/vue-next-server-renderer in ${hippyVueNextSsrPath} as @hippy/vue-next-server-renderer alias`);
207+
aliases['@hippy/vue-next-server-renderer'] = hippyVueNextSsrPath;
208+
} else {
209+
console.warn('* Using the @hippy/vue-next-server-renderer defined in package.json');
210+
}
211+
192212
return aliases;
193213
})(),
194214
},

‎driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.entry.js‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ const path = require('path');
22
const webpack = require('webpack');
33

44
const pkg = require('../../package.json');
5+
const fs = require('fs')
56

67
module.exports = {
78
mode: 'production',
@@ -90,8 +91,32 @@ module.exports = {
9091
},
9192
resolve: {
9293
extensions: ['.js', '.json', '.ts'],
93-
alias: (() => ({
94-
src: path.resolve('./src'),
95-
}))(),
94+
alias: (() => {
95+
const aliases = {
96+
src: path.resolve('./src'),
97+
};
98+
99+
// If @hippy/vue-next-style-parser was built exist in packages directory then make an alias
100+
// Remove the section if you don't use it
101+
const hippyVueNextStyleParserPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-style-parser/dist');
102+
if (fs.existsSync(path.resolve(hippyVueNextStyleParserPath, 'index.js'))) {
103+
console.warn(`* Using the @hippy/vue-next-style-parser in ${hippyVueNextStyleParserPath} as @hippy/vue-next-style-parser alias`);
104+
aliases['@hippy/vue-next-style-parser'] = hippyVueNextStyleParserPath;
105+
} else {
106+
console.warn('* Using the @hippy/vue-next-style-parser defined in package.json');
107+
}
108+
109+
// If @hippy/vue-next-server-render was built exist in packages directory then make an alias
110+
// Remove the section if you don't use it
111+
const hippyVueNextSsrPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-server-renderer/dist');
112+
if (fs.existsSync(path.resolve(hippyVueNextSsrPath, 'index.js'))) {
113+
console.warn(`* Using the @hippy/vue-next-server-renderer in ${hippyVueNextSsrPath} as @hippy/vue-next-server-renderer alias`);
114+
aliases['@hippy/vue-next-server-renderer'] = hippyVueNextSsrPath;
115+
} else {
116+
console.warn('* Using the @hippy/vue-next-server-renderer defined in package.json');
117+
}
118+
119+
return aliases;
120+
})(),
96121
},
97122
};

‎driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.dev.js‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ const fs = require('fs');
33
const webpack = require('webpack');
44

55
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
6-
const compilerSSR = require('@hippy/vue-next-compiler-ssr');
6+
77
const { VueLoaderPlugin } = require('vue-loader');
88
const pkg = require('../../package.json');
99

@@ -24,9 +24,20 @@ if (fs.existsSync(hippyVueNextPath)) {
2424
} else {
2525
console.warn('* Using the @hippy/vue-next defined in package.json');
2626
}
27-
const { isNativeTag } = require(vueNext);
27+
28+
let compilerSsrPkg = '@hippy/vue-next-compiler-ssr'
29+
let compilerSsrPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-compiler-ssr/dist/index.js');
30+
if (fs.existsSync(compilerSsrPath)) {
31+
console.warn(`* Using the @hippy/vue-next-compiler-ssr in ${compilerSsrPath}`);
32+
compilerSsrPkg = compilerSsrPath
33+
} else {
34+
console.warn('* Using the @hippy/vue-next-compiler-ssr defined in package.json');
35+
}
2836

2937

38+
const { isNativeTag } = require(vueNext);
39+
const compilerSsr = require(compilerSsrPkg);
40+
3041
module.exports = {
3142
mode: 'development',
3243
bail: true,
@@ -83,7 +94,7 @@ module.exports = {
8394
comments: false,
8495
},
8596
// real used vue compiler
86-
compiler: compilerSSR,
97+
compiler: compilerSsr,
8798
},
8899
},
89100
],
@@ -177,6 +188,16 @@ module.exports = {
177188
console.warn('* Using the @hippy/vue-next defined in package.json');
178189
}
179190

191+
// If @hippy/vue-next-server-render was built exist in packages directory then make an alias
192+
// Remove the section if you don't use it
193+
const hippyVueNextSsrPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-server-renderer/dist');
194+
if (fs.existsSync(path.resolve(hippyVueNextSsrPath, 'index.js'))) {
195+
console.warn(`* Using the @hippy/vue-next-server-renderer in ${hippyVueNextSsrPath} as @hippy/vue-next-server-renderer alias`);
196+
aliases['@hippy/vue-next-server-renderer'] = hippyVueNextSsrPath;
197+
} else {
198+
console.warn('* Using the @hippy/vue-next-server-renderer defined in package.json');
199+
}
200+
180201
return aliases;
181202
})(),
182203
},

‎driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.entry.js‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ const fs = require('fs');
33
const webpack = require('webpack');
44

55
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
6-
const compilerSSR = require('@hippy/vue-next-compiler-ssr');
76
const { VueLoaderPlugin } = require('vue-loader');
87
const pkg = require('../../package.json');
98

@@ -24,7 +23,18 @@ if (fs.existsSync(hippyVueNextPath)) {
2423
} else {
2524
console.warn('* Using the @hippy/vue-next defined in package.json');
2625
}
26+
27+
let compilerSsrPkg = '@hippy/vue-next-compiler-ssr'
28+
let compilerSsrPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-compiler-ssr/dist/index.js');
29+
if (fs.existsSync(compilerSsrPath)) {
30+
console.warn(`* Using the @hippy/vue-next-compiler-ssr in ${compilerSsrPath}`);
31+
compilerSsrPkg = compilerSsrPath
32+
} else {
33+
console.warn('* Using the @hippy/vue-next-compiler-ssr defined in package.json');
34+
}
35+
2736
const { isNativeTag } = require(vueNext);
37+
const compilerSsr = require(compilerSsrPkg);
2838

2939
module.exports = {
3040
mode: 'production',
@@ -77,7 +87,7 @@ module.exports = {
7787
comments: false,
7888
},
7989
// real used vue compiler
80-
compiler: compilerSSR,
90+
compiler: compilerSsr,
8191
},
8292
},
8393
],
@@ -171,6 +181,16 @@ module.exports = {
171181
console.warn('* Using the @hippy/vue-next defined in package.json');
172182
}
173183

184+
// If @hippy/vue-next-server-render was built exist in packages directory then make an alias
185+
// Remove the section if you don't use it
186+
const hippyVueNextSsrPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-server-renderer/dist');
187+
if (fs.existsSync(path.resolve(hippyVueNextSsrPath, 'index.js'))) {
188+
console.warn(`* Using the @hippy/vue-next-server-renderer in ${hippyVueNextSsrPath} as @hippy/vue-next-server-renderer alias`);
189+
aliases['@hippy/vue-next-server-renderer'] = hippyVueNextSsrPath;
190+
} else {
191+
console.warn('* Using the @hippy/vue-next-server-renderer defined in package.json');
192+
}
193+
174194
return aliases;
175195
})(),
176196
},

‎driver/js/examples/hippy-vue-next-ssr-demo/src/app.vue‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<label
1212
v-if="['/', '/debug', '/remote-debug'].includes(currentRoute.path)"
1313
class="title"
14-
>Hippy Vue Next</label>
14+
>Hippy Vue Next {{ ssrMsg }}</label>
1515
</div>
1616
<label
1717
class="title"
@@ -46,8 +46,11 @@
4646
</div>
4747
</template>
4848
<script lang="ts">
49-
import { defineComponent, ref } from '@vue/runtime-core';
49+
import { defineComponent, ref, onServerPrefetch } from '@vue/runtime-core';
5050
import { useRoute, useRouter } from 'vue-router';
51+
import { storeToRefs } from 'pinia';
52+
import { IS_SSR, IS_SSR_MODE } from './env';
53+
import { useAppStore } from './store';
5154
5255
import backButtonImg from './back-icon.png';
5356
@@ -68,6 +71,9 @@ export default defineComponent({
6871
path: '/remote-debug',
6972
},
7073
]);
74+
const appStore = useAppStore();
75+
const { ssrMsg } = storeToRefs(appStore);
76+
const { getSsrMsg } = appStore;
7177
7278
/**
7379
* go back
@@ -93,12 +99,21 @@ export default defineComponent({
9399
});
94100
};
95101
102+
// get ssr msg in ssr and non ssr client
103+
if (IS_SSR || !IS_SSR_MODE) {
104+
// onServerPrefetch: https://cn.vuejs.org/api/composition-api-lifecycle.html#onserverprefetch
105+
onServerPrefetch(async () => {
106+
await getSsrMsg();
107+
});
108+
}
109+
96110
return {
97111
activatedTab,
98112
backButtonImg,
99113
currentRoute: route,
100114
subTitle,
101115
tabs,
116+
ssrMsg,
102117
goBack,
103118
navigateTo,
104119
};

‎driver/js/examples/hippy-vue-next-ssr-demo/src/main.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { type StyleNode, insertStyleForSsrNodes } from '@hippy/vue-next-style-parser';
1+
import { type StyleNode, insertStyleForSsrNodes } from '@hippy/hippy-vue-next-style-parser';
22
import type { SsrNode } from '@hippy/vue-next-server-renderer';
33
import { renderNativeNodesByCache, renderSsrNodes, deleteNativeNodes, SSR_UNIQUE_ID_KEY } from './ssr-node-ops';
44
import { IS_IOS, isDev } from './env';

‎driver/js/packages/hippy-vue-next-compiler-ssr/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,14 @@
2424
"README.md"
2525
],
2626
"peerDependencies": {
27-
"@vue/compiler-core": "^3.2.46",
28-
"@vue/compiler-dom": "^3.2.46",
29-
"@vue/shared": "^3.2.46"
27+
"@vue/compiler-core": "^3.4.32",
28+
"@vue/compiler-dom": "^3.4.32",
29+
"@vue/shared": "^3.4.32"
3030
},
3131
"devDependencies": {
32-
"@vue/compiler-core": "^3.2.46",
33-
"@vue/compiler-dom": "^3.2.46",
34-
"@vue/shared": "^3.2.46"
32+
"@vue/compiler-core": "^3.4.32",
33+
"@vue/compiler-dom": "^3.4.32",
34+
"@vue/shared": "^3.4.32"
3535
},
3636
"jest": {
3737
"moduleNameMapper": {

0 commit comments

Comments
 (0)