nativescript / capacitor-docs Goto Github PK

JavaScript 39.77% CSS 30.08% Vue 30.15%

capacitor-docs's Introduction

NativeScript empowers you to access native APIs from JavaScript directly. Currently iOS, Android, and visionOS runtimes are provided for rich mobile development across a variety of diverse use cases.

Contribute

Setup your local development environment
Clone to contribute:

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

# setup workspace for development
$ npm run setup

# list all available commands to run
$ npm start

We love you and your pull requests 🤗. Please follow our contributing guide and see our code of governance to become as involved as you want to be.

@nativescript/*

@nativescript/core Singular primitives offering an easy-to-use API surface for diverse iOS/visionOS/Android APIs implemented with NativeScript.
@nativescript/types Types for both iOS/Android below wrapped up as a convenience. Most commonly used.
@nativescript/types-ios Types for iOS.
@nativescript/types-android Types for Android.
@nativescript/types-minimal A very minimal set of types for only the latest Android and iOS sdks. Most commonly used to optimize Web-based IDE's which auto load all type declarations from node_modules.
@nativescript/ui-mobile-base UI mobile base native classes used by core.
@nativescript/webpack Webpack build utilities and configs used by NativeScript apps.

Other source repos

Outside the source centralized in this repo, NativeScript consists of a few other source repos. Here are the major ones:

iOS and visionOS Runtime Empowers JavaScript code to be executed on iOS and visionOS devices written in a mix of C++, Objective-C, and Swift.
Android Runtime Empowers JavaScript code to be executed on Android devices written in a mix of C++, Java and Kotlin.
CLI Command-line interface empowering you to create, build, and run apps using NativeScript.
Docs Documentation available at http://docs.nativescript.org/ written in Markdown.
Plugins Various TSC managed plugins. Also a good reference is the plugin marketplace with several additional plugins.
Firebase Modular Firebase 🔥 implementation for supported platforms.
ML Kit Google's ML Kit SDKs for supported platforms.
Payments In-App Purchase, Subscriptions, Google Pay and Apple Pay.
Artwork Want to use our logo or colors? Feel free to use any of our ready-to-use media material.

Copyright notice

Copyright OpenJS Foundation and NativeScript contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Made with ❤️

capacitor-docs's People

Contributors

Stargazers

Watchers

Forkers

janoshrubos danolu

capacitor-docs's Issues

Better ES6 Support

Looking at the capacitor intro, it says that I need to install webpack to support builds, which brings me to full stop. My project is all ES6 modules in TypeScript. I use tsc to compile and ESBuild to bundle and that's it. I propose "untying" the knot since this is the future of .js.

Error in using npm i @nativescript/capacitor plugin with Ionic 7 capacitor project

Followed the Installing @nativescript/capacitor steps for Ionic 7 capacitor app with this plugin but getting following error on running the cmd

npm run build:mobile

\node_modules.bin\build-nativescript:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")
^^^^^^^

SyntaxError: missing ) after argument list
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1176:20)
at Module._compile (node:internal/modules/cjs/loader:1218:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:23:47

Node.js v18.16.0
ERROR: "build:nativescript" exited with 1.

Please share every minor step required to include for Ionic 7 capacitor project running on windows

Creating native classes

Hello folks,

I was wondering if exist any example to create native classes? e.g: https://github.com/proyecto26/nativescript-inappbrowser/blob/develop/src/InAppBrowser.ios.ts#L36

Thanks for your help! <3

Can't resolve 'tns-core-modules/profiling' in modal example

esm5 issues when importing into dialog example

i tried to create a dialog with Profiling.time()

Reproduction steps
install in root and/or in nativescript tns-core-modules (i tried both)
replace the dialog code for the generated example in src/nativescript/examples/modal

ERROR in ./examples/modal.ts 4:20-57
Module not found: Error: Can't resolve 'tns-core-modules/profiling' in '/Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/examples'
resolve 'tns-core-modules/profiling' in '/Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/examples'
  Parsed request is a module
  using description file: /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/package.json (relative path: ./examples)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/@nativescript/core
        /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/@nativescript/core/tns-core-modules doesn't exist
      looking for modules in /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules
        existing directory /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules
          using description file: /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/package.json (relative path: .)
            using description file: /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/package.json (relative path: ./profiling)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling is not a file
              .ios.ts
                Field 'browser' doesn't contain a valid alias configuration
                /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling.ios.ts doesn't exist
              .ts
                Field 'browser' doesn't contain a valid alias configuration
                /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling.ts doesn't exist
              as directory
                existing directory /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling
                  using description file: /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/package.json (relative path: .)
                    use ./profiling from main in package.json
                      using description file: /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/package.json (relative path: ./profiling)
                        no extension
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/profiling doesn't exist
                        .ios.ts
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/profiling.ios.ts doesn't exist
                        .ts
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/profiling.ts doesn't exist
                        as directory
                          /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/profiling doesn't exist
                    using path: /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/index
                      using description file: /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/package.json (relative path: ./index)
                        no extension
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/index doesn't exist
                        .ios.ts
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/index.ios.ts doesn't exist
                        .ts
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/index.ts doesn't exist
      /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/examples/node_modules doesn't exist or is not a directory
      looking for modules in /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules
        existing directory /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules
          using description file: /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/package.json (relative path: .)
            using description file: /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/package.json (relative path: ./profiling)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling is not a file
              .ios.ts
                Field 'browser' doesn't contain a valid alias configuration
                /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling.ios.ts doesn't exist
              .ts
                Field 'browser' doesn't contain a valid alias configuration
                /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling.ts doesn't exist
              as directory
                existing directory /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling
                  using description file: /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/package.json (relative path: .)
                    use ./profiling from main in package.json
                      using description file: /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/package.json (relative path: ./profiling)
                        no extension
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/profiling doesn't exist
                        .ios.ts
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/profiling.ios.ts doesn't exist
                        .ts
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/profiling.ts doesn't exist
                        as directory
                          /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/profiling doesn't exist
                    using path: /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/index
                      using description file: /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/package.json (relative path: ./index)
                        no extension
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/index doesn't exist
                        .ios.ts
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/index.ios.ts doesn't exist
                        .ts
                          Field 'browser' doesn't contain a valid alias configuration
                          /Users/angelromero/Documents/practice/shake-for-wisdom/src/nativescript/node_modules/tns-core-modules/profiling/index.ts doesn't exist
      /Users/angelromero/Documents/practice/shake-for-wisdom/src/node_modules doesn't exist or is not a directory
      looking for modules in /Users/angelromero/Documents/practice/shake-for-wisdom/node_modules
        /Users/angelromero/Documents/practice/shake-for-wisdom/node_modules/tns-core-modules doesn't exist
      /Users/angelromero/Documents/practice/node_modules doesn't exist or is not a directory
      /Users/angelromero/Documents/node_modules doesn't exist or is not a directory
      /Users/angelromero/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./index.ts 29:0-27

webpack 5.64.4 compiled with 1 error in 396 ms
NativeScript build complete: www/nativescript/index.js

import {
  iosRootViewController,
  androidCreateDialog,
} from '@nativescript/capacitor/bridge';
import { time } from 'tns-core-modules/profiling';
// import { time } from '@nativescript/core/profiling';
/**
 * Try calling from Ionic with:
 *
 * import { native } from '@nativescript/capacitor';
 * 
 *
 * native.openNativeModalView();
 *
 * Reference:
 * iOS: https://developer.apple.com/library/archive/featuredarticles/ViewControllerPGforiPhoneOS/index.html
 * Android: https://developer.android.com/reference/android/widget/LinearLayout
 */

