🔧 Replace $lib alias with relative paths in shared package

usagizmo · usagizmo · commit 4de23493a99d · 2025-07-26T21:31:43.000+09:00
- @sveltejs/package does not resolve $lib alias when imported by other packages
- Convert all $lib imports to relative paths for proper resolution
- Add Vite alias configuration for development
- Update turbo.json to ensure shared package builds before web app
diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -32,34 +32,42 @@
     "./app.css": "./src/app.css",
     "./components/*.svelte": {
       "types": "./dist/components/*.svelte.d.ts",
-      "svelte": "./dist/components/*.svelte"
+      "svelte": "./src/lib/components/*.svelte",
+      "default": "./dist/components/*.svelte"
     },
     "./components/ui/*": {
       "types": "./dist/components/ui/*/index.d.ts",
+      "svelte": "./src/lib/components/ui/*/index.ts",
       "default": "./dist/components/ui/*/index.js"
     },
     "./composables/*": {
       "types": "./dist/composables/*.d.ts",
+      "svelte": "./src/lib/composables/*.ts",
       "default": "./dist/composables/*.js"
     },
     "./constants/*": {
       "types": "./dist/constants/*.d.ts",
+      "svelte": "./src/lib/constants/*.ts",
       "default": "./dist/constants/*.js"
     },
     "./helpers/*": {
       "types": "./dist/helpers/*.d.ts",
+      "svelte": "./src/lib/helpers/*.ts",
       "default": "./dist/helpers/*.js"
     },
     "./schemas/*": {
       "types": "./dist/schemas/*.d.ts",
+      "svelte": "./src/lib/schemas/*.ts",
       "default": "./dist/schemas/*.js"
     },
     "./types/*": {
       "types": "./dist/types/*.d.ts",
+      "svelte": "./src/lib/types/*.ts",
       "default": "./dist/types/*.js"
     },
     "./utils/*": {
       "types": "./dist/utils/*.d.ts",
+      "svelte": "./src/lib/utils/*.ts",
       "default": "./dist/utils/*.js"
     }
   },
diff --git a/packages/shared/src/lib/components/ModeSwitcherButton.svelte b/packages/shared/src/lib/components/ModeSwitcherButton.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import MoonIcon from '@lucide/svelte/icons/moon';
   import SunIcon from '@lucide/svelte/icons/sun';
-  import { Button } from '@repo/shared/components/ui/button';
   import { toggleMode } from 'mode-watcher';
+
+  import { Button } from './ui/button/index.js';
 </script>
 
 <Button onclick={toggleMode} variant="outline" size="icon">
diff --git a/packages/shared/src/lib/components/ui/button/button.svelte b/packages/shared/src/lib/components/ui/button/button.svelte
@@ -2,7 +2,7 @@
   import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
   import { tv, type VariantProps } from 'tailwind-variants';
 
