chore: add apps for profiling

apps/new/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+	"extends": ["../../.eslintrc.json"],
+	"ignorePatterns": ["!**/*", "node_modules/**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+			"rules": {}
+		},
+		{
+			"files": ["*.ts", "*.tsx"],
+			"rules": {}
+		},
+		{
+			"files": ["*.js", "*.jsx"],
+			"rules": {}
+		}
+	]
+}

apps/new/.gitignore

@@ -0,0 +1,42 @@
+# NativeScript
+hooks/
+node_modules/
+platforms/
+
+# NativeScript Template
+*.js.map
+*.js
+!webpack.config.js
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+.idea
+.cloud
+.project
+tmp/
+typings/
+
+# misc
+npm-debug.log
+
+# app
+!*.d.ts
+!src/assets/fontawesome.min.css
+/report/
+.nsbuildinfo
+/temp/
+/src/tns_modules/
+
+# app uses platform specific scss which can inadvertently get renamed which will cause problems
+app/app.scss
+
+package-lock.json

apps/new/nativescript.config.ts

@@ -0,0 +1,15 @@
+import { NativeScriptConfig } from '@nativescript/core';
+
+export default {
+	// I'd call it .new but that's a reserved token for Android
+	id: 'org.nativescript.dom.events.proposed',
+	appResourcesPath: '../../tools/assets/App_Resources',
+	android: {
+		v8Flags: '--expose_gc',
+		markingMode: 'none',
+	},
+	appPath: 'src',
+	cli: {
+		packageManager: 'npm',
+	},
+} as NativeScriptConfig;

apps/new/package.json

@@ -0,0 +1,14 @@
+{
+  "main": "./src/app.ts",
+  "description": "New DOM Events",
+  "license": "SEE LICENSE IN <your-license-filename>",
+  "repository": "<fill-your-repository-here>",
+  "dependencies": {
+    "@nativescript/core": "file:../../packages/core"
+  },
+  "devDependencies": {
+    "@nativescript/android": "~8.3.0",
+    "@nativescript/ios": "~8.3.0",
+    "@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz"
+  }
+}

apps/new/project.json

@@ -0,0 +1,65 @@
+{
+	"name": "apps-new",
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"sourceRoot": "apps/new/src",
+	"projectType": "application",
+	"prefix": "nativescript",
+	"namedInputs": {
+		"default": ["{projectRoot}/**/*"],
+		"production": ["!{projectRoot}/**/*.spec.ts"]
+	},
+	"targets": {
+		"build": {
+			"executor": "@nativescript/nx:build",
+			"options": {
+				"noHmr": true,
+				"production": true,
+				"uglify": true,
+				"release": true,
+				"forDevice": true
+			},
+			"dependsOn": [
+				{
+					"target": "build.all",
+					"projects": "dependencies"
+				}
+			]
+		},
+		"ios": {
+			"executor": "@nativescript/nx:build",
+			"options": {
+				"platform": "ios"
+			},
+			"dependsOn": [
+				{
+					"target": "build.all",
+					"projects": "dependencies"
+				}
+			]
+		},
+		"android": {
+			"executor": "@nativescript/nx:build",
+			"options": {
+				"platform": "android"
+			},
+			"dependsOn": [
+				{
+					"target": "build.all",
+					"projects": "dependencies"
+				}
+			]
+		},
+		"clean": {
+			"executor": "@nativescript/nx:build",
+			"options": {
+				"clean": true
+			}
+		},
+		"lint": {
+			"executor": "@nrwl/linter:eslint",
+			"options": {
+				"lintFilePatterns": ["apps/new/**/*.ts"]
+			}
+		}
+	}
+}

apps/new/references.d.ts

@@ -0,0 +1 @@
+/// <reference path="../../references.d.ts" />

apps/new/src/app-root.xml

@@ -0,0 +1,2 @@
+<Frame defaultPage="main-page">
+</Frame>

apps/new/src/app.scss

@@ -0,0 +1,2 @@
+@import 'nativescript-theme-core/scss/light';
+@import 'nativescript-theme-core/scss/index';

apps/new/src/app.ts

@@ -0,0 +1,3 @@
+import { Application } from '@nativescript/core';
+
+Application.run({ moduleName: 'app-root' });

apps/new/src/main-page.ts

@@ -0,0 +1,7 @@
+import { EventData, Page } from '@nativescript/core';
+import { MainViewModel } from './main-view-model';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+	page.bindingContext = new MainViewModel();
+}

apps/new/src/main-page.xml

