pixuireactcomponents 1.2.0 → 1.2.1

package/README.md

@@ -1,9 +1,8 @@
-# 使用PixUI + React 开发应用时，可用的各种功能组件
-PixUI应用已经落地多款业务。面向应用层开发，已解决过很多问题，有一些积累和沉淀。
+# 组件库
 
-正在陆续抽象汇总各种功能组件（UI的、功能的等）和疑难问题场景，希望可以方便后续应用开发者，让他们可以站在前行者的肩膀上，少踩一些坑。
+本组件库目前分为2大类：ui组件和工具组件。分别参见目录ui/和目录tools。
+具体组件说明，参见对应类别目录下的md文档
 
-* 具体各种组件，参见src/pixUIReactComponents目录; 已打成npm包 pixuireactcomponents，直接安装即可使用。
-* 各种脚本工具，参见src/ pixUIReactUtils目录; 已打成npm包 pixuireactutils，直接安装即可使用。
+## 使用说明
 
-使用有疑问的话，请参考readme文档(npm包中和本git仓库中均有)![npms](./src/asset/npms.png)
+https://gamelet.qq.com/docv2/public/d/Client-Development-Guide/PixUI-React-Components

package/package.json

@@ -1,68 +1,11 @@
 {
-	"name": "pixuireactcomponents",
-	"version": "1.2.0",
-	"scripts": {
-		"b": "cross-env mode=production webpack --mode=development --config .pixiderc/webpack.js",
-		"postinstall": "node .pixiderc/postinstall.js",
-		"dev": "cross-env mode=development webpack-dev-server --config .pixiderc/webpack.js"
-	},
-	"dependencies": {
-		"@improbable-eng/grpc-web": "^0.12.0",
-		"@tencent/pandora-sdk-utils": "^1.0.0",
-		"animate.css": "^3.7.2",
-		"babel-plugin-transform-decorators-legacy": "^1.3.5",
-		"google-protobuf": "^3.8.0",
-		"grpc-promise": "^1.4.0",
-		"gsap": "^3.2.6",
-		"mobx": "^5.10.1",
-		"mobx-react": "^6.2.2",
-		"preact": "^10.4.0",
-		"react-virtualized": "^9.21.2",
-		"react-window": "^1.8.5",
-		"replace": "^1.1.0",
-		"rxjs": "^6.5.5",
-		"screenfull": "^5.0.2",
-		"typescript": "^3.9.7"
-	},
-	"devDependencies": {
-		"@babel/core": "^7.9.0",
-		"@babel/plugin-proposal-class-properties": "^7.8.3",
-		"@babel/plugin-proposal-decorators": "^7.8.3",
-		"@babel/plugin-syntax-jsx": "^7.8.3",
-		"@babel/plugin-transform-flow-strip-types": "^7.9.0",
-		"@babel/plugin-transform-react-jsx": "^7.9.4",
-		"@babel/preset-env": "^7.9.6",
-		"@babel/preset-typescript": "^7.9.0",
-		"@types/jest": "25.2.1",
-		"@types/node": "13.11.1",
-		"@typescript-eslint/eslint-plugin": "^2.28.0",
-		"@typescript-eslint/parser": "^2.28.0",
-		"babel-loader": "^8.1.0",
-		"babel-plugin-import": "^1.12.0",
-		"babel-plugin-jsx-pragmatic": "^1.0.2",
-		"babel-plugin-module-resolver": "^4.0.0",
-		"babel-plugin-transform-remove-console": "^6.9.4",
-		"clean-webpack-plugin": "^3.0.0",
-		"cross-env": "^7.0.3",
-		"css-loader": "^3.5.2",
-		"error-overlay-webpack-plugin": "^0.4.1",
-		"eslint": "^6.8.0",
-		"eslint-plugin-jest": "^23.8.2",
-		"extract-text-webpack-plugin": "^3.0.2",
-		"file-loader": "^6.0.0",
-		"fork-ts-checker-webpack-plugin": "^4.1.3",
-		"html-webpack-plugin": "^4.2.0",
-		"less": "^3.11.1",
-		"less-loader": "^5.0.0",
-		"prettier": "2.0.4",
-		"sass": "^1.26.5",
-		"sass-loader": "^8.0.2",
-		"source-map-explorer": "^2.0.1",
-		"style-loader": "^1.1.3",
-		"ts-protoc-gen": "^0.10.0",
-		"webpack": "^4.42.1",
-		"webpack-bundle-analyzer": "^3.7.0",
-		"webpack-cli": "^3.3.11",
-		"webpack-dev-server": "^3.10.3"
-	}
+  "name": "pixuireactcomponents",
+  "version": "1.2.1",
+  "description": "pixui react components",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "hardenzheng",
+  "license": "ISC"
 }

