umijs/umi

A framework in react community ✨

umi

A framework in react community ✨

Please consider following this project's author, sorrycc, and consider starring the project to show your ❤️ and support.

🚀 Read the launch post →

📚 Learn Umi →

Contribution

See Contributing Guide.

Core Maintainers

Core Maintainers are community members who have contributed significantly to the project through addressing issues, fixing bugs, and implementing enhancements/features.

• sorrycc
• xiaohuoni

Maintainers

Maintainers are community members who have had 10 or more PRs merged in umi or have spent a lot of time contributing to the umi community or addressing issues.

• PeachScript
• YdreamW
• yuaanlin
• fz6m
• stormslowly
• xierenyuan
• siyi98
• txp1035
• zenotsai

Contributors

Contributors are community members who have had 1 or more PRs merged in umi. If you are a contributor, you can contact me [sorrycc] to join the Contributor Group.

Community

• 交流和反馈群

LICENSE

MIT

umi's Issues

Support typescript

• af-webpack 支持 typescript 构建
• page component 支持以 .ts, .tsx 结尾的入口文件
• 声明，@zhang740

Fix occasionally Compiling... problem

Cannot customize HOST from env

umi/packages/af-webpack/src/dev.js

Line 16 in 9a8ea3f

const HOST = '0.0.0.0';

Seems that variable HOST is hard-coded here.
To my understanding, roadhog 2+ depends on this and the doc of which indicates HOST can be customized.
How about change it to:

const HOST = process.env.HOST || '0.0.0.0'

HashedModuleIdsPlugin

sorrycc/roadhog#510

umi-test jsTranformer not exported properly? (TypeError: Jest: a transform must export a `process` function.)

I get jest-runtime errors

 FAIL  src/components/Authorized/CheckPermissions.test.js
   Test suite failed to run

    TypeError: Jest: a transform must export a `process` function.

      at ScriptTransformer._getTransformer (node_modules/jest-runtime/build/script_transformer.js:152:15)
          at Generator.next (<anonymous>)

This issue doesn't exist in 0.3.0 only in 0.3.1
Please see ant-design/ant-design-pro#776 for more information

Improve router

• use react-router-dom
• support props.query
• support variable path (consider static generate)
• support global layout

More webpack configs

Todos

• sass
• enableCSSModules -> disableCSSModules
• devtool (e.g. enable sourcemap in production)

Configs don't support

• extraBabelPresets and extraBabelPlugins (use babel instead)
• multipage
• autoprefixer ( use browsers instead)
• dllPlugin
• svgSpriteLoaderDirs
• library
• libraryTarget
• cssModulesExclude

Config changes

• entry

New Configs

• babel
• copy
• commons
• browserslist
• extraResolveModules

Add monitor to track umi's version, config.js, webpack.config.js, ...

umi/Link, umi/router can't trigger state change with dva.

<Link to="xx">link</Link>

or

router.push('/path')

can change url and route to new page, but can't trigger state change in umi+dva project.

Subscription and life-circle method like componentWillReceiveProps will not run.

webpack-pwa-manifest

• https://www.npmjs.com/package/webpack-pwa-manifest
• https://developers.google.com/web/fundamentals/web-app-manifest/

Support umi dev in https

umi-test failed

Built-in antd

Support don't pack router code by config

$ ROUTER=none umi build

Emit a global event when Page Component is initialized

emit({ type: 'pageInitialized' });

<Link><FormattedMessage /></Link> doesn't work.

<Link to="/test-page" className={styles.test}>
  <FormattedMessage id="lang.message" />
</Link>

will generate the following HTML, can't click.

<span>some message</span>

<Link to="/test-page" className={styles.test}>
  <span>some message</span>
</Link>

will generate the same HTML as in (1.), it can be clicked, but with no pointer cursor.

<Link to="/test-page" className={styles.test}>
  <a><FormattedMessage id="lang.message" /></a>
</Link>

this works fine.

I think it's a bug.

Another thing, Link only accept one child, the following code will throw an exception.

<Link to='xxx'>
  <Icon class=''/> Message
