tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add DoricVMElement

Browse Source
This commit is contained in:
pengfei.zhou 2019-12-19 10:42:57 +08:00
parent dce677e9a1
commit f5f23f611e
9 changed files with 1832 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
dist/Counter.js vendored Normal file
View File

@ -0,0 +1,125 @@
'use strict';
var doric = require('doric');
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (undefined && undefined.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
class CounterView extends doric.ViewHolder {
build(root) {
root.addChild(doric.vlayout([
doric.text({
textSize: 40,
layoutConfig: {
alignment: doric.Gravity.Center,
widthSpec: doric.LayoutSpec.FIT,
heightSpec: doric.LayoutSpec.FIT,
},
}).also(it => { this.number = it; }),
doric.text({
text: "点击计数",
textSize: 20,
border: {
width: 1,
color: doric.Color.parse('#000000'),
},
corners: 5,
layoutConfig: {
alignment: doric.Gravity.Center,
widthSpec: doric.LayoutSpec.FIT,
heightSpec: doric.LayoutSpec.FIT,
},
padding: {
left: 10,
right: 10,
top: 10,
bottom: 10,
},
shadow: {
color: doric.Color.parse("#00ff00"),
opacity: 0.5,
radius: 20,
offsetX: 10,
offsetY: 10,
}
}).also(it => { this.counter = it; }),
]).also(it => {
it.width = 200;
it.height = 200;
it.space = 20;
it.gravity = doric.Gravity.Center;
it.layoutConfig = {
alignment: doric.Gravity.Center
};
it.border = {
width: 1,
color: doric.Color.parse("#000000"),
};
it.shadow = {
color: doric.Color.parse("#ffff00"),
opacity: 0.5,
radius: 20,
offsetX: 10,
offsetY: 10,
};
it.corners = 20;
it.backgroundColor = doric.Color.parse('#ff00ff');
}));
root.addChild((new doric.Image).also(iv => {
iv.imageUrl = "https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png";
iv.layoutConfig = {
widthSpec: doric.LayoutSpec.FIT,
heightSpec: doric.LayoutSpec.FIT,
};
}));
}
}
class CounterVM extends doric.ViewModel {
onAttached(s, vh) {
vh.counter.onClick = () => {
this.updateState(state => {
state.count++;
});
};
}
onBind(s, vh) {
vh.number.text = `${s.count}`;
}
}
let MyPage = class MyPage extends doric.VMPanel {
getViewHolderClass() {
return CounterView;
}
getViewModelClass() {
return CounterVM;
}
getState() {
return {
count: 0
};
}
log() {
doric.log("Hello.HEGO");
doric.logw("Hello.HEGO");
doric.loge("Hello.HEGO");
context.modal.toast('This is a toast.').then((r) => {
doric.loge(r);
});
}
};
__decorate([
doric.NativeCall,
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], MyPage.prototype, "log", null);
MyPage = __decorate([
Entry
], MyPage);
//# sourceMappingURL=Counter.js.map

1512
dist/index.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

1
dist/index.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"index.js","sources":["../build/src/DoricElement.js","../build/index.js"],"sourcesContent":["import axios from 'axios';\nimport { jsCallReject } from 'doric/src/runtime/sandbox';\nlet contexId = 0;\nfunction getContextId() {\n return `${contexId++}`;\n}\nfunction initDoric() {\n jsCallReject('', '');\n}\nconsole.log(doricLibBundle);\ninitDoric();\nexport class DoricElement extends HTMLElement {\n constructor() {\n super();\n this.source = this.getAttribute('src') || \"\";\n this.alias = this.getAttribute('alias') || this.source;\n axios.get(this.source).then(result => {\n this.load(result.data);\n });\n }\n load(content) {\n const script = document.createElement('script');\n const contextId = getContextId();\n script.text = `Reflect.apply(function(doric,context,Entry,require,exports){\n ${content}\n },doric.jsObtainContext(\"${contextId}\"),[undefined,doric.jsObtainContext(\"${contextId}\"),doric.jsObtainEntry(\"${contextId}\"),doric.__require__,{}]);`;\n this.append(script);\n }\n}\n","import { DoricElement } from './src/DoricElement';\nwindow.customElements.define('doric-div', DoricElement);\n"],"names":["jsCallReject"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEA,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,SAAS,YAAY,GAAG;IACxB,IAAI,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;IAC3B,CAAC;IACD,SAAS,SAAS,GAAG;IACrB,IAAIA,oBAAY,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IACzB,CAAC;IACD,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAC5B,SAAS,EAAE,CAAC;AACZ,IAAO,MAAM,YAAY,SAAS,WAAW,CAAC;IAC9C,IAAI,WAAW,GAAG;IAClB,QAAQ,KAAK,EAAE,CAAC;IAChB,QAAQ,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACrD,QAAQ,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC;IAC/D,QAAQ,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI;IAC9C,YAAY,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACnC,SAAS,CAAC,CAAC;IACX,KAAK;IACL,IAAI,IAAI,CAAC,OAAO,EAAE;IAClB,QAAQ,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACxD,QAAQ,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACzC,QAAQ,MAAM,CAAC,IAAI,GAAG,CAAC;gBACP,EAAE,OAAO,CAAC;qCACW,EAAE,SAAS,CAAC,qCAAqC,EAAE,SAAS,CAAC,wBAAwB,EAAE,SAAS,CAAC,0BAA0B,CAAC,CAAC;IAClK,QAAQ,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC5B,KAAK;IACL,CAAC;;IC3BD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;;;;"}

24
index.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Doric Playground</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but This doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app">
<doric-div src="./dist/Counter.js" alias="test">
</doric-div>
</div>
<script type="text/javascript" src="./dist/index.js"></script>
</body>
</html>

3
index.ts
View File

@ -0,0 +1,3 @@
import { DoricElement } from './src/DoricElement'
window.customElements.define('doric-div', DoricElement);

83
package-lock.json generated
View File

@ -35,11 +35,28 @@
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz",
"integrity": "sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ=="
},
"axios": {
"version": "0.19.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
"integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
"requires": {
"follow-redirects": "1.5.10",
"is-buffer": "^2.0.2"
}
},
"builtin-modules": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
"integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw=="
},
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"requires": {
"ms": "2.0.0"
}
},
"doric": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/doric/-/doric-0.1.3.tgz",
@ -59,11 +76,52 @@
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
"integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w=="
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"requires": {
"debug": "=3.1.0"
}
},
"is-buffer": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
"integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
},
"is-module": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
"integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE="
},
"is-reference": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.1.4.tgz",
"integrity": "sha512-uJA/CDPO3Tao3GTrxYn6AwkM4nUPJiGGYu5+cB8qbC7WGFlrKZbiRo7SFKxUAEpFUfiHofWCXBUNhvYJMh+6zw==",
"requires": {
"@types/estree": "0.0.39"
},
"dependencies": {
"@types/estree": {
"version": "0.0.39",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
"integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
}
}
},
"magic-string": {
"version": "0.25.4",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.4.tgz",
"integrity": "sha512-oycWO9nEVAP2RVPbIoDoA4Y7LFIJ3xRYov93gAyJhZkET1tNuB0u7uWkZS2LpBWTJUWnmau/To8ECWRC+jKNfw==",
"requires": {
"sourcemap-codec": "^1.4.4"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
},
"path-parse": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
@ -92,6 +150,26 @@
"acorn": "^7.1.0"
}
},
"rollup-plugin-commonjs": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-10.1.0.tgz",
"integrity": "sha512-jlXbjZSQg8EIeAAvepNwhJj++qJWNJw1Cl0YnOqKtP5Djx+fFGkp3WRh+W0ASCaFG5w1jhmzDxgu3SJuVxPF4Q==",
"requires": {
"estree-walker": "^0.6.1",
"is-reference": "^1.1.2",
"magic-string": "^0.25.2",
"resolve": "^1.11.0",
"rollup-pluginutils": "^2.8.1"
}
},
"rollup-plugin-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/rollup-plugin-json/-/rollup-plugin-json-4.0.0.tgz",
"integrity": "sha512-hgb8N7Cgfw5SZAkb3jf0QXii6QX/FOkiIq2M7BAQIEydjHvTyxXHQiIzZaTFgx1GK0cRCHOCBHIyEkkLdWKxow==",
"requires": {
"rollup-pluginutils": "^2.5.0"
}
},
"rollup-plugin-node-resolve": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz",
@ -112,6 +190,11 @@
"estree-walker": "^0.6.1"
}
},
"sourcemap-codec": {
"version": "1.4.6",
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.6.tgz",
"integrity": "sha512-1ZooVLYFxC448piVLBbtOxFcXwnymH9oUF8nRd3CuYDVvkRBxRl6pB4Mtas5a4drtL+E8LDgFkQNcgIw6tc8Hg=="
},
"tslib": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",

