From 3e70495052a93304f1f266b9ef7bd3d6aa658050 Mon Sep 17 00:00:00 2001 From: Matthew Soulanille Date: Thu, 5 Sep 2024 15:27:19 -0700 Subject: [PATCH 1/3] Create DEVELOPMENT.md --- custom_nodes/DEVELOPMENT.md | 58 +++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 custom_nodes/DEVELOPMENT.md diff --git a/custom_nodes/DEVELOPMENT.md b/custom_nodes/DEVELOPMENT.md new file mode 100644 index 0000000..3a744e1 --- /dev/null +++ b/custom_nodes/DEVELOPMENT.md @@ -0,0 +1,58 @@ +# Developing in the Custom Nodes Monorepo + +VisualBlocks maintains a monorepo of custom node packages that can be directly loaded in the web interface and supporting packages that help with developing custom nodes. +The monorepo is orchestrated by [Turborepo](https://turbo.build/repo/docs) with [Changesets](https://github.com/changesets/changesets) for versioning. Packages bundle with +[`tsup`](https://github.com/egoist/tsup) and / or [`esbuild`](https://esbuild.github.io/) and are distributed in the +[ESModules format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) with `.js` extensions. We use [`eslint`](https://eslint.org/) and +[`prettier`](https://prettier.io/) for linting and formatting. Packages + +## Development Commands + +It's recommended (but not required) to globally install turborepo with `npm i -g turbo`. These commands are also available in the `custom_nodes` package.json if you prefer not to. + +Available commands: +``` +$ turbo run + + build + @visualblocks/custom-node-types, @visualblocks/gemini, @visualblocks/node-utils, @visualblocks/scripts and 1 more + clean + @visualblocks/custom-node-types, @visualblocks/gemini, @visualblocks/node-utils, @visualblocks/scripts and 1 more + lint + @visualblocks/gemini, @visualblocks/node-utils, @visualblocks/scripts, @visualblocks/utility-nodes + typecheck + @visualblocks/gemini, @visualblocks/node-utils, @visualblocks/utility-nodes + upload-to-gcp + @visualblocks/gemini, @visualblocks/scripts, @visualblocks/utility-nodes + bundle + @visualblocks/gemini, @visualblocks/utility-nodes + dev + @visualblocks/devserver +``` + +There's also a command for formatting with Prettier: +```sh +# custom_nodes/ +npm run format +``` + +## Updating a Package +1. Make your changes as you normally would, but don't commit yet. +2. Run `npm run lint` +3. Run `npm run format` +4. If your change would cause a version bump in any packages, run `npm changeset` in the `custom_nodes` directory to create +a changeset for your PR. Changeset should detect what packages you've changed. +5. Commit (possibly multiple times) and send a PR. + +## Publishing +### Setup for GCP +1. Install `gsutil` +2. Run `gcloud auth login` +3. Run `gcloud config set project learnjs-174218` to set the project. + +### Steps to Publish +1. Run `npm version-packages` in `custom_nodes/`. This will apply all pending changesets, adding their contents to the CHANGELOG and bumping package versions. +2. Commit the changes and get them merged into `main`. +3. Fetch `main` and run `npm publish-bundles-to-gcp`. +4. This is were we would publish to NPM, but we don't do that yet. + From 686e1fa398a9984c0be111cd6891d904335122c5 Mon Sep 17 00:00:00 2001 From: Matthew Soulanille Date: Thu, 5 Sep 2024 22:40:36 +0000 Subject: [PATCH 2/3] Update devserver readme --- custom_nodes/DEVELOPMENT.md | 5 ++++- custom_nodes/apps/devserver/README.md | 6 +++++- custom_nodes/apps/devserver/package.json | 4 +--- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/custom_nodes/DEVELOPMENT.md b/custom_nodes/DEVELOPMENT.md index 3a744e1..ba1039c 100644 --- a/custom_nodes/DEVELOPMENT.md +++ b/custom_nodes/DEVELOPMENT.md @@ -4,7 +4,7 @@ VisualBlocks maintains a monorepo of custom node packages that can be directly l The monorepo is orchestrated by [Turborepo](https://turbo.build/repo/docs) with [Changesets](https://github.com/changesets/changesets) for versioning. Packages bundle with [`tsup`](https://github.com/egoist/tsup) and / or [`esbuild`](https://esbuild.github.io/) and are distributed in the [ESModules format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) with `.js` extensions. We use [`eslint`](https://eslint.org/) and -[`prettier`](https://prettier.io/) for linting and formatting. Packages +[`prettier`](https://prettier.io/) for linting and formatting. ## Development Commands @@ -36,6 +36,9 @@ There's also a command for formatting with Prettier: npm run format ``` +### Devserver +Run `turbo dev` to run an auto-updating devserver on port 8080. See [the devserver readme](custom_nodes/apps/devserver/README.md) for more. + ## Updating a Package 1. Make your changes as you normally would, but don't commit yet. 2. Run `npm run lint` diff --git a/custom_nodes/apps/devserver/README.md b/custom_nodes/apps/devserver/README.md index fa0f4d0..2e22fa8 100644 --- a/custom_nodes/apps/devserver/README.md +++ b/custom_nodes/apps/devserver/README.md @@ -1,5 +1,9 @@ -# `@visualblocks/devserver` +# Visualblocks Custom Nodes Devserver ## Serving Paths The devserver serves all files in the `../../` directory (aka `visualblocks/custom_nodes/`). To load a custom node library, use a URL like `http://localhost:8080/packages/gemini/dist/bundle.js`. + +## Development + +Whenever a new custom node package is written, it should be added to the devserver's package.json so turborepo knows to restart the devserver when the package is changed. Packages that do not need to be served do not need to be added. Likewise, transitive dependencies do not need to be added (even if they need to be served), since Turborepo will need to recompile them to build their dependent package anyways. diff --git a/custom_nodes/apps/devserver/package.json b/custom_nodes/apps/devserver/package.json index 256e94f..f4489ea 100644 --- a/custom_nodes/apps/devserver/package.json +++ b/custom_nodes/apps/devserver/package.json @@ -6,10 +6,8 @@ "dev": "node server.js" }, "dependencies": { - "@visualblocks/custom-node-types": "*", "@visualblocks/gemini": "*", - "@visualblocks/node-utils": "*", - "@visualblocks/tsconfig": "*" + "@visualblocks/utility-nodes": "*" }, "devDependencies": { "express": "^4.19.2" From 2294487a7f931b5bfe498f1425dd5972d6bcb3f4 Mon Sep 17 00:00:00 2001 From: Matthew Soulanille Date: Thu, 5 Sep 2024 22:42:23 +0000 Subject: [PATCH 3/3] Formatting --- custom_nodes/DEVELOPMENT.md | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/custom_nodes/DEVELOPMENT.md b/custom_nodes/DEVELOPMENT.md index ba1039c..3dfe506 100644 --- a/custom_nodes/DEVELOPMENT.md +++ b/custom_nodes/DEVELOPMENT.md @@ -1,9 +1,9 @@ # Developing in the Custom Nodes Monorepo VisualBlocks maintains a monorepo of custom node packages that can be directly loaded in the web interface and supporting packages that help with developing custom nodes. -The monorepo is orchestrated by [Turborepo](https://turbo.build/repo/docs) with [Changesets](https://github.com/changesets/changesets) for versioning. Packages bundle with -[`tsup`](https://github.com/egoist/tsup) and / or [`esbuild`](https://esbuild.github.io/) and are distributed in the -[ESModules format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) with `.js` extensions. We use [`eslint`](https://eslint.org/) and +The monorepo is orchestrated by [Turborepo](https://turbo.build/repo/docs) with [Changesets](https://github.com/changesets/changesets) for versioning. Packages bundle with +[`tsup`](https://github.com/egoist/tsup) and / or [`esbuild`](https://esbuild.github.io/) and are distributed in the +[ESModules format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) with `.js` extensions. We use [`eslint`](https://eslint.org/) and [`prettier`](https://prettier.io/) for linting and formatting. ## Development Commands @@ -11,6 +11,7 @@ The monorepo is orchestrated by [Turborepo](https://turbo.build/repo/docs) with It's recommended (but not required) to globally install turborepo with `npm i -g turbo`. These commands are also available in the `custom_nodes` package.json if you prefer not to. Available commands: + ``` $ turbo run @@ -31,31 +32,36 @@ $ turbo run ``` There's also a command for formatting with Prettier: + ```sh # custom_nodes/ npm run format ``` ### Devserver + Run `turbo dev` to run an auto-updating devserver on port 8080. See [the devserver readme](custom_nodes/apps/devserver/README.md) for more. ## Updating a Package + 1. Make your changes as you normally would, but don't commit yet. 2. Run `npm run lint` 3. Run `npm run format` 4. If your change would cause a version bump in any packages, run `npm changeset` in the `custom_nodes` directory to create -a changeset for your PR. Changeset should detect what packages you've changed. + a changeset for your PR. Changeset should detect what packages you've changed. 5. Commit (possibly multiple times) and send a PR. ## Publishing + ### Setup for GCP + 1. Install `gsutil` 2. Run `gcloud auth login` 3. Run `gcloud config set project learnjs-174218` to set the project. ### Steps to Publish + 1. Run `npm version-packages` in `custom_nodes/`. This will apply all pending changesets, adding their contents to the CHANGELOG and bumping package versions. 2. Commit the changes and get them merged into `main`. 3. Fetch `main` and run `npm publish-bundles-to-gcp`. 4. This is were we would publish to NPM, but we don't do that yet. -