• Stars
    star
    130
  • Rank 277,575 (Top 6 %)
  • Language
    JavaScript
  • Created almost 6 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

NativeScript for iOS and visionOS using V8

Getting Started

To start diving into the v8 iOS runtime make sure you have Xcode and Homebrew installed, and then run the following

# Install CMake
brew install cmake

# To avoid errors, you might need to link cmake to: /usr/local/bin/cmake
# xcode doesn't read your profile during the build step, which causes it to ignore the PATH
sudo ln -s /usr/local/bin/cmake $(which cmake)

# Clone repo
git clone https://github.com/NativeScript/ios.git

# Initialize and clone the submodules
cd ios
git submodule update --init

# Ensure that you have the required llvm binaries for building the metadata generator
./download_llvm.sh

sudo gem install xcodeproj
sudo gem install cocoapods

# Open the runtime in Xcode
open v8ios.xcodeproj

Select the TestRunner target and an emulator and hit Run (the play button).

Screenshot 2020-09-09 at 18 25 43

This should take a while, but once built the emulator should start and show a black screen (this is normal). In this phase the app will run all the built-in tests, and report the results to the console:

Runtime initialization took 55ms
2020-09-09 18:30:37.797265+0200 TestRunner[14285:1238340] CONSOLE LOG: Application Start!
2020-09-09 18:30:38.288740+0200 TestRunner[14285:1238340] No implementation found for exposed method "nonExistingSelector"
2020-09-09 18:30:49.720055+0200 TestRunner[14285:1238340] CONSOLE LOG: SUCCESS: 684 specs, 0 failures, 0 skipped, 0 disabled in 11.81s.

If all tests pass, everything is good! At this point you can make changes to the runtime, add breakpoints and step through with the debugger. In the next section we'll see how to attach the runtime to an existing NativeScript application allowing us to debug runtime issues in actual apps.

Attaching the runtime to a NativeScript app

In the existing app, we need to prepare the Xcode project using ns prepare ios. This will create a folder named platforms/ios and in there a <appname>.xcworkspace (or .xcodeproject but note the following...).

IMPORTANT: You can only attach the runtime to a .xcworkspace project (not a .xcodeproj project). If your app's platforms/ios folder does not contain a .xcworkspace file yet, you can do the following:

Add a new file App_Resources/iOS/Podfile with the following contents:

pod 'IQKeyboardManager'

Now ns clean and prepare again with ns prepare ios. This will make sure when the iOS project is generated that you end up with a .xcworkspace file so attaching the v8 runtime source works properly.

You can now open the platforms/ios/{project-name}.xcworkspace file in Xcode and then drag the v8ios.xcodeproj from the root of this repo under the <appname> in the Xcode sidebar.

Screenshot 2020-09-09 at 18 46 18

Remove the NativeScript.xcframework and TNSLiveSync.xcframework from the General tab, as we will no longer be using the framework from node_modules and instead will use the source directly:

Screenshot 2020-09-09 at 18 47 23

Hitting Run in Xcode should start the app in the simulator, and we can now add breakpoints to the runtime and step through it with the debugger. To apply changes to the javascript, make sure you run ns prepare ios to re-bundle it into the platforms/ios folder.

Only required when running on a physical device

Add the Nativescript.framework from the v8ios workspace:

Screen Shot 2021-04-12 at 11 49 10 AM

Troubleshooting

If you encounter vague errors like this when building your app with the runtime included (This has been observed sometimes while Profiling apps in Xcode):

/path/to/ios/NativeScript/inspector/src/base/atomicops.h:311:11: No matching function for call to 'Relaxed_Load'

This is most likely related to Build Active Architecture Only setting in Xcode for various targets (your app and the included v8ios runtime). You should check to make sure your app Build Settings and the v8ios targets NativeScript and TKLiveSync Build Settings are set to YES for both Debug and Release. See this reference: QuickBlox/quickblox-ios-sdk#993 (comment)

Overview

POC showing the {N} iOS runtime running with the V8 engine.

Supported architectures:

  • x86_64
  • arm64

iOS deployment target:

  • 9.0

The --jitless mode in which V8 is running is explained in the following document

Updating/Building V8 engine source

In order to build the V8 engine for iOS and produce the static libraries used in the NativeScript iOS runtime follow these steps:

Prerequisites:

git clone https://github.com/NativeScript/ios.git
cd ios

You will need Google depot_tools

  • If you have not cloned the repo yet, clone the following and export a path setting so they can be referenced properly:
git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git

// copy/paste this command in current terminal window:
export PATH=`pwd`/depot_tools:"$PATH"
  1. Fetch the latest v8 source (or specific version):

If you have an existing v8 source fetched, delete the folder, and fetch it fresh each time updates are needed.