package/tsconfig.json

@@ -1,31 +1,45 @@
 {
 	"compilerOptions": {
 		"target": "es5",
-		"module": "commonjs",
-		"lib": ["dom", "dom.iterable", "esnext"],
+		"module": "ES6",
 		"baseUrl": ".",
 		"paths": {
-			"preact": ["lib/preact/src"],
-			"preact/hooks": ["lib/preact/hooks/src"],
-			"preact-router": ["lib/preact-router"],
-			"preact-router/match": ["lib/preact-router/match"]
+			"preact": ["../../lib/preact/src"],
 		},
-		"outDir": "dist",
-		"experimentalDecorators": true,
+		"outDir": "../publish_components",
 		"allowJs": true,
 		"skipLibCheck": true,
 		"esModuleInterop": true,
 		"allowSyntheticDefaultImports": true,
 		"strict": true,
 		"forceConsistentCasingInFileNames": true,
-		"moduleResolution": "node",
+		"moduleResolution":"node",
 		"resolveJsonModule": true,
 		"noImplicitAny": false,
-		"jsx": "preserve",
+		"jsx":"react",
 		"jsxFactory": "h",
-        "sourceMap": true,
+    	// "sourceMap": false,
+		"declaration": true,
+		"declarationDir": "../publish_components"
 		// "noEmit": true
 	},
-	"include": ["lib", "src"],
-	"exclude": ["lib/react-window/", "node_modules", "**/test"]
+	"files":[
+		"index.js", 
+		"package.json",
+	],
+	"include": [
+		"ui/components/tab/*",
+		"ui/components/slider/*",
+		"ui/components/progress/*",
+		"ui/components/dropdown/*",
+		"ui/components/gradient/*",
+		"ui/components/outlinetext",
+		"tools/*",
+		"ui/components/carousel/*",
+		"ui/components/slapface/*",
+		"ui/components/slapface/less/*",
+		"ui/components/button/*",
+	
+	],
+
 }

package/.eslintignore

@@ -1,7 +0,0 @@
-.eslintrc.js
-src/migration/
-lib/grpc-web
-gen/
-build/
-config/
-src/entry.js

package/.eslintrc.js

@@ -1,48 +0,0 @@
-module.exports = {
-	env: {
-		browser: true,
-		node: true,
-	},
-	parser: '@typescript-eslint/parser',
-	parserOptions: {
-		project: './tsconfig.json',
-	},
-	plugins: ['jest', '@typescript-eslint'],
-	extends: [
-		'eslint:recommended',
-		// 'plugin:react/recommended',
-		'plugin:@typescript-eslint/eslint-recommended',
-		'plugin:@typescript-eslint/recommended',
-	],
-	overrides: [
-		{
-			files: ['*.ts', '*.tsx'],
-			rules: {
-				'prefer-const': [0],
-				'no-var': [2],
-				'no-constant-condition': [0],
-				'@typescript-eslint/camelcase': [0],
-			},
-		},
-	],
-	rules: {
-		'prefer-const': [0],
-		'linebreak-style': ['error', 'unix'],
-		quotes: ['error', 'single', { avoidEscape: true }],
-		semi: ['error', 'always'],
-		'no-console': [1, { allow: ['warn', 'error', 'log', 'enable_trace'] }],
-		'no-unused-vars': [0],
-		// 'comma-dangle': ['error', 'always-multiline'],
-		// 'react/prop-types': [0],
-		'@typescript-eslint/no-explicit-any': [0],
-		'@typescript-eslint/no-empty-function': [0],
-		'@typescript-eslint/no-empty-interface': [0],
-		'@typescript-eslint/no-unused-vars': [0],
-		'@typescript-eslint/no-use-before-define': [0],
-		'@typescript-eslint/explicit-member-accessibility': [0],
-		'@typescript-eslint/no-var-requires': [0],
-		'@typescript-eslint/no-non-null-assertion': [0],
-		'@typescript-eslint/explicit-function-return-type': [0],
-	},
-	settings: {},
-};

package/.pixiderc/apps.json

