ionic-team/create-capacitor-plugin

Create a new Capacitor plugin ⚡️

Create Capacitor Plugin

Generate a new Capacitor plugin.

Usage

npm init @capacitor/plugin [<path>] [options]

📝 npm init <pkg> requires npm 6+

You can also try the following methods to use this package:

• npx @capacitor/create-plugin
• yarn create @capacitor/plugin
• npm install -g @capacitor/create-plugin && create-capacitor-plugin

Example Apps

As of the 0.8.0 release, example apps for testing are included when initializing a new plugin. To use these templates, you can open the npx cap open android or npx cap open ios command for Android and iOS respectively. Anything in the example folder will be excluded when publishing to npm.

Options

--name <name> ............. npm package name (e.g. "capacitor-plugin-example")
--package-id <id> ......... Unique plugin ID in reverse-DNS notation (e.g. "com.mycompany.plugins.example")
--class-name <name> ....... Plugin class name (e.g. "Example")
--repo <url> .............. URL to git repository (e.g. "https://github.com/example/repo")
--author <author> ......... Author name and email (e.g. "Name <[email protected]>")
--license <id> ............ SPDX License ID (e.g. "MIT")
--description <text> ...... Short description of plugin features

create-capacitor-plugin's Issues

Follow Creating Capacitor Plugins,but app can't be built

I followed this doc.
Built a new plugin. But app installed the plugin , app could not be built.

error message

 ERROR  Failed to compile with 1 error                                                                       下午3:03:42

 error  in ../echo/dist/esm/index.js

Syntax Error: Error: Failed to load plugin '@typescript-eslint' declared in '..\echo\package.json » @ionic/eslint-config/recommended » ./index': Cannot find module '@typescript-eslint/eslint-plugin'
Require stack:
- D:\CapacitorPluginTest\hello-world\__placeholder__.js
Referenced from: D:\CapacitorPluginTest\echo\node_modules\@ionic\eslint-config\index.js
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at _normalizeObjectConfigData.next (<anonymous>)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at _normalizeObjectConfigData.next (<anonymous>)
    at _normalizeObjectConfigDataBody.next (<anonymous>)


 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js& 9:0-31 16:4-11
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./src/main.js

 ERROR  Build failed with errors.
npm ERR! code 1
npm ERR! path D:\CapacitorPluginTest\hello-world
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c vue-cli-service build

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\User\AppData\Local\npm-cache\_logs\2021-12-08T07_03_42_967Z-debug.log

Build Step

clone the project

"echo" is plugin.
"hello-world" is app.

then

cd echo/
npm install
npm run build

and , go hello-world

cd ..
cd hello-world
npm install
npm run build

then , error is showed in terminal.

env

os : windows 10 x64
nodejs version : v14.17.3
npm version : 7.6.1

Running npx @capacitor/cli plugin:generate gives "removed" errror

As the title explains, running npx @capacitor/cli plugin:generate gives the following error,

Are we not suppose to be able to create v2 plugins anymore? Running the command suggested by the output will create a v3 template with v3 dependencies

upgrade rollup to v3

@vitejs/create-app is deprecated, use npm init vite instead

When init new plugin i get this warning message

Add more meaningful test

Instead of testing 2 + 2, test the echo method instead

Failed to load plugin 'import' declared in '../pluginpackage.json » @ionic/eslint-config/recommended': Cannot find module 'eslint-plugin-import'

Whenever I try to build the src with npm run build I get no errors at build time but I do in my application when importing the plugin with the error:

Failed to load plugin 'import' declared in '../pluginpackage.json » @ionic/eslint-config/recommended': Cannot find module 'eslint-plugin-import'

Is it just me?

I run node v15.13.0 and npm 7.7.6

feat: allow plugin to self run cap sync

when you install a plugin you always want to cap sync, why not add this as postinstall script ?
then user will never forget to sync, i understand it can have some downside, that why i open the question here.
Good or bad idea ?

feat: Incorpore scripts, docs and examples to run Unit tests for capacitor plugins

Feature Request

Description

Incorpore scripts, docs and examples to run Unit tests for capacitor plugins

Platform(s)

Android, iOS

Additional Context

Cordova suffered from the problem that a lot of plugins were (are) not tested, this make them unstable and hard to update without break anything. Capacitor should do better than that, there is currently no documentation about how to run unit tests for plugins in the plugin project.

Better name for Plugin test file

Currently the testfile template is called __CLASS__PluginTests.swift.mustache, but it doesn't actually generate a test class for __CLASS__Plugin but __CLASS__, and thuse should probably be renamed __CLASS__Tests.swift.mustache

Additionally if it is possible to write an actual Plugin testfile, then that should be exist under the name __CLASS__PluginTests.swift.mustache

`bridge_layout_main.xml` should not be included

It was mistakenly copied into res/layout.

https://github.com/ionic-team/create-capacitor-plugin/blob/main/assets/plugin-template/android/src/main/res/layout/bridge_layout_main.xml

Run commands after template

We can run the following commands:

npm install --no-package-lock
npm run fmt
git commit -m "Initial commit"

• We can assume npm is fine to get started (people can use what they want after the dependencies are installed). We shouldn't create a package-lock.json file because it's specific to npm
• Running fmt after the template ensures that the source files won't fail the Prettier check
• Create an initial git commit so as a base point

Do not run `git init` when already in a git repo

Choosing older capacitor version

I need to create a Capacitor 4 plugin. I poked around files, but I couldn't find any option to indicate which Capacitor version I want. I am fine going with 5, but in our Ionic app many other capacitor plugins we are using are still not compatible with version 5, so I specifically need to go with 4.

Am I missing something here?

I also tried to use the capacitor/cli@4 plugin:generate but it was removed long time ago from cli, so no luck there too.

npm package name regex too restrictive

The --name validator regex is too restrictive and will not let valid package names pass validation.

Presume it was a legacy versus current package name issue.

https://github.com/npm/validate-npm-package-name has a list of valid package name defined as:

Naming Rules

Below is a list of rules that valid npm package name should conform to.

package name length should be greater than zero
all the characters in the package name must be lowercase i.e., no uppercase or mixed case names are allowed
package name can consist of hyphens
package name must not contain any non-url-safe characters (since name ends up being part of a URL)
package name should not start with . or _
package name should not contain any spaces
package name should not contain any of the following characters: ~)('!*
package name cannot be the same as a node.js/io.js core module nor a reserved/blacklisted name. For example, the following names are invalid:
http
stream
node_modules
favicon.ico
package name length cannot exceed 214

I couldn't find this in the npm docs to reference.

Simplest change for my particular issue would be allowing the . in the name after the scope so that @scope/com.example.packageid passed the regex

^(@[a-z0-9-]+/)?[a-z0-9-.]+$

Implement a better example for the plugin template

• one sync and one async task
• fibanacci or squaring function

ref: ionic-team/capacitor#3315 (comment)

feat: Add testing project to capacitor plugin template.

Feature Request

Description

When creating a new Plugin, a simple consumer test project should be available In a sub folder

Platform(s)

All

Preferred Solution

A . /test-project/ folder ready to run.

Alternatives

Manually create some project for each plugin.

Additional Context

As I started to create plugins I see that I always have to repeat the steps of create a sub project in a folder and "install"/link the plugin src to test how my changes work on device and web.

Documentation wrongly generated with any

Exemple here : https://github.com/riderx/capacitor-flash

the doc show isAvailable() => any but the current function returnPromise<{ value: boolean }>

Ensure `@capacitor/core` isn't being bundled into the rollup bundles

We need @capacitor/core to be an external dependency. There should only be one instance of it in an app.

Can I have only one specific platform for a plugin?

Hello! So I am developing a plugin, which I think it supports only on Android platform.

Is there any way to generate a plugin with one or specific platform?
And can I just delete the ios directory and modify the plugin's package.json?

Thank you very much!

Create readme when auto Generating an example plugin

It would be nice when using the plugin generator if a readme with the instructions on how to install the plugin that was created.

Create react app does a decent job of this when you use it to bootstrap a react project. https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md

Most importantly this should include the install steps for the the npm package as well as npx cap sync etc.

It'd be cool if this went a step further and automatically populated the package name in the install command, seeing as the user is asked to give that on plugin creation.

Imports are not Resolved in Generated Plugin on Android

I used this tool to generate a plugin, and cannot get any of the imports to be recognized on Android. Have tried gradle sync, downgrading gradle, clean/build, and invalidate caches/restart. No matter what I do, I see the following in my plugin class in Android Studio:

Here is the build.gradle file (generated via npm script):

ext {
    junitVersion = project.hasProperty('junitVersion') ? rootProject.ext.junitVersion : '4.13.1'
    androidxAppCompatVersion = project.hasProperty('androidxAppCompatVersion') ? rootProject.ext.androidxAppCompatVersion : '1.2.0'
    androidxJunitVersion = project.hasProperty('androidxJunitVersion') ? rootProject.ext.androidxJunitVersion : '1.1.2'
    androidxEspressoCoreVersion = project.hasProperty('androidxEspressoCoreVersion') ? rootProject.ext.androidxEspressoCoreVersion : '3.3.0'
}

buildscript {
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.2.1'
    }
}

