From 00cd0a916263df81dda00e9fd9e4a2e9276af1e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=83=E5=BD=A6?= Date: Thu, 14 Mar 2019 14:47:28 +0800 Subject: [PATCH 01/19] feat: export compat entry --- README.md | 4 ++-- packages/rax/package.json | 6 +++++- packages/rax/src/compat/index.js | 5 +++++ packages/rax/src/index.js | 31 +++++++++++-------------------- scripts/dist-core.js | 26 +++++++++++++------------- 5 files changed, 36 insertions(+), 36 deletions(-) create mode 100644 packages/rax/src/compat/index.js diff --git a/README.md b/README.md index 636bed302b..ce5dbd2007 100644 --- a/README.md +++ b/README.md @@ -149,7 +149,7 @@ $ npm run start ## Guides -### Server-side render and hydration +### Server-side rendering and hydration Use `renderToString()` to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes. @@ -362,7 +362,7 @@ Add an alias for `react` and `react-dom` in webpack config that makes React-base // ... resolve: { alias: { - 'react': 'rax', + 'react': 'rax/lib/compat', 'react-dom': 'rax-dom' } } diff --git a/packages/rax/package.json b/packages/rax/package.json index d2350f14e7..03fc687e15 100644 --- a/packages/rax/package.json +++ b/packages/rax/package.json @@ -17,7 +17,11 @@ }, "dependencies": { "driver-server": "^1.0.0", - "@babel/runtime": "^7.2.0" + "@babel/runtime": "^7.2.0", + "rax-is-valid-element": "^1.0.0", + "rax-clone-element": "^1.0.0", + "rax-children": "^1.0.0", + "rax-create-factory": "^1.0.0" }, "devDependencies": { "rax-proptypes": "^1.0.0" diff --git a/packages/rax/src/compat/index.js b/packages/rax/src/compat/index.js new file mode 100644 index 0000000000..ebbc42b7b2 --- /dev/null +++ b/packages/rax/src/compat/index.js @@ -0,0 +1,5 @@ +export * from '../index'; +export Children from 'rax-children'; +export isValidElement from 'rax-is-valid-element'; +export createFactory from 'rax-create-factory'; +export cloneElement from 'rax-clone-element'; \ No newline at end of file diff --git a/packages/rax/src/index.js b/packages/rax/src/index.js index a06c79f689..ef903b8865 100644 --- a/packages/rax/src/index.js +++ b/packages/rax/src/index.js @@ -1,30 +1,21 @@ -import createElement from './createElement'; -import createContext from './createContext'; -import createRef from './createRef'; -import {useState, useContext, useEffect, useLayoutEffect, useRef, useCallback, useMemo, useReducer, useImperativeHandle} from './hooks'; -import memo from './memo'; -import Fragment from './fragment'; -import render from './render'; -import Component, { PureComponent } from './vdom/component'; -import version from './version'; +export createElement from './createElement'; +export createContext from './createContext'; +export createRef from './createRef'; +export {useState, useContext, useEffect, useLayoutEffect, useRef, useCallback, useMemo, useReducer, useImperativeHandle} from './hooks'; +export memo from './memo'; +export Fragment from './fragment'; +export render from './render'; +export Component, { PureComponent } from './vdom/component'; +export version from './version'; + import Host from './vdom/host'; import Instance from './vdom/instance'; import Element from './vdom/element'; import flattenChildren from './vdom/flattenChildren'; -const shared = { +export const shared = { Host, Instance, Element, flattenChildren }; - -export { - createElement, createRef, createContext, - useState, useContext, useEffect, useLayoutEffect, useRef, useCallback, useMemo, useReducer, useImperativeHandle, - Component, PureComponent, - Fragment, memo, - render, - version, - shared -}; diff --git a/scripts/dist-core.js b/scripts/dist-core.js index 48c91e6ee3..9485e84090 100755 --- a/scripts/dist-core.js +++ b/scripts/dist-core.js @@ -5,7 +5,7 @@ const uglify = require('rollup-plugin-uglify').uglify; const replace = require('rollup-plugin-replace'); const gzipSize = require('gzip-size'); -async function build(packageName, { name, shouldMinify = false, format = 'umd' }) { +async function build({ package: packageName, entry = 'src/index.js', name, shouldMinify = false, format = 'umd' }) { const output = { name, exports: 'named', @@ -14,7 +14,7 @@ async function build(packageName, { name, shouldMinify = false, format = 'umd' } // For development const bundle = await rollup.rollup({ - input: './packages/' + packageName + '/src/index.js', + input: `./packages/${packageName}/${entry}`, plugins: [ resolve(), babel({ @@ -66,17 +66,17 @@ async function build(packageName, { name, shouldMinify = false, format = 'umd' } } } -build('rax', { name: 'Rax' }); -build('rax', { name: 'Rax', format: 'esm' }); -build('rax', { name: 'Rax', shouldMinify: true }); +build({ package: 'rax', name: 'Rax' }); +build({ package: 'rax', name: 'Rax', format: 'esm' }); +build({ package: 'rax', name: 'Rax', shouldMinify: true }); -build('driver-dom', { name: 'DriverDOM' }); -build('driver-dom', { name: 'DriverDOM', format: 'esm' }); -build('driver-dom', { name: 'DriverDOM', shouldMinify: true }); +build({ package: 'driver-dom', name: 'DriverDOM' }); +build({ package: 'driver-dom', name: 'DriverDOM', format: 'esm' }); +build({ package: 'driver-dom', name: 'DriverDOM', shouldMinify: true }); -build('driver-worker', { name: 'DriverWorker' }); -build('driver-worker', { name: 'DriverWorker', format: 'esm' }); -build('driver-worker', { name: 'DriverWorker', shouldMinify: true }); +build({ package: 'driver-worker', name: 'DriverWorker' }); +build({ package: 'driver-worker', name: 'DriverWorker', format: 'esm' }); +build({ package: 'driver-worker', name: 'DriverWorker', shouldMinify: true }); -build('rax-miniapp-renderer', { format: 'cjs' }); -build('rax-miniapp-renderer', { format: 'cjs', shouldMinify: true }); +build({ package: 'rax-miniapp-renderer', format: 'cjs' }); +build({ package: 'rax-miniapp-renderer', format: 'cjs', shouldMinify: true }); From e8cb0afda25f41c21ed4516c50986f1489a9d404 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B0=B4=E6=BE=9C?= Date: Thu, 14 Mar 2019 23:48:12 +0800 Subject: [PATCH 02/19] fix: plugin configuration error --- .../rax-scripts/src/config/miniprogram/webpack.config.dev.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rax-scripts/src/config/miniprogram/webpack.config.dev.js b/packages/rax-scripts/src/config/miniprogram/webpack.config.dev.js index 38aafa7bc9..24cda8c305 100644 --- a/packages/rax-scripts/src/config/miniprogram/webpack.config.dev.js +++ b/packages/rax-scripts/src/config/miniprogram/webpack.config.dev.js @@ -20,7 +20,7 @@ const webpackConfigDev = webpackMerge(webpackConfigBase, { plugins: [ new webpack.NoEmitOnErrorsPlugin(), process.env.ANALYZER ? new BundleAnalyzerPlugin() : null, - ], + ].filter(Boolean), }); module.exports = webpackConfigDev; From 3392831f57fbb1769fa7001f09ffd9f7f0bc06ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B0=B4=E6=BE=9C?= Date: Thu, 14 Mar 2019 23:49:06 +0800 Subject: [PATCH 03/19] chore: update version --- packages/rax-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rax-scripts/package.json b/packages/rax-scripts/package.json index 2458100d4d..0b7229420f 100644 --- a/packages/rax-scripts/package.json +++ b/packages/rax-scripts/package.json @@ -1,6 +1,6 @@ { "name": "rax-scripts", - "version": "1.0.0", + "version": "1.0.1", "license": "BSD-3-Clause", "description": "Configuration and scripts for Rax App.", "bin": { From fcded7d039543ed9961c8681472485429167c90f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B0=B4=E6=BE=9C?= Date: Fri, 15 Mar 2019 14:57:52 +0800 Subject: [PATCH 04/19] fix: git hooks is overwrited --- packages/rax-scripts/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/rax-scripts/package.json b/packages/rax-scripts/package.json index 0b7229420f..4c23667e59 100644 --- a/packages/rax-scripts/package.json +++ b/packages/rax-scripts/package.json @@ -48,7 +48,6 @@ "css-loader": "^2.1.0", "decamelize": "^2.0.0", "file-loader": "^2.0.0", - "ghooks": "^2.0.4", "glob": "^7.1.3", "html-webpack-plugin": "^3.2.0", "image-source-loader": "^0.6.5", From 32e0f4601a8802ba59f578d1b51b90c1ad9d3f1b Mon Sep 17 00:00:00 2001 From: Dong Yuwei Date: Sat, 16 Mar 2019 13:14:57 +0800 Subject: [PATCH 05/19] fix broken link to `browser driver` --- docs/en-US/driver-spec.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en-US/driver-spec.md b/docs/en-US/driver-spec.md index f6ae4c8b27..2e13ed409c 100644 --- a/docs/en-US/driver-spec.md +++ b/docs/en-US/driver-spec.md @@ -1,7 +1,7 @@ # Driver Spec `1.0` Driver is the key concept that make the application cross-container running. -Rax have been implemented [browser driver](../../packages/driver-browser/src/index.js), [server driver](../../packages/driver-server/src/index.js) and [weex driver](../../packages/driver-weex/src/index.js). +Rax have been implemented [dom driver](../../packages/driver-dom/src/index.js), [server driver](../../packages/driver-server/src/index.js) and [weex driver](../../packages/driver-weex/src/index.js). If want Rax works on other container, only need implement the driver specification. The driver should implement follow method: From b09ddae9e3321e2ca0438375873a7b2fe6a172ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=93=E5=87=8C?= Date: Mon, 18 Mar 2019 15:26:08 +0800 Subject: [PATCH 06/19] refactor: optimize text listener --- .../atag/src/components/text/__tests__/1000.html | 12 ++++++++++++ packages/atag/src/components/text/index.js | 9 +++++++-- 2 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 packages/atag/src/components/text/__tests__/1000.html diff --git a/packages/atag/src/components/text/__tests__/1000.html b/packages/atag/src/components/text/__tests__/1000.html new file mode 100644 index 0000000000..be6e55cefc --- /dev/null +++ b/packages/atag/src/components/text/__tests__/1000.html @@ -0,0 +1,12 @@ + diff --git a/packages/atag/src/components/text/index.js b/packages/atag/src/components/text/index.js index 67b7b8a645..cf18bc6506 100644 --- a/packages/atag/src/components/text/index.js +++ b/packages/atag/src/components/text/index.js @@ -1,4 +1,5 @@ import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer'; +import { afterNextRender } from '@polymer/polymer/lib/utils/render-status'; import debounce from '../../shared/debounce'; const style = document.createElement('style'); @@ -64,7 +65,9 @@ export default class TextElement extends HTMLElement { } connectedCallback() { - this.childrenObserver = new FlattenedNodesObserver(this, this._observeChildren); + afterNextRender(this, () => { + this.childrenObserver = new FlattenedNodesObserver(this, this._observeChildren); + }); if (this.childNodes.length > 0) { const space = this.space; @@ -77,7 +80,9 @@ export default class TextElement extends HTMLElement { } disconnectedCallback() { - this.childrenObserver.disconnect(); + afterNextRender(this, () => { + this.childrenObserver.disconnect(); + }); } _observeChildren({ addedNodes, target }) { From 838bf6a3ca6d56b67c8bb5498a679953055cf260 Mon Sep 17 00:00:00 2001 From: ZeroLing Date: Mon, 18 Mar 2019 16:26:27 +0800 Subject: [PATCH 07/19] feat: relative path (#982) --- .../container/__tests__/resolvePathname.js | 83 +++++++++++++++++++ .../src/container/index.js | 25 ++++-- .../src/container/resolve-pathname.js | 66 +++++++++++++++ 3 files changed, 167 insertions(+), 7 deletions(-) create mode 100644 packages/miniapp-framework-web/src/container/__tests__/resolvePathname.js create mode 100644 packages/miniapp-framework-web/src/container/resolve-pathname.js diff --git a/packages/miniapp-framework-web/src/container/__tests__/resolvePathname.js b/packages/miniapp-framework-web/src/container/__tests__/resolvePathname.js new file mode 100644 index 0000000000..cb03493ed6 --- /dev/null +++ b/packages/miniapp-framework-web/src/container/__tests__/resolvePathname.js @@ -0,0 +1,83 @@ +import resolvePathname from '../resolve-pathname'; + +describe('resolvePathname', () => { + describe('from a file path', () => { + const from = '/public/index.html'; + + it('should resolve abs path', () => { + const to = '/abs.js'; + const result = resolvePathname(to, from); + expect(result).toEqual('/abs.js'); + }); + + it('should resolve relative path #1', () => { + const to = 'app.js'; + const result = resolvePathname(to, from); + expect(result).toEqual('/public/app.js'); + }); + + it('should resolve relative path #2', () => { + const to = './app.js'; + const result = resolvePathname(to, from); + expect(result).toEqual('/public/app.js'); + }); + + it('should resolve relative path #3', () => { + const to = '../app.js'; + const result = resolvePathname(to, from); + expect(result).toEqual('/app.js'); + }); + + it('should resolve relative path #4', () => { + const to = 'foo/app.js'; + const result = resolvePathname(to, from); + expect(result).toEqual('/public/foo/app.js'); + }); + + it('should resolve wiered path', () => { + const to = '.././foo/../bar/./app.js'; + const result = resolvePathname(to, from); + expect(result).toEqual('/bar/app.js'); + }); + }); + + describe('from a directory path', () => { + const from = '/public/'; + + it('should resolve abs path', () => { + const to = '/abs.js'; + const result = resolvePathname(to, from); + expect(result).toEqual('/abs.js'); + }); + + it('should resolve relative path #1', () => { + const to = 'app.js'; + const result = resolvePathname(to, from); + expect(result).toEqual('/public/app.js'); + }); + + it('should resolve relative path #2', () => { + const to = './app.js'; + const result = resolvePathname(to, from); + expect(result).toEqual('/public/app.js'); + }); + + it('should resolve relative path #3', () => { + const to = '../app.js'; + const result = resolvePathname(to, from); + expect(result).toEqual('/app.js'); + }); + + it('should resolve relative path #4', () => { + const to = 'foo/app.js'; + const result = resolvePathname(to, from); + expect(result).toEqual('/public/foo/app.js'); + }); + + it('should resolve wiered path', () => { + const to = '.././foo/../bar/./app.js'; + const result = resolvePathname(to, from); + expect(result).toEqual('/bar/app.js'); + }); + }); +}); diff --git a/packages/miniapp-framework-web/src/container/index.js b/packages/miniapp-framework-web/src/container/index.js index 175b314e3e..9f05c150c3 100644 --- a/packages/miniapp-framework-web/src/container/index.js +++ b/packages/miniapp-framework-web/src/container/index.js @@ -1,5 +1,6 @@ import spawnWorker from 'worker-loader?inline&fallback=false!babel-loader!../worker'; import MessageRouter from './MessageRouter'; +import resolvePathname from './resolve-pathname'; import my from './my'; const hasOwn = {}.hasOwnProperty; @@ -57,16 +58,26 @@ function getAssetUrl(appConfig) { } const url = appConfig[ASSET_KEY]; - return /^https?:\/\//.test(url) ? url : normalizeURL(url); + return normalizePathToURL(url); } /** - * Normalize reletive url by location - * @param url {String} Original URL. + * Normalize asset path to absolute url. + * eg: 1. relative path like `app.js` or `../app.js` or `path/to/app.js` + * 2. absolute path like `/app.js` + * 3. cross origin path like `https://path.to/app.js` + * @param path {String} Original path. * @return {String} Normalized URL. */ -function normalizeURL(url) { - let h5AssetsAbsoluteUrl = new URL(location.origin); - h5AssetsAbsoluteUrl.pathname = url; - return h5AssetsAbsoluteUrl.toString(); +function normalizePathToURL(path) { + if (isRemoteOriginPath(path)) { + return path; + } else { + return location.origin + resolvePathname(path, location.pathname); + } +} + +const REMOTE_ORIGIN_RE = /^https?:\/\//; +function isRemoteOriginPath(path) { + return REMOTE_ORIGIN_RE.test(path); } diff --git a/packages/miniapp-framework-web/src/container/resolve-pathname.js b/packages/miniapp-framework-web/src/container/resolve-pathname.js new file mode 100644 index 0000000000..e3d0cb6ade --- /dev/null +++ b/packages/miniapp-framework-web/src/container/resolve-pathname.js @@ -0,0 +1,66 @@ +function isAbsolute(pathname) { + return pathname.charAt(0) === '/'; +} + +// About 1.5x faster than the two-arg version of Array#splice() +function spliceOne(list, index) { + for (let i = index, k = i + 1, n = list.length; k < n; i += 1, k += 1) { + list[i] = list[k]; + } + list.pop(); +} + +export default function resolvePathname(to, from = '') { + let toParts = to.split('/') || []; + let fromParts = from.split('/') || []; + + const isToAbs = to && isAbsolute(to); + const isFromAbs = from && isAbsolute(from); + const mustEndAbs = isToAbs || isFromAbs; + + if (to && isAbsolute(to)) { + // to is absolute + fromParts = toParts; + } else if (toParts.length) { + // to is relative, drop the filename + fromParts.pop(); + fromParts = fromParts.concat(toParts); + } + + if (!fromParts.length) return '/'; + + let hasTrailingSlash; + if (fromParts.length) { + let last = fromParts[fromParts.length - 1]; + hasTrailingSlash = last === '.' || last === '..' || last === ''; + } else { + hasTrailingSlash = false; + } + + let up = 0; + for (let i = fromParts.length; i >= 0; i--) { + let part = fromParts[i]; + + if (part === '.') { + spliceOne(fromParts, i); + } else if (part === '..') { + spliceOne(fromParts, i); + up++; + } else if (up) { + spliceOne(fromParts, i); + up--; + } + } + + if (!mustEndAbs) { + for (; up--; up) fromParts.unshift('..'); + } + + if (mustEndAbs && fromParts[0] !== '' && (!fromParts[0] || !isAbsolute(fromParts[0]))) { + fromParts.unshift(''); + } + + let result = fromParts.join('/'); + if (hasTrailingSlash && result.substr(-1) !== '/') result += '/'; + return result; +} From bc816cd8e12646c85f42daacbd88ca2a435f421f Mon Sep 17 00:00:00 2001 From: ZeroLing Date: Mon, 18 Mar 2019 16:44:58 +0800 Subject: [PATCH 08/19] fix: recycle node reference of deleted node's childNodes (#984) --- packages/rax-miniapp-renderer/src/NodeMap.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/rax-miniapp-renderer/src/NodeMap.js b/packages/rax-miniapp-renderer/src/NodeMap.js index e954142346..33ff3d6aa8 100644 --- a/packages/rax-miniapp-renderer/src/NodeMap.js +++ b/packages/rax-miniapp-renderer/src/NodeMap.js @@ -1,3 +1,4 @@ + export default class NodeMap { _map = new Map(); @@ -18,6 +19,22 @@ export default class NodeMap { delete(vnode) { if (!vnode) return null; - return this._map.delete(vnode.$$id); + const node = this._map.get(vnode.$$id); + if (node) traverseNodes(node, el => el.$$id && this._map.delete(el.$$id)); + } +} + +/** + * Traverse HTML Node in DFS (trailing call). + * @param node {Node} + * @param effect {Function} + */ +function traverseNodes(node, effect) { + if (node.childNodes.length > 0) { + for (let i = 0, l = node.childNodes.length; i < l; i++) { + traverseNodes(node.childNodes[i], effect); + effect(node.childNodes[i]); + } } + effect(node); } From ba61937ea5c916ed6a8f8d76745024ceb2b31e24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=83=E5=BD=A6?= Date: Mon, 18 Mar 2019 20:59:20 +0800 Subject: [PATCH 09/19] chore: make weex-driver work and remove not used packeages and configs --- .eslintrc.js | 329 +++++++++--------- packages/babel-preset-rax/.npmignore | 3 - packages/babel-preset-rax/README.md | 141 -------- packages/babel-preset-rax/package.json | 25 -- packages/babel-preset-rax/src/index.js | 34 -- packages/driver-weex/README.md | 36 +- packages/driver-weex/package.json | 7 +- .../driver-weex/src/__tests__/elements.js | 72 ---- .../driver-weex/src/__tests__/parseProps.js | 21 -- packages/driver-weex/src/elements/block.js | 13 - packages/driver-weex/src/elements/button.js | 46 --- packages/driver-weex/src/elements/heading.js | 38 -- packages/driver-weex/src/elements/img.js | 20 -- packages/driver-weex/src/elements/index.js | 31 -- packages/driver-weex/src/elements/p.js | 122 ------- packages/driver-weex/src/elements/span.js | 13 - packages/driver-weex/src/elements/textarea.js | 19 - packages/driver-weex/src/elements/video.js | 19 - packages/driver-weex/src/index.js | 319 ++++++++--------- packages/driver-weex/src/parseProps.js | 34 -- packages/rax-cli/bin/rax.js | 19 +- packages/rax-cli/package.json | 2 +- .../src/generator/miniapp/_eslintrc.js | 9 +- .../src/generator/miniapp/{src => }/app.css | 0 packages/rax-cli/src/generator/miniapp/app.js | 5 + .../rax-cli/src/generator/miniapp/app.json | 8 + .../src/generator/miniapp/manifest.json | 28 -- .../src/generator/miniapp/package.json | 5 +- .../generator/miniapp/pages/index/index.css | 7 + .../generator/miniapp/pages/index/index.js | 5 + .../generator/miniapp/pages/index/index.jsx | 17 + .../src/generator/miniapp/public/index.html | 43 --- .../rax-cli/src/generator/miniapp/src/app.js | 0 .../generator/miniapp/src/pages/index.html | 33 -- .../rax-cli/src/generator/webapp/package.json | 2 +- .../rax-cli/src/generator/weexapp/README.md | 19 + .../src/generator/weexapp/_eslintrc.js | 168 +++++++++ .../rax-cli/src/generator/weexapp/_gitignore | 11 + .../src/generator/weexapp/package.json | 20 ++ .../rax-cli/src/generator/weexapp/src/App.jsx | 11 + .../src/generator/weexapp/src/index.jsx | 5 + packages/rax-scripts/README.md | 2 +- packages/rax-scripts/bin/rax-scripts-build.js | 2 +- packages/rax-scripts/bin/rax-scripts-start.js | 2 +- packages/rax-scripts/package.json | 17 +- packages/rax-scripts/src/build.js | 5 +- .../rax-scripts/src/config/babel.config.js | 7 +- .../src/config/component/README.md | 1 + .../rax-scripts/src/config/miniapp/README.md | 1 + .../src/config/miniapp/webpack.config.base.js | 114 ------ .../src/config/miniapp/webpack.config.prod.js | 77 ---- .../config/miniprogram/webpack.config.base.js | 124 ------- .../config/miniprogram/webpack.config.dev.js | 26 -- .../config/miniprogram/webpack.config.prod.js | 43 --- .../src/config/universalapp/README.md | 1 + .../rax-scripts/src/config/webapp/README.md | 1 + .../src/config/webapp/webpack.config.base.js | 25 +- .../src/config/webapp/webpack.config.dev.js | 10 +- .../src/config/webapp/webpack.config.prod.js | 11 +- .../rax-scripts/src/config/webpack.config.js | 1 + .../rax-scripts/src/config/weexapp/README.md | 1 + .../src/config/weexapp/webpack.config.base.js | 87 +++++ .../webpack.config.dev.js | 18 +- .../src/config/weexapp/webpack.config.prod.js | 24 ++ .../src/plugins/WeexFrameworkBannerPlugin.js | 65 ++++ packages/rax-scripts/src/start.js | 3 +- .../src/utils/componentCompiler.js | 2 - packages/rax/src/createElement.js | 2 +- .../README.md | 2 - .../package.json | 5 - .../src/index.js | 19 - .../README.md | 2 - .../package.json | 5 - .../src/index.js | 23 -- packages/weex-rax-examples/README.md | 1 - packages/weex-rax-examples/common/Button.js | 119 ------- packages/weex-rax-examples/common/List.js | 86 ----- packages/weex-rax-examples/common/Panel.js | 102 ------ .../weex-rax-examples/common/StyleItem.js | 35 -- packages/weex-rax-examples/common/Tip.js | 62 ---- packages/weex-rax-examples/components/a.js | 20 -- .../weex-rax-examples/components/image.js | 59 ---- .../weex-rax-examples/components/input.js | 46 --- packages/weex-rax-examples/components/list.js | 123 ------- .../weex-rax-examples/components/scroller.js | 172 --------- packages/weex-rax-examples/components/text.js | 67 ---- packages/weex-rax-examples/index.js | 30 -- packages/weex-rax-examples/modules/modal.js | 79 ----- packages/weex-rax-examples/modules/stream.js | 218 ------------ packages/weex-rax-examples/package.json | 20 -- packages/weex-rax-examples/style/index.js | 38 -- .../weex-rax-examples/syntax/hello-world.js | 43 --- scripts/dist-core.js | 4 + 93 files changed, 841 insertions(+), 2970 deletions(-) delete mode 100644 packages/babel-preset-rax/.npmignore delete mode 100644 packages/babel-preset-rax/README.md delete mode 100644 packages/babel-preset-rax/package.json delete mode 100644 packages/babel-preset-rax/src/index.js delete mode 100644 packages/driver-weex/src/__tests__/elements.js delete mode 100644 packages/driver-weex/src/__tests__/parseProps.js delete mode 100644 packages/driver-weex/src/elements/block.js delete mode 100644 packages/driver-weex/src/elements/button.js delete mode 100644 packages/driver-weex/src/elements/heading.js delete mode 100644 packages/driver-weex/src/elements/img.js delete mode 100644 packages/driver-weex/src/elements/index.js delete mode 100644 packages/driver-weex/src/elements/p.js delete mode 100644 packages/driver-weex/src/elements/span.js delete mode 100644 packages/driver-weex/src/elements/textarea.js delete mode 100644 packages/driver-weex/src/elements/video.js delete mode 100644 packages/driver-weex/src/parseProps.js rename packages/rax-cli/src/generator/miniapp/{src => }/app.css (100%) create mode 100644 packages/rax-cli/src/generator/miniapp/app.js create mode 100644 packages/rax-cli/src/generator/miniapp/app.json delete mode 100644 packages/rax-cli/src/generator/miniapp/manifest.json create mode 100644 packages/rax-cli/src/generator/miniapp/pages/index/index.css create mode 100644 packages/rax-cli/src/generator/miniapp/pages/index/index.js create mode 100644 packages/rax-cli/src/generator/miniapp/pages/index/index.jsx delete mode 100644 packages/rax-cli/src/generator/miniapp/public/index.html delete mode 100644 packages/rax-cli/src/generator/miniapp/src/app.js delete mode 100644 packages/rax-cli/src/generator/miniapp/src/pages/index.html create mode 100644 packages/rax-cli/src/generator/weexapp/README.md create mode 100644 packages/rax-cli/src/generator/weexapp/_eslintrc.js create mode 100644 packages/rax-cli/src/generator/weexapp/_gitignore create mode 100644 packages/rax-cli/src/generator/weexapp/package.json create mode 100644 packages/rax-cli/src/generator/weexapp/src/App.jsx create mode 100644 packages/rax-cli/src/generator/weexapp/src/index.jsx create mode 100644 packages/rax-scripts/src/config/component/README.md create mode 100644 packages/rax-scripts/src/config/miniapp/README.md delete mode 100644 packages/rax-scripts/src/config/miniapp/webpack.config.base.js delete mode 100644 packages/rax-scripts/src/config/miniapp/webpack.config.prod.js delete mode 100644 packages/rax-scripts/src/config/miniprogram/webpack.config.base.js delete mode 100644 packages/rax-scripts/src/config/miniprogram/webpack.config.dev.js delete mode 100644 packages/rax-scripts/src/config/miniprogram/webpack.config.prod.js create mode 100644 packages/rax-scripts/src/config/universalapp/README.md create mode 100644 packages/rax-scripts/src/config/webapp/README.md create mode 100644 packages/rax-scripts/src/config/weexapp/README.md create mode 100644 packages/rax-scripts/src/config/weexapp/webpack.config.base.js rename packages/rax-scripts/src/config/{miniapp => weexapp}/webpack.config.dev.js (72%) create mode 100644 packages/rax-scripts/src/config/weexapp/webpack.config.prod.js create mode 100644 packages/rax-scripts/src/plugins/WeexFrameworkBannerPlugin.js delete mode 100644 packages/weex-builtin-globals-service-template/README.md delete mode 100644 packages/weex-builtin-globals-service-template/package.json delete mode 100644 packages/weex-builtin-globals-service-template/src/index.js delete mode 100644 packages/weex-builtin-modules-service-template/README.md delete mode 100644 packages/weex-builtin-modules-service-template/package.json delete mode 100644 packages/weex-builtin-modules-service-template/src/index.js delete mode 100644 packages/weex-rax-examples/README.md delete mode 100644 packages/weex-rax-examples/common/Button.js delete mode 100644 packages/weex-rax-examples/common/List.js delete mode 100644 packages/weex-rax-examples/common/Panel.js delete mode 100644 packages/weex-rax-examples/common/StyleItem.js delete mode 100644 packages/weex-rax-examples/common/Tip.js delete mode 100644 packages/weex-rax-examples/components/a.js delete mode 100644 packages/weex-rax-examples/components/image.js delete mode 100644 packages/weex-rax-examples/components/input.js delete mode 100644 packages/weex-rax-examples/components/list.js delete mode 100644 packages/weex-rax-examples/components/scroller.js delete mode 100644 packages/weex-rax-examples/components/text.js delete mode 100644 packages/weex-rax-examples/index.js delete mode 100644 packages/weex-rax-examples/modules/modal.js delete mode 100644 packages/weex-rax-examples/modules/stream.js delete mode 100644 packages/weex-rax-examples/package.json delete mode 100644 packages/weex-rax-examples/style/index.js delete mode 100644 packages/weex-rax-examples/syntax/hello-world.js diff --git a/.eslintrc.js b/.eslintrc.js index fdd7cafd2f..23a213a3da 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,164 +1,167 @@ -/* eslint quotes: off */ - module.exports = { - "root": true, - "parser": "babel-eslint", - "env": { - "browser": true, - "node": true, - "es6": true, - "jest": true, - "commonjs": true + 'root': true, + 'parser': 'babel-eslint', + 'env': { + 'browser': true, + 'node': true, + 'es6': true, + 'jest': true, + 'commonjs': true }, - "plugins": [ - "react", - "import" + 'plugins': [ + 'react', + 'import' ], - "settings": { - "react": { - "pragma": "createElement", // Pragma to use, default to "React" + 'settings': { + 'react': { + 'pragma': 'createElement', // Pragma to use, default to "React" } }, - "parserOptions": { - "sourceType": "module", - "ecmaVersion": 6, - "ecmaFeatures": { - "jsx": true, - "generators": true, - "experimentalObjectRestSpread": true + 'parserOptions': { + 'sourceType': 'module', + 'ecmaVersion': 6, + 'ecmaFeatures': { + 'jsx': true, + 'generators': true, + 'experimentalObjectRestSpread': true } }, - "globals": { - "__weex_data__": true, - "__weex_options__": true, - "__weex_downgrade__": true, - "__weex_define__": true, - "__weex_require__": true, - "WXEnvironment": true, - "webkitRequestAnimationFrame": true, - "webkitCancelAnimationFrame": true, - "jasmine": true + 'globals': { + 'App': true, + 'Page': true, + 'getApp': true, + 'Component': true, + 'my': true, + '__weex_data__': true, + '__weex_options__': true, + '__weex_downgrade__': true, + '__weex_define__': true, + '__weex_require__': true, + 'WXEnvironment': true, + 'webkitRequestAnimationFrame': true, + 'webkitCancelAnimationFrame': true, + 'jasmine': true }, - "rules": { - "max-len": "off", + 'rules': { + 'max-len': 'off', // ES6 - "prefer-const": "off", - "no-const-assign": "error", - "no-class-assign": "error", - "no-dupe-class-members": "error", - "rest-spread-spacing": "error", - "no-duplicate-imports": "error", - "no-useless-rename": "error", - "arrow-spacing": "error", - "no-useless-computed-key": "error", - "template-curly-spacing": "error", - "generator-star-spacing": ["error", {"before": false, "after": true}], - "yield-star-spacing": ["error", {"before": false, "after": true}], - "strict": ["off", "global"], - "global-strict": ["off", "always"], - "no-extra-strict": "off", - "no-shadow": "off", - "no-unused-vars": ["off", { - "vars": "local", - "args": "after-used", - "varsIgnorePattern": "createElement" + 'prefer-const': 'off', + 'no-const-assign': 'error', + 'no-class-assign': 'error', + 'no-dupe-class-members': 'error', + 'rest-spread-spacing': 'error', + 'no-duplicate-imports': 'error', + 'no-useless-rename': 'error', + 'arrow-spacing': 'error', + 'no-useless-computed-key': 'error', + 'template-curly-spacing': 'error', + 'generator-star-spacing': ['error', {'before': false, 'after': true}], + 'yield-star-spacing': ['error', {'before': false, 'after': true}], + 'strict': ['off', 'global'], + 'global-strict': ['off', 'always'], + 'no-extra-strict': 'off', + 'no-shadow': 'off', + 'no-unused-vars': ['off', { + 'vars': 'local', + 'args': 'after-used', + 'varsIgnorePattern': 'createElement' }], - "no-undef": "error", - "no-unused-expressions": "off", - "no-use-before-define": "off", - "yoda": "off", - "eqeqeq": "off", - "no-new": "off", - "consistent-return": "off", - "dot-notation": ["error", { - "allowKeywords": true + 'no-undef': 'error', + 'no-unused-expressions': 'off', + 'no-use-before-define': 'off', + 'yoda': 'off', + 'eqeqeq': 'off', + 'no-new': 'off', + 'consistent-return': 'off', + 'dot-notation': ['error', { + 'allowKeywords': true }], - "no-extend-native": "error", - "no-native-reassign": "error", - "no-return-assign": "off", - "no-constant-condition": ["error", { - "checkLoops": false + 'no-extend-native': 'error', + 'no-native-reassign': 'error', + 'no-return-assign': 'off', + 'no-constant-condition': ['error', { + 'checkLoops': false }], - "no-caller": "error", - "no-loop-func": "off", + 'no-caller': 'error', + 'no-loop-func': 'off', // Node.js - "no-console": "off", - "no-catch-shadow": "error", - "no-new-require": "off", - "no-mixed-requires": ["off", false], - "no-path-concat": "off", - "handle-callback-err": "off", + 'no-console': 'off', + 'no-catch-shadow': 'error', + 'no-new-require': 'off', + 'no-mixed-requires': ['off', false], + 'no-path-concat': 'off', + 'handle-callback-err': 'off', - "no-empty": "off", - "indent": ["error", 2, { - "SwitchCase": 1 + 'no-empty': 'off', + 'indent': ['error', 2, { + 'SwitchCase': 1 }], - "camelcase": ["off", { - "properties": "always" + 'camelcase': ['off', { + 'properties': 'always' }], - "quotes": ["error", "single", "avoid-escape"], - "brace-style": ["error", "1tbs", { - "allowSingleLine": false + 'quotes': ['error', 'single', 'avoid-escape'], + 'brace-style': ['error', '1tbs', { + 'allowSingleLine': false }], - "comma-spacing": ["error", { - "before": false, - "after": true + 'comma-spacing': ['error', { + 'before': false, + 'after': true }], - "comma-style": ["error", "last"], - "eol-last": "off", - "func-names": "off", - "new-cap": ["error", { - "newIsCap": true + 'comma-style': ['error', 'last'], + 'eol-last': 'off', + 'func-names': 'off', + 'new-cap': ['error', { + 'capIsNewExceptions': ['App', 'Page', 'Component'] }], - "key-spacing": ["error", { - "beforeColon": false, - "afterColon": true + 'key-spacing': ['error', { + 'beforeColon': false, + 'afterColon': true }], - "no-mixed-spaces-and-tabs": "error", - "no-multi-spaces": "error", - "no-multiple-empty-lines": "error", - "no-new-object": "error", - "no-spaced-func": "error", - "no-tabs": "error", - "no-trailing-spaces": "error", - "no-extra-parens": ["error", "all", { ignoreJSX: "all" }], - "padded-blocks": ["error", "never"], - "semi": "error", - "semi-spacing": "error", - "keyword-spacing": "error", - "space-before-blocks": "error", - "space-before-function-paren": ["error", "never"], - "space-infix-ops": "error", - "spaced-comment": ["error", "always", { - "line": { - "markers": ["/"], - "exceptions": ["-", "+"] + 'no-mixed-spaces-and-tabs': 'error', + 'no-multi-spaces': 'error', + 'no-multiple-empty-lines': 'error', + 'no-new-object': 'error', + 'no-spaced-func': 'error', + 'no-tabs': 'error', + 'no-trailing-spaces': 'error', + 'no-extra-parens': ['error', 'all', { ignoreJSX: 'all' }], + 'padded-blocks': ['error', 'never'], + 'semi': 'error', + 'semi-spacing': 'error', + 'keyword-spacing': 'error', + 'space-before-blocks': 'error', + 'space-before-function-paren': ['error', 'never'], + 'space-infix-ops': 'error', + 'spaced-comment': ['error', 'always', { + 'line': { + 'markers': ['/'], + 'exceptions': ['-', '+'] }, - "block": { - "markers": ["!"], - "exceptions": ["*"], - "balanced": true + 'block': { + 'markers': ['!'], + 'exceptions': ['*'], + 'balanced': true } }], /** * Import */ - "import/newline-after-import": "error", - "import/no-duplicates": "error", - "import/no-extraneous-dependencies": [ - "error", + 'import/newline-after-import': 'error', + 'import/no-duplicates': 'error', + 'import/no-extraneous-dependencies': [ + 'error', { - "peerDependencies": true, - "devDependencies": [ - "**/scripts/*.js", - "**/__tests__/*.js", - "**/__tests__/**/*.js", + 'peerDependencies': true, + 'devDependencies': [ + '**/scripts/*.js', + '**/__tests__/*.js', + '**/__tests__/**/*.js', '**/*.config.js', - "**/config/*.js", - "**/*.conf.js", - "**/tests/*.test.js" + '**/config/*.js', + '**/*.conf.js', + '**/tests/*.test.js' ] } ], @@ -166,39 +169,39 @@ module.exports = { /** * React & JSX */ - "jsx-quotes": ["error", "prefer-double"], - "react/display-name": "off", - "react/jsx-boolean-value": ["off", "always"], - "react/jsx-no-bind": ["error", { - "allowArrowFunctions": true + 'jsx-quotes': ['error', 'prefer-double'], + 'react/display-name': 'off', + 'react/jsx-boolean-value': ['off', 'always'], + 'react/jsx-no-bind': ['error', { + 'allowArrowFunctions': true }], - "react/prefer-es6-class": "error", - "react/jsx-curly-spacing": "error", - "react/jsx-indent-props": ["error", 2], // 2 spaces indentation - "react/jsx-no-duplicate-props": "error", - "react/jsx-no-undef": "error", - "react/jsx-tag-spacing": "error", - "react/jsx-no-comment-textnodes": "error", - "react/jsx-equals-spacing": "error", - "react/jsx-handler-names": "off", - "react/jsx-uses-react": "error", - "react/jsx-uses-vars": "error", - "react/no-is-mounted": "error", - "react/no-children-prop": "error", - "react/no-did-mount-set-state": "error", - "react/no-did-update-set-state": "error", - "react/no-unknown-property": "off", - "react/style-prop-object": "error", - "react/react-in-jsx-scope": "error", - "react/self-closing-comp": "error", - "react/sort-comp": ["off", { - "order": [ - "lifecycle", - "/^on.+$/", - "/^(get|set)(?!(InitialState$|DefaultProps$|ChildContext$)).+$/", - "everything-else", - "/^render.+$/", - "render" + 'react/prefer-es6-class': 'error', + 'react/jsx-curly-spacing': 'error', + 'react/jsx-indent-props': ['error', 2], // 2 spaces indentation + 'react/jsx-no-duplicate-props': 'error', + 'react/jsx-no-undef': 'error', + 'react/jsx-tag-spacing': 'error', + 'react/jsx-no-comment-textnodes': 'error', + 'react/jsx-equals-spacing': 'error', + 'react/jsx-handler-names': 'off', + 'react/jsx-uses-react': 'error', + 'react/jsx-uses-vars': 'error', + 'react/no-is-mounted': 'error', + 'react/no-children-prop': 'error', + 'react/no-did-mount-set-state': 'error', + 'react/no-did-update-set-state': 'error', + 'react/no-unknown-property': 'off', + 'react/style-prop-object': 'error', + 'react/react-in-jsx-scope': 'error', + 'react/self-closing-comp': 'error', + 'react/sort-comp': ['off', { + 'order': [ + 'lifecycle', + '/^on.+$/', + '/^(get|set)(?!(InitialState$|DefaultProps$|ChildContext$)).+$/', + 'everything-else', + '/^render.+$/', + 'render' ] }] } diff --git a/packages/babel-preset-rax/.npmignore b/packages/babel-preset-rax/.npmignore deleted file mode 100644 index cace0d6ddc..0000000000 --- a/packages/babel-preset-rax/.npmignore +++ /dev/null @@ -1,3 +0,0 @@ -node_modules -*.log -src diff --git a/packages/babel-preset-rax/README.md b/packages/babel-preset-rax/README.md deleted file mode 100644 index 2bb8507b7f..0000000000 --- a/packages/babel-preset-rax/README.md +++ /dev/null @@ -1,141 +0,0 @@ -# babel-preset-rax [![npm](https://img.shields.io/npm/v/babel-preset-rax.svg)](https://www.npmjs.com/package/babel-preset-rax) [![Dependency Status](https://david-dm.org/alibaba/rax.svg?path=packages/babel-preset-rax)](https://david-dm.org/alibaba/rax.svg?path=packages/babel-preset-rax) [![Known Vulnerabilities](https://snyk.io/test/npm/babel-preset-rax/badge.svg)](https://snyk.io/test/npm/babel-preset-rax) - -> Babel preset for all Rax plugins. - -This preset always includes the following plugins: - -- [@babel/plugin-syntax-jsx](plugin-syntax-jsx.md) -- [@babel/plugin-transform-react-jsx](plugin-transform-react-jsx.md) -- [@babel/plugin-transform-react-display-name](plugin-transform-react-display-name.md) - -And with the `development` option: - -- [@babel/plugin-transform-react-jsx-self](plugin-transform-react-jsx-self.md) -- [@babel/plugin-transform-react-jsx-source](plugin-transform-react-jsx-source.md) - - -## Installation - -Using npm: - -```sh -npm install --save-dev babel-preset-rax -``` - -or using yarn: - -```sh -yarn add babel-preset-rax --dev -``` - -## Usage - -### Via `.babelrc` (Recommended) - -**.babelrc** - -Without options: - -```json -{ - "presets": ["babel-preset-rax"] -} -``` - -With options: - -```json -{ - "presets": [ - [ - "babel-preset-rax", - { - "pragma": "dom", // default pragma is createElement - "pragmaFrag": "DomFrag", // default is Fragment - "throwIfNamespace": false // defaults to true - } - ] - ] -} -``` - -### Via CLI - -```sh -babel --presets babel-preset-rax script.js -``` - -### Via Node API - -```javascript -require("@babel/core").transform("code", { - presets: ["babel-preset-rax"], -}); -``` - -## Options - -### `pragma` - -`string`, defaults to `createElement`. - -Replace the function used when compiling JSX expressions. - -### `pragmaFrag` - -`string`, defaults to `Fragment`. - -Replace the component used when compiling JSX fragments. - -### `useBuiltIns` - -`boolean`, defaults to `false`. - -Will use the native built-in instead of trying to polyfill behavior for any plugins that require one. - -### `development` - -`boolean`, defaults to `false`. - -Toggles plugins that aid in development, such as [`@babel/plugin-transform-react-jsx-self`](plugin-transform-react-jsx-self.md) and [`@babel/plugin-transform-react-jsx-source`](plugin-transform-react-jsx-source.md). - -This is useful when combined with the [env option](options.md#env) configuration or [js config files](config-files.md#javascript). - -### `throwIfNamespace` - -`boolean`, defaults to `true`. - -Toggles whether or not to throw an error if a XML namespaced tag name is used. For example: - - - -Though the JSX spec allows this, it is disabled by default since React's JSX does not currently have support for it. - -#### .babelrc.js - -```js -module.exports = { - presets: [ - [ - "babel-preset-rax", - { - development: process.env.BABEL_ENV === "development", - }, - ], - ], -}; -``` - -#### .babelrc - -> Note: the `env` option will likely get deprecated soon - -```json -{ - "presets": ["babel-preset-rax"], - "env": { - "development": { - "presets": [["babel-preset-rax", { "development": true }]] - } - } -} diff --git a/packages/babel-preset-rax/package.json b/packages/babel-preset-rax/package.json deleted file mode 100644 index ec621368ff..0000000000 --- a/packages/babel-preset-rax/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "babel-preset-rax", - "version": "1.0.0-beta.0", - "description": "Babel preset for all Rax plugins.", - "license": "BSD-3-Clause", - "main": "lib/index.js", - "repository": { - "type": "git", - "url": "git+https://github.com/alibaba/rax.git" - }, - "bugs": { - "url": "https://github.com/alibaba/rax/issues" - }, - "homepage": "https://github.com/alibaba/rax#readme", - "engines": { - "npm": ">=3.0.0" - }, - "dependencies": { - "@babel/helper-plugin-utils": "^7.0.0", - "@babel/plugin-transform-react-display-name": "^7.0.0", - "@babel/plugin-transform-react-jsx": "^7.0.0", - "@babel/plugin-transform-react-jsx-self": "^7.0.0", - "@babel/plugin-transform-react-jsx-source": "^7.0.0" - } -} diff --git a/packages/babel-preset-rax/src/index.js b/packages/babel-preset-rax/src/index.js deleted file mode 100644 index c5d3e4d4d1..0000000000 --- a/packages/babel-preset-rax/src/index.js +++ /dev/null @@ -1,34 +0,0 @@ -import { declare } from '@babel/helper-plugin-utils'; -import transformReactJSX from '@babel/plugin-transform-react-jsx'; -import transformReactDisplayName from '@babel/plugin-transform-react-display-name'; -import transformReactJSXSource from '@babel/plugin-transform-react-jsx-source'; -import transformReactJSXSelf from '@babel/plugin-transform-react-jsx-self'; - -export default declare((api, opts) => { - api.assertVersion(7); - - const pragma = opts.pragma || 'createElement'; - const pragmaFrag = opts.pragmaFrag || 'Fragment'; - const throwIfNamespace = opts.throwIfNamespace === undefined ? true : Boolean(opts.throwIfNamespace); - const useBuiltIns = Boolean(opts.useBuiltIns); - const development = opts.development; - - if (typeof development !== 'boolean') { - throw new Error( - "@babel/preset-rax 'development' option must be a boolean.", - ); - } - - return { - plugins: [ - [ - transformReactJSX, - { pragma, pragmaFrag, throwIfNamespace, useBuiltIns }, - ], - transformReactDisplayName, - - development && transformReactJSXSource, - development && transformReactJSXSelf, - ].filter(Boolean), - }; -}); \ No newline at end of file diff --git a/packages/driver-weex/README.md b/packages/driver-weex/README.md index 947b3914d8..2e63cbf83f 100644 --- a/packages/driver-weex/README.md +++ b/packages/driver-weex/README.md @@ -12,8 +12,7 @@ $ npm install --save driver-weex ```jsx import {createElement, Component, render} from 'rax'; -import WeexDriver from 'driver-weex'; -import {isWeex} from 'universal-env'; +import * as WeexDriver from 'driver-weex'; class Example extends Component { render() { @@ -26,37 +25,6 @@ class Example extends Component { } render(, null, { - driver: isWeex ? WeexDriver : null + driver: WeexDriver }); ``` - -## Support elements - -### Block: p, div, section, header, footer, nav, aside, main - -### img - -- src -- width: recommend use style.width -- height: recommend use style.height -- placeholder: weex only -- resize: weex only - -### a - -- href - -### video - -- src -- controls -- autoplay: not sure -- play-status: weex only - -### textarea - -- placeholder -- disabled -- autofocus -- rows -- children: as value diff --git a/packages/driver-weex/package.json b/packages/driver-weex/package.json index 0f72b52d50..1350174898 100644 --- a/packages/driver-weex/package.json +++ b/packages/driver-weex/package.json @@ -1,6 +1,6 @@ { "name": "driver-weex", - "version": "1.0.0-beta.0", + "version": "1.0.0-beta.3", "description": "Weex driver for Rax", "license": "BSD-3-Clause", "main": "lib/index.js", @@ -11,8 +11,5 @@ "bugs": { "url": "https://github.com/alibaba/rax/issues" }, - "homepage": "https://github.com/alibaba/rax#readme", - "dependencies": { - "style-unit": "^0.6.5" - } + "homepage": "https://github.com/alibaba/rax#readme" } diff --git a/packages/driver-weex/src/__tests__/elements.js b/packages/driver-weex/src/__tests__/elements.js deleted file mode 100644 index 8cd49d888b..0000000000 --- a/packages/driver-weex/src/__tests__/elements.js +++ /dev/null @@ -1,72 +0,0 @@ - -import elements from '../elements'; - -describe('elements', () => { - it('img element', () => { - const element = { - type: 'img', - props: { - height: '100', - width: '100' - } - }; - - const component = elements[element.type].parse(element); - - expect(component.type).toBe('image'); - expect(component.props.height).toBe(undefined); - expect(component.props.width).toBe(undefined); - expect(component.props.style.height).toBe('100'); - expect(component.props.style.width).toBe('100'); - }); - - it('block elements', () => { - const blocks = ['section', 'footer', 'main', 'aside', 'nav']; - - blocks.forEach((block) => { - const element = { - type: block - }; - const component = elements[element.type].parse(element); - expect(component.type).toBe('div'); - }); - }); - - it('video element', () => { - const element = { - type: 'video', - props: { - height: '100', - width: '100', - autoplay: true - } - }; - - const component = elements[element.type].parse(element); - - expect(component.props.height).toBe(undefined); - expect(component.props.width).toBe(undefined); - expect(component.props.style.height).toBe('100'); - expect(component.props.style.width).toBe('100'); - expect(component.props.autoplay).toBe(true); - }); - - it('textarea element', () => { - const element = { - type: 'textarea', - props: { - placeholder: 'placeholder', - disabled: true, - autofocus: false, - rows: 10, - children: 'default value' - } - }; - - const component = elements[element.type].parse(element); - - expect(component.props.value).toBe('default value'); - expect(component.props.children).toBe(null); - expect(component.props.rows).toBe(10); - }); -}); diff --git a/packages/driver-weex/src/__tests__/parseProps.js b/packages/driver-weex/src/__tests__/parseProps.js deleted file mode 100644 index a6ced74f13..0000000000 --- a/packages/driver-weex/src/__tests__/parseProps.js +++ /dev/null @@ -1,21 +0,0 @@ -import {transformPropsAttrsToStyle, renamePropsAttr} from '../parseProps'; - -describe('parseProps.js', () => { - it('transformPropsAttrsToStyle', () => { - const props = { - width: 100 - }; - const newProps = transformPropsAttrsToStyle(props, ['width']); - expect(newProps.width).toBe(undefined); - expect(newProps.style.width).toBe(100); - }); - - it('renamePropsAttr', () => { - const props = { - autoplay: true - }; - const newProps = renamePropsAttr(props, 'autoplay', 'auto-play'); - expect(newProps['auto-play']).toBe(true); - expect(newProps.autoplay).toBe(undefined); - }); -}); diff --git a/packages/driver-weex/src/elements/block.js b/packages/driver-weex/src/elements/block.js deleted file mode 100644 index 487553ff93..0000000000 --- a/packages/driver-weex/src/elements/block.js +++ /dev/null @@ -1,13 +0,0 @@ -export default { - - /** - * parse w3c attrs to weex module attrs - * - * @param {Object} w3c component data - * @return {Object} weex component data - */ - parse(component) { - component.type = 'div'; - return component; - } -}; diff --git a/packages/driver-weex/src/elements/button.js b/packages/driver-weex/src/elements/button.js deleted file mode 100644 index db0f69360f..0000000000 --- a/packages/driver-weex/src/elements/button.js +++ /dev/null @@ -1,46 +0,0 @@ -/** - * weex button - * - * props: disabled, style - */ - -export default { - parse(component) { - const {props} = component; - component.type = 'text'; - - const {style, disabled, children} = props; - - let textStyle = { - textAlign: 'center', - fontSize: 22, - paddingTop: 4, - paddingRight: 12, - paddingBottom: 6, - paddingLeft: 12, - borderWidth: 4, - borderStyle: 'solid', - borderColor: '#000000', - backgroudColor: '#c0c0c0', - ...style - }; - - if (disabled) { - props.onClick = null; - textStyle = { - ...textStyle, - ...{ - color: '#7f7f7f', - borderColor: '#7f7f7f', - } - }; - } - - if (typeof children === 'string') { - props.value = children; - props.children = null; - } - - return component; - } -}; diff --git a/packages/driver-weex/src/elements/heading.js b/packages/driver-weex/src/elements/heading.js deleted file mode 100644 index f8e64d91fc..0000000000 --- a/packages/driver-weex/src/elements/heading.js +++ /dev/null @@ -1,38 +0,0 @@ -const BASE_FONT_SIZE = 28; - -function generateHeadingStyle(baseFontSize, fontMultiplier, marginMultiplier) { - return { - fontSize: baseFontSize * fontMultiplier, - marginTop: baseFontSize * fontMultiplier * marginMultiplier, - marginBottom: baseFontSize * fontMultiplier * marginMultiplier, - fontWeight: 'bold' - }; -} - -const HeadingElements = { - h1: generateHeadingStyle(BASE_FONT_SIZE, 2, 0.67), - h2: generateHeadingStyle(BASE_FONT_SIZE, 1.5, 0.83), - h3: generateHeadingStyle(BASE_FONT_SIZE, 1.17, 1), - h4: generateHeadingStyle(BASE_FONT_SIZE, 1, 1.33), - h5: generateHeadingStyle(BASE_FONT_SIZE, 0.83, 1.67), - h6: generateHeadingStyle(BASE_FONT_SIZE, 0.67, 2.33), -}; - -export default { - parse(component) { - let {type, props} = component; - - component.type = 'text'; - props.style = { - ...HeadingElements[type] || HeadingElements.h6, - ...props.style - }; - - if (typeof props.children === 'string' && !props.value) { - props.value = props.children; - props.children = null; - } - - return component; - } -}; diff --git a/packages/driver-weex/src/elements/img.js b/packages/driver-weex/src/elements/img.js deleted file mode 100644 index 1250c4af7a..0000000000 --- a/packages/driver-weex/src/elements/img.js +++ /dev/null @@ -1,20 +0,0 @@ -import {transformPropsAttrsToStyle} from '../parseProps'; - -export default { - - /** - * parse w3c attrs to weex module attrs - * - * @param {Object} w3c component data - * @return {Object} weex component data - */ - parse(component) { - let {props} = component; - component.type = 'image'; - - // modify props - component.props = transformPropsAttrsToStyle(props, ['width', 'height']); - - return component; - } -}; diff --git a/packages/driver-weex/src/elements/index.js b/packages/driver-weex/src/elements/index.js deleted file mode 100644 index ecbdfb4ea7..0000000000 --- a/packages/driver-weex/src/elements/index.js +++ /dev/null @@ -1,31 +0,0 @@ -import img from './img'; -import video from './video'; -import textarea from './textarea'; -import span from './span'; -import p from './p'; -import button from './button'; -import heading from './heading'; -import block from './block'; - -export default { - span, - p, - img, - button, - video, - textarea, - h1: heading, - h2: heading, - h3: heading, - h4: heading, - h5: heading, - h6: heading, - nav: block, - article: block, - section: block, - // Conflict with weex header tag - // header: block, - footer: block, - aside: block, - main: block -}; diff --git a/packages/driver-weex/src/elements/p.js b/packages/driver-weex/src/elements/p.js deleted file mode 100644 index 610fc2cf13..0000000000 --- a/packages/driver-weex/src/elements/p.js +++ /dev/null @@ -1,122 +0,0 @@ -const BASE_FONT_SIZE = 28; - -const defaultParagraphStyle = { - fontSize: BASE_FONT_SIZE, - marginTop: BASE_FONT_SIZE, - marginBottom: BASE_FONT_SIZE -}; - -const TypographyElements = { - u: { - textDecoration: 'underline' - }, - s: { - textDecoration: 'line-through' - }, - i: { - fontStyle: 'italic' - }, - b: { - fontWeight: 'bold' - }, - del: { - textDecoration: 'line-through' - }, - em: { - fontStyle: 'italic' - }, - strong: { - fontWeight: 'bold' - }, - big: { - fontSize: BASE_FONT_SIZE * 1.2 - }, - small: { - fontSize: BASE_FONT_SIZE * 0.8 - } -}; - -function transformString(string) { - return { - type: 'span', - attr: { - value: string - } - }; -} - -function transformChild(child) { - let type = child.type; - let props = child.props; - let style = props.style; - let nestedChildren = props.children; - // Alias img tag - if (type === 'img') { - type = 'image'; - } - - // Transfrom to span - if (TypographyElements[type]) { - style = { - ...TypographyElements[type], - ...style - }; - type = 'span'; - } - - props.style = null; - props.children = null; - - let element = { - type, - style, - attr: props || {} - }; - - if (nestedChildren) { - if (type === 'span' && typeof nestedChildren === 'string') { - element.attr.value = nestedChildren; - } else { - element.children = transformChildren(nestedChildren); - } - } - - return element; -} - -function transformChildren(children) { - let elements = []; - if (!Array.isArray(children)) { - children = [children]; - } - - for (let i = 0; i < children.length; i++) { - let child = children[i]; - if (typeof child === 'string') { - elements.push(transformString(child)); - } else if (typeof child === 'object') { - elements.push(transformChild(child)); - } - } - - return elements; -} - -export default { - parse(component) { - let {props} = component; - let children = props.children; - - component.type = 'richtext'; - - props.style = { - ...defaultParagraphStyle, - ...props.style - }; - - props.value = transformChildren(children); ; - props.children = null; - - return component; - } -}; diff --git a/packages/driver-weex/src/elements/span.js b/packages/driver-weex/src/elements/span.js deleted file mode 100644 index d4c0785e64..0000000000 --- a/packages/driver-weex/src/elements/span.js +++ /dev/null @@ -1,13 +0,0 @@ -export default { - parse(component) { - let {props} = component; - component.type = 'text'; - - if (typeof props.children === 'string' && !props.value) { - props.value = props.children; - props.children = null; - } - - return component; - } -}; diff --git a/packages/driver-weex/src/elements/textarea.js b/packages/driver-weex/src/elements/textarea.js deleted file mode 100644 index ff46d692c6..0000000000 --- a/packages/driver-weex/src/elements/textarea.js +++ /dev/null @@ -1,19 +0,0 @@ -export default { - - /** - * parse w3c attrs to weex module attrs - * - * @param {Object} w3c component data - * @return {Object} weex component data - */ - parse(component) { - let {props} = component; - - if (typeof props.children === 'string' && !props.value) { - props.value = props.children; - props.children = null; - } - - return component; - } -}; diff --git a/packages/driver-weex/src/elements/video.js b/packages/driver-weex/src/elements/video.js deleted file mode 100644 index 876d32f425..0000000000 --- a/packages/driver-weex/src/elements/video.js +++ /dev/null @@ -1,19 +0,0 @@ -import {transformPropsAttrsToStyle, renamePropsAttr} from '../parseProps'; - -export default { - - /** - * parse w3c attrs to weex module attrs - * - * @param {Object} w3c component data - * @return {Object} weex component data - */ - parse(component) { - const {props} = component; - - // modify props - component.props = transformPropsAttrsToStyle(props, ['width', 'height']); - - return component; - } -}; diff --git a/packages/driver-weex/src/index.js b/packages/driver-weex/src/index.js index de835c56be..dee4019f6b 100644 --- a/packages/driver-weex/src/index.js +++ b/packages/driver-weex/src/index.js @@ -1,15 +1,23 @@ /** * Weex driver */ -import {convertUnit, setRem} from 'style-unit'; -import w3cElements from './elements'; - const STYLE = 'style'; const ID = 'id'; const TEXT = 'text'; const CHILDREN = 'children'; const EVENT_PREFIX_REGEXP = /^on[A-Z]/; const ARIA_PREFIX_REGEXP = /^aria-/; +const HYPHEN_REGEXP = /\-(\w)/; +const EMPTY = ''; + +function updateWeexTextValue(node) { + const value = node.children.map(function(child) { + // Comment node type + return child.nodeType === 8 ? child.value : EMPTY; + }).join(EMPTY); + + node.setAttr('value', value); +} const nodeMaps = {}; /* global __weex_document__ */ @@ -17,204 +25,167 @@ const document = typeof __weex_document__ === 'object' ? __weex_document__ : typeof document === 'object' ? document : null; -const Driver = { - deviceWidth: 750, - viewportWidth: 750, - - getDeviceWidth() { - return this.deviceWidth; - }, - - setDeviceWidth(width) { - this.deviceWidth = width; - }, +export function getElementById(id) { + return nodeMaps[id]; +} - getViewportWidth() { - return this.viewportWidth; - }, +export function createBody(type, props) { + if (document.body) { + return document.body; + } - setViewportWidth(width) { - this.viewportWidth = width; - }, + let documentElement = document.documentElement; + let body = document.createBody(type, props); + documentElement.appendChild(body); - getElementById(id) { - return nodeMaps[id]; - }, + return body; +} - createBody() { - if (document.body) { - return document.body; - } +export function createComment(content) { + return document.createComment(content); +} - let documentElement = document.documentElement; - let body = document.createBody(Driver.bodyType, Driver.bodyProps); - documentElement.appendChild(body); +export function createEmpty() { + return createComment(EMPTY); +} - return body; - }, +export function createText(text) { + // Use comment node type mock text node + return createComment(text); +} - createComment(content) { - return document.createComment(content); - }, +export function updateText(node, text) { + node.value = text; + updateWeexTextValue(node.parentNode); +} - createEmpty() { - return this.createComment(' _ '); - }, +export function createElement(type, props = {}) { + let node = document.createElement(type, { + style: props[STYLE], + }); - createText(text) { - return Driver.createElement({ - type: TEXT, - props: { - value: text, + for (let prop in props) { + let value = props[prop]; + if (prop === CHILDREN) { + continue; + } + if (value != null) { + if (prop === STYLE) { + continue; + } else if (EVENT_PREFIX_REGEXP.test(prop)) { + let eventName = prop.slice(2).toLowerCase(); + addEventListener(node, eventName, value, props); + } else { + setAttribute(node, prop, value); } - }); - }, + } + } - updateText(node, content) { - this.setAttribute(node, 'value', content); - }, + return node; +} - createElement(type, props) { - const htmlElement = w3cElements[type]; - let component = { type, props }; - if (htmlElement) { - component = htmlElement.parse(component); - } +export function appendChild(node, parent) { + parent.appendChild(node); - let events = []; - let style = {}; - let originStyle = props[STYLE]; - for (let prop in originStyle) { - style[prop] = convertUnit(originStyle[prop], prop); - } + if (parent.type === TEXT) { + updateWeexTextValue(parent); + } +} - let node = document.createElement(component.type, { - style, - }); +export function removeChild(node, parent) { + parent = parent || node.parentNode; + let id = node.attr && node.attr[ID]; + if (id != null) { + nodeMaps[id] = null; + } - this.setNativeProps(node, props, true); + parent.removeChild(node); - return node; - }, + if (parent.type === TEXT) { + updateWeexTextValue(parent); + } +} + +export function replaceChild(newChild, oldChild, parent) { + parent = parent || oldChild.parentNode; + let previousSibling = oldChild.previousSibling; + let nextSibling = oldChild.nextSibling; + removeChild(oldChild, parent); + + if (previousSibling) { + insertAfter(newChild, previousSibling, parent); + } else if (nextSibling) { + insertBefore(newChild, nextSibling, parent); + } else { + appendChild(newChild, parent); + } +} - appendChild(node, parent) { - return parent.appendChild(node); - }, +export function insertAfter(node, after, parent) { + parent = parent || after.parentNode; + parent.insertAfter(node, after); - removeChild(node, parent) { - parent = parent || node.parentNode; - let id = node.attr && node.attr[ID]; - if (id != null) { - nodeMaps[id] = null; - } - return parent.removeChild(node); - }, - - replaceChild(newChild, oldChild, parent) { - parent = parent || oldChild.parentNode; - let previousSibling = oldChild.previousSibling; - let nextSibling = oldChild.nextSibling; - this.removeChild(oldChild, parent); - - if (previousSibling) { - this.insertAfter(newChild, previousSibling, parent); - } else if (nextSibling) { - this.insertBefore(newChild, nextSibling, parent); - } else { - this.appendChild(newChild, parent); - } - }, - - insertAfter(node, after, parent) { - parent = parent || after.parentNode; - return parent.insertAfter(node, after); - }, - - insertBefore(node, before, parent) { - parent = parent || before.parentNode; - return parent.insertBefore(node, before); - }, - - addEventListener(node, eventName, eventHandler, props) { - let params = props[eventName + 'EventParams']; - return node.addEvent(eventName, eventHandler, params); - }, - - removeEventListener(node, eventName, eventHandler) { - return node.removeEvent(eventName, eventHandler); - }, - - removeAttribute(node, propKey, propValue) { - if (propKey == ID) { - nodeMaps[propValue] = null; - } - // Weex native will crash when pass null value - return node.setAttr(propKey, undefined, false); - }, + if (parent.type === TEXT) { + updateWeexTextValue(parent); + } +} - setAttribute(node, propKey, propValue) { - if (propKey == ID) { - nodeMaps[propValue] = node; - } +export function insertBefore(node, before, parent) { + parent = parent || before.parentNode; + parent.insertBefore(node, before); - // Weex only support `ariaLabel` format, convert `aria-label` format to camelcase - if (ARIA_PREFIX_REGEXP.test(propKey)) { - propKey = propKey.replace(/\-(\w)/, function(m, p1) { - return p1.toUpperCase(); - }); - } + if (parent.type === TEXT) { + updateWeexTextValue(parent); + } +} - return node.setAttr(propKey, propValue, false); - }, +export function addEventListener(node, eventName, eventHandler, props) { + // https://github.com/apache/incubator-weex/blob/master/runtime/vdom/Element.js#L421 + let params = props[eventName + 'EventParams']; + return node.addEvent(eventName, eventHandler, params); +} - setStyles(node, styles) { - // TODO if more then one style update, call setStyles will be better performance - for (let key in styles) { - let val = styles[key]; - val = convertUnit(val, key); - node.setStyle(key, val); - } - }, +export function removeEventListener(node, eventName, eventHandler) { + return node.removeEvent(eventName, eventHandler); +} + +export function removeAttribute(node, propKey, propValue) { + if (propKey == ID) { + nodeMaps[propValue] = null; + } + // Weex native will crash when pass null value + return node.setAttr(propKey, undefined, false); +} - beforeRender() { - // Turn off batched updates - document.open(); +export function setAttribute(node, propKey, propValue) { + if (propKey == ID) { + nodeMaps[propValue] = node; + } - // Init rem unit - setRem( this.getDeviceWidth() / this.getViewportWidth() ); - }, + // Weex only support `ariaLabel` format, convert `aria-label` format to camelcase + if (ARIA_PREFIX_REGEXP.test(propKey)) { + propKey = propKey.replace(HYPHEN_REGEXP, function(m, p) { + return p.toUpperCase(); + }); + } - afterRender() { - if (document.listener && document.listener.createFinish) { - document.listener.createFinish(); - } + return node.setAttr(propKey, propValue, false); +} - // Turn on batched updates - document.close(); - }, +export function setStyle(node, style) { + node.setStyles(style); +} - setNativeProps(node, props, skipSetStyles) { - for (let prop in props) { - let value = props[prop]; - if (prop === CHILDREN) { - continue; - } +export function beforeRender() { + // Turn off batched updates + document.open(); +} - if (value != null) { - if (prop === STYLE) { - if (skipSetStyles) { - continue; - } - this.setStyles(node, value); - } else if (EVENT_PREFIX_REGEXP.test(prop)) { - let eventName = prop.slice(2).toLowerCase(); - this.addEventListener(node, eventName, value, props); - } else { - this.setAttribute(node, prop, value); - } - } - } +export function afterRender() { + if (document.listener && document.listener.createFinish) { + document.listener.createFinish(); } -}; -export default Driver; + // Turn on batched updates + document.close(); +} diff --git a/packages/driver-weex/src/parseProps.js b/packages/driver-weex/src/parseProps.js deleted file mode 100644 index 972fa6087f..0000000000 --- a/packages/driver-weex/src/parseProps.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * transformPropAttrsToStyle - * - * @param {Object} props - * @param {Array} attrs - */ -export function transformPropsAttrsToStyle(props, attrs) { - props.style = props.style || {}; - - attrs.forEach((attr) => { - if (props[attr] && !props.style[attr]) { - props.style[attr] = props[attr]; - delete props[attr]; - } - }); - - return props; -}; - -/** - * renamePropsAttr - * - * @param {Object} props - * @param {String} originalAttrName - * @param {String} newAttrName - */ -export function renamePropsAttr(props, originalAttrName, newAttrName) { - if (props[originalAttrName] && !props[newAttrName]) { - props[newAttrName] = props[originalAttrName]; - delete props[originalAttrName]; - } - - return props; -} diff --git a/packages/rax-cli/bin/rax.js b/packages/rax-cli/bin/rax.js index 08496ebfc0..1dc6470bf4 100755 --- a/packages/rax-cli/bin/rax.js +++ b/packages/rax-cli/bin/rax.js @@ -123,13 +123,16 @@ function askProjectInformaction(name, verbose) { type: 'list', name: 'projectType', message: 'What\'s your project type?', - choices: [{ - name: 'WebApp', - value: 'webapp' - }, { - name: 'MiniApp', - value: 'miniapp' - }], + choices: [ + { + name: 'WebApp', + value: 'webapp' + }, + { + name: 'WeexApp', + value: 'weexapp' + } + ], default: 'webapp' }, { @@ -183,7 +186,7 @@ function createProject(name, verbose, userAnswers) { if (!isAutoInstalled) { console.log(chalk.white(' ' + (pkgManager === 'npm' ? 'npm install' : 'yarn'))); } - console.log(chalk.white(' ' + pkgManager + ' run start')); + console.log(chalk.white(' ' + pkgManager + ' start')); }); } diff --git a/packages/rax-cli/package.json b/packages/rax-cli/package.json index a8651f44b9..e0883fcfe3 100644 --- a/packages/rax-cli/package.json +++ b/packages/rax-cli/package.json @@ -1,6 +1,6 @@ { "name": "rax-cli", - "version": "1.0.2", + "version": "1.1.0-beta.2", "license": "BSD-3-Clause", "description": "Command line interface for Rax", "main": "src/index.js", diff --git a/packages/rax-cli/src/generator/miniapp/_eslintrc.js b/packages/rax-cli/src/generator/miniapp/_eslintrc.js index a069797bc7..55dbd80297 100644 --- a/packages/rax-cli/src/generator/miniapp/_eslintrc.js +++ b/packages/rax-cli/src/generator/miniapp/_eslintrc.js @@ -8,6 +8,13 @@ module.exports = { 'jest': true, 'commonjs': true }, + 'globals': { + 'App': true, + 'Page': true, + 'getApp': true, + 'Component': true, + 'my': true + }, 'parserOptions': { 'sourceType': 'module', 'ecmaVersion': 6, @@ -85,7 +92,7 @@ module.exports = { 'eol-last': 'off', 'func-names': 'off', 'new-cap': ['error', { - 'newIsCap': true + 'capIsNewExceptions': ['App', 'Page', 'Component'] }], 'key-spacing': ['error', { 'beforeColon': false, diff --git a/packages/rax-cli/src/generator/miniapp/src/app.css b/packages/rax-cli/src/generator/miniapp/app.css similarity index 100% rename from packages/rax-cli/src/generator/miniapp/src/app.css rename to packages/rax-cli/src/generator/miniapp/app.css diff --git a/packages/rax-cli/src/generator/miniapp/app.js b/packages/rax-cli/src/generator/miniapp/app.js new file mode 100644 index 0000000000..be70a3990d --- /dev/null +++ b/packages/rax-cli/src/generator/miniapp/app.js @@ -0,0 +1,5 @@ +App({ + onLaunch(options) { + + }, +}); \ No newline at end of file diff --git a/packages/rax-cli/src/generator/miniapp/app.json b/packages/rax-cli/src/generator/miniapp/app.json new file mode 100644 index 0000000000..4aa9e59d1b --- /dev/null +++ b/packages/rax-cli/src/generator/miniapp/app.json @@ -0,0 +1,8 @@ +{ + "pages": [ + "pages/index/index" + ], + "window": { + "defaultTitle": "MiniApp" + } +} \ No newline at end of file diff --git a/packages/rax-cli/src/generator/miniapp/manifest.json b/packages/rax-cli/src/generator/miniapp/manifest.json deleted file mode 100644 index f9003cecfd..0000000000 --- a/packages/rax-cli/src/generator/miniapp/manifest.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "manifest_version": 1, - "pages": { - "index": "src/pages/index" - }, - "homepage": "index", - "window": { - "backgroundTextStyle": "light", - "navigationBarBackgroundColor": "#ff5000", - "navigationBarTitleText": "MiniApp", - "navigationBarTextStyle": "black" - }, - "tabBar": { - "color": "#515151", - "selectedColor": "#8742fa", - "backgroundColor": "#ffffff", - "borderStyle": "#999999", - "position": "bottom", - "list": [ - { - "pageName": "index", - "text": "Home", - "iconPath": "http://gw.alicdn.com/tps/TB12VVsPFXXXXcvXpXXXXXXXXXX-72-72.png", - "selectedIconPath": "http://gw.alicdn.com/tps/TB1sMUnPpXXXXXUapXXXXXXXXXX-138-138.png" - } - ] - } -} diff --git a/packages/rax-cli/src/generator/miniapp/package.json b/packages/rax-cli/src/generator/miniapp/package.json index f5bb19cba4..561f48d989 100644 --- a/packages/rax-cli/src/generator/miniapp/package.json +++ b/packages/rax-cli/src/generator/miniapp/package.json @@ -8,11 +8,10 @@ "lint": "eslint --ext .js --ext .jsx ./src" }, "dependencies": { - "rax": "^1.0.0", - "atag": "^0.1.31" + "rax": "^1.0.0" }, "devDependencies": { - "rax-scripts": "^1.0.0", + "rax-scripts": "^1.1.0-beta", "eslint": "^5.15.1", "babel-eslint": "^10.0.1" } diff --git a/packages/rax-cli/src/generator/miniapp/pages/index/index.css b/packages/rax-cli/src/generator/miniapp/pages/index/index.css new file mode 100644 index 0000000000..31d60dc466 --- /dev/null +++ b/packages/rax-cli/src/generator/miniapp/pages/index/index.css @@ -0,0 +1,7 @@ +page { + background-color: black; +} + +.title { + color: white; +} \ No newline at end of file diff --git a/packages/rax-cli/src/generator/miniapp/pages/index/index.js b/packages/rax-cli/src/generator/miniapp/pages/index/index.js new file mode 100644 index 0000000000..d212dc0a3e --- /dev/null +++ b/packages/rax-cli/src/generator/miniapp/pages/index/index.js @@ -0,0 +1,5 @@ +Page({ + onLoad(query) { + + }, +}); \ No newline at end of file diff --git a/packages/rax-cli/src/generator/miniapp/pages/index/index.jsx b/packages/rax-cli/src/generator/miniapp/pages/index/index.jsx new file mode 100644 index 0000000000..05040decab --- /dev/null +++ b/packages/rax-cli/src/generator/miniapp/pages/index/index.jsx @@ -0,0 +1,17 @@ +import {createElement, Component} from 'rax'; + +export default class extends Component { + state = { + name: 'world' + } + + handleTap() { + this.setState({ + name: 'miniapp' + }); + } + + render() { + return Hello {this.state.name}; + } +} \ No newline at end of file diff --git a/packages/rax-cli/src/generator/miniapp/public/index.html b/packages/rax-cli/src/generator/miniapp/public/index.html deleted file mode 100644 index c7b7957cc9..0000000000 --- a/packages/rax-cli/src/generator/miniapp/public/index.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - MiniApp - - - - - - - - diff --git a/packages/rax-cli/src/generator/miniapp/src/app.js b/packages/rax-cli/src/generator/miniapp/src/app.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/rax-cli/src/generator/miniapp/src/pages/index.html b/packages/rax-cli/src/generator/miniapp/src/pages/index.html deleted file mode 100644 index 7ae3e103c8..0000000000 --- a/packages/rax-cli/src/generator/miniapp/src/pages/index.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - \ No newline at end of file diff --git a/packages/rax-cli/src/generator/webapp/package.json b/packages/rax-cli/src/generator/webapp/package.json index 22c8e2c3d6..818c8e1024 100644 --- a/packages/rax-cli/src/generator/webapp/package.json +++ b/packages/rax-cli/src/generator/webapp/package.json @@ -12,7 +12,7 @@ "driver-dom": "^1.0.0" }, "devDependencies": { - "rax-scripts": "^1.0.0", + "rax-scripts": "^1.1.0-beta", "eslint": "^5.15.1", "babel-eslint": "^10.0.1", "eslint-plugin-react": "^7.12.4" diff --git a/packages/rax-cli/src/generator/weexapp/README.md b/packages/rax-cli/src/generator/weexapp/README.md new file mode 100644 index 0000000000..ba907cec24 --- /dev/null +++ b/packages/rax-cli/src/generator/weexapp/README.md @@ -0,0 +1,19 @@ +# rax-starter-kit + +## Getting Started + +### `npm run start` + +Runs the app in development mode. + +Open [http://localhost:9999](http://localhost:9999) to view it in the browser. + +The page will reload if you make edits. + +### `npm run lint` + +You will see the lint errors in the console. + +### `npm run build` + +Builds the app for production to the `build` folder. diff --git a/packages/rax-cli/src/generator/weexapp/_eslintrc.js b/packages/rax-cli/src/generator/weexapp/_eslintrc.js new file mode 100644 index 0000000000..5142142486 --- /dev/null +++ b/packages/rax-cli/src/generator/weexapp/_eslintrc.js @@ -0,0 +1,168 @@ +module.exports = { + 'root': true, + 'parser': 'babel-eslint', + 'env': { + 'browser': true, + 'node': true, + 'es6': true, + 'jest': true, + 'commonjs': true + }, + 'plugins': [ + 'react' + ], + 'settings': { + 'react': { + 'pragma': 'createElement', // Pragma to use, default to "React" + 'version': 'latest', + } + }, + 'parserOptions': { + 'sourceType': 'module', + 'ecmaVersion': 6, + 'ecmaFeatures': { + 'jsx': true, + 'generators': true, + 'experimentalObjectRestSpread': true + } + }, + 'rules': { + // ES6 + 'prefer-const': 'off', + 'no-const-assign': 'error', + 'no-class-assign': 'error', + 'no-dupe-class-members': 'error', + 'rest-spread-spacing': 'error', + 'no-duplicate-imports': 'error', + 'no-useless-rename': 'error', + 'arrow-spacing': 'error', + 'no-useless-computed-key': 'error', + 'template-curly-spacing': 'error', + 'generator-star-spacing': ['error', {'before': false, 'after': true}], + 'yield-star-spacing': ['error', {'before': false, 'after': true}], + 'strict': ['off', 'global'], + 'global-strict': ['off', 'always'], + 'no-extra-strict': 'off', + 'no-shadow': 'off', + 'no-unused-vars': ['off', { + 'vars': 'local', + 'args': 'after-used', + 'varsIgnorePattern': 'createElement' + }], + 'no-undef': 'error', + 'no-unused-expressions': 'off', + 'no-use-before-define': 'off', + 'yoda': 'off', + 'eqeqeq': 'off', + 'no-new': 'off', + 'consistent-return': 'off', + 'dot-notation': ['error', { + 'allowKeywords': true + }], + 'no-extend-native': 'error', + 'no-native-reassign': 'error', + 'no-return-assign': 'off', + 'no-constant-condition': ['error', { + 'checkLoops': false + }], + 'no-caller': 'error', + 'no-loop-func': 'off', + + // Node.js + 'no-console': 'off', + 'no-catch-shadow': 'error', + 'no-new-require': 'off', + 'no-mixed-requires': ['off', false], + 'no-path-concat': 'off', + 'handle-callback-err': 'off', + + 'no-empty': 'off', + 'indent': ['error', 2, { + 'SwitchCase': 1 + }], + 'camelcase': ['off', { + 'properties': 'always' + }], + 'quotes': ['error', 'single', 'avoid-escape'], + 'brace-style': ['error', '1tbs', { + 'allowSingleLine': false + }], + 'comma-spacing': ['error', { + 'before': false, + 'after': true + }], + 'comma-style': ['error', 'last'], + 'eol-last': 'off', + 'func-names': 'off', + 'new-cap': ['error', { + 'newIsCap': true + }], + 'key-spacing': ['error', { + 'beforeColon': false, + 'afterColon': true + }], + 'no-multi-spaces': 'error', + 'no-multiple-empty-lines': 'error', + 'no-new-object': 'error', + 'no-spaced-func': 'error', + 'no-trailing-spaces': 'error', + 'no-extra-parens': 'error', + 'padded-blocks': ['error', 'never'], + 'semi': 'error', + 'semi-spacing': 'error', + 'keyword-spacing': 'error', + 'space-before-blocks': 'error', + 'space-before-function-paren': ['error', 'never'], + 'space-infix-ops': 'error', + 'spaced-comment': ['error', 'always', { + 'line': { + 'markers': ['/'], + 'exceptions': ['-', '+'] + }, + 'block': { + 'markers': ['!'], + 'exceptions': ['*'], + 'balanced': true + } + }], + + /** + * React & JSX + */ + 'jsx-quotes': ['error', 'prefer-double'], + 'react/display-name': 'off', + 'react/jsx-boolean-value': ['off', 'always'], + 'react/jsx-no-bind': ['error', { + 'allowArrowFunctions': true + }], + 'react/prefer-es6-class': 'error', + 'react/jsx-curly-spacing': 'error', + 'react/jsx-indent-props': ['error', 2], // 2 spaces indentation + 'react/jsx-no-duplicate-props': 'error', + 'react/jsx-no-undef': 'error', + 'react/jsx-tag-spacing': 'error', + 'react/jsx-no-comment-textnodes': 'error', + 'react/jsx-equals-spacing': 'error', + 'react/jsx-handler-names': 'off', + 'react/jsx-uses-react': 'error', + 'react/jsx-uses-vars': 'error', + 'react/no-is-mounted': 'error', + 'react/no-children-prop': 'error', + 'react/no-did-mount-set-state': 'error', + 'react/no-did-update-set-state': 'error', + 'react/no-unknown-property': 'error', + 'react/style-prop-object': 'error', + 'react/react-in-jsx-scope': 'error', + 'react/self-closing-comp': 'error', + 'react/sort-comp': ['off', { + 'order': [ + 'lifecycle', + '/^on.+$/', + '/^(get|set)(?!(InitialState$|DefaultProps$|ChildContext$)).+$/', + 'everything-else', + '/^render.+$/', + 'render' + ] + }] + } +}; diff --git a/packages/rax-cli/src/generator/weexapp/_gitignore b/packages/rax-cli/src/generator/weexapp/_gitignore new file mode 100644 index 0000000000..2c46a825e4 --- /dev/null +++ b/packages/rax-cli/src/generator/weexapp/_gitignore @@ -0,0 +1,11 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +*~ +*.swp +*.log + +.DS_Store +.idea/ + +node_modules/ +build/ diff --git a/packages/rax-cli/src/generator/weexapp/package.json b/packages/rax-cli/src/generator/weexapp/package.json new file mode 100644 index 0000000000..1be965bdef --- /dev/null +++ b/packages/rax-cli/src/generator/weexapp/package.json @@ -0,0 +1,20 @@ +{ + "name": "__YourProjectName__", + "author": "__AuthorName__", + "version": "0.0.0", + "scripts": { + "start": "rax-scripts start --type=weexapp", + "build": "rax-scripts build --type=weexapp", + "lint": "eslint --ext .js --ext .jsx ./src" + }, + "dependencies": { + "rax": "^1.0.0", + "driver-weex": "^1.0.0" + }, + "devDependencies": { + "rax-scripts": "^1.1.0-beta", + "eslint": "^5.15.1", + "babel-eslint": "^10.0.1", + "eslint-plugin-react": "^7.12.4" + } +} \ No newline at end of file diff --git a/packages/rax-cli/src/generator/weexapp/src/App.jsx b/packages/rax-cli/src/generator/weexapp/src/App.jsx new file mode 100644 index 0000000000..24adc020a4 --- /dev/null +++ b/packages/rax-cli/src/generator/weexapp/src/App.jsx @@ -0,0 +1,11 @@ +import {createElement, useState} from 'rax'; + +export default (props) => { + const [name, setName] = useState(props.name); + const handleClick = () => { + setName('rax'); + }; + return ( + Hello {name} + ); +}; \ No newline at end of file diff --git a/packages/rax-cli/src/generator/weexapp/src/index.jsx b/packages/rax-cli/src/generator/weexapp/src/index.jsx new file mode 100644 index 0000000000..08e8f91cce --- /dev/null +++ b/packages/rax-cli/src/generator/weexapp/src/index.jsx @@ -0,0 +1,5 @@ +import {createElement, render} from 'rax'; +import * as DriverWeex from 'driver-weex'; +import App from './App'; + +render(, DriverWeex.createBody(), { driver: DriverWeex }); \ No newline at end of file diff --git a/packages/rax-scripts/README.md b/packages/rax-scripts/README.md index 7ac5a01606..5932105b38 100644 --- a/packages/rax-scripts/README.md +++ b/packages/rax-scripts/README.md @@ -1,6 +1,6 @@ # rax-scripts [![npm](https://img.shields.io/npm/v/rax-scripts.svg)](https://www.npmjs.com/package/rax-scripts) [![Dependency Status](https://david-dm.org/alibaba/rax.svg?path=packages/rax-scripts)](https://david-dm.org/alibaba/rax.svg?path=packages/rax-scripts) [![Known Vulnerabilities](https://snyk.io/test/npm/rax-scripts/badge.svg)](https://snyk.io/test/npm/rax-scripts) -Rax project development tools. +Project scripts for Rax. ## Commands diff --git a/packages/rax-scripts/bin/rax-scripts-build.js b/packages/rax-scripts/bin/rax-scripts-build.js index bcba00691e..dbb9181d9d 100644 --- a/packages/rax-scripts/bin/rax-scripts-build.js +++ b/packages/rax-scripts/bin/rax-scripts-build.js @@ -4,7 +4,7 @@ const program = require('commander'); const optionsAttachToEnv = require('../src/utils/optionsAttachToEnv'); program - .option('--type ', 'set application type, Enum: ["webapp", "miniapp", "miniprogram"].', /^(webapp|miniapp|miniprogram)$/i, 'webapp') + .option('--type ', 'set application type', 'webapp') .option('--dir ', 'set project path') .option('--debug', 'enabled debug mode', false) .option('--target ', 'set project path') diff --git a/packages/rax-scripts/bin/rax-scripts-start.js b/packages/rax-scripts/bin/rax-scripts-start.js index 77f1de6606..b3635377c4 100644 --- a/packages/rax-scripts/bin/rax-scripts-start.js +++ b/packages/rax-scripts/bin/rax-scripts-start.js @@ -4,7 +4,7 @@ const program = require('commander'); const optionsAttachToEnv = require('../src/utils/optionsAttachToEnv'); program - .option('--type ', 'set application type, Enum: ["webapp", "miniapp", "miniprogram"].', /^(webapp|miniapp|miniprogram)$/i, 'webapp') + .option('--type ', 'set application type', 'webapp') .option('-p, --port ', 'set server port', 9999) .option('--host ', 'set server host') .option('--dir ', 'set project path') diff --git a/packages/rax-scripts/package.json b/packages/rax-scripts/package.json index 2458100d4d..1711a0292e 100644 --- a/packages/rax-scripts/package.json +++ b/packages/rax-scripts/package.json @@ -1,8 +1,8 @@ { "name": "rax-scripts", - "version": "1.0.0", + "version": "1.1.0-beta.5", "license": "BSD-3-Clause", - "description": "Configuration and scripts for Rax App.", + "description": "Project scripts for Rax.", "bin": { "rax-scripts": "bin/rax-scripts.js" }, @@ -41,24 +41,19 @@ "camelcase": "^5.0.0", "case-sensitive-paths-webpack-plugin": "^2.1.2", "chalk": "^2.4.1", - "chokidar": "^2.0.4", "commander": "^2.19.0", "copy-webpack-plugin": "^4.6.0", "cross-spawn": "^6.0.5", "css-loader": "^2.1.0", "decamelize": "^2.0.0", "file-loader": "^2.0.0", - "ghooks": "^2.0.4", "glob": "^7.1.3", "html-webpack-plugin": "^3.2.0", "image-source-loader": "^0.6.5", "internal-ip": "^3.0.1", "json-loader": "^0.5.7", "loader-utils": "^1.1.0", - "miniapp-manifest-loader": "^0.1.3", - "miniapp-webpack-plugin": "^0.1.0", "minimatch": "^3.0.4", - "mp-loader": "^0.7.13", "path-exists": "^3.0.0", "postcss-import": "^12.0.1", "postcss-loader": "^3.0.0", @@ -66,18 +61,16 @@ "rax-hot-module-replacement-webpack-plugin": "^0.6.5", "rax-webpack-plugin": "^0.6.5", "rimraf": "^2.6.2", - "sfc-loader": "^0.7.2-beta.0", "strip-ansi": "^5.0.0", "stylesheet-loader": "^0.6.5", - "sw-precache-webpack-plugin": "^0.11.5", "ts-loader": "^5.3.3", "typescript": "^3.2.4", - "uglifyjs-webpack-plugin": "^2.0.1", + "uglifyjs-webpack-plugin": "^2.1.2", "uppercamelcase": "^3.0.0", "webpack": "^4.27.1", "webpack-bundle-analyzer": "^3.0.3", "webpack-dev-server": "^3.1.11", - "webpack-manifest-plugin": "^2.0.4", - "webpack-merge": "^4.1.5" + "webpack-merge": "^4.1.5", + "webpack-sources": "^1.3.0" } } diff --git a/packages/rax-scripts/src/build.js b/packages/rax-scripts/src/build.js index 18f9074a23..c4ddd790aa 100644 --- a/packages/rax-scripts/src/build.js +++ b/packages/rax-scripts/src/build.js @@ -15,8 +15,8 @@ const colors = require('chalk'); const rimraf = require('rimraf'); const createWebpackCompiler = require('./utils/createWebpackCompiler'); -var componentCompiler = require('./utils/componentCompiler'); const pathConfig = require('./config/path.config'); +const componentCompiler = require('./utils/componentCompiler'); function buildCompiler(config) { const compiler = createWebpackCompiler(config); @@ -33,8 +33,7 @@ function buildCompiler(config) { const webpackConfigMap = { webapp: './config/webapp/webpack.config.prod', - miniapp: './config/miniapp/webpack.config.prod', - miniprogram: './config/miniprogram/webpack.config.prod', + weexapp: './config/weexapp/webpack.config.prod', component: './config/component/webpack.config.prod', }; diff --git a/packages/rax-scripts/src/config/babel.config.js b/packages/rax-scripts/src/config/babel.config.js index 3d68ef9bc5..16ee0f9d06 100644 --- a/packages/rax-scripts/src/config/babel.config.js +++ b/packages/rax-scripts/src/config/babel.config.js @@ -10,6 +10,7 @@ module.exports = { chrome: '49', ios: '8' }, + loose: true, modules: type === 'miniprogram' ? 'commonjs' : 'auto', include: [ 'transform-computed-properties' @@ -34,11 +35,11 @@ module.exports = { require.resolve('@babel/plugin-proposal-export-default-from'), [ require.resolve('@babel/plugin-proposal-optional-chaining'), - { loose: false }, + { loose: true }, ], [ require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'), - { loose: false }, + { loose: true }, ], // Stage 2 [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }], @@ -46,7 +47,7 @@ module.exports = { // Stage 3 [ require.resolve('@babel/plugin-proposal-class-properties'), - { loose: false }, + { loose: true }, ] ] }; diff --git a/packages/rax-scripts/src/config/component/README.md b/packages/rax-scripts/src/config/component/README.md new file mode 100644 index 0000000000..e1b89a4fd2 --- /dev/null +++ b/packages/rax-scripts/src/config/component/README.md @@ -0,0 +1 @@ +Webpack config for rax component \ No newline at end of file diff --git a/packages/rax-scripts/src/config/miniapp/README.md b/packages/rax-scripts/src/config/miniapp/README.md new file mode 100644 index 0000000000..88c1493f9c --- /dev/null +++ b/packages/rax-scripts/src/config/miniapp/README.md @@ -0,0 +1 @@ +Webpack config for mini-program app \ No newline at end of file diff --git a/packages/rax-scripts/src/config/miniapp/webpack.config.base.js b/packages/rax-scripts/src/config/miniapp/webpack.config.base.js deleted file mode 100644 index b5fa8b1c29..0000000000 --- a/packages/rax-scripts/src/config/miniapp/webpack.config.base.js +++ /dev/null @@ -1,114 +0,0 @@ -'use strict'; -/* eslint no-console: 0 */ -const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const webpackConfig = require('../webpack.config'); -const pathConfig = require('../path.config'); -const babelConfig = require('../babel.config'); - -const SFCLoader = require.resolve('sfc-loader'); - -module.exports = { - mode: webpackConfig.mode, - context: webpackConfig.context, - // Compile target should "web" when use hot reload - target: webpackConfig.target, - entry: webpackConfig.entry, - output: webpackConfig.output, - resolve: webpackConfig.resolve, - plugins: [ - new HtmlWebpackPlugin({ - inject: true, - template: pathConfig.appHtml, - }), - webpackConfig.plugins.define, - webpackConfig.plugins.caseSensitivePaths, - process.env.ANALYZER ? new BundleAnalyzerPlugin() : null, - ].filter(Boolean), - module: { - rules: [ - { - test: /\.(js|mjs|jsx)$/, - exclude: /(node_modules|bower_components)/, - use: [ - { - loader: require.resolve('babel-loader'), - options: babelConfig, - }, - ], - }, - { - test: /manifest\.json$/, - type: 'javascript/auto', - exclude: /(node_modules|bower_components)/, - use: [ - { - loader: require.resolve('babel-loader'), - options: babelConfig, - }, - { - loader: require.resolve('miniapp-manifest-loader'), - }, - ], - }, - { - test: /\.(html|vue|sfc)$/, - oneOf: [ - { - resourceQuery: /\?style/, - use: [ - { - loader: require.resolve('css-loader'), - options: { - sourceMap: true, - importLoaders: 1 // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader - } - }, - { - loader: require.resolve('postcss-loader'), - options: { - sourceMap: true, - plugins: [ - require('postcss-import')({ resolve: require('./styleResolver') }), - require('../plugins/PostcssPluginRpx2rem'), - require('../plugins/PostcssPluginTagPrefix'), - require('autoprefixer')({ - remove: false, - browsers: ['ios_saf 8'], - }), - ] - } - }, - { - loader: SFCLoader, - options: { - part: 'style', - }, - } - ] - }, - { - loader: SFCLoader, - options: { - builtInRax: true, - module: 'commonjs', - }, - } - ], - exclude: [pathConfig.appHtml], - }, - { - test: /\.(svg|png|webp|jpe?g|gif)$/i, - use: [ - // TODO: maybe use image-source-loader - { - loader: require.resolve('file-loader'), - options: { - name: 'images/[name]-[hash:8].[ext]', - }, - }, - ], - }, - ], - }, -}; diff --git a/packages/rax-scripts/src/config/miniapp/webpack.config.prod.js b/packages/rax-scripts/src/config/miniapp/webpack.config.prod.js deleted file mode 100644 index 9dbaefbf5a..0000000000 --- a/packages/rax-scripts/src/config/miniapp/webpack.config.prod.js +++ /dev/null @@ -1,77 +0,0 @@ -/* eslint-disable no-console */ -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const ManifestPlugin = require('webpack-manifest-plugin'); -const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin'); -const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); -const webpackMerge = require('webpack-merge'); - -const pathConfig = require('../path.config'); -const webpackConfigBase = require('./webpack.config.base'); - -const registerServiceWorker = ``; - -const webpackConfigProd = webpackMerge(webpackConfigBase, { - devtool: process.env.DEBUG ? 'module-source-map' : 'none', - entry: { - 'index.min': [pathConfig.appManifest], - }, - plugins: [ - new HtmlWebpackPlugin({ - inject: true, - template: pathConfig.appHtml, - registerServiceWorker: registerServiceWorker, - }), - new ManifestPlugin({ - fileName: 'asset-manifest.json', - }), - new SWPrecacheWebpackPlugin({ - dontCacheBustUrlsMatching: /\.\w{8}\./, - filename: 'service-worker.js', - logger(message) { - if (message.indexOf('Total precache size is') === 0) { - return; - } - if (message.indexOf('Skipping static resource') === 0) { - return; - } - console.log(message); - }, - minify: true, - staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/], - }), - ], - optimization: { - minimize: process.env.DEBUG ? false : true, - minimizer: [ - new UglifyJsPlugin({ - cache: true, - parallel: true, - uglifyOptions: { - compress: { - unused: false, - warnings: false, - }, - output: { - // eslint-disable-next-line camelcase - ascii_only: true, - comments: 'some', - beautify: false, - }, - mangle: true, - }, - }), - ], - }, -}); - -module.exports = webpackConfigProd; diff --git a/packages/rax-scripts/src/config/miniprogram/webpack.config.base.js b/packages/rax-scripts/src/config/miniprogram/webpack.config.base.js deleted file mode 100644 index 39e84f02fa..0000000000 --- a/packages/rax-scripts/src/config/miniprogram/webpack.config.base.js +++ /dev/null @@ -1,124 +0,0 @@ -'use strict'; -/* eslint no-console: 0 */ -const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); -const webpackConfig = require('../webpack.config'); -const pathConfig = require('../path.config'); -const babelConfig = require('../babel.config'); - -const { - MiniAppWebpackPlugin, - PostcssPluginRpx2rem, - PostcssPluginTagPrefix, - styleResolver -} = require('miniapp-webpack-plugin'); - -// Babel plugin to add the opportunity to use import and require with root based paths. -babelConfig.plugins.push([ - require.resolve('babel-plugin-root-import'), - { - rootPathPrefix: '/', - }, -]); - -const babelLoaderConfig = { - loader: require.resolve('babel-loader'), - options: babelConfig, -}; - -module.exports = { - mode: webpackConfig.mode, - context: webpackConfig.context, - // Compile target should "web" when use hot reload - target: webpackConfig.target, - entry: webpackConfig.entry, - output: webpackConfig.output, - resolve: webpackConfig.resolve, - externals: [ - function(context, request, callback) { - if (/^@(core|schema)\//.test(request)) { - return callback(null, `commonjs2 ${request}`); - } - callback(); - }, - ], - plugins: [ - webpackConfig.plugins.define, - webpackConfig.plugins.caseSensitivePaths, - new MiniAppWebpackPlugin({ - target: process.env.TARGET || 'web', - }), - process.env.ANALYZER ? new BundleAnalyzerPlugin() : null, - ].filter(Boolean), - module: { - rules: [ - { - test: /\.(js|mjs)$/, - use: [babelLoaderConfig], - }, - /** - * Post babel loader to compile template attribute expression - */ - { - test: /\.axml$/, - enforce: 'post', - use: [babelLoaderConfig], - }, - { - test: /\.(html|vue|sfc)$/, - use: [ - { - loader: require.resolve('sfc-loader'), - options: { - builtInRuntime: false, - builtInRax: false, - preserveWhitespace: false, - module: 'commonjs' - }, - }, - ], - exclude: [pathConfig.appHtml], - }, - { - test: /\.(svg|png|webp|jpe?g|gif)$/i, - use: [ - // TODO: maybe use image-source-loader - { - loader: require.resolve('file-loader'), - options: { - name: 'images/[name]-[hash:8].[ext]', - }, - }, - ], - }, - { - test: /\.acss$/, - use: [ - { - loader: require.resolve('css-loader'), - options: { - importLoaders: 1 // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader - } - }, - { - loader: require.resolve('postcss-loader'), - options: { - plugins: [ - require('postcss-import')({ resolve: styleResolver }), - PostcssPluginRpx2rem, - PostcssPluginTagPrefix, - require('autoprefixer')({ - remove: false, - browsers: ['ios_saf 8'], - }), - ] - } - }, - ] - }, - { - test: /app\.(js|mjs)$/, - loader: require.resolve('mp-loader'), - }, - ], - }, -}; diff --git a/packages/rax-scripts/src/config/miniprogram/webpack.config.dev.js b/packages/rax-scripts/src/config/miniprogram/webpack.config.dev.js deleted file mode 100644 index 38aafa7bc9..0000000000 --- a/packages/rax-scripts/src/config/miniprogram/webpack.config.dev.js +++ /dev/null @@ -1,26 +0,0 @@ -'use strict'; -/* eslint no-console: 0 */ -const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); -const webpack = require('webpack'); -const webpackMerge = require('webpack-merge'); - -const webpackConfigBase = require('./webpack.config.base'); -const pathConfig = require('../path.config'); - -const webpackConfigDev = webpackMerge(webpackConfigBase, { - devtool: 'cheap-eval-source-map', - entry: { - index: [pathConfig.miniProgramIndexJs] - }, - output: { - // show at devtool console panel - devtoolModuleFilenameTemplate: 'webpack://[namespace]/[resource-path]', - devtoolNamespace: 'miniapp', - }, - plugins: [ - new webpack.NoEmitOnErrorsPlugin(), - process.env.ANALYZER ? new BundleAnalyzerPlugin() : null, - ], -}); - -module.exports = webpackConfigDev; diff --git a/packages/rax-scripts/src/config/miniprogram/webpack.config.prod.js b/packages/rax-scripts/src/config/miniprogram/webpack.config.prod.js deleted file mode 100644 index a8c5fadb54..0000000000 --- a/packages/rax-scripts/src/config/miniprogram/webpack.config.prod.js +++ /dev/null @@ -1,43 +0,0 @@ -const path = require('path'); -const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); -const webpackMerge = require('webpack-merge'); - -const pathConfig = require('../path.config'); -const webpackConfigBase = require('./webpack.config.base'); - -const isDebug = process.env.DEBUG; - -const webpackConfigProd = webpackMerge(webpackConfigBase, { - devtool: isDebug ? 'cheap-eval-source-map' : false, - entry: { - 'index.min': [pathConfig.miniProgramIndexJs], - }, - output: { - path: path.resolve(pathConfig.appDirectory, process.env.OUTPUT_PATH || 'build'), - publicPath: process.env.PUBLIC_PATH || '/', - }, - optimization: { - minimize: isDebug ? false : true, - minimizer: [ - new UglifyJsPlugin({ - cache: true, - parallel: true, - uglifyOptions: { - compress: { - unused: false, - warnings: false, - }, - output: { - // eslint-disable-next-line camelcase - ascii_only: true, - comments: 'some', - beautify: false, - }, - mangle: true, - }, - }), - ], - }, -}); - -module.exports = webpackConfigProd; diff --git a/packages/rax-scripts/src/config/universalapp/README.md b/packages/rax-scripts/src/config/universalapp/README.md new file mode 100644 index 0000000000..5f4e1ee063 --- /dev/null +++ b/packages/rax-scripts/src/config/universalapp/README.md @@ -0,0 +1 @@ +Webpack config for universal app \ No newline at end of file diff --git a/packages/rax-scripts/src/config/webapp/README.md b/packages/rax-scripts/src/config/webapp/README.md new file mode 100644 index 0000000000..5791fb7516 --- /dev/null +++ b/packages/rax-scripts/src/config/webapp/README.md @@ -0,0 +1 @@ +Webpack config for web app \ No newline at end of file diff --git a/packages/rax-scripts/src/config/webapp/webpack.config.base.js b/packages/rax-scripts/src/config/webapp/webpack.config.base.js index a950484820..03f5f74a76 100644 --- a/packages/rax-scripts/src/config/webapp/webpack.config.base.js +++ b/packages/rax-scripts/src/config/webapp/webpack.config.base.js @@ -1,5 +1,5 @@ 'use strict'; -/* eslint no-console: 0 */ + const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpackConfig = require('../webpack.config'); @@ -14,8 +14,7 @@ babelConfig.presets.push([ ]); babelConfig.plugins.push( - require.resolve('babel-plugin-transform-jsx-stylesheet'), - require.resolve('rax-hot-loader/babel') + require.resolve('babel-plugin-transform-jsx-stylesheet') ); module.exports = { @@ -24,10 +23,7 @@ module.exports = { // Compile target should "web" when use hot reload target: webpackConfig.target, entry: webpackConfig.entry, - output: Object.assign({ - pathinfo: true, - }, webpackConfig.output), - + output: webpackConfig.output, resolve: webpackConfig.resolve, plugins: [ @@ -61,21 +57,6 @@ module.exports = { }, ], }, - { - test: /\.(sfc|vue|html)$/, - use: [ - { - loader: require.resolve('sfc-loader'), - options: { - builtInRuntime: false, - builtInRax: false, - preserveWhitespace: false, - module: 'commonjs' - }, - }, - ], - exclude: [pathConfig.appHtml], - }, { test: /\.css$/, use: [ diff --git a/packages/rax-scripts/src/config/webapp/webpack.config.dev.js b/packages/rax-scripts/src/config/webapp/webpack.config.dev.js index f070e8c8ff..014b96ed19 100644 --- a/packages/rax-scripts/src/config/webapp/webpack.config.dev.js +++ b/packages/rax-scripts/src/config/webapp/webpack.config.dev.js @@ -1,21 +1,21 @@ 'use strict'; -/* eslint no-console: 0 */ const webpack = require('webpack'); const webpackMerge = require('webpack-merge'); - +const babelConfig = require('../babel.config'); const pathConfig = require('../path.config'); const webpackConfigBase = require('./webpack.config.base'); +babelConfig.plugins.push( + require.resolve('rax-hot-loader/babel') +); + // enable source map const webpackConfigDev = webpackMerge(webpackConfigBase, { devtool: 'inline-module-source-map', entry: { index: [pathConfig.appIndexJs], }, - output: { - publicPath: '/', - }, plugins: [ new webpack.NoEmitOnErrorsPlugin(), ], diff --git a/packages/rax-scripts/src/config/webapp/webpack.config.prod.js b/packages/rax-scripts/src/config/webapp/webpack.config.prod.js index b793261879..af016c140d 100644 --- a/packages/rax-scripts/src/config/webapp/webpack.config.prod.js +++ b/packages/rax-scripts/src/config/webapp/webpack.config.prod.js @@ -1,4 +1,5 @@ 'use strict'; + const pathConfig = require('../path.config'); const webpackMerge = require('webpack-merge'); const webpackConfigBase = require('./webpack.config.base'); @@ -6,16 +7,18 @@ const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); const webpackConfigProd = webpackMerge(webpackConfigBase, { target: 'node', + devtool: 'source-map', entry: { 'index.min': [pathConfig.appIndexJs], }, - plugins: [ - new UglifyJSPlugin({ + optimization: { + minimize: true, + minimizer: [new UglifyJSPlugin({ include: /\.min\.js$/, cache: true, sourceMap: true, - }), - ], + })] + }, }); module.exports = webpackConfigProd; diff --git a/packages/rax-scripts/src/config/webpack.config.js b/packages/rax-scripts/src/config/webpack.config.js index 27e21c5408..c106dcdd62 100644 --- a/packages/rax-scripts/src/config/webpack.config.js +++ b/packages/rax-scripts/src/config/webpack.config.js @@ -30,6 +30,7 @@ module.exports = { extensions: ['.js', '.json', '.jsx', '.html', '.vue', '.sfc', '.ts'], }, output: { + pathinfo: process.env.NODE_ENV === 'development', // Next line is not used in dev but WebpackDevServer crashes without it: path: pathConfig.appBuild, // This does not produce a real file. It's just the virtual path that is diff --git a/packages/rax-scripts/src/config/weexapp/README.md b/packages/rax-scripts/src/config/weexapp/README.md new file mode 100644 index 0000000000..fbf08ba581 --- /dev/null +++ b/packages/rax-scripts/src/config/weexapp/README.md @@ -0,0 +1 @@ +Webpack config for weex app \ No newline at end of file diff --git a/packages/rax-scripts/src/config/weexapp/webpack.config.base.js b/packages/rax-scripts/src/config/weexapp/webpack.config.base.js new file mode 100644 index 0000000000..e03301337d --- /dev/null +++ b/packages/rax-scripts/src/config/weexapp/webpack.config.base.js @@ -0,0 +1,87 @@ +'use strict'; + +const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); +const webpackConfig = require('../webpack.config'); +const pathConfig = require('../path.config'); +const babelConfig = require('../babel.config'); +const WeexFrameworkBanner = require('../../plugins/WeexFrameworkBannerPlugin'); + +babelConfig.presets.push([ + require.resolve('@babel/preset-react'), { + 'pragma': 'createElement', + 'pragmaFrag': 'Fragment' + } +]); + +babelConfig.plugins.push( + require.resolve('babel-plugin-transform-jsx-stylesheet') +); + +module.exports = { + mode: webpackConfig.mode, + context: webpackConfig.context, + // Compile target should "web" when use hot reload + target: webpackConfig.target, + entry: webpackConfig.entry, + output: Object.assign(webpackConfig.output, { + filename: '[name].js' + }), + resolve: webpackConfig.resolve, + + plugins: [ + new WeexFrameworkBanner(), + webpackConfig.plugins.define, + webpackConfig.plugins.caseSensitivePaths, + process.env.ANALYZER ? new BundleAnalyzerPlugin() : null, + ].filter(Boolean), + module: { + rules: [ + { + test: /\.tsx?$/, + exclude: /(node_modules|bower_components)/, + use: [ + { + loader: require.resolve('ts-loader'), + }, + ], + }, + { + test: /\.(js|mjs|jsx)$/, + exclude: /(node_modules|bower_components)/, + use: [ + { + loader: require.resolve('babel-loader'), + options: babelConfig, + }, + ], + }, + { + test: /\.css$/, + use: [ + { + loader: require.resolve('stylesheet-loader'), + }, + ], + }, + // JSON is not enabled by default in Webpack but both Node and Browserify + // allow it implicitly so we also enable it. + { + test: /\.json$/, + use: [ + { + loader: require.resolve('json-loader'), + }, + ], + }, + // load inline images using image-source-loader for Image + { + test: /\.(svg|png|webp|jpe?g|gif)$/i, + use: [ + { + loader: require.resolve('image-source-loader'), + }, + ], + }, + ], + }, +}; diff --git a/packages/rax-scripts/src/config/miniapp/webpack.config.dev.js b/packages/rax-scripts/src/config/weexapp/webpack.config.dev.js similarity index 72% rename from packages/rax-scripts/src/config/miniapp/webpack.config.dev.js rename to packages/rax-scripts/src/config/weexapp/webpack.config.dev.js index 8d8eff0373..014b96ed19 100644 --- a/packages/rax-scripts/src/config/miniapp/webpack.config.dev.js +++ b/packages/rax-scripts/src/config/weexapp/webpack.config.dev.js @@ -1,18 +1,20 @@ 'use strict'; -/* eslint no-console: 0 */ + const webpack = require('webpack'); const webpackMerge = require('webpack-merge'); - -const webpackConfigBase = require('./webpack.config.base'); +const babelConfig = require('../babel.config'); const pathConfig = require('../path.config'); +const webpackConfigBase = require('./webpack.config.base'); + +babelConfig.plugins.push( + require.resolve('rax-hot-loader/babel') +); +// enable source map const webpackConfigDev = webpackMerge(webpackConfigBase, { - devtool: 'inline-source-map', + devtool: 'inline-module-source-map', entry: { - index: [pathConfig.appManifest], - }, - output: { - publicPath: '/', + index: [pathConfig.appIndexJs], }, plugins: [ new webpack.NoEmitOnErrorsPlugin(), diff --git a/packages/rax-scripts/src/config/weexapp/webpack.config.prod.js b/packages/rax-scripts/src/config/weexapp/webpack.config.prod.js new file mode 100644 index 0000000000..af016c140d --- /dev/null +++ b/packages/rax-scripts/src/config/weexapp/webpack.config.prod.js @@ -0,0 +1,24 @@ +'use strict'; + +const pathConfig = require('../path.config'); +const webpackMerge = require('webpack-merge'); +const webpackConfigBase = require('./webpack.config.base'); +const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); + +const webpackConfigProd = webpackMerge(webpackConfigBase, { + target: 'node', + devtool: 'source-map', + entry: { + 'index.min': [pathConfig.appIndexJs], + }, + optimization: { + minimize: true, + minimizer: [new UglifyJSPlugin({ + include: /\.min\.js$/, + cache: true, + sourceMap: true, + })] + }, +}); + +module.exports = webpackConfigProd; diff --git a/packages/rax-scripts/src/plugins/WeexFrameworkBannerPlugin.js b/packages/rax-scripts/src/plugins/WeexFrameworkBannerPlugin.js new file mode 100644 index 0000000000..ca753488be --- /dev/null +++ b/packages/rax-scripts/src/plugins/WeexFrameworkBannerPlugin.js @@ -0,0 +1,65 @@ +const { ConcatSource } = require('webpack-sources'); + +class WeexFrameworkBannerPlugin { + constructor(options) { + this.options = Object.assign({ + framework: 'Rax', + }, options); + } + + apply(compiler) { + var frameworkComment = `// {"framework" : "${this.options.framework}"}`; + + // Webpack 4 + if (compiler.hooks && compiler.hooks.compilation && compiler.hooks.compilation.tap) { + compiler.hooks.compilation.tap('WeexFrameworkBannerPlugin', compilation => { + // uglify-webpack-plugin will remove javascript's comments in optimizeChunkAssets + // need use afterOptimizeChunkAssets to add frameworkComment after that. + // like the else block + compilation.hooks.afterOptimizeChunkAssets.tap('WeexFrameworkBannerPlugin', chunks => { + for (const chunk of chunks) { + // Entry only + if (!chunk.canBeInitial()) { + continue; + } + + chunk.files.forEach(function(file) { + compilation.assets[file] = new ConcatSource( + frameworkComment, + '\n', + compilation.assets[file] + ); + }); + } + }); + }); + } else { + compiler.plugin('compilation', (compilation) => { + // uglify-webpack-plugin will remove javascript's comments in + // optimize-chunk-assets, add frameworkComment after that. + compilation.plugin('after-optimize-chunk-assets', function(chunks) { + chunks.forEach(function(chunk) { + // Entry only + try { + // In webpack2 chunk.initial was removed. Use isInitial() + if (!chunk.initial) return; + } catch (e) { + if (!chunk.isInitial()) return; + } + + chunk.files.forEach(function(file) { + compilation.assets[file] = new ConcatSource( + frameworkComment, + '\n', + compilation.assets[file] + ); + }); + }); + }); + }); + } + } +} + + +module.exports = WeexFrameworkBannerPlugin; diff --git a/packages/rax-scripts/src/start.js b/packages/rax-scripts/src/start.js index 0958ceab77..eb992e5099 100644 --- a/packages/rax-scripts/src/start.js +++ b/packages/rax-scripts/src/start.js @@ -20,8 +20,7 @@ const envConfig = require('./config/env.config'); const webpackConfigMap = { webapp: './config/webapp/webpack.config.dev', - miniapp: './config/miniapp/webpack.config.dev', - miniprogram: './config/miniprogram/webpack.config.dev' + weexapp: './config/weexapp/webpack.config.dev', }; /** diff --git a/packages/rax-scripts/src/utils/componentCompiler.js b/packages/rax-scripts/src/utils/componentCompiler.js index 23c6bb8f1e..9304c4e816 100644 --- a/packages/rax-scripts/src/utils/componentCompiler.js +++ b/packages/rax-scripts/src/utils/componentCompiler.js @@ -8,7 +8,6 @@ const babel = require('@babel/core'); const chalk = require('chalk'); const glob = require('glob'); const minimatch = require('minimatch'); -const chokidar = require('chokidar'); const SRC_DIR = 'src'; const BUILD_DIR = 'lib'; @@ -18,7 +17,6 @@ const IGNORE_PATTERN = '**/__tests__/**'; const babelOptions = require('../config/babel.config'); babelOptions.babelrc = false; -// babelOptions.sourceMaps = 'inline'; const fixedWidth = str => { const WIDTH = 80; diff --git a/packages/rax/src/createElement.js b/packages/rax/src/createElement.js index bd685f73f6..627ebbfdb6 100644 --- a/packages/rax/src/createElement.js +++ b/packages/rax/src/createElement.js @@ -34,7 +34,7 @@ export default function createElement(type, config, children) { key = config.key === undefined ? null : String(config.key); if (typeof ref === 'string' && !ownerComponent) { - console.warn('createElement: adding a string ref outside the component’s render() method.'); + console.warn('createElement: adding a string ref outside the render method.'); } // Remaining properties are added to a new props object diff --git a/packages/weex-builtin-globals-service-template/README.md b/packages/weex-builtin-globals-service-template/README.md deleted file mode 100644 index 16833e5213..0000000000 --- a/packages/weex-builtin-globals-service-template/README.md +++ /dev/null @@ -1,2 +0,0 @@ -# weex-builtin-globals-service-template -> weex builtin globals service template diff --git a/packages/weex-builtin-globals-service-template/package.json b/packages/weex-builtin-globals-service-template/package.json deleted file mode 100644 index 094bdeabf0..0000000000 --- a/packages/weex-builtin-globals-service-template/package.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "weex-builtin-global-service-template", - "private": true, - "version": "0.6.5" -} diff --git a/packages/weex-builtin-globals-service-template/src/index.js b/packages/weex-builtin-globals-service-template/src/index.js deleted file mode 100644 index cb01e7b2b2..0000000000 --- a/packages/weex-builtin-globals-service-template/src/index.js +++ /dev/null @@ -1,19 +0,0 @@ -const builtinGlobalsService = { - - create: (id, env, config) => { - const builtinGlobals = { - // jQuery: 'jquery' - }; - - return { - instance: { - builtinGlobals - } - }; - }, - - destroy: (id, env) => { - } -}; - -global.registerService('builtinGlobalsService', builtinGlobalsService); diff --git a/packages/weex-builtin-modules-service-template/README.md b/packages/weex-builtin-modules-service-template/README.md deleted file mode 100644 index 95c9d5ebbc..0000000000 --- a/packages/weex-builtin-modules-service-template/README.md +++ /dev/null @@ -1,2 +0,0 @@ -# weex-builtin-modules-service-template -> weex builtin modules service template diff --git a/packages/weex-builtin-modules-service-template/package.json b/packages/weex-builtin-modules-service-template/package.json deleted file mode 100644 index ef2885e001..0000000000 --- a/packages/weex-builtin-modules-service-template/package.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "weex-builtin-modules-service-template", - "private": true, - "version": "0.6.5" -} diff --git a/packages/weex-builtin-modules-service-template/src/index.js b/packages/weex-builtin-modules-service-template/src/index.js deleted file mode 100644 index 9bd9d89c3a..0000000000 --- a/packages/weex-builtin-modules-service-template/src/index.js +++ /dev/null @@ -1,23 +0,0 @@ -// import foo from 'foo/dist/foo.factory'; - -const builtinModulesService = { - - create: (id, env, config) => { - // Modules should wrap as module factory format, see: rax-webpack-plugin - const builtinModules = { - // `rax` have been build in framework, do not need add here - // foo - }; - - return { - instance: { - builtinModules - } - }; - }, - - destroy: (id, env) => { - } -}; - -global.registerService('builtinModulesService', builtinModulesService); diff --git a/packages/weex-rax-examples/README.md b/packages/weex-rax-examples/README.md deleted file mode 100644 index 6a3e034a63..0000000000 --- a/packages/weex-rax-examples/README.md +++ /dev/null @@ -1 +0,0 @@ -# weex-rax-examples diff --git a/packages/weex-rax-examples/common/Button.js b/packages/weex-rax-examples/common/Button.js deleted file mode 100644 index 76b4747b44..0000000000 --- a/packages/weex-rax-examples/common/Button.js +++ /dev/null @@ -1,119 +0,0 @@ -import {createElement, Component, render} from 'rax'; - -class Button extends Component { - static defaultProps = { - type: 'default', - size: 'large', - value: '' - }; - - render() { - const {type, size, value, style, onClick} = this.props; - return ( -
- {value} -
- ); - } -} - -const styles = { - btn: { - marginBottom: 0, - alignItems: 'center', - justifyContent: 'center', - borderWidth: 1, - borderStyle: 'solid', - borderColor: '#333333' - }, - 'btn-txt': { - - }, - 'btn-default': { - color: 'rgb(51, 51, 51)' - }, - 'btn-primary': { - backgroundColor: 'rgb(40, 96, 144)', - borderColor: 'rgb(40, 96, 144)' - }, - 'btn-success': { - backgroundColor: 'rgb(92, 184, 92)', - borderColor: 'rgb(76, 174, 76)' - }, - 'btn-info': { - backgroundColor: 'rgb(91, 192, 222)', - borderColor: 'rgb(70, 184, 218)' - }, - 'btn-warning': { - backgroundColor: 'rgb(240, 173, 78)', - borderColor: 'rgb(238, 162, 54)' - }, - 'btn-danger': { - backgroundColor: 'rgb(217, 83, 79)', - borderColor: 'rgb(212, 63, 58)' - }, - 'btn-link': { - backgroundColor: 'transparent', - borderRadius: 0, - }, - 'btn-txt-default': { - color: 'rgb(51, 51, 51)' - }, - 'btn-txt-primary': { - color: 'rgb(255, 255, 255)' - }, - 'btn-txt-success': { - color: 'rgb(255, 255, 255)' - }, - 'btn-txt-info': { - color: 'rgb(255, 255, 255)' - }, - 'btn-txt-warning': { - color: 'rgb(255, 255, 255)' - }, - 'btn-txt-danger': { - color: 'rgb(255, 255, 255)' - }, - 'btn-txt-link': { - color: 'rgb(51, 122, 183)' - }, - 'btn-sz-large': { - width: 300, - height: 100, - paddingTop: 25, - paddingBottom: 25, - paddingLeft: 40, - paddingRight: 40, - borderRadius: 15 - }, - 'btn-sz-middle': { - width: 240, - height: 80, - paddingTop: 15, - paddingBottom: 15, - paddingLeft: 30, - paddingRight: 30, - borderRadius: 10 - }, - 'btn-sz-small': { - width: 170, - height: 60, - paddingTop: 12, - paddingBottom: 12, - paddingLeft: 25, - paddingRight: 25, - borderRadius: 7 - }, - 'btn-txt-sz-large': { - fontSize: 45 - }, - 'btn-txt-sz-middle': { - fontSize: 35 - }, - 'btn-txt-sz-small': { - fontSize: 30 - }, - 'disabled': {}, -}; - -export default Button; diff --git a/packages/weex-rax-examples/common/List.js b/packages/weex-rax-examples/common/List.js deleted file mode 100644 index 06f9ac7892..0000000000 --- a/packages/weex-rax-examples/common/List.js +++ /dev/null @@ -1,86 +0,0 @@ -import {createElement, Component, render} from 'rax'; - -function getBaseURL(dir) { - var bundleUrl = document.URL; - var nativeBase; - var isAndroidAssets = bundleUrl.indexOf('your_current_IP') >= 0 || bundleUrl.indexOf('file://assets/') >= 0; - var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0; - if (isAndroidAssets) { - nativeBase = 'file://assets/'; - } else if (isiOSAssets) { - // file:///var/mobile/Containers/Bundle/Application/{id}/WeexDemo.app/ - // file:///Users/{user}/Library/Developer/CoreSimulator/Devices/{id}/data/Containers/Bundle/Application/{id}/WeexDemo.app/ - nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1); - } else { - var host = 'localhost:12580'; - var matches = /\/\/([^\/]+?)\//.exec(bundleUrl); - if (matches && matches.length >= 2) { - host = matches[1]; - } - nativeBase = 'http://' + host + '/' + dir + '/build/'; - } - var h5Base = './index.html?page=./' + dir + '/build/'; - // in Native - var base = nativeBase; - if (typeof window === 'object') { - // in Browser or WebView - base = h5Base; - } - return base; -} - -class ExampleItem extends Component { - handleClick = () => { - let event = __weex_require__('@weex-module/event'); - let url = this.props.url; - if (!url) { - var base = getBaseURL('packages/weex-rax-examples'); - url = base + this.props.name + '.bundle.js?wh_weex=true'; - } - event.openURL(url); - }; - - render() { - return ( - -
- - {this.props.title} - -
- - ); - } -} - -class ExampleList extends Component { - render() { - return ( - - {this.props.examples.map((item) => { - return ; - })} - - ); - } -} - -const styles = { - item: { - paddingTop: 25, - paddingBottom: 25, - paddingLeft: 35, - paddingRight: 35, - height: 160, - justifyContent: 'center', - borderBottomWidth: 1, - borderColor: '#dddddd', - backgroundColor: '#ffffff' - }, - itemText: { - fontSize: 48, - color: '#555555' - } -}; - -export default ExampleList; diff --git a/packages/weex-rax-examples/common/Panel.js b/packages/weex-rax-examples/common/Panel.js deleted file mode 100644 index 9af37a3760..0000000000 --- a/packages/weex-rax-examples/common/Panel.js +++ /dev/null @@ -1,102 +0,0 @@ -import {createElement, Component, render} from 'rax'; - -// Inspired by bootstrap http://getbootstrap.com/ -class Panel extends Component { - static defaultProps = { - type: 'default', - paddingBody: 20, - paddingHead: 20, - title: '' - }; - render() { - const {type, paddingHead, paddingBody, title} = this.props; - - return ( -
- {title} -
- {this.props.children} -
-
- ); - } -} - -const styles = { - panel: { - marginBottom: 20, - backgroundColor: '#ffffff', - borderColor: '#dddddd', - borderWidth: 1, - }, - 'panel-default': { - - }, - 'panel-primary': { - borderColor: 'rgb(40, 96, 144)' - }, - 'panel-success': { - borderColor: 'rgb(76, 174, 76)' - }, - 'panel-info': { - borderColor: 'rgb(70, 184, 218)' - }, - 'panel-warning': { - borderColor: 'rgb(238, 162, 54)' - }, - 'panel-danger': { - borderColor: 'rgb(212, 63, 58)' - }, - 'panel-header': { - backgroundColor: '#f5f5f5', - fontSize: 40, - color: '#333333' - }, - 'panel-header-default': {}, - 'panel-header-primary': { - backgroundColor: 'rgb(40, 96, 144)', - color: '#ffffff' - }, - 'panel-header-success': { - backgroundColor: 'rgb(92, 184, 92)', - color: '#ffffff' - }, - 'panel-header-info': { - backgroundColor: 'rgb(91, 192, 222)', - color: '#ffffff' - }, - 'panel-header-warning': { - backgroundColor: 'rgb(240, 173, 78)', - color: '#ffffff' - }, - 'panel-header-danger': { - backgroundColor: 'rgb(217, 83, 79)', - color: '#ffffff' - }, - 'panel-body-default': {}, - 'panel-body-primary': {}, - 'panel-body-success': {}, - 'panel-body-info': {}, - 'panel-body-warning': {}, - 'panel-body-danger': {}, -}; - -export default Panel; diff --git a/packages/weex-rax-examples/common/StyleItem.js b/packages/weex-rax-examples/common/StyleItem.js deleted file mode 100644 index 313b688bbe..0000000000 --- a/packages/weex-rax-examples/common/StyleItem.js +++ /dev/null @@ -1,35 +0,0 @@ -import {createElement, Component} from 'rax'; - -class StyleItem extends Component { - static defaultProps = { - value: '', - type: 0 - }; - render() { - const {value, type, style} = this.props; - - return ( - - ); - } -} - - -const styles = { - item: { - marginRight: 10, - /* margin-bottom: 10px; */ - width: 160, - height: 75, - paddingLeft: 8, - paddingRight: 8, - paddingTop: 8, - paddingBottom: 8, - color: '#eeeeee' - } -}; - -export default StyleItem; diff --git a/packages/weex-rax-examples/common/Tip.js b/packages/weex-rax-examples/common/Tip.js deleted file mode 100644 index a72734c8fa..0000000000 --- a/packages/weex-rax-examples/common/Tip.js +++ /dev/null @@ -1,62 +0,0 @@ -import {createElement, Component} from 'rax'; - -// Inspired by bootstrap http://getbootstrap.com/ -class Tip extends Component { - static defaultProps = { - type: 'success', - value: '' - }; - - render() { - const {type, value, style} = this.props; - - return ( -
- {value} -
- ); - } -} - -const styles = { - tip: { - paddingLeft: 36, - paddingRight: 36, - paddingTop: 36, - paddingBottom: 36, - borderRadius: 10 - }, - 'tip-txt': { - fontSize: 28 - }, - 'tip-success': { - backgroundColor: '#dff0d8', - borderColor: '#d6e9c6' - }, - 'tip-txt-success': { - color: '#3c763d' - }, - 'tip-info': { - backgroundColor: '#d9edf7', - borderColor: '#bce8f1' - }, - 'tip-txt-info': { - color: '#31708f' - }, - 'tip-warning': { - backgroundColor: '#fcf8e3', - borderColor: '#faebcc' - }, - 'tip-txt-warning': { - color: '#8a6d3b' - }, - 'tip-danger': { - backgroundColor: '#f2dede', - borderColor: '#ebccd1' - }, - 'tip-txt-danger': { - color: '#a94442' - }, -}; - -export default Tip; diff --git a/packages/weex-rax-examples/components/a.js b/packages/weex-rax-examples/components/a.js deleted file mode 100644 index 03bea94c53..0000000000 --- a/packages/weex-rax-examples/components/a.js +++ /dev/null @@ -1,20 +0,0 @@ -import {createElement, Component, render} from 'rax'; -import Panel from '../common/Panel'; -import Tip from '../common/Tip'; - -class Example extends Component { - render() { - return ( - - - - - - - - ); - } -} - -render(); diff --git a/packages/weex-rax-examples/components/image.js b/packages/weex-rax-examples/components/image.js deleted file mode 100644 index 9edc818f50..0000000000 --- a/packages/weex-rax-examples/components/image.js +++ /dev/null @@ -1,59 +0,0 @@ -import {createElement, Component, render} from 'rax'; -import Panel from '../common/Panel'; -import Tip from '../common/Tip'; - -function ImageItem(props) { - return ( - - ); -} - -class Example extends Component { - render() { - return ( - - - -
- - - -
- - - -
- - -
- - - -
- - -
- - - - - - - - - - - - - - ); - } -} - -const styles = { - img: { - marginBottom: 20 - } -}; - -render(); diff --git a/packages/weex-rax-examples/components/input.js b/packages/weex-rax-examples/components/input.js deleted file mode 100644 index 9cfeab63d6..0000000000 --- a/packages/weex-rax-examples/components/input.js +++ /dev/null @@ -1,46 +0,0 @@ -import {createElement, Component, render} from 'rax'; -import Panel from '../common/Panel'; - -class Example extends Component { - state = { - txtInput: '', - txtChange: '', - }; - onchange = (event) => { - this.state.txtInput = event.value; - this.setState(this.state); - } - oninput = (event) => { - this.state.txtChange = event.value; - this.setState(this.state); - } - render() { - return ( - - - - oninput: {this.state.txtInput} - onchange: {this.state.txtChange} - - - ); - } -} - -const styles = { - input: { - fontSize: 60, - height: 80, - width: 400, - } -}; - -render(); diff --git a/packages/weex-rax-examples/components/list.js b/packages/weex-rax-examples/components/list.js deleted file mode 100644 index c587bd279c..0000000000 --- a/packages/weex-rax-examples/components/list.js +++ /dev/null @@ -1,123 +0,0 @@ -import {createElement, Component, render} from 'rax'; - -class Example extends Component { - state = { - appearMin: 1, - appearMax: 1, - }; - appearIds = []; - onappear = (e) => { - var appearId = data.rows[e.target.attr.index].id; - var appearIds = this.appearIds; - appearIds.push(appearId); - this.getMinAndMaxIds(appearIds); - } - ondisappear = (e) => { - var disAppearId = data.rows[e.target.attr.index].id; - var appearIds = this.appearIds; - var index = appearIds.indexOf(disAppearId); - if (index > -1) { - appearIds.splice(index, 1); - } - this.getMinAndMaxIds(appearIds); - } - - getMinAndMaxIds = (appearIds) => { - appearIds.sort(function(a, b) { - return a - b; - }); - this.appearIds = appearIds; - this.state.appearMax = appearIds[appearIds.length - 1]; - this.state.appearMin = appearIds[0]; - this.setState(this.state); - } - - render() { - let rows = data.rows.map((item, index) => { - return -
- row {item.id} -
- ; - }); - - return ( -
- - {rows} - - - Appear items: {this.state.appearMin} ~ {this.state.appearMax} - -
- ); - } -} - -const styles = { - list: { - height: 850, - }, - count: { - fontSize: 48, - margin: 10, - }, - indicator: { - height: 40, - width: 40, - color: '#45b5f0', - }, - row: { - width: 750, - height: 100, - }, - item: { - justifyContent: 'center', - borderBottomWidth: 2, - borderBottomColor: '#c0c0c0', - height: 100, - padding: 20, - }, - itemTitle: { - } -}; - -const data = { - rows: [ - {id: 1}, - {id: 2}, - {id: 3}, - {id: 4}, - {id: 5}, - {id: 6}, - {id: 7}, - {id: 8}, - {id: 9}, - {id: 10}, - {id: 11}, - {id: 12}, - {id: 13}, - {id: 14}, - {id: 15}, - {id: 16}, - {id: 17}, - {id: 18}, - {id: 19}, - {id: 20}, - {id: 21}, - {id: 22}, - {id: 23}, - {id: 24}, - {id: 25}, - {id: 26}, - {id: 27}, - {id: 28}, - {id: 29} - ] -}; - -render(); diff --git a/packages/weex-rax-examples/components/scroller.js b/packages/weex-rax-examples/components/scroller.js deleted file mode 100644 index a03194ae07..0000000000 --- a/packages/weex-rax-examples/components/scroller.js +++ /dev/null @@ -1,172 +0,0 @@ -import {createElement, Component, render} from 'rax'; - -class Example extends Component { - state = { - refresh_display: 'hide', - loading_display: 'hide', - }; - - onrefresh = (e) => { - this.state.refresh_display = 'show'; - this.setState(this.state); - setTimeout(() => { - this.state.refresh_display = 'hide'; - this.setState(this.state); - }, 1000); - } - onloading = (e) => { - this.state.loading_display = 'show'; - this.setState(this.state); - setTimeout(() => { - console.log('hide', this.state); - this.state.loading_display = 'hide'; - this.setState(this.state); - }, 1000); - } - renderItems = (sec) => { - let items = sec.items.map((item, index) => { - return
- row {item.id} -
; - }); - return items; - } - render() { - let sections = data.sections.map((sec, index) => { - return
-
- {sec.title} -
- {this.renderItems(sec)} -
; - }); - - return ( - - {sections} - - - - - ); - } -} - -const data = { - sections: [ - { - title: 'Header 1', - items: [ - {id: 1}, - {id: 2}, - {id: 3}, - {id: 4}, - {id: 5} - ] - }, - { - title: 'Header 2', - items: [ - {id: 6}, - {id: 7}, - {id: 8}, - {id: 9}, - {id: 10}, - {id: 11} - ] - } - ], - moreSections: [ - { - title: 'Header 3', - items: [ - {id: 12}, - {id: 13}, - {id: 14}, - {id: 15}, - {id: 16}, - {id: 17}, - {id: 18} - ] - }, - { - title: 'Header 4', - items: [ - {id: 19}, - {id: 20}, - {id: 21}, - {id: 22} - ] - }, - { - title: 'Header 5', - items: [ - {id: 23}, - {id: 24}, - {id: 25}, - {id: 26}, - {id: 27} - ] - }, - { - title: 'Header 6', - items: [ - {id: 28}, - {id: 29}, - {id: 30}, - {id: 31}, - {id: 32} - ] - } - ] -}; - -const styles = { - list: { - height: 850, - }, - refreshView: { - height: 120, - width: 750, - display: 'flex', - alignItems: 'center', - }, - refreshArrow: { - fontSize: 30, - color: '#45b5f0', - }, - loadingView: { - height: 80, - width: 750, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#dddddd', - }, - indicator: { - height: 40, - width: 40, - color: '#45b5f0', - }, - header: { - backgroundColor: '#45b5f0', - padding: 20, - height: 88, - justifyContent: 'center', - }, - headerTitle: { - color: 'white', - fontWeight: 'bold', - }, - item: { - justifyContent: 'center', - borderBottomWidth: 2, - borderBottomColor: '#c0c0c0', - height: 100, - padding: 20, - }, - itemTitle: { - } - -}; - -render(); diff --git a/packages/weex-rax-examples/components/text.js b/packages/weex-rax-examples/components/text.js deleted file mode 100644 index 6e239f24f0..0000000000 --- a/packages/weex-rax-examples/components/text.js +++ /dev/null @@ -1,67 +0,0 @@ -import {createElement, Component, render} from 'rax'; -import Panel from '../common/Panel'; - -function TextItem(props) { - return ( - {props.children} - ); -} - -class Example extends Component { - render() { - return ( - - - default is black - #286090 - #0f0 - red - rgb(238, 162, 54) - rgba(238, 162, 54, 0.5) - - - 32 - 64 - 100 - - - normal - italic - - - normal - bold - - - none - underline - line-through - - - left - center - right - - - no textOverflow, no textOverflow - textOverflow: clip, textOverflow: clip - textOverflow: ellipsis, textOverflow: ellipsis - - - no lineheight setting - lineheight 50 - lineheight 80 - - - ); - } -} - -const styles = { - txt: { - marginBottom: 12, - fontSize: 40, - } -}; - -render(); diff --git a/packages/weex-rax-examples/index.js b/packages/weex-rax-examples/index.js deleted file mode 100644 index 50109c0285..0000000000 --- a/packages/weex-rax-examples/index.js +++ /dev/null @@ -1,30 +0,0 @@ -import {createElement, render} from 'rax'; -import ExampleList from './common/List'; - -const EXAMPLES = [ - // common - {name: '/syntax/hello-world', title: 'Hello World'}, - {name: '/style/index', title: 'Common Style'}, - // component - {name: '/components/text', title: 'Text'}, - {name: '/components/image', title: 'Image'}, - {name: '/components/input', title: 'Input'}, - {name: '/components/scroller', title: 'Scroller'}, - {name: '/components/list', title: 'List'}, - {name: '/components/slider', title: 'Slider'}, - {name: '/components/a', title: 'A'}, - {name: '/components/video', title: 'Video'}, - {name: '/components/countdown', title: 'Countdown'}, - {name: '/components/marquee', title: 'Marquee'}, - {name: '/components/web', title: 'Web'}, - {name: '/components/navigator', title: 'Navigator'}, - {name: '/components/tabbar', title: 'Tabbar'}, - // module - {name: '/modules/modal', title: 'Modal'}, - {name: '/modules/stream', title: 'Stream'}, - {name: '/modules/storage', title: 'Storage'}, - {name: '/modules/animation', title: 'Animation'}, - // {name: 'module/clipboard', title: 'Clipboard'}, // 0.8 , developing -]; - -render(); diff --git a/packages/weex-rax-examples/modules/modal.js b/packages/weex-rax-examples/modules/modal.js deleted file mode 100644 index 14265a8cd5..0000000000 --- a/packages/weex-rax-examples/modules/modal.js +++ /dev/null @@ -1,79 +0,0 @@ -import {createElement, Component, render} from 'rax'; -import Button from '../common/Button'; -import Panel from '../common/Panel'; - -const modal = __weex_require__('@weex-module/modal'); - -class Example extends Component { - toast(msg, duration) { - if (!msg || typeof msg !== 'string') { - msg = 'I am Toast show!'; - } - duration = duration || 2; - modal.toast({ - 'message': msg, - 'duration': duration - }); - } - alert(msg, okTitle, cancelTitle) { - if (!msg || typeof msg !== 'string') { - msg = 'I am Alert!'; - } - modal.alert({ - 'message': msg, - 'okTitle': okTitle, - 'cancelTitle': cancelTitle - }, function() { - modal.toast({ message: 'Click Alert OK Bnt!!' }); - }); - } - confirm(msg, okTitle, cancelTitle) { - if (!msg || typeof msg !== 'string') { - msg = 'I am Confirm!'; - } - okTitle = okTitle || 'OK'; - cancelTitle = cancelTitle || 'Cancel'; - modal.confirm({ - 'message': msg, - 'okTitle': okTitle, - 'cancelTitle': cancelTitle - }, function(result) { - modal.toast({ message: 'Click Confirm ' + result }); - }); - } - prompt() { - modal.prompt( { - 'message': 'I am Prompt!', - 'okTitle': 'ok', - 'cancelTitle': 'cancel' - }, function(result) { - modal.toast({ message: 'Click Prompt ' + result }); - }); - } - render() { - return ( - - -