Merge pull request #666 from elcharitas/fix/require-issues

fix: require not working in `svelte-kit` example

examples/svelte-kit/package.json

@@ -88,6 +88,7 @@
     "@zag-js/visually-hidden": "workspace:*"
   },
   "devDependencies": {
+    "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@sveltejs/adapter-auto": "^2.0.1",
     "@sveltejs/kit": "^1.16.3",
     "@sveltejs/package": "^2.0.2",

examples/svelte-kit/src/routes/+layout.svelte

@@ -1,8 +1,7 @@
 <script>
 	import { page } from '$app/stores';
-	// The country-list package used in shared prevents us from using the zag-shared package, because it uses require, and sveltekit has issues with that
-	import '../../../../shared/src/style.css';
-	import { routesData } from '../../../../shared/src/routes';
+	import '@zag-js/shared/src/style.css';
+	import { routesData } from '@zag-js/shared/src/routes';
 	import { dataAttr } from '@zag-js/dom-query';
 
 	const routes = routesData.sort((a, b) => a.label.localeCompare(b.label));

examples/svelte-kit/src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { routesData } from '../../../../shared/src/routes';
+	import { routesData } from '@zag-js/shared/src/routes';
 
 	const routes = routesData.sort((a, b) => a.label.localeCompare(b.label));
 </script>

examples/svelte-kit/vite.config.ts

@@ -1,11 +1,17 @@
 import { sveltekit } from "@sveltejs/kit/vite"
+import { viteCommonjs } from "@originjs/vite-plugin-commonjs"
 import { defineConfig } from "vite"
 import pkg from "./package.json"
 
 const { dependencies } = pkg
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [
+    viteCommonjs({
+      include: ["country-list"],
+    }),
+    sveltekit(),
+  ],
   ssr: {
     noExternal: [...Object.keys(dependencies)],
   },