Skip to content

U
uni-app

genary / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 1
Fork 0
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 ad78aea8 编写于 作者: fxy060608's avatar fxy060608
浏览文件
操作

feat: add tsx

上级 137f4572
显示空白变更内容
内联 并排
Showing with 1957 addition and 173 deletion
packages/global.d.ts
浏览文件 @ ad78aea8
......@@ -26,6 +26,7 @@ declare var __UNI_FEATURE_LEFTWINDOW__: boolean
declare var __UNI_FEATURE_RIGHTWINDOW__: boolean
declare var __UNI_FEATURE_RESPONSIVE__: boolean
declare var __UNI_FEATURE_PULL_DOWN_REFRESH__: boolean
declare var __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__: boolean
// TODO
declare var __uniRoutes: any
declare var __uniConfig: UniApp.UniConfig
......
packages/shims-uni-app.d.ts
浏览文件 @ ad78aea8
declare namespace UniApp {
type PLATFORM =
| 'h5'
| 'app-plus'
| 'mp-alipay'
| 'mp-baidu'
| 'mp-qq'
| 'mp-toutiao'
| 'mp-weixin'
| 'quickapp-webview'
type PLATFORM = keyof PagesJsonPagePlatformStyle
interface LayoutWindowOptions {
matchMedia?: {
minWidth?: number
......@@ -28,16 +20,38 @@ declare namespace UniApp {
rightWindow?: LayoutWindowOptions
}
interface PageNavigationBarButton {
type?:
| 'none'
| 'forward'
| 'back'
| 'share'
| 'favorite'
| 'home'
| 'menu'
| 'close'
color?: string
background?: string
colorPressed?: string
float?: 'right' | 'left'
fontWeight?: string
fontSize?: string
fontSrc?: string
select?: boolean
text?: string
width?: string
}
interface PageNavigationBar {
type: 'default' | 'transparent' | 'float' | 'none'
titleText: string
textStyle: 'black' | 'white'
timingFunc: string
duration: string
backgroundColor: string
titlePenetrate: 'YES' | 'NO'
shadowColorType: 'grey' | 'blue' | 'green' | 'orange' | 'red' | 'yellow'
backButton: boolean
type?: 'default' | 'transparent' | 'float' | 'none'
titleText?: string
textStyle?: 'black' | 'white'
timingFunc?: string
duration?: string
backgroundColor?: string
titlePenetrate?: 'YES' | 'NO'
shadowColorType?: 'grey' | 'blue' | 'green' | 'orange' | 'red' | 'yellow'
backButton?: boolean
buttons?: PageNavigationBarButton[]
}
interface PageRefreshOptions {
support: boolean
......@@ -47,7 +61,24 @@ declare namespace UniApp {
range: number
offset: number
}
interface PageRouteMeta {
interface PagesJsonPagePlatformStyle {
h5?: PagesJsonPageStyle
'app-plus'?: PagesJsonPageStyle
'mp-alipay'?: PagesJsonPageStyle
'mp-baidu'?: PagesJsonPageStyle
'mp-qq'?: PagesJsonPageStyle
'mp-toutiao'?: PagesJsonPageStyle
'mp-weixin'?: PagesJsonPageStyle
'quickapp-webview'?: PagesJsonPageStyle
}
interface PagesJsonPageStyle extends PagesJsonPagePlatformStyle {
enablePullDownRefresh?: boolean
navigationBar: PageNavigationBar
refreshOptions?: PageRefreshOptions
}
interface PageRouteMeta extends PagesJsonPageStyle {
id: number
isQuit?: boolean
isEntry?: boolean
......@@ -57,18 +88,11 @@ declare namespace UniApp {
topWindow?: boolean
leftWindow?: boolean
rightWindow?: boolean
enablePullDownRefresh?: boolean
navigationBar: PageNavigationBar
refreshOptions?: PageRefreshOptions
}
interface PagesJsonPageStyle {
enablePullDownRefresh?: boolean
}
interface PagesJsonPageOptions {
path: string
style?: PagesJsonPageStyle
style: PagesJsonPageStyle
}
interface PagesJsonSubpackagesOptions {
root: string
......
packages/uni-h5/dist/uni-h5.esm.js
浏览文件 @ ad78aea8
import {isFunction, extend, isPlainObject, hasOwn as hasOwn$1, hyphenate, isArray, isObject as isObject$1, capitalize, toRawType, makeMap as makeMap$1, isPromise} from "@vue/shared";
import {injectHook, defineComponent, inject, provide, reactive, nextTick, computed, openBlock, createBlock, Fragment, withDirectives, createVNode, vShow, createCommentVNode, withCtx, KeepAlive, resolveDynamicComponent, resolveComponent, mergeProps, onMounted, ref, toDisplayString, toHandlers, renderSlot, withModifiers, vModelDynamic, renderList, vModelText, createTextVNode} from "vue";
import {injectHook, defineComponent, inject, provide, reactive, nextTick, computed, withDirectives, createVNode, vShow, withCtx, openBlock, createBlock, KeepAlive, resolveDynamicComponent, resolveComponent, onMounted, ref, mergeProps, toDisplayString, toHandlers, renderSlot, createCommentVNode, withModifiers, vModelDynamic, Fragment, renderList, vModelText, createTextVNode} from "vue";
import {NAVBAR_HEIGHT, COMPONENT_NAME_PREFIX, isCustomElement, plusReady, debounce} from "@dcloudio/uni-shared";
import {createRouter, createWebHistory, createWebHashHistory, useRoute, RouterView} from "vue-router";
function applyOptions(options, instance2, publicThis) {
......@@ -871,55 +871,48 @@ function useKeepAliveRoute() {
}
var Layout = defineComponent({
name: "Layout",
props: {
onChange: Function
},
emits: ["change"],
setup() {
const route = __UNI_FEATURE_TABBAR__ ? useRoute() : null;
const keepAliveRoute = __UNI_FEATURE_PAGES__ ? useKeepAliveRoute() : null;
__UNI_FEATURE_TOPWINDOW__ ? useTopWindow() : null;
__UNI_FEATURE_LEFTWINDOW__ ? useLeftWindow() : null;
__UNI_FEATURE_RIGHTWINDOW__ ? useRightWindow() : null;
const route = __UNI_FEATURE_TABBAR__ && useRoute();
const keepAliveRoute = __UNI_FEATURE_PAGES__ && useKeepAliveRoute();
__UNI_FEATURE_TOPWINDOW__ && useTopWindow();
__UNI_FEATURE_LEFTWINDOW__ && useLeftWindow();
__UNI_FEATURE_RIGHTWINDOW__ && useRightWindow();
return () => {
return openBlock(), createBlock(Fragment, null, [
createLayoutVNode(keepAliveRoute),
createTabBarVNode(route)
], 64);
const layoutTsx = createLayoutTsx(keepAliveRoute);
const tabBarTsx = __UNI_FEATURE_TABBAR__ && createTabBarTsx(route);
return [layoutTsx, tabBarTsx].filter(Boolean);
};
}
});
function createLayoutVNode(keepAliveRoute, topWindow, leftWindow, rightWindow) {
function createLayoutTsx(keepAliveRoute, topWindow, leftWindow, rightWindow) {
const routerVNode = __UNI_FEATURE_PAGES__ ? createRouterViewVNode(keepAliveRoute) : createPageVNode();
if (!__UNI_FEATURE_RESPONSIVE__) {
return routerVNode;
}
const topWindowVNode = __UNI_FEATURE_TOPWINDOW__ ? createTopWindowVNode() : createCommentVNode("", true);
const leftWindowVNode = __UNI_FEATURE_LEFTWINDOW__ ? createLeftWindowVNode() : createCommentVNode("", true);
const rightWindowVNode = __UNI_FEATURE_RIGHTWINDOW__ ? createRightWindowVNode() : createCommentVNode("", true);
return createVNode("uni-layout", null, [
topWindowVNode,
createVNode("uni-content", null, [
createVNode("uni-main", null, [routerVNode]),
leftWindowVNode,
rightWindowVNode
])
]);
const topWindowTsx = __UNI_FEATURE_TOPWINDOW__ ? createTopWindowTsx() : null;
const leftWindowTsx = __UNI_FEATURE_LEFTWINDOW__ ? createLeftWindowTsx() : null;
const rightWindowTsx = __UNI_FEATURE_RIGHTWINDOW__ ? createRightWindowTsx() : null;
return createVNode("uni-layout", null, [topWindowTsx, createVNode("uni-content", null, [createVNode("uni-main", null, [routerVNode]), leftWindowTsx, rightWindowTsx])]);
}
function createTabBarVNode(route) {
return __UNI_FEATURE_TABBAR__ ? withDirectives(createVNode(TabBar, null, null, 512), [
[vShow, route.meta.isTabBar]
]) : createCommentVNode("", true);
function createTabBarTsx(route) {
return withDirectives(createVNode(TabBar, null, null, 512), [[vShow, route.meta.isTabBar]]);
}
function createPageVNode() {
return createVNode(__uniRoutes[1].component);
}
function createRouterViewVNode(keepAliveRoute) {
return createVNode(RouterView, null, {
default: withCtx(({Component}) => [
(openBlock(), createBlock(KeepAlive, {cache: keepAliveRoute.routeCache}, [
(openBlock(), createBlock(resolveDynamicComponent(Component), {
default: withCtx(({
Component
}) => [(openBlock(), createBlock(KeepAlive, {
cache: keepAliveRoute.routeCache
}, [(openBlock(), createBlock(resolveDynamicComponent(Component), {
key: keepAliveRoute.routeKey.value
}))
], 1032, ["cache"]))
]),
}))], 1032, ["cache"]))]),
_: 1
});
}
......@@ -948,53 +941,27 @@ function useRightWindow() {
height: 0
};
}
function createTopWindowVNode(topWindow) {
if (!__UNI_FEATURE_TOPWINDOW__) {
return createCommentVNode("", true);
}
const {component, style, height, show} = useTopWindow();
return withDirectives(createVNode("uni-top-window", null, [
createVNode("div", {
ref: "topWindow",
class: "uni-top-window",
style
}, [
createVNode(component, mergeProps({
onVnodeMounted(vnode) {
},
"navigation-bar-title-text": ""
}), null, 16, ["navigation-bar-title-text"])
], 4),
createVNode("div", {
class: "uni-top-window--placeholder",
style: {height}
}, null, 4)
], 512), [[vShow, show]]);
function createTopWindowTsx(topWindow) {
}
function createLeftWindowVNode(leftWindow) {
function createLeftWindowTsx(leftWindow) {
}
function createRightWindowVNode(leftWindow) {
function createRightWindowTsx(leftWindow) {
}
const CSS_VARS = [
"--status-bar-height",
"--top-window-height",
"--window-left",
"--window-right",
"--window-margin"
];
const CSS_VARS = ["--status-bar-height", "--top-window-height", "--window-left", "--window-right", "--window-margin"];
var AppComponent = defineComponent({
name: "App",
setup() {
useCssVar();
useAppLifecycle();
const {clazz, onChange: onChange2} = useAppClass();
return () => (openBlock(), createBlock("uni-app", {
const {
clazz,
onChange: onChange2
} = useAppClass();
return () => createVNode("uni-app", {
class: clazz.value
}, [
createVNode(Layout, {
}, [createVNode(Layout, {
onChange: onChange2
}, null, 8, ["onChange"])
], 2));
}, null, 8, ["onChange"])], 2);
}
});
function useCssVar() {
......@@ -8074,17 +8041,16 @@ var PageHead = defineComponent({
clazz,
style
} = usePageHead(navigationBar);
const backButtonJsx = createBackButtonJsx(navigationBar);
const backButtonJsx = __UNI_FEATURE_PAGES__ ? createBackButtonJsx(navigationBar) : null;
const leftButtonsJsx = __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__ ? createButtonsJsx("left", navigationBar) : [];
return () => createVNode("uni-page-head", {
"uni-page-head-type": navigationBar.type
}, {
default: () => [createVNode("div", {
}, [createVNode("div", {
class: clazz.value,
style: style.value
}, [createVNode("div", {
class: "uni-page-head-hd"
}, [backButtonJsx])], 6)]
}, 8, ["uni-page-head-type"]);
}, [backButtonJsx, ...leftButtonsJsx])], 6)], 8, ["uni-page-head-type"]);
}
});
function createBackButtonJsx(navigationBar) {
......@@ -8092,11 +8058,19 @@ function createBackButtonJsx(navigationBar) {
return createVNode("div", {
class: "uni-page-head-btn"
}, [createVNode("i", {
style: "{color:color,fontSize:'27px'}",
style: "fontSize:27px",
class: "uni-btn-icon"
}, [createTextVNode("\uE601")])]);
}
}
function createButtonsJsx(float, navigationBar) {
if (isArray(navigationBar.buttons)) {
return navigationBar.buttons.filter((btn) => btn.float === float).map((btn, index2) => createVNode("div", {
key: index2
}, [createVNode("i", null, null)]));
}
return [];
}
function usePageHead(navigationBar) {
const clazz = computed(() => {
const {
......
packages/uni-h5/lib/babel-plugin-jsx/README.md 0 → 100644
浏览文件 @ ad78aea8
# Babel Plugin JSX for Vue 3.0
[![CircleCI](https://circleci.com/gh/vuejs/jsx-next.svg?style=svg)](https://circleci.com/gh/vuejs/vue-next) [![npm package](https://img.shields.io/npm/v/@vue/babel-plugin-jsx.svg?style=flat-square)](https://www.npmjs.com/package/@vue/babel-plugin-jsx)
To add Vue JSX support.
English | [简体中文](/packages/babel-plugin-jsx/README-zh_CN.md)
## Installation
Install the plugin with:
```bash
npm install @vue/babel-plugin-jsx -D
```
Then add the plugin to .babelrc:
```js
{
"plugins": ["@vue/babel-plugin-jsx"]
}
```
## Usage
### options
#### transformOn
Type: `boolean`
Default: `false`
transform `on: { click: xx }` to `onClick: xxx`
#### optimize
Type: `boolean`
Default: `false`
enable optimization or not. It's not recommended to enable it If you are not familiar with Vue 3.
#### isCustomElement
Type: `(tag: string) => boolean`
Default: `undefined`
configuring custom elements
#### mergeProps
Type: `boolean`
Default: `true`
merge static and dynamic class / style attributes / onXXX handlers
#### enableObjectSlots
Type: `boolean`
Default: `true`
Whether to enable `object slots` (mentioned below the document) syntax". It might be useful in JSX, but it will add a lot of `_isSlot` condition expressions which increase your bundle size. And `v-slots` is still available even if `enableObjectSlots` is turned off.
## Syntax
### Content
functional component
```jsx
const App = () => <div>Vue 3.0</div>;
```
with render
```jsx
const App = {
render() {
return <div>Vue 3.0</div>;
},
};
```
```jsx
import { withModifiers, defineComponent } from "vue";
const App = defineComponent({
setup() {
const count = ref(0);
const inc = () => {
count.value++;
};
return () => (
<div onClick={withModifiers(inc, ["self"])}>{count.value}</div>
);
},
});
```
Fragment
```jsx
const App = () => (
<>
<span>I'm</span>
<span>Fragment</span>
</>
);
```
### Attributes / Props
```jsx
const App = () => <input type="email" />;
```
with a dynamic binding:
```jsx
const placeholderText = "email";
const App = () => <input type="email" placeholder={placeholderText} />;
```
### Directives
v-show
```jsx
const App = {
data() {
return { visible: true };
},
render() {
return <input v-show={this.visible} />;
},
};
```
v-model
> Note: You should pass the second param as string for using `arg`.
```jsx
<input v-model={val} />
```
```jsx
<input v-model={[val, ["modifier"]]} />
```
```jsx
<A v-model={[val, "argument", ["modifier"]]} />
```
Will compile to:
```js
h(A, {
argument: val,
argumentModifiers: {
modifier: true,
},
"onUpdate:argument": ($event) => (val = $event),
});
```
v-models
> Note: You should pass a Two-dimensional Arrays to v-models.
```jsx
<A v-models={[[foo], [bar, "bar"]]} />
```
```jsx
<A
v-models={[
[foo, "foo"],
[bar, "bar"],
]}
/>
```
```jsx
<A
v-models={[
[foo, ["modifier"]],
[bar, "bar", ["modifier"]],
]}
/>
```
Will compile to:
```js
h(A, {
modelValue: foo,
modelModifiers: {
modifier: true,
},
"onUpdate:modelValue": ($event) => (foo = $event),
bar: bar,
barModifiers: {
modifier: true,
},
"onUpdate:bar": ($event) => (bar = $event),
});
```
custom directive
```jsx
const App = {
directives: { custom: customDirective },
setup() {
return () => <a v-custom={[val, "arg", ["a", "b"]]} />;
},
};
```
### Slot
> Note: In `jsx`, _`v-slot`_ should be replace with **`v-slots`**
```jsx
const App = {
setup() {
const slots = {
foo: () => <span>B</span>,
};
return () => (
<A v-slots={slots}>
<div>A</div>
</A>
);
},
};
// or
const App = {
setup() {
const slots = {
default: () => <div>A</div>,
foo: () => <span>B</span>,
};
return () => <A v-slots={slots} />;
},
};
// or you can use object slots when `enableObjectSlots` is not false.
const App = {
setup() {
return () => (
<>
<A>
{{
default: () => <div>A</div>,
foo: () => <span>B</span>,
}}
</A>
<B>{() => "foo"}</B>
</>
);
},
};
```
### In TypeScript
`tsconfig.json`:
```json
{
"compilerOptions": {
"jsx": "preserve"
}
}
```
## Who is using
<table>
<tbody>
<tr>
<td align="center">
<a target="_blank" href="https://www.antdv.com/">
<img
width="32"
src="https://qn.antdv.com/logo.png"
/>
<br>
<strong>Ant Design Vue</strong>
</a>
</td>
<td align="center">
<a target="_blank" href="https://youzan.github.io/vant/#/zh-CN/">
<img
width="32"
style="vertical-align: -0.32em; margin-right: 8px;"
src="https://img.yzcdn.cn/vant/logo.png"
/>
<br>
<strong>Vant</strong>
</a>
</td>
<td align="center">
<a target="_blank" href="https://github.com/element-plus/element-plus">
<img
height="32"
style="vertical-align: -0.32em; margin-right: 8px;"
src="https://user-images.githubusercontent.com/10731096/91267529-259f3680-e7a6-11ea-9a60-3286f750de01.png"
/>
<br>
<strong>Element Plus</strong>
</a>
</td>
</tr>
</tbody>
</table>
## Compatibility
This repo is only compatible with:
- **Babel 7+**
- **Vue 3+**
packages/uni-h5/lib/babel-plugin-jsx/dist/buildProps.d.ts 0 → 100644
浏览文件 @ ad78aea8
import * as t from '@babel/types';
import { NodePath } from '@babel/traverse';
import { State } from '.';
export declare type Slots = t.Identifier | t.ObjectExpression | null;
declare const buildProps: (path: NodePath<t.JSXElement>, state: State) => {
tag: t.CallExpression | t.Identifier | t.StringLiteral | t.MemberExpression;
props: t.Expression;
isComponent: boolean;
slots: null;
directives: t.ArrayExpression[];
patchFlag: number;
dynamicPropNames: Set<string>;
};
export default buildProps;
packages/uni-h5/lib/babel-plugin-jsx/dist/buildProps.js 0 → 100644
浏览文件 @ ad78aea8
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const t = __importStar(require("@babel/types"));
const helper_module_imports_1 = require("@babel/helper-module-imports");
const utils_1 = require("./utils");
const parseDirectives_1 = __importDefault(require("./parseDirectives"));
const transform_vue_jsx_1 = require("./transform-vue-jsx");
const xlinkRE = /^xlink([A-Z])/;
const onRE = /^on[^a-z]/;
const isOn = (key) => onRE.test(key);
const getJSXAttributeValue = (path, state) => {
const valuePath = path.get('value');
if (valuePath.isJSXElement()) {
return transform_vue_jsx_1.transformJSXElement(valuePath, state);
}
if (valuePath.isStringLiteral()) {
return valuePath.node;
}
if (valuePath.isJSXExpressionContainer()) {
return utils_1.transformJSXExpressionContainer(valuePath);
}
return null;
};
const transformJSXSpreadAttribute = (nodePath, path, mergeProps, args) => {
const argument = path.get('argument');
const { properties } = argument.node;
if (!properties) {
if (argument.isIdentifier()) {
utils_1.walksScope(nodePath, argument.name, 2 /* DYNAMIC */);
}
args.push(mergeProps ? argument.node : t.spreadElement(argument.node));
}
else if (mergeProps) {
args.push(t.objectExpression(properties));
}
else {
args.push(...properties);
}
};
const mergeAsArray = (existing, incoming) => {
if (t.isArrayExpression(existing.value)) {
existing.value.elements.push(incoming.value);
}
else {
existing.value = t.arrayExpression([
existing.value,
incoming.value,
]);
}
};
const dedupeProperties = (properties = [], mergeProps) => {
if (!mergeProps) {
return properties;
}
const knownProps = new Map();
const deduped = [];
properties.forEach((prop) => {
const { value: name } = prop.key;
const existing = knownProps.get(name);
if (existing) {
if (name === 'style' || name === 'class' || name.startsWith('on')) {
mergeAsArray(existing, prop);
}
}
else {
knownProps.set(name, prop);
deduped.push(prop);
}
});
return deduped;
};
/**
* Check if an attribute value is constant
* @param node
* @returns boolean
*/
const isConstant = (node) => {
if (t.isIdentifier(node)) {
return node.name === 'undefined';
}
if (t.isArrayExpression(node)) {
const { elements } = node;
return elements.every((element) => element && isConstant(element));
}
if (t.isObjectExpression(node)) {
return node.properties.every((property) => isConstant(property.value));
}
if (t.isLiteral(node)) {
return true;
}
return false;
};
const buildProps = (path, state) => {
const tag = utils_1.getTag(path, state);
const isComponent = utils_1.checkIsComponent(path.get('openingElement'), state);
const props = path.get('openingElement').get('attributes');
const directives = [];
const dynamicPropNames = new Set();
let slots = null;
let patchFlag = 0;
if (props.length === 0) {
return {
tag,
isComponent,
slots,
props: t.nullLiteral(),
directives,
patchFlag,
dynamicPropNames,
};
}
let properties = [];
// patchFlag analysis
let hasRef = false;
let hasClassBinding = false;
let hasStyleBinding = false;
let hasHydrationEventBinding = false;
let hasDynamicKeys = false;
const mergeArgs = [];
const { mergeProps = true } = state.opts;
props
.forEach((prop) => {
if (prop.isJSXAttribute()) {
let name = utils_1.getJSXAttributeName(prop);
const attributeValue = getJSXAttributeValue(prop, state);
if (!isConstant(attributeValue) || name === 'ref') {
if (!isComponent
&& isOn(name)
// omit the flag for click handlers becaues hydration gives click
// dedicated fast path.
&& name.toLowerCase() !== 'onclick'
// omit v-model handlers
&& name !== 'onUpdate:modelValue') {
hasHydrationEventBinding = true;
}
if (name === 'ref') {
hasRef = true;
}
else if (name === 'class' && !isComponent) {
hasClassBinding = true;
}
else if (name === 'style' && !isComponent) {
hasStyleBinding = true;
}
else if (name !== 'key'
&& !utils_1.isDirective(name)
&& name !== 'on') {
dynamicPropNames.add(name);
}
}
if (state.opts.transformOn && (name === 'on' || name === 'nativeOn')) {
if (!state.get('transformOn')) {
state.set('transformOn', helper_module_imports_1.addDefault(path, '@vue/babel-helper-vue-transform-on', { nameHint: '_transformOn' }));
}
mergeArgs.push(t.callExpression(state.get('transformOn'), [attributeValue || t.booleanLiteral(true)]));
return;
}
if (utils_1.isDirective(name)) {
const { directive, modifiers, values, args, directiveName, } = parseDirectives_1.default({
tag,
isComponent,
name,
path: prop,
state,
value: attributeValue,
});
if (directiveName === 'slots') {
slots = attributeValue;
return;
}
if (directive) {
directives.push(t.arrayExpression(directive));
}
else if (directiveName === 'html') {
properties.push(t.objectProperty(t.stringLiteral('innerHTML'), values[0]));
dynamicPropNames.add('innerHTML');
}
else if (directiveName === 'text') {
properties.push(t.objectProperty(t.stringLiteral('textContent'), values[0]));
dynamicPropNames.add('textContent');
}
if (['models', 'model'].includes(directiveName)) {
values.forEach((value, index) => {
var _a, _b;
const argVal = (_a = args[index]) === null || _a === void 0 ? void 0 : _a.value;
const propName = argVal || 'modelValue';
// must be v-model or v-models and is a component
if (!directive) {
properties.push(t.objectProperty(t.stringLiteral(propName), value));
dynamicPropNames.add(propName);
if ((_b = modifiers[index]) === null || _b === void 0 ? void 0 : _b.size) {
properties.push(t.objectProperty(t.stringLiteral(`${argVal || 'model'}Modifiers`), t.objectExpression([...modifiers[index]].map((modifier) => t.objectProperty(t.stringLiteral(modifier), t.booleanLiteral(true))))));
}
}
properties.push(t.objectProperty(t.stringLiteral(`onUpdate:${propName}`), t.arrowFunctionExpression([t.identifier('$event')], t.assignmentExpression('=', value, t.identifier('$event')))));
dynamicPropNames.add(`onUpdate:${propName}`);
});
}
}
else {
if (name.match(xlinkRE)) {
name = name.replace(xlinkRE, (_, firstCharacter) => `xlink:${firstCharacter.toLowerCase()}`);
}
properties.push(t.objectProperty(t.stringLiteral(name), attributeValue || t.booleanLiteral(true)));
}
}
else {
if (properties.length && mergeProps) {
mergeArgs.push(t.objectExpression(dedupeProperties(properties, mergeProps)));
properties = [];
}
// JSXSpreadAttribute
hasDynamicKeys = true;
transformJSXSpreadAttribute(path, prop, mergeProps, mergeProps ? mergeArgs : properties);
}
});
// patchFlag analysis
if (hasDynamicKeys) {
patchFlag |= 16 /* FULL_PROPS */;
}
else {
if (hasClassBinding) {
patchFlag |= 2 /* CLASS */;
}
if (hasStyleBinding) {
patchFlag |= 4 /* STYLE */;
}
if (dynamicPropNames.size) {
patchFlag |= 8 /* PROPS */;
}
if (hasHydrationEventBinding) {
patchFlag |= 32 /* HYDRATE_EVENTS */;
}
}
if ((patchFlag === 0 || patchFlag === 32 /* HYDRATE_EVENTS */)
&& (hasRef || directives.length > 0)) {
patchFlag |= 512 /* NEED_PATCH */;
}
let propsExpression = t.nullLiteral();
if (mergeArgs.length) {
if (properties.length) {
mergeArgs.push(t.objectExpression(dedupeProperties(properties, mergeProps)));
}
if (mergeArgs.length > 1) {
propsExpression = t.callExpression(utils_1.createIdentifier(state, 'mergeProps'), mergeArgs);
}
else {
// single no need for a mergeProps call
propsExpression = mergeArgs[0];
}
}
else if (properties.length) {
// single no need for spread
if (properties.length === 1 && t.isSpreadElement(properties[0])) {
propsExpression = properties[0].argument;
}
else {
propsExpression = t.objectExpression(dedupeProperties(properties, mergeProps));
}
}
return {
tag,
props: propsExpression,
isComponent,
slots,
directives,
patchFlag,
dynamicPropNames,
};
};
exports.default = buildProps;
packages/uni-h5/lib/babel-plugin-jsx/dist/helpers.js 0 → 100644
浏览文件 @ ad78aea8
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const template_1 = __importDefault(require("@babel/template"));
const helpers = Object.create(null);
const helper = (tpl) => ({
ast: () => template_1.default.program.ast(tpl),
});
helpers.isSlot = helper `
import { isVNode } from 'vue';
export default function _isSlot(s) {
return typeof s === 'function' || (Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s));
}
`;
exports.default = helpers;
packages/uni-h5/lib/babel-plugin-jsx/dist/index.d.ts 0 → 100644
浏览文件 @ ad78aea8
import * as t from '@babel/types';
import * as BabelCore from '@babel/core';
import { NodePath } from '@babel/traverse';
export declare type State = {
get: (name: string) => any;
set: (name: string, value: any) => any;
opts: VueJSXPluginOptions;
};
export interface VueJSXPluginOptions {
/** transform `on: { click: xx }` to `onClick: xxx` */
transformOn?: boolean;
/** enable optimization or not. */
optimize?: boolean;
/** merge static and dynamic class / style attributes / onXXX handlers */
mergeProps?: boolean;
/** configuring custom elements */
isCustomElement?: (tag: string) => boolean;
/** enable object slots syntax */
enableObjectSlots?: boolean;
}
export declare type ExcludesBoolean = <T>(x: T | false | true) => x is T;
declare const _default: ({ types }: typeof BabelCore) => {
name: string;
inherits: any;
visitor: {
Program: {
enter(path: NodePath<t.Program>, state: State): void;
exit(path: NodePath<t.Program>): void;
};
JSXFragment: {
enter(path: BabelCore.NodePath<t.JSXElement>, state: State): void;
};
JSXElement: {
exit(path: BabelCore.NodePath<t.JSXElement>, state: State): void;
};
};
};
export default _default;
packages/uni-h5/lib/babel-plugin-jsx/dist/index.js 0 → 100644
浏览文件 @ ad78aea8
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const t = __importStar(require("@babel/types"));
const template_1 = __importDefault(require("@babel/template"));
const plugin_syntax_jsx_1 = __importDefault(require("@babel/plugin-syntax-jsx"));
const helper_module_imports_1 = require("@babel/helper-module-imports");
const transform_vue_jsx_1 = __importDefault(require("./transform-vue-jsx"));
const sugar_fragment_1 = __importDefault(require("./sugar-fragment"));
const hasJSX = (parentPath) => {
let fileHasJSX = false;
parentPath.traverse({
JSXElement(path) {
fileHasJSX = true;
path.stop();
},
JSXFragment(path) {
fileHasJSX = true;
path.stop();
},
});
return fileHasJSX;
};
exports.default = ({ types }) => ({
name: 'babel-plugin-jsx',
inherits: plugin_syntax_jsx_1.default,
visitor: Object.assign(Object.assign(Object.assign({}, transform_vue_jsx_1.default), sugar_fragment_1.default), { Program: {
enter(path, state) {
if (hasJSX(path)) {
const importNames = [
'createVNode',
'Fragment',
'resolveComponent',
'withDirectives',
'vShow',
'vModelSelect',
'vModelText',
'vModelCheckbox',
'vModelRadio',
'vModelText',
'vModelDynamic',
'resolveDirective',
'mergeProps',
'createTextVNode',
'isVNode',
];
if (helper_module_imports_1.isModule(path)) {
// import { createVNode } from "vue";
const importMap = {};
importNames.forEach((name) => {
state.set(name, () => {
if (importMap[name]) {
return types.cloneNode(importMap[name]);
}
const identifier = helper_module_imports_1.addNamed(path, name, 'vue', {
ensureLiveReference: true,
});
importMap[name] = identifier;
return identifier;
});
});
const { enableObjectSlots = true } = state.opts;
if (enableObjectSlots) {
state.set('@vue/babel-plugin-jsx/runtimeIsSlot', () => {
if (importMap.runtimeIsSlot) {
return importMap.runtimeIsSlot;
}
const { name: isVNodeName } = state.get('isVNode')();
const isSlot = path.scope.generateUidIdentifier('isSlot');
const ast = template_1.default.ast `
function ${isSlot.name}(s) {
return typeof s === 'function' || (Object.prototype.toString.call(s) === '[object Object]' && !${isVNodeName}(s));
}
`;
const lastImport = path.get('body').filter((p) => p.isImportDeclaration()).pop();
if (lastImport) {
lastImport.insertAfter(ast);
}
importMap.runtimeIsSlot = isSlot;
return isSlot;
});
}
}
else {
// var _vue = require('vue');
let sourceName = '';
importNames.forEach((name) => {
state.set(name, () => {
if (!sourceName) {
sourceName = helper_module_imports_1.addNamespace(path, 'vue', {
ensureLiveReference: true,
}).name;
}
return t.memberExpression(t.identifier(sourceName), t.identifier(name));
});
});
}
}
},
exit(path) {
const body = path.get('body');
const specifiersMap = new Map();
body.filter((nodePath) => t.isImportDeclaration(nodePath.node)
&& nodePath.node.source.value === 'vue')
.forEach((nodePath) => {
const { specifiers } = nodePath.node;
let shouldRemove = false;
specifiers.forEach((specifier) => {
if (!specifier.loc && t.isImportSpecifier(specifier) && t.isIdentifier(specifier.imported)) {
specifiersMap.set(specifier.imported.name, specifier);
shouldRemove = true;
}
});
if (shouldRemove) {
nodePath.remove();
}
});
const specifiers = [...specifiersMap.keys()].map((imported) => specifiersMap.get(imported));
if (specifiers.length) {
path.unshiftContainer('body', t.importDeclaration(specifiers, t.stringLiteral('vue')));
}
},
} }),
});
packages/uni-h5/lib/babel-plugin-jsx/dist/parseDirectives.d.ts 0 → 100644
浏览文件 @ ad78aea8
import * as t from '@babel/types';
import { NodePath } from '@babel/traverse';
import { State } from '.';
export declare type Tag = t.Identifier | t.MemberExpression | t.StringLiteral | t.CallExpression;
declare const parseDirectives: (params: {
name: string;
path: NodePath<t.JSXAttribute>;
value: t.StringLiteral | t.Expression | null;
state: State;
tag: Tag;
isComponent: boolean;
}) => {
directiveName: string;
modifiers: Set<string>[];
values: (t.ArrayExpression | t.ArrowFunctionExpression | t.AssignmentExpression | t.AwaitExpression | t.BigIntLiteral | t.BinaryExpression | t.LogicalExpression | t.BindExpression | t.FunctionExpression | t.BooleanLiteral | t.CallExpression | t.ClassExpression | t.ConditionalExpression | t.DecimalLiteral | t.DoExpression | t.Identifier | t.StringLiteral | t.NumericLiteral | t.NullLiteral | t.RegExpLiteral | t.MemberExpression | t.NewExpression | t.ObjectExpression | t.SequenceExpression | t.ParenthesizedExpression | t.ThisExpression | t.UnaryExpression | t.UpdateExpression | t.MetaProperty | t.Super | t.TaggedTemplateExpression | t.TemplateLiteral | t.YieldExpression | t.Import | t.OptionalMemberExpression | t.OptionalCallExpression | t.TypeCastExpression | t.JSXElement | t.JSXFragment | t.PipelinePrimaryTopicReference | t.RecordExpression | t.TupleExpression | t.TSAsExpression | t.TSTypeAssertion | t.TSNonNullExpression | null)[];
args: (t.StringLiteral | t.NullLiteral)[];
directive: t.Expression[] | undefined;
};
export default parseDirectives;
packages/uni-h5/lib/babel-plugin-jsx/dist/parseDirectives.js 0 → 100644
浏览文件 @ ad78aea8
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const t = __importStar(require("@babel/types"));
const utils_1 = require("./utils");
/**
* Get JSX element type
*
* @param path Path<JSXOpeningElement>
*/
const getType = (path) => {
const typePath = path
.get('attributes')
.find((attribute) => {
if (!t.isJSXAttribute(attribute)) {
return false;
}
return t.isJSXIdentifier(attribute.get('name'))
&& attribute.get('name').node.name === 'type';
});
return typePath ? typePath.get('value').node : null;
};
const parseModifiers = (value) => (t.isArrayExpression(value)
? value.elements
.map((el) => (t.isStringLiteral(el) ? el.value : ''))
.filter(Boolean)
: []);
const parseDirectives = (params) => {
var _a, _b, _c;
const { name, path, value, state, tag, isComponent, } = params;
const args = [];
const vals = [];
const modifiersSet = [];
const underscoreModifiers = name.split('_');
const directiveName = ((_a = underscoreModifiers.shift()) === null || _a === void 0 ? void 0 : _a.replace(/^v/, '').replace(/^-/, '').replace(/^\S/, (s) => s.toLowerCase())) || '';
const isVModels = directiveName === 'models';
const isVModel = directiveName === 'model';
if (isVModel && !t.isJSXExpressionContainer(path.get('value'))) {
throw new Error('You have to use JSX Expression inside your v-model');
}
if (isVModels && !isComponent) {
throw new Error('v-models can only use in custom components');
}
const shouldResolve = !['html', 'text', 'model', 'models'].includes(directiveName)
|| (isVModel && !isComponent);
if (['models', 'model'].includes(directiveName)) {
if (t.isArrayExpression(value)) {
const elementsList = isVModels ? value.elements : [value];
elementsList.forEach((element) => {
if (isVModels && !t.isArrayExpression(element)) {
throw new Error('You should pass a Two-dimensional Arrays to v-models');
}
const { elements } = element;
const [first, second, third] = elements;
let modifiers = underscoreModifiers;
if (t.isStringLiteral(second)) {
args.push(second);
modifiers = parseModifiers(third);
}
else if (t.isArrayExpression(second)) {
args.push(t.nullLiteral());
modifiers = parseModifiers(second);
}
else {
// work as v-model={[value]} or v-models={[[value]]}
args.push(t.nullLiteral());
}
modifiersSet.push(new Set(modifiers));
vals.push(first);
});
}
else if (isVModel) {
// work as v-model={value}
args.push(t.nullLiteral());
modifiersSet.push(new Set(underscoreModifiers));
}
}
else {
modifiersSet.push(new Set(underscoreModifiers));
}
return {
directiveName,
modifiers: modifiersSet,
values: vals.length ? vals : [value],
args,
directive: shouldResolve ? [
resolveDirective(path, state, tag, directiveName),
vals[0] || value,
!!((_b = modifiersSet[0]) === null || _b === void 0 ? void 0 : _b.size) && t.unaryExpression('void', t.numericLiteral(0), true),
!!((_c = modifiersSet[0]) === null || _c === void 0 ? void 0 : _c.size) && t.objectExpression([...modifiersSet[0]].map((modifier) => t.objectProperty(t.identifier(modifier), t.booleanLiteral(true)))),
].filter(Boolean) : undefined,
};
};
const resolveDirective = (path, state, tag, directiveName) => {
var _a;
if (directiveName === 'show') {
return utils_1.createIdentifier(state, 'vShow');
}
if (directiveName === 'model') {
let modelToUse;
const type = getType(path.parentPath);
switch (tag.value) {
case 'select':
modelToUse = utils_1.createIdentifier(state, 'vModelSelect');
break;
case 'textarea':
modelToUse = utils_1.createIdentifier(state, 'vModelText');
break;
default:
if (t.isStringLiteral(type) || !type) {
switch ((_a = type) === null || _a === void 0 ? void 0 : _a.value) {
case 'checkbox':
modelToUse = utils_1.createIdentifier(state, 'vModelCheckbox');
break;
case 'radio':
modelToUse = utils_1.createIdentifier(state, 'vModelRadio');
break;
default:
modelToUse = utils_1.createIdentifier(state, 'vModelText');
}
}
else {
modelToUse = utils_1.createIdentifier(state, 'vModelDynamic');
}
}
return modelToUse;
}
return t.callExpression(utils_1.createIdentifier(state, 'resolveDirective'), [
t.stringLiteral(directiveName),
]);
};
exports.default = parseDirectives;
packages/uni-h5/lib/babel-plugin-jsx/dist/patchFlags.d.ts 0 → 100644
浏览文件 @ ad78aea8
export declare const enum PatchFlags {
TEXT = 1,
CLASS = 2,
STYLE = 4,
PROPS = 8,
FULL_PROPS = 16,
HYDRATE_EVENTS = 32,
STABLE_FRAGMENT = 64,
KEYED_FRAGMENT = 128,
UNKEYED_FRAGMENT = 256,
NEED_PATCH = 512,
DYNAMIC_SLOTS = 1024,
HOISTED = -1,
BAIL = -2
}
export declare const PatchFlagNames: {
[x: number]: string;
};
packages/uni-h5/lib/babel-plugin-jsx/dist/patchFlags.js 0 → 100644
浏览文件 @ ad78aea8
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PatchFlagNames = void 0;
// dev only flag -> name mapping
exports.PatchFlagNames = {
[1 /* TEXT */]: 'TEXT',
[2 /* CLASS */]: 'CLASS',
[4 /* STYLE */]: 'STYLE',
[8 /* PROPS */]: 'PROPS',
[16 /* FULL_PROPS */]: 'FULL_PROPS',
[32 /* HYDRATE_EVENTS */]: 'HYDRATE_EVENTS',
[64 /* STABLE_FRAGMENT */]: 'STABLE_FRAGMENT',
[128 /* KEYED_FRAGMENT */]: 'KEYED_FRAGMENT',
[256 /* UNKEYED_FRAGMENT */]: 'UNKEYED_FRAGMENT',
[1024 /* DYNAMIC_SLOTS */]: 'DYNAMIC_SLOTS',
[512 /* NEED_PATCH */]: 'NEED_PATCH',
[-1 /* HOISTED */]: 'HOISTED',
[-2 /* BAIL */]: 'BAIL',
};
packages/uni-h5/lib/babel-plugin-jsx/dist/rumtime.js 0 → 100644
浏览文件 @ ad78aea8
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.isSlot = void 0;
const vue_1 = require("vue");
const isFunction = (val) => typeof val === 'function';
const isObject = (val) => Object.prototype.toString.call(val) === '[object Object]';
const isSlot = (s) => isFunction(s) || (isObject(s) && !vue_1.isVNode(s));
exports.isSlot = isSlot;
packages/uni-h5/lib/babel-plugin-jsx/dist/slotFlags.d.ts 0 → 100644
浏览文件 @ ad78aea8
declare const enum SlotFlags {
/**
* Stable slots that only reference slot props or context state. The slot
* can fully capture its own dependencies so when passed down the parent won't
* need to force the child to update.
*/
STABLE = 1,
/**
* Slots that reference scope variables (v-for or an outer slot prop), or
* has conditional structure (v-if, v-for). The parent will need to force
* the child to update because the slot does not fully capture its dependencies.
*/
DYNAMIC = 2,
/**
* `<slot/>` being forwarded into a child component. Whether the parent needs
* to update the child is dependent on what kind of slots the parent itself
* received. This has to be refined at runtime, when the child's vnode
* is being created (in `normalizeChildren`)
*/
FORWARDED = 3
}
export default SlotFlags;
packages/uni-h5/lib/babel-plugin-jsx/dist/slotFlags.js 0 → 100644
浏览文件 @ ad78aea8
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
packages/uni-h5/lib/babel-plugin-jsx/dist/sugar-fragment.d.ts 0 → 100644
浏览文件 @ ad78aea8
import * as t from '@babel/types';
import { NodePath } from '@babel/traverse';
import { State } from '.';
declare const _default: {
JSXFragment: {
enter(path: NodePath<t.JSXElement>, state: State): void;
};
};
export default _default;
packages/uni-h5/lib/babel-plugin-jsx/dist/sugar-fragment.js 0 → 100644
浏览文件 @ ad78aea8
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const t = __importStar(require("@babel/types"));
const utils_1 = require("./utils");
const transformFragment = (path, Fragment) => {
const children = path.get('children') || [];
return t.jsxElement(t.jsxOpeningElement(Fragment, []), t.jsxClosingElement(Fragment), children.map(({ node }) => node), false);
};
exports.default = ({
JSXFragment: {
enter(path, state) {
const fragmentCallee = utils_1.createIdentifier(state, utils_1.FRAGMENT);
path.replaceWith(transformFragment(path, t.isIdentifier(fragmentCallee)
? t.jsxIdentifier(fragmentCallee.name)
: t.jsxMemberExpression(t.jsxIdentifier(fragmentCallee.object.name), t.jsxIdentifier(fragmentCallee.property.name))));
},
},
});
packages/uni-h5/lib/babel-plugin-jsx/dist/transform-vue-jsx.d.ts 0 → 100644
浏览文件 @ ad78aea8
import * as t from '@babel/types';
import { NodePath } from '@babel/traverse';
import { State } from '.';
declare const transformJSXElement: (path: NodePath<t.JSXElement>, state: State) => t.CallExpression;
export { transformJSXElement };
declare const _default: {
JSXElement: {
exit(path: NodePath<t.JSXElement>, state: State): void;
};
};
export default _default;
packages/uni-h5/lib/babel-plugin-jsx/dist/transform-vue-jsx.js 0 → 100644
浏览文件 @ ad78aea8
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.transformJSXElement = void 0;
const t = __importStar(require("@babel/types"));
const utils_1 = require("./utils");
const buildProps_1 = __importDefault(require("./buildProps"));
/**
* Get children from Array of JSX children
* @param paths Array<JSXText | JSXExpressionContainer | JSXElement | JSXFragment>
* @returns Array<Expression | SpreadElement>
*/
const getChildren = (paths, state) => paths
.map((path) => {
if (path.isJSXText()) {
const transformedText = utils_1.transformJSXText(path);
if (transformedText) {
return t.callExpression(utils_1.createIdentifier(state, 'createTextVNode'), [transformedText]);
}
return transformedText;
}
if (path.isJSXExpressionContainer()) {
const expression = utils_1.transformJSXExpressionContainer(path);
if (t.isIdentifier(expression)) {
const { name } = expression;
const { referencePaths = [] } = path.scope.getBinding(name) || {};
referencePaths.forEach((referencePath) => {
utils_1.walksScope(referencePath, name, 2 /* DYNAMIC */);
});
}
return expression;
}
if (t.isJSXSpreadChild(path)) {
return utils_1.transformJSXSpreadChild(path);
}
if (path.isCallExpression()) {
return path.node;
}
if (path.isJSXElement()) {
return transformJSXElement(path, state);
}
throw new Error(`getChildren: ${path.type} is not supported`);
}).filter(((value) => (value !== undefined
&& value !== null
&& !t.isJSXEmptyExpression(value))));
const transformJSXElement = (path, state) => {
const children = getChildren(path.get('children'), state);
const { tag, props, isComponent, directives, patchFlag, dynamicPropNames, slots, } = buildProps_1.default(path, state);
const { optimize = false } = state.opts;
const slotFlag = path.getData('slotFlag') || 1 /* STABLE */;
let VNodeChild;
if (children.length > 1 || slots) {
/*
<A v-slots={slots}>{a}{b}</A>
---> {{ default: () => [a, b], ...slots }}
---> {[a, b]}
*/
VNodeChild = isComponent ? t.objectExpression([
!!children.length && t.objectProperty(t.identifier('default'), t.arrowFunctionExpression([], t.arrayExpression(utils_1.buildIIFE(path, children)))),
...(slots ? (t.isObjectExpression(slots)
? slots.properties
: [t.spreadElement(slots)]) : []),
optimize && t.objectProperty(t.identifier('_'), t.numericLiteral(slotFlag)),
].filter(Boolean)) : t.arrayExpression(children);
}
else if (children.length === 1) {
/*
<A>{a}</A> or <A>{() => a}</A>
*/
const { enableObjectSlots = true } = state.opts;
const child = children[0];
const objectExpression = t.objectExpression([
t.objectProperty(t.identifier('default'), t.arrowFunctionExpression([], t.arrayExpression(utils_1.buildIIFE(path, [child])))),
optimize && t.objectProperty(t.identifier('_'), t.numericLiteral(slotFlag)),
].filter(Boolean));
if (t.isIdentifier(child) && isComponent) {
VNodeChild = enableObjectSlots ? t.conditionalExpression(t.callExpression(state.get('@vue/babel-plugin-jsx/runtimeIsSlot')(), [child]), child, objectExpression) : objectExpression;
}
else if (t.isCallExpression(child) && child.loc && isComponent) { // the element was generated and doesn't have location information
if (enableObjectSlots) {
const { scope } = path;
const slotId = scope.generateUidIdentifier('slot');
if (scope) {
scope.push({
id: slotId,
kind: 'let',
});
}
const alternate = t.objectExpression([
t.objectProperty(t.identifier('default'), t.arrowFunctionExpression([], t.arrayExpression(utils_1.buildIIFE(path, [slotId])))),
optimize && t.objectProperty(t.identifier('_'), t.numericLiteral(slotFlag)),
].filter(Boolean));
const assignment = t.assignmentExpression('=', slotId, child);
const condition = t.callExpression(state.get('@vue/babel-plugin-jsx/runtimeIsSlot')(), [assignment]);
VNodeChild = t.conditionalExpression(condition, slotId, alternate);
}
else {
VNodeChild = objectExpression;
}
}
else if (t.isFunctionExpression(child) || t.isArrowFunctionExpression(child)) {
VNodeChild = t.objectExpression([
t.objectProperty(t.identifier('default'), child),
]);
}
else if (t.isObjectExpression(child)) {
VNodeChild = t.objectExpression([
...child.properties,
optimize && t.objectProperty(t.identifier('_'), t.numericLiteral(slotFlag)),
].filter(Boolean));
}
else {
VNodeChild = isComponent ? t.objectExpression([
t.objectProperty(t.identifier('default'), t.arrowFunctionExpression([], t.arrayExpression([child]))),
]) : t.arrayExpression([child]);
}
}
const createVNode = t.callExpression(utils_1.createIdentifier(state, 'createVNode'), [
tag,
props,
VNodeChild || t.nullLiteral(),
!!patchFlag && optimize && t.numericLiteral(patchFlag),
!!dynamicPropNames.size && optimize
&& t.arrayExpression([...dynamicPropNames.keys()].map((name) => t.stringLiteral(name))),
].filter(Boolean));
if (!directives.length) {
return createVNode;
}
return t.callExpression(utils_1.createIdentifier(state, 'withDirectives'), [
createVNode,
t.arrayExpression(directives),
]);
};
exports.transformJSXElement = transformJSXElement;
exports.default = ({
JSXElement: {
exit(path, state) {
path.replaceWith(transformJSXElement(path, state));
},
},
});
packages/uni-h5/lib/babel-plugin-jsx/dist/utils.d.ts 0 → 100644
浏览文件 @ ad78aea8
import * as t from '@babel/types';
import { NodePath } from '@babel/traverse';
import { State } from '.';
import SlotFlags from './slotFlags';
declare const JSX_HELPER_KEY = "JSX_HELPER_KEY";
declare const FRAGMENT = "Fragment";
/**
* create Identifier
* @param path NodePath
* @param state
* @param name string
* @returns MemberExpression
*/
declare const createIdentifier: (state: State, name: string) => t.Identifier | t.MemberExpression;
/**
* Checks if string is describing a directive
* @param src string
*/
declare const isDirective: (src: string) => boolean;
/**
* Should transformed to slots
* @param tag string
* @returns boolean
*/
declare const shouldTransformedToSlots: (tag: string) => boolean;
/**
* Check if a Node is a component
*
* @param t
* @param path JSXOpeningElement
* @returns boolean
*/
declare const checkIsComponent: (path: NodePath<t.JSXOpeningElement>) => boolean;
/**
* Transform JSXMemberExpression to MemberExpression
* @param path JSXMemberExpression
* @returns MemberExpression
*/
declare const transformJSXMemberExpression: (path: NodePath<t.JSXMemberExpression>) => t.MemberExpression;
/**
* Get tag (first attribute for h) from JSXOpeningElement
* @param path JSXElement
* @param state State
* @returns Identifier | StringLiteral | MemberExpression | CallExpression
*/
declare const getTag: (path: NodePath<t.JSXElement>, state: State) => t.Identifier | t.CallExpression | t.StringLiteral | t.MemberExpression;
declare const getJSXAttributeName: (path: NodePath<t.JSXAttribute>) => string;
/**
* Transform JSXText to StringLiteral
* @param path JSXText
* @returns StringLiteral | null
*/
declare const transformJSXText: (path: NodePath<t.JSXText>) => t.StringLiteral | null;
/**
* Transform JSXExpressionContainer to Expression
* @param path JSXExpressionContainer
* @returns Expression
*/
declare const transformJSXExpressionContainer: (path: NodePath<t.JSXExpressionContainer>) => (t.Expression);
/**
* Transform JSXSpreadChild
* @param path JSXSpreadChild
* @returns SpreadElement
*/
declare const transformJSXSpreadChild: (path: NodePath<t.JSXSpreadChild>) => t.SpreadElement;
declare const walksScope: (path: NodePath, name: string, slotFlag: SlotFlags) => void;
declare const buildIIFE: (path: NodePath<t.JSXElement>, children: t.Expression[]) => t.Expression[];
export { createIdentifier, isDirective, checkIsComponent, transformJSXMemberExpression, getTag, getJSXAttributeName, transformJSXText, transformJSXSpreadChild, transformJSXExpressionContainer, shouldTransformedToSlots, FRAGMENT, walksScope, buildIIFE, JSX_HELPER_KEY, };
packages/uni-h5/lib/babel-plugin-jsx/dist/utils.js 0 → 100644
浏览文件 @ ad78aea8
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.JSX_HELPER_KEY = exports.buildIIFE = exports.walksScope = exports.FRAGMENT = exports.shouldTransformedToSlots = exports.transformJSXExpressionContainer = exports.transformJSXSpreadChild = exports.transformJSXText = exports.getJSXAttributeName = exports.getTag = exports.transformJSXMemberExpression = exports.checkIsComponent = exports.isDirective = exports.createIdentifier = void 0;
const t = __importStar(require("@babel/types"));
const html_tags_1 = __importDefault(require("html-tags"));
const svg_tags_1 = __importDefault(require("svg-tags"));
const JSX_HELPER_KEY = 'JSX_HELPER_KEY';
exports.JSX_HELPER_KEY = JSX_HELPER_KEY;
const FRAGMENT = 'Fragment';
exports.FRAGMENT = FRAGMENT;
const KEEP_ALIVE = 'KeepAlive';
/**
* create Identifier
* @param path NodePath
* @param state
* @param name string
* @returns MemberExpression
*/
const createIdentifier = (state, name) => state.get(name)();
exports.createIdentifier = createIdentifier;
/**
* Checks if string is describing a directive
* @param src string
*/
const isDirective = (src) => src.startsWith('v-')
|| (src.startsWith('v') && src.length >= 2 && src[1] >= 'A' && src[1] <= 'Z');
exports.isDirective = isDirective;
/**
* Should transformed to slots
* @param tag string
* @returns boolean
*/
const shouldTransformedToSlots = (tag) => !(tag.endsWith(FRAGMENT) || tag === KEEP_ALIVE);
exports.shouldTransformedToSlots = shouldTransformedToSlots;
/**
* Check if a Node is a component
*
* @param t
* @param path JSXOpeningElement
* @returns boolean
*/
const checkIsComponent = (path, state) => {
const namePath = path.get('name');
if (namePath.isJSXMemberExpression()) {
return shouldTransformedToSlots(namePath.node.property.name); // For withCtx
}
const tag = namePath.node.name;
if(state.opts.isCustomElement && state.opts.isCustomElement(tag)){
return false
}
return shouldTransformedToSlots(tag) && !html_tags_1.default.includes(tag) && !svg_tags_1.default.includes(tag);
};
exports.checkIsComponent = checkIsComponent;
/**
* Transform JSXMemberExpression to MemberExpression
* @param path JSXMemberExpression
* @returns MemberExpression
*/
const transformJSXMemberExpression = (path) => {
const objectPath = path.node.object;
const propertyPath = path.node.property;
const transformedObject = t.isJSXMemberExpression(objectPath)
? transformJSXMemberExpression(path.get('object'))
: t.isJSXIdentifier(objectPath)
? t.identifier(objectPath.name)
: t.nullLiteral();
const transformedProperty = t.identifier(propertyPath.name);
return t.memberExpression(transformedObject, transformedProperty);
};
exports.transformJSXMemberExpression = transformJSXMemberExpression;
/**
* Get tag (first attribute for h) from JSXOpeningElement
* @param path JSXElement
* @param state State
* @returns Identifier | StringLiteral | MemberExpression | CallExpression
*/
const getTag = (path, state) => {
var _a, _b;
const namePath = path.get('openingElement').get('name');
if (namePath.isJSXIdentifier()) {
const { name } = namePath.node;
if (!html_tags_1.default.includes(name) && !svg_tags_1.default.includes(name)) {
return (name === FRAGMENT
? createIdentifier(state, FRAGMENT)
: path.scope.hasBinding(name)
? t.identifier(name)
: ((_b = (_a = state.opts).isCustomElement) === null || _b === void 0 ? void 0 : _b.call(_a, name)) ? t.stringLiteral(name)
: t.callExpression(createIdentifier(state, 'resolveComponent'), [t.stringLiteral(name)]));
}
return t.stringLiteral(name);
}
if (namePath.isJSXMemberExpression()) {
return transformJSXMemberExpression(namePath);
}
throw new Error(`getTag: ${namePath.type} is not supported`);
};
exports.getTag = getTag;
const getJSXAttributeName = (path) => {
const nameNode = path.node.name;
if (t.isJSXIdentifier(nameNode)) {
return nameNode.name;
}
return `${nameNode.namespace.name}:${nameNode.name.name}`;
};
exports.getJSXAttributeName = getJSXAttributeName;
/**
* Transform JSXText to StringLiteral
* @param path JSXText
* @returns StringLiteral | null
*/
const transformJSXText = (path) => {
const { node } = path;
const lines = node.value.split(/\r\n|\n|\r/);
let lastNonEmptyLine = 0;
for (let i = 0; i < lines.length; i++) {
if (lines[i].match(/[^ \t]/)) {
lastNonEmptyLine = i;
}
}
let str = '';
for (let i = 0; i < lines.length; i++) {
const line = lines[i];
const isFirstLine = i === 0;
const isLastLine = i === lines.length - 1;
const isLastNonEmptyLine = i === lastNonEmptyLine;
// replace rendered whitespace tabs with spaces
let trimmedLine = line.replace(/\t/g, ' ');
// trim whitespace touching a newline
if (!isFirstLine) {
trimmedLine = trimmedLine.replace(/^[ ]+/, '');
}
// trim whitespace touching an endline
if (!isLastLine) {
trimmedLine = trimmedLine.replace(/[ ]+$/, '');
}
if (trimmedLine) {
if (!isLastNonEmptyLine) {
trimmedLine += ' ';
}
str += trimmedLine;
}
}
return str !== '' ? t.stringLiteral(str) : null;
};
exports.transformJSXText = transformJSXText;
/**
* Transform JSXExpressionContainer to Expression
* @param path JSXExpressionContainer
* @returns Expression
*/
const transformJSXExpressionContainer = (path) => path.get('expression').node;
exports.transformJSXExpressionContainer = transformJSXExpressionContainer;
/**
* Transform JSXSpreadChild
* @param path JSXSpreadChild
* @returns SpreadElement
*/
const transformJSXSpreadChild = (path) => t.spreadElement(path.get('expression').node);
exports.transformJSXSpreadChild = transformJSXSpreadChild;
const walksScope = (path, name, slotFlag) => {
if (path.scope.hasBinding(name) && path.parentPath) {
if (t.isJSXElement(path.parentPath.node)) {
path.parentPath.setData('slotFlag', slotFlag);
}
walksScope(path.parentPath, name, slotFlag);
}
};
exports.walksScope = walksScope;
const buildIIFE = (path, children) => {
const { parentPath } = path;
if (t.isAssignmentExpression(parentPath)) {
const { left } = parentPath.node;
if (t.isIdentifier(left)) {
return children.map((child) => {
if (t.isIdentifier(child) && child.name === left.name) {
const insertName = path.scope.generateUidIdentifier(child.name);
parentPath.insertBefore(t.variableDeclaration('const', [
t.variableDeclarator(insertName, t.callExpression(t.functionExpression(null, [], t.blockStatement([t.returnStatement(child)])), [])),
]));
return insertName;
}
return child;
});
}
}
return children;
};
exports.buildIIFE = buildIIFE;
packages/uni-h5/lib/babel-plugin-jsx/package.json 0 → 100644
浏览文件 @ ad78aea8
{
"name": "@vue/babel-plugin-jsx",
"version": "1.0.3",
"description": "Babel plugin for Vue 3.0 JSX",
"author": "Amour1688 <lcz_1996@foxmail.com>",
"homepage": "https://github.com/vuejs/jsx-next/tree/dev/packages/babel-plugin-jsx#readme",
"license": "MIT",
"main": "dist/index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/vuejs/jsx-next.git"
},
"scripts": {
"build": "tsc",
"lint": "eslint 'src/*.ts'",
"test": "yarn build && jest --coverage",
"prepublishOnly": "yarn build"
},
"bugs": {
"url": "https://github.com/vuejs/jsx-next/issues"
},
"files": [
"dist"
],
"dependencies": {
"@babel/helper-module-imports": "^7.0.0",
"@babel/plugin-syntax-jsx": "^7.0.0",
"@babel/template": "^7.0.0",
"@babel/traverse": "^7.0.0",
"@babel/types": "^7.0.0",
"@vue/babel-helper-vue-transform-on": "^1.0.2",
"camelcase": "^6.0.0",
"html-tags": "^3.1.0",
"svg-tags": "^1.0.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@types/jest": "^26.0.7",
"@types/svg-tags": "^1.0.0",
"@typescript-eslint/eslint-plugin": "^4.0.1",
"@typescript-eslint/parser": "^4.0.1",
"@vue/compiler-dom": "3.0.5",
"@vue/test-utils": "2.0.0-beta.2",
"jest": "^26.0.1",
"regenerator-runtime": "^0.13.5",
"ts-jest": "^26.1.3",
"typescript": "^4.0.2",
"vue": "3.0.5"
}
}
packages/uni-h5/src/framework/components/app/index.ts → packages/uni-h5/src/framework/components/app/index.tsx
浏览文件 @ ad78aea8
import {
ref,
onMounted,
computed,
openBlock,
createBlock,
createVNode,
defineComponent,
} from 'vue'
import { ref, computed, onMounted, defineComponent } from 'vue'
import Layout from './layout'
......@@ -28,25 +20,9 @@ export default defineComponent({
const { clazz, onChange } = useAppClass()
return () => (
openBlock(),
createBlock(
'uni-app',
{
class: clazz.value,
},
[
createVNode(
Layout,
{
onChange,
},
null,
8 /* PROPS */,
['onChange']
),
],
2 /* CLASS */
)
<uni-app class={clazz.value}>
<Layout onChange={onChange} />
</uni-app>
)
},
})
......
packages/uni-h5/src/framework/components/app/layout/index.ts → packages/uni-h5/src/framework/components/app/layout/index.tsx
浏览文件 @ ad78aea8
import {
vShow,
withCtx,
Fragment,
KeepAlive,
openBlock,
mergeProps,
createBlock,
createVNode,
withDirectives,
defineComponent,
resolveComponent,
ConcreteComponent,
createCommentVNode,
resolveDynamicComponent,
} from 'vue'
......@@ -25,73 +20,67 @@ type KeepAliveRoute = ReturnType<typeof useKeepAliveRoute>
export default defineComponent({
name: 'Layout',
props: {
onChange: Function,
},
emits: ['change'],
setup() {
const route = __UNI_FEATURE_TABBAR__ ? useRoute() : null
const keepAliveRoute = __UNI_FEATURE_PAGES__ ? useKeepAliveRoute() : null
const topWindow = __UNI_FEATURE_TOPWINDOW__ ? useTopWindow() : null
const leftWindow = __UNI_FEATURE_LEFTWINDOW__ ? useLeftWindow() : null
const rightWindow = __UNI_FEATURE_RIGHTWINDOW__ ? useRightWindow() : null
const route = __UNI_FEATURE_TABBAR__ && useRoute()
const keepAliveRoute = __UNI_FEATURE_PAGES__ && useKeepAliveRoute()
const topWindow = __UNI_FEATURE_TOPWINDOW__ && useTopWindow()
const leftWindow = __UNI_FEATURE_LEFTWINDOW__ && useLeftWindow()
const rightWindow = __UNI_FEATURE_RIGHTWINDOW__ && useRightWindow()
return () => {
return (
openBlock(),
createBlock(
Fragment,
null,
[
createLayoutVNode(
const layoutTsx = createLayoutTsx(
keepAliveRoute,
topWindow,
leftWindow,
rightWindow
),
createTabBarVNode(route),
],
64 /* STABLE_FRAGMENT */
)
)
const tabBarTsx =
__UNI_FEATURE_TABBAR__ &&
createTabBarTsx(route as RouteLocationNormalizedLoaded)
return [layoutTsx, tabBarTsx].filter(Boolean)
}
},
})
function createLayoutVNode(
keepAliveRoute: KeepAliveRoute | null,
topWindow: unknown,
leftWindow: unknown,
rightWindow: unknown
function createLayoutTsx(
keepAliveRoute: KeepAliveRoute | false,
topWindow?: unknown,
leftWindow?: unknown,
rightWindow?: unknown
) {
const routerVNode = __UNI_FEATURE_PAGES__
? createRouterViewVNode(keepAliveRoute!)
? createRouterViewVNode(keepAliveRoute as KeepAliveRoute)
: createPageVNode()
// 非响应式
if (!__UNI_FEATURE_RESPONSIVE__) {
return routerVNode
}
const topWindowVNode = __UNI_FEATURE_TOPWINDOW__
? createTopWindowVNode(topWindow)
: createCommentVNode('', true)
const leftWindowVNode = __UNI_FEATURE_LEFTWINDOW__
? createLeftWindowVNode(leftWindow)
: createCommentVNode('', true)
const rightWindowVNode = __UNI_FEATURE_RIGHTWINDOW__
? createRightWindowVNode(rightWindow)
: createCommentVNode('', true)
return createVNode('uni-layout', null, [
topWindowVNode,
createVNode('uni-content', null, [
createVNode('uni-main', null, [routerVNode]),
leftWindowVNode,
rightWindowVNode,
]),
])
const topWindowTsx = __UNI_FEATURE_TOPWINDOW__
? createTopWindowTsx(topWindow)
: null
const leftWindowTsx = __UNI_FEATURE_LEFTWINDOW__
? createLeftWindowTsx(leftWindow)
: null
const rightWindowTsx = __UNI_FEATURE_RIGHTWINDOW__
? createRightWindowTsx(rightWindow)
: null
return (
<uni-layout>
{topWindowTsx}
<uni-content>
<uni-main>{routerVNode}</uni-main>
{leftWindowTsx}
{rightWindowTsx}
</uni-content>
</uni-layout>
)
}
function createTabBarVNode(route: RouteLocationNormalizedLoaded | null) {
return __UNI_FEATURE_TABBAR__
? withDirectives(createVNode(TabBar, null, null, 512 /* NEED_PATCH */), [
[vShow, route!.meta.isTabBar], // TODO mediaQuery and api
])
: createCommentVNode('', true)
function createTabBarTsx(route: RouteLocationNormalizedLoaded) {
return <TabBar v-show={route.meta.isTabBar} />
}
function createPageVNode() {
......@@ -147,57 +136,6 @@ function useRightWindow() {
}
}
function createTopWindowVNode(topWindow: unknown) {
if (!__UNI_FEATURE_TOPWINDOW__) {
return createCommentVNode('', true)
}
const { component, style, height, show } = useTopWindow()
return withDirectives(
createVNode(
'uni-top-window',
null,
[
createVNode(
'div',
{
ref: 'topWindow',
class: 'uni-top-window',
style,
},
[
createVNode(
component,
mergeProps(
{
onVnodeMounted(vnode) {
// update style.offsetHeight
},
'navigation-bar-title-text': '',
}
//bindWindow
),
null,
16 /* FULL_PROPS */,
['navigation-bar-title-text']
),
],
4 /* STYLE */
),
createVNode(
'div',
{
class: 'uni-top-window--placeholder',
style: { height },
},
null,
4 /* STYLE */
),
],
512 /* NEED_PATCH */
),
[[vShow, show]]
)
}
function createLeftWindowVNode(leftWindow: unknown) {}
function createRightWindowVNode(leftWindow: unknown) {}
function createTopWindowTsx(topWindow: unknown) {}
function createLeftWindowTsx(leftWindow: unknown) {}
function createRightWindowTsx(leftWindow: unknown) {}
packages/uni-h5/src/framework/components/page/pageHead.tsx
浏览文件 @ ad78aea8
import {
computed,
createBlock,
// createCommentVNode,
// createVNode,
defineComponent,
openBlock,
// renderSlot,
// SetupContext,
// withCtx,
} from 'vue'
import { computed, defineComponent } from 'vue'
import { isArray } from '@vue/shared'
import { usePageMeta } from '../../plugin/provide'
export default defineComponent({
......@@ -19,11 +9,20 @@ export default defineComponent({
const navigationBar = pageMeta.navigationBar
UniServiceJSBridge.emit('onNavigationBarChange', navigationBar.titleText)
const { clazz, style } = usePageHead(navigationBar)
const backButtonJsx = createBackButtonJsx(navigationBar)
// 单页面无需back按钮
const backButtonJsx = __UNI_FEATURE_PAGES__
? createBackButtonJsx(navigationBar)
: null
const leftButtonsJsx = __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__
? createButtonsJsx('left', navigationBar)
: []
return () => (
<uni-page-head uni-page-head-type={navigationBar.type}>
<div class={clazz.value} style={style.value}>
<div class="uni-page-head-hd">{backButtonJsx}</div>
<div class="uni-page-head-hd">
{backButtonJsx}
{...leftButtonsJsx}
</div>
</div>
</uni-page-head>
)
......@@ -34,7 +33,7 @@ function createBackButtonJsx(navigationBar: UniApp.PageNavigationBar) {
if (navigationBar.backButton) {
return (
<div class="uni-page-head-btn">
<i style="{color:color,fontSize:'27px'}" class="uni-btn-icon">
<i style="fontSize:27px" class="uni-btn-icon">
&#xe601;
</i>
</div>
......@@ -42,6 +41,22 @@ function createBackButtonJsx(navigationBar: UniApp.PageNavigationBar) {
}
}
function createButtonsJsx(
float: 'left' | 'right',
navigationBar: UniApp.PageNavigationBar
) {
if (isArray(navigationBar.buttons)) {
return navigationBar.buttons
.filter((btn) => btn.float === float)
.map((btn, index) => (
<div key={index}>
<i />
</div>
))
}
return []
}
function usePageHead(navigationBar: UniApp.PageNavigationBar) {
const clazz = computed(() => {
const { type, titlePenetrate, shadowColorType } = navigationBar
......
packages/uni-h5/vite.config.ts
浏览文件 @ ad78aea8
......@@ -2,11 +2,17 @@ import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import replace from '@rollup/plugin-replace'
import { isCustomElement } from '../uni-shared'
const moduleAlias = require('module-alias')
moduleAlias.addAlias(
'@vue/babel-plugin-jsx',
path.join(__dirname, 'lib/babel-plugin-jsx')
)
const vueJsx = require('@vitejs/plugin-vue-jsx')
function resolve(file: string) {
return path.resolve(__dirname, file)
}
......
packages/vite-plugin-uni/src/handleHotUpdate/index.ts
浏览文件 @ ad78aea8
......@@ -8,16 +8,24 @@ import { getFeatures } from '../utils'
const debugHmr = debug('uni:hmr')
async function invalidate(file: string, moduleGraph: ModuleGraph) {
const mod = await moduleGraph.getModuleById(slash(file))
if (mod) {
const mods = await moduleGraph.getModulesByFile(slash(file))
if (mods && mods.size) {
;[...mods].forEach((mod) => {
debugHmr('invalidate', mod.id)
moduleGraph.invalidateModule(mod)
})
}
}
export function createHandleHotUpdate(
options: VitePluginUniResolvedOptions
): Plugin['handleHotUpdate'] {
const invalidateFiles = [
path.resolve(options.inputDir, 'pages.json.js'),
path.resolve(options.inputDir, 'manifest.json.js'),
require.resolve('@dcloudio/uni-h5/dist/uni-h5.esm.js'),
require.resolve('vite/dist/client/env.js'),
]
return async function ({ file, server }) {
// TODO 目前简单处理，当pages.json,manifest.json发生变化，就直接刷新，理想情况下，应该区分变化的内容，仅必要时做整页面刷新
const isPagesJson = file.endsWith('pages.json')
......@@ -36,15 +44,8 @@ export function createHandleHotUpdate(
)
debugHmr('define', server.config.define)
// 当pages.json,manifest.json发生变化时，作废pages.json.js缓存
await invalidate(
path.resolve(options.inputDir, 'pages.json.js'),
server.moduleGraph
)
if (isManifestJson) {
await invalidate(
path.resolve(options.inputDir, 'manifest.json.js'),
server.moduleGraph
)
for (const file of invalidateFiles) {
await invalidate(file, server.moduleGraph)
}
return []
}
......
packages/vite-plugin-uni/src/utils/define.ts
浏览文件 @ ad78aea8
......@@ -2,7 +2,7 @@ import fs from 'fs'
import path from 'path'
import { ConfigEnv } from 'vite'
import { parse } from 'jsonc-parser'
import { isArray } from '@vue/shared'
import { VitePluginUniResolvedOptions } from '..'
import { normalizePagesJson } from './pagesJson'
......@@ -15,6 +15,7 @@ interface PagesFeatures {
leftWindow: boolean
rightWindow: boolean
pullDownRefresh: boolean
navigationBarButtons: boolean
}
interface ManifestFeatures {
wx: boolean
......@@ -46,6 +47,7 @@ function resolvePagesFeature(
leftWindow: false, // 是否启用leftWindow
rightWindow: false, // 是否启用rightWindow
pullDownRefresh: false, // 是否启用下拉刷新
navigationBarButtons: true, // 是否启用标题按钮
}
const {
......@@ -89,6 +91,15 @@ function resolvePagesFeature(
) {
features.nvue = false
}
if (
!pages.find(
(page) =>
isArray(page.style.navigationBar.buttons) &&
page.style.navigationBar.buttons.length
)
) {
features.navigationBarButtons = false
}
}
return features
......@@ -137,6 +148,7 @@ export function getFeatures(
leftWindow,
rightWindow,
pullDownRefresh,
navigationBarButtons,
} = Object.assign(
resolveManifestFeature(options),
resolvePagesFeature(options, command),
......@@ -156,5 +168,6 @@ export function getFeatures(
__UNI_FEATURE_RIGHTWINDOW__: rightWindow,
__UNI_FEATURE_RESPONSIVE__: topWindow || leftWindow || rightWindow,
__UNI_FEATURE_PULL_DOWN_REFRESH__: pullDownRefresh,
__UNI_FEATURE_NAVIGATIONBAR_BUTTONS__: navigationBarButtons,
}
}
packages/vite-plugin-uni/src/utils/pagesJson.ts
浏览文件 @ ad78aea8
......@@ -55,7 +55,7 @@ function normalizeSubpackages(
if (Array.isArray(subpackages)) {
subpackages.forEach(({ root, pages: subPages }) => {
if (root && subPages.length) {
subPages.forEach((subPage: { path: string }) => {
subPages.forEach((subPage) => {
subPage.path = slash(path.join(root, subPage.path))
pages.push(subPage)
})
......@@ -66,7 +66,7 @@ function normalizeSubpackages(
}
function normalizePageStyle(
pageStyle: Record<string, any>,
pageStyle: UniApp.PagesJsonPageStyle,
platform: UniApp.PLATFORM
) {
if (pageStyle) {
......@@ -118,10 +118,10 @@ function normalizeNavigationBar(
const platforms = ['h5', 'app-plus', 'mp-', 'quickapp']
function removePlatformStyle(pageStyle: Record<string, any>) {
function removePlatformStyle(pageStyle: UniApp.PagesJsonPageStyle) {
Object.keys(pageStyle).forEach((name) => {
if (platforms.find((prefix) => name.startsWith(prefix))) {
delete pageStyle[name]
delete pageStyle[name as UniApp.PLATFORM]
}
})
return pageStyle
......
yarn.lock
浏览文件 @ ad78aea8
......@@ -780,9 +780,9 @@
integrity sha512-XI3MGSejUQIJ3wzY0i5IHy5J3eb36M/ytgG8jIOssP08ovtRPcjpjXQqrx51AHBNBOisTS/NQNWJitI17+EwzQ==
"@types/estree@*":
version "0.0.46"
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.46.tgz#0fb6bfbbeabd7a30880504993369c4bf1deab1fe"
integrity sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg==
version "0.0.47"
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.47.tgz#d7a51db20f0650efec24cd04994f523d93172ed4"
integrity sha512-c5ciR06jK8u9BstrmJyO97m+klJrrhCf9u3rLu3DEAJBirxRqSCvDQoYKmxuYwQI5SZChAWu+tq9oVlGRuzPAg==
"@types/estree@0.0.39":
version "0.0.39"
......@@ -4308,6 +4308,11 @@ mkdirp@1.x:
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
module-alias@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/module-alias/-/module-alias-2.2.2.tgz#151cdcecc24e25739ff0aa6e51e1c5716974c0e0"
integrity sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==
ms@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或