feat: expose wrapped (Fast) React components by mattrothenberg · Pull Request #300 · microsoft/vscode-webview-ui-toolkit

mattrothenberg · 2021-11-17T17:24:06Z

Link to relevant issue

This pull request resolves #299

Description of changes

This PR adds the ability for users to import wrapped React components directly from a subdirectory of the @vscode/webview-ui-toolkit package thusly:

import { VSCodeButton, VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react'

Specifically, this PR:

Adds a src/react/index.ts file which exports wrapped versions of all of the components in this library

import React from 'react';
import {provideReactWrapper} from '@microsoft/fast-react-wrapper';
import {provideFASTDesignSystem} from '@microsoft/fast-components';

import { vsCodeBadge } from '..'

const {wrap} = provideReactWrapper(React, provideFASTDesignSystem());

export const VSCodeBadge = wrap(vsCodeBadge());
// ETCETERA

Adds a tsconfig-react.json and (supporting NPM script) to package up the aforementioned file.

// package.json
"build:react": "tsc -p ./tsconfig-react.json",

Proposes a modification to our build process, such that users can import directly from the react subdirectory. 🚨 Please note that this requires a significant change to the build process. 🚨

Specifically, the steps are:

After building both the regular components and the React wrapped components, copying a stub version of the package.json file to the /dist directory. This stub file is a mirror image of the original package.json with the exception of the values in the main and types fields losing their /dist prefix.
2.cding into the /dist directory and running publish from within there. This ensures that the built files that end up being distributed on NPM have a flat structure (rather than a nested dist directory) 👇

Old, Nested Directory structure

@vscode/webview-ui-toolkit/
├─ dist/
│  ├─ esm/
│  ├─ dst/
├─ package.json

In this old world, the main file was /dist/esm/index.js.

New, Flattened Directory structure

@vscode/webview-ui-toolkit/
├─ package.json
├─ react/
├─ dst/
├─ esm/

In this new world, the main file is /esm/index.js, but users can also import directly from react/index.js.

There are likely less kludgy ways of doing this, but this seems to work 🤷 .

Finally, I'd like to follow-up this PR by building a Storybook dedicated solely to the wrapped React components. As far as I an tell, it's extremely difficult (if not impossible) to use multiple frameworks within a single Storybook instance. It is possible, however, to "compose" storybooks via the following API https://storybook.js.org/docs/react/workflows/storybook-composition. To that end, once this PR is merged and once I have the other Storybook set up, I will update the Storybook here to pull in the published React SB instance.

ghost · 2021-11-17T17:24:18Z

All CLA requirements met.

mattrothenberg · 2021-11-19T17:52:56Z

cc @hawkticehurst ! I wasn't able to add you as a reviewer

hawkticehurst

Finally had a free moment to take a closer pass on this PR and it's looking great!

Left a couple of comments asking for changes and some minor nits when you're back in the office, but super excited with the progress! Thank you again for the help.

mattrothenberg · 2021-12-06T14:54:56Z

@hawkticehurst All feedback addressed! I've tested that the build works locally, though I'm confused about one thing.

I've been testing locally with a tool called yalc by doing the following:

Running npm run build
cding into the dist directory
Running yalc publish

(You'll recall that in this new world, we have to publish from within the dist directory otherwise we won't get the subdirectory imports. I wish there was a better way of doing this 🤔 )

Unfortunately the latter yalc publish command consistently fails when the prepublishOnly script is present in the project's package.json, since that script triggers the build command again and fails to find the rollup.config.js file (since we're in dist at this point, not root).

Any thoughts here?

hawkticehurst · 2021-12-06T19:36:38Z

Any thoughts here?

Hmm, it's probably just a case of removing the prepublishOnly script for the time being (with the assumption that at some point TypeScript will eventually ship the feature that would make exporting subdirectory type info way easier) and manually run npm run build before I publish. I only had the pre-publish script as a contingency in case I ever forgot to build before publishing but I've done pretty well so far.

With that said, I could envision potentially doing something fancy with the npm --prefix flag, so I can do some experiments today. And in the meantime, I think removing the prepublishOnly script is fine (assuming that fixes the problem).

hawkticehurst · 2021-12-06T19:37:53Z

(You'll recall that in this new world, we have to publish from within the dist directory otherwise we won't get the subdirectory imports. I wish there was a better way of doing this 🤔 )

Lol thanks for the reminder, I had forgotten about that. But yeah we can manage for now and hopefully the ability to export subdirectory type info will land sooner versus later 😪.

hawkticehurst

Changes look and function great! Thank you!

While reviewing I did catch two more things that I left comments on.

