Move playground app to use Microsoft.ReactNative

.ado/windows-vs-pr.yml

@@ -172,6 +172,7 @@ jobs:
             /p:PreferredToolArchitecture=$(MSBuildPreferredToolArchitecture)
             /p:PlatformToolset=$(MSBuildPlatformToolset)
             /p:BaseIntDir=$(BaseIntDir)
+            /p:AppxPackageSigningEnabled=false
 
       - task: NuGetCommand@2
         displayName: NuGet restore - Playground Win32
@@ -196,18 +197,6 @@ jobs:
             /p:PlatformToolset=$(MSBuildPlatformToolset)
             /p:BaseIntDir=$(BaseIntDir)
 
-      - task: CmdLine@2
-        displayName: Create Playground bundle
-        inputs:
-          script: node node_modules/react-native/local-cli/cli.js bundle --entry-file Samples\index.tsx --bundle-output Playground.bundle
-          workingDirectory: packages\playground
-
-      - task: CmdLine@2
-        displayName: Create RNTester bundle
-        inputs:
-          script: node ../node_modules/react-native/local-cli/cli.js bundle --entry-file .\RNTester.js --bundle-output RNTester.windows.bundle --platform windows
-          workingDirectory: vnext
-
   - job: RNWSampleAppsPR
     displayName: Sample Apps PR
     dependsOn: Setup

change/@office-iss-react-native-win32-2020-04-09-09-01-15-msrnplayground.json

@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "Bumping dev deps",
+  "packageName": "@office-iss/react-native-win32",
+  "email": "acoates@microsoft.com",
+  "dependentChangeType": "none",
+  "date": "2020-04-09T16:01:08.136Z"
+}

change/react-native-windows-2020-04-09-09-01-15-msrnplayground.json

@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "Bumping dev deps",
+  "packageName": "react-native-windows",
+  "email": "acoates@microsoft.com",
+  "dependentChangeType": "none",
+  "date": "2020-04-09T16:01:15.537Z"
+}

packages/E2ETest/package.json

@@ -28,8 +28,8 @@
     "rnpm-plugin-windows": "^0.6.1"
   },
   "devDependencies": {
-    "@babel/core": "7.5.5",
-    "@babel/runtime": "7.5.5",
+    "@babel/core": "^7.8.4",
+    "@babel/runtime": "^7.8.4",
     "@types/jasmine": "2.8.7",
     "@types/node": "^10.14.8",
     "@types/react": "16.9.0",
@@ -43,9 +43,9 @@
     "@wdio/sync": "5.12.1",
     "appium": "1.14.1",
     "just-scripts": "^0.36.1",
-    "metro-react-native-babel-preset": "0.55.0",
+    "metro-react-native-babel-preset": "^0.56.0",
     "prettier": "^1.18.2",
-    "react-test-renderer": "16.8.6",
+    "react-test-renderer": "16.9.0",
     "rimraf": "^3.0.0",
     "ts-node": "^7.0.1",
     "tsconfig-paths": "^3.8.0",

packages/microsoft-reactnative-sampleapps/package.json

@@ -20,12 +20,12 @@
     "rnpm-plugin-windows": "^0.6.1"
   },
   "devDependencies": {
-    "@babel/core": "7.5.5",
-    "@babel/runtime": "7.5.5",
+    "@babel/core": "^7.8.4",
+    "@babel/runtime": "^7.8.4",
     "@types/react": "16.9.0",
     "@types/react-native": "~0.61.5",
     "just-scripts": "^0.36.1",
-    "metro-react-native-babel-preset": "0.55.0",
-    "react-test-renderer": "16.8.6"
+    "metro-react-native-babel-preset": "^0.56.0",
+    "react-test-renderer": "16.9.0"
   }
 }

packages/playground/.eslintrc.js

@@ -1,6 +1,6 @@
-module.exports = { 
-  extends: "@react-native-community",
+module.exports = {
+  extends: '@react-native-community',
   rules:{ 
     "react-native/no-inline-styles" : 0,
   }
-};
+};

packages/playground/README.md

@@ -1,56 +1,53 @@
 # Playground
 