@@ -1,12 +0,0 @@
-[
-    {
-        "name": "app",
-        "template": "./src/app/index.html",
-        "entry": "./src/app/main.tsx"
-    },
-    {
-        "name": "preprocess",
-        "template": "./src/preprocess/index.html",
-        "entry": "./src/preprocess/main.tsx"
-    }
-]

package/.pixiderc/devel-config.meta.json

@@ -1,23 +0,0 @@
-{
-    "$schema": "http://json-schema.org/draft-07/schema",
-    "$id": "http://px.woa.com/schemas/devel-config",
-    "title": "Development Config Schema",
-    "type": "object",
-    "required": [],
-    "properties": {
-        "clientLogEnablement": {
-            "title": "客户端日志开关",
-            "type": "boolean"
-        },
-        "customConfig": {
-            "type": "object",
-            "title": "自定义配置",
-            "patternProperties": {
-                "^[a-zA-Z][a-zA-Z0-9_]*$": {
-                    "type": "string",
-                    "title": "自定义开发配置项"
-                }
-            }
-        }
-    }
-}

package/.pixiderc/postinstall.js

@@ -1,17 +0,0 @@
-const { rmdirSync, existsSync } = require('fs');
-const { resolve: pathResolve } = require('path');
-
-// rm -rf node_modules/@types/react && rm -rf node_modules/preact
-
-const dirs = [
-    pathResolve(__dirname, '..', 'node_modules/@types/react'),
-    pathResolve(__dirname, '..', 'node_modules/preact'),
-];
-
-dirs.forEach(dir => {
-    existsSync(dir) && rmdirSync(dir, {recursive: true});
-})
-
-// > 14.14之后可以使用rmSync:
-// rmSync(pathResolve(__dirname, '..', 'node_modules/@types/react'), {recursive: true, force: true});
-// rmSync(pathResolve(__dirname, '..', 'node_modules/preact'), {recursive: true, force: true});

package/.pixiderc/util.js

@@ -1,136 +0,0 @@
-const port = process.env.port || 8080;
-const { rtCompilerToolPath } = process.env;
-module.exports.getLocalIP = function () {
-	let os = require('os');
-	let ifaces = os.networkInterfaces();
-
-	let ipList = [];
-	Object.keys(ifaces).forEach(function (ifname) {
-		let alias = 0;
-
-		ifaces[ifname].forEach(function (iface) {
-			if ('IPv4' !== iface.family || iface.internal !== false) {
-				// skip over internal (i.e. 127.0.0.1) and non-ipv4 addresses
-				return;
-			}
-			ipList.push(iface.address);
-		});
-	});
-	console.log('iplist', ipList);
-	return ipList;
-};
-
-module.exports.setupFilter = (appDef) =>
-	function (app, servers) {
-		let log = () => {};
-		log = console.log;
-
-		app.disable('etag');
-
-		app.get('/log0', (req, res) => {
-			log = () => {};
-			res.send('ok');
-		});
-		app.get('/log1', (req, res) => {
-			log = console.log;
-			res.send('ok');
-		});
-
-		//拦截输出，当agent为PixUI且输出类型为html时，转换为fbs二进制数据再返回
-		app.use((req, res, next) => {
-			//去掉缓存标记，因为很可能源文件没变，但转换后的表示变了
-			delete req.headers['if-none-match'];
-			let ua = req.get('User-Agent');
-			log('req', req.url, ua, JSON.stringify(req.headers));
-
-			let _write = res.write;
-			let _end = res.end;
-			let _send = res.send;
-
-			let buffers = [];
-			var addBuffer = (chunk, encoding) => {
-				if (chunk === undefined) return;
-				if (typeof chunk === 'string') {
-					chunk = Buffer.from(chunk, encoding);
-				}
-				buffers.push(chunk);
-			};
-
-			//处理直接裸写的情况，一般见于发送静态文件
-			res.write = function (chunk, encoding) {
-				let type = res.get('Content-Type');
-				log('hook write...', type, chunk);
-				addBuffer(chunk, encoding);
-			};
-			res.end = function (chunk, encoding) {
-				let type = res.get('Content-Type');
-				if (chunk) addBuffer(chunk, encoding);
-				let data = Buffer.concat(buffers);
-				log('hook end...', type, data.length);
-				res.write = _write;
-				res.end = _end;
-				_send.call(this, data);
-			};
-
-			//处理通过send发送的情况，如webpack合成的html
-			res.send = function (c) {
-				let type = res.get('Content-Type') || 'text/plain';
-				let isPixUI = /PixUI/.test(ua);
-				let ver = /(\d)\.(\d)\.(\d+)/.exec(ua); // 0.2.*以上
-				let isHTML = type.indexOf('text/html') >= 0;
-				let isJS = type.indexOf('javascript') >= 0;
-				let isCSS = type.indexOf('text/css') >= 0;
-				log('hook send...', c.length, type);
-				if (isPixUI && parseInt(ver[2]) >= 2 && (isHTML || isJS)) {
-					let cp = require('child_process');
-					let opts = isJS ? ['--js'] : [];
-					let child = cp.spawn(rtCompilerToolPath, ['--src', 'stdin', ...opts]);
-					child.stdin.write(c);
-					child.stdout.on('data', (data) => {
-						// console.log('get data from fbs', req.url, data.byteLength);
-						addBuffer(data);
-					});
-					child.stdout.on('close', () => {
-						// console.log('get data from fbs finish!!', req.url);
-						res.end();
-					});
-					child.stderr.on('data', (data) => {
-						console.log('get err from fbs', data.toString());
-					});
-					child.stdin.end();
-				} else {
-					_send.call(this, c);
-				}
-			};
-			next();
-		});
-
-		//一个虚拟path，可以随时修改指向地址，可以将此地址硬编码到测试代码里，每次想切换测试页面就不用改代码重新编译了
-		let testTo;
-		app.get('/test', (req, res) => {
-			if (req.query.to) {
-				testTo = '/' + req.query.to;
-				res.send(`set /test to ${testTo}`);
-				return;
-			} else {
-				if (!testTo) {
-					res.send('use /test?to=xxx to set redirect target');
-					return;
-				}
-				res.redirect(testTo);
-			}
-		});
-
-		//定制首页显示所有entry，方便浏览
-		app.get(`/`, (req, res) => {
-			res.setHeader('content-type', 'text/html');
-			res.send(
-				appDef
-					.concat([{ name: 'test' }])
-					.map((v) => {
-						return `<a href=${port}/${v.name} style='font-size:36px'>${v.name}</a>`;
-					})
-					.join('<br>') + "<div style='font-size:40pt' onclick='window.close();'>close</div>"
-			);
-		});
-	};