@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+  <Page.actionBar>
+    <ActionBar title="Plugin Demos" icon="" class="action-bar" />
+  </Page.actionBar>
+  <StackLayout class="p-20">
+    <ScrollView class="h-full">
+      <StackLayout>
+        <Button text="scrolling" tap="{{ viewDemo }}" class="btn btn-primary view-demo" />
+        <Button text="properties" tap="{{ viewDemo }}" class="btn btn-primary view-demo" />
+      </StackLayout>
+    </ScrollView>
+  </StackLayout>
+</Page>

apps/new/src/main-view-model.ts

@@ -0,0 +1,9 @@
+import { Observable, Frame } from '@nativescript/core';
+
+export class MainViewModel extends Observable {
+	viewDemo(args) {
+		Frame.topmost().navigate({
+			moduleName: `plugin-demos/${args.object.text}`,
+		});
+	}
+}

apps/new/src/plugin-demos/properties.ts

@@ -0,0 +1,75 @@
+import { Button, EventData, Page, Switch, View, getViewById, Observable, Label, PropertyChangeData } from '@nativescript/core';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+
+	page.bindingContext = new DemoModel(page);
+}
+
+export class DemoModel extends Observable {
+	private readonly manualProfiling: Switch;
+	private readonly automatedProfiling: Button;
+	private readonly target: Label;
+
+	private automatedProfilingInProgress = false;
+
+	constructor(container: View) {
+		super();
+
+		this.manualProfiling = getViewById(container, 'manual-profiling') as Switch;
+		this.automatedProfiling = getViewById(container, 'automated-profiling') as Button;
+		this.target = getViewById(container, 'target') as Label;
+	}
+
+	toggleManualProfiling({ value }: PropertyChangeData): void {
+		console.log(`toggleManualProfiling changed to ${value}. manualProfiling:`, this.manualProfiling);
+		this.updateAutomatedProfilingEnabled();
+	}
+
+	runAutomatedProfiling(): void {
+		if (this.automatedProfilingInProgress) {
+			return;
+		}
+
+		console.log(`runAutomatedProfiling. automatedProfiling:`, this.automatedProfiling);
+		this.automatedProfilingInProgress = true;
+		this.updateAutomatedProfilingEnabled();
+
+		const propName = 'arbitrary-prop';
+
+		// Initialise the target property so that the first property-setting action
+		// doesn't produce an outlier result due to taking a one-off code branch.
+		this.target.setProperty(propName, -1);
+
+		const onPropertyChange = () => {
+			// No-op
+		};
+
+		this.target.addEventListener(Observable.propertyChangeEvent, onPropertyChange, null);
+
+		const time = profile(() => {
+			for (let i = 0; i < 1000000; i++) {
+				this.target.setProperty(propName, i);
+			}
+		});
+
+		this.target.removeEventListener(Observable.propertyChangeEvent, onPropertyChange, null);
+
+		console.log(`1,000,000 runs of setProperty() took ${time} ms`);
+
+		this.automatedProfilingInProgress = false;
+		this.updateAutomatedProfilingEnabled();
+	}
+
+	private updateAutomatedProfilingEnabled(): void {
+		this.automatedProfiling.isEnabled = !this.automatedProfilingInProgress && !this.manualProfiling.checked;
+	}
+}
+
+function profile(action: () => void) {
+	const start = global.isIOS ? (global as any).performance.now() : __time();
+	action();
+	const stop = global.isIOS ? (global as any).performance.now() : __time();
+
+	return stop - start;
+}

apps/new/src/plugin-demos/properties.xml

@@ -0,0 +1,19 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
+  <Page.actionBar>
+    <ActionBar title="Properties" icon="" class="action-bar">
+    </ActionBar>
+  </Page.actionBar>
+
+  <ScrollView scroll="{{ onScroll }}">
+    <StackLayout>
+      <FlexboxLayout>
+        <Label text="Manual profiling" />
+        <Switch id="manual-profiling" checked="false" checkedChange="{{ toggleManualProfiling }}" />
+      </FlexboxLayout>
+
+      <Button id="automated-profiling" text="Automated profiling" tap="{{ runAutomatedProfiling }}" class="btn btn-primary" />
+
+      <Label id="target" text="Event target" class="bg-gold" />
+    </StackLayout>
+  </ScrollView>
+</Page>

apps/new/src/plugin-demos/scrolling.ts