</Link>

Config parameters in route '/search/person/:query/:n'

I can create page file pages/search/person.js to match /search/person.html
Can I put parameters in url?
/search/person/:query/:n

I did this before with react-rotuer:

  User: {
    path: '/user/:id',
    models: () => [import('models/user/detail')],
    component: () => import('./detail/'),
  },   

jest@22

• http://facebook.github.io/jest/blog/2017/12/18/jest-22.html

some file need babel

"node_modules/af-webpack/lib",
"node_modules/umi-build-dev"

autoprefixer： flexbox能不能自定义？

umi/packages/af-webpack/src/getConfig.js

Line 42 in 9799a86

flexbox: 'no-2009',

Support use env DISABLE_CLEAR_CONSOLE=1 to disable console clear

Built-in preact and react, react by default, and support config to use preact

Lint ts files with tslint

Use user's antd or and-mobile if it's found in user's package.json

<Link to="/" ></Link> should be jump to '/', not '.html'

Minify html with htmlnano in production mode

• https://github.com/kangax/html-minifier
• https://github.com/posthtml/htmlnano

production 模式下默认压缩 css

ant-design/ant-design-pro#313

Support config vendor

sorrycc/roadhog#370

Reconnect tip with why

Support specify plugins in dev and build

# Normal usage
$ umi build --plugins path/to/plugin.js

# Multiple plugins
$ umi build --plugins path/to/plugin1.js,path/to/plugin2.js

This will merge with plugins in config.js.

Disable @babel/register's cache

Support don't generate HTML files

$ HTML=none umi build

How to share model's data between pages in umi + dva-no-router.

I am refactoring my project using umi.
As shown In this example https://github.com/umijs/umi/tree/master/examples/with-dva

Each page has a new instance of dva, Is this the right way to use dva in umi?
If so, models can't share it's data between pages. but I want to share data just like before in dva with react-router@4.

What's the best way to use dva-no-router in umi?

umi roadmap

1.0

• PWA
• Improve router, #26
• website
• Comb configuration items

1.x

• Improve lighthouse score
• Plugin system
• umi-plugin-dva

Live theme support hmr

• https://github.com/yesmeck/webpack-less-theme-plugin
• https://github.com/mzohaibqc/antd-live-theme
• https://github.com/mzohaibqc/antd-theme-webpack-plugin

routerBase is wrong when have directory page component

Generate css for every single page

Support use config.pagesGlobPattern to find page files

Improve umi/dynamic, support config loading component

umi/dynamic 改进

原来的方式：

dynamic(resolve);

支持传入 loading 组件：

dynamic(resolve, {
  loading,
});

支持配置 page 加载时的 LoadingComponent

在 config.js 中，配置 loading 指向返回 LoadComponent 的文件。

{
  "loading": "./PageLoadingComponent"
}

use `.${libraryName}-${env}` as tmp directory

Two problems:

1. window has permission problem when a folder was used by multiple process
2. dev will show "white screen" when build in run

Support hd solution with `hd: true`

• hd.js
• antd-mobile config, ref
• pxtorem

Improve eslint

• print error when .eslintrc JSON parse failed
• reload dev server when .eslintrc is modified

define属性指定process.env.contextPath问题

"define": { "process.env.contextPath": process.env.contextPath, }

这样定义出错，请问这样的方式怎样指定process.env中的值？

af-webpack的readme文档文案错误

在项目中的文件路径：umi/packages/af-webpack/
文案定位： API - af-webpack/dev - Options 第四条 beforeServer 应为 afterServer

Support config disableDynamicImport

ant-design/ant-design-pro#470

Watch webpack.config.js's change, and reload webpack

Support disable dynamic load

Internal requirement, not recommend, don't use it.

$ PRIVATE_DISABLE_DYNAMIC=1 umi build

Multiple language, support en and zh-cn

• Default en
• Use other lang with ENV variable, e.g. UMI_LANG=zh-cn umi dev

umi-test with jest

Sourcemap don't work perfectly, jsx transform is not restored