mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
chore(): moved stencil-fiber-demo into its own repo.
This commit is contained in:
Josh Thomas
@@ -1,25 +0,0 @@
|
||||
{
|
||||
"name": "@stencil/fiber-demo",
|
||||
"version": "0.0.1",
|
||||
"description": "Demo of Stencil app using Ionic components to show rendering capabilities",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "npm run clean && stencil build",
|
||||
"clean": "rm -Rf ./dist/*",
|
||||
"link.stencil": "npm link @stencil/core",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/ionic-team/ionic.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@stencil/core": "^0.0.1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/ionic-team/ionic/issues"
|
||||
},
|
||||
"homepage": "https://github.com/ionic-team/ionic#readme"
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
import { Component, Prop } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'fiber-demo'
|
||||
})
|
||||
export class FiberDemo {
|
||||
@Prop() elapsed: number = 0;
|
||||
|
||||
seconds: number = 0;
|
||||
intervalID: number;
|
||||
|
||||
ionViewDidLoad() {
|
||||
var tick: Function = this.tick.bind(this);
|
||||
this.intervalID = setInterval(tick, 1000);
|
||||
}
|
||||
tick() {
|
||||
this.seconds = (this.seconds % 10) + 1;
|
||||
}
|
||||
|
||||
hostData() {
|
||||
const elapsed = this.elapsed;
|
||||
const t = (elapsed / 1000) % 10;
|
||||
const scale = 1 + (t > 5 ? 10 - t : t) / 10;
|
||||
var containerStyle = {
|
||||
position: 'absolute',
|
||||
transformOrigin: '0 0',
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
background: '#eee',
|
||||
transform: 'scaleX(' + (scale / 2.1) + ') scaleY(0.7) translateZ(0.1px)'
|
||||
};
|
||||
|
||||
return {
|
||||
style: containerStyle
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<fiber-triangle
|
||||
x={0}
|
||||
y={0}
|
||||
s={1000}
|
||||
seconds={this.seconds}
|
||||
>
|
||||
</fiber-triangle>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import { Component, Prop, State } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'fiber-dot'
|
||||
})
|
||||
export class FiberDot {
|
||||
@Prop() size: number;
|
||||
@Prop() x: number;
|
||||
@Prop() y: number;
|
||||
@Prop() text: string;
|
||||
|
||||
@State() hover: boolean = false;
|
||||
|
||||
enter() {
|
||||
this.hover = true;
|
||||
}
|
||||
|
||||
leave() {
|
||||
this.hover = false;
|
||||
}
|
||||
|
||||
hostData() {
|
||||
const s = this.size * 1.3;
|
||||
const style = {
|
||||
position: 'absolute',
|
||||
font: 'normal 15px sans-serif',
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
width: s + 'px',
|
||||
height: s + 'px',
|
||||
left: (this.x) + 'px',
|
||||
top: (this.y) + 'px',
|
||||
borderRadius: (s / 2) + 'px',
|
||||
lineHeight: (s) + 'px',
|
||||
background: this.hover ? '#ff0' : '#61dafb'
|
||||
};
|
||||
|
||||
return {
|
||||
style: style,
|
||||
on: {
|
||||
mouseenter: this.enter.bind(this),
|
||||
mouseleave: this.leave.bind(this)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
this.hover ? '**' + this.text + '**' : this.text
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
import { Component, Prop, h } from '@stencil/core';
|
||||
|
||||
var targetSize = 25;
|
||||
|
||||
@Component({
|
||||
tag: 'fiber-triangle',
|
||||
shadow: false
|
||||
})
|
||||
export class FiberTriangle {
|
||||
|
||||
@Prop() x: number;
|
||||
@Prop() y: number;
|
||||
@Prop() s: number;
|
||||
@Prop() seconds: number;
|
||||
|
||||
render() {
|
||||
var s = this.s;
|
||||
if (s <= targetSize) {
|
||||
return (
|
||||
<fiber-dot
|
||||
x={this.x - (targetSize / 2)}
|
||||
y={this.y - (targetSize / 2)}
|
||||
size={targetSize}
|
||||
text={this.seconds.toString()}
|
||||
></fiber-dot>
|
||||
);
|
||||
}
|
||||
s = s / 2;
|
||||
|
||||
return [
|
||||
<fiber-triangle
|
||||
x={this.x}
|
||||
y={this.y - (s / 2)}
|
||||
s={s}
|
||||
seconds={this.seconds}
|
||||
></fiber-triangle>,
|
||||
<fiber-triangle
|
||||
x={this.x - s}
|
||||
y={this.y + (s / 2)}
|
||||
s={s}
|
||||
seconds={this.seconds}
|
||||
></fiber-triangle>,
|
||||
<fiber-triangle
|
||||
x={ this.x + s}
|
||||
y={this.y + (s / 2)}
|
||||
s={s}
|
||||
seconds={this.seconds}
|
||||
></fiber-triangle>
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
exports.config = {
|
||||
bundles: [
|
||||
{ components: ['fiber-demo', 'fiber-triangle', 'fiber-dot'] }
|
||||
]
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"alwaysStrict": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"allowUnreachableCode": false,
|
||||
"declaration": false,
|
||||
"experimentalDecorators": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"lib": [
|
||||
"dom",
|
||||
"es2015"
|
||||
],
|
||||
"moduleResolution": "node",
|
||||
"module": "es2015",
|
||||
"target": "es2015",
|
||||
"noImplicitAny": true,
|
||||
"noImplicitReturns": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"outDir": "dist",
|
||||
"pretty": true,
|
||||
"removeComments": false,
|
||||
"sourceMap": false,
|
||||
"jsx": "react",
|
||||
"jsxFactory": "h"
|
||||
},
|
||||
"include": [
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
"types/jsx.d.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
/*! Built with http://stenciljs.com */
|
||||
|
||||
(function (window, document, projectNamespace, projectFileName, projectCore, projectCoreEs5, components) {
|
||||
'use strict';
|
||||
// create global namespace if it doesn't already exist
|
||||
|
||||
var Project = window[projectNamespace] = window[projectNamespace] || {};
|
||||
Project.components = Project.components || components;
|
||||
Project.ns = projectNamespace;
|
||||
// find the static directory, which should be the same as this JS file
|
||||
// reusing the "x" and "y" variables for funzies
|
||||
var x = document.getElementsByTagName('script');
|
||||
x = x[x.length - 1];
|
||||
var y = document.querySelector('script[data-static-dir]');
|
||||
if (y) {
|
||||
Project.staticDir = y.dataset['staticDir'];
|
||||
} else {
|
||||
y = x.src.split('/');
|
||||
y.pop();
|
||||
Project.staticDir = x.dataset['staticDir'] = y.join('/') + '/';
|
||||
}
|
||||
Project.staticDir += projectFileName + '/';
|
||||
// auto hide components until they been fully hydrated
|
||||
x = document.createElement('style');
|
||||
x.innerHTML = Project.components.map(function (c) {
|
||||
return c[0];
|
||||
}).join(',') + '{visibility:hidden}.hydrated{visibility:inherit}';
|
||||
x.innerHTML += 'ion-app:not(.hydrated){display:none}';
|
||||
document.head.appendChild(x);
|
||||
// request the core file this browser needs
|
||||
y = document.createElement('script');
|
||||
y.src = Project.staticDir + (window.customElements ? projectCore : projectCoreEs5);
|
||||
document.head.appendChild(y);
|
||||
// performance.now() polyfill
|
||||
if ('performance' in window === false) {
|
||||
window.performance = {};
|
||||
}
|
||||
if ('now' in performance === false) {
|
||||
var navStart = Date.now();
|
||||
performance.now = function () {
|
||||
return Date.now() - navStart;
|
||||
};
|
||||
}
|
||||
})(window, document, "App","app","app.core.js","app.core.ce.js",[["FIBER-DEMO","fiber-demo.fiber-dot.fiber-triangle",{},0,[["elapsed",0,2]]],["FIBER-DOT","fiber-demo.fiber-dot.fiber-triangle",{},0,[["size",0,2],["text"],["x",0,2],["y",0,2]]],["FIBER-TRIANGLE","fiber-demo.fiber-dot.fiber-triangle",{},0,[["s",0,2],["seconds",0,2],["x",0,2],["y",0,2]]]]);
|
||||
@@ -1,75 +0,0 @@
|
||||
{
|
||||
"namespace": "App",
|
||||
"components": [
|
||||
[
|
||||
"FIBER-DEMO",
|
||||
"fiber-demo.fiber-dot.fiber-triangle",
|
||||
{},
|
||||
0,
|
||||
[
|
||||
[
|
||||
"elapsed",
|
||||
0,
|
||||
2
|
||||
]
|
||||
]
|
||||
],
|
||||
[
|
||||
"FIBER-DOT",
|
||||
"fiber-demo.fiber-dot.fiber-triangle",
|
||||
{},
|
||||
0,
|
||||
[
|
||||
[
|
||||
"size",
|
||||
0,
|
||||
2
|
||||
],
|
||||
[
|
||||
"text"
|
||||
],
|
||||
[
|
||||
"x",
|
||||
0,
|
||||
2
|
||||
],
|
||||
[
|
||||
"y",
|
||||
0,
|
||||
2
|
||||
]
|
||||
]
|
||||
],
|
||||
[
|
||||
"FIBER-TRIANGLE",
|
||||
"fiber-demo.fiber-dot.fiber-triangle",
|
||||
{},
|
||||
0,
|
||||
[
|
||||
[
|
||||
"s",
|
||||
0,
|
||||
2
|
||||
],
|
||||
[
|
||||
"seconds",
|
||||
0,
|
||||
2
|
||||
],
|
||||
[
|
||||
"x",
|
||||
0,
|
||||
2
|
||||
],
|
||||
[
|
||||
"y",
|
||||
0,
|
||||
2
|
||||
]
|
||||
]
|
||||
]
|
||||
],
|
||||
"loader": "app",
|
||||
"core": "app/app.core.js",
|
||||
"coreEs5": "app/app.core.ce.js"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -1,146 +0,0 @@
|
||||
/*! Built with http://stenciljs.com */
|
||||
|
||||
App.defineComponents(
|
||||
|
||||
/**** module id ****/
|
||||
'fiber-demo.fiber-dot.fiber-triangle',
|
||||
|
||||
/**** component modules ****/
|
||||
function importComponent(exports, h, t, Ionic) {
|
||||
var FiberDemo = (function () {
|
||||
function FiberDemo() {
|
||||
this.elapsed = 0;
|
||||
this.seconds = 0;
|
||||
}
|
||||
FiberDemo.prototype["componentDidLoad"] = function () {
|
||||
var tick = this.tick.bind(this);
|
||||
this.intervalID = setInterval(tick, 1000);
|
||||
};
|
||||
FiberDemo.prototype.tick = function () {
|
||||
this.seconds = (this.seconds % 10) + 1;
|
||||
};
|
||||
FiberDemo.prototype.hostData = function () {
|
||||
var elapsed = this.elapsed;
|
||||
var t = (elapsed / 1000) % 10;
|
||||
var scale = 1 + (t > 5 ? 10 - t : t) / 10;
|
||||
var containerStyle = {
|
||||
position: 'absolute',
|
||||
transformOrigin: '0 0',
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
background: '#eee',
|
||||
transform: 'scaleX(' + (scale / 2.1) + ') scaleY(0.7) translateZ(0.1px)'
|
||||
};
|
||||
return {
|
||||
style: containerStyle
|
||||
};
|
||||
};
|
||||
FiberDemo.prototype.render = function () {
|
||||
return (h("div", 0,
|
||||
h("fiber-triangle", { "p": { "x": 0, "y": 0, "s": 1000, "seconds": this.seconds } })));
|
||||
};
|
||||
return FiberDemo;
|
||||
}());
|
||||
|
||||
var FiberDot = (function () {
|
||||
function FiberDot() {
|
||||
this.hover = false;
|
||||
}
|
||||
FiberDot.prototype.enter = function () {
|
||||
this.hover = true;
|
||||
};
|
||||
FiberDot.prototype.leave = function () {
|
||||
this.hover = false;
|
||||
};
|
||||
FiberDot.prototype.hostData = function () {
|
||||
var s = this.size * 1.3;
|
||||
var style = {
|
||||
position: 'absolute',
|
||||
font: 'normal 15px sans-serif',
|
||||
textAlign: 'center',
|
||||
cursor: 'pointer',
|
||||
width: s + 'px',
|
||||
height: s + 'px',
|
||||
left: (this.x) + 'px',
|
||||
top: (this.y) + 'px',
|
||||
borderRadius: (s / 2) + 'px',
|
||||
lineHeight: (s) + 'px',
|
||||
background: this.hover ? '#ff0' : '#61dafb'
|
||||
};
|
||||
return {
|
||||
style: style,
|
||||
on: {
|
||||
mouseenter: this.enter.bind(this),
|
||||
mouseleave: this.leave.bind(this)
|
||||
},
|
||||
};
|
||||
};
|
||||
FiberDot.prototype.render = function () {
|
||||
return (this.hover ? '**' + this.text + '**' : this.text);
|
||||
};
|
||||
return FiberDot;
|
||||
}());
|
||||
|
||||
var targetSize = 25;
|
||||
var FiberTriangle = (function () {
|
||||
function FiberTriangle() {
|
||||
}
|
||||
FiberTriangle.prototype.render = function () {
|
||||
var s = this.s;
|
||||
if (s <= targetSize) {
|
||||
return (h("fiber-dot", { "p": { "x": this.x - (targetSize / 2), "y": this.y - (targetSize / 2), "size": targetSize, "text": this.seconds.toString() } }));
|
||||
}
|
||||
s = s / 2;
|
||||
return [
|
||||
h("fiber-triangle", { "p": { "x": this.x, "y": this.y - (s / 2), "s": s, "seconds": this.seconds } }),
|
||||
h("fiber-triangle", { "p": { "x": this.x - s, "y": this.y + (s / 2), "s": s, "seconds": this.seconds } }),
|
||||
h("fiber-triangle", { "p": { "x": this.x + s, "y": this.y + (s / 2), "s": s, "seconds": this.seconds } })
|
||||
];
|
||||
};
|
||||
return FiberTriangle;
|
||||
}());
|
||||
|
||||
exports['FIBER-DEMO'] = FiberDemo;
|
||||
exports['FIBER-DOT'] = FiberDot;
|
||||
exports['FIBER-TRIANGLE'] = FiberTriangle;
|
||||
},
|
||||
|
||||
|
||||
/***************** fiber-demo *****************/
|
||||
[
|
||||
/** fiber-demo: [0] tag **/
|
||||
'FIBER-DEMO',
|
||||
|
||||
/** fiber-demo: [1] host **/
|
||||
{}
|
||||
|
||||
],
|
||||
|
||||
/***************** fiber-dot *****************/
|
||||
[
|
||||
/** fiber-dot: [0] tag **/
|
||||
'FIBER-DOT',
|
||||
|
||||
/** fiber-dot: [1] host **/
|
||||
{},
|
||||
|
||||
/** fiber-dot: [2] listeners **/
|
||||
0 /* no listeners */,
|
||||
|
||||
/** fiber-dot: [3] states **/
|
||||
['hover']
|
||||
|
||||
],
|
||||
|
||||
/***************** fiber-triangle *****************/
|
||||
[
|
||||
/** fiber-triangle: [0] tag **/
|
||||
'FIBER-TRIANGLE',
|
||||
|
||||
/** fiber-triangle: [1] host **/
|
||||
{}
|
||||
|
||||
]
|
||||
)
|
||||
@@ -1,59 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html style="width: 100%; height: 100%; overflow: hidden">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ionic Perf Demo</title>
|
||||
<script src="./build/app.js"></script>
|
||||
<style>
|
||||
body {
|
||||
background: #fff;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4a8bfc;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1 {
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-size: 2.0em;
|
||||
font-weight: bold;
|
||||
margin: 0 0 15px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.demo {
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.demo:hover {
|
||||
color: #317bfc;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Ionic Perf Demo</h1>
|
||||
<p>
|
||||
The goal of this demo is to show smooth animations while at
|
||||
the same time updating 729 text nodes every second. Only one property
|
||||
is updated at the root node, which is then passed down through over
|
||||
1,700 nodes every second. Additionally, user interactions, such as
|
||||
mouseenter and mouseleave, take precedence, yet should not interfer with
|
||||
animations and node updates. This demo was adopted from the
|
||||
<a href="https://claudiopro.github.io/react-fiber-vs-stack-demo/">React Fiber demo</a>.
|
||||
</p>
|
||||
|
||||
<a class="demo" href="perf.html">Show Demo</a>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,57 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html style="width: 100%; height: 100%; overflow: hidden">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ionic Perf Demo</title>
|
||||
<script src="./build/app.js"></script>
|
||||
<style>
|
||||
body {
|
||||
background: #fff;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4183c4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
h1 {
|
||||
border-bottom: 1px solid #ddd;
|
||||
font-size: 2.0em;
|
||||
font-weight: bold;
|
||||
margin: 0 0 15px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
font-weight: bold;
|
||||
line-height: 2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Ionic Perf Demo</h1>
|
||||
|
||||
<fiber-demo></fiber-demo>
|
||||
|
||||
<script type="text/javascript">
|
||||
var start = Date.now();
|
||||
var baseEl = document.querySelector('fiber-demo');
|
||||
|
||||
function update() {
|
||||
baseEl.elapsed = Date.now() - start;
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
|
||||
requestAnimationFrame(update);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user