1

.gitignore

+# Created by .ignore support plugin (hsz.mobi)
+
+.temp
+node_modules
+dist
+yarn.lock
+package-template.iml
+/test/src/bundle.js
+/test/src/meta.json
+types

.npmignore

+# Created by .ignore support plugin (hsz.mobi)
+/src/
+/test/
+*.iml
+.temp
+/assets
+tsconfig.json

README.md

 # testcanvas
 
+## Install
+`yarn add @spark/testcanvas`
+
+## Usage
+```js
+import {...} from '@spark/testcanvas'
+```
+
+## Contribute
+1. `yarn dev` to develop package
+2. `cd test && yarn && yarn dev` to develop test
+
+## Publish
+`npm run pub`

package-lock.json

+{
+	"name": "@spark/testcanvas",
+	"version": "1.0.0",
+	"lockfileVersion": 1,
+	"requires": true,
+	"dependencies": {
+		"@types/prop-types": {
+			"version": "15.7.3",
+			"resolved": "http://npm.dui88.com:80/@types%2fprop-types/-/prop-types-15.7.3.tgz",
+			"integrity": "sha1-KrDV2i5YFflLC51LldHl8kOrLKc="
+		},
+		"@types/react": {
+			"version": "16.14.2",
+			"resolved": "http://npm.dui88.com:80/@types%2freact/-/react-16.14.2.tgz",
+			"integrity": "sha1-hdzAlH0GRTSZI8BMzvYBihq3U4w=",
+			"requires": {
+				"@types/prop-types": "*",
+				"csstype": "^3.0.2"
+			}
+		},
+		"csstype": {
+			"version": "3.0.6",
+			"resolved": "http://npm.dui88.com:80/csstype/-/csstype-3.0.6.tgz",
+			"integrity": "sha1-hl0LWDPX2NQPTluKbXauo95HJe8="
+		},
+		"duiba-utils": {
+			"version": "1.0.8",
+			"resolved": "http://npm.dui88.com:80/duiba-utils/-/duiba-utils-1.0.8.tgz",
+			"integrity": "sha512-118238WplYrQ1xxFOJUbjz6lmyyNAhMNUV1zoVdQonXGfyYNjeG2al1NMpVwTMSIlDoc1gtLWpWh2Ok72BLgmg=="
+		},
+		"fyge": {
+			"version": "2.0.15",
+			"resolved": "http://npm.dui88.com:80/fyge/-/fyge-2.0.15.tgz",
+			"integrity": "sha512-Ke/XDi0QHxWsc68XKsloqGIvhCpAuWEAU9MFKZGFMosYsybVfhucbbbgYIHxu99bMOdw1tZNJPP3aDffLvjQzQ==",
+			"requires": {
+				"duiba-utils": "^1.0.0"
+			}
+		},
+		"spark-wrapper-fyge": {
+			"version": "1.0.29",
+			"resolved": "http://npm.dui88.com:80/spark-wrapper-fyge/-/spark-wrapper-fyge-1.0.29.tgz",
+			"integrity": "sha512-MBjmCFp3pjHukr4JuUQgYQC27PiCFM+OLLdQuR0sXpYAo4JOLLnunB4gojeewIK5fYm1URYbQBDvK0NZhK1zpQ==",
+			"requires": {
+				"fyge": "^2.0.13"
+			}
+		},
+		"tslib": {
+			"version": "2.1.0",
+			"resolved": "http://npm.dui88.com:80/tslib/-/tslib-2.1.0.tgz",
+			"integrity": "sha1-2mCGDxwuyqVwOrfTm8Bba/mIuXo=",
+			"dev": true
+		}
+	}
+}

package.json

+{
+	"name": "@spark/testcanvas",
+	"version": "1.0.0",
+	"main": "dist/bundle.js",
+	"types": "types/index.d.ts",
+	"license": "MIT",
+	"scripts": {
+		"dev": "spark package pack -s src -o test/src/bundle.js -w",
+		"pack": "spark package pack -s src -o dist/bundle.js -p",
+		"pub": "npm run declare && read -p 'Input version: ' version && read -p 'Input remark: ' remark && spark package publish -s src -v $version -r $remark",
+		"declare": "tsc --outDir '.temp/out' -d --declarationDir 'types' --emitDeclarationOnly"
+	},
+	"dependencies": {
+		"@types/react": "^16.9.56",
+		"spark-wrapper-fyge": "^1.0.26"
+	},
+	"devDependencies": {
+		"tslib": "^2.0.1"
+	}
+}

src/GameStage.ts

+/**
+ * Created by rockyl on 2020/11/14.
+ * 一个简单示例
+ */
+import {WidgetBase, TextField, Sprite, TextureCache, Tween} from "spark-wrapper-fyge";
+
+export class GameStage extends WidgetBase {
+	private _label: TextField;
+	private _img: Sprite;
+	private _timer;
+
+	private _setup() {
+		let label = this._label = new TextField();
+		label.text = 'Hello CanvasWidget!!!';
+		label.fillColor = '#000';
+		label.size = 40;
+		this.addChild(label);
+
+		let img = this._img = new Sprite();
+		img.x = 200;
+		img.y = 300;
+		img.texture = TextureCache['image'];
+		img.anchorTexture.set(0.5, 0.5);
+		this.addChild(img);
+		Tween.get(img, {loop: true})
+			.to({rotation: 360}, 3000);
+	}
+
+	onLaunched() {
+		this._setup();
+	}
+
+	/**
+	 * 事件回调
+	 * @param type
+	 * @param payload
+	 */
+	onEvent(type: string, payload: any) {
+		switch (type) {
+			case 'start':
+				this.start();
+				break;
+			case 'stop':
+				this.stop();
+				break;
+		}
+	}
+
+	/**
+	 * 销毁回调
+	 */
+	onDestroy() {
+		this.stop();
+		Tween.removeTweens(this._img);
+	}
+
+	start() {
+		this._timer = setInterval(this._showOne, 1000);
+	}
+
+	stop() {
+		clearInterval(this._timer);
+	}
+
+	private _showOne = () => {
+		const {textArray} = this.props;
+		const text = textArray[Math.floor(Math.random() * textArray.length)];
+		this._label.text = text;
+
+		/**
+		 * 对外派发事件
+		 */
+		this.emitEvent('show_one', {text})
+	}
+}

src/env.d.ts

+
+declare function getMetaConfig(id: string);
+declare const PROCESS = 1;
+declare const DOM_COMPONENT = 2;
+declare const CANVAS_WIDGET = 3;

src/index.ts

+/**
+ * Created by rockyl on 2020/9/19.
+ */
+
+import {GameStage} from "./GameStage";
+
+/**
+ * Testcanvas模块
+ * @description Testcanvas模块的工厂方法
+ * @ctype CANVAS_WIDGET
+ */
+export function Testcanvas() {
+	return new GameStage(getMetaConfig('Testcanvas'));
+}

src/meta.json

+{
+	"id": "Testcanvas",
+	"name": "测试模块",
+	"desc": "实现了测试模块",
+	"config": {
+		"Testcanvas": {
+			"props": [
+				{
+					"name": "textArray",
+					"alias": "文本组",
+					"type": "string",
+					"default": ["aaa", "bbb", "ccc", "ddd"]
+				}
+			],
+			"assets": [
+				{
+					"name": "齿轮",
+					"url": "//yun.duiba.com.cn/spark/assets/齿轮8.fce30eaadda192b44a1b80038011947830d45ad8.png",
+					"uuid": "image",
+					"ext": ".png"
+				}
+			],
+			"events": {
+				"in": {
+					"start": {
+						"alias": "开始"
+					},
+					"stop": {
+						"alias": "停止"
+					}
+				},
+				"out": {
+					"show_one": {
+						"alias": "展示一个文本",
+						"data": {
+							"text": "文本"
+						}
+					}
+				}
+			}
+		}
+	}
+}

test/.env

+EXTEND_ESLINT = true

test/.eslintignore

+
+src/bundle.js

test/config-overrides.js

+/**
+ * Created by rockyl on 2020/11/20.
+ */
+const path = require('path');
+
+module.exports = {
+	devServer: function(configFunction){
+		return function(proxy, allowedHost) {
+			const config = configFunction(proxy, allowedHost);
+			config.contentBase = [path.resolve('public'), path.resolve('../')];
+
+			return config;
+		};
+	}
+}