pwang347 · 2021-12-31T02:40:51Z

@hawkticehurst Hi Hawk! I read through the discussions in the fast repo, and was just wondering if there's an ETA on getting the stop-gap solution merged. We're currently hoping to adopt the toolkit (in React) to try it out as early as possible.

hawkticehurst · 2021-12-31T03:31:36Z

@pwang347 Hi Paul! I'd wager publishing a set of React components (i.e. this PR) is probably still two or so weeks out.

However, if you're really eager and can't wait to get up and running I could decidedly have the stop-gap solution mentioned in those issue threads published first thing next week, which would unblock the ability for toolkit users to wrap the web components themselves (I would, of course, give some guidance on how to do that properly).

Then once this PR lands (which will do the job of wrapping components for toolkit users) you could simply remove your wrapping code and switch to importing React components directly.

Lemme know if that's something you would be interested in or if you'd rather wait for this PR. :)

pwang347 · 2021-12-31T07:16:46Z

@hawkticehurst Sounds good! Yes, I think even with the added manual wrapping, having the stopgap solution in the meantime to unblock would be great (if it's not too much trouble for you). Appreciate the fast response, thanks!

hawkticehurst · 2022-01-05T01:47:56Z

@hawkticehurst Sounds good! Yes, I think even with the added manual wrapping, having the stopgap solution in the meantime to unblock would be great (if it's not too much trouble for you). Appreciate the fast response, thanks!

@pwang347 the temporary solution has been published and a quick summary/guide on the update has been posted here (decided to put it in a thread with a higher visibility conversation about the ongoing React work).

Hope that helps unblock you and feel free to open GH issues with any questions or problems you run into!

pwang347 · 2022-01-05T18:09:14Z

@hawkticehurst this is great, will give it a try today or tomorrow! thanks again!

mattrothenberg · 2022-01-05T18:10:25Z

Latest changes from main have been merged in 👍

hawkticehurst · 2022-01-05T18:12:13Z

@hawkticehurst this is great, will give it a try today or tomorrow! thanks again!

Great, let us know how it goes!

pwang347 · 2022-01-06T18:28:12Z

@hawkticehurst this is great, will give it a try today or tomorrow! thanks again!

Great, let us know how it goes!

Gave it a try, and so far everything seems to be working great (plugged it into the app, events were working and things felt good)! Only issue I ran into was microsoft/fast#5198, but was able to resolve it with the skipLibCheck workaround.

hawkticehurst · 2022-01-06T23:35:42Z

Gave it a try, and so far everything seems to be working great (plugged it into the app, events were working and things felt good)! Only issue I ran into was microsoft/fast#5198, but was able to resolve it with the skipLibCheck workaround.

That's great to hear! Also wasn't aware of this issue so thanks for mentioning it/giving a heads up!

hawkticehurst · 2022-01-06T23:54:51Z

Also wasn't aware of this issue so thanks for mentioning it/giving a heads up!

After reading through, I realize I was actually aware of this so thank you for the reminder!

hawkticehurst · 2022-01-06T23:56:26Z

And just to be super clear in case others run into this problem--you got this issue because you are using a TS version >4.3.5?

pwang347 · 2022-01-10T20:26:41Z

And just to be super clear in case others run into this problem--you got this issue because you are using a TS version >4.3.5?

Apologies for the late reply, yes I am using 4.4.4!

hawkticehurst

Looks fantastic, left some notes/requests for final polish but I think we're basically there!

…building the React components

…it scripts

… over new react build dir

…r script

hawkticehurst · 2022-01-25T19:10:49Z

Incredible work @mattrothenberg! Thank you again for helping make this a reality!

hawkticehurst · 2022-01-26T21:49:31Z

@pwang347 I'm sure you probably saw already, but in case you didn't as of v0.9.0 we finally shipped the React components if you would like to use them.

You should be able to remove the file that wraps components (and uninstall the fast-react-wrapper package) and instead replace it with import statements along these lines and it should just work:

import { VSCodeButton, VSCodeDropdown } from '@vscode/webview-ui-toolkit/react';

Let me know if you have any questions!

pwang347 · 2022-01-28T20:20:45Z

@hawkticehurst @mattrothenberg This is great, thank you!

mattrothenberg marked this pull request as ready for review November 19, 2021 14:53

hawkticehurst self-requested a review November 19, 2021 18:26

hawkticehurst mentioned this pull request Nov 23, 2021

Create React-based hello-world Sample Extension microsoft/vscode-webview-ui-toolkit-samples#41

Merged

HuihuiWu-Microsoft mentioned this pull request Nov 29, 2021

Use the Webview UI Toolkit for Visual Studio Code for webview UI OfficeDev/microsoft-365-agents-toolkit#2661

Closed

hawkticehurst reviewed Nov 29, 2021

View reviewed changes

Comment thread package.json Outdated

hawkticehurst suggested changes Dec 2, 2021

View reviewed changes

hawkticehurst reviewed Dec 6, 2021

View reviewed changes

Comment thread src/react/index.ts Outdated

Comment thread src/react/index.ts Outdated

hawkticehurst assigned clocky and unassigned clocky Dec 8, 2021

hawkticehurst added this to the January 2022 milestone Dec 8, 2021

hawkticehurst added the enhancement New feature or request label Dec 8, 2021

hawkticehurst assigned mattrothenberg Dec 8, 2021

mattrothenberg mentioned this pull request Jan 7, 2022

feat: document wrapped React components #312

Closed

11 tasks

Matt Rothenberg added 7 commits January 24, 2022 11:30

fix: rename react tsconfig

bc4a8cf

fix: move script to dedicated dir

f225fd6

fix: remove unused script

6b201e4

feat: add comments

42c4ecb

bump FAST dependencies to latest

b238013

fix: manually register certain events

89ffc27

feat: manually specify names

8c46506

hawkticehurst approved these changes Jan 24, 2022

View reviewed changes

Comment thread scripts/copy-pkg-json.js Outdated

Comment thread scripts/copy-pkg-json.js Outdated

Comment thread src/react/index.ts Outdated

Comment thread src/react/index.ts Outdated

Matt Rothenberg and others added 17 commits January 24, 2022 14:18

feat: wrap copy script in try/catch

c85751d

fix: add separate try/catch blocks

5e284e3

fix: alphabetize imports

7ce6c9f

fix: explicit import path

320beca

fix: lint

8ff23a3

wip: change up build strategy, modify React tsconfig

fff41a6

Add tsconfig.eslint.json to npm ignore file

d0775e9

Add prettier override for all JS files in the scripts directory

4a07d1d

Delete tsconfig.react.json

eb16e13

Update outDir and declarationDir, as well as make it responsible for …

99cfb32

…building the React components

Update api extractor config to reflect new TS declarationDir path

916c0cf

Update various ignore config files to include the react build directory

2e39d49

Update package.json build scripts, main field, and types field

089d756

Create a file containing utility functions that are used across toolk…

a25eb30

…it scripts

Update setup webview test env script to use helper functions and copy…

df516f9

… over new react build dir

Replace copy-pkg-json script with move-react-build-dir script

0f7fd87

Update developer note and fix formatting error in move-react-build-di…

444ef7e

…r script

hawkticehurst merged commit cc58b83 into microsoft:main Jan 25, 2022

hawkticehurst deleted the mr/wrapped-react-components branch January 26, 2022 21:49

Uh oh!

Conversation

mattrothenberg commented Nov 17, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Link to relevant issue

Description of changes

Uh oh!

ghost commented Nov 17, 2021 • edited by ghost Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mattrothenberg commented Nov 19, 2021

Uh oh!

Uh oh!

hawkticehurst left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mattrothenberg commented Dec 6, 2021

Uh oh!

hawkticehurst commented Dec 6, 2021

Uh oh!

hawkticehurst commented Dec 6, 2021

Uh oh!

hawkticehurst left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

pwang347 commented Dec 31, 2021

Uh oh!

hawkticehurst commented Dec 31, 2021

Uh oh!

pwang347 commented Dec 31, 2021

Uh oh!

hawkticehurst commented Jan 5, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pwang347 commented Jan 5, 2022

Uh oh!

mattrothenberg commented Jan 5, 2022

Uh oh!

hawkticehurst commented Jan 5, 2022

Uh oh!

pwang347 commented Jan 6, 2022

Uh oh!

hawkticehurst commented Jan 6, 2022

Uh oh!

hawkticehurst commented Jan 6, 2022

Uh oh!

hawkticehurst commented Jan 6, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pwang347 commented Jan 10, 2022

Uh oh!

hawkticehurst left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hawkticehurst commented Jan 25, 2022

Uh oh!

hawkticehurst commented Jan 26, 2022

Uh oh!

pwang347 commented Jan 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

mattrothenberg commented Nov 17, 2021 •

edited

Loading

ghost commented Nov 17, 2021 •

edited by ghost

Loading

hawkticehurst commented Jan 5, 2022 •

edited

Loading

hawkticehurst commented Jan 6, 2022 •

edited

Loading

pwang347 commented Jan 28, 2022 •

edited

Loading