Comments (5)
I think the best option is example 2
from qwik-ui.
With respect to Example 1, I came across this while looking into whether it could be tree-shaken properly:
evanw/esbuild#1420
So if I'm understanding correctly, if we do end up going for Example 1's syntax, for tree-shaking to work correctly, imports will have to originate from the file where the component is implemented.
Currently, the Select component is imported like so:
Implementation is exported via an index file:
// packages/headless/src/index.ts aliased as '@qwik-ui/headless'
export * as Select from './components/select/select'
and then imported for usage:
import { component$ } from '@builder.io/qwik'
import { Select } from '@qwik-ui/headless'
export default component$(() => {
return (
<Select.Root>
<Select.Trigger />
<Select.ListBox />
</Select.Root>
)
})
For it to be tree-shaken correctly, I believe @qwik-ui/headless
would have to be aliased to packages/headless/src/components
and then usage would be changed slightly such that importing is done like so:
import { component$ } from '@builder.io/qwik'
// select.tsx could be renamed index.tsx for it to be terser
// will become '@qwik-ui/headless/select' instead
import * as Select from '@qwik-ui/headless/select/select'
export default component$(() => {
return (
<Select.Root>
<Select.Trigger />
<Select.ListBox />
</Select.Root>
)
})
Personally, I prefer Example 1 as I find it a little nicer to not have to import multiple components. A little added benefit is that as I type Select.
, right after the period, I would get auto-complete for all the sub-components that make up the entire Select.
from qwik-ui.
Is example 1 tree-shakable and the other examples not?
from qwik-ui.
The difference between Example 2 and 3 is really just naming. Both are tree-shakable by default as each sub-component is its own export and the usage model for both of them would look like this:
import { component$ } from '@builder.io/qwik'
import {
SelectRoot,
SelectTrigger,
SelectListBox
} from '@qwik-ui/headless'
// note that it doesn't have to be re-aliased like what I elaborated previously
// but you do have to import each sub-component individually
export default component$(() => {
return (
<SelectRoot>
<SelectTrigger />
<SelectListBox />
</SelectRoot>
)
})
Example 1 exports the sub-components as an object which is why it needs to be imported directly from the file where it is implemented or tree-shaking doesn't work. (this is assuming I understand evanw/esbuild#1420 correctly)
from qwik-ui.
I see, thanks for the clarification.
With this information I can say: I think we should use the example 2 style.
from qwik-ui.
Related Issues (20)
- select doesn't work on mobile and desktop HOT 5
- Inputs roadmap HOT 8
- feat(combobox): create combobox component HOT 1
- do we need an icons folder? HOT 4
- Refactor from using deprecated API HOT 1
- Fix css?inline imports warnings
- feat(password): create password component HOT 9
- feat(badge) Make the badge more accessible HOT 3
- Finalize Pagination component HOT 1
- Finalize Tabs component HOT 2
- Refactor Select to use the correct naming convention for its sub components
- make a11y work in the CI and jest cli HOT 4
- Finalize Tooltip component
- Finalize Accordion component
- Adding testing coverage reports
- Verify the responsiveness of the website
- Finalize Popover component HOT 1
- Bug - Qwik UI docs site goes blank on refresh HOT 1
- Insufficient Contrast in PreviewCodeExample TabPanels in Light Mode HOT 4
- feat(credit card): create credit card component
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from qwik-ui.