alibaba / ice

🚀 ice.js: The Progressive App Framework Based On React（基于 React 的渐进式应用框架）

ice.js

A universal framework based on React.js, 📚 Docs.

Features

• 🐒 Zero Config: Out of the box support for ES6+, TypeScript, Less, Sass, CSS Modules，etc
• 🐯 Practice: Practice about file-system routing, state Management, request, etc
• 🦁 Hybrid: pre-render pages at build time (SSG) or request time (SSR) for default
• 🐌 Plugin system: The plugin system provides rich features and allow the community to build reusable solutions
• 🐂 Multi-End: Support both web, miniapp and Weex

Quick start

We recommend creating a new ice.js app using create-ice, which sets up everything automatically for you. To create a project, run:

$ npm init ice ice-app --template @ice/lite-scaffold

npm init <initializer> is available in npm 6+

Start local server to launch project:

$ cd ice-app
$ npm install
$ npm run start # running on http://localhost:3000.

It's as simple as that!

Contributing

Please see our CONTRIBUTING.md

Contributors

Contributors can contact us to join the Contributor Group.

Community

• Issues
• Gitter

LICENSE

MIT

ice's Issues

默认的项目里的 html 页面可以参照这个加一些标签

https://frontendchecklist.io/

项目模板里的 html 很可能会被拿出来直接放在线上用，可以扩展一些常见标签等。

请问和ant-design最大的区别在哪？

如题，如果我选择，为什么不选择antd和antd-pro系列呢？

“新建页面”后立即“移除项目”导致项目状态显示异常

运行版本： 0.1.3

重现步骤：

1. 找到一个未启动调试的项目
2. 点击“新建页面“
3. 返回项目列表，此时显示“调试服务启动中 {百分比}%“
4. 点击”移除项目“
5. 点击”打开项目“，重新打开刚才的项目
6. 项目状态显示为“未启动调试服务”

问题描述：

• 刷新界面，本地服务仍然有效
• 点击“启动调试服务”没有反应
• 点击“新建页面”后返回项目列表，显示“未启动调试服务 {百分比}%”
• 退出程序时提示“Iceworks quit unexpectedly.”

问题分析：

• 点击“新建页面”后，会自动启动调试服务
• 启动调试服务需要一定时间
• 在启动结束前“移除项目”，没有终止启动操作
• 重新打开项目时，状态被重置，导致无法结束调试服务

站点问题反馈

Button 按钮

IceIcon 业务组件图标

IceImg 图片组件

IceLabel 标签组件

IceLayout 页面布局

* demo 排版混乱

Calendar 日历

IceFormBinder ICE 表单粘合剂

• 图片没有自适应
• demo 示例背景需要优化

Tab 选项卡

* tab 高度过高
* 排版混乱

Table 表格

• demo 排版混乱
• table 高度过高
  

IcePanel 面板组件

* demo 示例没出来

Overlay 弹层

查看源码 默认隐藏

模板选择引导，lite 与 pro 的区别。

• lite 是简单的模块，页面较少，配置少。
  • 需要添加页面
• pro 提供丰富的区块组合，多页面展示。
  • 使用上需要删除更多的内容

目前用户无法感知到两者的差异

点击启动调试服务报错

步骤一 在编辑器中输入以下指令，项目服务启动成功。

npm rebuild node-sass # success
npm run start # success

步骤二 尝试在Iceworks中选择页面模版，进入模版页面直接报错，提示说node环境存在指定问题，需要执行npm rebuild node-sass --force。

步骤三 停止编辑器中正在运行的服务，执行npm rebuild node-sass --force，命令执行失败。

步骤四 到Iceworks启动调试服务，直接报错，提示说node环境存在指定问题，需要执行npm rebuild node-sass --force，错误提示和步骤二一样。

总结&&疑惑

Iceworks项目是不能在命令行中执行服务吗，必须要使用Iceworks默认调试启动吗？

不支持vue么

