The future of @sveltejs/package

[Rich-Harris]

Update - implemented

See #8922 for details on how to migrate

Original description

Many of you are using @sveltejs/package to generate Svelte libraries. For the uninitiated, it provides a svelte-package command that takes a directory as input — defaulting to src/lib — and turns it into output suitable for publishing to npm. That means that .ts files are converted to .js, and .svelte files that rely on preprocessors (TypeScript, SASS etc) are turned into 'vanilla' (but uncompiled) Svelte components. It also generates .d.ts files, so that users of your library get type safety and autocompletion and what-have-you.

It also does something slightly controversial: it generates a package.json for your library by copying over a subset of your authored package.json and including an exports map, which is the preferred modern way to declare what can be imported from your package. This was designed to make publishing packages convenient, but in practice it has had the opposite effect — it's finicky to publish from a subdirectory, and monorepo tooling often freaks out about the generated package.json file. We're not the first people to do this — Angular does something similar — but that doesn't make it a good idea.

(Speaking of monorepos, the current approach makes it very awkward to use packages created with svelte-package inside the same monorepo — you can't use e.g. "my-library": "workspace:^" because that will point to the package root rather than the generated directory. Instead you have to a) manually specify exports that point at src/lib and somehow prevent drift, or b) use hacky overrides. It's a mess.)

One solution to the problems caused by this approach would be to offer more customisation over the package.json — we currently expose config.package.exports and config.package.files options (documented here, albeit tucked away), and #8808 implements that idea.

But I think we should probably reconsider the whole approach, rather than doubling down on it.

---

Here's what I propose: radical simplification. We continue to do the src/lib -> dest transformation, but instead of generating a package.json for you, we simply validate that the one you authored is well-formed (i.e. your exports map points at real files in dist, and your files array will include everything imported by the things found in exports, etc). We might not even need to do the validation in-house — we could simply add publint to the library template and include it in the prepublishOnly script:

"scripts": {
  "dev": "vite dev",
  "build": "vite build && npm run package",
  "package": "svelte-package",
  "package:watch": "svelte-package --watch",
  "prepublishOnly": "npm run package && publint"
}

The obvious downside is that no-one wants to bother setting up exports. But this is something you only touch rarely, and the current approach — hope that svelte-package is accidentally doing the right thing — is hardly optimal. Packages that accept the default behaviour are likely exporting things that shouldn't be exported. By forcing people to be conscious and explicit we will improve the overall quality of the ecosystem, and by teaching people how to use exports and use publint we will alleviate the problem of invalid packages being published to npm.

Since this would be a fairly major departure, we'd want to provide an npx svelte-migrate package command.

---

For some people, a src/lib -> dist step might be overkill. It's only really necessary if you're using .ts files and lang="ts" in your .svelte files (or SASS, etc). If you're not doing that, you could just point your exports at src/lib. An advantage of doing this is that you don't need to run svelte-package to be able to use the library in another project — this is how I write all my non-Svelte libraries and it's bliss.

But it's still helpful to generate types for consumers. I typically do this with tsc — for example the types directory in this package is generated from the JSDoc annotations in the .js source code — and it would be nice to be able to do the same thing for Svelte libraries.

To that end, perhaps — in addition to the simpler svelte-package command outlined above — we could also have something like this...

svelte-package --declaration=types

...which you'd use with exports like these:

"exports": {
  "./Thing.svelte": {
    "types": "./types/Thing.svelte.d.ts",
    "svelte": "./src/lib/Thing.svelte",
    "default "./src/lib/Thing.svelte"
  }
}

[paoloricciuti]

What if we a command like svelte-package --exports modify the package.json with the exports AND validate it? This way if the automatic generation is good we don't have to write exports and we have a way to validate that package.json it's actually correct.

Regarding this: is there something on the horizon about a way to access $app inside the package without wresting with vite (right now a vite plugin to add the package to the list of non optimizable dependencies is required)?

[dummdidumm]

That shouldn't be needed anymore. If you have Svelte and SvelteKit in your (peer) dependencies, at least vite-plugin-svelte should be able to do this automatically.

[Rich-Harris]

Automatic generation is definitely an option. I'd put it in the 'non-essential' category just so that we're not blocked on it, since we can add it after the fact

[dummdidumm]

Tagging some package authors for visibility - @antony @rgossiaux @theetrain @endigo9740 @shinokada @Tropix126 would this change make sense to you or is the current behavior of copying over a package.json critical to you (and if yes, why)? Would the proposed way of doing things - manually authoring the package.json (more specifically, the exports map) you have in your repo - be something you can envision yourself doing?

[antony]

It's hard for me to list the exact issues with package as it's not a tool I've used in a while (and I don't use TS) The current behaviour was a bit mysterious (moving files around and writing export mappings), but the thing that caught me out was the lack of validation of attributes like the svelte attribute (which Sapper needs).

Therefore, it seems to me that validating rather than generating a package.json file would be a better solution.

I'm in favour!

