Insert a proper flipper-plugin version

Summary:
`flipper-pkg init` would always introduce `flipper-plugin` peer with version `latest`. Since that can never be checked against the current flipper version, it always generated a warning. Updated the init process to take the version the plugin was generated with as base version instead.

Note that in the test the version will always display as 0.0.0, will double check after release that the proper version will show up when running from npx, but don't see a reason why not (famous last words)

Reviewed By: nikoant, priteshrnandgaonkar

Differential Revision: D28992531

fbshipit-source-id: c32aad1650f575f790c2e04d089104b7a616d26f

desktop/pkg/jest.config.json

@@ -2,6 +2,7 @@
   "transform": {
     "^.+\\.tsx?$": "ts-jest"
   },
+  "testEnvironment": "node",
   "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
   "testPathIgnorePatterns": [
     "\/node_modules\/",

desktop/pkg/src/__tests__/runInit.node.ts

@@ -80,8 +80,7 @@ test('It generates the correct files for client plugin', async () => {
         \\"test\\": \\"jest --no-watchman\\"
       },
       \\"peerDependencies\\": {
-        \\"flipper\\": \\"latest\\",
-        \\"flipper-plugin\\": \\"latest\\",
+        \\"flipper-plugin\\": \\"^0.0.0\\",
         \\"antd\\": \\"latest\\"
       },
       \\"devDependencies\\": {
@@ -92,7 +91,6 @@ test('It generates the correct files for client plugin', async () => {
         \\"@types/react\\": \\"latest\\",
         \\"@types/react-dom\\": \\"latest\\",
         \\"antd\\": \\"latest\\",
-        \\"flipper\\": \\"latest\\",
         \\"flipper-plugin\\": \\"latest\\",
         \\"flipper-pkg\\": \\"latest\\",
         \\"jest\\": \\"latest\\",
@@ -258,8 +256,7 @@ test('It generates the correct files for device plugin', async () => {
         \\"test\\": \\"jest --no-watchman\\"
       },
       \\"peerDependencies\\": {
-        \\"flipper\\": \\"latest\\",
-        \\"flipper-plugin\\": \\"latest\\",
+        \\"flipper-plugin\\": \\"^0.0.0\\",
         \\"antd\\": \\"latest\\"
       },
       \\"devDependencies\\": {
@@ -270,7 +267,6 @@ test('It generates the correct files for device plugin', async () => {
         \\"@types/react\\": \\"latest\\",
         \\"@types/react-dom\\": \\"latest\\",
         \\"antd\\": \\"latest\\",
-        \\"flipper\\": \\"latest\\",
         \\"flipper-plugin\\": \\"latest\\",
         \\"flipper-pkg\\": \\"latest\\",
         \\"jest\\": \\"latest\\",

desktop/pkg/src/commands/init.ts

@@ -147,6 +147,12 @@ export async function initTemplate(
   supportedDevices: string[] | undefined,
   outputDirectory: string,
 ) {
+  const flipper_version = JSON.parse(
+    await fs.readFile(
+      path.resolve(__dirname, '..', '..', 'package.json'),
+      'utf-8',
+    ),
+  ).version;
   const packageName = getPackageNameFromId(id);
   const templateDir =
     pluginType === 'device' ? devicePluginTemplateDir : pluginTemplateDir;
@@ -169,6 +175,7 @@ export async function initTemplate(
         .toString()
         .replace('{{id}}', id)
         .replace('{{title}}', title)
+        .replace('{{flipper_version}}', flipper_version)
         .replace(
           '{{supported_devices}}',
           JSON.stringify(

desktop/pkg/templates/device-plugin/package.json.template

@@ -21,8 +21,7 @@
     "test": "jest --no-watchman"
   },
   "peerDependencies": {
-    "flipper": "latest",
-    "flipper-plugin": "latest",
+    "flipper-plugin": "^{{flipper_version}}",
     "antd": "latest"
   },
   "devDependencies": {
@@ -33,7 +32,6 @@
     "@types/react": "latest",
     "@types/react-dom": "latest",
     "antd": "latest",
-    "flipper": "latest",
     "flipper-plugin": "latest",
     "flipper-pkg": "latest",
     "jest": "latest",

desktop/pkg/templates/plugin/package.json.template

@@ -20,8 +20,7 @@
     "test": "jest --no-watchman"
   },
   "peerDependencies": {
-    "flipper": "latest",
-    "flipper-plugin": "latest",
+    "flipper-plugin": "^{{flipper_version}}",
     "antd": "latest"
   },
   "devDependencies": {
@@ -32,7 +31,6 @@
     "@types/react": "latest",
     "@types/react-dom": "latest",
     "antd": "latest",
-    "flipper": "latest",
     "flipper-plugin": "latest",
     "flipper-pkg": "latest",
     "jest": "latest",

docs/tutorial/js-setup.mdx

@@ -18,7 +18,10 @@ on the desktop side.
 
 ## Scaffolding a new Desktop plugin
 
-A new Flipper Desktop plugin can be scaffolded by running `npx flipper-pkg init` in the directory where you want to store the plugin sources (Don't run this command inside the Flipper repository itself!). For example:
+A new Flipper Desktop plugin can be scaffolded by running `npx flipper-pkg init` in the directory where you want to store the plugin sources (Don't run this command inside the Flipper repository itself!). 
+Before running this command, make sure Flipper is closed.
+
+For example:
 
 ```bash
 mkdir ~/FlipperPlugins