TypeScript Support branch #223

tarrball · 2021-12-26T16:51:33Z

@nukemandan This PR migrates the template over to TypeScript (addressing issue #205).

Couple issues of note:

Some types are added as any to make the linter/compiler happy. It would be nice to clean these up and make the TS config more strict, but that will be a larger time investment.
TS(X) filenames now begin with a lowercase letter to match TS conventions (but could be swapped back to beginning with an uppercase letter if desired).
Spacing within curly brackets in React templates seemed to have some inconsistencies, so I went with the lint rule of "always" adding spaces in curly brackets. This could be turned off. I don't care, as long as it's consistent.

src/__tests__/app.tsx

KiChjang · 2021-12-26T20:23:22Z

Great work so far in getting the codebase to compile under TypeScript! As you did note, most of the important arguments and parameters are lacking proper typing, and as such we're not really leveraging the most out of TypeScript yet. Do you plan to work on typifying those in this PR?

tarrball · 2021-12-26T20:37:33Z

@KiChjang completely agree. I am certainly willing to work on adding proper types in this PR.

Great work so far in getting the codebase to compile under TypeScript! As you did note, most of the important arguments and parameters are lacking proper typing, and as such we're not really leveraging the most out of TypeScript yet. Do you plan to work on typifying those in this PR?

KiChjang · 2021-12-27T04:50:21Z

Hmm... on second thought, it may be better to open a new PR just for the typings, as the current PR already has quite a lot of lines changed, and would increase the review burden. I certainly would want to have your PRs reviewed and merged ASAP, so perhaps this is the better way.

kamikazebr · 2021-12-27T23:38:54Z

Need more review or you will take that @KiChjang? Let me know.

src/interactor.tsx

src/nodeInfo.tsx

src/substrate-lib/components/txButton.tsx

KiChjang · 2021-12-28T08:55:53Z

src/substrate-lib/substrateContext.tsx

@@ -111,9 +111,9 @@ const loadAccounts = (state, dispatch) => {
  asyncLoadAccounts();
 };

-const SubstrateContext = React.createContext();
+const SubstrateContext = React.createContext(undefined);


Does the compiler complain if you leave out the undefined parameter?

Yes, React.createContext() requires 1 parameter (a default value). So passing in undefined here should have the exact same behavior, as I understand it.

KiChjang · 2021-12-28T08:57:53Z

src/templateModule.tsx

-  const [currentValue, setCurrentValue] = useState(0);
-  const [formValue, setFormValue] = useState(0);
+  const [currentValue, setCurrentValue] = useState('0');
+  const [formValue, setFormValue] = useState('0');


I suspect TypeScript isn't happy about the state being both a string and a number, hence why you had to change the argument to a '0', correct?

That is correct

KiChjang · 2021-12-28T09:03:42Z

@kamikazebr I appreciate the volunteering! I've been writing Rust for a while, so my knowledge of the TypeScript setup is a little rusty (no pun intended). As far as I remember, one can configure TypeScript compiler to operate in many ways, such as compiling first to JS via babel to achieve browser compatibility, or use TS files directly to serve pages. I haven't really figured out what the best strategy to use yet, so perhaps you could review that part and offer your opinions.

I'd also like to ask other maintainers like @nukemandan and see what they prefer for the TS compilation strategy.

wirednkod · 2022-01-20T09:43:25Z

Okay, that makes sense. I think I'm just confused about this branch (tarrball:main) and how it fits in with the new branch you created (ts/main). Are you suggesting scrapping this PR and starting new branches off ts/main to work on the migration more iteratively going forward?

@jimmychu0807 created the PR. The idea of having 1 PR that smaller ones will be point to is good, but not sure if it is mandatory.

* Remove the traces on custom type and update to based on Node v16 * webpack 5 migration * Rm eslint related dev-dependencies & use URLSearchParams over querystring * Updated to the latest polkadot-js libs * Integrate with prettier * Friendlier connection failure message. * Refactored current selected account into SubstrateContext * bugfix * Fix console warning * Update README * Update to solve a yarn berry issue

jimmychu0807 · 2022-01-20T10:07:48Z

@tarrball yes. I mean to retarget the PR to ts/main branch. Then this branch can be improved iteratively for a period of time (thinking of within a month of time) and doesn't have to get everything right at first, such as getting all the types right, before get merged into this "feature branch". Then this feature branch will eventually be merged into main.

@wirednkod @kamikazebr maintaining both js and ts is not my intention as well. As mentioned above, we probably maintain BOTH branches only for a short period of time, say a month or less, and then once the ts version got tested and stablized, it will be merge into main.

For maintenance, I suggest that for those prefer js, they can download the monthly-2022-01 tagged version or go back the git history and use this version of FE templ. I foresee by monthly-2022-03 (if not earlier), FE template will likely switch to ts.

Btw, I made an improvement in the PR #225 that the currentAccount got moved into the SubstrateContext also. So the selected account can be retrieved from the context and doesn't have to be passed around. There are multiple misc fixes also, thus the code conflicts arised.

Substrate developer hub main

tarrball · 2022-01-21T02:33:36Z

Merged in updates from #225 & resolved conflicts. There's still some issues building TypeScript with the newly added react-app-rewired package from that PR to work through.

jimmychu0807 · 2022-01-26T08:34:15Z

@tarrball thank you for the effort of translating the project to ts version. The code is merged to ts/main.

sebastiendan · 2022-07-22T22:03:00Z

The project is not building for me on the ts/main branch:

$ yarn build

Failed to compile.

Module not found: Error: Can't resolve './App' in '/path/to/substrate-frontend-template/src'

tarrball and others added 18 commits December 16, 2021 18:39

Updating packages and changing js files to ts

1505ef6

Updated yarn.lock

ebd0c33

Fixing ts config errors

612cb17

More yarn updates

23385c1

Dropping eslint stuff

785aba1

Downgrading some packages

3881854

Fixing runtime errors

b6669d8

Remove comment

ffb61c6

Adding eslint back in

7c175f8

Lint fixes

d922561

Fixing eslint errors

a39c504

Fixing remaining lint errors

2441182

Adding in semicolon rule

c7ba65f

Yarn typescript build fixes

b84029d

Merge branch 'substrate-developer-hub:main' into main

981a599

Adjusting lint rules to match original template

5fb1018

Merge branch 'main' of https://github.com/tarrball/substrate-front-en…

8f946da

…d-template into main

Fixing app.tsx spec to pass test run and linter

46dc8fd

tarrball mentioned this pull request Dec 26, 2021

Typescript Support #205

Open

KiChjang reviewed Dec 26, 2021

View reviewed changes

src/__tests__/app.tsx Show resolved Hide resolved

KiChjang reviewed Dec 28, 2021

View reviewed changes

src/interactor.tsx Outdated Show resolved Hide resolved

KiChjang reviewed Dec 28, 2021

View reviewed changes

src/nodeInfo.tsx Outdated Show resolved Hide resolved

KiChjang reviewed Dec 28, 2021

View reviewed changes

src/substrate-lib/components/txButton.tsx Outdated Show resolved Hide resolved

KiChjang reviewed Dec 28, 2021

View reviewed changes

tarrball changed the base branch from main to ts/main January 20, 2022 22:58

tarrball and others added 22 commits January 20, 2022 17:34

Merging main

2b6bf36

More merging main

9b8a3c2

More merging main

7909cb5

yarn.lock update

9aa6f63

More merging main

28a1fef

Rename accountSelector.tsx to AccountSelector.tsx

e86fe88

Rename app.tsx to App.tsx

01acf01

Rename balances.tsx to Balances.tsx

ffc93a9

Rename blockNumber.tsx to BlockNumber.tsx

ba42619

Rename events.tsx to Events.tsx

5ce56e2

Rename interactor.tsx to Interactor.tsx

3e7c91b

Rename metadata.tsx to Metadata.tsx

0401ba9

Rename nodeInfo.tsx to NodeInfo.tsx

5eabdd6

Rename templateModule.tsx to TemplateModule.tsx

813d0cc

Rename transfer.tsx to Transfer.tsx

c8228b1

Rename upgrade.tsx to Upgrade.tsx

458fd92

Rename substrateContext.tsx to SubstrateContext.tsx

4cc2c6a

Rename developerConsole.ts to DeveloperConsole.ts

e2833f2

Rename txButton.tsx to TxButton.tsx

4680059

Lint issues

f254f55

More linting

1f56661

Merge pull request #5 from tarrball/substrate-developer-hub-main

49ed424

Substrate developer hub main

jimmychu0807 merged commit d57b8b3 into jimmychu0807:ts/main Jan 26, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeScript Support branch #223

TypeScript Support branch #223

tarrball commented Dec 26, 2021

KiChjang commented Dec 26, 2021

tarrball commented Dec 26, 2021

KiChjang commented Dec 27, 2021

kamikazebr commented Dec 27, 2021

KiChjang Dec 28, 2021

tarrball Dec 28, 2021 •

edited

Loading

KiChjang Dec 28, 2021

tarrball Dec 28, 2021 •

edited

Loading

KiChjang commented Dec 28, 2021

wirednkod commented Jan 20, 2022

jimmychu0807 commented Jan 20, 2022 •

edited

Loading

tarrball commented Jan 21, 2022

jimmychu0807 commented Jan 26, 2022

sebastiendan commented Jul 22, 2022

TypeScript Support branch #223

TypeScript Support branch #223

Conversation

tarrball commented Dec 26, 2021

KiChjang commented Dec 26, 2021

tarrball commented Dec 26, 2021

KiChjang commented Dec 27, 2021

kamikazebr commented Dec 27, 2021

KiChjang Dec 28, 2021

Choose a reason for hiding this comment

tarrball Dec 28, 2021 • edited Loading

Choose a reason for hiding this comment

KiChjang Dec 28, 2021

Choose a reason for hiding this comment

tarrball Dec 28, 2021 • edited Loading

Choose a reason for hiding this comment

KiChjang commented Dec 28, 2021

wirednkod commented Jan 20, 2022

jimmychu0807 commented Jan 20, 2022 • edited Loading

tarrball commented Jan 21, 2022

jimmychu0807 commented Jan 26, 2022

sebastiendan commented Jul 22, 2022

tarrball Dec 28, 2021 •

edited

Loading

tarrball Dec 28, 2021 •

edited

Loading

jimmychu0807 commented Jan 20, 2022 •

edited

Loading