[theetrain]

Since I've started working with svelte-package I am very happy with its precompiling conveniences since I use it with SCSS and JSDoc and lang="ts". Overall I'm in okay with the switch from generating to validating package.json since that'll mean fewer edge cases for svelte-packages to maintain. So long as it's documented on the kit website (or readme, or dedicated site), it works for me.

and including an exports map, which is the preferred modern way to declare what can be imported from your package.

Agreed, since exports was introduced in Node 12 and that's already a sunset version, all Node environments should be compatible with exports now, and there's no need for main or module. I'm still getting used to it; and my limited understanding is you have to define every subpath export explicitly. This may be problematic since in carbon-components-svelte we have many exports, and svelte-package does a good job identifying and writing them for us. See the example below:

Very large package.json generated by svelte-package

{
  "name": "carbon-components-svelte",
  "version": "0.72.1",
  "license": "Apache-2.0",
  "description": "Svelte implementation of the Carbon Design System",
  "type": "module",
  "svelte": "src/carbon-components-svelte/index.js",
  "module": "src/carbon-components-svelte",
  "dependencies": {
    "flatpickr": "4.6.9"
  },
  "devDependencies": {
    "@carbon/styles": "^1.20.0",
    "@rollup/plugin-commonjs": "^21.0.3",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@sveltejs/package": "^1.0.2",
    "@sveltejs/vite-plugin-svelte": "^2.0.2",
    "@tsconfig/svelte": "^3.0.0",
    "autoprefixer": "^10.4.8",
    "carbon-components": "^10.58.3",
    "carbon-icons-svelte": "^11.2.0",
    "postcss": "^8.4.16",
    "prettier": "^2.7.1",
    "prettier-plugin-svelte": "^2.7.0",
    "rollup": "^2.78.1",
    "rollup-plugin-svelte": "^7.1.0",
    "rollup-plugin-terser": "^7.0.2",
    "sass": "^1.53.0",
    "standard-version": "^9.5.0",
    "sveld": "^0.18.0",
    "svelte": "^3.55.1",
    "svelte-check": "^2.8.1",
    "svelte-preprocess": "^4.10.7",
    "typescript": "^4.7.4",
    "vite": "^4.0.4"
  },
  "peerDependencies": {
    "svelte": "^3.55.1"
  },
  "standard-version": {
    "skip": {
      "commit": true,
      "tag": true
    }
  },
  "prettier": {
    "svelteStrictMode": true
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/carbon-design-system/carbon-components-svelte.git"
  },
  "homepage": "https://github.com/carbon-design-system/carbon-components-svelte",
  "bugs": "https://github.com/carbon-design-system/carbon-components-svelte/issues",
  "keywords": [
    "carbon",
    "carbon components",
    "svelte",
    "component library",
    "carbon design system"
  ],
  "files": [
    "css"
  ],
  "contributors": [
    "Josef Aidt (https://github.com/josefaidt)",
    "Eric Liu (https://github.com/metonym)",
    "Enrico Sacchetti (https://github.com/theetrain)"
  ],
  "exports": {
    "./package.json": "./package.json",
    "./Accordion/Accordion.svelte": "./Accordion/Accordion.svelte",
    "./Accordion/AccordionItem.svelte": "./Accordion/AccordionItem.svelte",
    "./Accordion/AccordionSkeleton.svelte": "./Accordion/AccordionSkeleton.svelte",
    "./Accordion": "./Accordion/index.js",
    "./AspectRatio/AspectRatio.svelte": "./AspectRatio/AspectRatio.svelte",
    "./AspectRatio": "./AspectRatio/index.js",
    "./Breadcrumb/Breadcrumb.svelte": "./Breadcrumb/Breadcrumb.svelte",
    "./Breadcrumb/BreadcrumbItem.svelte": "./Breadcrumb/BreadcrumbItem.svelte",
    "./Breadcrumb/BreadcrumbSkeleton.svelte": "./Breadcrumb/BreadcrumbSkeleton.svelte",
    "./Breadcrumb": "./Breadcrumb/index.js",
    "./Breakpoint/Breakpoint.svelte": "./Breakpoint/Breakpoint.svelte",
    "./Breakpoint/breakpointObserver": "./Breakpoint/breakpointObserver.js",
    "./Breakpoint/breakpoints": "./Breakpoint/breakpoints.js",
    "./Breakpoint": "./Breakpoint/index.js",
    "./Button/Button.svelte": "./Button/Button.svelte",
    "./Button/ButtonSet.svelte": "./Button/ButtonSet.svelte",
    "./Button/ButtonSkeleton.svelte": "./Button/ButtonSkeleton.svelte",
    "./Button": "./Button/index.js",
    "./Checkbox/Checkbox.svelte": "./Checkbox/Checkbox.svelte",
    "./Checkbox/CheckboxSkeleton.svelte": "./Checkbox/CheckboxSkeleton.svelte",
    "./Checkbox/InlineCheckbox.svelte": "./Checkbox/InlineCheckbox.svelte",
    "./Checkbox": "./Checkbox/index.js",
    "./CodeSnippet/CodeSnippet.svelte": "./CodeSnippet/CodeSnippet.svelte",
    "./CodeSnippet/CodeSnippetSkeleton.svelte": "./CodeSnippet/CodeSnippetSkeleton.svelte",
    "./CodeSnippet": "./CodeSnippet/index.js",
    "./ComboBox/ComboBox.svelte": "./ComboBox/ComboBox.svelte",
    "./ComboBox": "./ComboBox/index.js",
    "./ComposedModal/ComposedModal.svelte": "./ComposedModal/ComposedModal.svelte",
    "./ComposedModal/ModalBody.svelte": "./ComposedModal/ModalBody.svelte",
    "./ComposedModal/ModalFooter.svelte": "./ComposedModal/ModalFooter.svelte",
    "./ComposedModal/ModalHeader.svelte": "./ComposedModal/ModalHeader.svelte",
    "./ComposedModal": "./ComposedModal/index.js",
    "./ContentSwitcher/ContentSwitcher.svelte": "./ContentSwitcher/ContentSwitcher.svelte",
    "./ContentSwitcher/Switch.svelte": "./ContentSwitcher/Switch.svelte",
    "./ContentSwitcher": "./ContentSwitcher/index.js",
    "./ContextMenu/ContextMenu.svelte": "./ContextMenu/ContextMenu.svelte",
    "./ContextMenu/ContextMenuDivider.svelte": "./ContextMenu/ContextMenuDivider.svelte",
    "./ContextMenu/ContextMenuGroup.svelte": "./ContextMenu/ContextMenuGroup.svelte",
    "./ContextMenu/ContextMenuOption.svelte": "./ContextMenu/ContextMenuOption.svelte",
    "./ContextMenu/ContextMenuRadioGroup.svelte": "./ContextMenu/ContextMenuRadioGroup.svelte",
    "./ContextMenu": "./ContextMenu/index.js",
    "./CopyButton/CopyButton.svelte": "./CopyButton/CopyButton.svelte",
    "./CopyButton": "./CopyButton/index.js",
    "./DataTable/DataTable.svelte": "./DataTable/DataTable.svelte",
    "./DataTable/DataTableSkeleton.svelte": "./DataTable/DataTableSkeleton.svelte",
    "./DataTable/Table.svelte": "./DataTable/Table.svelte",
    "./DataTable/TableBody.svelte": "./DataTable/TableBody.svelte",
    "./DataTable/TableCell.svelte": "./DataTable/TableCell.svelte",
    "./DataTable/TableContainer.svelte": "./DataTable/TableContainer.svelte",
    "./DataTable/TableHead.svelte": "./DataTable/TableHead.svelte",
    "./DataTable/TableHeader.svelte": "./DataTable/TableHeader.svelte",
    "./DataTable/TableRow.svelte": "./DataTable/TableRow.svelte",
    "./DataTable/Toolbar.svelte": "./DataTable/Toolbar.svelte",
    "./DataTable/ToolbarBatchActions.svelte": "./DataTable/ToolbarBatchActions.svelte",
    "./DataTable/ToolbarContent.svelte": "./DataTable/ToolbarContent.svelte",
    "./DataTable/ToolbarMenu.svelte": "./DataTable/ToolbarMenu.svelte",
    "./DataTable/ToolbarMenuItem.svelte": "./DataTable/ToolbarMenuItem.svelte",
    "./DataTable/ToolbarSearch.svelte": "./DataTable/ToolbarSearch.svelte",
    "./DataTable": "./DataTable/index.js",
    "./DatePicker/DatePicker.svelte": "./DatePicker/DatePicker.svelte",
    "./DatePicker/DatePickerInput.svelte": "./DatePicker/DatePickerInput.svelte",
    "./DatePicker/DatePickerSkeleton.svelte": "./DatePicker/DatePickerSkeleton.svelte",
    "./DatePicker/createCalendar": "./DatePicker/createCalendar.js",
    "./DatePicker": "./DatePicker/index.js",
    "./Dropdown/Dropdown.svelte": "./Dropdown/Dropdown.svelte",
    "./Dropdown/DropdownSkeleton.svelte": "./Dropdown/DropdownSkeleton.svelte",
    "./Dropdown": "./Dropdown/index.js",
    "./FileUploader/FileUploader.svelte": "./FileUploader/FileUploader.svelte",
    "./FileUploader/FileUploaderButton.svelte": "./FileUploader/FileUploaderButton.svelte",
    "./FileUploader/FileUploaderDropContainer.svelte": "./FileUploader/FileUploaderDropContainer.svelte",
    "./FileUploader/FileUploaderItem.svelte": "./FileUploader/FileUploaderItem.svelte",
    "./FileUploader/FileUploaderSkeleton.svelte": "./FileUploader/FileUploaderSkeleton.svelte",
    "./FileUploader/Filename.svelte": "./FileUploader/Filename.svelte",
    "./FileUploader": "./FileUploader/index.js",
    "./FluidForm/FluidForm.svelte": "./FluidForm/FluidForm.svelte",
    "./FluidForm": "./FluidForm/index.js",
    "./Form/Form.svelte": "./Form/Form.svelte",
    "./Form": "./Form/index.js",
    "./FormGroup/FormGroup.svelte": "./FormGroup/FormGroup.svelte",
    "./FormGroup": "./FormGroup/index.js",
    "./FormItem/FormItem.svelte": "./FormItem/FormItem.svelte",
    "./FormItem": "./FormItem/index.js",
    "./FormLabel/FormLabel.svelte": "./FormLabel/FormLabel.svelte",
    "./FormLabel": "./FormLabel/index.js",
    "./Grid/Column.svelte": "./Grid/Column.svelte",
    "./Grid/Grid.svelte": "./Grid/Grid.svelte",
    "./Grid/Row.svelte": "./Grid/Row.svelte",
    "./Grid": "./Grid/index.js",
    "./ImageLoader/ImageLoader.svelte": "./ImageLoader/ImageLoader.svelte",
    "./ImageLoader": "./ImageLoader/index.js",
    "./InlineLoading/InlineLoading.svelte": "./InlineLoading/InlineLoading.svelte",
    "./InlineLoading": "./InlineLoading/index.js",
    "./Link/Link.svelte": "./Link/Link.svelte",
    "./Link/OutboundLink.svelte": "./Link/OutboundLink.svelte",
    "./Link": "./Link/index.js",
    "./ListBox/ListBox.svelte": "./ListBox/ListBox.svelte",
    "./ListBox/ListBoxField.svelte": "./ListBox/ListBoxField.svelte",
    "./ListBox/ListBoxMenu.svelte": "./ListBox/ListBoxMenu.svelte",
    "./ListBox/ListBoxMenuIcon.svelte": "./ListBox/ListBoxMenuIcon.svelte",
    "./ListBox/ListBoxMenuItem.svelte": "./ListBox/ListBoxMenuItem.svelte",
    "./ListBox/ListBoxSelection.svelte": "./ListBox/ListBoxSelection.svelte",
    "./ListBox": "./ListBox/index.js",
    "./ListItem/ListItem.svelte": "./ListItem/ListItem.svelte",
    "./ListItem": "./ListItem/index.js",
    "./Loading/Loading.svelte": "./Loading/Loading.svelte",
    "./Loading": "./Loading/index.js",
    "./LocalStorage/LocalStorage.svelte": "./LocalStorage/LocalStorage.svelte",
    "./LocalStorage": "./LocalStorage/index.js",
    "./Modal/Modal.svelte": "./Modal/Modal.svelte",
    "./Modal": "./Modal/index.js",
    "./Modal/modalStore": "./Modal/modalStore.js",
    "./MultiSelect/MultiSelect.svelte": "./MultiSelect/MultiSelect.svelte",
    "./MultiSelect": "./MultiSelect/index.js",
    "./Notification/InlineNotification.svelte": "./Notification/InlineNotification.svelte",
    "./Notification/NotificationActionButton.svelte": "./Notification/NotificationActionButton.svelte",
    "./Notification/NotificationButton.svelte": "./Notification/NotificationButton.svelte",
    "./Notification/NotificationIcon.svelte": "./Notification/NotificationIcon.svelte",
    "./Notification/ToastNotification.svelte": "./Notification/ToastNotification.svelte",
    "./Notification": "./Notification/index.js",
    "./NumberInput/NumberInput.svelte": "./NumberInput/NumberInput.svelte",
    "./NumberInput/NumberInputSkeleton.svelte": "./NumberInput/NumberInputSkeleton.svelte",
    "./NumberInput": "./NumberInput/index.js",
    "./OrderedList/OrderedList.svelte": "./OrderedList/OrderedList.svelte",
    "./OrderedList": "./OrderedList/index.js",
    "./OverflowMenu/OverflowMenu.svelte": "./OverflowMenu/OverflowMenu.svelte",
    "./OverflowMenu/OverflowMenuItem.svelte": "./OverflowMenu/OverflowMenuItem.svelte",
    "./OverflowMenu": "./OverflowMenu/index.js",
    "./Pagination/Pagination.svelte": "./Pagination/Pagination.svelte",
    "./Pagination/PaginationSkeleton.svelte": "./Pagination/PaginationSkeleton.svelte",
    "./Pagination": "./Pagination/index.js",
    "./PaginationNav/PaginationItem.svelte": "./PaginationNav/PaginationItem.svelte",
    "./PaginationNav/PaginationNav.svelte": "./PaginationNav/PaginationNav.svelte",
    "./PaginationNav/PaginationOverflow.svelte": "./PaginationNav/PaginationOverflow.svelte",
    "./PaginationNav": "./PaginationNav/index.js",
    "./Popover/Popover.svelte": "./Popover/Popover.svelte",
    "./Popover": "./Popover/index.js",
    "./ProgressBar/ProgressBar.svelte": "./ProgressBar/ProgressBar.svelte",
    "./ProgressBar": "./ProgressBar/index.js",
    "./ProgressIndicator/ProgressIndicator.svelte": "./ProgressIndicator/ProgressIndicator.svelte",
    "./ProgressIndicator/ProgressIndicatorSkeleton.svelte": "./ProgressIndicator/ProgressIndicatorSkeleton.svelte",
    "./ProgressIndicator/ProgressStep.svelte": "./ProgressIndicator/ProgressStep.svelte",
    "./ProgressIndicator": "./ProgressIndicator/index.js",
    "./RadioButton/RadioButton.svelte": "./RadioButton/RadioButton.svelte",
    "./RadioButton/RadioButtonSkeleton.svelte": "./RadioButton/RadioButtonSkeleton.svelte",
    "./RadioButton": "./RadioButton/index.js",
    "./RadioButtonGroup/RadioButtonGroup.svelte": "./RadioButtonGroup/RadioButtonGroup.svelte",
    "./RadioButtonGroup": "./RadioButtonGroup/index.js",
    "./RecursiveList/RecursiveList.svelte": "./RecursiveList/RecursiveList.svelte",
    "./RecursiveList/RecursiveListItem.svelte": "./RecursiveList/RecursiveListItem.svelte",
    "./RecursiveList": "./RecursiveList/index.js",
    "./Search/Search.svelte": "./Search/Search.svelte",
    "./Search/SearchSkeleton.svelte": "./Search/SearchSkeleton.svelte",
    "./Search": "./Search/index.js",
    "./Select/Select.svelte": "./Select/Select.svelte",
    "./Select/SelectItem.svelte": "./Select/SelectItem.svelte",
    "./Select/SelectItemGroup.svelte": "./Select/SelectItemGroup.svelte",
    "./Select/SelectSkeleton.svelte": "./Select/SelectSkeleton.svelte",
    "./Select": "./Select/index.js",
    "./SkeletonPlaceholder/SkeletonPlaceholder.svelte": "./SkeletonPlaceholder/SkeletonPlaceholder.svelte",
    "./SkeletonPlaceholder": "./SkeletonPlaceholder/index.js",
    "./SkeletonText/SkeletonText.svelte": "./SkeletonText/SkeletonText.svelte",
    "./SkeletonText": "./SkeletonText/index.js",
    "./Slider/Slider.svelte": "./Slider/Slider.svelte",
    "./Slider/SliderSkeleton.svelte": "./Slider/SliderSkeleton.svelte",
    "./Slider": "./Slider/index.js",
    "./StructuredList/StructuredList.svelte": "./StructuredList/StructuredList.svelte",
    "./StructuredList/StructuredListBody.svelte": "./StructuredList/StructuredListBody.svelte",
    "./StructuredList/StructuredListCell.svelte": "./StructuredList/StructuredListCell.svelte",
    "./StructuredList/StructuredListHead.svelte": "./StructuredList/StructuredListHead.svelte",
    "./StructuredList/StructuredListInput.svelte": "./StructuredList/StructuredListInput.svelte",
    "./StructuredList/StructuredListRow.svelte": "./StructuredList/StructuredListRow.svelte",
    "./StructuredList/StructuredListSkeleton.svelte": "./StructuredList/StructuredListSkeleton.svelte",
    "./StructuredList": "./StructuredList/index.js",
    "./Tabs/Tab.svelte": "./Tabs/Tab.svelte",
    "./Tabs/TabContent.svelte": "./Tabs/TabContent.svelte",
    "./Tabs/Tabs.svelte": "./Tabs/Tabs.svelte",
    "./Tabs/TabsSkeleton.svelte": "./Tabs/TabsSkeleton.svelte",
    "./Tabs": "./Tabs/index.js",
    "./Tag/Tag.svelte": "./Tag/Tag.svelte",
    "./Tag/TagSkeleton.svelte": "./Tag/TagSkeleton.svelte",
    "./Tag": "./Tag/index.js",
    "./TextArea/TextArea.svelte": "./TextArea/TextArea.svelte",
    "./TextArea/TextAreaSkeleton.svelte": "./TextArea/TextAreaSkeleton.svelte",
    "./TextArea": "./TextArea/index.js",
    "./TextInput/PasswordInput.svelte": "./TextInput/PasswordInput.svelte",
    "./TextInput/TextInput.svelte": "./TextInput/TextInput.svelte",
    "./TextInput/TextInputSkeleton.svelte": "./TextInput/TextInputSkeleton.svelte",
    "./TextInput": "./TextInput/index.js",
    "./Theme/Theme.svelte": "./Theme/Theme.svelte",
    "./Theme": "./Theme/index.js",
    "./Tile/ClickableTile.svelte": "./Tile/ClickableTile.svelte",
    "./Tile/ExpandableTile.svelte": "./Tile/ExpandableTile.svelte",
    "./Tile/RadioTile.svelte": "./Tile/RadioTile.svelte",
    "./Tile/SelectableTile.svelte": "./Tile/SelectableTile.svelte",
    "./Tile/Tile.svelte": "./Tile/Tile.svelte",
    "./Tile/TileGroup.svelte": "./Tile/TileGroup.svelte",
    "./Tile": "./Tile/index.js",
    "./TimePicker/TimePicker.svelte": "./TimePicker/TimePicker.svelte",
    "./TimePicker/TimePickerSelect.svelte": "./TimePicker/TimePickerSelect.svelte",
    "./TimePicker": "./TimePicker/index.js",
    "./Toggle/Toggle.svelte": "./Toggle/Toggle.svelte",
    "./Toggle/ToggleSkeleton.svelte": "./Toggle/ToggleSkeleton.svelte",
    "./Toggle": "./Toggle/index.js",
    "./Tooltip/Tooltip.svelte": "./Tooltip/Tooltip.svelte",
    "./Tooltip/TooltipFooter.svelte": "./Tooltip/TooltipFooter.svelte",
    "./Tooltip": "./Tooltip/index.js",
    "./TooltipDefinition/TooltipDefinition.svelte": "./TooltipDefinition/TooltipDefinition.svelte",
    "./TooltipDefinition": "./TooltipDefinition/index.js",
    "./TooltipIcon/TooltipIcon.svelte": "./TooltipIcon/TooltipIcon.svelte",
    "./TooltipIcon": "./TooltipIcon/index.js",
    "./TreeView/TreeView.svelte": "./TreeView/TreeView.svelte",
    "./TreeView/TreeViewNode.svelte": "./TreeView/TreeViewNode.svelte",
    "./TreeView/TreeViewNodeList.svelte": "./TreeView/TreeViewNodeList.svelte",
    "./TreeView": "./TreeView/index.js",
    "./Truncate/Truncate.svelte": "./Truncate/Truncate.svelte",
    "./Truncate": "./Truncate/index.js",
    "./Truncate/truncate": "./Truncate/truncate.js",
    "./UIShell/Content.svelte": "./UIShell/Content.svelte",
    "./UIShell/HamburgerMenu.svelte": "./UIShell/HamburgerMenu.svelte",
    "./UIShell/Header.svelte": "./UIShell/Header.svelte",
    "./UIShell/HeaderAction.svelte": "./UIShell/HeaderAction.svelte",
    "./UIShell/HeaderActionLink.svelte": "./UIShell/HeaderActionLink.svelte",
    "./UIShell/HeaderGlobalAction.svelte": "./UIShell/HeaderGlobalAction.svelte",
    "./UIShell/HeaderNav.svelte": "./UIShell/HeaderNav.svelte",
    "./UIShell/HeaderNavItem.svelte": "./UIShell/HeaderNavItem.svelte",
    "./UIShell/HeaderNavMenu.svelte": "./UIShell/HeaderNavMenu.svelte",
    "./UIShell/HeaderPanelDivider.svelte": "./UIShell/HeaderPanelDivider.svelte",
    "./UIShell/HeaderPanelLink.svelte": "./UIShell/HeaderPanelLink.svelte",
    "./UIShell/HeaderPanelLinks.svelte": "./UIShell/HeaderPanelLinks.svelte",
    "./UIShell/HeaderSearch.svelte": "./UIShell/HeaderSearch.svelte",
    "./UIShell/HeaderUtilities.svelte": "./UIShell/HeaderUtilities.svelte",
    "./UIShell/SideNav.svelte": "./UIShell/SideNav.svelte",
    "./UIShell/SideNavDivider.svelte": "./UIShell/SideNavDivider.svelte",
    "./UIShell/SideNavItems.svelte": "./UIShell/SideNavItems.svelte",
    "./UIShell/SideNavLink.svelte": "./UIShell/SideNavLink.svelte",
    "./UIShell/SideNavMenu.svelte": "./UIShell/SideNavMenu.svelte",
    "./UIShell/SideNavMenuItem.svelte": "./UIShell/SideNavMenuItem.svelte",
    "./UIShell/SkipToContent.svelte": "./UIShell/SkipToContent.svelte",
    "./UIShell": "./UIShell/index.js",
    "./UIShell/navStore": "./UIShell/navStore.js",
    "./UnorderedList/UnorderedList.svelte": "./UnorderedList/UnorderedList.svelte",
    "./UnorderedList": "./UnorderedList/index.js",
    "./icons/Add.svelte": "./icons/Add.svelte",
    "./icons/ArrowUp.svelte": "./icons/ArrowUp.svelte",
    "./icons/ArrowsVertical.svelte": "./icons/ArrowsVertical.svelte",
    "./icons/Calendar.svelte": "./icons/Calendar.svelte",
    "./icons/CaretDown.svelte": "./icons/CaretDown.svelte",
    "./icons/CaretLeft.svelte": "./icons/CaretLeft.svelte",
    "./icons/CaretRight.svelte": "./icons/CaretRight.svelte",
    "./icons/Checkmark.svelte": "./icons/Checkmark.svelte",
    "./icons/CheckmarkFilled.svelte": "./icons/CheckmarkFilled.svelte",
    "./icons/CheckmarkOutline.svelte": "./icons/CheckmarkOutline.svelte",
    "./icons/ChevronDown.svelte": "./icons/ChevronDown.svelte",
    "./icons/ChevronRight.svelte": "./icons/ChevronRight.svelte",
    "./icons/CircleDash.svelte": "./icons/CircleDash.svelte",
    "./icons/Close.svelte": "./icons/Close.svelte",
    "./icons/Copy.svelte": "./icons/Copy.svelte",
    "./icons/EditOff.svelte": "./icons/EditOff.svelte",
    "./icons/ErrorFilled.svelte": "./icons/ErrorFilled.svelte",
    "./icons/IconSearch.svelte": "./icons/IconSearch.svelte",
    "./icons/Incomplete.svelte": "./icons/Incomplete.svelte",
    "./icons/Information.svelte": "./icons/Information.svelte",
    "./icons/InformationFilled.svelte": "./icons/InformationFilled.svelte",
    "./icons/InformationSquareFilled.svelte": "./icons/InformationSquareFilled.svelte",
    "./icons/Launch.svelte": "./icons/Launch.svelte",
    "./icons/Menu.svelte": "./icons/Menu.svelte",
    "./icons/OverflowMenuHorizontal.svelte": "./icons/OverflowMenuHorizontal.svelte",
    "./icons/OverflowMenuVertical.svelte": "./icons/OverflowMenuVertical.svelte",
    "./icons/Settings.svelte": "./icons/Settings.svelte",
    "./icons/Subtract.svelte": "./icons/Subtract.svelte",
    "./icons/Switcher.svelte": "./icons/Switcher.svelte",
    "./icons/View.svelte": "./icons/View.svelte",
    "./icons/ViewOff.svelte": "./icons/ViewOff.svelte",
    "./icons/Warning.svelte": "./icons/Warning.svelte",
    "./icons/WarningAltFilled.svelte": "./icons/WarningAltFilled.svelte",
    "./icons/WarningFilled.svelte": "./icons/WarningFilled.svelte",
    ".": "./index.js"
  }
}

