diff --git a/docs/development/android-3.0-upgrade-guidelines.md b/docs/development/android-3.0-upgrade-guidelines.md index e49e5892009..31b7d8ce0d0 100644 --- a/docs/development/android-3.0-upgrade-guidelines.md +++ b/docs/development/android-3.0-upgrade-guidelines.md @@ -45,6 +45,16 @@ @Nullable Object params); ``` +6. 自定义事件controller属性注册方式变更
+ 由于3.0事件名称从2.0的驼峰写法统一转换为全小写命名，会导致之前开发者自定义事件无法接收到属性设置，需要在事件属性注解中将defaultType值改为HippyControllerProps.EVENT: + + ```java + @HippyControllerProps(name = "onMyEvent", defaultType = HippyControllerProps.EVENT, defaultBoolean = false) + public void setMyEvent(HippyScrollView scrollView, boolean isEnable) { + + } + ``` +
# 组件变更 diff --git a/dom/include/dom/dom_manager.h b/dom/include/dom/dom_manager.h index 9f34f51104c..da57955f68e 100644 --- a/dom/include/dom/dom_manager.h +++ b/dom/include/dom/dom_manager.h @@ -41,6 +41,8 @@ #include "footstone/base_timer.h" #include "footstone/worker.h" +#define HIPPY_EXPERIMENT_LAYER_OPTIMIZATION + namespace hippy { inline namespace dom { @@ -140,8 +142,12 @@ class DomManager : public std::enable_shared_from_this { friend class DomNode; uint32_t id_; +#ifdef HIPPY_EXPERIMENT_LAYER_OPTIMIZATION std::shared_ptr optimized_render_manager_; - std::weak_ptr render_manager_; + std::shared_ptr render_manager_; +#else + std::shared_ptr render_manager_; +#endif std::unordered_map> timer_map_; std::shared_ptr task_runner_; std::shared_ptr worker_; diff --git a/dom/include/dom/layer_optimized_render_manager.h b/dom/include/dom/layer_optimized_render_manager.h index 73c76d3d2ba..ce683c0cc47 100644 --- a/dom/include/dom/layer_optimized_render_manager.h +++ b/dom/include/dom/layer_optimized_render_manager.h @@ -28,6 +28,7 @@ inline namespace dom { class LayerOptimizedRenderManager : public RenderManager { public: LayerOptimizedRenderManager(std::shared_ptr render_manager); + inline std::shared_ptr GetInternalNativeRenderManager() { return render_manager_; } void CreateRenderNode(std::weak_ptr root_node, std::vector>&& nodes) override; void UpdateRenderNode(std::weak_ptr root_node, std::vector>&& nodes) override; diff --git a/dom/include/dom/layout_node.h b/dom/include/dom/layout_node.h index 8346c54540c..01a0ec3f684 100644 --- a/dom/include/dom/layout_node.h +++ b/dom/include/dom/layout_node.h @@ -124,6 +124,7 @@ class LayoutNode { const std::vector& style_delete) = 0; }; +void InitLayoutConsts(); std::shared_ptr CreateLayoutNode(); } // namespace dom diff --git a/dom/src/dom/dom_manager.cc b/dom/src/dom/dom_manager.cc index 138b06bfdd2..74d81826d92 100644 --- a/dom/src/dom/dom_manager.cc +++ b/dom/src/dom/dom_manager.cc @@ -18,8 +18,6 @@ * limitations under the License. */ -#define EXPERIMENT_LAYER_OPTIMIZATION - #include "dom/dom_manager.h" #include @@ -54,11 +52,11 @@ using Deserializer = footstone::value::Deserializer; using HippyValueArrayType = footstone::value::HippyValue::HippyValueArrayType; void DomManager::SetRenderManager(const std::weak_ptr& render_manager) { -#ifdef EXPERIMENT_LAYER_OPTIMIZATION +#ifdef HIPPY_EXPERIMENT_LAYER_OPTIMIZATION optimized_render_manager_ = std::make_shared(render_manager.lock()); render_manager_ = optimized_render_manager_; #else - render_manager_ = render_manager; + render_manager_ = render_manager.lock(); #endif } @@ -125,7 +123,7 @@ void DomManager::DeleteDomNodes(const std::weak_ptr& weak_root_node, } void DomManager::EndBatch(const std::weak_ptr& weak_root_node) { - auto render_manager = render_manager_.lock(); + auto render_manager = render_manager_; FOOTSTONE_DCHECK(render_manager); if (!render_manager) { return; @@ -187,7 +185,7 @@ void DomManager::DoLayout(const std::weak_ptr& weak_root_node) { if (!root_node) { return; } - auto render_manager = render_manager_.lock(); + auto render_manager = render_manager_; // check render_manager, measure text dependent render_manager FOOTSTONE_DCHECK(render_manager); if (!render_manager) { diff --git a/dom/src/dom/root_node.cc b/dom/src/dom/root_node.cc index 6e737cd9f01..eb94863ea70 100644 --- a/dom/src/dom/root_node.cc +++ b/dom/src/dom/root_node.cc @@ -101,6 +101,7 @@ bool DomNodeStyleDiffer::Calculate(const std::shared_ptr& } RootNode::RootNode(uint32_t id) : DomNode(id, 0, 0, "", "", nullptr, nullptr, {}) { + InitLayoutConsts(); SetRenderInfo({id, 0, 0}); animation_manager_ = std::make_shared(); interceptors_.push_back(animation_manager_); diff --git a/dom/src/dom/taitank_layout_node.cc b/dom/src/dom/taitank_layout_node.cc index 0a3a9824809..cd9f1766fcd 100644 --- a/dom/src/dom/taitank_layout_node.cc +++ b/dom/src/dom/taitank_layout_node.cc @@ -30,75 +30,82 @@ namespace hippy { inline namespace dom { -const std::map kOverflowMap = {{"visible", OverflowType::OVERFLOW_VISIBLE}, - {"hidden", OverflowType::OVERFLOW_HIDDEN}, - {"scroll", OverflowType::OVERFLOW_SCROLL}}; - -const std::map kFlexDirectionMap = { - {"row", FlexDirection::FLEX_DIRECTION_ROW}, - {"row-reverse", FlexDirection::FLEX_DIRECTION_ROW_REVERSE}, - {"column", FlexDirection::FLEX_DIRECTION_COLUMN}, - {"column-reverse", FlexDirection::FLEX_DIRECTION_COLUNM_REVERSE}}; - -const std::map kWrapModeMap = {{"nowrap", FlexWrapMode::FLEX_NO_WRAP}, - {"wrap", FlexWrapMode::FLEX_WRAP}, - {"wrap-reverse", FlexWrapMode::FLEX_WRAP_REVERSE}}; - -const std::map kJustifyMap = {{"flex-start", FlexAlign::FLEX_ALIGN_START}, - {"center", FlexAlign::FLEX_ALIGN_CENTER}, - {"flex-end", FlexAlign::FLEX_ALIGN_END}, - {"space-between", FlexAlign::FLEX_ALIGN_SPACE_BETWEEN}, - {"space-around", FlexAlign::FLEX_ALIGN_SPACE_AROUND}, - {"space-evenly", FlexAlign::FLEX_ALIGN_SPACE_EVENLY}}; - -const std::map kAlignMap = {{"auto", FlexAlign::FLEX_ALIGN_AUTO}, - {"flex-start", FlexAlign::FLEX_ALIGN_START}, - {"center", FlexAlign::FLEX_ALIGN_CENTER}, - {"flex-end", FlexAlign::FLEX_ALIGN_END}, - {"stretch", FlexAlign::FLEX_ALIGN_STRETCH}, - {"baseline", FlexAlign::FLEX_ALIGN_BASE_LINE}, - {"space-between", FlexAlign::FLEX_ALIGN_SPACE_BETWEEN}, - {"space-around", FlexAlign::FLEX_ALIGN_SPACE_AROUND}}; - -const std::map kMarginMap = {{kMargin, CSSDirection::CSS_ALL}, - {kMarginVertical, CSSDirection::CSS_VERTICAL}, - {kMarginHorizontal, CSSDirection::CSS_HORIZONTAL}, - {kMarginLeft, CSSDirection::CSS_LEFT}, - {kMarginRight, CSSDirection::CSS_RIGHT}, - {kMarginTop, CSSDirection::CSS_TOP}, - {kMarginBottom, CSSDirection::CSS_BOTTOM}}; - -const std::map kPaddingMap = {{kPadding, CSSDirection::CSS_ALL}, - {kPaddingVertical, CSSDirection::CSS_VERTICAL}, - {kPaddingHorizontal, CSSDirection::CSS_HORIZONTAL}, - {kPaddingLeft, CSSDirection::CSS_LEFT}, - {kPaddingRight, CSSDirection::CSS_RIGHT}, - {kPaddingTop, CSSDirection::CSS_TOP}, - {kPaddingBottom, CSSDirection::CSS_BOTTOM}}; - -const std::map kPositionMap = {{kLeft, CSSDirection::CSS_LEFT}, - {kRight, CSSDirection::CSS_RIGHT}, - {kTop, CSSDirection::CSS_TOP}, - {kBottom, CSSDirection::CSS_BOTTOM}}; - -const std::map kBorderMap = {{kBorderWidth, CSSDirection::CSS_ALL}, - {kBorderLeftWidth, CSSDirection::CSS_LEFT}, - {kBorderTopWidth, CSSDirection::CSS_TOP}, - {kBorderRightWidth, CSSDirection::CSS_RIGHT}, - {kBorderBottomWidth, CSSDirection::CSS_BOTTOM}}; - -const std::map kPositionTypeMap = {{"relative", PositionType::POSITION_TYPE_RELATIVE}, - {"absolute", PositionType::POSITION_TYPE_ABSOLUTE}}; - -const std::map kDisplayTypeMap = {{"none", DisplayType::DISPLAY_TYPE_NONE}}; - -const std::map kDirectionMap = { - {"inherit", DIRECTION_INHERIT}, {"ltr", DIRECTION_LTR}, {"rtl", DIRECTION_RTL}}; +class TaitankLayoutConsts { +public: + const std::map kOverflowMap = {{"visible", OverflowType::OVERFLOW_VISIBLE}, + {"hidden", OverflowType::OVERFLOW_HIDDEN}, + {"scroll", OverflowType::OVERFLOW_SCROLL}}; + + const std::map kFlexDirectionMap = { + {"row", FlexDirection::FLEX_DIRECTION_ROW}, + {"row-reverse", FlexDirection::FLEX_DIRECTION_ROW_REVERSE}, + {"column", FlexDirection::FLEX_DIRECTION_COLUMN}, + {"column-reverse", FlexDirection::FLEX_DIRECTION_COLUNM_REVERSE}}; + + const std::map kWrapModeMap = {{"nowrap", FlexWrapMode::FLEX_NO_WRAP}, + {"wrap", FlexWrapMode::FLEX_WRAP}, + {"wrap-reverse", FlexWrapMode::FLEX_WRAP_REVERSE}}; + + const std::map kJustifyMap = {{"flex-start", FlexAlign::FLEX_ALIGN_START}, + {"center", FlexAlign::FLEX_ALIGN_CENTER}, + {"flex-end", FlexAlign::FLEX_ALIGN_END}, + {"space-between", FlexAlign::FLEX_ALIGN_SPACE_BETWEEN}, + {"space-around", FlexAlign::FLEX_ALIGN_SPACE_AROUND}, + {"space-evenly", FlexAlign::FLEX_ALIGN_SPACE_EVENLY}}; + + const std::map kAlignMap = {{"auto", FlexAlign::FLEX_ALIGN_AUTO}, + {"flex-start", FlexAlign::FLEX_ALIGN_START}, + {"center", FlexAlign::FLEX_ALIGN_CENTER}, + {"flex-end", FlexAlign::FLEX_ALIGN_END}, + {"stretch", FlexAlign::FLEX_ALIGN_STRETCH}, + {"baseline", FlexAlign::FLEX_ALIGN_BASE_LINE}, + {"space-between", FlexAlign::FLEX_ALIGN_SPACE_BETWEEN}, + {"space-around", FlexAlign::FLEX_ALIGN_SPACE_AROUND}}; + + const std::map kMarginMap = {{kMargin, CSSDirection::CSS_ALL}, + {kMarginVertical, CSSDirection::CSS_VERTICAL}, + {kMarginHorizontal, CSSDirection::CSS_HORIZONTAL}, + {kMarginLeft, CSSDirection::CSS_LEFT}, + {kMarginRight, CSSDirection::CSS_RIGHT}, + {kMarginTop, CSSDirection::CSS_TOP}, + {kMarginBottom, CSSDirection::CSS_BOTTOM}}; + + const std::map kPaddingMap = {{kPadding, CSSDirection::CSS_ALL}, + {kPaddingVertical, CSSDirection::CSS_VERTICAL}, + {kPaddingHorizontal, CSSDirection::CSS_HORIZONTAL}, + {kPaddingLeft, CSSDirection::CSS_LEFT}, + {kPaddingRight, CSSDirection::CSS_RIGHT}, + {kPaddingTop, CSSDirection::CSS_TOP}, + {kPaddingBottom, CSSDirection::CSS_BOTTOM}}; + + const std::map kPositionMap = {{kLeft, CSSDirection::CSS_LEFT}, + {kRight, CSSDirection::CSS_RIGHT}, + {kTop, CSSDirection::CSS_TOP}, + {kBottom, CSSDirection::CSS_BOTTOM}}; + + const std::map kBorderMap = {{kBorderWidth, CSSDirection::CSS_ALL}, + {kBorderLeftWidth, CSSDirection::CSS_LEFT}, + {kBorderTopWidth, CSSDirection::CSS_TOP}, + {kBorderRightWidth, CSSDirection::CSS_RIGHT}, + {kBorderBottomWidth, CSSDirection::CSS_BOTTOM}}; + + const std::map kPositionTypeMap = {{"relative", PositionType::POSITION_TYPE_RELATIVE}, + {"absolute", PositionType::POSITION_TYPE_ABSOLUTE}}; + + const std::map kDisplayTypeMap = {{"none", DisplayType::DISPLAY_TYPE_NONE}}; + + const std::map kDirectionMap = { + {"inherit", DIRECTION_INHERIT}, {"ltr", DIRECTION_LTR}, {"rtl", DIRECTION_RTL}}; +}; + +static std::shared_ptr global_layout_consts = nullptr; #define TAITANK_GET_STYLE_DECL(NAME, TYPE, DEFAULT) \ static TYPE GetStyle##NAME(const std::string& key) { \ - auto iter = k##NAME##Map.find(key); \ - if (iter != k##NAME##Map.end()) return iter->second; \ + if (global_layout_consts == nullptr) return DEFAULT; \ + auto &map = global_layout_consts->k##NAME##Map; \ + auto iter = map.find(key); \ + if (iter != map.end()) return iter->second; \ return DEFAULT; \ } @@ -814,6 +821,12 @@ void TaitankLayoutNode::Deallocate() { engine_node_ = nullptr; } +void InitLayoutConsts() { + if (global_layout_consts == nullptr) { + global_layout_consts = std::make_shared(); + } +} + std::shared_ptr CreateLayoutNode() { return std::make_shared(); } } // namespace dom diff --git a/dom/src/dom/yoga_layout_node.cc b/dom/src/dom/yoga_layout_node.cc index 303d721c702..7b681694fa5 100644 --- a/dom/src/dom/yoga_layout_node.cc +++ b/dom/src/dom/yoga_layout_node.cc @@ -762,6 +762,7 @@ void YogaLayoutNode::Deallocate() { YGConfigFree(yoga_config_); } +void InitLayoutConsts() {} std::shared_ptr CreateLayoutNode() { return std::make_shared(); } } // namespace dom diff --git a/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web-renderer.dev.js b/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web-renderer.dev.js index f4dfeff0fb0..b2ce0c97690 100644 --- a/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web-renderer.dev.js +++ b/driver/js/examples/hippy-react-demo/scripts/hippy-webpack.web-renderer.dev.js @@ -107,6 +107,16 @@ module.exports = { console.warn('* Using the @hippy/react defined in package.json'); } + // If @hippy/web-renderer was built exist in packages directory then make an alias + // Remove the section if you don't use it + const webRendererPath = path.resolve(__dirname, '../../../packages/hippy-web-renderer/dist'); + if (fs.existsSync(path.resolve(webRendererPath, 'index.js'))) { + console.warn(`* Using the @hippy/web-renderer in ${webRendererPath} as @hippy/web-renderer alias`); + aliases['@hippy/web-renderer'] = webRendererPath; + } else { + console.warn('* Using the @hippy/web-renderer defined in package.json'); + } + return aliases; })(), }, diff --git a/driver/js/examples/hippy-react-demo/src/externals/NestedScroll/index.jsx b/driver/js/examples/hippy-react-demo/src/externals/NestedScroll/index.jsx index 38d0cee0c86..8c0d7a4ad1d 100644 --- a/driver/js/examples/hippy-react-demo/src/externals/NestedScroll/index.jsx +++ b/driver/js/examples/hippy-react-demo/src/externals/NestedScroll/index.jsx @@ -38,6 +38,7 @@ const styles = StyleSheet.create({ flex: 1, textAlign: 'center', color: '#4c9afa', + backgroundColor: '#fff', }, itemEven: { height: 40, diff --git a/driver/js/examples/hippy-react-demo/src/routes.js b/driver/js/examples/hippy-react-demo/src/routes.js index 361d0a8196f..f829521fd03 100644 --- a/driver/js/examples/hippy-react-demo/src/routes.js +++ b/driver/js/examples/hippy-react-demo/src/routes.js @@ -18,7 +18,7 @@ export const Type = { export default [ { path: '/Components', - name: 'Componemts', + name: 'Components', meta: { type: Type.TITLE, mapType: Type.COMPONENT, diff --git a/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.web-renderer.dev.js b/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.web-renderer.dev.js index 959cb07ef1a..cf98ccd7c66 100644 --- a/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.web-renderer.dev.js +++ b/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.web-renderer.dev.js @@ -176,6 +176,16 @@ module.exports = { console.warn('* Using the @hippy/vue-native-components defined in package.json'); } + // If @hippy/web-renderer was built exist in packages directory then make an alias + // Remove the section if you don't use it + const webRendererPath = path.resolve(__dirname, '../../../packages/hippy-web-renderer/dist'); + if (fs.existsSync(path.resolve(webRendererPath, 'index.js'))) { + console.warn(`* Using the @hippy/web-renderer in ${webRendererPath} as @hippy/web-renderer alias`); + aliases['@hippy/web-renderer'] = webRendererPath; + } else { + console.warn('* Using the @hippy/web-renderer defined in package.json'); + } + return aliases; })(), }, diff --git a/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.web-renderer.js b/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.web-renderer.js index 11a21f35f72..bd11090267b 100644 --- a/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.web-renderer.js +++ b/driver/js/examples/hippy-vue-demo/scripts/hippy-webpack.web-renderer.js @@ -169,6 +169,16 @@ module.exports = { console.warn('* Using the @hippy/vue-native-components defined in package.json'); } + // If @hippy/web-renderer was built exist in packages directory then make an alias + // Remove the section if you don't use it + const webRendererPath = path.resolve(__dirname, '../../../packages/hippy-web-renderer/dist'); + if (fs.existsSync(path.resolve(webRendererPath, 'index.js'))) { + console.warn(`* Using the @hippy/web-renderer in ${webRendererPath} as @hippy/web-renderer alias`); + aliases['@hippy/web-renderer'] = webRendererPath; + } else { + console.warn('* Using the @hippy/web-renderer defined in package.json'); + } + return aliases; })(), }, diff --git a/driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-swiper.vue b/driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-swiper.vue index 06136f17940..eceea472667 100644 --- a/driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-swiper.vue +++ b/driver/js/examples/hippy-vue-demo/src/components/native-demos/demo-swiper.vue @@ -102,6 +102,7 @@ export default { onDropped(evt) { // 更细当前页码 this.currentSlideNum = evt.currentSlide; + this.currentSlide = evt.currentSlide; }, onStateChanged(evt) { // 更新当前滚屏状态 diff --git a/driver/js/examples/hippy-vue-next-demo/package.json b/driver/js/examples/hippy-vue-next-demo/package.json index 1b311547f29..6e7830f9795 100644 --- a/driver/js/examples/hippy-vue-next-demo/package.json +++ b/driver/js/examples/hippy-vue-next-demo/package.json @@ -19,9 +19,9 @@ "@hippy/vue-next": "v3.3-latest", "@hippy/vue-router-next-history": "0.0.1", "@hippy/web-renderer": "latest", - "@vue/runtime-core": "^3.2.46", - "@vue/shared": "^3.2.46", - "vue": "^3.2.46", + "@vue/runtime-core": "3.4.32", + "@vue/shared": "3.4.32", + "vue": "3.4.32", "vue-router": "^4.0.12" }, "devDependencies": { @@ -43,7 +43,7 @@ "@hippy/vue-css-loader": "v3.3-latest", "@vitejs/plugin-vue": "^1.9.4", "@vue/cli-service": "^4.5.19", - "@vue/compiler-sfc": "^3.2.46", + "@vue/compiler-sfc": "3.4.32", "babel-loader": "^8.1.0", "case-sensitive-paths-webpack-plugin": "^2.2.0", "clean-webpack-plugin": "^4.0.0", diff --git a/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.web-renderer.dev.js b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.web-renderer.dev.js index 7fc0ec81035..84c2fdfd6a5 100644 --- a/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.web-renderer.dev.js +++ b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.web-renderer.dev.js @@ -159,6 +159,16 @@ module.exports = { console.warn('* Using the @hippy/vue-next defined in package.json'); } + // If @hippy/web-renderer was built exist in packages directory then make an alias + // Remove the section if you don't use it + const webRendererPath = path.resolve(__dirname, '../../../packages/hippy-web-renderer/dist'); + if (fs.existsSync(path.resolve(webRendererPath, 'index.js'))) { + console.warn(`* Using the @hippy/web-renderer in ${webRendererPath} as @hippy/web-renderer alias`); + aliases['@hippy/web-renderer'] = webRendererPath; + } else { + console.warn('* Using the @hippy/web-renderer defined in package.json'); + } + return aliases; })(), }, diff --git a/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.web-renderer.js b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.web-renderer.js index 1caed7f57c1..eec1d4a15e0 100644 --- a/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.web-renderer.js +++ b/driver/js/examples/hippy-vue-next-demo/scripts/hippy-webpack.web-renderer.js @@ -162,6 +162,16 @@ module.exports = { console.warn('* Using the @hippy/vue-next defined in package.json'); } + // If @hippy/web-renderer was built exist in packages directory then make an alias + // Remove the section if you don't use it + const webRendererPath = path.resolve(__dirname, '../../../packages/hippy-web-renderer/dist'); + if (fs.existsSync(path.resolve(webRendererPath, 'index.js'))) { + console.warn(`* Using the @hippy/web-renderer in ${webRendererPath} as @hippy/web-renderer alias`); + aliases['@hippy/web-renderer'] = webRendererPath; + } else { + console.warn('* Using the @hippy/web-renderer defined in package.json'); + } + return aliases; })(), }, diff --git a/driver/js/examples/hippy-vue-next-demo/src/components/native-demo/demo-swiper.vue b/driver/js/examples/hippy-vue-next-demo/src/components/native-demo/demo-swiper.vue index 7e59f62b589..7c48af81562 100644 --- a/driver/js/examples/hippy-vue-next-demo/src/components/native-demo/demo-swiper.vue +++ b/driver/js/examples/hippy-vue-next-demo/src/components/native-demo/demo-swiper.vue @@ -79,7 +79,7 @@ export default defineComponent({ */ const scrollToNextPage = () => { console.log('scroll next', currentSlide.value, currentSlideNum.value); - if (currentSlide.value < max) { + if (currentSlide.value < max - 1) { currentSlide.value = currentSlideNum.value + 1; } else { currentSlide.value = 0; @@ -120,6 +120,7 @@ export default defineComponent({ console.log('onDropped', evt); // update current page number currentSlideNum.value = evt.currentSlide; + currentSlide.value = evt.currentSlide; }; const onStateChanged = (evt) => { console.log('onStateChanged', evt); diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/README.md b/driver/js/examples/hippy-vue-next-ssr-demo/README.md index 77dccfdfd48..6429d65e1ff 100644 --- a/driver/js/examples/hippy-vue-next-ssr-demo/README.md +++ b/driver/js/examples/hippy-vue-next-ssr-demo/README.md @@ -25,7 +25,7 @@ ensure you were at `examples/hippy-vue-next-ssr-demo`. #### Development -1. run `npm run ssr:dev-build` to build client entry & client bundle, then running hippy debug server +1. run `npm run ssr:dev-client` to build client entry & client bundle, then running hippy debug server 2. run `npm run ssr:dev-server` to build server bundle and start SSR web server to listen port **8080**. 3. debug your app with [reference](https://hippyjs.org/en-us/#/guide/debug) > You can change server listen port 8080 in `server.ts` by your self, but you also need change request port 8080 in diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/package.json b/driver/js/examples/hippy-vue-next-ssr-demo/package.json index 367d4bffe81..4552452e407 100644 --- a/driver/js/examples/hippy-vue-next-ssr-demo/package.json +++ b/driver/js/examples/hippy-vue-next-ssr-demo/package.json @@ -24,12 +24,13 @@ "@hippy/vue-router-next-history": "latest", "@hippy/web-renderer": "latest", "@hippy/vue-next": "latest", - "@hippy/vue-next-server-renderer": "file:../../packages/hippy-vue-next-server-renderer", - "@hippy/vue-next-style-parser": "file:../../packages/hippy-vue-next-style-parser", - "@vue/runtime-core": "^3.2.46", - "@vue/shared": "^3.2.46", + "@hippy/vue-next-server-renderer": "latest", + "@hippy/hippy-vue-next-style-parser": "latest", + "@vue/runtime-core": "3.4.32", + "@vue/server-renderer": "3.4.32", + "@vue/shared": "3.4.32", "core-js": "^3.20.2", - "vue": "^3.2.46", + "vue": "3.4.32", "vue-router": "^4.0.12", "express": "^4.18.2", "pinia": "2.0.30" @@ -52,10 +53,10 @@ "@hippy/rejection-tracking-polyfill": "^1.0.0", "@hippy/vue-css-loader": "^2.0.1", "@vitejs/plugin-vue": "^1.9.4", - "@hippy/vue-next-compiler-ssr": "file:../../packages/hippy-vue-next-compiler-ssr", + "@hippy/vue-next-compiler-ssr": "latest", "@types/shelljs": "^0.8.5", "@vue/cli-service": "^4.5.19", - "@vue/compiler-sfc": "^3.2.46", + "@vue/compiler-sfc": "3.4.32", "babel-loader": "^8.1.0", "case-sensitive-paths-webpack-plugin": "^2.2.0", "chokidar": "^3.5.3", diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.dev.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.dev.js index f465c4ff488..cab3754f326 100644 --- a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.dev.js +++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.dev.js @@ -189,6 +189,26 @@ module.exports = { console.warn('* Using the @hippy/vue-next defined in package.json'); } + // If @hippy/vue-next-style-parser was built exist in packages directory then make an alias + // Remove the section if you don't use it + const hippyVueNextStyleParserPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-style-parser/dist'); + if (fs.existsSync(path.resolve(hippyVueNextStyleParserPath, 'index.js'))) { + console.warn(`* Using the @hippy/vue-next-style-parser in ${hippyVueNextStyleParserPath} as @hippy/vue-next-style-parser alias`); + aliases['@hippy/vue-next-style-parser'] = hippyVueNextStyleParserPath; + } else { + console.warn('* Using the @hippy/vue-next-style-parser defined in package.json'); + } + + // If @hippy/vue-next-server-render was built exist in packages directory then make an alias + // Remove the section if you don't use it + const hippyVueNextSsrPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-server-renderer/dist'); + if (fs.existsSync(path.resolve(hippyVueNextSsrPath, 'index.js'))) { + console.warn(`* Using the @hippy/vue-next-server-renderer in ${hippyVueNextSsrPath} as @hippy/vue-next-server-renderer alias`); + aliases['@hippy/vue-next-server-renderer'] = hippyVueNextSsrPath; + } else { + console.warn('* Using the @hippy/vue-next-server-renderer defined in package.json'); + } + return aliases; })(), }, diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.entry.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.entry.js index f710f743a1b..660cc908186 100644 --- a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.entry.js +++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/client.entry.js @@ -2,6 +2,7 @@ const path = require('path'); const webpack = require('webpack'); const pkg = require('../../package.json'); +const fs = require('fs') module.exports = { mode: 'production', @@ -90,8 +91,32 @@ module.exports = { }, resolve: { extensions: ['.js', '.json', '.ts'], - alias: (() => ({ - src: path.resolve('./src'), - }))(), + alias: (() => { + const aliases = { + src: path.resolve('./src'), + }; + + // If @hippy/vue-next-style-parser was built exist in packages directory then make an alias + // Remove the section if you don't use it + const hippyVueNextStyleParserPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-style-parser/dist'); + if (fs.existsSync(path.resolve(hippyVueNextStyleParserPath, 'index.js'))) { + console.warn(`* Using the @hippy/vue-next-style-parser in ${hippyVueNextStyleParserPath} as @hippy/vue-next-style-parser alias`); + aliases['@hippy/vue-next-style-parser'] = hippyVueNextStyleParserPath; + } else { + console.warn('* Using the @hippy/vue-next-style-parser defined in package.json'); + } + + // If @hippy/vue-next-server-render was built exist in packages directory then make an alias + // Remove the section if you don't use it + const hippyVueNextSsrPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-server-renderer/dist'); + if (fs.existsSync(path.resolve(hippyVueNextSsrPath, 'index.js'))) { + console.warn(`* Using the @hippy/vue-next-server-renderer in ${hippyVueNextSsrPath} as @hippy/vue-next-server-renderer alias`); + aliases['@hippy/vue-next-server-renderer'] = hippyVueNextSsrPath; + } else { + console.warn('* Using the @hippy/vue-next-server-renderer defined in package.json'); + } + + return aliases; + })(), }, }; diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.dev.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.dev.js index e82008654ed..770a4d7b9f7 100644 --- a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.dev.js +++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.dev.js @@ -3,7 +3,7 @@ const fs = require('fs'); const webpack = require('webpack'); const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); -const compilerSSR = require('@hippy/vue-next-compiler-ssr'); + const { VueLoaderPlugin } = require('vue-loader'); const pkg = require('../../package.json'); @@ -24,9 +24,20 @@ if (fs.existsSync(hippyVueNextPath)) { } else { console.warn('* Using the @hippy/vue-next defined in package.json'); } -const { isNativeTag } = require(vueNext); + +let compilerSsrPkg = '@hippy/vue-next-compiler-ssr' +let compilerSsrPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-compiler-ssr/dist/index.js'); +if (fs.existsSync(compilerSsrPath)) { + console.warn(`* Using the @hippy/vue-next-compiler-ssr in ${compilerSsrPath}`); + compilerSsrPkg = compilerSsrPath +} else { + console.warn('* Using the @hippy/vue-next-compiler-ssr defined in package.json'); +} +const { isNativeTag } = require(vueNext); +const compilerSsr = require(compilerSsrPkg); + module.exports = { mode: 'development', bail: true, @@ -83,7 +94,7 @@ module.exports = { comments: false, }, // real used vue compiler - compiler: compilerSSR, + compiler: compilerSsr, }, }, ], @@ -177,6 +188,16 @@ module.exports = { console.warn('* Using the @hippy/vue-next defined in package.json'); } + // If @hippy/vue-next-server-render was built exist in packages directory then make an alias + // Remove the section if you don't use it + const hippyVueNextSsrPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-server-renderer/dist'); + if (fs.existsSync(path.resolve(hippyVueNextSsrPath, 'index.js'))) { + console.warn(`* Using the @hippy/vue-next-server-renderer in ${hippyVueNextSsrPath} as @hippy/vue-next-server-renderer alias`); + aliases['@hippy/vue-next-server-renderer'] = hippyVueNextSsrPath; + } else { + console.warn('* Using the @hippy/vue-next-server-renderer defined in package.json'); + } + return aliases; })(), }, diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.entry.js b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.entry.js index 3ecee4aea93..b67c138c5ce 100644 --- a/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.entry.js +++ b/driver/js/examples/hippy-vue-next-ssr-demo/scripts/webpack-ssr-config/server.entry.js @@ -3,7 +3,6 @@ const fs = require('fs'); const webpack = require('webpack'); const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); -const compilerSSR = require('@hippy/vue-next-compiler-ssr'); const { VueLoaderPlugin } = require('vue-loader'); const pkg = require('../../package.json'); @@ -24,7 +23,18 @@ if (fs.existsSync(hippyVueNextPath)) { } else { console.warn('* Using the @hippy/vue-next defined in package.json'); } + +let compilerSsrPkg = '@hippy/vue-next-compiler-ssr' +let compilerSsrPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-compiler-ssr/dist/index.js'); +if (fs.existsSync(compilerSsrPath)) { + console.warn(`* Using the @hippy/vue-next-compiler-ssr in ${compilerSsrPath}`); + compilerSsrPkg = compilerSsrPath +} else { + console.warn('* Using the @hippy/vue-next-compiler-ssr defined in package.json'); +} + const { isNativeTag } = require(vueNext); +const compilerSsr = require(compilerSsrPkg); module.exports = { mode: 'production', @@ -77,7 +87,7 @@ module.exports = { comments: false, }, // real used vue compiler - compiler: compilerSSR, + compiler: compilerSsr, }, }, ], @@ -171,6 +181,16 @@ module.exports = { console.warn('* Using the @hippy/vue-next defined in package.json'); } + // If @hippy/vue-next-server-render was built exist in packages directory then make an alias + // Remove the section if you don't use it + const hippyVueNextSsrPath = path.resolve(__dirname, '../../../../packages/hippy-vue-next-server-renderer/dist'); + if (fs.existsSync(path.resolve(hippyVueNextSsrPath, 'index.js'))) { + console.warn(`* Using the @hippy/vue-next-server-renderer in ${hippyVueNextSsrPath} as @hippy/vue-next-server-renderer alias`); + aliases['@hippy/vue-next-server-renderer'] = hippyVueNextSsrPath; + } else { + console.warn('* Using the @hippy/vue-next-server-renderer defined in package.json'); + } + return aliases; })(), }, diff --git a/driver/js/examples/hippy-vue-next-ssr-demo/src/app.vue b/driver/js/examples/hippy-vue-next-ssr-demo/src/app.vue index bb96e1b1097..65058aea3ef 100644 --- a/driver/js/examples/hippy-vue-next-ssr-demo/src/app.vue +++ b/driver/js/examples/hippy-vue-next-ssr-demo/src/app.vue @@ -11,7 +11,7 @@ + >Hippy Vue Next {{ ssrMsg }}