package/.pixiderc/webpack.js

@@ -1,180 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const webpack = require('webpack');
-
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const { getLocalIP, setupFilter } = require('./util');
-
-const pr = path.resolve;
-let isShipping = process.env.mode != 'development';
-let rootDir = pr(__dirname, '..', 'dist');
-let pandoraHtmlDir = pr(__dirname, '..');
-let buildOutputPath = pr(rootDir, 'html' + (isShipping ? '-pro' : '-dev'));
-
-function getHtmlName(v) {
-    switch (v.name) {
-        case 'app': {
-            return 'index.html'; // app不允许自定义
-        }
-        case 'preprocess': {
-            return 'preprocess.html'; // preprocess不允许自定义
-        }
-        default: {
-            return v.output ? `${v.output}.html` : `${v.name}.html`;
-        }
-    }
-}
-
-// let port = 8080;
-// const port = require(pr(__dirname, '..', '.pixiderc.json'))['devServer.port'];
-const port = process.env.port || 8080;
-///////////////////////////////////
-//所有app定义在这里
-// TODO 把这部分配置放到单独的JSON文件中，便于自动生成或者通过图形界面管理
-let appDef = require(pr(__dirname, 'apps.json'));
-if (fs.existsSync(pr(__dirname, 'custom.json'))) {
-    appDef = [...appDef, ...require(pr(__dirname, 'custom.json'))]
-}
-const appSettings = require(pr(__dirname, 'appsettings.json'));
-
-console.log({isShipping});
-
-const htmlCopyPlugins = appDef.map((app) => {
-    return app.template ? new HtmlWebpackPlugin({
-        hash: isShipping,
-        minify: isShipping,
-        chunks: [app.name],
-        template: app.template,
-        filename: app.name + '/' + getHtmlName(app),
-    }) : false;
-});
-
-let plugins = [
-    new webpack.DefinePlugin({
-        APP_SETTING: JSON.stringify(appSettings),
-    }),
-	new CleanWebpackPlugin({
-		cleanOnceBeforeBuildPatterns: [
-				'**/*',
-				path.join(rootDir, '.build'),
-
-		]
-	}),
-	new ForkTsCheckerWebpackPlugin({ async: false }),
-	...htmlCopyPlugins,
-	!isShipping ? new webpack.HotModuleReplacementPlugin() : undefined,
-].filter((v) => !!v);
-
-let rewrites = appDef.map((v) => {
-	return { from: new RegExp(`^/${v.name}/`), to: `/${v.name}` };
-});
-
-module.exports = {
-	entry: Object.fromEntries(appDef.map((v) => [v.name, v.entry])),
-	output: {
-		path: buildOutputPath,
-		filename: '[name]/[name].js',
-		publicPath: isShipping
-			? '../' //发布后都从文件系统加载，使用相对路径引用素材
-			: '/', // `http://${getLocalIP()[0]}:${port}/`, //开发时绑定到外部ip，方便手机访问
-	},
-
-	resolve: {
-		modules: [`${pandoraHtmlDir}/src/node_modules`, pandoraHtmlDir, `${pandoraHtmlDir}/node_modules`], //必须使用绝对路径，不然那些符号链接过来的源文件会找不到当前目录下的node_modules
-		extensions: ['.js', '.jsx', '.ts', '.tsx'],
-		alias: {
-			['preact$']: path.resolve('./lib/preact/src'),
-			['preact/hooks$']: path.resolve('./lib/preact/hooks/src'),
-			['preact-router$']: path.resolve('./lib/preact-router/src'),
-			['preact-router/match']: path.resolve('./lib/preact-router/match/src'),
-			['react-window']: path.resolve('./lib/react-window/src'),
-			['@improbable-eng/grpc-web']: path.resolve('./lib/grpc-web/dist'),
-			react: path.resolve('./lib/preact/compat/src'),
-		},
-	},
-
-	module: {
-		rules: [
-			{
-				test: /.(js|ts)x?$/,
-				use: {
-					loader: require.resolve('babel-loader'),
-					options: {
-						presets: [['@babel/preset-typescript', { allowNamespaces: true }]],
-						plugins: [
-							'@babel/plugin-transform-flow-strip-types',
-							'@babel/plugin-syntax-jsx',
-							['@babel/plugin-proposal-decorators', { legacy: true }],
-							['@babel/plugin-proposal-class-properties'],
-							['@babel/plugin-proposal-optional-chaining'],
-							['@babel/plugin-transform-react-jsx', { pragma: 'makeDOM' }],
-							['babel-plugin-jsx-pragmatic', { module: __dirname + '/../lib/dom', import: 'makeDOM' }],
-							// 'babel-plugin-transform-remove-console',
-						],
-					},
-				},
-				// include: [path.resolve(__dirname + '/../')],
-				exclude: /node_modules/,
-			},
-			//注：我们自己不写css，因此只有第3方库有css，它们的css不使用module(antd)
-			{
-				test: /\.css$/,
-				use: [require.resolve('style-loader'), require.resolve('css-loader')],
-			},
-			//我们自己只写less或sass，且必须使用module
-			{
-				test: /\.less$/,
-				use: ['style-loader', { loader: require.resolve('css-loader'), options: { modules: true } }, { loader: require.resolve('less-loader'), options: { javascriptEnabled: true } }],
-			},
-			{
-				test: /\.s[ac]ss$/i,
-				use: ['style-loader', { loader: require.resolve('css-loader'), options: { modules: false } }, 'sass-loader'],
-			},
-			{
-				test: /\.(png|jpg|gif|lottie)$/,
-				loader: require.resolve('file-loader'),
-				options: {
-					name: 'static/media/[name].[hash:8].[ext]',
-				},
-			},
-		],
-	},
-
-	optimization: {
-		minimize: false,
-	},
-
-	devtool: 'source-map',
-
-	plugins,
-
-	devServer: {
-        sockPath: `/${port}/sockjs-node`,
-        sockPort: port,
-		port,
-		host: '0.0.0.0',
-		transportMode: 'ws',
-
-		hot: true,
-		liveReload: true,
-		// inline: false,
-		disableHostCheck: true,
-		overlay: true,
-		writeToDisk: true,
-
-		contentBase: [__dirname + '/../lib/assets'],
-		watchContentBase: true,
-
-		historyApiFallback: {
-			rewrites,
-		},
-
-		headers: {
-			'Access-Control-Allow-Origin': '*', //方便本机用localhost打开，难记ip
-		},
-
-		before: setupFilter(appDef),
-	},
-};

package/faas/helloworld.js

@@ -1,8 +0,0 @@
-/**
- * @param {object} req --请求体
- * @returns {string} -- 返回信息
- */
-export function DemoSayHello(req){
-    const resp = `hello world!${req}`;
-    return resp;
-}