feat: v8 refactor (#103)

* feat: v8 refactor

* chore: updates

* chore: updates

* chore: updates

* chore: updates

* chore: updates

* chore: updates

* chore: updates

* chore: updates

* chore: updates

* chore: improve code sharing

* chore: updates

* chore: updates

* chore: updates

* chore: updates

* chore: working ios

* chore: update

* fix: running on both platforms

* chore: updates

* chore: 2.0.0-alpha.21

* feat:  the frantic run of the valorous rabbit demo game

* chore: alpha 22

* chore: updates

* chore: updates

* chore: updates

* chore: update

* fix: package building

* chore: updates

* chore: updates

README.md

@@ -5,14 +5,15 @@ npm run setup
 npm start
 ```
 
-- @nativescript/canvas
-- @nativescript/canvas-babylon
-- @nativescript/canvas-media
-- @nativescript/canvas-phaser
-- @nativescript/canvas-phaser-ce
-- @nativescript/canvas-pixi
-- @nativescript/canvas-polyfill
-- @nativescript/canvas-three
+- [@nativescript/canvas](packages/canvas/README.md)
+- [@nativescript/canvas-babylon](packages/canvas-babylon/README.md)
+- [@nativescript/canvas-chartjs](packages/canvas-chartjs/README.md)
+- [@nativescript/canvas-media](packages/canvas-media/README.md)
+- [@nativescript/canvas-phaser](packages/canvas-phaser/README.md)
+- [@nativescript/canvas-phaser-ce](packages/canvas-phaser-ce/README.md)
+- [@nativescript/canvas-pixi](packages/canvas-pixi/README.md)
+- [@nativescript/canvas-polyfill](packages/canvas-polyfill/README.md)
+- [@nativescript/canvas-three](packages/canvas-three/README.md)
 
 # How to use?
 

apps/demo-angular/package.json

@@ -1,19 +1,20 @@
 {
-	"main": "./src/main.ts",
-	"dependencies": {
-		"@nativescript/canvas": "file:../../dist/packages/canvas",
-		"@nativescript/canvas-babylon": "file:../../dist/packages/canvas-babylon",
-		"@nativescript/canvas-media": "file:../../dist/packages/canvas-media",
-		"@nativescript/canvas-phaser": "file:../../dist/packages/canvas-phaser",
-		"@nativescript/canvas-phaser-ce": "file:../../dist/packages/canvas-phaser-ce",
-		"@nativescript/canvas-pixi": "file:../../dist/packages/canvas-pixi",
-		"@nativescript/canvas-polyfill": "file:../../dist/packages/canvas-polyfill",
-		"@nativescript/canvas-three": "file:../../dist/packages/canvas-three",
-		"@nativescript/core": "file:../../node_modules/@nativescript/core",
-		"three": "file:../../node_modules/three"
-	},
-	"devDependencies": {
-		"@nativescript/android": "~8.5.0",
-		"@nativescript/ios": "8.5.1-dev.0"
-	}
+  "main": "./src/main.ts",
+  "dependencies": {
+    "@nativescript/canvas": "file:../../dist/packages/canvas",
+    "@nativescript/canvas-babylon": "file:../../dist/packages/canvas-babylon",
+    "@nativescript/canvas-media": "file:../../dist/packages/canvas-media",
+    "@nativescript/canvas-phaser": "file:../../dist/packages/canvas-phaser",
+    "@nativescript/canvas-phaser-ce": "file:../../dist/packages/canvas-phaser-ce",
+    "@nativescript/canvas-pixi": "file:../../dist/packages/canvas-pixi",
+    "@nativescript/canvas-polyfill": "file:../../dist/packages/canvas-polyfill",
+    "@nativescript/canvas-three": "file:../../dist/packages/canvas-three",
+    "@nativescript/core": "file:../../node_modules/@nativescript/core",
+    "three": "file:../../node_modules/three",
+    "@nativescript/canvas-chartjs": "file:../../dist/packages/canvas-chartjs"
+  },
+  "devDependencies": {
+    "@nativescript/android": "~8.5.0",
+    "@nativescript/ios": "8.5.1-dev.0"
+  }
 }

apps/demo-angular/src/app-routing.module.ts

@@ -9,6 +9,7 @@ const routes: Routes = [
    { path: 'home', component: HomeComponent },
 	{ path: 'canvas', loadChildren: () => import('./plugin-demos/canvas.module').then(m => m.CanvasModule) },
 	{ path: 'canvas-babylon', loadChildren: () => import('./plugin-demos/canvas-babylon.module').then(m => m.CanvasBabylonModule) },
+	{ path: 'canvas-chartjs', loadChildren: () => import('./plugin-demos/canvas-chartjs.module').then(m => m.CanvasChartjsModule) },
 	{ path: 'canvas-media', loadChildren: () => import('./plugin-demos/canvas-media.module').then(m => m.CanvasMediaModule) },
 	{ path: 'canvas-phaser', loadChildren: () => import('./plugin-demos/canvas-phaser.module').then(m => m.CanvasPhaserModule) },
 	{ path: 'canvas-phaser-ce', loadChildren: () => import('./plugin-demos/canvas-phaser-ce.module').then(m => m.CanvasPhaserCeModule) },

apps/demo-angular/src/home.component.ts

@@ -9,34 +9,32 @@ export class HomeComponent {
 	constructor(private router: RouterExtensions){}
 
 	demos = [
-		{
-			name: 'canvas',
-		},
-		{
-			name: 'canvas-babylon',
-		},
-		{
-			name: 'canvas-media',
-		},
-		{
-			name: 'canvas-phaser',
-		},
-		{
-			name: 'canvas-phaser-ce',
-		},
-		{
-			name: 'canvas-pixi',
-		},
-		{
-			name: 'canvas-polyfill',
-		},
-		{
-			name: 'canvas-three',
-		},
-	];
-
-	onTap(event){
-		const item = this.demos[event.index];
-		this.router.navigate(['/' + item.name]);
+	{
+		name: 'canvas'
+	},
+	{
+		name: 'canvas-babylon'
+	},
+	{
+		name: 'canvas-chartjs'
+	},
+	{
+		name: 'canvas-media'
+	},
+	{
+		name: 'canvas-phaser'
+	},
+	{
+		name: 'canvas-phaser-ce'
+	},
+	{
+		name: 'canvas-pixi'
+	},
+	{
+		name: 'canvas-polyfill'
+	},
+	{
+		name: 'canvas-three'
 	}
-}
+];
+}

apps/demo-angular/src/plugin-demos/canvas-chartjs.component.html

@@ -0,0 +1,8 @@
+<ActionBar title="canvas-chartjs" class="action-bar"> </ActionBar>
+<StackLayout class="p-20">
+  <ScrollView class="h-full">
+    <StackLayout>
+      <Button text="Test canvas-chartjs" (tap)="demoShared.testIt()" class="btn btn-primary"></Button>
+    </StackLayout>
+  </ScrollView>
+</StackLayout>

apps/demo-angular/src/plugin-demos/canvas-chartjs.component.ts

@@ -0,0 +1,19 @@
+import { Component, NgZone } from '@angular/core';
+import { DemoSharedCanvasChartjs } from '@demo/shared';
+import { } from '@nativescript/canvas-chartjs';
+
+@Component({
+	selector: 'demo-canvas-chartjs',
+	templateUrl: 'canvas-chartjs.component.html',
+})
+export class CanvasChartjsComponent {
+
+  demoShared: DemoSharedCanvasChartjs;
+
+	constructor(private _ngZone: NgZone) {}
+
+  ngOnInit() {
+    this.demoShared = new DemoSharedCanvasChartjs();
+  }
+
+}

apps/demo-angular/src/plugin-demos/canvas-chartjs.module.ts

@@ -0,0 +1,10 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
+import { CanvasChartjsComponent } from './canvas-chartjs.component';
+
+@NgModule({
+	imports: [NativeScriptCommonModule, NativeScriptRouterModule.forChild([{ path: '', component: CanvasChartjsComponent }])],
+  declarations: [CanvasChartjsComponent],
+  schemas: [ NO_ERRORS_SCHEMA]
+})
+export class CanvasChartjsModule {}

apps/demo-vue/app/plugin-demos/canvas-chartjs.vue

@@ -0,0 +1,34 @@
+<template>
+  <Page>
+    <ActionBar>
+      <Label text="canvas-chartjs"/>
+    </ActionBar>
+
+    <GridLayout>
+      <Button class="info" :text="message"/>
+    </GridLayout>
+  </Page>
+</template>
+
+<script lang="ts">
+  import Vue from "nativescript-vue";
+  import { DemoSharedCanvasChartjs } from '@demo/shared';
+  import { } from '@nativescript/canvas-chartjs';
+
+  export default Vue.extend({
+    computed: {
+      message() {
+        return "Test canvas-chartjs";
+      }
+    }
+  });
+</script>
+
+<style scoped lang="scss">
+
+  .info {
+    font-size: 20;
+    horizontal-align: center;
+    vertical-align: center;
+  }
+</style>

apps/demo-vue/package.json

@@ -1,19 +1,20 @@
 {
-	"main": "./app/app.ts",
-	"dependencies": {
-		"nativescript-vue": "file:../../node_modules/nativescript-vue",
-		"@nativescript/core": "file:../../node_modules/@nativescript/core",
-		"@nativescript/canvas-media": "file:../../packages/canvas-media",
-		"@nativescript/canvas": "file:../../packages/canvas",
-		"@nativescript/canvas-babylon": "file:../../packages/canvas-babylon",
-		"@nativescript/canvas-phaser": "file:../../packages/canvas-phaser",
-		"@nativescript/canvas-phaser-ce": "file:../../packages/canvas-phaser-ce",
-		"@nativescript/canvas-pixi": "file:../../packages/canvas-pixi",
-		"@nativescript/canvas-polyfill": "file:../../packages/canvas-polyfill",
-		"@nativescript/canvas-three": "file:../../packages/canvas-three"
-	},
-	"devDependencies": {
-		"@nativescript/android": "~8.5.0",
-		"@nativescript/ios": "8.5.1-dev.0"
-	}
+  "main": "./app/app.ts",
+  "dependencies": {
+    "nativescript-vue": "file:../../node_modules/nativescript-vue",
+    "@nativescript/core": "file:../../node_modules/@nativescript/core",
+    "@nativescript/canvas-media": "file:../../packages/canvas-media",
+    "@nativescript/canvas": "file:../../packages/canvas",
+    "@nativescript/canvas-babylon": "file:../../packages/canvas-babylon",
+    "@nativescript/canvas-phaser": "file:../../packages/canvas-phaser",
+    "@nativescript/canvas-phaser-ce": "file:../../packages/canvas-phaser-ce",
+    "@nativescript/canvas-pixi": "file:../../packages/canvas-pixi",
+    "@nativescript/canvas-polyfill": "file:../../packages/canvas-polyfill",
+    "@nativescript/canvas-three": "file:../../packages/canvas-three",
+    "@nativescript/canvas-chartjs": "file:../../packages/canvas-chartjs"
+  },
+  "devDependencies": {
+    "@nativescript/android": "~8.5.0",
+    "@nativescript/ios": "8.5.1-dev.0"
+  }
 }

apps/demo/nativescript.config.ts

@@ -4,7 +4,7 @@ export default {
 	id: 'org.nativescript.plugindemo',
 	appResourcesPath: '../../tools/assets/App_Resources',
 	android: {
-		v8Flags: '--expose_gc',
+		v8Flags: '--expose_gc --allow-natives-syntax --turbo-fast-api-calls',
 		markingMode: 'none',
 		discardUncaughtJsExceptions: false,
 	},

apps/demo/package.json

@@ -1,32 +1,33 @@
 {
-	"main": "./src/app.ts",
-	"description": "NativeScript Application",
-	"license": "SEE LICENSE IN <your-license-filename>",
-	"repository": "<fill-your-repository-here>",
-	"dependencies": {
-		"@nativescript/canvas": "file:../../packages/canvas",
-		"@nativescript/canvas-babylon": "file:../../packages/canvas-babylon",
-		"@nativescript/canvas-media": "file:../../packages/canvas-media",
-		"@nativescript/canvas-phaser": "file:../../packages/canvas-phaser",
-		"@nativescript/canvas-phaser-ce": "file:../../packages/canvas-phaser-ce",
-		"@nativescript/canvas-pixi": "file:../../packages/canvas-pixi",
-		"@nativescript/canvas-polyfill": "file:../../packages/canvas-polyfill",
-		"@nativescript/canvas-three": "file:../../packages/canvas-three",
-		"@nativescript/core": "file:../../node_modules/@nativescript/core",
-		"babylonjs": "file:../../node_modules/babylonjs",
-		"babylonjs-materials": "file:../../node_modules/babylonjs-materials",
-		"chart.js": "file:../../node_modules/chart.js",
-		"d3": "file:../../node_modules/d3",
-		"matter-js": "file:../../node_modules/matter-js",
-		"phaser": "file:../../node_modules/phaser",
-		"phaser-ce": "file:../../node_modules/phaser-ce",
-		"pixi.js": "file:../../node_modules/pixi.js",
-		"three": "file:../../node_modules/three",
-		"vexflow": "file:../../node_modules/vexflow",
-		"zen-3d": "file:../../node_modules/zen-3d"
-	},
-	"devDependencies": {
-		"@nativescript/android": "^8.5.0-alpha.1",
-		"@nativescript/ios": "8.5.1-dev.0"
-	}
+  "main": "./src/app.ts",
+  "description": "NativeScript Application",
+  "license": "SEE LICENSE IN <your-license-filename>",
+  "repository": "<fill-your-repository-here>",
+  "dependencies": {
+    "@nativescript/canvas": "file:../../packages/canvas",
+    "@nativescript/canvas-babylon": "file:../../packages/canvas-babylon",
+    "@nativescript/canvas-media": "file:../../packages/canvas-media",
+    "@nativescript/canvas-phaser": "file:../../packages/canvas-phaser",
+    "@nativescript/canvas-phaser-ce": "file:../../packages/canvas-phaser-ce",
+    "@nativescript/canvas-pixi": "file:../../packages/canvas-pixi",
+    "@nativescript/canvas-polyfill": "file:../../packages/canvas-polyfill",
+    "@nativescript/canvas-three": "file:../../packages/canvas-three",
+    "@nativescript/core": "file:../../node_modules/@nativescript/core",
+    "babylonjs": "file:../../node_modules/babylonjs",
+    "babylonjs-materials": "file:../../node_modules/babylonjs-materials",
+    "chart.js": "file:../../node_modules/chart.js",
+    "d3": "file:../../node_modules/d3",
+    "matter-js": "file:../../node_modules/matter-js",
+    "phaser": "file:../../node_modules/phaser",
+    "phaser-ce": "file:../../node_modules/phaser-ce",
+    "pixi.js": "file:../../node_modules/pixi.js",
+    "three": "file:../../node_modules/three",
+    "vexflow": "file:../../node_modules/vexflow",
+    "zen-3d": "file:../../node_modules/zen-3d",
+    "@nativescript/canvas-chartjs": "file:../../packages/canvas-chartjs"
+  },
+  "devDependencies": {
+    "@nativescript/android": "8.6.2",
+    "@nativescript/ios": "8.6.1"
+  }
 }

apps/demo/project.json

@@ -12,7 +12,7 @@
 				"production": true,
 				"uglify": true,
 				"release": true,
-				"forDevice": true
+				"forDevice": true,
 			},
 			"dependsOn": [
 				{
@@ -38,7 +38,8 @@
 			"executor": "@nativescript/nx:build",
 			"options": {
 				"platform": "android",
-				"noHmr": true
+				"noHmr": true,
+				"flags": "--env.watchNodeModules"
 			},
 			"dependsOn": [
 				{

apps/demo/src/app.scss

@@ -1,2 +1,31 @@
 @import 'nativescript-theme-core/scss/light';
-  @import 'nativescript-theme-core/scss/index';
+@import 'nativescript-theme-core/scss/index';
+
+.gameover {
+	font-weight: bold;
+	text-transform: uppercase;
+	font-size: 40;
+	//transform: translate(-100%, -100%);
+	opacity: 0;
+	transition: all 500ms ease-in-out;
+	text-align: center;
+	color: #ffc5a2;
+	&.show {
+		opacity: 1;
+		transform: translate(0%, 0%);
+		transition: all 500ms ease-in-out;
+	}
+}
+
+
+.distanceTitle {
+  text-transform:uppercase;
+  color:#ffa873;//100707;
+  font-size:12px;
+  letter-spacing:0.1px;
+  text-align:center;
+}
+
+.distanceValue {
+  font-size:40px;
+}