ux-plugins v1.0.0

ux-plugins

System requirements

Use npm v8.1.2

Run in development

Install dependencies

npm ci
npm run example:setup

Switch to plugin

npm run example:switch <plugin-name>

Update config.localIpAddress

Set your local IP address into example/package.json > config.localIpAddress to allow React Native app load ux-framework / plugin bundles in local network

Run example in React Native

npm run example:plugin
npm run example:start

npm run example:ios
# or
npm run example:android

Run example in Web

npm run example:plugin

npm run example:web

See also Troubleshooting section

Publish ux-plugin(s)

1. Commit all changes
2. Merge into main
3. Run lerna publish (docs). This will:
   • determine the current version of the packages
   • detect which packages have changed since the last publishing & then update its version in package.json accordingly
   • create a commit of the changed package.json files, tag the commit and push the tag & commit to the remote
   • publish the packages to NPM

npm run deploy

How to create a new plugin?

To use ux-plugins cli run npm link in this repo root

How to create plugin?

ux-plugins create plugin --name=<plugin-name>
npm i

This command will create the following folders. And npm i is required to link "shared" part with client, web, react-native

plugins/
    <plugin-name>/
        client/
        react-native/
        shared/
        web/

And set to plugins/<plugin-name>/shared/lib/constants.js > PLUGIN_ID = #<plugin-name>

How to create plugin with only client and react-native implementation?

ux-plugins create plugin --only=client,react-native --name=<plugin-name>

This command will create the following folders

plugins/
    <plugin-name>/
        client/
        react-native/
        shared/

And set to plugins/<plugin-name>/shared/lib/constants.js > PLUGIN_ID = #<plugin-name>

How to add web implementation to plugin?

ux-plugins create web <plugin-name>

This command will add the following folder

plugins/
    <plugin-name>/
        web/

Rules for ux-plugin dependencies

1. Dependency should be added to "peerDependencies" only if it has "native" part or "react" (because react is a peer dependency for react-native)
2. If you added a peer dependency you should install it as common dependency in example/ folder directly
3. If your "native" dependency has own "peerDependencies", they must be added to ux-plugin "peerDependencies" as well

Troubleshooting

When you use npm workspaces it happens you install dependencies like npm i -S <npm module name> -w <workspace name>. It clears plugin/<plugin-name>/react-native/node_modules folder and breaks metro bundler for example/.

BUNDLE  ./index.js

error: Error: Unable to resolve module @babel/runtime/helpers/interopRequireDefault from .../plugins/splash-screen/react-native/src/index.js: @babel/runtime/helpers/interopRequireDefault could not be found within the project or in these directories:
../plugins/splash-screen/react-native/node_modules
../node_modules

To fix it just run

npm run example:fix
npm run example:start