@@ -0,0 +1,53 @@
+import { PropertyChangeData } from '@nativescript/core/data/observable';
+import { Observable, Button, EventData, Page, Switch, View, getViewById, ScrollEventData, ScrollView } from '@nativescript/core';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+
+	page.bindingContext = new DemoModel(page);
+}
+
+export class DemoModel extends Observable {
+	private readonly manualProfiling: Switch;
+	private readonly automatedProfiling: Button;
+	private readonly scrollView: ScrollView;
+
+	private automatedProfilingInProgress = false;
+
+	constructor(container: View) {
+		super();
+
+		this.manualProfiling = getViewById(container, 'manual-profiling') as Switch;
+		this.automatedProfiling = getViewById(container, 'automated-profiling') as Button;
+		this.scrollView = getViewById(container, 'scrollview') as ScrollView;
+
+		// sanity check
+		this.scrollView.once('scroll', () => console.log('ONCE scroll'));
+	}
+
+	toggleManualProfiling({ value }: PropertyChangeData): void {
+		console.log(`toggleManualProfiling changed to ${value}. manualProfiling:`, this.manualProfiling);
+		this.updateAutomatedProfilingEnabled();
+	}
+
+	runAutomatedProfiling(): void {
+		if (this.automatedProfilingInProgress) {
+			return;
+		}
+
+		console.log(`runAutomatedProfiling. automatedProfiling:`, this.automatedProfiling);
+		this.automatedProfilingInProgress = true;
+		this.updateAutomatedProfilingEnabled();
+
+		this.automatedProfilingInProgress = false;
+		this.updateAutomatedProfilingEnabled();
+	}
+
+	onScroll(e: ScrollEventData): void {
+		console.log(`[scroll]`);
+	}
+
+	private updateAutomatedProfilingEnabled(): void {
+		this.automatedProfiling.isEnabled = !this.automatedProfilingInProgress && !this.manualProfiling.checked;
+	}
+}

apps/new/src/plugin-demos/scrolling.xml

@@ -0,0 +1,19 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
+  <Page.actionBar>
+    <ActionBar title="Scrolling" icon="" class="action-bar">
+    </ActionBar>
+  </Page.actionBar>
+
+  <ScrollView id="scrollview" scroll="{{ onScroll }}">
+    <StackLayout>
+      <FlexboxLayout>
+        <Label text="Manual profiling" />
+        <Switch id="manual-profiling" checked="false" checkedChange="{{ toggleManualProfiling }}" />
+      </FlexboxLayout>
+
+      <Button id="automated-profiling" text="Automated profiling" tap="{{ runAutomatedProfiling }}" class="btn btn-primary" />
+
+      <StackLayout height="2000" backgroundColor="green" />
+    </StackLayout>
+  </ScrollView>
+</Page>

apps/new/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDirs": [".", "../.."],
+		"baseUrl": ".",
+		"paths": {
+			"~/*": ["src/*"],
+			"@demo/shared": ["../../tools/demo/index.ts"]
+		}
+	}
+}

apps/new/webpack.config.js

@@ -0,0 +1,24 @@
+const webpack = require('@nativescript/webpack');
+const { resolve } = require('path');
+
+module.exports = (env) => {
+  webpack.init(env);
+  webpack.useConfig('typescript');
+
+  webpack.chainWebpack((config) => {
+    // shared demo code
+    config.resolve.alias.set(
+      '@demo/shared',
+      resolve(__dirname, '..', '..', 'tools', 'demo')
+    );
+  });
+
+  // Example if you need to share images across demo apps:
+  // webpack.Utils.addCopyRule({
+  //   from: '../../../tools/images',
+  // 	to: 'images',
+  //   context: webpack.Utils.project.getProjectFilePath('node_modules')
+  // });
+
+  return webpack.resolveConfig();
+};

apps/old/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+	"extends": ["../../.eslintrc.json"],
+	"ignorePatterns": ["!**/*", "node_modules/**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+			"rules": {}
+		},
+		{
+			"files": ["*.ts", "*.tsx"],
+			"rules": {}
+		},
+		{
+			"files": ["*.js", "*.jsx"],
+			"rules": {}
+		}
+	]
+}

apps/old/.gitignore

@@ -0,0 +1,42 @@
+# NativeScript
+hooks/
+node_modules/
+platforms/
+
+# NativeScript Template
+*.js.map
+*.js
+!webpack.config.js
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+.idea
+.cloud
+.project
+tmp/
+typings/
+
+# misc
+npm-debug.log
+
+# app
+!*.d.ts
+!src/assets/fontawesome.min.css
+/report/
+.nsbuildinfo
+/temp/
+/src/tns_modules/
+
+# app uses platform specific scss which can inadvertently get renamed which will cause problems
+app/app.scss
+
+package-lock.json

