Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Modrinth/lib/components/index.js
Sasha Sorokin cb32cca6aa Enable TypeScript support 
This commit enables TypeScript support in Omorphia. It reconfigures
Vite, adds two new TSConfig files as a replacement for the old JSConfig,
adds TypeScript linting to ESLint configuration.

Why?
====

TypeScript has became a standard in modern web development. In makes
JavaScript a more type-safe language, makes code more maintaible and
boosts effeciency by empowering development tools.

What's included in this commit?
===============================

TypeScript config files
-----------------------

Old and plain JSConfig has been replaced with two TSConfigs: one
designed for the code, and the other for the Vite configuration file.

JavaScript support is still enabled, therefore TypeScript files can
import JavaScript files as well, and vice versa. However, it is
recommended that all the new files will be written in TypeScript, and
old files are slowly converted over to TypeScript, so this option can be
disabled in the future, making this a safe TypeScript only project.

UMD output is replaced with CJS
-------------------------------

UMD is an old format that tries to stay compatible with both the Node.js
CJS, as well as Require.js. However, nowadays almost everyone is using a
transpiler where this format won't be beneficial.

To avoid it being a breaking change, it has been replaced with CJS. But
in the future it's worth considering removing CJS output as well and
making Omorphia an ESM module only, as it's designed only to be
consumed by the Modrinth project, and all of these projects are already
ESM-first.

Minification is disabled
------------------------

Because this is a library, the responsibility of minifying its code lies
solely on the consumer. Just like with CJS, all of the supported
consumers of this library are already performing minification, so
minifying this library beforehand is rather wasteful and harmful, as it
negatively impacts debugging experience.

More dependencies are now externalised
--------------------------------------

Disabling UMD output allows more easily externalise dependencies based
on the package.json file, making it way more approachable.

Vue is now a peer dependency
----------------------------

Because this is a component library, Vue is not a direct dependency of
this project. Instead, this library relies on consumer having a Vue as
its dependency.

`lib` is no longer included in package
--------------------------------------

`lib` folder contains sources for the imports, but it's outside of
export map and cannot be imported by the consumers. It is now excluded
from the package to reduce the package size and installation time.

Typings
-------

Consumers of this library should also be able to benefit from the type
safety. To achieve this, there's now a Vite plugin that generates type
declarations that represent the project structure.

To lesser the incompatibility with the consumers, some of the files were
changed to import `index.js` from folders rather than folders
themselves.

While both will work for building, not doing this requires consumer to
opt in to bundler module dependency, whereas if `index.js` is imported,
the consumer can use both the normal ESM / Node16 module resolution, as
well as the bundler module resolution.

ESLint configuration changes
----------------------------

ESLint has been reconfigured to support TypeScript, and include rules
recommended by the TypeScript ESLint package. In the future it would be
good to review the rules and override rules for TypeScript files to
disable rules that would conflict with ones from TypeScript ESLint.

Entry file is now a TypeScript file
-----------------------------------

To test the changes and begin the slow conversion, the entry point file
is now a proper TypeScript file.

SVG imports use `?component` parameter
--------------------------------------

All components are now imported with `?component` URL parameter so that
they have a proper file. By default, Vite imports all files like .svg
as strings containing path to the file.

Unfortunately, `vite-svg-loader` overrides this behaviour without
overriding the Vite import type declaration, leading to incorrect types.
However, it does expose a new parameter `?component`, which is properly
typed and does the same thing you'd expect - export a Vue component, so
most of the SVG imports have been converted to use this parameter.
2023-10-14 15:43:57 +02:00

148 lines
10 KiB
JavaScript
Raw Blame History

