Feature (migrate/skeleton-3): Exports are now properly migrated. (#3139)

.changeset/nervous-poets-pull.md

@@ -0,0 +1,5 @@
+---
+'@skeletonlabs/skeleton-cli': patch
+---
+
+Feature (migrate/skeleton-3): All removed and renamed exports are now migrated.

packages/skeleton-cli/src/commands/migrate/migrations/skeleton-3/transformers/transform-module.ts

@@ -1,9 +1,9 @@
 import { transformClasses } from './transform-classes';
-import { COMPONENT_MAPPINGS } from '../utility/component-mappings';
-import { REMOVED_COMPONENTS } from '../utility/removed-components';
 import { Node } from 'ts-morph';
 import { addNamedImport } from '../../../../../utility/ts-morph/add-named-import';
 import { parseSourceFile } from '../../../../../utility/ts-morph/parse-source-file';
+import { RENAMED_EXPORTS } from '../utility/exports/renamed-exports';
+import { REMOVED_EXPORTS } from '../utility/exports/removed-exports';
 
 function transformModule(code: string) {
 	const file = parseSourceFile(code);
@@ -16,18 +16,13 @@ function transformModule(code: string) {
 		}
 		if (Node.isImportSpecifier(node)) {
 			const name = node.getName();
-			if (Object.hasOwn(COMPONENT_MAPPINGS, name)) {
+			if (Object.hasOwn(RENAMED_EXPORTS, name) && !RENAMED_EXPORTS[name].match(/^[A-Za-z]+\.[A-Za-z]+$/)) {
 				node.remove();
-				addNamedImport(file, '@skeletonlabs/skeleton-svelte', COMPONENT_MAPPINGS[name]);
+				addNamedImport(file, '@skeletonlabs/skeleton-svelte', RENAMED_EXPORTS[name]);
 			}
-			if (REMOVED_COMPONENTS.includes(name)) {
-				const parent = node.getParent().getParent().getParent();
-				if (
-					Node.isImportDeclaration(parent) &&
-					parent.getNamedImports().length === 1 &&
-					!parent.getDefaultImport() &&
-					!parent.getNamespaceImport()
-				) {
+			if (REMOVED_EXPORTS.includes(name)) {
+				const parent = node.getImportDeclaration();
+				if (parent.getNamedImports().length === 1 && !parent.getDefaultImport() && !parent.getNamespaceImport()) {
 					parent.remove();
 				} else {
 					node.remove();
@@ -36,8 +31,8 @@ function transformModule(code: string) {
 		}
 		if (!node.wasForgotten() && Node.isIdentifier(node)) {
 			const name = node.getText();
-			if (Object.hasOwn(COMPONENT_MAPPINGS, name)) {
-				node.replaceWithText(COMPONENT_MAPPINGS[name]);
+			if (Object.hasOwn(RENAMED_EXPORTS, name)) {
+				node.replaceWithText(RENAMED_EXPORTS[name]);
 			}
 		}
 		if (!node.wasForgotten() && Node.isStringLiteral(node) && !Node.isImportDeclaration(node.getParent())) {

packages/skeleton-cli/src/commands/migrate/migrations/skeleton-3/transformers/transform-svelte.ts

@@ -4,7 +4,7 @@ import { walk } from 'zimmerframe';
 import MagicString from 'magic-string';
 import { transformClasses } from './transform-classes';
 import { transformModule } from './transform-module';
-import { COMPONENT_MAPPINGS } from '../utility/component-mappings';
+import { RENAMED_EXPORTS } from '../utility/exports/renamed-exports';
 
 function renameComponent(s: MagicString, node: AST.Component, name: string) {
 	const adjustedStart = node.start + 1;
@@ -66,8 +66,8 @@ function transformFragment(s: MagicString, fragment: AST.Fragment) {
 				ctx.next();
 			},
 			Component(node, ctx) {
-				if (Object.hasOwn(COMPONENT_MAPPINGS, node.name) && hasRange(node)) {
-					renameComponent(s, node, COMPONENT_MAPPINGS[node.name]);
+				if (Object.hasOwn(RENAMED_EXPORTS, node.name) && hasRange(node)) {
+					renameComponent(s, node, RENAMED_EXPORTS[node.name]);
 				}
 				ctx.next();
 			}

packages/skeleton-cli/src/commands/migrate/migrations/skeleton-3/utility/exports/removed-exports.ts

@@ -0,0 +1,58 @@
+const REMOVED_EXPORTS = [
+	'Apollo',
+	'AppRailAnchor',
+	'AppShell',
+	'Autocomplete',
+	'BlueNight',
+	'CodeBlock',
+	'ConicGradient',
+	'Drawer',
+	'Emerald',
+	'GreenFall',
+	'LightSwitch',
+	'ListBox',
+	'ListBoxItem',
+	'Modal',
+	'Noir',
+	'NoirLight',
+	'RecursiveTreeView',
+	'RecursiveTreeViewItem',
+	'Rustic',
+	'Step',
+	'Stepper',
+	'Summer84',
+	'Table',
+	'TableOfContents',
+	'TreeView',
+	'TreeViewItem',
+	'XPro',
+	'autoModeWatcher',
+	'clipboard',
+	'filter',
+	'focusTrap',
+	'getDrawerStore',
+	'getModalStore',
+	'getModeAutoPrefers',
+	'getModeOsPrefers',
+	'getModeUserPrefers',
+	'getToastStore',
+	'initializeStores',
+	'localStorageStore',
+	'modeCurrent',
+	'modeOsPrefers',
+	'modeUserPrefers',
+	'popup',
+	'prefersReducedMotionStore',
+	'setInitialClassState',
+	'setModeCurrent',
+	'setModeUserPrefers',
+	'storeHighlightJs',
+	'storePopup',
+	'tableMapperValues',
+	'tableSourceMapper',
+	'tableSourceValues',
+	'tocCrawler',
+	'tocStore'
+];
+
+export { REMOVED_EXPORTS };

packages/skeleton-cli/src/commands/migrate/migrations/skeleton-3/utility/component-mappings.ts → packages/skeleton-cli/src/commands/migrate/migrations/skeleton-3/utility/exports/renamed-exports.ts

@@ -1,15 +1,21 @@
-const COMPONENT_MAPPINGS: Record<string, string> = {
+const RENAMED_EXPORTS: Record<string, string> = {
+	AccordionItem: 'Accordion.Item',
 	AppRail: 'Navigation',
+	AppRailTile: 'Navigation.Tile',
 	FileButton: 'FileUpload',
 	FileDropzone: 'FileUpload',
 	InputChip: 'TagsInput',
 	Paginator: 'Pagination',
 	ProgressBar: 'Progress',
 	ProgressRadial: 'ProgressRing',
 	RadioGroup: 'Segment',
+	RadioItem: 'Segment.Item',
 	RangeSlider: 'Slider',
+	Ratings: 'Rating',
 	SlideToggle: 'Switch',
-	TabGroup: 'Tabs'
+	TabAnchor: 'Tabs.Control',
+	TabGroup: 'Tabs',
+	Toast: 'ToastProvider'
 };
 
-export { COMPONENT_MAPPINGS };
+export { RENAMED_EXPORTS };

packages/skeleton-cli/test/migrate/skeleton-3/fixtures/module/remove-import

@@ -0,0 +1,56 @@
+import {
+    Apollo,
+    AppRailAnchor,
+    AppShell,
+    Autocomplete,
+    BlueNight,
+    CodeBlock,
+    ConicGradient,
+    Drawer,
+    Emerald,
+    GreenFall,
+    LightSwitch,
+    ListBox,
+    ListBoxItem,
+    Modal,
+    Noir,
+    NoirLight,
+    RecursiveTreeView,
+    RecursiveTreeViewItem,
+    Rustic,
+    Step,
+    Stepper,
+    Summer84,
+    Table,
+    TableOfContents,
+    TreeView,
+    TreeViewItem,
+    XPro,
+    autoModeWatcher,
+    clipboard,
+    filter,
+    focusTrap,
+    getDrawerStore,
+    getModalStore,
+    getModeAutoPrefers,
+    getModeOsPrefers,
+    getModeUserPrefers,
+    getToastStore,
+    initializeStores,
+    localStorageStore,
+    modeCurrent,
+    modeOsPrefers,
+    modeUserPrefers,
+    popup,
+    prefersReducedMotionStore,
+    setInitialClassState,
+    setModeCurrent,
+    setModeUserPrefers,
+    storeHighlightJs,
+    storePopup,
+    tableMapperValues,
+    tableSourceMapper,
+    tableSourceValues,
+    tocCrawler,
+    tocStore
+} from "@skeletonlabs/skeleton";

packages/skeleton-cli/test/migrate/skeleton-3/fixtures/module/remove-import-keep-default

@@ -0,0 +1 @@
+import Foo, { Apollo } from "@skeletonlabs/skeleton";

packages/skeleton-cli/test/migrate/skeleton-3/fixtures/module/remove-import-keep-named-imports

@@ -0,0 +1 @@
+import { Foo, Apollo } from "@skeletonlabs/skeleton";

packages/skeleton-cli/test/migrate/skeleton-3/fixtures/module/rename-import

@@ -0,0 +1 @@
+import { AppRail, FileButton, FileDropzone, InputChip, Paginator, ProgressBar, ProgressRadial, RadioGroup, RangeSlider, SlideToggle, TabGroup } from "@skeletonlabs/skeleton";

packages/skeleton-cli/test/migrate/skeleton-3/fixtures/svelte/rename-component-import-and-usages → packages/skeleton-cli/test/migrate/skeleton-3/fixtures/svelte/rename-components

@@ -1,21 +1,9 @@
-<script>
-	import { AppRail, FileButton, FileDropzone, InputChip, Paginator, ProgressBar, ProgressRadial, RadioGroup, RangeSlider, SlideToggle, TabGroup } from "@skeletonlabs/skeleton";
-
-	AppRail;
-	FileButton;
-	FileDropzone;
-	InputChip;
-	Paginator;
-	ProgressBar;
-	ProgressRadial;
-	RadioGroup;
-	RangeSlider;
-	SlideToggle;
-	TabGroup;
-</script>
-
+<AccordionItem />
+<AccordionItem></AccordionItem>
 <AppRail />
 <AppRail></AppRail>
+<AppRailTile />
+<AppRailTile></AppRailTile>
 <FileButton />
 <FileButton></FileButton>
 <FileDropzone />
@@ -30,9 +18,17 @@
 <ProgressRadial></ProgressRadial>
 <RadioGroup />
 <RadioGroup></RadioGroup>
+<RadioItem />
+<RadioItem></RadioItem>
 <RangeSlider />
 <RangeSlider></RangeSlider>
+<Ratings />
+<Ratings></Ratings>
 <SlideToggle />
 <SlideToggle></SlideToggle>
 <TabGroup />
 <TabGroup></TabGroup>
+<TabAnchor />
+<TabAnchor></TabAnchor>
+<Toast />
+<Toast></Toast>