From 10e55aba55bfb6f6ecd6440ad96cf89fcf6c700f Mon Sep 17 00:00:00 2001 From: Garrett Jones Date: Mon, 16 Mar 2026 09:42:01 -0500 Subject: [PATCH 1/6] feat(svelte): extract library and add SvelteKit demo app Convert language-chooser-svelte-daisyui from a Vite app into a proper Svelte library using @sveltejs/package. This ships preprocessed .svelte files in dist/ so consumers compile them in their own build pipeline, fixing packaging and style issues when used in SvelteKit projects. Add language-chooser-svelte-demo, a new SvelteKit app that consumes the library and serves as the demo. SSR is enabled; Vite is configured with ssr.noExternal for workspace packages and CJS transitive dependencies. Also add .svelte-kit/ and .playwright-cli/ to .gitignore. Co-Authored-By: Claude Sonnet 4.6 --- .gitignore | 2 + .../index.html | 14 - .../language-chooser-svelte-daisyui/index.ts | 2 - .../package.json | 21 +- .../src/lib/index.ts | 2 + .../src/main.ts | 8 - .../tsconfig.lib.json | 3 +- .../vite.config.ts | 23 - .../language-chooser-svelte-demo/package.json | 30 + .../postcss.config.js | 6 + .../language-chooser-svelte-demo/project.json | 21 + .../language-chooser-svelte-demo/src/app.css | 3 + .../language-chooser-svelte-demo/src/app.html | 12 + .../src/routes/+layout.svelte | 8 + .../src/routes/+page.svelte} | 5 +- .../svelte.config.js | 12 + .../tailwind.config.js | 17 + .../tsconfig.json | 6 + .../vite.config.ts | 27 + nx.json | 3 +- package-lock.json | 1173 +++++++++++++---- 21 files changed, 1090 insertions(+), 308 deletions(-) delete mode 100644 components/language-chooser/svelte/language-chooser-svelte-daisyui/index.html delete mode 100644 components/language-chooser/svelte/language-chooser-svelte-daisyui/index.ts create mode 100644 components/language-chooser/svelte/language-chooser-svelte-daisyui/src/lib/index.ts delete mode 100644 components/language-chooser/svelte/language-chooser-svelte-daisyui/src/main.ts create mode 100644 components/language-chooser/svelte/language-chooser-svelte-demo/package.json create mode 100644 components/language-chooser/svelte/language-chooser-svelte-demo/postcss.config.js create mode 100644 components/language-chooser/svelte/language-chooser-svelte-demo/project.json create mode 100644 components/language-chooser/svelte/language-chooser-svelte-demo/src/app.css create mode 100644 components/language-chooser/svelte/language-chooser-svelte-demo/src/app.html create mode 100644 components/language-chooser/svelte/language-chooser-svelte-demo/src/routes/+layout.svelte rename components/language-chooser/svelte/{language-chooser-svelte-daisyui/src/App.svelte => language-chooser-svelte-demo/src/routes/+page.svelte} (91%) create mode 100644 components/language-chooser/svelte/language-chooser-svelte-demo/svelte.config.js create mode 100644 components/language-chooser/svelte/language-chooser-svelte-demo/tailwind.config.js create mode 100644 components/language-chooser/svelte/language-chooser-svelte-demo/tsconfig.json create mode 100644 components/language-chooser/svelte/language-chooser-svelte-demo/vite.config.ts diff --git a/.gitignore b/.gitignore index c148347d..c8b48d3c 100644 --- a/.gitignore +++ b/.gitignore @@ -140,6 +140,8 @@ dist storybook-static vite.config.*.timestamp* vitest.config.*.timestamp* +.svelte-kit/ +.playwright-cli/ *.orig diff --git a/components/language-chooser/svelte/language-chooser-svelte-daisyui/index.html b/components/language-chooser/svelte/language-chooser-svelte-daisyui/index.html deleted file mode 100644 index 2e4df713..00000000 --- a/components/language-chooser/svelte/language-chooser-svelte-daisyui/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - Svelte Language Chooser - - -
- - - \ No newline at end of file diff --git a/components/language-chooser/svelte/language-chooser-svelte-daisyui/index.ts b/components/language-chooser/svelte/language-chooser-svelte-daisyui/index.ts deleted file mode 100644 index 9ba9ed42..00000000 --- a/components/language-chooser/svelte/language-chooser-svelte-daisyui/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default as LanguageChooser } from "./src/lib/LanguageChooser.svelte"; -export { default as LanguageChooserModal } from "./src/lib/LanguageChooserModal.svelte"; diff --git a/components/language-chooser/svelte/language-chooser-svelte-daisyui/package.json b/components/language-chooser/svelte/language-chooser-svelte-daisyui/package.json index 1896c5e9..fbe64330 100644 --- a/components/language-chooser/svelte/language-chooser-svelte-daisyui/package.json +++ b/components/language-chooser/svelte/language-chooser-svelte-daisyui/package.json @@ -7,20 +7,31 @@ "directory": "components/language-chooser/svelte/language-chooser-svelte-daisyui" }, "type": "module", - "main": "./index.js", - "types": "./index.d.ts", + "main": "./dist/index.js", + "types": "./dist/index.d.ts", + "svelte": "./dist/index.js", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "svelte": "./dist/index.js", + "default": "./dist/index.js" + } + }, "scripts": { - "dev": "vite --open", + "dev": "storybook dev -p 6007", "typecheck": "tsc", "check": "svelte-check --tsconfig ./tsconfig.json", "prebuild": "npm run typecheck", - "build": "nx vite:build", + "build": "svelte-package -i src/lib", "storybook": "storybook dev -p 6007", "build-storybook": "storybook build", "lint": "eslint .", "test": "nx vite:test --config vitest.config.ts", "testonce": "nx vite:test --config vitest.config.ts --run" }, + "peerDependencies": { + "svelte": ">=5.0.0" + }, "dependencies": { "@ethnolib/find-language": "0.3.0", "@ethnolib/language-chooser-controller": "0.2.0", @@ -29,8 +40,8 @@ "devDependencies": { "@storybook/addon-essentials": "^8.2.8", "@storybook/svelte-vite": "^8.2.8", + "@sveltejs/package": "^2.3.10", "@sveltejs/vite-plugin-svelte": "^4.0.0", - "@tailwindcss/postcss": "^4.1.13", "@tailwindcss/typography": "^0.5.16", "@tsconfig/svelte": "^5.0.0", "autoprefixer": "^10.4.21", diff --git a/components/language-chooser/svelte/language-chooser-svelte-daisyui/src/lib/index.ts b/components/language-chooser/svelte/language-chooser-svelte-daisyui/src/lib/index.ts new file mode 100644 index 00000000..1e78166b --- /dev/null +++ b/components/language-chooser/svelte/language-chooser-svelte-daisyui/src/lib/index.ts @@ -0,0 +1,2 @@ +export { default as LanguageChooser } from "./LanguageChooser.svelte"; +export { default as LanguageChooserModal } from "./LanguageChooserModal.svelte"; diff --git a/components/language-chooser/svelte/language-chooser-svelte-daisyui/src/main.ts b/components/language-chooser/svelte/language-chooser-svelte-daisyui/src/main.ts deleted file mode 100644 index a319f906..00000000 --- a/components/language-chooser/svelte/language-chooser-svelte-daisyui/src/main.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { mount } from "svelte"; -import App from "./App.svelte"; - -const app = mount(App, { - target: document.getElementById("app")!, -}); - -export default app; diff --git a/components/language-chooser/svelte/language-chooser-svelte-daisyui/tsconfig.lib.json b/components/language-chooser/svelte/language-chooser-svelte-daisyui/tsconfig.lib.json index 14a7a858..48a7b4e9 100644 --- a/components/language-chooser/svelte/language-chooser-svelte-daisyui/tsconfig.lib.json +++ b/components/language-chooser/svelte/language-chooser-svelte-daisyui/tsconfig.lib.json @@ -27,7 +27,6 @@ "./**/*.jsx", "./**/*.ts", "./**/*.tsx", - "./**/*.svelte", - "../index.ts" + "./**/*.svelte" ] } diff --git a/components/language-chooser/svelte/language-chooser-svelte-daisyui/vite.config.ts b/components/language-chooser/svelte/language-chooser-svelte-daisyui/vite.config.ts index a602ce26..7f8af29d 100644 --- a/components/language-chooser/svelte/language-chooser-svelte-daisyui/vite.config.ts +++ b/components/language-chooser/svelte/language-chooser-svelte-daisyui/vite.config.ts @@ -1,8 +1,6 @@ /// import { defineConfig } from "vite"; import { svelte } from "@sveltejs/vite-plugin-svelte"; -import dts from "vite-plugin-dts"; -import * as path from "path"; import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin"; export default defineConfig({ @@ -24,30 +22,9 @@ export default defineConfig({ } }, }), - dts({ - entryRoot: ".", - tsconfigPath: path.join(__dirname, "tsconfig.lib.json"), - }), ], css: { postcss: "./postcss.config.js", }, - - // Configuration for building your library. - // See: https://vitejs.dev/guide/build.html#library-mode - build: { - outDir: "./dist", - emptyOutDir: true, - reportCompressedSize: true, - commonjsOptions: { - transformMixedEsModules: true, - }, - lib: { - entry: "./index.ts", - name: "@ethnolib/language-chooser-svelte-daisyui", - fileName: "index", - formats: ["es", "cjs"], - }, - }, }); diff --git a/components/language-chooser/svelte/language-chooser-svelte-demo/package.json b/components/language-chooser/svelte/language-chooser-svelte-demo/package.json new file mode 100644 index 00000000..7cc11ad6 --- /dev/null +++ b/components/language-chooser/svelte/language-chooser-svelte-demo/package.json @@ -0,0 +1,30 @@ +{ + "name": "@ethnolib/language-chooser-svelte-demo", + "version": "0.1.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview", + "check": "svelte-check --tsconfig ./tsconfig.json" + }, + "dependencies": { + "@ethnolib/find-language": "0.3.0", + "@ethnolib/language-chooser-svelte-daisyui": "*" + }, + "devDependencies": { + "@sveltejs/adapter-static": "^3.0.8", + "@sveltejs/kit": "^2.20.7", + "@sveltejs/vite-plugin-svelte": "^4.0.0", + "@tailwindcss/typography": "^0.5.16", + "autoprefixer": "^10.4.21", + "daisyui": "^5.1.12", + "postcss": "^8.5.6", + "svelte": "^5.38.6", + "svelte-check": "^4.0.5", + "tailwindcss": "^3.4.17", + "vite": "^5.0.8" + }, + "nx": {} +} diff --git a/components/language-chooser/svelte/language-chooser-svelte-demo/postcss.config.js b/components/language-chooser/svelte/language-chooser-svelte-demo/postcss.config.js new file mode 100644 index 00000000..2aa7205d --- /dev/null +++ b/components/language-chooser/svelte/language-chooser-svelte-demo/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/components/language-chooser/svelte/language-chooser-svelte-demo/project.json b/components/language-chooser/svelte/language-chooser-svelte-demo/project.json new file mode 100644 index 00000000..196f7495 --- /dev/null +++ b/components/language-chooser/svelte/language-chooser-svelte-demo/project.json @@ -0,0 +1,21 @@ +{ + "name": "@ethnolib/language-chooser-svelte-demo", + "$schema": "../../../../node_modules/nx/schemas/project-schema.json", + "projectType": "application", + "targets": { + "dev": { + "executor": "nx:run-commands", + "options": { + "command": "npm run dev", + "cwd": "{projectRoot}" + } + }, + "build": { + "executor": "nx:run-commands", + "options": { + "command": "npm run build", + "cwd": "{projectRoot}" + } + } + } +} diff --git a/components/language-chooser/svelte/language-chooser-svelte-demo/src/app.css b/components/language-chooser/svelte/language-chooser-svelte-demo/src/app.css new file mode 100644 index 00000000..b5c61c95 --- /dev/null +++ b/components/language-chooser/svelte/language-chooser-svelte-demo/src/app.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/components/language-chooser/svelte/language-chooser-svelte-demo/src/app.html b/components/language-chooser/svelte/language-chooser-svelte-demo/src/app.html new file mode 100644 index 00000000..84ffad16 --- /dev/null +++ b/components/language-chooser/svelte/language-chooser-svelte-demo/src/app.html @@ -0,0 +1,12 @@ + + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ + diff --git a/components/language-chooser/svelte/language-chooser-svelte-demo/src/routes/+layout.svelte b/components/language-chooser/svelte/language-chooser-svelte-demo/src/routes/+layout.svelte new file mode 100644 index 00000000..0f295c23 --- /dev/null +++ b/components/language-chooser/svelte/language-chooser-svelte-demo/src/routes/+layout.svelte @@ -0,0 +1,8 @@ + + +{@render children()} diff --git a/components/language-chooser/svelte/language-chooser-svelte-daisyui/src/App.svelte b/components/language-chooser/svelte/language-chooser-svelte-demo/src/routes/+page.svelte similarity index 91% rename from components/language-chooser/svelte/language-chooser-svelte-daisyui/src/App.svelte rename to components/language-chooser/svelte/language-chooser-svelte-demo/src/routes/+page.svelte index 74378774..20c69423 100644 --- a/components/language-chooser/svelte/language-chooser-svelte-daisyui/src/App.svelte +++ b/components/language-chooser/svelte/language-chooser-svelte-demo/src/routes/+page.svelte @@ -1,12 +1,9 @@