apply plugin: 'com.android.library'

android {
    compileSdkVersion project.hasProperty('compileSdkVersion') ? rootProject.ext.compileSdkVersion : 30
    defaultConfig {
        minSdkVersion project.hasProperty('minSdkVersion') ? rootProject.ext.minSdkVersion : 21
        targetSdkVersion project.hasProperty('targetSdkVersion') ? rootProject.ext.targetSdkVersion : 30
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    lintOptions {
        abortOnError false
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

repositories {
    google()
    jcenter()
    mavenCentral()
}


dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation project(':capacitor-android')
    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
    testImplementation "junit:junit:$junitVersion"
    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
}

And here is my Android Studio info:

Android Studio Arctic Fox | 2020.3.1 Patch 2
Build #AI-203.7717.56.2031.7678000, built on August 26, 2021
Runtime version: 11.0.10+0-b96-7249189 amd64
VM: OpenJDK 64-Bit Server VM by Oracle Corporation
Windows 10 10.0
GC: G1 Young Generation, G1 Old Generation
Memory: 1280M
Cores: 16
Registry: external.system.auto.import.disabled=true
Non-Bundled Plugins: org.jetbrains.kotlin

Update dependencies to newest versions

hello Ionic Team 👋

Any chance to update the dependencies of the project?
current versions seem a bit behind compared to the android-template

Moving to these versions would be very useful:

• Update capacitor/core to 5.6.0
• Update the Gradle plugin to 8.2.1
• Swap compileSdkVersion with compileSdk
• Set compileSdk and targetSdkVersion to 34

Thanks!

“npm init @capacitor/plugin” still create 3.x version of Plugin

--dir should just be first argument

The --dir option should just be the first positional argument like CRA.

Explain why repository URL and description aren't optional

#7

InstrumentationTest not working on android

The default instrumentation test is not working after running npm init @capacitor/plugin.

Steps to reproduce:

• Run npm init @capacitor/plugin
• Start Android Studio inside the plugin/android folder
• Try to run ExampleInstrumentedTest

Output:

Project 'android' not found in root project 'android'.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

No such module "MapboxMaps" iOS

Hi,
i'm trying to develop a plugin for iOS with Mapbox, but i always receive the error No such module "MapboxMaps" when i try to run the app. I included the pods everywhere but the error is still there
With Android all works well.
Any suggestion?

Thanks