(probably unrelated) I'm still investigating and I'm unsure how to consume this package efficiently with Vite since there are so many Svelte components and using named imports (import { Button } from '..') has been historically slower than deep imports (import Button from '../../Button.svelte'); here's a related conversation: carbon-design-system/carbon-components-svelte#1561 — from my findings, using uncompiled SCSS was the major blocker and having that precompiled helped a lot.

I think providing named exports and subpath exports is important to allow both import styles by developers and within the Svelte REPL; and so being able to rely on generated exports entries is very helpful to me. Could svelte-package generate subpath exports based on the target folder's index.js? Here's a sample index.js. For example, I see a key "./icons/Menu.svelte" in the generated package.json, but that's not included in index.js.

Lastly, it may be worth mentioning in the docs to add a files key in package.json so that you only publish your generated files and not your SvelteKit website source files.

Thanks for your efforts!

cc @metonym

[endigo9740]

Thanks you for the heads up @dummdidumm, I'm going to also bring in @niktek and @AdrianGonz97 from our team for additional visibility and feedback.

FYI we do use Typescript, JSDoc, and already have some degree of pre and post processing during our package process. Knee jerk reaction, I agree with Enrico above, as long as this is well documented we can probably make just about anything work. But let me discuss with my team and come back with a more detailed response.