-Playground is a sample standalone application that shows usage of React Native for Windows vNext with several test scenarios. 
+Playground is a sample standalone application that allows testing of various JS files, including RNTester.
 
 ## Launching the app
-1. Make sure your development machine has been set up with all the system requirements and dependencies mentioned [here](https://github.com/microsoft/react-native-windows/blob/master/vnext/docs/GettingStarted.md). Make sure a browser is launched and running.
-
-2. Open a command prompt in Administrator mode, navigate to the root folder and install React Native
 
-`npm install -g react-native-cli`
+1. Make sure your development machine has been set up with all the system requirements and dependencies mentioned [here](https://github.com/microsoft/react-native-windows/blob/master/vnext/docs/GettingStarted.md). Make sure a browser is launched and running.
 
-3. Install React Native for Windows
+1. Install Packages with-in the repo
 
-`yarn add rnpm-plugin-windows`
-`yarn install`
+`yarn`
 
-4. Ensure packages are built
+1. Ensure packages are built
 
 `yarn build`
 
-5. Navigate to the `playground` folder
+1. Navigate to the `playground` folder
 
 `cd packages\playground`
 
-6. Run the app
+1. Run the app
 
-`react-native run-windows`
+`yarn windows`
 
-This command will build and deploy the application along with launching Metro bundler and the dev tools. 
+This command will build and deploy the application along with launching Metro bundler and the dev tools.
 
 ## Using the app
 
-You can find several sample .tsx files under the `/playground/samples` folder. You can load any of these files from the drop down at the top of the app, ensure the right App/component name has been picked for the sample on the drop down against "App Name". Click `Load` to load the .tsx file to the bottom pane. 
+You can find several sample .tsx files under the `/playground/samples` folder. You can load any of these files from the drop down at the top of the app, ensure the right App/component name has been picked for the sample on the drop down against "App Name". Click `Load` to load the .tsx file to the bottom pane.
 
-You can edit the .tsx files for live reload. You can also add multiple React Native for Windows contents within the same app by clicking `+Pane` and loading a different .tsx file into each. 
+You can edit the .tsx files for fast refresh.
 
-Use the toggles for Web debugger, Live Reload and Reuse Instance to change/test your scenarios.
+Use the UI at the top of the playground application to modify the instance settings, then hit `Load` to run the instance.
 
 ## Editing the app
 
-You can access and edit the .tsx files in the `/playground/samples` folder. Live reload should work as expected while editing the Typescript files.
+You can access and edit the .tsx files in the `/playground/samples` folder. Fast Refresh should work as expected while editing the Typescript files.
 
 You can also launch `/playground/windows/playground.sln` solution file in Visual Studio and edit the native C++ code in the Playground Project. You will have to re-launch the app with the above steps if edits are made to the native app code.
 
 ## How to remote debug Playground
-1.	On your dev machine, open `packages/playground/windows/Playground.sln`
-2.	On your dev machine, run the metro bundler by doing `yarn start --host devMachineName`
-3.	On your target machine, run MSVSMon. This can be downloaded from [here](https://visualstudio.microsoft.com/downloads/#remote-tools-for-visual-studio-2019).
-    1. I haven’t been able to figure out authentication so once you run msvsmon, click on `Options` and select no authentication.
-4.	Right click on the Playground project, Properties, Debugging
-    1. Select Remote debugging, and enter the IP of the debug target
-    2. In the command line arguments textbox, enter `devMachineName:8081`
-    3. In the protocol dropdown, select no authentication
-5.	F5! This will build your playground app, and deploy to the target machine.
-6.	On the target, press `Load`. This will communicate back to the dev machine bundler and launch the web debugger on the dev machine, and serve the pages back to the app running in the target.
-You need an updated version of the bundler in order for remote debugging to work properly: [PR here](https://github.com/react-native-community/cli/pull/829)
+
+1. On your dev machine, open `packages/playground/windows/Playground.sln`
+2. On your dev machine, run the metro bundler by doing `yarn start --host devMachineName`
+3. On your target machine, run MSVSMon. This can be downloaded from [here](https://visualstudio.microsoft.com/downloads/#remote-tools-for-visual-studio-2019).
+   1. I haven’t been able to figure out authentication so once you run msvsmon, click on `Options` and select no authentication.
+4. Right click on the Playground project, Properties, Debugging
+   1. Select Remote debugging, and enter the IP of the debug target
+   2. In the command line arguments textbox, enter `devMachineName:8081`
+   3. In the protocol dropdown, select no authentication
+5. F5! This will build your playground app, and deploy to the target machine.
+6. On the target, press `Load`. This will communicate back to the dev machine bundler and launch the web debugger on the dev machine, and serve the pages back to the app running in the target.
+   You need an updated version of the bundler in order for remote debugging to work properly: [PR here](https://github.com/react-native-community/cli/pull/829)

packages/playground/Samples/messages.tsx

@@ -73,10 +73,7 @@ var TextValues = [
   'Because if they had four, they would be chicken sedans!',
 ];
 
-var UserNameValues = [
-  'Parent',
-  'Child',
-];
+var UserNameValues = ['Parent', 'Child'];
 
 var AvatarValues = [
   require('./images/blueuser.png'),
@@ -112,7 +109,13 @@ function CreateMessage(id: number) {
   m.UserName = GetValue(id, UserNameValues);
   m.Avatar = GetValue(id, AvatarValues);
   m.Timestamp = new Date(new Date().getTime() + id * 60000);
-  m.Time = '' + m.Timestamp.getHours() % 12 + ':' + ('0' + m.Timestamp.getMinutes()).slice(-2) + ' ' + (m.Timestamp.getHours() > 12 ? 'PM' : 'AM' );
+  m.Time =
+    '' +
+    (m.Timestamp.getHours() % 12) +
+    ':' +
+    ('0' + m.Timestamp.getMinutes()).slice(-2) +
+    ' ' +
+    (m.Timestamp.getHours() > 12 ? 'PM' : 'AM');
   return m;
 }
 
@@ -132,10 +135,16 @@ class MessageView extends React.Component<MessageViewProps> {
   render() {
     return (
       <View style={styles.message}>
-        <Image style={styles.messageAvatar} source={this.props.message.Avatar} testID={this.props.message.MessageId} />
+        <Image
+          style={styles.messageAvatar}
+          source={this.props.message.Avatar}
+          testID={this.props.message.MessageId}
+        />
         <View style={styles.messageContents}>
           <View style={styles.messageHeader}>
-            <Text style={styles.messageUserName}>{this.props.message.UserName}</Text>
+            <Text style={styles.messageUserName}>
+              {this.props.message.UserName}
+            </Text>
             <Text style={styles.messageTime}>{this.props.message.Time}</Text>
           </View>
           <Text style={styles.messageText}>{this.props.message.Text}</Text>

packages/playground/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};

packages/playground/just-task.js

@@ -5,40 +5,14 @@
  * @ts-check
  */
 
-const path = require('path');
-const {
-  task,
-  series,
-  option,
-  argv,
-  tscTask,
-  eslintTask,
-} = require('just-scripts');
-const libPath = path.resolve(process.cwd(), 'lib');
-const srcPath = path.resolve(process.cwd(), 'src');
-
-option('production');
-option('clean');
+const {task, series, eslintTask} = require('just-scripts');
 
 task('eslint', () => {
   return eslintTask();
 });
 task('eslint:fix', () => {
   return eslintTask({fix: true});
 });
-task('ts', () => {
-  return tscTask({
-    pretty: true,
-    noEmit: true,
-    ...(argv().production && {
-      inlineSources: true,
-      sourceRoot: path.relative(libPath, srcPath),
-    }),
-    target: 'es6',
-    module: 'commonjs',
-  });
-});
 
-task('build', series('ts'));
 task('lint', series('eslint'));
 task('lint:fix', series('eslint:fix'));

packages/playground/metro.config.js

@@ -9,11 +9,11 @@ const path = require('path');
 const blacklist = require('metro-config/src/defaults/blacklist');
 
 const rnPath = fs.realpathSync(
-  fs.realpathSync(
-    path.resolve(require.resolve('react-native/package.json'), '..'),
-  ),
+  path.resolve(require.resolve('react-native/package.json'), '..'),
+);
+const rnwPath = fs.realpathSync(
+  path.resolve(require.resolve('react-native-windows/package.json'), '..'),
 );
-const rnwPath = path.resolve(__dirname, '../../vnext');
 
 module.exports = {
   // WatchFolders is only needed due to the yarn workspace layout of node_modules, we need to watch the symlinked locations separately
@@ -26,34 +26,22 @@ module.exports = {
 
   resolver: {
     extraNodeModules: {
-      // Redirect metro to rnwPath instead of node_modules/react-native-windows, since metro doesn't like symlinks
+      // Redirect react-native to react-native-windows
       'react-native': rnwPath,
       'react-native-windows': rnwPath,
     },
     // Include the macos platform in addition to the defaults because the fork includes macos, but doesn't declare it
     platforms: ['ios', 'android', 'windesktop', 'windows', 'web', 'macos'],
     // Since there are multiple copies of react-native, we need to ensure that metro only sees one of them
-    // This should go away after RN 0.61 when haste is removed
+    // This should go in RN 0.61 when haste is removed
     blacklistRE: blacklist([
-      new RegExp(`${path.resolve(rnPath)}.*`.replace(/[/\\]/g, '/')),
-      new RegExp(
-        `${path.resolve(rnwPath, 'node_modules/react-native')}.*`.replace(
-          /[/\\]/g,
-          '/',
-        ),
-      ),
       new RegExp(
-        `${path.resolve(rnwPath, 'ReactCopies')}.*`.replace(/[/\\]/g, '/'),
-      ),
-      new RegExp(
-        `${path.resolve(
-          require.resolve('@react-native-community/cli/package.json'),
-          '../node_modules/react-native',
-        )}.*`.replace(/[/\\]/g, '/'),
+        `${(path.resolve(rnPath) + path.sep).replace(/[/\\]/g, '/')}.*`,
       ),
+
       // This stops "react-native run-windows" from causing the metro server to crash if its already running
       new RegExp(
-        `${path.resolve(__dirname, 'windows')}.*`.replace(/[/\\]/g, '/'),
+        `${path.resolve(__dirname, 'windows').replace(/[/\\]/g, '/')}.*`,
       ),
     ]),
   },

packages/playground/package.json

@@ -3,27 +3,24 @@
   "version": "0.0.54",
   "private": true,
   "scripts": {
-    "build": "just-scripts build",
-    "clean": "just-scripts clean",
+    "start": "react-native start",
     "lint:fix": "just-scripts lint:fix",
     "lint": "just-scripts lint",
-    "postinstall": "node postinstall.js",
-    "start": "react-native start",
-    "watch": "tsc -w"
+    "windows": "react-native run-windows"
   },
   "dependencies": {
     "react": "16.9.0",
     "react-native": "0.61.5",
-    "react-native-windows": "0.0.0-master.26",
-    "rnpm-plugin-windows": "^0.6.1"
+    "react-native-windows": "0.0.0-master.26"
   },
   "devDependencies": {
-    "@babel/core": "7.5.5",
-    "@babel/runtime": "7.5.5",
+    "@babel/core": "^7.8.4",
+    "@babel/runtime": "^7.8.4",
     "@types/react": "16.9.0",
     "@types/react-native": "~0.61.5",
     "just-scripts": "^0.36.1",
-    "metro-react-native-babel-preset": "0.55.0",
-    "react-test-renderer": "16.8.6"
+    "metro-react-native-babel-preset": "^0.56.0",
+    "react-test-renderer": "16.9.0",
+    "@react-native-community/eslint-config": "^1.0.0"
   }
 }

packages/playground/packages.config

@@ -1,4 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <packages>
-  <package id="boost" version="1.68.0.0" targetFramework="native" />
+  <package id="Microsoft.Windows.CppWinRT" version="2.0.200316.3" targetFramework="native" />
+  <package id="Microsoft.UI.Xaml" version="2.3.191129002" targetFramework="native" />
 </packages>