native.openNativeModalView = () => {
  if (native.isAndroid) {
    androidCreateDialog(() => {
      const activity = native.androidCapacitorActivity;

      const layout = new android.widget.LinearLayout(activity);
      layout.setGravity(android.view.Gravity.CENTER);
      layout.setOrientation(android.widget.LinearLayout.VERTICAL);

      const btn = new android.widget.Button(activity);
      btn.setText('Ionic');
      layout.addView(btn);

      const btn1 = new android.widget.Button(activity);
      btn1.setText('Capacitor');
      layout.addView(btn1);

      return layout;
    });
  } else {
    const vc = UIViewController.alloc().init();
    vc.view.backgroundColor = UIColor.blueColor;
    const label = UILabel.alloc().initWithFrame(
      CGRectMake(0, 30, UIScreen.mainScreen.bounds.size.width, 50)
    );
    label.text = `Well this is fun. ${time()}`;
    label.textColor = UIColor.orangeColor;
    label.textAlignment = NSTextAlignment.Center;
    label.font = UIFont.systemFontOfSize(35);
    vc.view.addSubview(label);
    iosRootViewController().presentModalViewControllerAnimated(vc, true);
  }
};

Error during `npm install @nativescript/capacitor`

System

macOS 10.15
Node v16.1.0
shell: zsh

Initialising the repo

# Initialise Svelte web app
npx degit sveltejs/template svelte-app
cd svelte-app

# Install Capacitor:
npm install @capacitor/cli@latest @capacitor/core@latest @capacitor/android@latest @capacitor/ios@latest

# As discussed in https://github.com/NativeScript/capacitor-docs/issues/5, this extra
# step isn't in the NativeScript Capacitor instructions but is required.
npx cap init

# build at least once before adding platforms
npm run build

npx cap add android
npx cap add ios

npx cap sync

Installing `@nativescript/capacitor`