11
package.json
View File

@ -2,9 +2,10 @@
"name": "doric-h5",
"version": "0.1.0",
"description": "Doric library for html",
"main": "index.js",
"main": "build/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc -p .&& rollup -c"
},
"repository": {
"type": "git",
@ -17,6 +18,10 @@
},
"homepage": "https://github.com/doric-pub/doric-h5#readme",
"dependencies": {
"doric": "^0.1.3"
"axios": "^0.19.0",
"doric": "^0.1.3",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-json": "^4.0.0",
"rollup-plugin-node-resolve": "^5.2.0"
}
}

35
rollup.config.js Normal file
View File

@ -0,0 +1,35 @@
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import jsonPlugin from 'rollup-plugin-json'
import fs from 'fs'
import path from 'path'
const sandboxBundle = fs.readFileSync(path.resolve("./node_modules/doric/bundle/doric-sandbox.js"), 'utf-8')
const doricLibBundle = fs.readFileSync(path.resolve("./node_modules/doric/bundle/doric-lib.js"), 'utf-8')
export default {
input: `build/index.js`,
output: {
format: "iife",
name: "index",
file: `dist/index.js`,
sourcemap: true,
banner: sandboxBundle,
globals: {
doric: "doric_lib",
'doric/src/runtime/sandbox': 'doric',
doricLibBundle
},
},
plugins: [
resolve({ mainFields: ["jsnext"] }),
commonjs(),
jsonPlugin(),
],
external: ['axios', 'reflect-metadata', 'doric'],
onwarn: function (warning) {
if (warning.code === 'THIS_IS_UNDEFINED') { return; }
console.warn(warning.message);
},
}

41
src/DoricElement.ts Normal file
View File

@ -0,0 +1,41 @@
import axios from 'axios'
import { jsCallReject } from 'doric/src/runtime/sandbox'
declare const doricLibBundle: string
let contexId = 0
function getContextId() {
return `${contexId++}`
}
function initDoric() {
jsCallReject('', '')
}
console.log(doricLibBundle)
initDoric()
export class DoricElement extends HTMLElement {
source: string
alias: string
constructor() {
super()
this.source = this.getAttribute('src') || ""
this.alias = this.getAttribute('alias') || this.source
axios.get<string>(this.source).then(result => {
this.load(result.data)
})
}
load(content: string) {
const script = document.createElement('script');
const contextId = getContextId();
script.text = `Reflect.apply(function(doric,context,Entry,require,exports){
${content}
},doric.jsObtainContext("${contextId}"),[undefined,doric.jsObtainContext("${contextId}"),doric.jsObtainEntry("${contextId}"),doric.__require__,{}]);`
this.append(script)
}
}