[dummdidumm]

I'm still getting used to it; and my limited understanding is you have to define every subpath export explicitly. This may be problematic since in carbon-components-svelte we have many exports, and svelte-package does a good job identifying and writing them for us. See the example below:

@theetrain you should be able to author it like this (syntax is explained a bit above the section you linked):

{
  "exports": {
     ".": "./package/index.js",
     "./Table": "./package/Table/index.js",
     "./Table/*.svelte": "./package/Table/*.svelte",
     ..
  }
}

That means you need two exports per section, which should get this down to a manageable size of exports to write.

[shinokada]

Personally, I'm very happy with the current workflow.

"scripts": {
   ...
    "build": "svelte-kit sync && svelte-package",
   ...
    "package:publish": "standard-version && git push --follow-tags origin main && npm run build && npm publish ./package"
  },

My understanding of the proposal is that the svelte-package would only validate the authored package.json and not generate a new one. We have to export explicitly what we are exporting in package.json.

If a change needs to be made a migration guide with examples will be very helpful.

[jycouet]

Maybe I'm missing something, but how do you create package.json & README.md in the dist folder now?

[paoloricciuti]

You don't, if you use the migration tool the package will be generated in the dist/package folder and you can launch publish from the main folder since the package.json files field is set to be "package" or "dist". So npm will publish from that folder.

