Merge pull request Synthetixio#236 from Synthetixio/v3-step-1

Migrate v3 - Step 1

.eslintignore

@@ -1,5 +1,8 @@
 build
 coverage
-generated
 node_modules
+generated
+dist
 .vscode
+.yarn
+packages/queries/subgraphs

.eslintrc

@@ -2,18 +2,18 @@
 	"env": {
 		"es6": true,
 		"node": true,
-		"jest": true
+		"jest": true,
+		"browser": true
 	},
-	"extends": ["plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
+	"extends": ["plugin:@typescript-eslint/recommended"],
 	"parser": "@typescript-eslint/parser",
 	"parserOptions": {
 		"ecmaVersion": 6,
 		"sourceType": "module",
 		"project": "./tsconfig.json"
 	},
-	"plugins": ["@typescript-eslint", "prettier", "import"],
+	"plugins": ["@typescript-eslint", "import"],
 	"rules": {
-		"prettier/prettier": "error",
 		"no-mixed-spaces-and-tabs": ["warn", "smart-tabs"],
 		"comma-dangle": [
 			"error",

.github/README.md

@@ -7,17 +7,19 @@
 1. Install `act` https://github.com/nektos/act
 2. Add `- run: sleep 1h` line to `main.yml`. This will prevent docker container from exiting
 3. Execute `act pull_request`
-4. In a separate terminal attach to a running container 
+4. In a separate terminal attach to a running container
    ```sh
    docker exec -it act-Main-Workflow-build bash
    ```
 5. Inside running container update `$PATH` env to access node and yarn
+
    ```sh
    export PATH="$PATH:/opt/hostedtoolcache/node/16.15.0/x64/bin/"
 
-   node -v   
+   node -v
    v16.15.0
    ```
+
 6. To kill a running container:
    ```sh
    docker kill act-Main-Workflow-build
@@ -28,31 +30,32 @@
 1. Create test event file `test.json`
    ```json
    {
-   "action": "workflow_dispatch",
-      "inputs": {
-         "synthetix_version": "2.71.0",
-         "monorepo_version": ""
-      }
+     "action": "workflow_dispatch",
+     "inputs": {
+       "synthetix_version": "2.71.0",
+       "monorepo_version": ""
+     }
    }
    ```
 2. Add `- run: sleep 1h` line to `updateDependency.yml` (where appropriate). This will prevent docker container from exiting
 3. Run `act`
    ```sh
    act workflow_dispatch --eventpath test.json
    ```
-4. In a separate terminal attach to a running container 
+4. In a separate terminal attach to a running container
    ```sh
    docker exec -it act-Publish-Library-Update-synthetix-in-contracts-interface bash
    ```
 5. Inside running container update `$PATH` env to access node and npm
+
    ```sh
    export PATH="$PATH:/opt/hostedtoolcache/node/16.15.0/x64/bin/"
 
-   node -v   
+   node -v
    v16.15.0
    ```
+
 6. To kill a running container:
    ```sh
    docker kill act-Publish-Library-Update-synthetix-in-contracts-interface
    ```
-

.github/workflows/main.yml

@@ -31,6 +31,7 @@ jobs:
       - run: yarn deps:mismatched
       - run: yarn deps:circular
 
+      - run: yarn pretty
       - run: yarn lint
       - run: yarn build
       - run: yarn test

.github/workflows/publishSinglePackage.yml

@@ -61,14 +61,14 @@ jobs:
           cat /tmp/commit-message.txt
 
           git commit --allow-empty --no-verify --all --file /tmp/commit-message.txt 
-          
+
           # We are currently not using tags in any way so not much sense pushing tags to the repo
           # TODO: uncomment if we want to add tags
           # for WORKSPACE_PACKAGE in $(cat /tmp/changed-packages.txt); do
           #   WORKSPACE_NAME=$(jq --raw-output '.name' < $WORKSPACE_PACKAGE)
           #   WORKSPACE_VERSION=$(jq --raw-output '.version' < $WORKSPACE_PACKAGE)
           #   git tag -a "$WORKSPACE_NAME@$WORKSPACE_VERSION" -m "$WORKSPACE_NAME@$WORKSPACE_VERSION"
-          # done         
+          # done
 
       - name: Publish packages
         run: yarn workspaces foreach --no-private npm publish --tolerate-republish

.github/workflows/updateDependency.yml

@@ -70,7 +70,7 @@ jobs:
           #   WORKSPACE_NAME=$(jq --raw-output '.name' < $WORKSPACE_PACKAGE)
           #   WORKSPACE_VERSION=$(jq --raw-output '.version' < $WORKSPACE_PACKAGE)
           #   git tag -a "$WORKSPACE_NAME@$WORKSPACE_VERSION" -m "$WORKSPACE_NAME@$WORKSPACE_VERSION"
-          # done         
+          # done
 
       - name: Publish packages
         run: yarn workspaces foreach --no-private npm publish --tolerate-republish

.gitignore

@@ -2,6 +2,7 @@
 
 # build
 **/build
+**/dist
 
 # testing
 **/coverage

.prettierignore

@@ -2,4 +2,7 @@ build
 coverage
 node_modules
 generated
+dist
 .vscode
+.yarn
+packages/queries/subgraphs

.yarnrc.yml

@@ -1,17 +1,17 @@
-defaultSemverRangePrefix: "^"
+defaultSemverRangePrefix: '^'
 
 enableTelemetry: false
 
 nodeLinker: node-modules
 
-npmRegistryServer: "https://registry.npmjs.org"
+npmRegistryServer: 'https://registry.npmjs.org'
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
-    spec: "@yarnpkg/plugin-version"
+    spec: '@yarnpkg/plugin-version'
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+    spec: '@yarnpkg/plugin-interactive-tools'
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
+    spec: '@yarnpkg/plugin-workspace-tools'
 
 yarnPath: .yarn/releases/yarn-3.2.1.cjs

CHANGELOG.md

@@ -5,18 +5,12 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 # [0.2.0](https://github.com/Synthetixio/js-monorepo/compare/v0.1.1...v0.2.0) (2021-03-02)
 
-
 ### Features
 
-* removing console.log ([56592b8](https://github.com/Synthetixio/js-monorepo/commit/56592b862412bfc9d0e7b555a61c7056ef09d62d))
-
-
-
-
+- removing console.log ([56592b8](https://github.com/Synthetixio/js-monorepo/commit/56592b862412bfc9d0e7b555a61c7056ef09d62d))
 
 ## [0.1.1](https://github.com/Synthetixio/js-monorepo/compare/v0.1.0...v0.1.1) (2021-03-02)
 
-
 ### Bug Fixes
 
-* testing conventional commit ([490fe32](https://github.com/Synthetixio/js-monorepo/commit/490fe3218fb715443eb8b21e244aaa05f47e2d4e))
+- testing conventional commit ([490fe32](https://github.com/Synthetixio/js-monorepo/commit/490fe3218fb715443eb8b21e244aaa05f47e2d4e))

DECISIONS.md

@@ -1,6 +1,7 @@
 # Architectural Decision Records
 
 ## 2022-06-30 Independent versioning of packages
+
 - This way we can consolidate more UI libs in the monorepo and maintain semver for them.
 - We will no longer republish all `@synthetixio/*` libs together with synthetix release (so versions will no longer match).
 - We will only update and release ones that directly or indirectly depend on it. Example is in the [README.md](README.md).
@@ -9,10 +10,12 @@
   - to update and publish one single package (and all that depend on it) by name
 
 ## 2022-06-09 Incorporate `codegen-graph-ts`
+
 - Because `codegen-graph-ts` depends on `wei` and `queries` depend on `codegen-graph-ts` we ended up having multiple `wei` instances of different versions in the lockfile
 - Adding package to the monorepo is a 3-step process. See details in the [README.md](README.md)
 
 ## 2022-06-02 Migrate to Yarn from NPM Workspaces
+
 - As it turns out NPM workspaces do not have a lot of features
 - Non-trivial to find all the workspaces in the monorepo (not too problematic)
 - NPM keeps all deps in a non-flat tree structure, so it is pretty hard to work with when checking dependencies for version mismatches
@@ -21,7 +24,8 @@
 - Yarn comes with a possibility of zero installs if we opt in to keep packages cache in git
 
 ## 2022-05-27 Migrate to NPM Workspaces from Lerna
+
 - Lerna is outdated and not supported
 - It enforces us to maintain a single version for all packages
-- Requires bootstrapping on top of initial installation 
+- Requires bootstrapping on top of initial installation
 - Choosing NPM workspaces as the "npm by default" choice

README.md

@@ -5,7 +5,7 @@
 ## Packages
 
 | Package                                                               | Status                                                                                                                                           | Description                           |
-|-----------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------|
+| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------- |
 | [`@synthetixio/contracts-interface`](/packages/contracts-interface)   | [![npm version](https://badge.fury.io/js/@synthetixio%2Fcontracts-interface.svg)](https://badge.fury.io/js/@synthetixio%2Fcontracts-interface)   | Synthetix contracts interface         |
 | [`@synthetixio/queries`](/packages/queries)                           | [![npm version](https://badge.fury.io/js/@synthetixio%2Fqueries.svg)](https://badge.fury.io/js/@synthetixio%2Fqueries)                           | React library for querying data       |
 | [`@synthetixio/providers`](/packages/providers)                       | [![npm version](https://badge.fury.io/js/@synthetixio%2Fproviders.svg)](https://badge.fury.io/js/@synthetixio%2Fproviders)                       | Synthetix providers for layer 1 and 2 |
@@ -51,8 +51,8 @@ To publish:
 
 This will upgrade `synthetix` in the monorepo and all affected packages will be published with new `patch` release
 
-For example now only the `@synthetixio/contracts-interface` package  depends on `synthetix`, so it will get new `patch` version. But then all the packages that depend on it will get new `patch` version in a cascade (check full list of cascade updates with `yarn deps:version`). So overall these 4 packages will be published:
- 
+For example now only the `@synthetixio/contracts-interface` package depends on `synthetix`, so it will get new `patch` version. But then all the packages that depend on it will get new `patch` version in a cascade (check full list of cascade updates with `yarn deps:version`). So overall these 4 packages will be published:
+
 - `@synthetixio/contracts-interface`
 - `@synthetixio/providers`
 - `@synthetixio/queries`
@@ -70,7 +70,7 @@ To publish:
 4. Fill `version` in a format of `1.2.3` (or `patch`, `minor`, `major`) for the package version (optional, default value is `patch`)
 5. Run the workflow
 
-*NOTE*: All the packages that depend on `package` will be published with `patch` version automatically.
+_NOTE_: All the packages that depend on `package` will be published with `patch` version automatically.
 For example when publishing `@synthetixio/wei` these packages will get updates (check with `yarn deps:version`):
 
 - `@synthetixio/wei`
@@ -86,39 +86,39 @@ When you open a PR a dev package will be published automatically when CI passes.
 Yarn workspaces are specially designed to handle package updates. If you want to push a new release for one or more packages in this repo, run:
 
 1. Firstly set desired versions to updated packages:
-    ```sh
-    yarn version check --interactive
-    ```
+   ```sh
+   yarn version check --interactive
+   ```
 2. Then apply new versions
-    ```sh
-    yarn apply --all
-    ```
+   ```sh
+   yarn apply --all
+   ```
 3. Commit changes
 4. And now we can publish all the updated packages
-    ```sh
-    yarn workspaces foreach --no-private npm publish --tolerate-republish
-    ```
+   ```sh
+   yarn workspaces foreach --no-private npm publish --tolerate-republish
+   ```
 5. Yarn will automatically replace all the `workspace:*` versions with appropriate semver on publish.
 
-
 ## Adding external library to the monorepo preserving git history
 
 This is 3-step process:
+
 1. Prepare original repo
-2. Add remote to monorepo 
+2. Add remote to monorepo
 3. Merge original repo branch and update build to match monorepo processes
 
 Using `codegen-graph-ts` as an example
 
 ### 1. Prepare original repo
 
-- Create a separate branch `move-to-monorepo` 
+- Create a separate branch `move-to-monorepo`
 - Create the intended destination folder inside monorepo `mkdir -p tools/codegen-graph-ts`
 - Move all the package files into `tools/codegen-graph-ts`
 - Remove all the files that won't be used (CI config, lockfile, etc)
 - Commit looks like this:
 
-    ![docs/move-to-monorepo.png](docs/move-to-monorepo.png)
+  ![docs/move-to-monorepo.png](docs/move-to-monorepo.png)
 
 ### 2. Add remote to monorepo
 
@@ -127,11 +127,12 @@ cd ~/synthetix/js-monorepo
 git remote add codegen-graph-ts ~/synthetix/codegen-graph-ts
 git fetch --all
 
-# 
+#
 git merge codegen-graph-ts/move-to-monorepo --allow-unrelated-histories
 ```
 
 ### 3. Merge original repo branch
+
 Using `--allow-unrelated-histories` allows merging independent git history
 
 ```sh
@@ -147,19 +148,21 @@ Now we can remove remote as it is no longer necessary and cleanup all the added
 ```sh
 git remote remove codegen-graph-ts
 
-# Cleanup all local tags and re-fetch existing tags without just removed `codegen-graph-ts` remote 
+# Cleanup all local tags and re-fetch existing tags without just removed `codegen-graph-ts` remote
 git tag -l | xargs git tag -d
 git fetch --tags
 ```
 
 ### Rebasing unmerged branch
 
 To preserve all the merge commits when rebasing on top of updated master use `--rebase-merges`
+
 ```sh
 git rebase master --rebase-merge
 ```
 
 Interactive rebase works too
+
 ```sh
 git rebase master --rebase-merge --interactive
 ```

package.json

@@ -15,6 +15,8 @@
 	"scripts": {
 		"lint": "eslint .",
 		"lint:fix": "eslint . --fix",
+		"pretty": "prettier . --check",
+		"pretty:fix": "prettier . --write",
 		"clean": "yarn workspaces foreach exec rm -rf coverage build generated",
 		"test": "yarn workspaces foreach --topological-dev --verbose run test",
 		"build": "yarn workspaces foreach --topological-dev --verbose run build",
@@ -35,9 +37,7 @@
 		"@typescript-eslint/parser": "^4.25.0",
 		"deps": "workspace:*",
 		"eslint": "^7.26.0",
-		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-import": "^2.23.2",
-		"eslint-plugin-prettier": "^3.4.0",
 		"husky": "^4.2.5",
 		"lint-staged": "^10.2.11",
 		"prettier": "^2.3.0",

tools/deps/mismatched.js

@@ -7,11 +7,16 @@ const { fgReset, fgRed, fgGreen, fgYellow, fgCyan } = require('./lib/colors');
 
 const isFix = process.argv.includes('--fix');
 
+// ignore certain deps that are explicitly mismatched versions
+function ignored({ parent, name, _version, _location }) {
+	return parent === '@synthetixio/v3-ui' && ['react', 'react-dom'].includes(name);
+}
+
 async function run() {
 	const workspaces = await require('./lib/workspaces')();
 	const ROOT = await require('./lib/exec')('yarn workspace root exec pwd');
 
-	const { unique, mismatched } = workspaces
+	const { unique, mismatched: mismatchedUnfiltered } = workspaces
 		.flatMap((p) => {
 			const location = path.join(ROOT, p.location);
 			const packageJson = require(`${location}/package.json`);
@@ -55,7 +60,8 @@ async function run() {
 			},
 			{ unique: {}, mismatched: [] }
 		);
-	//  return
+
+	const mismatched = mismatchedUnfiltered.filter((item) => !ignored(item));
 
 	mismatched.forEach(({ parent, name, version, location }) => {
 		console.log(

v3/ui/.babelrc

@@ -0,0 +1,4 @@
+{
+	"presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+	"plugins": [["@babel/plugin-transform-runtime"]]
+}