test/package.json

+{
+  "name": "test",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.3",
+    "@spark/ui": "^2.0.7"
+  },
+  "scripts": {
+    "dev": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-scripts ",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "sass": "^1.29.0",
+    "react-app-rewired": "^2.1.6"
+  }
+}

test/public/index.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
+  <meta name="theme-color" content="#000000" />
+  <meta
+    name="description"
+    content="Web site created using create-react-app"
+  />
+  <title>test: testcanvas</title>
+
+  <script src="//yun.duiba.com.cn/js-libs/rem/1.1.0/rem.min.js"></script>
+</head>
+<body>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+<!--
+	This HTML file is a template.
+	If you open it directly in the browser, you will see an empty page.
+
+	You can add webfonts, meta tags, or analytics to this file.
+	The build step will place the bundled scripts into the <body> tag.
+
+	To begin the development, run `npm start` or `yarn start`.
+	To create a production bundle, use `npm run build` or `yarn build`.
+-->
+</body>
+</html>

test/src/App.js

+import React, {useState, useRef} from 'react';
+import './App.scss';
+import {CanvasWidget} from '@spark/ui';
+import {Testcanvas} from "./bundle";
+
+/**
+ * 配置覆盖
+ */
+const widgetConfig = {
+	props: {
+
+	},
+	assets: [
+		{
+			"name": "红包",
+			"url": "//yun.duiba.com.cn/aurora/df6e289d635a6a2b4f3df055e00301f63b07d863.png",
+			"uuid": "image",
+			"ext": ".png"
+		},
+	],
+}
+
+function App() {
+	const [widgetVisible, setWidgetVisible] = useState(false);
+	const widgetRef = useRef();
+
+	function onReady(widget) {
+		console.log('CanvasWidget ready!')
+	}
+
+	/**
+	 * 事件回调
+	 */
+	function onEvent(type, payload) {
+		console.log(type, payload);
+	}
+
+	function onAssetsProcess(loaded, total) {
+		console.log(`assets load process:${loaded}/${total}`)
+	}
+
+	function onAssetsComplete() {
+		console.log(`assets load complete`)
+	}
+
+	function onClickButton(type) {
+		switch (type) {
+			case 'setup':
+				setWidgetVisible(true);
+				break;
+			case 'unSetup':
+				setWidgetVisible(false);
+				break;
+			default:
+				widgetRef.current.emitEvent(type)
+				break;
+		}
+	}
+
+	return (
+		<div className="App">
+			<div className="control-bar">
+				<button onClick={e => onClickButton('setup')}>setup</button>
+				<button onClick={e => onClickButton('unSetup')}>unSetup</button>
+
+				<button onClick={e => onClickButton('start')}>start</button>
+				<button onClick={e => onClickButton('stop')}>stop</button>
+			</div>
+			{
+				widgetVisible ? <CanvasWidget ref={widgetRef} className="canvas-widget" widgetFactory={Testcanvas} widgetConfig={widgetConfig}
+				                              onEvent={onEvent}
+				                              onReady={onReady} onAssetsProcess={onAssetsProcess}
+				                              onAssetsComplete={onAssetsComplete}/> : null
+			}
+		</div>
+	);
+}
+
+export default App;

test/src/App.scss

+.App {
+	width: 100%;
+	height: 100%;
+
+	label{
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 5px;
+	}
+
+	.canvas-widget {
+		width: 100%;
+		height: 100%;
+	}
+
+	.control-bar {
+		position: absolute;
+		right: 10px;
+		bottom: 10px;
+	}
+}

test/src/App.test.js

+import React from 'react';
+import { render } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  const { getByText } = render(<App />);
+  const linkElement = getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

test/src/index.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.scss';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA

test/src/index.scss

+html, body, #root{
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-size: 14px;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

test/src/setupTests.js

+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom/extend-expect';

tsconfig.json

+{
+	"compilerOptions": {
+		"module": "ES6",
+		"target": "ES5",
+		"jsx": "react",
+		"allowJs": true,
+		"moduleResolution": "Node",
+		"allowSyntheticDefaultImports": true,
+		"resolveJsonModule": true,
+		"lib": [
+			"ES2015",
+			"DOM"
+		]
+	},
+	"include": ["src"]
+}