[jycouet]

the migration tool
What?! did I miss something? 🤔👀

[dummdidumm]

#8922

[niktek]

Current issues:

1. We also had problems with exports being merged into the generated package.json - but I'll check out the config.package.exports and config.package.files. Our workaround was hacktacular..

2. svelte-package currently does not preserve JSDoc blocks on exported component props or events of TS components (it does keep the component description). So after svelte-package we run a script to extract the JSDoc blocks and then patch them back into the emitted d.ts files. But would love to see this move back upstream for all libs to benefit.

[dummdidumm]

1. sounds like you would be in favor of the auto-generation of package.json going away
2. sounds unrelated but is valuable feedback 👍

[niktek]

Re:. 2 - I would have thought it was related to the proposed svelte-package --declaration=types (and even just packaging in general - though if there is an easier way to do this, we would love to know about it!). Currently, when packaging we get name and type for a component, but not description - which would help for intellisense.

import { SvelteComponentTyped } from "svelte";
declare const __propDef: {
    props: {
        [x: string]: any;
        autocollapse?: boolean | undefined;
        duration?: number | undefined;
...

VS after our patching:

import { SvelteComponentTyped } from "svelte";
declare const __propDef: {
    props: {
        [x: string]: any;
        /** Set the auto-collapse mode.*/
        autocollapse?: boolean | undefined;
        /** Set the drawer animation duration in milliseconds.*/
        duration?: number | undefined;

Which then makes it come through to VSCode:

I realise, this wasn't the main thrust of the questions above - but I want to do a few more tests locally before commenting on them.

[dummdidumm]

Did some digging into 2. I believe it's a TypeScript bug (or delibarete? I don't know). The Expand helper type together with a function (which we use to transform types internally) makes it disappear. Minimum reproducible

[dummdidumm]

Given the sentiment so far we feel that people are either slightly in favor, or ok with the change as long as they get a good migration script and good instructions for how to manage their export conditions (which is really the only thing that changes for people).

[PuruVJ]

Run Vite on the contents of script tag

Currently, if you use Vite specific features, like ?raw or import.meta.glob, they are not removed in the final package. This leads to vendor lock in. @sveltejs/repl package itself is a victim to this, as it has a srcdoc.html?raw import in it, which won't work if used outside of non-Vite environments.

You could write in docs that is not allowed, and tell them to adjust, but as a consumer of svelte-package(And nothing more), I expect to be able to use Vite features and not have to worry about the package not working outside of Vite environments

[betamos]

+1 for the monorepo use case.

I'm building an app and website that shares UI elements, but with different build config, different routes, and different adapters. IIUC SvelteKit assumes 1:1 relation between package:app, in which case my ideal dep tree would be (app, web) -> (lib), all within the same repo. Publishing on npm, creating repos and versioning would be pure overhead for me - here the monorepo style shines.

Judging by the web searches that brought me here, it seems a lot of people want to reuse their Svelte components in different sites, without necessarily publishing and maintaining libraries in the traditional sense.

[muratgozel]

i end up here while looking for ways to make svelte components composable. i have a monorepo setup with shared frontend package which uses pkgroll to build js modules. i don't use svelte kit. thanks to @sveltejs/package, i began to package the components in the common package in the workspace and importing them like import Component from '@org/frontend-common' which is great.

i see @sveltejs/package as an independent tool from svelte kit. furthermore, i recommend to do one-on-one mapping between source paths and export paths. that's what pkgroll does and i think it's just great. a simplicty i would expect from svelte. ✨

i don't know why it creates .svelte-kit btw. added it to gitignore.

here is my setup for anyone interested. package.json contains independent js modules, svelte stores, actions and components:

  "exports": {
    "./modules/dayjs.js": {
      "import": {
        "types": "./dist/modules/dayjs.d.ts",
        "default": "./dist/modules/dayjs.js"
      }
    },
    "./svelte/store/device.js": {
      "import": {
        "types": "./dist/svelte/store/device.d.ts",
        "default": "./dist/svelte/store/device.js"
      }
    },
    "./Banner.svelte": {
      "types": "./dist/svelte/components/elements/LoadingBar.svelte.d.ts",
      "svelte": "./dist/svelte/components/elements/LoadingBar.svelte"
    },
  },

svelte files packaged with:

  "scripts": {
    "build:svelte": "svelte-package -i ./src/svelte/components -o ./dist/svelte/components",
  },

using it like:

import Banner from '@org/frontend-common/Banner.svelte'

[antony]

I don't think you need @sveltejs/package for this - recent node has subpath imports: https://nodejs.org/api/packages.html#subpath-imports and vite has aliases, both of which should allow you to do what you're doing without having to run a build step.

[muratgozel]

dont know node subpath imports maybe its more useful. i don't prefer vite aliases (i think aliases complicate the project) and i get the benefit of typings with sveltejs/package.