apps/old/nativescript.config.ts

@@ -0,0 +1,14 @@
+import { NativeScriptConfig } from '@nativescript/core';
+
+export default {
+	id: 'org.nativescript.dom.events.old',
+	appResourcesPath: '../../tools/assets/App_Resources',
+	android: {
+		v8Flags: '--expose_gc',
+		markingMode: 'none',
+	},
+	appPath: 'src',
+	cli: {
+		packageManager: 'npm',
+	},
+} as NativeScriptConfig;

apps/old/package.json

@@ -0,0 +1,14 @@
+{
+  "main": "./src/app.ts",
+  "description": "Old bespoke events",
+  "license": "SEE LICENSE IN <your-license-filename>",
+  "repository": "<fill-your-repository-here>",
+  "dependencies": {
+    "@nativescript/core": "8.4.1"
+  },
+  "devDependencies": {
+    "@nativescript/android": "~8.3.0",
+    "@nativescript/ios": "~8.3.0",
+    "@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz"
+  }
+}

apps/old/project.json

@@ -0,0 +1,65 @@
+{
+	"name": "apps-old",
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"sourceRoot": "apps/old/src",
+	"projectType": "application",
+	"prefix": "nativescript",
+	"namedInputs": {
+		"default": ["{projectRoot}/**/*"],
+		"production": ["!{projectRoot}/**/*.spec.ts"]
+	},
+	"targets": {
+		"build": {
+			"executor": "@nativescript/nx:build",
+			"options": {
+				"noHmr": true,
+				"production": true,
+				"uglify": true,
+				"release": true,
+				"forDevice": true
+			},
+			"dependsOn": [
+				{
+					"target": "build.all",
+					"projects": "dependencies"
+				}
+			]
+		},
+		"ios": {
+			"executor": "@nativescript/nx:build",
+			"options": {
+				"platform": "ios"
+			},
+			"dependsOn": [
+				{
+					"target": "build.all",
+					"projects": "dependencies"
+				}
+			]
+		},
+		"android": {
+			"executor": "@nativescript/nx:build",
+			"options": {
+				"platform": "android"
+			},
+			"dependsOn": [
+				{
+					"target": "build.all",
+					"projects": "dependencies"
+				}
+			]
+		},
+		"clean": {
+			"executor": "@nativescript/nx:build",
+			"options": {
+				"clean": true
+			}
+		},
+		"lint": {
+			"executor": "@nrwl/linter:eslint",
+			"options": {
+				"lintFilePatterns": ["apps/old/**/*.ts"]
+			}
+		}
+	}
+}

apps/old/references.d.ts

@@ -0,0 +1 @@
+/// <reference path="../../references.d.ts" />

apps/old/src/app-root.xml

@@ -0,0 +1,2 @@
+<Frame defaultPage="main-page">
+</Frame>

apps/old/src/app.scss

@@ -0,0 +1,2 @@
+@import 'nativescript-theme-core/scss/light';
+@import 'nativescript-theme-core/scss/index';

apps/old/src/app.ts

@@ -0,0 +1,3 @@
+import { Application } from '@nativescript/core';
+
+Application.run({ moduleName: 'app-root' });

apps/old/src/main-page.ts

@@ -0,0 +1,7 @@
+import { EventData, Page } from '@nativescript/core';
+import { MainViewModel } from './main-view-model';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+	page.bindingContext = new MainViewModel();
+}

apps/old/src/main-page.xml

@@ -0,0 +1,13 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+  <Page.actionBar>
+    <ActionBar title="Plugin Demos" icon="" class="action-bar" />
+  </Page.actionBar>
+  <StackLayout class="p-20">
+    <ScrollView class="h-full">
+      <StackLayout>
+        <Button text="scrolling" tap="{{ viewDemo }}" class="btn btn-primary view-demo" />
+        <Button text="properties" tap="{{ viewDemo }}" class="btn btn-primary view-demo" />
+      </StackLayout>
+    </ScrollView>
+  </StackLayout>
+</Page>

apps/old/src/main-view-model.ts

@@ -0,0 +1,9 @@
+import { Observable, Frame } from '@nativescript/core';
+
+export class MainViewModel extends Observable {
+	viewDemo(args) {
+		Frame.topmost().navigate({
+			moduleName: `plugin-demos/${args.object.text}`,
+		});
+	}
+}

apps/old/src/plugin-demos/properties.ts