-  import { cn, type WithElementRef } from '$lib/utils/shadcnUtils.js';
+  import { cn, type WithElementRef } from '../../../utils/shadcnUtils.js';
 
   export const buttonVariants = tv({
     base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
diff --git a/packages/shared/src/lib/components/ui/card/card-action.svelte b/packages/shared/src/lib/components/ui/card/card-action.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
 
-  import { cn, type WithElementRef } from '$lib/utils/shadcnUtils.js';
+  import { cn, type WithElementRef } from '../../../utils/shadcnUtils.js';
 
   let {
     ref = $bindable(null),
diff --git a/packages/shared/src/lib/components/ui/card/card-content.svelte b/packages/shared/src/lib/components/ui/card/card-content.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
 
-  import { cn, type WithElementRef } from '$lib/utils/shadcnUtils.js';
+  import { cn, type WithElementRef } from '../../../utils/shadcnUtils.js';
 
   let {
     ref = $bindable(null),
diff --git a/packages/shared/src/lib/components/ui/card/card-description.svelte b/packages/shared/src/lib/components/ui/card/card-description.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
 
-  import { cn, type WithElementRef } from '$lib/utils/shadcnUtils.js';
+  import { cn, type WithElementRef } from '../../../utils/shadcnUtils.js';
 
   let {
     ref = $bindable(null),
diff --git a/packages/shared/src/lib/components/ui/card/card-footer.svelte b/packages/shared/src/lib/components/ui/card/card-footer.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
 
-  import { cn, type WithElementRef } from '$lib/utils/shadcnUtils.js';
+  import { cn, type WithElementRef } from '../../../utils/shadcnUtils.js';
 
   let {
     ref = $bindable(null),
diff --git a/packages/shared/src/lib/components/ui/card/card-header.svelte b/packages/shared/src/lib/components/ui/card/card-header.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
 
-  import { cn, type WithElementRef } from '$lib/utils/shadcnUtils.js';
+  import { cn, type WithElementRef } from '../../../utils/shadcnUtils.js';
 
   let {
     ref = $bindable(null),
diff --git a/packages/shared/src/lib/components/ui/card/card-title.svelte b/packages/shared/src/lib/components/ui/card/card-title.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
 
-  import { cn, type WithElementRef } from '$lib/utils/shadcnUtils.js';
+  import { cn, type WithElementRef } from '../../../utils/shadcnUtils.js';
 
   let {
     ref = $bindable(null),
diff --git a/packages/shared/src/lib/components/ui/card/card.svelte b/packages/shared/src/lib/components/ui/card/card.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
 
-  import { cn, type WithElementRef } from '$lib/utils/shadcnUtils.js';
+  import { cn, type WithElementRef } from '../../../utils/shadcnUtils.js';
 
   let {
     ref = $bindable(null),
diff --git a/packages/shared/src/lib/components/ui/form/form-button.svelte b/packages/shared/src/lib/components/ui/form/form-button.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import * as Button from '$lib/components/ui/button/index.js';
+  import * as Button from '../button/index.js';
 
   let { ref = $bindable(null), ...restProps }: Button.Props = $props();
 </script>
diff --git a/packages/shared/src/lib/components/ui/form/form-description.svelte b/packages/shared/src/lib/components/ui/form/form-description.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import * as FormPrimitive from 'formsnap';
 
-  import { cn, type WithoutChild } from '$lib/utils/shadcnUtils.js';
+  import { cn, type WithoutChild } from '../../../utils/shadcnUtils.js';
 
   let {
     ref = $bindable(null),
diff --git a/packages/shared/src/lib/components/ui/form/form-element-field.svelte b/packages/shared/src/lib/components/ui/form/form-element-field.svelte
@@ -3,7 +3,7 @@
   import type { HTMLAttributes } from 'svelte/elements';
   import type { FormPathLeaves } from 'sveltekit-superforms';
 
-  import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils/shadcnUtils.js';
+  import { cn, type WithElementRef, type WithoutChildren } from '../../../utils/shadcnUtils.js';
 
   let {
     ref = $bindable(null),
diff --git a/packages/shared/src/lib/components/ui/form/form-field-errors.svelte b/packages/shared/src/lib/components/ui/form/form-field-errors.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import * as FormPrimitive from 'formsnap';
 
-  import { cn, type WithoutChild } from '$lib/utils/shadcnUtils.js';
+  import { cn, type WithoutChild } from '../../../utils/shadcnUtils.js';
 
   let {
     ref = $bindable(null),
diff --git a/packages/shared/src/lib/components/ui/form/form-field.svelte b/packages/shared/src/lib/components/ui/form/form-field.svelte
@@ -3,7 +3,7 @@
   import type { HTMLAttributes } from 'svelte/elements';
   import type { FormPath } from 'sveltekit-superforms';
 
-  import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils/shadcnUtils.js';
+  import { cn, type WithElementRef, type WithoutChildren } from '../../../utils/shadcnUtils.js';
 
   let {
     ref = $bindable(null),
diff --git a/packages/shared/src/lib/components/ui/form/form-fieldset.svelte b/packages/shared/src/lib/components/ui/form/form-fieldset.svelte
@@ -2,7 +2,7 @@
   import * as FormPrimitive from 'formsnap';
   import type { FormPath } from 'sveltekit-superforms';
 
-  import { cn, type WithoutChild } from '$lib/utils/shadcnUtils.js';
+  import { cn, type WithoutChild } from '../../../utils/shadcnUtils.js';
 
   let {
     ref = $bindable(null),
diff --git a/packages/shared/src/lib/components/ui/form/form-label.svelte b/packages/shared/src/lib/components/ui/form/form-label.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import * as FormPrimitive from 'formsnap';
 
-  import { Label } from '$lib/components/ui/label/index.js';
-  import { cn, type WithoutChild } from '$lib/utils/shadcnUtils.js';
+  import { cn, type WithoutChild } from '../../../utils/shadcnUtils.js';
+  import { Label } from '../label/index.js';
 
   let {
     ref = $bindable(null),
diff --git a/packages/shared/src/lib/components/ui/form/form-legend.svelte b/packages/shared/src/lib/components/ui/form/form-legend.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import * as FormPrimitive from 'formsnap';
 
-  import { cn, type WithoutChild } from '$lib/utils/shadcnUtils.js';
+  import { cn, type WithoutChild } from '../../../utils/shadcnUtils.js';
 
   let {
     ref = $bindable(null),
diff --git a/packages/shared/src/lib/components/ui/input/input.svelte b/packages/shared/src/lib/components/ui/input/input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
 
-  import { cn, type WithElementRef } from '$lib/utils/shadcnUtils.js';
+  import { cn, type WithElementRef } from '../../../utils/shadcnUtils.js';
 
   type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
 
diff --git a/packages/shared/src/lib/components/ui/label/label.svelte b/packages/shared/src/lib/components/ui/label/label.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Label as LabelPrimitive } from 'bits-ui';
 
-  import { cn } from '$lib/utils/shadcnUtils.js';
+  import { cn } from '../../../utils/shadcnUtils.js';
 
   let {
     ref = $bindable(null),
diff --git a/packages/shared/src/lib/components/ui/textarea/textarea.svelte b/packages/shared/src/lib/components/ui/textarea/textarea.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { HTMLTextareaAttributes } from 'svelte/elements';
 
-  import { cn, type WithElementRef, type WithoutChildren } from '$lib/utils/shadcnUtils.js';
+  import { cn, type WithElementRef, type WithoutChildren } from '../../../utils/shadcnUtils.js';
 
   let {
     ref = $bindable(null),
diff --git a/packages/shared/vite.config.ts b/packages/shared/vite.config.ts
@@ -1,6 +1,12 @@
 import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { resolve } from 'path';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
   plugins: [svelte()],
+  resolve: {
+    alias: {
+      $lib: resolve(__dirname, './src/lib'),
+    },
+  },
 });
diff --git a/turbo.json b/turbo.json
@@ -61,9 +61,14 @@
       "cache": false
     },
     "web#build": {
+      "dependsOn": ["@repo/shared#build"],
       "inputs": ["$TURBO_DEFAULT$", "!README.md", "!**/*.test.*", "!**/*.spec.*"],
       "outputs": [".svelte-kit/**", ".vercel/**"],
       "env": ["PUBLIC_SUPABASE_URL", "PUBLIC_SUPABASE_ANON_KEY", "PUBLIC_GA4_MEASUREMENT_ID"]
+    },
+    "@repo/shared#build": {
+      "inputs": ["$TURBO_DEFAULT$", "!README.md", "!**/*.test.*", "!**/*.spec.*"],
+      "outputs": ["dist/**"]
     }
   }
 }
