mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
feat(preprocess): add optimizeCarbonImports preprocessor (#499)
This commit is contained in:
Eric Liu
GitHub
parent
3d002f3246
commit
855381a486
9 changed files with 825 additions and 6 deletions
|
|
@ -2,5 +2,5 @@ language: node_js
|
|||
node_js: 12
|
||||
cache: yarn
|
||||
script:
|
||||
- yarn check-types
|
||||
- yarn prepack
|
||||
- yarn test
|
||||
|
|
|
|||
73
README.md
73
README.md
|
|
@ -159,7 +159,78 @@ Using JavaScript:
|
|||
|
||||
```
|
||||
|
||||
### TypeScript support
|
||||
## Preprocessors
|
||||
|
||||
### optimizeCarbonImports
|
||||
|
||||
`optimizeCarbonImports` is a Svelte preprocessor that optimizes base imports inside the `script` block of a Svelte file from the following libraries:
|
||||
|
||||
- carbon-components-svelte
|
||||
- carbon-icons-svelte
|
||||
- carbon-pictograms-svelte
|
||||
|
||||
The preprocessor rewrites base imports to directly import the source Svelte file. This may lead to faster complile times **during development**.
|
||||
|
||||
Example:
|
||||
|
||||
**Before**
|
||||
|
||||
```js
|
||||
import { Button, Header } from "carbon-components-svelte";
|
||||
import { Notification20 } from "carbon-icons-svelte";
|
||||
import { Airplane } from "carbon-pictograms-svelte";
|
||||
```
|
||||
|
||||
**After**
|
||||
|
||||
```js
|
||||
import Button from "carbon-components-svelte/Button/Button.svelte";
|
||||
import Header from "carbon-components-svelte/UIShell/GlobalHeader/Header.svelte";
|
||||
import Notification20 from "carbon-icons-svelte/lib/Notification20/Notification20.svelte";
|
||||
import Airplane from "carbon-pictograms-svelte/lib/Airplane/Airplane.svelte";
|
||||
```
|
||||
|
||||
#### svelte.config.js
|
||||
|
||||
```js
|
||||
// svelte.config.js
|
||||
const {
|
||||
optimizeCarbonImports,
|
||||
} = require("carbon-components-svelte/preprocess");
|
||||
|
||||
module.exports = {
|
||||
preprocess: [optimizeCarbonImports()],
|
||||
};
|
||||
```
|
||||
|
||||
#### svelte-loader
|
||||
|
||||
```js
|
||||
// webpack.config.js
|
||||
const {
|
||||
optimizeCarbonImports,
|
||||
} = require("carbon-components-svelte/preprocess");
|
||||
|
||||
module.exports = {
|
||||
// ...
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.svelte$/,
|
||||
use: {
|
||||
loader: "svelte-loader",
|
||||
options: {
|
||||
hotReload: true,
|
||||
preprocess: [optimizeCarbonImports()],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## TypeScript support
|
||||
|
||||
[TypeScript definitions](types) are generated by [sveld](https://github.com/IBM/sveld).
|
||||
|
||||
|
|
|
|||
12
package.json
12
package.json
|
|
@ -10,12 +10,15 @@
|
|||
"types": "./types/index.d.ts",
|
||||
"sideEffects": false,
|
||||
"scripts": {
|
||||
"check-types": "svelte-check --workspace tests",
|
||||
"publish-examples": "node scripts/publish-examples",
|
||||
"test": "run-p test:*",
|
||||
"test:types": "svelte-check --workspace tests",
|
||||
"test:preprocess": "node tests/preprocess",
|
||||
"build:css": "node scripts/build-css",
|
||||
"build:api": "node scripts/build-api",
|
||||
"build:lib": "rollup -c",
|
||||
"prepack": "run-p build:*",
|
||||
"format": "prettier --write './**/*.{svelte,js,md}'"
|
||||
"format": "prettier --write './**/*.{svelte,js,md}'",
|
||||
"publish-examples": "node scripts/publish-examples"
|
||||
},
|
||||
"dependencies": {
|
||||
"carbon-icons-svelte": "^10.21.0",
|
||||
|
|
@ -75,6 +78,7 @@
|
|||
"lib",
|
||||
"src",
|
||||
"types",
|
||||
"css"
|
||||
"css",
|
||||
"preprocess"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
482
preprocess/api.json
Normal file
482
preprocess/api.json
Normal file
|
|
@ -0,0 +1,482 @@
|
|||
{
|
||||
"version": "0.26.0",
|
||||
"components": {
|
||||
"Accordion": {
|
||||
"path": "carbon-components-svelte/src/Accordion/Accordion.svelte"
|
||||
},
|
||||
"AccordionItem": {
|
||||
"path": "carbon-components-svelte/src/Accordion/AccordionItem.svelte"
|
||||
},
|
||||
"AccordionSkeleton": {
|
||||
"path": "carbon-components-svelte/src/Accordion/AccordionSkeleton.svelte"
|
||||
},
|
||||
"AspectRatio": {
|
||||
"path": "carbon-components-svelte/src/AspectRatio/AspectRatio.svelte"
|
||||
},
|
||||
"Breadcrumb": {
|
||||
"path": "carbon-components-svelte/src/Breadcrumb/Breadcrumb.svelte"
|
||||
},
|
||||
"BreadcrumbItem": {
|
||||
"path": "carbon-components-svelte/src/Breadcrumb/BreadcrumbItem.svelte"
|
||||
},
|
||||
"BreadcrumbSkeleton": {
|
||||
"path": "carbon-components-svelte/src/Breadcrumb/BreadcrumbSkeleton.svelte"
|
||||
},
|
||||
"Button": {
|
||||
"path": "carbon-components-svelte/src/Button/Button.svelte"
|
||||
},
|
||||
"ButtonSet": {
|
||||
"path": "carbon-components-svelte/src/Button/ButtonSet.svelte"
|
||||
},
|
||||
"ButtonSkeleton": {
|
||||
"path": "carbon-components-svelte/src/Button/ButtonSkeleton.svelte"
|
||||
},
|
||||
"Checkbox": {
|
||||
"path": "carbon-components-svelte/src/Checkbox/Checkbox.svelte"
|
||||
},
|
||||
"CheckboxSkeleton": {
|
||||
"path": "carbon-components-svelte/src/Checkbox/CheckboxSkeleton.svelte"
|
||||
},
|
||||
"InlineCheckbox": {
|
||||
"path": "carbon-components-svelte/src/Checkbox/InlineCheckbox.svelte"
|
||||
},
|
||||
"CodeSnippet": {
|
||||
"path": "carbon-components-svelte/src/CodeSnippet/CodeSnippet.svelte"
|
||||
},
|
||||
"CodeSnippetSkeleton": {
|
||||
"path": "carbon-components-svelte/src/CodeSnippet/CodeSnippetSkeleton.svelte"
|
||||
},
|
||||
"ComboBox": {
|
||||
"path": "carbon-components-svelte/src/ComboBox/ComboBox.svelte"
|
||||
},
|
||||
"ComposedModal": {
|
||||
"path": "carbon-components-svelte/src/ComposedModal/ComposedModal.svelte"
|
||||
},
|
||||
"ModalBody": {
|
||||
"path": "carbon-components-svelte/src/ComposedModal/ModalBody.svelte"
|
||||
},
|
||||
"ModalFooter": {
|
||||
"path": "carbon-components-svelte/src/ComposedModal/ModalFooter.svelte"
|
||||
},
|
||||
"ModalHeader": {
|
||||
"path": "carbon-components-svelte/src/ComposedModal/ModalHeader.svelte"
|
||||
},
|
||||
"ContentSwitcher": {
|
||||
"path": "carbon-components-svelte/src/ContentSwitcher/ContentSwitcher.svelte"
|
||||
},
|
||||
"Switch": {
|
||||
"path": "carbon-components-svelte/src/ContentSwitcher/Switch.svelte"
|
||||
},
|
||||
"Copy": {
|
||||
"path": "carbon-components-svelte/src/Copy/Copy.svelte"
|
||||
},
|
||||
"CopyButton": {
|
||||
"path": "carbon-components-svelte/src/CopyButton/CopyButton.svelte"
|
||||
},
|
||||
"DataTable": {
|
||||
"path": "carbon-components-svelte/src/DataTable/DataTable.svelte"
|
||||
},
|
||||
"DataTableSkeleton": {
|
||||
"path": "carbon-components-svelte/src/DataTable/DataTableSkeleton.svelte"
|
||||
},
|
||||
"Table": {
|
||||
"path": "carbon-components-svelte/src/DataTable/Table.svelte"
|
||||
},
|
||||
"TableBody": {
|
||||
"path": "carbon-components-svelte/src/DataTable/TableBody.svelte"
|
||||
},
|
||||
"TableCell": {
|
||||
"path": "carbon-components-svelte/src/DataTable/TableCell.svelte"
|
||||
},
|
||||
"TableContainer": {
|
||||
"path": "carbon-components-svelte/src/DataTable/TableContainer.svelte"
|
||||
},
|
||||
"TableHead": {
|
||||
"path": "carbon-components-svelte/src/DataTable/TableHead.svelte"
|
||||
},
|
||||
"TableHeader": {
|
||||
"path": "carbon-components-svelte/src/DataTable/TableHeader.svelte"
|
||||
},
|
||||
"TableRow": {
|
||||
"path": "carbon-components-svelte/src/DataTable/TableRow.svelte"
|
||||
},
|
||||
"Toolbar": {
|
||||
"path": "carbon-components-svelte/src/DataTable/Toolbar.svelte"
|
||||
},
|
||||
"ToolbarBatchActions": {
|
||||
"path": "carbon-components-svelte/src/DataTable/ToolbarBatchActions.svelte"
|
||||
},
|
||||
"ToolbarContent": {
|
||||
"path": "carbon-components-svelte/src/DataTable/ToolbarContent.svelte"
|
||||
},
|
||||
"ToolbarMenu": {
|
||||
"path": "carbon-components-svelte/src/DataTable/ToolbarMenu.svelte"
|
||||
},
|
||||
"ToolbarMenuItem": {
|
||||
"path": "carbon-components-svelte/src/DataTable/ToolbarMenuItem.svelte"
|
||||
},
|
||||
"ToolbarSearch": {
|
||||
"path": "carbon-components-svelte/src/DataTable/ToolbarSearch.svelte"
|
||||
},
|
||||
"DatePicker": {
|
||||
"path": "carbon-components-svelte/src/DatePicker/DatePicker.svelte"
|
||||
},
|
||||
"DatePickerInput": {
|
||||
"path": "carbon-components-svelte/src/DatePicker/DatePickerInput.svelte"
|
||||
},
|
||||
"DatePickerSkeleton": {
|
||||
"path": "carbon-components-svelte/src/DatePicker/DatePickerSkeleton.svelte"
|
||||
},
|
||||
"Dropdown": {
|
||||
"path": "carbon-components-svelte/src/Dropdown/Dropdown.svelte"
|
||||
},
|
||||
"DropdownSkeleton": {
|
||||
"path": "carbon-components-svelte/src/Dropdown/DropdownSkeleton.svelte"
|
||||
},
|
||||
"Filename": {
|
||||
"path": "carbon-components-svelte/src/FileUploader/Filename.svelte"
|
||||
},
|
||||
"FileUploader": {
|
||||
"path": "carbon-components-svelte/src/FileUploader/FileUploader.svelte"
|
||||
},
|
||||
"FileUploaderButton": {
|
||||
"path": "carbon-components-svelte/src/FileUploader/FileUploaderButton.svelte"
|
||||
},
|
||||
"FileUploaderDropContainer": {
|
||||
"path": "carbon-components-svelte/src/FileUploader/FileUploaderDropContainer.svelte"
|
||||
},
|
||||
"FileUploaderItem": {
|
||||
"path": "carbon-components-svelte/src/FileUploader/FileUploaderItem.svelte"
|
||||
},
|
||||
"FileUploaderSkeleton": {
|
||||
"path": "carbon-components-svelte/src/FileUploader/FileUploaderSkeleton.svelte"
|
||||
},
|
||||
"FluidForm": {
|
||||
"path": "carbon-components-svelte/src/FluidForm/FluidForm.svelte"
|
||||
},
|
||||
"Form": {
|
||||
"path": "carbon-components-svelte/src/Form/Form.svelte"
|
||||
},
|
||||
"FormGroup": {
|
||||
"path": "carbon-components-svelte/src/FormGroup/FormGroup.svelte"
|
||||
},
|
||||
"FormItem": {
|
||||
"path": "carbon-components-svelte/src/FormItem/FormItem.svelte"
|
||||
},
|
||||
"FormLabel": {
|
||||
"path": "carbon-components-svelte/src/FormLabel/FormLabel.svelte"
|
||||
},
|
||||
"Column": {
|
||||
"path": "carbon-components-svelte/src/Grid/Column.svelte"
|
||||
},
|
||||
"Grid": {
|
||||
"path": "carbon-components-svelte/src/Grid/Grid.svelte"
|
||||
},
|
||||
"Row": {
|
||||
"path": "carbon-components-svelte/src/Grid/Row.svelte"
|
||||
},
|
||||
"Icon": {
|
||||
"path": "carbon-components-svelte/src/Icon/Icon.svelte"
|
||||
},
|
||||
"IconSkeleton": {
|
||||
"path": "carbon-components-svelte/src/Icon/IconSkeleton.svelte"
|
||||
},
|
||||
"InlineLoading": {
|
||||
"path": "carbon-components-svelte/src/InlineLoading/InlineLoading.svelte"
|
||||
},
|
||||
"Link": {
|
||||
"path": "carbon-components-svelte/src/Link/Link.svelte"
|
||||
},
|
||||
"ListBox": {
|
||||
"path": "carbon-components-svelte/src/ListBox/ListBox.svelte"
|
||||
},
|
||||
"ListBoxField": {
|
||||
"path": "carbon-components-svelte/src/ListBox/ListBoxField.svelte"
|
||||
},
|
||||
"ListBoxMenu": {
|
||||
"path": "carbon-components-svelte/src/ListBox/ListBoxMenu.svelte"
|
||||
},
|
||||
"ListBoxMenuIcon": {
|
||||
"path": "carbon-components-svelte/src/ListBox/ListBoxMenuIcon.svelte"
|
||||
},
|
||||
"ListBoxMenuItem": {
|
||||
"path": "carbon-components-svelte/src/ListBox/ListBoxMenuItem.svelte"
|
||||
},
|
||||
"ListBoxSelection": {
|
||||
"path": "carbon-components-svelte/src/ListBox/ListBoxSelection.svelte"
|
||||
},
|
||||
"ListItem": {
|
||||
"path": "carbon-components-svelte/src/ListItem/ListItem.svelte"
|
||||
},
|
||||
"Loading": {
|
||||
"path": "carbon-components-svelte/src/Loading/Loading.svelte"
|
||||
},
|
||||
"Modal": {
|
||||
"path": "carbon-components-svelte/src/Modal/Modal.svelte"
|
||||
},
|
||||
"MultiSelect": {
|
||||
"path": "carbon-components-svelte/src/MultiSelect/MultiSelect.svelte"
|
||||
},
|
||||
"InlineNotification": {
|
||||
"path": "carbon-components-svelte/src/Notification/InlineNotification.svelte"
|
||||
},
|
||||
"NotificationActionButton": {
|
||||
"path": "carbon-components-svelte/src/Notification/NotificationActionButton.svelte"
|
||||
},
|
||||
"NotificationButton": {
|
||||
"path": "carbon-components-svelte/src/Notification/NotificationButton.svelte"
|
||||
},
|
||||
"NotificationIcon": {
|
||||
"path": "carbon-components-svelte/src/Notification/NotificationIcon.svelte"
|
||||
},
|
||||
"NotificationTextDetails": {
|
||||
"path": "carbon-components-svelte/src/Notification/NotificationTextDetails.svelte"
|
||||
},
|
||||
"ToastNotification": {
|
||||
"path": "carbon-components-svelte/src/Notification/ToastNotification.svelte"
|
||||
},
|
||||
"NumberInput": {
|
||||
"path": "carbon-components-svelte/src/NumberInput/NumberInput.svelte"
|
||||
},
|
||||
"NumberInputSkeleton": {
|
||||
"path": "carbon-components-svelte/src/NumberInput/NumberInputSkeleton.svelte"
|
||||
},
|
||||
"OrderedList": {
|
||||
"path": "carbon-components-svelte/src/OrderedList/OrderedList.svelte"
|
||||
},
|
||||
"OverflowMenu": {
|
||||
"path": "carbon-components-svelte/src/OverflowMenu/OverflowMenu.svelte"
|
||||
},
|
||||
"OverflowMenuItem": {
|
||||
"path": "carbon-components-svelte/src/OverflowMenu/OverflowMenuItem.svelte"
|
||||
},
|
||||
"Pagination": {
|
||||
"path": "carbon-components-svelte/src/Pagination/Pagination.svelte"
|
||||
},
|
||||
"PaginationSkeleton": {
|
||||
"path": "carbon-components-svelte/src/Pagination/PaginationSkeleton.svelte"
|
||||
},
|
||||
"PaginationItem": {
|
||||
"path": "carbon-components-svelte/src/PaginationNav/PaginationItem.svelte"
|
||||
},
|
||||
"PaginationNav": {
|
||||
"path": "carbon-components-svelte/src/PaginationNav/PaginationNav.svelte"
|
||||
},
|
||||
"PaginationOverflow": {
|
||||
"path": "carbon-components-svelte/src/PaginationNav/PaginationOverflow.svelte"
|
||||
},
|
||||
"ProgressIndicator": {
|
||||
"path": "carbon-components-svelte/src/ProgressIndicator/ProgressIndicator.svelte"
|
||||
},
|
||||
"ProgressIndicatorSkeleton": {
|
||||
"path": "carbon-components-svelte/src/ProgressIndicator/ProgressIndicatorSkeleton.svelte"
|
||||
},
|
||||
"ProgressStep": {
|
||||
"path": "carbon-components-svelte/src/ProgressIndicator/ProgressStep.svelte"
|
||||
},
|
||||
"RadioButton": {
|
||||
"path": "carbon-components-svelte/src/RadioButton/RadioButton.svelte"
|
||||
},
|
||||
"RadioButtonSkeleton": {
|
||||
"path": "carbon-components-svelte/src/RadioButton/RadioButtonSkeleton.svelte"
|
||||
},
|
||||
"RadioButtonGroup": {
|
||||
"path": "carbon-components-svelte/src/RadioButtonGroup/RadioButtonGroup.svelte"
|
||||
},
|
||||
"Search": {
|
||||
"path": "carbon-components-svelte/src/Search/Search.svelte"
|
||||
},
|
||||
"SearchSkeleton": {
|
||||
"path": "carbon-components-svelte/src/Search/SearchSkeleton.svelte"
|
||||
},
|
||||
"Select": {
|
||||
"path": "carbon-components-svelte/src/Select/Select.svelte"
|
||||
},
|
||||
"SelectItem": {
|
||||
"path": "carbon-components-svelte/src/Select/SelectItem.svelte"
|
||||
},
|
||||
"SelectItemGroup": {
|
||||
"path": "carbon-components-svelte/src/Select/SelectItemGroup.svelte"
|
||||
},
|
||||
"SelectSkeleton": {
|
||||
"path": "carbon-components-svelte/src/Select/SelectSkeleton.svelte"
|
||||
},
|
||||
"SkeletonPlaceholder": {
|
||||
"path": "carbon-components-svelte/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte"
|
||||
},
|
||||
"SkeletonText": {
|
||||
"path": "carbon-components-svelte/src/SkeletonText/SkeletonText.svelte"
|
||||
},
|
||||
"Slider": {
|
||||
"path": "carbon-components-svelte/src/Slider/Slider.svelte"
|
||||
},
|
||||
"SliderSkeleton": {
|
||||
"path": "carbon-components-svelte/src/Slider/SliderSkeleton.svelte"
|
||||
},
|
||||
"StructuredList": {
|
||||
"path": "carbon-components-svelte/src/StructuredList/StructuredList.svelte"
|
||||
},
|
||||
"StructuredListBody": {
|
||||
"path": "carbon-components-svelte/src/StructuredList/StructuredListBody.svelte"
|
||||
},
|
||||
"StructuredListCell": {
|
||||
"path": "carbon-components-svelte/src/StructuredList/StructuredListCell.svelte"
|
||||
},
|
||||
"StructuredListHead": {
|
||||
"path": "carbon-components-svelte/src/StructuredList/StructuredListHead.svelte"
|
||||
},
|
||||
"StructuredListInput": {
|
||||
"path": "carbon-components-svelte/src/StructuredList/StructuredListInput.svelte"
|
||||
},
|
||||
"StructuredListRow": {
|
||||
"path": "carbon-components-svelte/src/StructuredList/StructuredListRow.svelte"
|
||||
},
|
||||
"StructuredListSkeleton": {
|
||||
"path": "carbon-components-svelte/src/StructuredList/StructuredListSkeleton.svelte"
|
||||
},
|
||||
"Tab": {
|
||||
"path": "carbon-components-svelte/src/Tabs/Tab.svelte"
|
||||
},
|
||||
"TabContent": {
|
||||
"path": "carbon-components-svelte/src/Tabs/TabContent.svelte"
|
||||
},
|
||||
"Tabs": {
|
||||
"path": "carbon-components-svelte/src/Tabs/Tabs.svelte"
|
||||
},
|
||||
"TabsSkeleton": {
|
||||
"path": "carbon-components-svelte/src/Tabs/TabsSkeleton.svelte"
|
||||
},
|
||||
"Tag": {
|
||||
"path": "carbon-components-svelte/src/Tag/Tag.svelte"
|
||||
},
|
||||
"TagSkeleton": {
|
||||
"path": "carbon-components-svelte/src/Tag/TagSkeleton.svelte"
|
||||
},
|
||||
"TextArea": {
|
||||
"path": "carbon-components-svelte/src/TextArea/TextArea.svelte"
|
||||
},
|
||||
"TextAreaSkeleton": {
|
||||
"path": "carbon-components-svelte/src/TextArea/TextAreaSkeleton.svelte"
|
||||
},
|
||||
"PasswordInput": {
|
||||
"path": "carbon-components-svelte/src/TextInput/PasswordInput.svelte"
|
||||
},
|
||||
"TextInput": {
|
||||
"path": "carbon-components-svelte/src/TextInput/TextInput.svelte"
|
||||
},
|
||||
"TextInputSkeleton": {
|
||||
"path": "carbon-components-svelte/src/TextInput/TextInputSkeleton.svelte"
|
||||
},
|
||||
"ClickableTile": {
|
||||
"path": "carbon-components-svelte/src/Tile/ClickableTile.svelte"
|
||||
},
|
||||
"ExpandableTile": {
|
||||
"path": "carbon-components-svelte/src/Tile/ExpandableTile.svelte"
|
||||
},
|
||||
"RadioTile": {
|
||||
"path": "carbon-components-svelte/src/Tile/RadioTile.svelte"
|
||||
},
|
||||
"SelectableTile": {
|
||||
"path": "carbon-components-svelte/src/Tile/SelectableTile.svelte"
|
||||
},
|
||||
"Tile": {
|
||||
"path": "carbon-components-svelte/src/Tile/Tile.svelte"
|
||||
},
|
||||
"TileGroup": {
|
||||
"path": "carbon-components-svelte/src/Tile/TileGroup.svelte"
|
||||
},
|
||||
"TimePicker": {
|
||||
"path": "carbon-components-svelte/src/TimePicker/TimePicker.svelte"
|
||||
},
|
||||
"TimePickerSelect": {
|
||||
"path": "carbon-components-svelte/src/TimePicker/TimePickerSelect.svelte"
|
||||
},
|
||||
"Toggle": {
|
||||
"path": "carbon-components-svelte/src/Toggle/Toggle.svelte"
|
||||
},
|
||||
"ToggleSkeleton": {
|
||||
"path": "carbon-components-svelte/src/Toggle/ToggleSkeleton.svelte"
|
||||
},
|
||||
"ToggleSmall": {
|
||||
"path": "carbon-components-svelte/src/ToggleSmall/ToggleSmall.svelte"
|
||||
},
|
||||
"ToggleSmallSkeleton": {
|
||||
"path": "carbon-components-svelte/src/ToggleSmall/ToggleSmallSkeleton.svelte"
|
||||
},
|
||||
"Tooltip": {
|
||||
"path": "carbon-components-svelte/src/Tooltip/Tooltip.svelte"
|
||||
},
|
||||
"TooltipDefinition": {
|
||||
"path": "carbon-components-svelte/src/TooltipDefinition/TooltipDefinition.svelte"
|
||||
},
|
||||
"TooltipIcon": {
|
||||
"path": "carbon-components-svelte/src/TooltipIcon/TooltipIcon.svelte"
|
||||
},
|
||||
"Content": {
|
||||
"path": "carbon-components-svelte/src/UIShell/Content.svelte"
|
||||
},
|
||||
"Header": {
|
||||
"path": "carbon-components-svelte/src/UIShell/GlobalHeader/Header.svelte"
|
||||
},
|
||||
"HeaderAction": {
|
||||
"path": "carbon-components-svelte/src/UIShell/GlobalHeader/HeaderAction.svelte"
|
||||
},
|
||||
"HeaderActionLink": {
|
||||
"path": "carbon-components-svelte/src/UIShell/GlobalHeader/HeaderActionLink.svelte"
|
||||
},
|
||||
"HeaderActionSearch": {
|
||||
"path": "carbon-components-svelte/src/UIShell/GlobalHeader/HeaderActionSearch.svelte"
|
||||
},
|
||||
"HeaderNav": {
|
||||
"path": "carbon-components-svelte/src/UIShell/GlobalHeader/HeaderNav.svelte"
|
||||
},
|
||||
"HeaderNavItem": {
|
||||
"path": "carbon-components-svelte/src/UIShell/GlobalHeader/HeaderNavItem.svelte"
|
||||
},
|
||||
"HeaderNavMenu": {
|
||||
"path": "carbon-components-svelte/src/UIShell/GlobalHeader/HeaderNavMenu.svelte"
|
||||
},
|
||||
"HeaderPanelDivider": {
|
||||
"path": "carbon-components-svelte/src/UIShell/GlobalHeader/HeaderPanelDivider.svelte"
|
||||
},
|
||||
"HeaderPanelLink": {
|
||||
"path": "carbon-components-svelte/src/UIShell/GlobalHeader/HeaderPanelLink.svelte"
|
||||
},
|
||||
"HeaderPanelLinks": {
|
||||
"path": "carbon-components-svelte/src/UIShell/GlobalHeader/HeaderPanelLinks.svelte"
|
||||
},
|
||||
"HeaderUtilities": {
|
||||
"path": "carbon-components-svelte/src/UIShell/GlobalHeader/HeaderUtilities.svelte"
|
||||
},
|
||||
"HeaderGlobalAction": {
|
||||
"path": "carbon-components-svelte/src/UIShell/HeaderGlobalAction.svelte"
|
||||
},
|
||||
"HeaderSearch": {
|
||||
"path": "carbon-components-svelte/src/UIShell/HeaderSearch.svelte"
|
||||
},
|
||||
"HamburgerMenu": {
|
||||
"path": "carbon-components-svelte/src/UIShell/SideNav/HamburgerMenu.svelte"
|
||||
},
|
||||
"SideNav": {
|
||||
"path": "carbon-components-svelte/src/UIShell/SideNav/SideNav.svelte"
|
||||
},
|
||||
"SideNavItems": {
|
||||
"path": "carbon-components-svelte/src/UIShell/SideNav/SideNavItems.svelte"
|
||||
},
|
||||
"SideNavLink": {
|
||||
"path": "carbon-components-svelte/src/UIShell/SideNav/SideNavLink.svelte"
|
||||
},
|
||||
"SideNavMenu": {
|
||||
"path": "carbon-components-svelte/src/UIShell/SideNav/SideNavMenu.svelte"
|
||||
},
|
||||
"SideNavMenuItem": {
|
||||
"path": "carbon-components-svelte/src/UIShell/SideNav/SideNavMenuItem.svelte"
|
||||
},
|
||||
"SkipToContent": {
|
||||
"path": "carbon-components-svelte/src/UIShell/SkipToContent.svelte"
|
||||
},
|
||||
"UnorderedList": {
|
||||
"path": "carbon-components-svelte/src/UnorderedList/UnorderedList.svelte"
|
||||
}
|
||||
}
|
||||
}
|
||||
5
preprocess/index.js
Normal file
5
preprocess/index.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
const { optimizeCarbonImports } = require("./optimize-carbon-imports");
|
||||
|
||||
module.exports = {
|
||||
optimizeCarbonImports,
|
||||
};
|
||||
97
preprocess/optimize-carbon-imports.js
Normal file
97
preprocess/optimize-carbon-imports.js
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
const { parse, walk } = require("svelte/compiler");
|
||||
const api = require("./api.json");
|
||||
|
||||
const carbon = {
|
||||
components: "carbon-components-svelte",
|
||||
icons: "carbon-icons-svelte",
|
||||
pictograms: "carbon-pictograms-svelte",
|
||||
};
|
||||
|
||||
function getPackageJson() {
|
||||
const path_pkg = path.join(process.cwd(), "package.json");
|
||||
|
||||
if (fs.existsSync(path_pkg)) {
|
||||
return JSON.parse(fs.readFileSync(path_pkg, "utf-8"));
|
||||
} else {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function getCarbonVersions() {
|
||||
const pkg = getPackageJson();
|
||||
const devDeps = pkg.devDependencies || {};
|
||||
const deps = pkg.dependencies || {};
|
||||
|
||||
return [carbon.components, carbon.icons, carbon.pictograms].reduce((a, c) => {
|
||||
let version = devDeps[c] || deps[c];
|
||||
|
||||
if (version !== undefined) {
|
||||
const [major, minor, patch] = version.replace(/^(\^|\~)/, "").split(".");
|
||||
version = major;
|
||||
}
|
||||
|
||||
return { ...a, [c]: version };
|
||||
}, {});
|
||||
}
|
||||
|
||||
const versions = getCarbonVersions();
|
||||
|
||||
function optimizeCarbonImports() {
|
||||
return {
|
||||
script: ({ content, filename }) => {
|
||||
if (/node_modules/.test(filename)) return { code: content };
|
||||
|
||||
const ast = parse(`<script>${content}</script>`, { filename });
|
||||
|
||||
let cursor = -8;
|
||||
|
||||
function replaceContent(node, onSpecifier) {
|
||||
const replacer = node.specifiers.map((i) => onSpecifier(i)).join("\n");
|
||||
const replacee = content.slice(node.start + cursor, node.end + cursor);
|
||||
|
||||
content = content.replace(replacee, replacer);
|
||||
cursor += replacer.length - replacee.length;
|
||||
}
|
||||
|
||||
walk(ast.instance, {
|
||||
enter(node) {
|
||||
if (node.type === "ImportDeclaration") {
|
||||
switch (node.source.value) {
|
||||
case carbon.components:
|
||||
replaceContent(node, ({ local, imported }) => {
|
||||
return `import ${local.name} from "${
|
||||
api.components[imported.name].path
|
||||
}";`;
|
||||
});
|
||||
break;
|
||||
|
||||
case carbon.icons:
|
||||
replaceContent(node, ({ local, imported }) => {
|
||||
return `import ${local.name} from "carbon-icons-svelte/lib/${imported.name}/${imported.name}.svelte";`;
|
||||
});
|
||||
break;
|
||||
|
||||
case carbon.pictograms:
|
||||
replaceContent(node, ({ local, imported }) => {
|
||||
if (versions[carbon.pictograms] === "11") {
|
||||
return `import ${local.name} from "carbon-pictograms-svelte/lib/${imported.name}.svelte";`;
|
||||
}
|
||||
|
||||
return `import ${local.name} from "carbon-pictograms-svelte/lib/${imported.name}/${imported.name}.svelte";`;
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return { code: content };
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
optimizeCarbonImports,
|
||||
};
|
||||
20
scripts/build-api.js
Normal file
20
scripts/build-api.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
const glob = require("glob");
|
||||
const pkg = require("../package.json");
|
||||
|
||||
function buildApi() {
|
||||
const components = {};
|
||||
|
||||
glob.sync("src/**/*.svelte").forEach((file) => {
|
||||
const { name } = path.parse(file);
|
||||
components[name] = { path: path.join(pkg.name, file) };
|
||||
});
|
||||
|
||||
fs.writeFileSync(
|
||||
"preprocess/api.json",
|
||||
JSON.stringify({ version: pkg.version, components }, null, 2)
|
||||
);
|
||||
}
|
||||
|
||||
buildApi();
|
||||
1
tests/preprocess/index.js
Normal file
1
tests/preprocess/index.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
require("./optimize-carbon-imports.test");
|
||||
139
tests/preprocess/optimize-carbon-imports.test.js
Normal file
139
tests/preprocess/optimize-carbon-imports.test.js
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
const assert = require("assert");
|
||||
const { preprocess } = require("svelte/compiler");
|
||||
const { optimizeCarbonImports } = require("../../preprocess");
|
||||
|
||||
const fixtures = [
|
||||
{
|
||||
name: "Single base import",
|
||||
input: `
|
||||
<script>
|
||||
import { Accordion } from "carbon-components-svelte";
|
||||
</script>`,
|
||||
output: `
|
||||
<script>
|
||||
import Accordion from "carbon-components-svelte/src/Accordion/Accordion.svelte";
|
||||
</script>`,
|
||||
},
|
||||
{
|
||||
name: "Single base import with markup, styles",
|
||||
input: `
|
||||
<script>
|
||||
import { Accordion } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<Accordion />
|
||||
|
||||
<style>:global(*) {}</style>`,
|
||||
output: `
|
||||
<script>
|
||||
import Accordion from "carbon-components-svelte/src/Accordion/Accordion.svelte";
|
||||
</script>
|
||||
|
||||
<Accordion />
|
||||
|
||||
<style>:global(*) {}</style>`,
|
||||
},
|
||||
{
|
||||
name: "Single, aliased base import",
|
||||
input: `
|
||||
<script>
|
||||
import { Accordion as A } from "carbon-components-svelte";
|
||||
</script>`,
|
||||
output: `
|
||||
<script>
|
||||
import A from "carbon-components-svelte/src/Accordion/Accordion.svelte";
|
||||
</script>`,
|
||||
},
|
||||
{
|
||||
name: "Multiple base imports",
|
||||
input: `
|
||||
<script>
|
||||
import { Accordion, AccordionItem } from "carbon-components-svelte";
|
||||
</script>`,
|
||||
output: `
|
||||
<script>
|
||||
import Accordion from "carbon-components-svelte/src/Accordion/Accordion.svelte";
|
||||
import AccordionItem from "carbon-components-svelte/src/Accordion/AccordionItem.svelte";
|
||||
</script>`,
|
||||
},
|
||||
{
|
||||
name: "Multiple imports from component folder",
|
||||
input: `
|
||||
<script>
|
||||
import { Accordion, AccordionItem } from "carbon-components-svelte/src/Accordion";
|
||||
</script>`,
|
||||
output: `
|
||||
<script>
|
||||
import { Accordion, AccordionItem } from "carbon-components-svelte/src/Accordion";
|
||||
</script>`,
|
||||
},
|
||||
{
|
||||
name: "Direct import from component source",
|
||||
input: `
|
||||
<script>
|
||||
import AccordionItem from "carbon-components-svelte/src/Accordion/AccordionItem.svelte";
|
||||
</script>`,
|
||||
output: `
|
||||
<script>
|
||||
import AccordionItem from "carbon-components-svelte/src/Accordion/AccordionItem.svelte";
|
||||
</script>`,
|
||||
},
|
||||
{
|
||||
name: "Carbon icons",
|
||||
input: `
|
||||
<script>
|
||||
import { Add16 as Add } from "carbon-icons-svelte";
|
||||
import { Add20, Add24 } from "carbon-icons-svelte";
|
||||
import ArrowRight20 from "carbon-icons-svelte/lib/ArrowRight20";
|
||||
</script>`,
|
||||
output: `
|
||||
<script>
|
||||
import Add from "carbon-icons-svelte/lib/Add16/Add16.svelte";
|
||||
import Add20 from "carbon-icons-svelte/lib/Add20/Add20.svelte";
|
||||
import Add24 from "carbon-icons-svelte/lib/Add24/Add24.svelte";
|
||||
import ArrowRight20 from "carbon-icons-svelte/lib/ArrowRight20";
|
||||
</script>`,
|
||||
},
|
||||
{
|
||||
name: "Carbon pictograms",
|
||||
input: `
|
||||
<script>
|
||||
import { Airplane as Aeroplane } from "carbon-pictograms-svelte";
|
||||
import { ActiveServer, Advocate } from "carbon-pictograms-svelte";
|
||||
import Agriculture from "carbon-pictograms-svelte/lib/Agriculture";
|
||||
</script>`,
|
||||
output: `
|
||||
<script>
|
||||
import Aeroplane from "carbon-pictograms-svelte/lib/Airplane/Airplane.svelte";
|
||||
import ActiveServer from "carbon-pictograms-svelte/lib/ActiveServer/ActiveServer.svelte";
|
||||
import Advocate from "carbon-pictograms-svelte/lib/Advocate/Advocate.svelte";
|
||||
import Agriculture from "carbon-pictograms-svelte/lib/Agriculture";
|
||||
</script>`,
|
||||
},
|
||||
{
|
||||
name: "Integration",
|
||||
input: `
|
||||
<script>
|
||||
import { Button, Header } from "carbon-components-svelte";
|
||||
import { Notification20 } from "carbon-icons-svelte";
|
||||
import { Airplane } from "carbon-pictograms-svelte";
|
||||
</script>`,
|
||||
output: `
|
||||
<script>
|
||||
import Button from "carbon-components-svelte/src/Button/Button.svelte";
|
||||
import Header from "carbon-components-svelte/src/UIShell/GlobalHeader/Header.svelte";
|
||||
import Notification20 from "carbon-icons-svelte/lib/Notification20/Notification20.svelte";
|
||||
import Airplane from "carbon-pictograms-svelte/lib/Airplane/Airplane.svelte";
|
||||
</script>
|
||||
`,
|
||||
},
|
||||
];
|
||||
|
||||
(async () => {
|
||||
for (const { name, input, output } of fixtures) {
|
||||
console.log("[optimizeCarbonImports]", name);
|
||||
|
||||
const result = await preprocess(input.trim(), [optimizeCarbonImports()]);
|
||||
assert.strictEqual(result.toString(), output.trim());
|
||||
}
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue