From 3215675e8b917cc12c59e0dc8c7a6bb6b7637880 Mon Sep 17 00:00:00 2001 From: konka <1094918@gmail.com> Date: Fri, 23 Feb 2024 16:29:13 +0800 Subject: [PATCH] fix(weapp): support skyline components #14698 --- .../taro-components/__tests__/span.spec.tsx | 25 ++ .../src/components/span/readme.md | 8 + .../src/components/span/span.tsx | 16 ++ packages/taro-components/types/GridView.d.ts | 17 +- packages/taro-components/types/ListView.d.ts | 9 +- packages/taro-components/types/Snapshot.d.ts | 16 +- packages/taro-components/types/Span.d.ts | 14 + .../taro-components/types/StickyHeader.d.ts | 15 +- .../taro-components/types/StickySection.d.ts | 6 + packages/taro-components/types/Text.d.ts | 16 ++ packages/taro-components/types/index.d.ts | 1 + .../taro-components/types/index.vue3.d.ts | 4 + .../__snapshots__/alipay.spec.ts.snap | 2 +- .../__snapshots__/babel.spec.ts.snap | 54 ++-- .../__snapshots__/bytedance.spec.ts.snap | 2 +- .../__snapshots__/common-style.spec.ts.snap | 54 ++-- .../compiler-macros.spec.ts.snap | 54 ++-- .../__snapshots__/config.spec.ts.snap | 170 ++++++----- .../__snapshots__/css-modules.spec.ts.snap | 108 ++++--- .../__snapshots__/custom-tabbar.spec.ts.snap | 54 ++-- .../__tests__/__snapshots__/jd.spec.ts.snap | 30 +- .../__snapshots__/parse-html.spec.ts.snap | 54 ++-- .../__snapshots__/prerender.spec.ts.snap | 162 +++++++---- .../__tests__/__snapshots__/qq.spec.ts.snap | 108 ++++--- .../__snapshots__/react.spec.ts.snap | 54 ++-- .../__tests__/__snapshots__/sass.spec.ts.snap | 216 ++++++++------ .../__snapshots__/subpackages.spec.ts.snap | 54 ++-- .../__tests__/__snapshots__/swan.spec.ts.snap | 30 +- .../__snapshots__/tabbar.spec.ts.snap | 56 ++-- .../__tests__/__snapshots__/ts.spec.ts.snap | 54 ++-- .../__tests__/__snapshots__/vue.spec.ts.snap | 54 ++-- .../__tests__/__snapshots__/vue3.spec.ts.snap | 54 ++-- .../__snapshots__/wx-hybrid.spec.ts.snap | 54 ++-- packages/taro-weapp/src/components-react.ts | 1 + packages/taro-weapp/src/components.ts | 22 +- .../__snapshots__/babel.spec.ts.snap | 54 ++-- .../compiler-macros.spec.ts.snap | 54 ++-- .../__snapshots__/config.spec.ts.snap | 224 +++++++++------ .../__snapshots__/css-modules.spec.ts.snap | 108 ++++--- .../__snapshots__/framework.spec.ts.snap | 216 ++++++++------ .../__snapshots__/mini-platform.spec.ts.snap | 34 +-- .../__snapshots__/parse-html.spec.ts.snap | 54 ++-- .../__snapshots__/prerender.spec.ts.snap | 162 +++++++---- .../__tests__/__snapshots__/sass.spec.ts.snap | 270 +++++++++++------- .../__snapshots__/subpackages.spec.ts.snap | 54 ++-- .../__snapshots__/tabbar.spec.ts.snap | 110 ++++--- .../__tests__/__snapshots__/ts.spec.ts.snap | 54 ++-- .../__snapshots__/wx-hybrid.spec.ts.snap | 54 ++-- 48 files changed, 1936 insertions(+), 1160 deletions(-) create mode 100644 packages/taro-components/__tests__/span.spec.tsx create mode 100644 packages/taro-components/src/components/span/readme.md create mode 100644 packages/taro-components/src/components/span/span.tsx create mode 100644 packages/taro-components/types/Span.d.ts diff --git a/packages/taro-components/__tests__/span.spec.tsx b/packages/taro-components/__tests__/span.spec.tsx new file mode 100644 index 000000000000..71de0f58d508 --- /dev/null +++ b/packages/taro-components/__tests__/span.spec.tsx @@ -0,0 +1,25 @@ +import { h } from '@stencil/core' +import { newSpecPage, SpecPage } from '@stencil/core/testing' + +import { Span } from '../src/components/span/span' +import { printUnimplementedWarning } from './utils' + +const logError = jest.fn() +console.error = logError + +describe('Span', () => { + let page: SpecPage + + it('unimplemented', async () => { + page = await newSpecPage({ + components: [Span], + template: () => , + }) + await page.waitForChanges() + + expect(page.root).toEqualHtml(` + + `) + expect(logError).toHaveBeenCalledWith(printUnimplementedWarning(page.root)) + }) +}) diff --git a/packages/taro-components/src/components/span/readme.md b/packages/taro-components/src/components/span/readme.md new file mode 100644 index 000000000000..21914714727f --- /dev/null +++ b/packages/taro-components/src/components/span/readme.md @@ -0,0 +1,8 @@ +# taro-span-core + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/taro-components/src/components/span/span.tsx b/packages/taro-components/src/components/span/span.tsx new file mode 100644 index 000000000000..dfab32614e52 --- /dev/null +++ b/packages/taro-components/src/components/span/span.tsx @@ -0,0 +1,16 @@ +import { Component, ComponentInterface, h, Host } from '@stencil/core' + +import { notSupport } from '../../utils' + +@Component({ + tag: 'taro-span-core', +}) +export class Span implements ComponentInterface { + componentDidLoad() { + notSupport('Span', this) + } + + render() { + return + } +} diff --git a/packages/taro-components/types/GridView.d.ts b/packages/taro-components/types/GridView.d.ts index 25aae495f5c7..d815f28f47e5 100644 --- a/packages/taro-components/types/GridView.d.ts +++ b/packages/taro-components/types/GridView.d.ts @@ -5,7 +5,7 @@ interface GridViewProps extends StandardProps { * @supported weapp * @default "aligned" */ - type: string + type: keyof GridViewProps.Type /** 交叉轴元素数量 * @supported weapp * @default 2 @@ -26,6 +26,21 @@ interface GridViewProps extends StandardProps { * @default 0 */ maxCrossAxisExtent?: number + /** + * 长度为 4 的数组,按 top、right、bottom、left 顺序指定内边距 + * @supported weapp + * @default [0, 0, 0, 0] + */ + padding?: [number, number, number, number] +} + +declare namespace GridViewProps { + interface Type { + /** 瀑布流,根据子元素高度自动布局 */ + masonry + /** 每行高度由同一行中最大高度子节点决定 */ + aligned + } } /** * 网格布局容器,仅支持作为 scroll-view 自定义模式下的直接子节点或 sticky-section 组件直接子节点。仅 Skyline 支持。 diff --git a/packages/taro-components/types/ListView.d.ts b/packages/taro-components/types/ListView.d.ts index 3d24eb846b6b..cb1234947e01 100644 --- a/packages/taro-components/types/ListView.d.ts +++ b/packages/taro-components/types/ListView.d.ts @@ -1,6 +1,13 @@ import { ComponentType } from 'react' import { StandardProps } from './common' -interface ListViewProps extends StandardProps {} +interface ListViewProps extends StandardProps { + /** + * 长度为 4 的数组,按 top、right、bottom、left 顺序指定内边距 + * @supported weapp + * @default [0, 0, 0, 0] + */ + padding?: [number, number, number, number] +} /** * 列表布局容器,仅支持作为 scroll-view 自定义模式下的直接子节点或 sticky-section 组件直接子节点。仅 Skyline 支持。 diff --git a/packages/taro-components/types/Snapshot.d.ts b/packages/taro-components/types/Snapshot.d.ts index a0c720c1ab32..5d4c784ff977 100644 --- a/packages/taro-components/types/Snapshot.d.ts +++ b/packages/taro-components/types/Snapshot.d.ts @@ -3,7 +3,21 @@ import { ComponentType } from 'react' import { StandardProps } from './common' interface SnapshotProps extends StandardProps { - id: string + /** + * 渲染模式 + * @supported weapp + * @default 'view' + */ + mode: keyof SnapshotProps.Mode +} + +declare namespace SnapshotProps { + interface Mode { + /** 以真实节点渲染 */ + view + /** 对子节点生成的内容截图渲染 */ + picture + } } /** 截图组件。 diff --git a/packages/taro-components/types/Span.d.ts b/packages/taro-components/types/Span.d.ts new file mode 100644 index 000000000000..0aefbef36ebe --- /dev/null +++ b/packages/taro-components/types/Span.d.ts @@ -0,0 +1,14 @@ +import { ComponentType } from 'react' + +import { StandardProps } from './common' + +interface SpanProps extends StandardProps { } + +/** + * 用于支持内联文本和 image / navigator 的混排 + * @classification skyline + * @supported weapp + * @see https://developers.weixin.qq.com/miniprogram/dev/component/span.html + */ +declare const Span: ComponentType +export { Span, SpanProps } diff --git a/packages/taro-components/types/StickyHeader.d.ts b/packages/taro-components/types/StickyHeader.d.ts index 5250527ed882..87cc3c6f0860 100644 --- a/packages/taro-components/types/StickyHeader.d.ts +++ b/packages/taro-components/types/StickyHeader.d.ts @@ -1,6 +1,19 @@ import { ComponentType } from 'react' import { StandardProps } from './common' -interface StickyHeaderProps extends StandardProps {} +interface StickyHeaderProps extends StandardProps { + /** + * 吸顶时与顶部的距(px) + * @supported weapp + * @default 0 + */ + offsetTop?: number + /** + * 长度为 4 的数组,按 top、right、bottom、left 顺序指定内边距 + * @supported weapp + * @default [0, 0, 0, 0] + */ + padding?: [number, number, number, number] +} /** * 吸顶布局容器,仅支持作为 scroll-view 自定义模式下的直接子节点或 sticky-section 组件直接子节点。仅 Skyline 支持。 diff --git a/packages/taro-components/types/StickySection.d.ts b/packages/taro-components/types/StickySection.d.ts index cbb2e51c50eb..8c1e7e2d6a16 100644 --- a/packages/taro-components/types/StickySection.d.ts +++ b/packages/taro-components/types/StickySection.d.ts @@ -6,6 +6,12 @@ interface StickySectionProps extends StandardProps { * @default true */ pushPinnedHeader?: boolean + /** + * 长度为 4 的数组,按 top、right、bottom、left 顺序指定内边距 + * @supported weapp + * @default [0, 0, 0, 0] + */ + padding?: [number, number, number, number] } /** * 吸顶布局容器,仅支持作为 scroll-view 自定义模式下的直接子节点。仅 Skyline 支持。 diff --git a/packages/taro-components/types/Text.d.ts b/packages/taro-components/types/Text.d.ts index d7b2af34fcbc..eb8fa9b4be12 100644 --- a/packages/taro-components/types/Text.d.ts +++ b/packages/taro-components/types/Text.d.ts @@ -25,6 +25,12 @@ interface TextProps extends StandardProps { * @supported alipay */ numberOfLines?: number + /** + * 文本溢出处理 + * @supported weapp-skyline + * @default 'visible' + */ + overflow?: keyof TextProps.Overflow /** 限制文本最大行数 * @supported weapp */ @@ -40,6 +46,16 @@ declare namespace TextProps { /** 根据字体设置的空格大小 */ nbsp } + interface Overflow { + /** 修剪文本 */ + clip + /** 淡出 */ + fade + /** 显示省略号 */ + ellipsis + /** 文本不截断 */ + visible + } } /** 文本 * @classification base diff --git a/packages/taro-components/types/index.d.ts b/packages/taro-components/types/index.d.ts index 3d96208bf8a1..01aab600605e 100644 --- a/packages/taro-components/types/index.d.ts +++ b/packages/taro-components/types/index.d.ts @@ -45,6 +45,7 @@ export { GridView } from './GridView' export { ListView } from './ListView' export { ShareElement } from './ShareElement' export { Snapshot } from './SnapShot' +export { Span } from './Span' export { StickyHeader } from './StickyHeader' export { StickySection } from './StickySection' diff --git a/packages/taro-components/types/index.vue3.d.ts b/packages/taro-components/types/index.vue3.d.ts index d7cef457187e..5e90eeca0288 100644 --- a/packages/taro-components/types/index.vue3.d.ts +++ b/packages/taro-components/types/index.vue3.d.ts @@ -66,6 +66,7 @@ import { ShareElementProps } from './ShareElement' import { SliderProps } from './Slider' import { SlotProps } from './Slot' import { SnapshotProps } from './SnapShot' +import { SpanProps } from './Span' import { StickyHeaderProps } from './StickyHeader' import { StickySectionProps } from './StickySection' import { SwiperProps } from './Swiper' @@ -144,6 +145,7 @@ export declare const Textarea: VueComponentType export declare const GridView: VueComponentType export declare const ListView: VueComponentType export declare const Snapshot: VueComponentType +export declare const Span: VueComponentType export declare const ShareElement: VueComponentType export declare const StickyHeader: VueComponentType export declare const StickySection: VueComponentType @@ -266,6 +268,8 @@ declare global { 'taro-share-element-core': ElementAttrs> 'snapshot': ElementAttrs> 'taro-snapshot-core': ElementAttrs> + 'span': ElementAttrs> + 'taro-span-core': ElementAttrs> 'sticky-header': ElementAttrs> 'taro-sticky-header-core': ElementAttrs> 'sticky-section': ElementAttrs> diff --git a/packages/taro-mini-runner/src/__tests__/__snapshots__/alipay.spec.ts.snap b/packages/taro-mini-runner/src/__tests__/__snapshots__/alipay.spec.ts.snap index 279c45f90b4c..9ffaa8446bdc 100644 --- a/packages/taro-mini-runner/src/__tests__/__snapshots__/alipay.spec.ts.snap +++ b/packages/taro-mini-runner/src/__tests__/__snapshots__/alipay.spec.ts.snap @@ -974,7 +974,7 @@ require("./taro");