• @nativescript/audio-context
• @nativescript/canvas
• @nativescript/canvas-babylon
• @nativescript/canvas-chartjs
• @nativescript/canvas-media
• @nativescript/canvas-phaser
• @nativescript/canvas-phaser-ce
• @nativescript/canvas-pixi
• @nativescript/canvas-polyfill
• @nativescript/canvas-svg
• @nativescript/canvas-three

How to use?

This workspace manages the suite of plugins listed above.

In general, when in doubt with what to do, just npm start.

npm run setup
npm start

// Ensure all plugins build properly first
> type "build-all" (and hit ENTER)

If you don't build all the plugins, you will at least need to build localize to run the demos because it contains hooks that need to be built first.

If building only localize, type: npm start > localize (this will narrow down menu to @nativescript.localize.build) and then hit 'enter'. You can now run the demo apps.

In general, when in doubt with what to do, just npm start.

iOS native frameworks

The plugins' iOS frameworks (CanvasNative, CanvasSVG, AudioContextNative) are not committed. Each plugin references its framework through a local SwiftPM package at packages/<plugin>/platforms/ios/<Framework>Binary, so after cloning, put the frameworks there before building an iOS app:

# prebuilt, from the latest GitHub release (or pass a tag: npm run download.ios.frameworks -- 3.0.6)
npm run download.ios.frameworks

# or build them from source, when working on the native code
npm run build.canvas.ios.framework.release
npm run build.canvas.svg.ios.framework.release
npm run build.audiocontext.ios.framework.release

A downloaded framework matches its release, not necessarily the plugin sources on your branch. If the app fails to link or crashes on a missing native method, build the framework from source.

Published packages do not include the frameworks either: the npm Release workflow uploads them to the GitHub release for the tag, and SwiftPM downloads them on the app's first build.

How to add a new package to workspace?

npm run add

At the prompt, enter the name of the new package.

• This adds a plugin harness in packages with the necessary boilerplate to just start developing
• Updates all demo app flavors to support demoing the new package
• Adds shared code in tools/demo where you can write demo code once and share across all demo flavors
• Updates build tooling to support the new package
• Updates the npm start interactive display
• Updates the README here to list the new package

How to add Angular compatibility to a package

npm run add-angular

At the prompt, enter the name of the package to add an angular folder to it with the necessary boilerplate to provide Angular support to the package.

How to focus on just 1 package to develop in isolation

npm start

• Choose the focus commands for the package you wish to focus on and hit enter.
• All the demo app's will be updated to isolate that 1 package and for supported IDE's (currently VS Code), the source code will also become isolated in the workspace.

Note: good to always clean the demo you plan to run after focusing. (You can clean any demo from npm start as well)

How to publish packages?

npm run publish-packages

• You will be prompted for the package names to publish. Leaving blank and hitting enter will publish them all.
• You will then be prompted for the version to use. Leaving blank will auto bump the patch version (it also handles prerelease types like alpha, beta, rc, etc. - It even auto tags the corresponding prelease type on npm).
• You will then be given a brief sanity check 🧠😊

Made with ❤️