babel-plugin-weex-ui
Install
npm i babel-plugin-weex-ui -D # For babel6 npm i babel-plugin-weex-ui@0 -D
Example
Converts
to
var button =
Weex JS Theme config Example
Converts
// For developer: import and use your default theme it in your component.
to
// For user: will replace default to the theme that the user wants.
styleLibraryName Example
Converts
to
var button =
Usage
Via .babelrc
or babel-loader.
"plugins": "weex-component" options
Multiple Module
"plugins": xxx "weex-component" libraryName: "antd" style: true "antd" "weex-component" libraryName: "test-module" style: true "test-module"
Component directory structure
- packages // 'libDir'
- index.js // or custom 'root' relative path
- style.css // or custom 'style' relative path
- componentA
- index.js
- style.css
- componentB
- index.js
- style.css
Theme library directory structure
- lib
- theme-default // 'styleLibraryName'
- base.css // required
- index.css // required
- componentA.css
- componentB.css
- theme-material
- ...
- componentA
- index.js
- componentB
- index.js
or
- lib
- theme-custom // 'styleLibrary.name'
- base.css // if styleLibrary.base true
- index.css // required
- componentA.css // default
- componentB.css
- theme-material
- componentA
-index.css // styleLibrary.path [module]/index.css
- componentB
-index.css
- componentA
- index.js
- componentB
- index.js
Weex JS Theme directory structure
- root
- lib
- theme // 'themeDir'
- default // required
- index.js
- componentA.js
- componentB.js
- blue // themeConfig.name
- index.js
- componentA.js
- componentB.js
- packages
- componentA
- index.js
- componentB
- index.js
options
["component"]
: import js modularly["component", { "libraryName": "component" }]
: module name["component", { "styleLibraryName": "theme_package" }]
: style module name["component", { "styleLibraryName": "~independent_theme_package" }]
: Import a independent theme package["component", { "styleLibrary": {} }]
: Import a independent theme package with more configstyleLibrary: { "name": "xxx", // same with styleLibraryName "base": true, // if theme package has a base.css "path": "[module]/index.css", // the style path. e.g. module Alert => alert/index.css "mixin": true // if theme-package not found css file, then use [libraryName]'s css file }
["component", { "style": true }]
: import js and css from 'style.css'["component", { "style": cssFilePath }]
: import style css from filePath["component", { "libDir": "packages" }]
: lib directory["component", { "root": "index" }]
: main file dir["component", { "camel2Dash": false }]
: whether parse name to dash mode or not, defaulttrue
["component", { "jsTheme": false }]
: replace default js theme name totheme
["component", { "themeDir": "lib/theme" }]
: default js theme root path["component", { "theme": "default" }]
: Js theme name, It's valid when jsTheme istrue
["component", { "customTheme": "@/src/lib/theme" }]
: Custom js theme path, It's valid when jsTheme istrue
["component", { "themeDefault": "default" }]
: Default js theme name, default value is 'default'