@@ -0,0 +1,75 @@
+import { Button, EventData, Page, Switch, View, getViewById, Observable, Label, PropertyChangeData } from '@nativescript/core';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+
+	page.bindingContext = new DemoModel(page);
+}
+
+export class DemoModel extends Observable {
+	private readonly manualProfiling: Switch;
+	private readonly automatedProfiling: Button;
+	private readonly target: Label;
+
+	private automatedProfilingInProgress = false;
+
+	constructor(container: View) {
+		super();
+
+		this.manualProfiling = getViewById(container, 'manual-profiling') as Switch;
+		this.automatedProfiling = getViewById(container, 'automated-profiling') as Button;
+		this.target = getViewById(container, 'target') as Label;
+	}
+
+	toggleManualProfiling({ value }: PropertyChangeData): void {
+		console.log(`toggleManualProfiling changed to ${value}. manualProfiling:`, this.manualProfiling);
+		this.updateAutomatedProfilingEnabled();
+	}
+
+	runAutomatedProfiling(): void {
+		if (this.automatedProfilingInProgress) {
+			return;
+		}
+
+		console.log(`runAutomatedProfiling. automatedProfiling:`, this.automatedProfiling);
+		this.automatedProfilingInProgress = true;
+		this.updateAutomatedProfilingEnabled();
+
+		const propName = 'arbitrary-prop';
+
+		// Initialise the target property so that the first property-setting action
+		// doesn't produce an outlier result due to taking a one-off code branch.
+		this.target.setProperty(propName, -1);
+
+		const onPropertyChange = () => {
+			// No-op
+		};
+
+		this.target.addEventListener(Observable.propertyChangeEvent, onPropertyChange, null);
+
+		const time = profile(() => {
+			for (let i = 0; i < 1000000; i++) {
+				this.target.setProperty(propName, i);
+			}
+		});
+
+		this.target.removeEventListener(Observable.propertyChangeEvent, onPropertyChange, null);
+
+		console.log(`1,000,000 runs of setProperty() took ${time} ms`);
+
+		this.automatedProfilingInProgress = false;
+		this.updateAutomatedProfilingEnabled();
+	}
+
+	private updateAutomatedProfilingEnabled(): void {
+		this.automatedProfiling.isEnabled = !this.automatedProfilingInProgress && !this.manualProfiling.checked;
+	}
+}
+
+function profile(action: () => void) {
+	const start = global.isIOS ? (global as any).performance.now() : __time();
+	action();
+	const stop = global.isIOS ? (global as any).performance.now() : __time();
+
+	return stop - start;
+}

apps/old/src/plugin-demos/properties.xml

@@ -0,0 +1,19 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
+  <Page.actionBar>
+    <ActionBar title="Properties" icon="" class="action-bar">
+    </ActionBar>
+  </Page.actionBar>
+
+  <ScrollView scroll="{{ onScroll }}">
+    <StackLayout>
+      <FlexboxLayout>
+        <Label text="Manual profiling" />
+        <Switch id="manual-profiling" checked="false" checkedChange="{{ toggleManualProfiling }}" />
+      </FlexboxLayout>
+
+      <Button id="automated-profiling" text="Automated profiling" tap="{{ runAutomatedProfiling }}" class="btn btn-primary" />
+
+      <Label id="target" text="Event target" class="bg-gold" />
+    </StackLayout>
+  </ScrollView>
+</Page>

apps/old/src/plugin-demos/scrolling.ts

@@ -0,0 +1,54 @@
+import { PropertyChangeData } from '@nativescript/core/data/observable';
+import { Button, EventData, Page, Switch, View, getViewById, ScrollEventData, ScrollView } from '@nativescript/core';
+import { DemoSharedBase } from '@demo/shared';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+
+	page.bindingContext = new DemoModel(page);
+}
+
+export class DemoModel extends Observable {
+	private readonly manualProfiling: Switch;
+	private readonly automatedProfiling: Button;
+	private readonly scrollView: ScrollView;
+
+	private automatedProfilingInProgress = false;
+
+	constructor(container: View) {
+		super();
+
+		this.manualProfiling = getViewById(container, 'manual-profiling') as Switch;
+		this.automatedProfiling = getViewById(container, 'automated-profiling') as Button;
+		this.scrollView = getViewById(container, 'scrollview') as ScrollView;
+
+		// sanity check
+		this.scrollView.once('scroll', () => console.log('ONCE scroll'));
+	}
+
+	toggleManualProfiling({ value }: PropertyChangeData): void {
+		console.log(`toggleManualProfiling changed to ${value}. manualProfiling:`, this.manualProfiling);
+		this.updateAutomatedProfilingEnabled();
+	}
+
+	runAutomatedProfiling(): void {
+		if (this.automatedProfilingInProgress) {
+			return;
+		}
+
+		console.log(`runAutomatedProfiling. automatedProfiling:`, this.automatedProfiling);
+		this.automatedProfilingInProgress = true;
+		this.updateAutomatedProfilingEnabled();
+
+		this.automatedProfilingInProgress = false;
+		this.updateAutomatedProfilingEnabled();
+	}
+
+	onScroll(e: ScrollEventData): void {
+		console.log(`[scroll]`);
+	}
+
+	private updateAutomatedProfilingEnabled(): void {
+		this.automatedProfiling.isEnabled = !this.automatedProfilingInProgress && !this.manualProfiling.checked;
+	}
+}