// IMPORTANT: Make sure you are inside the clone of this repo...
cd ios

// Fetch v8 source:
fetch v8

This will create a v8 repo folder automatically checking out the master branch.

Always check https://omahaproxy.appspot.com/ for the specific version you intend to build.

  1. Ensure you checkout the version you intend to build:
cd v8

// for example:
git checkout 9.2.230.18

gclient sync

This will checkout a specific tag and fetch additional dependencies for building the intended version.

  1. Apply patches from v8 updates to the iOS runtime:
npm run apply-patches

NOTE: Oftentimes the patches may not apply immediately and can run into issues like this:

error: patch failed: BUILD.gn:538
error: BUILD.gn: patch does not apply
error: patch failed: src/inspector/inspector_protocol_config.json:21
error: src/inspector/inspector_protocol_config.json: patch does not apply
~/Documents/ios/v8/build ~/Documents/ios/v8 ~/Documents/ios
error: patch failed: config/ios/ios_sdk.gni:32
error: config/ios/ios_sdk.gni: patch does not apply

You can look at each patch failure, for example BUILD.gn: patch does not apply, you can apply the patch manually instead. This can be done by opening the ./v8.patch file and applying each patch manually to the corresponding file.

  1. Build v8 source:
npm run build-v8-source

Troubleshooting build errors

  • Example failure 1:
@Mac ios % npm run build-v8-source

> @nativescript/[email protected] build-v8-source
> ./build_v8_source.sh