$ npm install @nativescript/capacitor
npm WARN deprecated [email protected]: Deprecated due to CVE-2021-21366 resolved in 0.5.0
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.

> [email protected] install /Users/jamie/Downloads/svelte-capacitor-app/node_modules/watchpack-chokidar2/node_modules/fsevents
> node install.js

(node:82724) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
(Use `node --trace-deprecation ...` to show where the warning was created)
  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> [email protected] postinstall /Users/jamie/Downloads/svelte-capacitor-app/node_modules/ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)


> @nativescript/[email protected] postinstall /Users/jamie/Downloads/svelte-capacitor-app/node_modules/@nativescript/webpack
> node postinstall.js

Skipping postinstall artifacts! We assumed the @nativescript/webpack is installing devDependencies

> @nativescript/[email protected] postinstall /Users/jamie/Downloads/svelte-capacitor-app/node_modules/@nativescript/capacitor
> node dist/esm/postinstall --action install

⚙️   @nativescript/capacitor installing...
ADDED: src/nativescript
UPDATED: package.json
ADDED: src/native-custom.d.ts
UPDATED: .gitignore
UPDATED: ios/App/App/AppDelegate.swift

✅   iOS Ready

✅   Android Ready

> @nativescript/[email protected] postinstall /Users/jamie/Downloads/svelte-capacitor-app/src/nativescript/node_modules/@nativescript/core
> node cli-hooks/postinstall.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN nativescript@ No description
npm WARN nativescript@ No repository field.
npm WARN nativescript@ No license field.

added 24 packages from 47 contributors and audited 24 packages in 6.396s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities

[!] Error: Cannot find module 'typescript/package.json' from '/Users/jamie/Downloads/svelte-capacitor-app/src/nativescript'
⭐ @nativescript/capacitor ⭐


🧠   Learn more:   👉   https://capacitor.nativescript.org/getting-started.html


npm WARN [email protected] requires a peer of typescript@>=2.7 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@>2.7.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.

+ @nativescript/[email protected]
added 769 packages from 395 contributors and audited 945 packages in 67.785s

59 packages are looking for funding
  run `npm fund` for details

found 13 vulnerabilities (1 low, 11 moderate, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

This catches my eye:

[!] Error: Cannot find module 'typescript/package.json' from '/Users/jamie/Downloads/svelte-capacitor-app/src/nativescript'

I'm not sure what the consequences of that failure are. I may try again in a moment with Node v14.6.0.

NativeScript Utils

Hello folks,

I'm checking this project to create a plugin for Capacitor, can I use this as a peer dependency? Also, how can we use NativeScript Utils with this plugin?

Thanks for your help! <3

Initialising a new project: Instructions miss that you need to create a capacitor.config.json

EDIT: This whole issue is answered by the Notes section at the bottom of the page. It would be worth consolidating those notes into the installation instructions, rather than placing them after step 4.

Here are the current installation instructions: https://capacitor.nativescript.org/installation.html

npm install @capacitor/cli@latest @capacitor/core@latest @capacitor/android@latest @capacitor/ios@latest

// build at least once before adding platforms
npm run build 

npx cap add android
npx cap add ios

npx cap sync

I started with a new Svelte project, then worked through those instructions:

# Initialise Svelte project
$ npx degit sveltejs/template svelte-app
$ cd svelte-app

$ npm install @capacitor/cli@latest @capacitor/core@latest @capacitor/android@latest @capacitor/ios@latest

# build at least once before adding platforms
$ npm run build 

$ npx cap add android
[error] Missing appId for new platform.
        Please add it in capacitor.config.json or run npx cap init.

Indeed, Capacitor's Getting Started instructions include an npx cap init step:

# Installing the core
npm install @capacitor/core @capacitor/cli
npx cap init

# Installing any desired native platforms:
npm install @capacitor/android
npx cap add android
npm install @capacitor/ios
npx cap add ios

So for one thing, the instructions need to include a npx cap init step before adding any platforms.

For another thing, I'm surprised that the official instructions require running a build before adding any platforms. Is this a NativeScript-specific limitation?

Cannot build android by using gradle version 8.0.2

Hi,

I'm try to integrate nativescript with capacitor, but when i build from android studio or using capacitor run android, it have build error on nativescript.build.gradle.

Is anything I'm done wrong? Please provide me solution as fast as possible.

Thank you.

@nativescript/capacitor repository

Hello folks, Is this the correct repository to report issues about @nativescript/capacitor package? The link from npm looks wrong, please let me know and thanks in advance!

xmldom reported as having security issues

XmlDom library, which is a dependency of nativescript capacitor is reported as having a security issue : GHSA-5fg8-2547-mr8q
The people who made this library did fix it, but have published their updates under a new name @xmldom/xmldom. Can you guys update nativescript capacitor to use that instead? It doesn't seem to have any breaking changes other than the name being changed.