Add Component CSS imports to state #402
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tmeyer2115
reviewed
Oct 10, 2023
packages/studio-plugin/src/orchestrators/ParsingOrchestrator.ts
Outdated
Show resolved
Hide resolved
packages/studio-plugin/src/orchestrators/ParsingOrchestrator.ts
Outdated
Show resolved
Hide resolved
This PR adds an Info icon to the right of the Prop Name when the Prop has a Tooltip. The anchor of the Tooltip is now the Info Icon. To do this, I created a new common Component called TooltipIcon representing the combination of an `Icon` and a `Tooltip`. I added visual regression coverage for Prop Tooltips as well, we were missing it. J=SLAP-2952 TEST=auto
This PR adds an Info icon to the right of the Prop Name when the Prop has a Tooltip. The anchor of the Tooltip is now the Info Icon. To do this, I created a new common Component called TooltipIcon representing the combination of an `Icon` and a `Tooltip`. I added visual regression coverage for Prop Tooltips as well, we were missing it. J=SLAP-2952 TEST=auto
nmanu1
reviewed
Oct 10, 2023
packages/studio-plugin/src/orchestrators/ParsingOrchestrator.ts
Outdated
Show resolved
Hide resolved
nmanu1
reviewed
Oct 11, 2023
packages/studio-plugin/src/orchestrators/ParsingOrchestrator.ts
Outdated
Show resolved
Hide resolved
nmanu1
reviewed
Oct 11, 2023
packages/studio-plugin/tests/__fixtures__/ParsingOrchestrator/src/components/Card.tsx
Show resolved
Hide resolved
packages/studio-plugin/src/orchestrators/ParsingOrchestrator.ts
Outdated
Show resolved
Hide resolved
nmanu1
reviewed
Oct 11, 2023
nmanu1
reviewed
Oct 11, 2023
In Vite, your project's dependencies are pre-bundled before the Dev server loads your site. As an optimization, Vite allows these bundled dependencies to be cached. If a dependency hasn't changed, Vite does not need to pre-bundle it again. See details here: https://vitejs.dev/guide/dep-pre-bundling.html#caching. Unfortunately, this caching behavior is causing significant problems in Storm (https://yext.slack.com/archives/C03F59PCJRK/p1696964495301699). In this PR, I remove the cache optimization from Studio's Vite instance. This is done by running Vite with `--force`. Although it wasn't strictly necessary, I also removed `optimizeDeps` from the Vite Config. Dependencies will always be pre-bundled whenever Studio starts up. Removing this optimization, I did not notice a big drop in performance locally. J=SLAP-2961 TEST=manual I ran this new version of Studio against the Test Site. I verified none of the cached dependencies were used and that Studio started up as expected. --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
## Features - When specifying a Component's Prop Interface, you can now use the `extends` keyword. (#395) ## Changes - Cached, pre-bundled dependencies are now ignored when starting Studio. Studio's Vite instance will pre-bundle all dependencies each time Studio is started. (#405) - Props with a Tooltip now have an Info Icon (#403) ## Fixes - Incorrect imports for commonly-named Components have been fixed. (#398)
alextaing
force-pushed
the
feature/css-in-iframe
branch
from
7eb5f36
to
daa09d1
Compare
nmanu1
reviewed
Oct 11, 2023
packages/studio-plugin/tests/__fixtures__/ParsingOrchestrator/src/components/Card.tsx
Show resolved
Hide resolved
alextaing
added a commit
that referenced
this pull request
Oct 17, 2023
This PR adds a list in `ComponentMetadata` of the file paths to the CSS files that each component imports. In `ComponentFile`, a dependency tree is used to find all transitive CSS for each component. The `dependency-tree` library allows for optimization by passing in already parsed dependency trees, so component tree is formed in Parsing Orchestrator so that previous dependencies can be accessed. J=SLAP-2912 TEST=auto,manual
alextaing
added a commit
that referenced
this pull request
Oct 17, 2023
This PR adds a list in `ComponentMetadata` of the file paths to the CSS files that each component imports. In `ComponentFile`, a dependency tree is used to find all transitive CSS for each component. The `dependency-tree` library allows for optimization by passing in already parsed dependency trees, so component tree is formed in Parsing Orchestrator so that previous dependencies can be accessed. J=SLAP-2912 TEST=auto,manual
alextaing
added a commit
that referenced
this pull request
Oct 17, 2023
This PR adds a list in `ComponentMetadata` of the file paths to the CSS files that each component imports. In `ComponentFile`, a dependency tree is used to find all transitive CSS for each component. The `dependency-tree` library allows for optimization by passing in already parsed dependency trees, so component tree is formed in Parsing Orchestrator so that previous dependencies can be accessed. J=SLAP-2912 TEST=auto,manual
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds a list in
ComponentMetadataof the file paths to the CSS files that each component imports. InComponentFile, a dependency tree is used to find all transitive CSS for each component. Thedependency-treelibrary allows for optimization by passing in already parsed dependency trees, so component tree is formed in Parsing Orchestrator so that previous dependencies can be accessed.J=SLAP-2912
TEST=auto,manual