~/Documents/ios/v8 ~/Documents/ios
Building for out.gn/x64-release (simulator)
Done. Made 212 targets from 92 files in 4004ms
ninja: Entering directory `out.gn/x64-release'
ninja: error: unknown target 'v8_libsampler'

In this case, the v8_libsampler module no longer needs to be built specifically as a target, therefore the MODULES inside the build_v8_source.sh can be modified to remove the target of v8_libsampler and the build can be invoked again.

  • Example failure 2:
ERROR at //build/config/ios/ios_sdk.gni:181:33: Script returned non-zero exit code.
    ios_code_signing_identity = exec_script("find_signing_identity.py",

Automatic code signing identity selection was enabled but could not
find exactly one codesigning identity matching "Apple Development".

Check that the keychain is accessible and that there is exactly one
valid codesigning identity matching the pattern. Here is the parsed
output of `xcrun security find-identity -v -p codesigning`:

  1) 1ABE0***********************************: "Apple Development: Your Name (U4********)"
  2) CB529***********************************: "Apple Distribution: Your Org (29********)"
  3) BACD5***********************************: "Apple Development: Your Name (VV********)"
  4) 0D42D***********************************: "Apple Development: Your Team (D3********)"
  5) 055BA***********************************: "Apple Development: Your Name (GF********)"
  6) A5306***********************************: "Apple Development: Your Name (9V***********)"
    6 valid identities found

If this occurs you can manually modify v8/build/config/ios/ios_sdk.gni. A property named ios_code_signing_identity. You can set that explicitly to one of your code signing identities. You can use the command it suggests to list out your identities in full: xcrun security find-identity -v -p codesigning - Copy the id and paste it as the value of ios_code_signing_identity.

You will want to make ios_code_signing_identity_description an empty string so the final change should look something like this:

# Explicitly select the identity to use for codesigning. If defined, must
# be set to a non-empty string that will be passed to codesigning. Can be
# left unspecified if ios_code_signing_identity_description is used instead.
ios_code_signing_identity = "...your-id..."

# Pattern used to select the identity to use for codesigning. If defined,
# must be a substring of the description of exactly one of the identities by
# `security find-identity -v -p codesigning`.
ios_code_signing_identity_description = ""
  1. If building of the v8 source succeeds, Verify the build output.

The compiled fat static libraries will be placed inside the v8/dist folder.

Building a Distribution Package

  1. Bump the version in package.json

  2. Run: npm run update-version (This will update the runtime headers with version info)

  3. Build & pack: npm run build

This will create: dist/npm/nativescript-ios-{version}.tgz NPM package ready for publishing.

More Repositories

1

NativeScript

⚑ Empowering JavaScript with native platform APIs. ✨ Best of all worlds (TypeScript, Swift, Objective C, Kotlin, Java). Use what you love ❀️ Angular, Capacitor, Ionic, React, Solid, Svelte, Vue with: SwiftUI, Jetpack Compose, Flutter and you name it compatible.
TypeScript
23,002
star
2

nativescript-angular

Integrating NativeScript with Angular
TypeScript
1,213
star
3

nativescript-cli

Command-line interface for building NativeScript apps
JavaScript
1,037
star
4

android

NativeScript for Android using v8
C++
521
star
5

sample-Groceries

🍏 🍍 πŸ“ A NativeScript-built iOS and Android app for managing grocery lists
TypeScript
484
star
6

docs-v7

Documentation, API reference, and code snippets for NativeScript
CSS
446
star
7

nativescript-marketplace-demo

NativeScript kitchen sink demo. All of NativeScript’s functionality in one app.
TypeScript
325
star
8

ios-jsc

NativeScript for iOS using JavaScriptCore
JavaScript
295
star
9

nativescript-sdk-examples-ng

NativeScript and Angular code samples.
TypeScript
292
star
10

nativescript-app-templates

Monorepo for NativeScript app templates
TypeScript
222
star
11

plugins

@nativescript plugins to help with your developments.
TypeScript
190
star
12

nativescript-schematics

nativescript, mobile, schematics, angular
TypeScript
186
star
13

tailwind

Makes using TailwindCSS in NativeScript a whole lot easier!
JavaScript
150
star
14

theme

@nativescript/theme
SCSS
127
star
15

nativescript-app-sync

♻️ Update your app without going through the app store!
C
125
star
16

push-plugin

Contains the source code for the Push Plugin.
Objective-C
123
star
17

sample-ng-todomvc

Angular2 + NativeScript TodoMVC example
115
star
18

nativescript-imagepicker

Imagepicker plugin supporting both single and multiple selection.
TypeScript
104
star
19

nativescript-background-http

Background Upload plugin for the NativeScript framework
TypeScript
101
star
20

nativescript-dev-webpack

A package to help with webpacking NativeScript apps.
JavaScript
97
star
21

nativescript-camera

NativeScript plugin to empower using device camera.
TypeScript
91
star
22

android-dts-generator

A tool that generates TypeScript declaration files (.d.ts) from Jars
Java
90
star
23

canvas

C++
88
star
24

nativescript-facebook

NativeScript plugin, wrapper of native Facebook SDK for Android and iOS
TypeScript
78
star
25

nativescript-dev-appium

A package to help with writing and executing e2e Appium tests in NativeScript apps
TypeScript
69
star
26

windows-runtime

NativeScript Runtime for the Universal Windows Platform
C
64
star
27

sample-android-background-services

Using Android Background Services in NativeScript
JavaScript
63
star
28

nx

NativeScript for Nx.
TypeScript
61
star
29

firebase

Modular Firebase πŸ”₯ implementation for NativeScript. Supports both iOS & Android platforms for all Firebase services.
TypeScript
54
star
30

android-v8

Contains the Google's V8 build used in android runtime.
Shell
54
star
31

nativescript-fresco

This repository holds the NativeScript plugin that exposes the functionality of the Fresco image library to NativeScript developers.
TypeScript
52
star
32

nativescript-sdk-examples-js

JavaScript
51
star
33

sample-Angular2

49
star
34

nativescript-canvas

HTML5-like 2D and WebGL canvas implementation for NativeScript
C++
48
star
35

plugin-seed

Build NativeScript Plugins Fast ⚑
TypeScript
44
star
36

nativescript-dev-sass

SASS CSS pre-processor for NativeScript projects
JavaScript
44
star
37

angular

NativeScript for Angular
TypeScript
40
star
38

capacitor

NativeScript for Capacitor
TypeScript
37
star
39

sample-ios-background-execution

Running Custom Background Tasks with NativeScript
JavaScript
36
star
40

worker-loader

JavaScript
36
star
41

functional-tests-core

Appium based framework for testing Android and iOS native mobile apps.
Java
36
star
42

nativescript-app-encryption

This plugin encrypts all your app/**.js files during a release build. In experimental state.
JavaScript
35
star
43

tutorials

Project source to tutorials presented here: https://docs.nativescript.org/tutorial/
TypeScript
34
star
44

rfcs

RFCs for NativeScript and related tooling
33
star
45

payments

In-App Purchase, Subscriptions, Google Pay, Apple Pay for NativeScript
TypeScript
33
star
46

capacitor-docs

JavaScript
31
star
47

sample-iOS-Profiling

Performance comparison of popular cross-platform frameworks
JavaScript
29
star
48

docs-v8

HTML
29
star
49

sample-Android-Widgets

JavaScript
29
star
50

animation-demo

A sample app demonstrating different kinds of animations achieved with CSS, keyframes and NativeScript.
TypeScript
29
star
51

nativescript-datetimepicker

Plugin with date and time picking fields
TypeScript
26
star
52

nativescript-ui-charts

NativeScript wrapper around HiCharts library
TypeScript
26
star
53

nativescript-remote-builds

A NativeScript plugin for remote builds when running and publishing NativeScript apps without env setup.
JavaScript
26
star
54

login-tab-navigation-ng

{N} Angular with login and tabs page navigation
JavaScript
26
star
55

mlkit

TypeScript
24
star
56

workshop

NativeScript! And workshops! πŸŽ‰
TypeScript
23
star
57

nativescript-picker

Plugin that provides a custom TextField which lets you pick a value from a list opened in a modal popup.
TypeScript
22
star
58

nativescript-app-sync-server

JavaScript
22
star
59

sample-ImageUpload

An integration of nativescript-image-picker and nativescript-background-http
JavaScript
22
star
60

nativescript-cordova-support

A NativeScript plugin which enables you to use cordova plugins inside your NativeScript-based project.
Java
21
star
61

nativescript-dev-typescript

TypeScript support for NativeScript projects
JavaScript
20
star
62

sample-ios-embedded

Embedding the NativeScript for iOS runtime in an existing app
Objective-C
19
star
63

nativescript-angular-guide

A guide to building apps with NativeScript and Angular 2
HTML
17
star
64

summer-of-nativescript

Resources for the summer of NativeScript
JavaScript
17
star
65

visionos-hello-world

Vision Pro πŸ₯½ Hello World tutorial with NativeScript using various flavors - Angular, React, Solid, Svelte, TypeScript and Vue.
Swift
17
star
66

sample-tvOS

A proof of concept app with the NativeScript runtime running on Apple TV
JavaScript
17
star
67

vue-x-platforms

Vue running on Web, iOS, Android and Vision Pro.
Vue
16
star
68

runtime-node-api

An embeddable, engine-agnostic NativeScript runtime based on Node-API
C
16
star
69

artwork

NativeScript artwork
JavaScript
15
star
70

playground-feedback

Feedback for NativeScript Playground
15
star
71

ios-device-lib

Allows interaction with iOS devices.
C++
15
star
72

nativescript-hook

Helper module for installing hooks into NativeScript projects
JavaScript
14
star
73

android-compose-example

@nativescript/jetpack-compose Example πŸš€πŸ““β™₯️
Kotlin
14
star
74

nativescript-ios-imessages

Simple app extension that interact with the Messages app
C
14
star
75

NativeScript-NEXT-Workshop

Workshop material for teaching NativeScript
13
star
76

playground-tutorials

NativeScript Playground tutorials content
13
star
77

nativescript-unit-test-runner

TypeScript
13
star
78

docs

The NativeScript Docs!
TypeScript
12
star
79

tns-core-modules-widgets

Repo for widgets used in NativeScript modules
Java
12
star
80

demo-workers

JavaScript
12
star
81

examples-best-practices

TypeScript
11
star
82

sample-iOS-HealthKit

This sample shows a simple use of the iOS HealthKit APIs.
JavaScript
11
star
83

sample-native-module

Sample native module for NativeScript
C++
11
star
84

functional-tests-demo

XSLT
10
star
85

ns-ng-animation-examples

TypeScript
10
star
86

pbxproj-dom

pbxproj object model
TypeScript
10
star
87

ios-metadata-generator

Visit the iOS Runtime repo for instructions and related issues
C++
10
star
88

nativescript-app-sync-web

Web client for the codepush server
JavaScript
9
star
89

ios-sim-portable

A Node.js command-line utility to launch an iOS application bundle (.app) in the Xcode iOS Simulator
TypeScript
9
star
90

nativescript-dev-coffeescript

JavaScript
9
star
91

nativescript-doctor

Library that helps identifying if the environment can be used for development of {N} apps.
TypeScript
8
star
92

storybook

πŸ“š Storybook for NativeScript πŸ“²
TypeScript
8
star
93

nativescript-dev-jade

JavaScript
8
star
94

eslint-plugin

ESLint plugin for NativeScript projects.
TypeScript
8
star
95

nativescript-cli-tests

NativeScript CLI Integration Tests
Python
8
star
96

androidx-migration-tool

JavaScript
8
star
97

nativescript-dev-debugging

This package allows the developer of a NativeScript plugin to use a workflow that allows to debug both the native iOS (objective-c, swift) and Android (Java) code and the wrapper TypeScript/JavaScript code of the plugin used inside an NativeScript application. This is a powerful "tool" which will rebuild both the native framework (iOS) and arr files (Android) and the TypeScript/JavaScript code of your NativeScript plugin.
JavaScript
8
star
98

widget-example

iOS Home Screen Widget Example
TypeScript
8
star
99

sample-iOS-CameraApp

In this sample we are demonstrating how you can write platform specific code with NativeScript. We are building iOS only app which uses the latest iOS8 camera APIs.
JavaScript
7
star
100

flutter-example

Using Flutter with NativeScript including Bluetooth integration via @nativescript-community/ble
Dart
7
star