export { default as Avatar } from './base/Avatar.vue'
export { default as Badge } from './base/Badge.vue'
export { default as Button } from './base/Button.vue'
export { default as Card } from './base/Card.vue'
export { default as Checkbox } from './base/Checkbox.vue'
export { default as Chips } from './base/Chips.vue'
export { default as Page } from './base/Page.vue'
export { default as Slider } from './base/Slider.vue'
export { default as AnimatedLogo } from './brand/AnimatedLogo.vue'
export { default as TextLogo } from './brand/TextLogo.vue'
export { default as Pagination } from './base/Pagination.vue'
export { default as Modal } from './base/Modal.vue'
export { default as ModalReport } from './base/ModalReport.vue'
export { default as ProjectCard } from './base/ProjectCard.vue'
export { default as Promotion } from './base/Promotion.vue'
export { default as EnvironmentIndicator } from './base/EnvironmentIndicator.vue'
export { default as DropdownSelect } from './base/DropdownSelect.vue'
export { default as FileInput } from './base/FileInput.vue'
export { default as DropArea } from './base/DropArea.vue'
export { default as Toggle } from './base/Toggle.vue'
export { default as CopyCode } from './base/CopyCode.vue'
export { default as Notifications } from './base/Notifications.vue'
export { default as ModalConfirm } from './base/ModalConfirm.vue'
export { default as Breadcrumbs } from './base/Breadcrumbs.vue'
export { default as DropdownButton } from './base/DropdownButton.vue'
export { default as ShareModal } from './base/ShareModal.vue'
export { default as LineChart } from './base/LineChart.vue'
export { default as PieChart } from './base/PieChart.vue'
export { default as BarChart } from './base/BarChart.vue'
export { default as SearchDropdown } from './search/SearchDropdown.vue'
export { default as Categories } from './search/Categories.vue'
export { default as SearchFilter } from './search/SearchFilter.vue'
export { default as NavItem } from './nav/NavItem.vue'
export { default as NavRow } from './nav/NavRow.vue'
export { default as NavStack } from './nav/NavStack.vue'
export { default as PopoutMenu } from './base/PopoutMenu.vue'
export { default as OverflowMenu } from './base/OverflowMenu.vue'
export { default as AlignLeftIcon } from '@/assets/icons/align-left.svg?component'
export { default as ArchiveIcon } from '@/assets/icons/archive.svg?component'
export { default as AsteriskIcon } from '@/assets/icons/asterisk.svg?component'
export { default as BellIcon } from '@/assets/icons/bell.svg?component'
export { default as BellRingIcon } from '@/assets/icons/bell-ring.svg?component'
export { default as BookIcon } from '@/assets/icons/book.svg?component'
export { default as BookmarkIcon } from '@/assets/icons/bookmark.svg?component'
export { default as BoxIcon } from '@/assets/icons/box.svg?component'
export { default as CalendarIcon } from '@/assets/icons/calendar.svg?component'
export { default as ChartIcon } from '@/assets/icons/chart.svg?component'
export { default as CheckIcon } from '@/assets/icons/check.svg?component'
export { default as CheckCircleIcon } from '@/assets/icons/check-circle.svg?component'
export { default as ChevronLeftIcon } from '@/assets/icons/chevron-left.svg?component'
export { default as ChevronRightIcon } from '@/assets/icons/chevron-right.svg?component'
export { default as ClearIcon } from '@/assets/icons/clear.svg?component'
export { default as ClientIcon } from '@/assets/icons/client.svg?component'
export { default as ClipboardCopyIcon } from '@/assets/icons/clipboard-copy.svg?component'
export { default as CodeIcon } from '@/assets/icons/code.svg?component'
export { default as CoinsIcon } from '@/assets/icons/coins.svg?component'
export { default as ContractIcon } from '@/assets/icons/contract.svg?component'
export { default as CopyIcon } from '@/assets/icons/copy.svg?component'
export { default as CopyrightIcon } from '@/assets/icons/copyright.svg?component'
export { default as CurrencyIcon } from '@/assets/icons/currency.svg?component'
export { default as DashboardIcon } from '@/assets/icons/dashboard.svg?component'
export { default as DownloadIcon } from '@/assets/icons/download.svg?component'
export { default as DropdownIcon } from '@/assets/icons/dropdown.svg?component'
export { default as EditIcon } from '@/assets/icons/edit.svg?component'
export { default as ExitIcon } from '@/assets/icons/x.svg?component'
export { default as ExpandIcon } from '@/assets/icons/expand.svg?component'
export { default as ExternalIcon } from '@/assets/icons/external.svg?component'
export { default as EyeIcon } from '@/assets/icons/eye.svg?component'
export { default as EyeOffIcon } from '@/assets/icons/eye-off.svg?component'
export { default as FileIcon } from '@/assets/icons/file.svg?component'
export { default as FileTextIcon } from '@/assets/icons/file-text.svg?component'
export { default as FilterIcon } from '@/assets/icons/filter.svg?component'
export { default as FolderOpenIcon } from '@/assets/icons/folder-open.svg?component'
export { default as FolderSearchIcon } from '@/assets/icons/folder-search.svg?component'
export { default as GapIcon } from '@/assets/icons/gap.svg?component'
export { default as GitHubIcon } from '@/assets/icons/github.svg?component'
export { default as GlobeIcon } from '@/assets/icons/globe.svg?component'
export { default as GridIcon } from '@/assets/icons/grid.svg?component'
export { default as HamburgerIcon } from '@/assets/icons/hamburger.svg?component'
export { default as HammerIcon } from '@/assets/icons/hammer.svg?component'
export { default as HashIcon } from '@/assets/icons/hash.svg?component'
export { default as HeartIcon } from '@/assets/icons/heart.svg?component'
export { default as HeartHandshakeIcon } from '@/assets/icons/heart-handshake.svg?component'
export { default as HistoryIcon } from '@/assets/icons/history.svg?component'
export { default as HomeIcon } from '@/assets/icons/home.svg?component'
export { default as ImageIcon } from '@/assets/icons/image.svg?component'
export { default as InfoIcon } from '@/assets/icons/info.svg?component'
export { default as IssuesIcon } from '@/assets/icons/issues.svg?component'
export { default as LeftArrowIcon } from '@/assets/icons/left-arrow.svg?component'
export { default as LibraryIcon } from '@/assets/icons/library.svg?component'
export { default as LightBulbIcon } from '@/assets/icons/light-bulb.svg?component'
export { default as LinkIcon } from '@/assets/icons/link.svg?component'
export { default as ListIcon } from '@/assets/icons/list.svg?component'
export { default as LockIcon } from '@/assets/icons/lock.svg?component'
export { default as LogInIcon } from '@/assets/icons/log-in.svg?component'
export { default as LogOutIcon } from '@/assets/icons/log-out.svg?component'
export { default as MoonIcon } from '@/assets/icons/moon.svg?component'
export { default as MoreHorizontalIcon } from '@/assets/icons/more-horizontal.svg?component'
export { default as MoreVerticalIcon } from '@/assets/icons/more-vertical.svg?component'
export { default as OmorphiaIcon } from '@/assets/icons/omorphia.svg?component'
export { default as PaintBrushIcon } from '@/assets/icons/paintbrush.svg?component'
export { default as PlayIcon } from '@/assets/icons/play.svg?component'
export { default as PlusIcon } from '@/assets/icons/plus.svg?component'
export { default as ReportIcon } from '@/assets/icons/report.svg?component'
export { default as RightArrowIcon } from '@/assets/icons/right-arrow.svg?component'
export { default as SaveIcon } from '@/assets/icons/save.svg?component'
export { default as ScaleIcon } from '@/assets/icons/scale.svg?component'
export { default as SearchIcon } from '@/assets/icons/search.svg?component'
export { default as SendIcon } from '@/assets/icons/send.svg?component'
export { default as ServerIcon } from '@/assets/icons/server.svg?component'
export { default as SettingsIcon } from '@/assets/icons/settings.svg?component'
export { default as ShieldIcon } from '@/assets/icons/shield.svg?component'
export { default as SlashIcon } from '@/assets/icons/slash.svg?component'
export { default as StarIcon } from '@/assets/icons/star.svg?component'
export { default as StopCircleIcon } from '@/assets/icons/stop-circle.svg?component'
export { default as SunIcon } from '@/assets/icons/sun.svg?component'
export { default as SunriseIcon } from '@/assets/icons/sunrise.svg?component'
export { default as TagIcon } from '@/assets/icons/tag.svg?component'
export { default as TagsIcon } from '@/assets/icons/tags.svg?component'
export { default as TerminalSquareIcon } from '@/assets/icons/terminal-square.svg?component'
export { default as TransferIcon } from '@/assets/icons/transfer.svg?component'
export { default as TrashIcon } from '@/assets/icons/trash.svg?component'
export { default as UndoIcon } from '@/assets/icons/undo.svg?component'
export { default as UnknownIcon } from '@/assets/icons/unknown.svg?component'
export { default as UnknownDonationIcon } from '@/assets/icons/unknown-donation.svg?component'
export { default as UpdatedIcon } from '@/assets/icons/updated.svg?component'
export { default as UploadIcon } from '@/assets/icons/upload.svg?component'
export { default as UserIcon } from '@/assets/icons/user.svg?component'
export { default as UserPlusIcon } from '@/assets/icons/user-plus.svg?component'
export { default as UserXIcon } from '@/assets/icons/user-x.svg?component'
export { default as UsersIcon } from '@/assets/icons/users.svg?component'
export { default as VersionIcon } from '@/assets/icons/version.svg?component'
export { default as WikiIcon } from '@/assets/icons/wiki.svg?component'
export { default as XIcon } from '@/assets/icons/x.svg?component'
export { default as XCircleIcon } from '@/assets/icons/x-circle.svg?component'
export { default as MailIcon } from '@/assets/icons/mail.svg?component'
export { default as ShareIcon } from '@/assets/icons/share.svg?component'
export { default as MastodonIcon } from '@/assets/external/mastodon.svg?component'
export { default as RedditIcon } from '@/assets/external/reddit.svg?component'
export { default as TwitterIcon } from '@/assets/external/twitter.svg?component'
export { default as ModrinthIcon } from '@/assets/branding/logo.svg?component'
Reference in New Issue View Git Blame Copy Permalink