Merge branch 'main' into typescript-dev-guide

CONTRIBUTING.md

@@ -23,6 +23,9 @@ If the changes are larger (API design, architecture, etc), [opening an issue](ht
 * [Signed Commits](https://docs.github.com/en/authentication/managing-commit-signature-verification/about-commit-signature-verification). For convenience it is recommended to set git to sign all commits by default as mentioned [here](https://docs.github.com/en/authentication/managing-commit-signature-verification/telling-git-about-your-signing-key)
 
 ## Building and Testing Locally (All platforms)
+
+> This project also contains [just](https://github.com/casey/just) recipes for many common commands. They can be listed using `just -l`
+
 ### Player
 For speed and consistency, this repo leverages `bazel` as it's main build tool. Check out the [bazel](https://bazel.build/) docs for more info.
 

DEV_GUIDE.md

@@ -1,8 +1,9 @@
-# PlayerUI iOS Development Guide
+# PlayerUI Typescript Development Guide
 
 ### Sections:
 1. [Setup](#Setup)
 2. [Adding a new plugin](#adding-a-new-plugin)
+2. [Dependencies](#Dependencies)
 
 ## Setup
 ### Demo Application
@@ -44,26 +45,37 @@ plugins/example
 
 To scaffold your plugin, create a new create a new `core` or `react` folder in the appropriate plugin directory, with the appropriate folders, a package.json and a blank `BUILD.bazel`:
 
+For core plugins:
 ```bash
 mkdir -p plugins/example-plugin/core/src
 cd plugins/example-plugin/core
 pnpm init
 touch BUILD.bazel
 ```
 
-or for React plugins:
+For react plugins:
 ```bash
 mkdir -p plugins/example-plugin/react/src
 cd plugins/example-plugin/react
 pnpm init
 touch BUILD.bazel
 ```
 
-For both, core and react, set the name, version, and entry point of the package:
+Set the name (which follows a convemtion of {description}-plugin-{platform}), version, and entry point of the package in the `package.json`:
 
+For core plugins:
 ```javascript
 {
-  "name": "@player-ui/example-plugin",
+  "name": "@player-ui/example-plugin-core",
+  "version": "0.0.0-PLACEHOLDER",
+  "main": "src/index.ts",
+}
+```
+
+For react plugins:
+```javascript
+{
+  "name": "@player-ui/example-plugin-react",
   "version": "0.0.0-PLACEHOLDER",
   "main": "src/index.tsx",
 }
@@ -75,7 +87,7 @@ The `js_pipeline` macro will handle the full build:
 ```python
 load("@rules_player//javascript:defs.bzl", "js_pipeline")
 
-js_pipeline(package_name = "@player-ui/example-plugin")
+js_pipeline(package_name = "@player-ui/example-plugin-core")
 ```
 
 In order to use the `tsup` bundler, add `tsup_config` to the `BUILD.bazel` file. This is done by loading the `tsup_config` helper from the `tools` package and calling it within `BUILD.bazel`:
@@ -86,7 +98,15 @@ load("//tools:defs.bzl", "tsup_config")
 tsup_config(name = "tsup_config")
 ```
 
-#### Dependencies
+All plugins leverage `vitest` for testing. To use `vitest`, add `vitest_config` to the `BUILD.bazel` file. This is done by loading the `vitest_config` helper from the `tools` package and calling it within `BUILD.bazel`: 
+
+```python
+load("//tools:defs.bzl", "...", "vitest_config")
+
+vitest_config(name = "vitest_config")
+```
+
+## Dependencies
 Since each package can have different external dependencies, they each need to have their own node_modules. `pnpm` supports a single lock file for multiple packages by setting up a `pnpm-workspace.yaml`. The resulting lock file can be used by `rules_js` to set up a Bazel workspace with multiple packages that each get their own `node_modules` folder in the bin tree. The `npm_link_all_packages` rule will automatically set up the correct node_modules folder based on the Bazel package name and the `pnpm-lock.yaml`. Add the following to your `BUILD.bazel` file.
 
 ```python
@@ -99,7 +119,7 @@ npm_link_all_packages(name = "node_modules")
 
 ```python
 js_pipeline(
-    package_name = "@player-ui/example-plugin",
+    package_name = "@player-ui/example-plugin-core",
     peer_deps = [
         "//:node_modules/react",
     ],
@@ -128,14 +148,4 @@ Internal dependencies also need to be added to the `package.json` either as a de
   }
   ...
 }
-```
-
-### Testing
-
-All plugins leverage `vitest` for testing. To use `vitest`, add `vitest_config` to the `BUILD.bazel` file. This is done by loading the `vitest_config` helper from the `tools` package and calling it within `BUILD.bazel`: 
-
-```python
-load("//tools:defs.bzl", "...", "vitest_config")
-
-vitest_config(name = "vitest_config")
 ```

justfile

@@ -0,0 +1,53 @@
+[doc('Build all JS/TS files')]
+build-js:
+    bazel build -- $(bazel query "kind(npm_package, //...)" --output label 2>/dev/null | tr '\n' ' ')
+
+[doc('Build all core JS/TS files')]
+build-core:
+    bazel build //core/...
+
+[doc('Test targets in the project')]
+test-all:
+  bazel test //...
+
+[doc('Test all JS/TS files')]
+test-js:
+  bazel test -- $(bazel query "kind(js_test, //...)" --output label 2>/dev/null | tr '\n' ' ')
+
+[doc('Test all core JS/TS files')]
+test-core:
+    bazel test //core/...
+
+[doc('Lint all JS/TS files')]
+lint-js:
+  bazel test -- $(bazel query "kind(js_test, //...) intersect attr(name, 'eslint$', //...)" --output label 2>/dev/null | tr '\n' ' ')
+
+[doc('Run a dev server of the main docs page')]
+start-docs:
+  bazel run //docs/site:start
+
+[doc('Run a dev server of storybook')]
+start-storybook:
+  bazel run //docs/storybook:start
+
+[doc('Install all generated artifacts into the system .m2 repository')]
+mvn-install:
+  #!/usr/bin/env bash
+  set -u -e -o pipefail
+
+  # Find all the maven packages in the repo
+  readonly DEPLOY_LABELS=$(bazel query --output=label 'kind("maven_publish rule", //...) - attr("tags", "\[.*do-not-publish.*\]", //...)')
+  for pkg in $DEPLOY_LABELS ; do
+    bazel run "$pkg" --define=maven_repo="file://$HOME/.m2/repository"
+  done
+
+alias maven-install := mvn-install
+
+[doc('Generate and open the xcodeproj for Player')]
+dev-ios:
+  bazel run //ios:xcodeproj
+  open -a Xcode ios/PlayerUI.xcodeproj/
+
+[doc('Build and run the iOS demo app in a simulator')]
+start-ios-demo:
+  bazel run //ios/demo:PlayerUIDemo

package.json

@@ -7,12 +7,6 @@
     "type": "git",
     "url": "https://github.com/player-ui/player.git"
   },
-  "scripts": {
-    "dev:docs": "ibazel run //docs/site:start",
-    "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx $(scripts/pkg-roots.sh)",
-    "prepare": "is-ci || husky install",
-    "test": "bazel test -- $(bazel query \"kind(nodejs_test, //...)\" --output label 2>/dev/null | tr '\\n' ' ')"
-  },
   "engines": {
     "node": "^20.14.0",
     "pnpm": "^8.9.2"
@@ -116,7 +110,7 @@
     "husky": "^7.0.2",
     "is-ci-cli": "^2.2.0",
     "lcov-result-merger": "^3.1.0",
-    "leven":"4.0.0",
+    "leven": "4.0.0",
     "lint-staged": "^11.2.3",
     "lucide-react": "^0.316.0",
     "lunr": "^2.3.9",