apps/old/src/plugin-demos/scrolling.xml

@@ -0,0 +1,19 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
+  <Page.actionBar>
+    <ActionBar title="Scrolling" icon="" class="action-bar">
+    </ActionBar>
+  </Page.actionBar>
+
+  <ScrollView id="scrollview" scroll="{{ onScroll }}">
+    <StackLayout>
+      <FlexboxLayout>
+        <Label text="Manual profiling" />
+        <Switch id="manual-profiling" checked="false" checkedChange="{{ toggleManualProfiling }}" />
+      </FlexboxLayout>
+
+      <Button id="automated-profiling" text="Automated profiling" tap="{{ runAutomatedProfiling }}" class="btn btn-primary" />
+
+      <StackLayout height="2000" backgroundColor="green" />
+    </StackLayout>
+  </ScrollView>
+</Page>

apps/old/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"rootDirs": [".", "../.."],
+		"baseUrl": ".",
+		"paths": {
+			"~/*": ["src/*"],
+			"@demo/shared": ["../../tools/demo/index.ts"]
+		}
+	}
+}

apps/old/webpack.config.js

@@ -0,0 +1,24 @@
+const webpack = require('@nativescript/webpack');
+const { resolve } = require('path');
+
+module.exports = (env) => {
+  webpack.init(env);
+  webpack.useConfig('typescript');
+
+  webpack.chainWebpack((config) => {
+    // shared demo code
+    config.resolve.alias.set(
+      '@demo/shared',
+      resolve(__dirname, '..', '..', 'tools', 'demo')
+    );
+  });
+
+  // Example if you need to share images across demo apps:
+  // webpack.Utils.addCopyRule({
+  //   from: '../../../tools/images',
+  // 	to: 'images',
+  //   context: webpack.Utils.project.getProjectFilePath('node_modules')
+  // });
+
+  return webpack.resolveConfig();
+};

tools/workspace-scripts.js

@@ -17,6 +17,42 @@ module.exports = {
     },
 		// app testing targets
 		apps: {
+      '...New...': {
+        script: `npx cowsay "New DOM Events 💎"`,
+        description: ` 🔻 New`,
+      },
+      new: {
+        clean: {
+          script: 'nx run apps-new:clean',
+          description: '⚆  Clean  🧹',
+        },
+        ios: {
+          script: 'nx run apps-new:ios',
+          description: '⚆  Run iOS  ',
+        },
+        android: {
+          script: 'nx run apps-new:android',
+          description: '⚆  Run Android  🤖',
+        },
+      },
+      '...Old...': {
+        script: `npx cowsay "Old bespoke events 🏚"`,
+        description: ` 🔻 Old`,
+      },
+      old: {
+        clean: {
+          script: 'nx run apps-old:clean',
+          description: '⚆  Clean  🧹',
+        },
+        ios: {
+          script: 'nx run apps-old:ios',
+          description: '⚆  Run iOS  ',
+        },
+        android: {
+          script: 'nx run apps-old:android',
+          description: '⚆  Run Android  🤖',
+        },
+      },
       "...Automated...": {
         script: `npx cowsay "These run fast, watch the fireworks! 🎆"`,
         description: ` 🔻 Automated test runner which executes e2e tests on the target platform 🎆`

workspace.json

@@ -2,6 +2,8 @@
 	"version": 2,
 	"projects": {
 		"apps-automated": "apps/automated",
+		"apps-new": "apps/new",
+		"apps-old": "apps/old",
 		"apps-toolbox": "apps/toolbox",
 		"apps-ui": "apps/ui",
 		"core": "packages/core",