[小建议] iceworks 侧边栏的 icon 可以添加 active 状态，和 hover 时候的效果类似

如图所示，当前我是在 项目 部分的，侧边栏的 item 没有 active 状态

hover 时候的状态

如何和服务端进行交互？

请问如何从服务端的api中获取数据更新数据？
我只看见了mock文件夹下的模拟数据，希望能介绍一下，教程里也没看见怎么操作

手机适应性问题。

能不能把高度自适应屏加入判断？让移动终端打开起码不丑。

登录页-物料归类错误

物料中，登录页被归类到“表单”这个分类中。

“登录页”这个分类下不应该是个banner

feature request for scafford

1. media query
2. service worker usage example (networkless cache
3. manifest.json

在预览物料时，出现：抱歉, 编译错误： @icedesign/application-progress-block/src/index.js

具体错误信息：抱歉, 编译错误: @icedesign/application-progress-block/src/index.js, 麻烦提交 issue 等待修复（预览进度条指向51%）
出现错误的URL：https://alibaba.github.io/ice/#/block/584/preview

ice-design-pro 代码更新完了，但是在客户端中创建仍然是老版本

github 已经更新完了，但线上站点和客户端生成时候还是老版本的。需要处理。

iceworks在mac下全屏使用时的疑似bug

具体有两个问题

1、全屏后，鼠标到顶部唤出标题栏的样式是透明的，感觉很怪，但可以理解为就是这么设计的；
2、在全屏模式唤出标题栏关闭软件时，程序没有完全退出，而是黑色背景。需要在dock中退出程序才行。

操作系统版本：10.13.3
机器为：2017版 macbook pro 13

user-login组件

组件中的记住账号的勾选框勾选后，勾选的icon出现在了框外的“记”字上，本地创建的页面和官网的预览页面都出现了同样的结果。

ice-design-pro problem record

1. 查看帮助的链接是 icedesign 介绍, 认为不妥
2. ☆ 首页, landingpage, dashboard 之间的关系确认, 目前顶部导航的首页去往landing, 左侧导航的首页去往dashboard
3. 把小的ICE改成Pro试试
4. 顶部导航的反馈, 去往 github issue 比较合适
5. ☆ public/index.html 的标题错误
6. block 中的 console.log 和报错(包括Warning, 需要统一检查)
7. 左侧导航图标

请求发布linux版本

意外退出

iceworks 问题反馈

• 预览页面之后，并没有创建页面，会将选择的区块的 mock 文件都同步到项目里，这是多余的
• iceworks 生成路由
  • 需要支持二级路由，类似 user/list
  • 需要支持可填写菜单名
• 需要支持二次选择区块到指定的项目页面

  场景：假设用户选择了一些区块，然后生成页面，在实际开发中，可能需要增加另外区块到该页面，现在的做法只能是手动清除，然后在重新生成一遍

• 考虑支持删除创建但未做过更改的页面

  场景: 假设用户选择了一些区块，然后生成页面，发现区块有一个区块不对，需要增加新的区块来替代，如何处理

npm run lint 的 error

通过 iceworks 新建的页面

npm run lint 的 error

components/FilterList/SingleItem/SingleItem.jsx
  5:16  error  Component should be written as a pure function  react/prefer-stateless-function

components/BrandDisplay/BrandDisplay.jsx
  42:16  error  Component should be written as a pure function  react/prefer-stateless-function

not support react-redux redux?

创建项目到 99 时，安装依赖出现问题并报错

安装依赖项目时报错 win10 64位系统

npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated @types/[email protected]: This is a stub types definition for commander (https://github.com/tj/commander.js). commander provides its own type definitions, so you don't need @types/commander installed!
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN

[email protected] install D:\icestudy\node_modules\node-sass
node scripts/install.js

lifecycle npm is using C:\Users\xfsui\AppData\Local\Programs\Iceworks\Iceworks.exe but there is no node binary in the current PATH. Use the --scripts-prepend-node-path option to include the path for the node binary npm was executed with.
'node' �����ڲ����ⲿ���Ҳ���ǿ����еij���

���������ļ���

npm WARN [email protected] requires a peer of react-dom@^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^0.14.0 || ^15.0.0 || ^16.0.0-beta || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @icedesign/[email protected] No repository field.
npm WARN @icedesign/[email protected] No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: node scripts/install.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xfsui\AppData\Roaming\npm-cache_logs\2018-02-22T02_00_25_651Z-debug.log

Module parse failed: Unexpected character '�' (1:0)

import img from 'xxx.png';

Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

ERR! code ELIFECYCLE

[2018-02-11 11:37:25.160] [debug] npm WARN deprecated
[2018-02-11 11:37:25.160] [debug] [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
[2018-02-11 11:37:30.433] [debug] npm WARN deprecated
[2018-02-11 11:37:30.434] [debug] [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
[2018-02-11 11:37:32.168] [debug] npm
[2018-02-11 11:37:32.171] [debug] WARN
[2018-02-11 11:37:32.171] [debug] deprecated @types/[email protected]: This is a stub types definition for commander (https://github.com/tj/commander.js). commander provides its own type definitions, so you don't need @types/commander installed!
[2018-02-11 11:37:35.282] [debug] npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
[2018-02-11 11:37:39.139] [debug] npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
[2018-02-11 11:37:39.573] [debug] npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
[2018-02-11 11:41:00.369] [debug] npm
[2018-02-11 11:41:00.374] [debug] > [email protected] install D:\teststudy\node_modules\node-sass

node scripts/install.js
[2018-02-11 11:41:00.375] [debug] WARN lifecycle npm is using C:\Users\xfsui\AppData\Local\Programs\Iceworks\Iceworks.exe but there is no node binary in the current PATH. Use the --scripts-prepend-node-path option to include the path for the node binary npm was executed with.
[2018-02-11 11:41:00.523] [debug] 'node' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
[2018-02-11 11:41:04.219] [debug] npm WARN [email protected] requires a peer of react-dom@^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm
[2018-02-11 11:41:04.219] [debug] WARN [email protected] requires a peer of react@^15.0.0 || ^0.14.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^0.14.0 || ^15.0.0 || ^16.0.0-beta || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @icedesign/[email protected] No repository field.
npm WARN @icedesign/[email protected] No license field.
[2018-02-11 11:41:04.220] [debug] npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
[2018-02-11 11:41:04.220] [debug]
[2018-02-11 11:41:04.231] [debug] npm
[2018-02-11 11:41:04.232] [debug] ERR! code ELIFECYCLE
[2018-02-11 11:41:04.232] [debug] npm ERR! errno 1
[2018-02-11 11:41:04.232] [debug] npm ERR! [email protected] install: node scripts/install.js
npm ERR! Exit status 1
[2018-02-11 11:41:04.232] [debug] npm ERR!
npm
[2018-02-11 11:41:04.233] [debug] ERR! Failed at the [email protected] install script.
npm ERR!
[2018-02-11 11:41:04.233] [debug] This is probably not a problem with npm. There is likely additional logging output above.
[2018-02-11 11:46:05.971] [debug]
[2018-02-11 11:46:05.978] [debug] npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xfsui\AppData\Roaming\npm-cache_logs\2018-02-11T03_41_04_275Z-debug.log

日期显示问题

今天是10号，默认是10，但是当点击别的日期之后，10就无法显示。应该是样式的问题。

点击"新建页面"后重新生成已手动删除的代码

运行版本：0.1.3

使用场景：

• 想删除之前生成的页面。

重现步骤：

1. 点击“新建页面” --> “生成界面”，命名为“Test”
2. 手动删除 pages/Test 文件夹
3. 手动删除 routes.jsx 中生成的代码
4. 重新点击“新建界面”

问题描述：

• routes.jsx 中 “Test” 的代码又重新生成了：

...
import Test from './pages/Test';
const autoGeneratedRoutes = [
  {
    path: '/test',
    ...
  }
];

 后来发现，删除 generator.json 中的 routes 信息是正解，但是这样并不会自动删除 pages/Test 文件夹，还有 navs.js 里的 autoGenAsideNavs。

设置中编辑器名称拼写错误

Visual Studio Code 拼写错误，见下图：

预览服务hang

点击“预览页面”后，弹出框中一直是“预览服务启动中”
退出后，项目一直处在“调试服务启动中”的状态
osx

can't open the link

http://gitlab.alibaba-inc.com/ice/notes/issues/480

内部链接？

添加删除项目所在目前的功能

目前在 iceworks 里删除项目只是删除记录，不删除真实项目目录，需要这个功能的可以 +1，不需要可以 -1

mac下点击启动状态一直为调试服务启动中

提示我4444端口被占用，我lsof -i:4444看了一下，并没有占用，之后一直启动不了

visual studio code不是visual stadio code吧？

新建页面退出提示app unhandled rejection at

进入创建页面无返回按钮点击项目返回项目列表，提示是否离开ok之后出现上图提示

mac 新建项目长时间无响应（无完成状态）

1. mac 新建项目长时间无响应（无完成状态），手动切换 设置 - 项目 后，项目不见了，手动打开项目才可以;
2. 试用了几个，的确挺方便的，果然是0配置，配上 eggjs 食用更佳。那么，公测结束未来是开源还是付费道路呢。

windows 版本点击关闭，在有任务运行中给与提示。

只能通过 ice work 启动吗?

只能通过 ice work 启动吗?
我看见在 package.json 里面的 start 命令是 ice start, 但本地并没有 ice 命令. 可以通过命令行启动吗?

好像只有 mac 和 win 版本的 gui. 这样对于 使用ubuntu的用户就不能使用了吗? ╮(╯_╰)╭

Cursor out of focus when modify the block filename

问题

在修改 block 文件名的时候，每删除一个字母鼠标光标就是去了焦点，如图：

环境

系统版本：macOS 10.13.2 (17C88)
node 版本：v8.9.3

创建项目

windows下

1. 创建项目时点击设置，在点回项目，没有看见创建的项目，需要点击打开项目才能导入....
2. 安装中的项目启动其他服务会报错，感觉可以安装完成之前禁用....

feature request for ice-script

• configurable (pr #38)
• support hot module replacement (config to enable)
• dist dir default to /build/ 调研了下, 遵循社区习惯
• compiling speed optimization: 尽可能的开启缓存
  • happypack?
  • babel-loader. cacheDirectory
• webpack define plugin support for process.env
• enable tree shaking (config resolve.mainFields)
• support css modules
• visualized module analyzer: webpack-bundle-analyzer #49

自动刷新 vs 模块热更新：
实时预览反应更快，等待时间更短
不刷新浏览器能保留当前网页的运行状态

New Requirements

Is there a plan for adding some basic material, like button, select, list etc, so that i can add some basic tools by myself.
And Is there a document for how to add my own template, or items?
Thanks

support other ide

webstorm
atom
or custom bin
...

浏览器兼容问题

在windows10系统下

1.使用火狐浏览器56.0.2访问预览页面https://alibaba.github.io/ice/#/block/signup-form/preview 时出现错误

页面提示
抱歉, 编译错误: @icedesign/signup-form-block/src/index.js, 麻烦提交 issue 等待修复

按下f12后浏览器提示
Unhandled promise rejection Object { __promise_pendings: Array[0], __promise_progress_listeners: Array[0], __promise_status: "Pending", defer: Object, userConfig: Object, responseData: null, config: Object, timeoutTimer: null, responseText: "", responseXML: null, 等 9 项… } polyfill.min.js:2:27238

2.使用IE11浏览器访问预览页面https://alibaba.github.io/ice/ice-design-pro.html#/ 时出现错误

页面空白，没有任何显示

按下f12后浏览器提示
The above error occurred in the component:
in ProgressTable (created by Dashboard)
in div (created by Dashboard)
in Dashboard (created by RouterContext)
in div (created by IceLayoutMain)
in IceLayoutMain
in div (created by IceLayoutSection)
in IceLayoutSection
in div (created by IceLayoutLayout)
in IceLayoutLayout
in Unknown (created by RouterContext)
in RouterContext (created by Router)
in Router

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

SCRIPT438: 对象不支持“from”属性或方法
index.js (56,23695)

SCRIPT5022: undefined
npm (13220,7)

希望能够修复这些浏览器兼容问题，让本项目能在各个浏览器环境中顺利运行

无法找到Sublime Text编辑器

设置Sublime Text后，打开编辑，error，无法找到编辑器，即使有Sublime Text。另外希望尽快测试webstorm编辑器，习惯了jetbrains家族的东东。

change layout name

AsideLayout 侧边布局
BasicLayout 居中布局
LandingLayout 通栏布局
ScalableAsideLayout 通栏侧边布局

布局类通用的特征: 一定有内容区域, 是否有顶栏(Header), 侧边(Aside)栏, 侧边栏位置(左右), 是否有(Footer)底栏, 是否固定页宽(通栏)

建议的命名规则, 对于可选择部分, 出现表示有, 用-分隔, 每一个可选部分之前可以有相关修饰词, 如固定(Fixed)

顶栏-侧栏-底栏-响应式布局

HeaderAsideFooterResponsiveLayout

AsideLayout 侧边布局 HeaderAsideFooterLayout 顶栏-侧栏-底栏-布局
HeaderLayout 居中布局 HeaderFooterLayout 顶栏-底栏-布局
LandingLayout 通栏布局 FixedHeaderFooterResponsiveLayout 固定顶栏-底栏响应式布局
ScalableAsideLayout 通栏侧边布局 HeaderAsideFooterResponsiveLayout 顶栏-侧栏-底栏-响应式布局

cc @noyobo @yujiangshui

启动后电脑卡死

启动调试后电脑非常热，过了一会就死机了

创建项目失败

依赖添加失败

npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated @types/[email protected]: This is a stub types definition for commander (https://github.com/tj/commander.js). commander provides its own type definitions, so you don't need @types/commander installed!
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN

[email protected] install G:\ice\blue\node_modules\node-sass
node scripts/install.js

lifecycle npm is using C:\Users\qewli12\AppData\Local\Programs\Iceworks\Iceworks.exe but there is no node binary in the current PATH. Use the --scripts-prepend-node-path option to include the path for the node binary npm was executed with.
'node' �����ڲ����ⲿ���Ҳ���ǿ����еij���

���������ļ���

npm WARN [email protected] requires a peer of react-dom@^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^15.0.0 || ^0.14.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@^0.14.0 || ^15.0.0 || ^16.0.0-beta || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @icedesign/[email protected] No repository field.
npm WARN @icedesign/[email protected] No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: node scripts/install.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\qewli12\AppData\Roaming\npm-cache_logs\2018-02-12T06_55_52_849Z-debug.log

如果使用 registry.npmjs.org 返回 403 forbidden

因为使用了npm 的私有库. 只能用registry.npmjs.org

但安装失败..返回

npm ERR! 403 Forbidden: @icedesign/img@^0.1.0

创建项目页面

1 页面布局建议

建议创建项目按钮在小屏情况下，可以使用居中对齐，但是在渲染进程全屏情况下，或者按钮的计算出来的宽度超过了步骤盒子(创建项目的三个步骤所在的盒子)，这个时候希望创建项目按钮能够和步骤盒子左对齐。

2 页面按键注册

希望在创建项目这个页面默认注册一个按键行为，点击Enter键就直接触发了创建项目事件。