V4 Next Big Version #3143
Comments
|
TypeScript! |
|
帅，就是任性 |
|
type script太重要了，大大的支持 |
|
麻烦多写点注释,弱类型真的很难猜 |
|
typescript 还是不要了吧，用 antd-pro 必须先学 typescript 对很多初学者成本会比较高。 |
|
不会吧，现在typescript不是都是前段开发标配了么，并且上手难度也不高啊，收益大于弊 |
|
用 TypeScript 可以编译到 ES6，新手可以用 ES6 的版本。 |
|
其实我也不是专业前端，主要还是写后端，强类型的使用，能让后端的人更好的适应，前段时间使用NG-ZOORO，感觉就舒服，配合swagger生成的HTTP代理和DTO类，注释，节省很多事情。毕竟现在都推荐使用TS，希望大佬考虑一下呢 @sorrycc |
|
编译到 ES6 基本上只是把类型去掉而已，其他不会有什么变化。 |
|
看上去如果能够编译到 ES6 的话似乎不错，这样就大家都有得选了。 |
|
再补充一个 init-cli 的功能，开发者应该用这个 cli 来初始化 pro 的项目，而不是直接使用 github 上的源代码，该工具应该做如下的事情：
|
|
请问这个大概需要多长时间推正式版，正打算用pro~ |
|
你可以直接使用的 |
|
when.ts import {
$mobx,
IReactionDisposer,
Lambda,
autorun,
createAction,
fail,
getNextId
} from "../internal"
export interface IWhenOptions {
name?: string
timeout?: number
onError?: (error: any) => void
}
export function when(
predicate: () => boolean,
opts?: IWhenOptions
): Promise<void> & { cancel(): void }
export function when(
predicate: () => boolean,
effect: Lambda,
opts?: IWhenOptions
): IReactionDisposer
export function when(predicate: any, arg1?: any, arg2?: any): any {
if (arguments.length === 1 || (arg1 && typeof arg1 === "object"))
return whenPromise(predicate, arg1)
return _when(predicate, arg1, arg2 || {})
}
function _when(predicate: () => boolean, effect: Lambda, opts: IWhenOptions): IReactionDisposer {
let timeoutHandle: any
if (typeof opts.timeout === "number") {
timeoutHandle = setTimeout(() => {
if (!disposer[$mobx].isDisposed) {
disposer()
const error = new Error("WHEN_TIMEOUT")
if (opts.onError) opts.onError(error)
else throw error
}
}, opts.timeout)
}
opts.name = opts.name || "When@" + getNextId()
const effectAction = createAction(opts.name + "-effect", effect as Function)
const disposer = autorun(r => {
if (predicate()) {
r.dispose()
if (timeoutHandle) clearTimeout(timeoutHandle)
effectAction()
}
}, opts)
return disposer
}
function whenPromise(
predicate: () => boolean,
opts?: IWhenOptions
): Promise<void> & { cancel(): void } {
if (process.env.NODE_ENV !== "production" && opts && opts.onError)
return fail(`the options 'onError' and 'promise' cannot be combined`)
let cancel
const res = new Promise((resolve, reject) => {
let disposer = _when(predicate, resolve, { ...opts, onError: reject })
cancel = () => {
disposer()
reject("WHEN_CANCELLED")
}
})
;(res as any).cancel = cancel
return res as any
}when.js "use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const internal_1 = require("../internal");
function when(predicate, arg1, arg2) {
if (arguments.length === 1 || (arg1 && typeof arg1 === "object"))
return whenPromise(predicate, arg1);
return _when(predicate, arg1, arg2 || {});
}
exports.when = when;
function _when(predicate, effect, opts) {
let timeoutHandle;
if (typeof opts.timeout === "number") {
timeoutHandle = setTimeout(() => {
if (!disposer[internal_1.$mobx].isDisposed) {
disposer();
const error = new Error("WHEN_TIMEOUT");
if (opts.onError)
opts.onError(error);
else
throw error;
}
}, opts.timeout);
}
opts.name = opts.name || "When@" + internal_1.getNextId();
const effectAction = internal_1.createAction(opts.name + "-effect", effect);
const disposer = internal_1.autorun(r => {
if (predicate()) {
r.dispose();
if (timeoutHandle)
clearTimeout(timeoutHandle);
effectAction();
}
}, opts);
return disposer;
}
function whenPromise(predicate, opts) {
if (process.env.NODE_ENV !== "production" && opts && opts.onError)
return internal_1.fail(`the options 'onError' and 'promise' cannot be combined`);
let cancel;
const res = new Promise((resolve, reject) => {
let disposer = _when(predicate, resolve, Object.assign({}, opts, { onError: reject }));
cancel = () => {
disposer();
reject("WHEN_CANCELLED");
};
});
res.cancel = cancel;
return res;
}看了下编译后的代码，虽然可读，但看起来还是有很明显的编译痕迹。 |
|
自己想用哪些功能自己配置，这个很帅，赞赞赞~ |
|
你这是编译到 es5 了吧，到 es6 是这样的： import { $mobx, autorun, createAction, fail, getNextId } from '../internal';
export function when(predicate, arg1, arg2) {
if (arguments.length === 1 || (arg1 && typeof arg1 === 'object'))
return whenPromise(predicate, arg1);
return _when(predicate, arg1, arg2 || {});
}
function _when(predicate, effect, opts) {
let timeoutHandle;
if (typeof opts.timeout === 'number') {
timeoutHandle = setTimeout(() => {
if (!disposer[$mobx].isDisposed) {
disposer();
const error = new Error('WHEN_TIMEOUT');
if (opts.onError) opts.onError(error);
else throw error;
}
}, opts.timeout);
}
opts.name = opts.name || 'When@' + getNextId();
const effectAction = createAction(opts.name + '-effect', effect);
const disposer = autorun(r => {
if (predicate()) {
r.dispose();
if (timeoutHandle) clearTimeout(timeoutHandle);
effectAction();
}
}, opts);
return disposer;
}
function whenPromise(predicate, opts) {
if (process.env.NODE_ENV !== 'production' && opts && opts.onError)
return fail(`the options 'onError' and 'promise' cannot be combined`);
let cancel;
const res = new Promise((resolve, reject) => {
let disposer = _when(predicate, resolve, { ...opts, onError: reject });
cancel = () => {
disposer();
reject('WHEN_CANCELLED');
};
});
res.cancel = cancel;
return res;
} |
|
有没有配置项可以保留空行？ |
|
没有配置，但是有 workaround microsoft/TypeScript#843 |
|
编译完之后 prettier 一下，格式就会变得和 ts 的一样 |
|
@redclown v4 的分支预计这周就会拉，会基于 https://github.com/umijs/ant-design-pro 这个，但是 v4 正式发应该要春节前后了，还要一段时间。 |
试了下，还挺不错的： $ prettier dist/components/Hello.jsx
import * as React from "react";
export const Hello = props => (
<h1>
Hello from {props.compiler} and {props.framework}!
</h1>
);
//# sourceMappingURL=Hello.jsx.map |
|
如果 cli ready，我觉得可以试试 |
|
能扩展cli可以配置插件、配置功能、主题然后自动生成一个干净的项目就好了，省了很多修改和删除的功夫才能开始一个新项目，期待v4 |
|
持续关注中，TypeScript 是一个好的选择 |
试过 @babel 的 generator 是可以保留空行的，理论上 typescript 也可以。 |
强烈支持typescript， typescript很简单，学习成本几个小时即可。 |
|
还是es6稳妥些！ |
|
期待 Follow ... |
|
请问一下，基于TypeScript的V4有了发布计划了吗？ |
|
发现了pro-blocks的repo，之前忘了在哪个issue里看到antd-pro要专注做block，不知道目前的block定位、粒度如何，是否有roadmap？ 在项目选型过程中同时考察了ice和antd-pro，感觉从设计语言、antd本身的组件库以及antd-pro提供的完整脚手架这几点，从代码（技术）层面上antd-pro更适合目前的需求。 但是有一个别扭的点是从目前ice的block以及领域模板来看，的确是省去了很多设计的工作，个人感觉ice-works更适合产品经理构建原型、串联需求等非coding工作。所以把ice-works作为pre-coding work感觉更合适，但是这个中间就会存在一个断层，如果整体选择antd-pro作为脚手架，那就需要将目前ice的领域模板或者block用antd或者antd-pro的component进行重写一遍，或者在ice中使用antd-pro定制一个template脚手架。目前没有考虑好如何才能更好的将ice和antd/antd-pro进行搭配使用，是否有建议？ 不知道antd/antd-pro团队是否在block甚至基于antd的领域模板上有交流、配合，以及下一步的计划？如果需要构建领域模板的话，感觉社区应该还是有很大贡献力量的，至少个人愿意贡献。 |
|
期待 dark theme |
|
正式版要是支持多种主题就好了。css in js 貌似可以实现 |
|
大部分Pro的用户应该是使用它当项目的架子，配置简单灵活，UI设计好看，这块做好才是重点，区块或者页面其实都是用户自己开发完成。现在的Pro太重了，很多功能只是参考作用，比如权限控制，只能控制用户维度，它不能控制到角色和功能点维度；再比如国际化，需要国际话的用户应该是少数，所以只要提供一个国际化方案就行，而不是默认支持国际化。 |
|
我看历史讨论中，没有从我的利益角度出发的我就写了 用于策反，设计师 -> 产品/项目经理（从“设计选择”到“项目快速构建”）简单的用户故事：对于我们吃瓜群众来说，Antd生态的开源代码就是知识消费的产品。 第一个问题：为什么star Antd 第二个问题：为什么star Antd Pro 我的思考：1.不知道有多少像我一样因为Antd Pro 开始学习React的设计师，在我的角度看来，Antd pro 的发展，其实源于一直被程序员们缩写的“d“——design。 建议：1.用Antd pro 首页的描述“开箱即用的中台前端/设计解决方案”来说明。 “开箱即用”应该是技术保障，“解决方案”才是产品核心体验。 说句戳心窝的话，项目用什么不会因为程序员爽而用（脚手架好什么的...），Antd pro作为“中台前端/设计”的解决方案应该能成为策反设计和PM的工具。 2.用什么策反？ 他们只会和你说体验！那么Antd pro提供的更多的pages代表着更多的体验场景，实现了的适配版式减少沟通成本。在我看来 antd 做到是组件的供应，作为antd的下游antd pro 做的就是pages（更多的体验场景）的供应。 3.希望 Antd pro 推出的功能，都能在体验上挖的足够深，别让程序员在后程有大坑，增加开发体验深度。 4.我想大多的star 都是像我这样半吊子的吃瓜群众。技术构架上的问题，灵活上的思考有ant团队的大牛解决，完善和深挖使用需求，有热情的社区贡献者。 希望Ant Design Pro 能识别自己的强项，和旗舰功能。 |
|
建议：可初始化一个BasicLayout空项目，需要的组件可自行选装。对于新手来说上手会更快！ |
|
有个想法，是否可以把楼上所说的BasicLayout空项目 写成一个组件，这样我用antd开发的时候可以直接引入，也可以通过yarn add 到项目中。这样有需要的人，引入这个组件就可以了。 |
|
v4 发布了以后就是这样的一个版本，所有的原来的界面都改变为了 pro-blocks 。 只是现在 V4 还没有具休的发布时间节点。 |
|
@xiaopanghhh 没有具体的发布时间,那么可以问下v4分支的可用度到哪里了吗 |
我也想知道具休的发布时间节点。这个只能问问项目相关人员了。 |
学不动了 |
|
npm run fetch:blocks 根本不能执行啊， 想构建一个完整demo，怎么办？ |
|
我试了一下是有的。 |
这个确实，比如菜单后台获取这种提了无数issue的问题官方坚持了很久不拿到mock里， 而ts上的更是神来之笔，根据issue来看有很多javaer学es6都已经秃了 |
不会 TS 还来搞前端啊。。。说不过去啊，不能因为初学者不友好就放弃一大票现有开发者使用习惯啊 |
and others
For make Ant Design Pro more flexible, we plan to start the 4th version (Why not 3, because of @chenshuai2144 don't like it).
In the long-term maintenance, we found that the biggest problem with pro is that it is not pluggable. Next, our focus will make him more flexible.
More TodoLIst:
The text was updated successfully, but these errors were encountered: