Use direct imports for Carbon components and icons to speed up build …

…time

.github/workflows/pages.yaml

@@ -20,7 +20,7 @@ jobs:
         node-version: [18.x]
 
     permissions:
-      contents: read
+      contents: write
       pages: write
       id-token: write
 

README.md

@@ -40,7 +40,8 @@ Then, create a ̀ src/lib/admin/Dashboard.ts` file, and start writing the necess
 // src/lib/admin/Dashboard.ts
 
 // Some fancy icons for a neat UI:
-import { Book, Home } from 'carbon-icons-svelte';
+import Book from 'carbon-icons-svelte/lib/Book.svelte';
+import Home from 'carbon-icons-svelte/lib/Home.svelte';
 
 // SvelteAdmin classes:
 import { DashboardDefinition, UrlAction } from '@orbitale/svelte-admin';
@@ -79,7 +80,8 @@ Then, create the `src/lib/admin/booksCrud.ts` file, it will host your "Books" Cr
 // src/lib/admin/booksCrud.ts
 
 // Again, some icons to pop your admin!
-import { Pen, TrashCan } from 'carbon-icons-svelte';
+import Pen from 'carbon-icons-svelte/lib/Pen.svelte';
+import TrashCan from 'carbon-icons-svelte/lib/TrashCan.svelte';
 
 // SvelteAdmin classes:
 import {
@@ -122,8 +124,8 @@ export const booksCrud = new CrudDefinition(
 			// Basic data grid listing all your Books.
 			// Will display "edit" and "delete" buttons on the right of the list.
 			new ListAction(fields, [
-				new UrlAction('Edit', '/admin/books/edit/:id', Pen),
-				new UrlAction('Delete', '/admin/books/delete/:id', TrashCan)
+				new UrlAction('Edit', '/admin/books/edit', Pen),
+				new UrlAction('Delete', '/admin/books/delete', TrashCan)
 			]),
 
 			// Straightforward "edit" form, can be accessed via the "edit" link above.

src/lib/admin/Crud/CrudDelete.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { _ } from 'svelte-i18n';
-	import { Button, InlineNotification } from 'carbon-components-svelte';
+	import Button from 'carbon-components-svelte/src/Button/Button.svelte';
+	import InlineNotification from 'carbon-components-svelte/src/Notification/InlineNotification.svelte';
 
 	import type { CrudDefinition } from './definition.ts';
 	import { type CrudAction, DeleteAction } from './actions.ts';

src/lib/admin/Crud/CrudEdit.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
-	import {
-		ButtonSkeleton,
-		CheckboxSkeleton,
-		InlineNotification,
-		TextAreaSkeleton,
-		TextInputSkeleton
-	} from 'carbon-components-svelte';
+	import ButtonSkeleton from 'carbon-components-svelte/src/Button/ButtonSkeleton.svelte';
+	import CheckboxSkeleton from 'carbon-components-svelte/src/Checkbox/CheckboxSkeleton.svelte';
+	import InlineNotification from 'carbon-components-svelte/src/Notification/InlineNotification.svelte';
+	import TextAreaSkeleton from 'carbon-components-svelte/src/TextArea/TextAreaSkeleton.svelte';
+	import TextInputSkeleton from 'carbon-components-svelte/src/TextInput/TextInputSkeleton.svelte';
 
 	import CrudForm from './CrudForm.svelte';
 	import type { CrudDefinition } from './definition.ts';

src/lib/admin/Crud/CrudForm.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { Button, Form, FormGroup } from 'carbon-components-svelte';
+	import Button from 'carbon-components-svelte/src/Button/Button.svelte';
+	import Form from 'carbon-components-svelte/src/Form/Form.svelte';
+	import FormGroup from 'carbon-components-svelte/src/FormGroup/FormGroup.svelte';
 	import { createEventDispatcher } from 'svelte';
 	import { _ } from 'svelte-i18n';
 

src/lib/admin/Crud/FieldComponents/CheckboxField.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Checkbox } from 'carbon-components-svelte';
-	import { CheckboxField, type CheckboxOptions } from '../../FieldDefinitions/Checkbox';
+	import Checkbox from 'carbon-components-svelte/src/Checkbox/Checkbox.svelte';
+	import type { CheckboxField } from '../../FieldDefinitions/Checkbox';
 	import { createEventDispatcher } from 'svelte';
 
-	export let field: CheckboxField<CheckboxOptions>;
+	export let field: CheckboxField;
 	export let value: boolean | undefined;
 
 	if (value === undefined) {

src/lib/admin/Crud/FieldComponents/DefaultField.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { TextInput } from 'carbon-components-svelte';
+	import TextInput from 'carbon-components-svelte/src/TextInput/TextInput.svelte';
 	import type { Field } from '../../FieldDefinitions/Field';
 	import type { Options } from '../../FieldDefinitions/Options';
 

src/lib/admin/Crud/FieldComponents/NumberField.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { NumberInput } from 'carbon-components-svelte';
-	import { NumberField, type NumberOptions } from '../../FieldDefinitions/Number';
+	import NumberInput from 'carbon-components-svelte/src/NumberInput/NumberInput.svelte';
+	import type { NumberField } from '../../FieldDefinitions/Number';
 
-	export let field: NumberField<NumberOptions>;
+	export let field: NumberField;
 	export let value: string | number | undefined;
 
 	if (typeof value === 'string') {

src/lib/admin/Crud/FieldComponents/TabsField.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
-	import { FormGroup } from 'carbon-components-svelte';
-	import { TabsField, type TabOptions } from '../../FieldDefinitions/TabsField';
+	import FormGroup from 'carbon-components-svelte/src/FormGroup/FormGroup.svelte';
+	import type { TabsField } from '../../FieldDefinitions/TabsField';
 	import CrudFormField from '../CrudFormField.svelte';
+	import type { CrudAction } from '../actions.ts';
 
-	export let field: TabsField<TabOptions>;
+	export let action: CrudAction;
+	export let field: TabsField;
 	export let data: object | undefined = {};
 </script>
 
-{#each field.fields as field}
+{#each field.fields as tabbed_field}
 	<FormGroup>
-		<CrudFormField {data} value={data[field.name]} {field} />
+		<CrudFormField {action} {data} value={data[tabbed_field.name]} field={tabbed_field} />
 	</FormGroup>
 {/each}

src/lib/admin/Crud/FieldComponents/TextField.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { TextInput } from 'carbon-components-svelte';
-	import { TextField, type TextOptions } from '../../FieldDefinitions/Text';
+	import TextInput from 'carbon-components-svelte/src/TextInput/TextInput.svelte';
+	import type { TextField } from '../../FieldDefinitions/Text';
 
-	export let field: TextField<TextOptions>;
+	export let field: TextField;
 	export let value: string | undefined;
 </script>
 

src/lib/admin/Crud/FieldComponents/TextareaField.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { TextArea } from 'carbon-components-svelte';
-	import { TextareaField, type TextareaOptions } from '../../FieldDefinitions/Textarea';
+	import TextArea from 'carbon-components-svelte/src/TextArea/TextArea.svelte';
+	import type { TextareaField } from '../../FieldDefinitions/Textarea';
 
-	export let field: TextareaField<TextareaOptions>;
+	export let field: TextareaField;
 	export let value: string | undefined;
 </script>
 

src/lib/admin/Crud/FieldComponents/ToggleField.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { Toggle } from 'carbon-components-svelte';
+	import Toggle from 'carbon-components-svelte/src/Toggle/Toggle.svelte';
 	import { createEventDispatcher } from 'svelte';
-	import { ToggleField, type ToggleOptions } from '../../FieldDefinitions/Toggle';
+	import type { ToggleField } from '../../FieldDefinitions/Toggle';
 
-	export let field: ToggleField<ToggleOptions>;
+	export let field: ToggleField;
 	export let value: boolean | undefined;
 
 	if (value === undefined) {

src/lib/admin/Crud/FieldComponents/UrlField.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import { TextInput } from 'carbon-components-svelte';
-	import { UrlField, type UrlOptions } from '../../FieldDefinitions/Url';
+	import TextInput from 'carbon-components-svelte/src/TextInput/TextInput.svelte';
+	import type { UrlField } from '../../FieldDefinitions/Url';
 
 	// Maximum length of an URL in Chrome (and IE…) is 2083, Firefox is 65536 and Safari is 80000.
 	// The lowest value is the safest one to use for cross-browser compatibility.
 	const maxCount = 2083;
 
-	export let field: UrlField<UrlOptions>;
-	export let value: URL | string | undefined;
+	export let field: UrlField;
+	export let value: URL | string | null | undefined;
 
 	if (value instanceof URL) {
 		value = value.toString();

src/lib/admin/Crud/Tabs.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { Tabs, Tab, TabContent } from 'carbon-components-svelte';
+	import Tabs from 'carbon-components-svelte/src/Tabs/Tabs.svelte';
+	import Tab from 'carbon-components-svelte/src/Tabs/Tab.svelte';
+	import TabContent from 'carbon-components-svelte/src/Tabs/TabContent.svelte';
 	import CrudFormField from './CrudFormField.svelte';
 	import type { TabsField } from '../FieldDefinitions/TabsField';
 	import type { CrudAction } from './actions';

src/lib/admin/Dashboard/Dashboard.svelte

@@ -11,7 +11,7 @@
 
 <script lang="ts">
 	import { _ } from 'svelte-i18n';
-	import { InlineNotification } from 'carbon-components-svelte';
+	import InlineNotification from 'carbon-components-svelte/src/Notification/InlineNotification.svelte';
 	import AdminLayout from '../Layout/AdminLayout.svelte';
 	import type { DashboardDefinition } from './definition.ts';
 	import type { CrudAction } from '../Crud/actions.ts';

src/lib/admin/DataTable/DataTable.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { DataTable, InlineNotification } from 'carbon-components-svelte';
+	import DataTable from 'carbon-components-svelte/src/DataTable/DataTable.svelte';
+	import InlineNotification from 'carbon-components-svelte/src/Notification/InlineNotification.svelte';
 	import { _ } from 'svelte-i18n';
 
 	import ItemActions from './actions/ItemActions.svelte';

src/lib/admin/DataTable/actions/ItemActions.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Grid, Row } from 'carbon-components-svelte';
+	import Grid from 'carbon-components-svelte/src/Grid/Grid.svelte';
+	import Row from 'carbon-components-svelte/src/Grid/Row.svelte';
 
 	import SingleAction from './SingleAction.svelte';
 	import type { Action } from '../../actions';

src/lib/admin/DataTable/actions/SingleAction.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { _ } from 'svelte-i18n';
-	import { Button, Column, Link, ToastNotification } from 'carbon-components-svelte';
+	import Button from 'carbon-components-svelte/src/Button/Button.svelte';
+	import Column from 'carbon-components-svelte/src/Grid/Column.svelte';
+	import Link from 'carbon-components-svelte/src/Link/Link.svelte';
+	import ToastNotification from 'carbon-components-svelte/src/Notification/ToastNotification.svelte';
 	import { type Action, CallbackAction, UrlAction } from '../../actions';
 
 	export let action: Action;

src/lib/admin/Layout/AdminLayout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import 'carbon-components-svelte/css/all.css';
-	import { Content } from 'carbon-components-svelte';
+	import Content from 'carbon-components-svelte/src/UIShell/Content.svelte';
 	import { onMount } from 'svelte';
 	import { getLocaleFromNavigator } from 'svelte-i18n';
 

src/lib/admin/Menu/SideMenu.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-	import {
-		SideNav,
-		SideNavItems,
-		SideNavMenu,
-		SideNavMenuItem,
-		SideNavLink,
-		SideNavDivider
-	} from 'carbon-components-svelte';
+	import SideNav from 'carbon-components-svelte/src/UIShell/SideNav.svelte';
+	import SideNavItems from 'carbon-components-svelte/src/UIShell/SideNavItems.svelte';
+	import SideNavMenu from 'carbon-components-svelte/src/UIShell/SideNavMenu.svelte';
+	import SideNavMenuItem from 'carbon-components-svelte/src/UIShell/SideNavMenuItem.svelte';
+	import SideNavLink from 'carbon-components-svelte/src/UIShell/SideNavLink.svelte';
+	import SideNavDivider from 'carbon-components-svelte/src/UIShell/SideNavDivider.svelte';
+
+	import Folder from 'carbon-icons-svelte/lib/Folder.svelte';
+	import Link from 'carbon-icons-svelte/lib/Link.svelte';
+
 	import { _ } from 'svelte-i18n';
-	import { Folder, Link } from 'carbon-icons-svelte';
 
 	import { Divider, Submenu } from './MenuLinks';
 	import { type Action, CallbackAction, UrlAction } from '../actions';

src/lib/admin/Menu/TopLeftMenu.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
-	import { HeaderNav, HeaderNavItem, HeaderNavMenu } from 'carbon-components-svelte';
+	import HeaderNav from 'carbon-components-svelte/src/UIShell/HeaderNav.svelte';
+	import HeaderNavItem from 'carbon-components-svelte/src/UIShell/HeaderNavItem.svelte';
+	import HeaderNavMenu from 'carbon-components-svelte/src/UIShell/HeaderNavMenu.svelte';
 	import { _ } from 'svelte-i18n';
-	import { Folder, Link } from 'carbon-icons-svelte';
+	import Folder from 'carbon-icons-svelte/lib/Folder.svelte';
+	import Link from 'carbon-icons-svelte/lib/Link.svelte';
 
 	import { Divider, type MenuLink, Submenu } from './MenuLinks';
 	import { CallbackAction, UrlAction } from '../actions';

src/lib/admin/Menu/TopMenu.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Header, SkipToContent } from 'carbon-components-svelte';
+	import Header from 'carbon-components-svelte/src/UIShell/Header.svelte';
+	import SkipToContent from 'carbon-components-svelte/src/UIShell/SkipToContent.svelte';
 	import TopLeftMenu from './TopLeftMenu.svelte';
 	import TopRightMenu from './TopRightMenu.svelte';
 	import type { MenuLink } from './MenuLinks';

src/lib/admin/Menu/TopRightMenu.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
 	import { _ } from 'svelte-i18n';
-	import {
-		HeaderAction,
-		HeaderPanelDivider,
-		HeaderPanelLink,
-		HeaderPanelLinks,
-		HeaderUtilities
-	} from 'carbon-components-svelte';
-	import { Link } from 'carbon-icons-svelte';
+	import HeaderAction from 'carbon-components-svelte/src/UIShell/HeaderAction.svelte';
+	import HeaderPanelDivider from 'carbon-components-svelte/src/UIShell/HeaderPanelDivider.svelte';
+	import HeaderPanelLink from 'carbon-components-svelte/src/UIShell/HeaderPanelLink.svelte';
+	import HeaderPanelLinks from 'carbon-components-svelte/src/UIShell/HeaderPanelLinks.svelte';
+	import HeaderUtilities from 'carbon-components-svelte/src/UIShell/HeaderUtilities.svelte';
+
+	import Link from 'carbon-icons-svelte/lib/Link.svelte';
 
 	import { Divider, type MenuLink, Submenu } from './MenuLinks';
 	import { CallbackAction, UrlAction } from '../actions';

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { UnorderedList } from 'carbon-components-svelte';
+	import UnorderedList from 'carbon-components-svelte/src/UnorderedList/UnorderedList.svelte';
 	import { _ } from 'svelte-i18n';
 
 	import Dashboard from '$lib/admin/Dashboard/Dashboard.svelte';

src/testApp/BookCrud.ts

@@ -7,7 +7,9 @@ import { CallbackStateProvider } from '$lib/admin/State/Provider.ts';
 import { TextField } from '$lib/admin/FieldDefinitions/Text.ts';
 import { TextareaField } from '$lib/admin/FieldDefinitions/Textarea.ts';
 import { UrlAction } from '$lib/admin/actions.ts';
-import { Pen, TrashCan } from 'carbon-icons-svelte';
+
+import Pen from 'carbon-icons-svelte/lib/Pen.svelte';
+import TrashCan from 'carbon-icons-svelte/lib/TrashCan.svelte';
 
 type Book = { id: number; title: string; description: string };
 const books: Array<Book> = [
@@ -24,8 +26,8 @@ const fields = [
 ];
 
 const actions = [
-	new UrlAction('Edit', '/admin/books/edit/', Pen),
-	new UrlAction('Delete', '/admin/books/delete/', TrashCan)
+	new UrlAction('Edit', '/admin/books/edit', Pen),
+	new UrlAction('Delete', '/admin/books/delete', TrashCan)
 ];
 
 export const bookCrud = new CrudDefinition('books', {

src/testApp/Dashboard.ts

@@ -1,9 +1,11 @@
-// src/lib/Dashboard.ts
+import Book from 'carbon-icons-svelte/lib/Home.svelte';
+import Home from 'carbon-icons-svelte/lib/Home.svelte';
+
 import { DashboardDefinition } from '$lib/admin/Dashboard/definition.ts';
-import { bookCrud } from './BookCrud.ts';
 import { UrlAction } from '$lib/admin/actions.ts';
-import { Book, Home } from 'carbon-icons-svelte';
+
 import fr from './translations/fr.ts';
+import { bookCrud } from './BookCrud.ts';
 
 export const dashboard = new DashboardDefinition({
 	adminConfig: {

svelte.config.js

@@ -17,7 +17,7 @@ const config = {
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter({
 			fallback: 'index.html',
-		})
+		}),
 	},
 
 	customElement: true,