ice-lab/react-materials

:blowfish: 基于 icejs 的通用脚手架，用于快速创建项目。

飞冰官方物料

脚手架列表

NPM 包名	说明
@alifd/scaffold-simple	icejs
@icedesign/ice-antd-scaffold	icejs + Ant Design
@alifd/scaffold-lite	icejs + Fusion Design
@alifd/fusion-design-pro	icejs + Fusion Design + 大量 UI 区块
@icedesign/stark-layout-scaffold	icejs + icestark 主应用
@icedesign/stark-child-scaffold	icejs + icestark 微应用
@icedesign/scaffold-electron	icejs + Vite + Electron

快速使用

CLI

$ npm init ice ice-app

$ npm init ice ice-app --template <NPM 包名>
$ npm init ice ice-app --template @alifd/scaffold-simple

GUI

查看 Appworks 文档

react-materials's Issues

ice3-icestark-layout 中webpack错误

yarn 1.22 版
yarn 2.x 3.x 也同样运行不了

Webpack supports "data:" and "file:" URIs by default.
只能注释掉themePackage

无法编译-ice3-icestark-layout

修改 icestark demo 的 contents

stylelint 13 -> 14

new scaffold: icejs + vscode plugin

关于通用脚手架对 UI 组件耦合的讨论

通用脚手架

• icestark 主应用
• icestark 子应用
• icejs x electron
• icejs x vscode 插件
• icejs x chrome 插件
• ...

方案

• 耦合 UI 组件：无论是耦合 fusion 还是 antd，开发者初始化完成后切换组件都有成本，icestark 的脚手架目前是耦合 fusion，但相对来说 antd 的受众更广一些
• 不耦合 UI 组件：开发者需要自己引入 Layout 相关能力，存在一定的成本，可以提供个 AppWorks 插件来一键添加？

new scaffold: icejs+electron

eslint 7 -> 8

• eslint 8.0: https://eslint.org/blog/2021/06/whats-coming-in-eslint-8.0.0
• spec 需要支持下 8.0：alibaba/ice#4741

eslint如何更改对jsx文件也检测，目前只对tsx有做检查

eslint init初始化过配置，也是只对tsx有效

demo应用打开白屏

效果：

复现方式：
npm init ice icejs-electron --template @icedesign/scaffold-electron
cd icejs-electron/
tnpm start

原因分析：

process.env.IS_SERVER 一直都是字符串的'false' ， 导致直接return

表单icon错位

input框内icon组件css有问题

init项目后，npm start报错

npm install 显示成功

npm start启动失败
Error: Electron failed to install correctly, please delete node_modules/electron and try installing again

node 版本： v16.14.0

history 在 `defineAuthConfig` 里不可立即使用，模版请不要误导人

官方对于 history 的定义
https://v3.ice.work/docs/guide/basic/api#history

ice 实现的 history 在 defineAuthConfig 里不可立即使用，你模版里面写了忽悠谁哇？？？

react-materials/scaffolds/ice3-antd-pro/src/app.ts

Lines 15 to 17 in b51f743

	if (userInfo.error) {
	history?.push(`/login?redirect=${window.location.pathname}`);
	}

Pro 模板增加组件单测示例

Img组件的type=“cover“模式下，不传width和height，开发模式会报错

Img组件的type=“cover“模式下，不传width和height，开发模式会报错：
Warning: NaN is an invalid value for the width css style property.

midway-faas 模板升级 hooks 2.0

官方脚手架（模板）升级点记录

供其他自定义脚手架参考

已确定

• createApp -> runApp
• src/app.ts 里增加 IAppConfig
• src/routes 里增加 IRouteConfig
• 增加 src/typings.d.ts 文件 https://github.com/ice-lab/react-materials/blob/master/scaffolds/simple/src/typings.d.ts
• 升级 webpack 5 https://github.com/alibaba-fusion/materials/pull/99/files
• 开启 vite 模式：#179
• eslint 升级到 7.x
• react 升级 17 & use new jsx transformer #173
• antd:
  • 优化 icon 写法 https://github.com/ice-lab/react-materials/blob/master/scaffolds/ant-design-lite/src/Layouts/BasicLayout/menuConfig.ts
  • 去除 babel-plugin-import，全量引入 CSS：#191
• fusion:
  • 去除 build-plugin-fusion，全量引入 CSS：#191

FormBinder can't add a classname as a mark when the validator being return an error

When the value of the form item is validated incorrectly, the form item does not add a classname that flags the error. I think it is useful to add a classname that prompts the error. Users can use it to customize style or do other things.

I added the following line of code to my project in FormBinder and then it works. Do you think that's reasonable?

the addcode :
className:this.context.getError(name).length > 0 ? 'this-field-has-error' : '',

`
const NewFormItem = React.cloneElement(FormItem, {
[valuePropName]: (() => {
const value = this.context.getter(name);
return setFieldValue(value);
})(),

  [validateTriggerType]: () => {
    if (this.rules.length > 0) {
      console.log('....')
      this.context.validate(name, this.rules);
    }
  },
  className:this.context.getError(name).length > 0 ? 'this-field-has-error' : '',
  onChange: (...args) => {
    if (FormItemProps.onChange) {
      FormItemProps.onChange.apply(this, args);
    }

    const newValue = getFieldValue(...args);
    this.context.setter(name, newValue);

    if (validateTriggerType === 'onChange' && this.rules.length > 0) {
      this.context.validate(name, this.rules);
    }
  },
});

`