initial typescript support (NEAR-DevHub#468)

* initial typescript support (need to adjust github action)

* fix: replace strings before bos-loader is called

* remove dist

* refac Tag to transpile to MainComponent

* change transpiledPathPrefix to build/src

* rename BaseProps to DevHubBaseProps

* transpile to build/src

* change REPL_DEVHUB_CONTRACT replacement back to devgovgigs.near

* wip: move replacements to js script and out of dev.sh (mac only) and out of github action

* lint

* refac: remove include from history

* refac: remove INCLUDE: and add autocomplete module

* remove: unused legacy include.js

* fix: deploy bos components from ./build working directory

* feat: add watchman to build files on change

* remove node package fb-watchman

* fix: pipeline test issue caused by watchman

* fix: move to watchman nodejs client

* fix: instead of MainC.. use funcName after transpile

* remove old comments

* remove unused SIGNER_ID

* added default account_id

* fix: removed cause generated neardevhub-widgets

* fix: buggy behaviour

* change CONTRIBUTING.md

* changed: use watcher instead of fb-watchman

* remove fb-watch commands

* added options to watch

* blocked, running npm run watch from dev.sh rebuilds too often

* feat: trap bos-loader and run watch parallel

* update: contribution.md on the dev process

* remove watchmanconfig

* Update CONTRIBUTING.md zsh -> sh

* update import statement

* edit the CONTRIBUTING deploy preview steps

* fmt

.github/workflows/deploy-dev-testnet.yml

@@ -15,24 +15,19 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
-      - name: Set replacements
-        id: set_replacements
-        run: |
-          echo "replacements=$(jq -r '[to_entries[] | .["find"] = "${" + .key + "}" | .["replace"] = .value | del(.key, .value)]' replacements.dev.json | tr -d "\n\r")" >> $GITHUB_OUTPUT
-
-      - name: Replace placeholders
-        uses: flcdrg/replace-multiple-action@v1
+      - name: Set up node
+        uses: actions/setup-node@v3
         with:
-          files: '**/*.jsx'
-          find: '${{ steps.set_replacements.outputs.replacements }}'
-          prefix: '(^|.*)'
-          suffix: '($|.*)'
+          node-version: 20
+          cache: "npm"
+      - run: npm run build
 
       - name: Install bos CLI
         run: |
           curl --proto '=https' --tlsv1.2 -LsSf https://github.com/FroVolod/bos-cli-rs/releases/download/v0.3.2/bos-cli-installer.sh | sh
-      
+
       - name: Deploy widgets
+        working-directory: ./build
         run: |
           which bos
           echo $PATH

.github/workflows/deploy-prod-mainnet.yml

@@ -16,23 +16,18 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
-      - name: Set replacements
-        id: set_replacements
-        run: |
-          echo "replacements=$(jq -r '[to_entries[] | .["find"] = "${" + .key + "}" | .["replace"] = .value | del(.key, .value)]' replacements.mainnet.json | tr -d "\n\r")" >> $GITHUB_OUTPUT
-
-      - name: Replace placeholders
-        uses: flcdrg/replace-multiple-action@v1
+      - name: Set up node
+        uses: actions/setup-node@v3
         with:
-          files: "**/*.jsx"
-          find: "${{ steps.set_replacements.outputs.replacements }}"
-          prefix: "(^|.*)"
-          suffix: "($|.*)"
+          node-version: 20
+          cache: "npm"
+      - run: npm run build
 
       - name: Install bos CLI
         run: |
           curl --proto '=https' --tlsv1.2 -LsSf https://github.com/FroVolod/bos-cli-rs/releases/download/v0.3.6/bos-cli-installer.sh | sh
 
       - name: Deploy widgets
+        working-directory: ./build
         run: |
           bos components deploy "$NEAR_SOCIAL_DEPLOY_ID" sign-as "$NEAR_SOCIAL_ACCOUNT_ID" network-config mainnet sign-with-plaintext-private-key --signer-public-key "$NEAR_SOCIAL_ACCOUNT_PUBLIC_KEY" --signer-private-key "$NEAR_SOCIAL_ACCOUNT_PRIVATE_KEY" send

CONTRIBUTING.md

@@ -1,6 +1,7 @@
 # Contribution Guidelines for DevHub Repos
 
 ## Introduction
+
 At DevHub, we value the contributions of each individual. This document provides an overview of the developer setup and deployment process to help you contribute to our project. We also recommend familiarizing yourself with [how we work](https://github.com/near/devgigsboard-widgets/blob/main/docs/how-we-work.md) to learn about our development process and enhance your contribution experience.
 
 ## Developer Setup
@@ -28,12 +29,26 @@ npm install
 
 #### Run the dev script
 
-To initiate the development environment, you can use the following script. This script will first check if bos-loader is installed and, if not, install it. Then, it will serve the default development environment.
+To initiate the development environment, you can use the following script. This script will first check if bos-loader is installed and, if not, install it. Then, it will serve the default development environment and watch for changes inside `./src`.
 
 ```sh
 npm run dev
 ```
 
+This runs the bos-loader and the watcher together. You can also run testnet by running:
+
+```sh
+npm run dev:testnet
+```
+
+While testing the testnet, it's necessary to manually execute the watch script yourself to ensure that changes to files trigger the rebuilding process.
+
+Open another terminal and run:
+
+```sh
+npm run watch
+```
+
 #### Customizing Creator ID, Contract ID, or Network
 
 If you need to customize the account ID, override the contract ID, or specify a different network for your development environment, you can use the following flags:
@@ -44,24 +59,26 @@ If you need to customize the account ID, override the contract ID, or specify a
 
 Here's how you can use these flags:
 
+> [!IMPORTANT]
+> You will have to change the replace script flags in package.json in order for the watch script to keep using the right flags.
+
 ```sh
-npm run dev -a your_account_id -c your_contract_id -n your_network
+npm run replace -a your_account_id -c your_contract_id -n your_network
 ```
 
 For example:
 
 ```sh
-npm run dev -a bob.near -c contract.bobs.near -n mainnet
+npm run replace -a bob.near -c contract.bobs.near -n mainnet
 ```
 
 By using these flags, you have the flexibility to customize the development environment according to your specific needs.
 
-
 #### Developing across multiple environments
 
-When referencing a component or any parameter that depends on the network, please use the placeholders defined in replacements.*.json. There are three such files that correspond to different environments:
+When referencing a component or any parameter that depends on the network, please use the placeholders defined in replacements.\*.json. There are three such files that correspond to different environments:
 
-`replacements.dev.json` - deploys the develop branch, to testnet @ test.beta.near.org 
+`replacements.dev.json` - deploys the develop branch, to testnet @ test.beta.near.org
 
 `replacements.testnet.json` - deploys main branch, to testnet @ test.near.org
 
@@ -85,25 +102,39 @@ Currently, there is no local development environment, so we use [testnet NEAR So
 
 Before deploying the widgets you need to make the needed replacements with references to the account that will host the widgets:
 
+Edit the line in package.json that looks like this:
+
+```json
+"replace": "node ./scripts/replace.js -a devhub.near -c devgovgigs.near -n mainnet",
 ```
-npm run build:preview -- -a devgovgigs.petersalomonsen.near -c devgovgigs.near
+
+to something like this:
+
+```json
+"replace": "node ./scripts/replace.js -a devgovgigs.petersalomonsen.near -c devgovgigs.near -n mainnet",
 ```
 
-Then make sure you stay in the `build` directory when deploying
+Run:
 
+```sh
+npm run build
 ```
+
+Then make sure you stay in the `build` directory when deploying
+
+```sh
 cd build
 ```
 
 To deploy the widgets, we use [`bos` CLI](https://github.com/FroVolod/bos-cli-rs). Start with this command and follow the interactive questionnaire:
 
-```
+```sh
 bos components deploy
 ```
 
 After successful deployment, you will see a full command that could be used to re-deploy the widgets without interactive questionnaire, like this:
 
-```
+```sh
 bos components deploy gigs.frol14.testnet sign-as gigs.frol14.testnet network-config testnet sign-with-macos-keychain send
 ```
 
@@ -123,6 +154,7 @@ There is GitHub Actions automation that deploys all the widgets to [`devgovgigs.
 Thus, once a PR is merged, you should see the new version of the widgets on [DevHub](https://neardevhub.org) in less than 15 seconds.
 
 ### Before Publishing
+
 Before publishing, make sure that you’ve go through this section.
 
 #### Code Style and Formatting
@@ -147,4 +179,4 @@ Sometimes there is a need to deposit extra tokens to cover the widgets’ storag
 bos social-db prepaid-storage deposit
 ```
 
-NOTE: `bos` CLI will interactively ask all the rest of the details to prepare the transaction. 
+NOTE: `bos` CLI will interactively ask all the rest of the details to prepare the transaction.

global.d.ts

@@ -0,0 +1,21 @@
+declare interface BosContext {
+  accountId?: string;
+  networkId: NetworkId;
+  props: object;
+}
+
+declare const Widget: (params: {
+  src: string;
+  props: object;
+}) => React.ReactNode;
+
+declare interface DevHubBaseProps {
+  page: any;
+}
+
+declare var styled = {
+  div,
+  a,
+  ul,
+  span,
+};