Fix build errors in Svelte libraries

.gitignore

@@ -140,6 +140,8 @@ dist
 storybook-static
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
+.svelte-kit/
+.playwright-cli/
 
 *.orig
 

components/language-chooser/common/find-language/languageSearcher.ts

@@ -1,7 +1,8 @@
 /* allow anys so we can handle any shape of language object */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import Fuse, { FuseResult } from "fuse.js";
+import Fuse from "fuse.js";
+import type { FuseResult } from "fuse.js";
 
 const ORIGINAL_LANGUAGE_OBJECT_KEY = "_originalLanguageObject";
 

components/language-chooser/common/find-language/languageTagUtils.ts

@@ -1,10 +1,10 @@
 import equivalentTags from "./language-data/equivalentTags.json" with { type: "json" };
-import {
+import { LanguageType } from "./findLanguageInterfaces";
+import type {
   ILanguage,
   IOrthography,
   IRegion,
   IScript,
-  LanguageType,
 } from "./findLanguageInterfaces";
 import {
   deepStripDemarcation,

components/language-chooser/common/find-language/matchingSubstringDemarcation.ts

@@ -1,5 +1,5 @@
 import { cloneDeep } from "lodash";
-import { ILanguage } from "./findLanguageInterfaces";
+import type { ILanguage } from "./findLanguageInterfaces";
 
 // for marking/bolding the substrings which match the search string
 export const START_OF_MATCH_MARKER = "[";

components/language-chooser/common/find-language/regionsAndScripts.ts

@@ -1,6 +1,6 @@
 import { iso31661 } from "iso-3166";
 import { iso15924 } from "iso-15924";
-import { ILanguage, IRegion, IScript } from "./findLanguageInterfaces";
+import type { ILanguage, IRegion, IScript } from "./findLanguageInterfaces";
 
 // ISO-3166-1 is a region code to region name lookup
 export function getAllRegions(): IRegion[] {

components/language-chooser/common/find-language/searchForLanguage.ts

@@ -1,5 +1,5 @@
 import Fuse from "fuse.js";
-import {
+import type {
   ICustomizableLanguageDetails,
   ILanguage,
   IOrthography,

components/language-chooser/common/find-language/searchResultModifiers.ts

@@ -1,4 +1,5 @@
-import { ILanguage, IScript, LanguageType } from "./findLanguageInterfaces";
+import { LanguageType } from "./findLanguageInterfaces";
+import type { ILanguage, IScript } from "./findLanguageInterfaces";
 import {
   demarcateResults,
   stripDemarcation,

components/language-chooser/svelte/language-chooser-svelte-daisyui/package.json

@@ -6,21 +6,38 @@
     "url": "git+https://github.com/sillsdev/EthnoLib.git",
     "directory": "components/language-chooser/svelte/language-chooser-svelte-daisyui"
   },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
   "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 +46,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",
@@ -46,5 +63,13 @@
   "engines": {
     "node": ">=18.18"
   },
-  "nx": {}
+  "nx": {
+    "targets": {
+      "nx-release-publish": {
+        "options": {
+          "packageRoot": "{projectRoot}"
+        }
+      }
+    }
+  }
 }

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";

components/language-chooser/svelte/language-chooser-svelte-daisyui/tsconfig.lib.json

@@ -27,7 +27,6 @@
     "./**/*.jsx",
     "./**/*.ts",
     "./**/*.tsx",
-    "./**/*.svelte",
-    "../index.ts"
+    "./**/*.svelte"
   ]
 }

components/language-chooser/svelte/language-chooser-svelte-daisyui/vite.config.ts

@@ -1,8 +1,6 @@
 /// <reference types='vitest' />
 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"],
-    },
-  },
 });

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": {}
+}

components/language-chooser/svelte/language-chooser-svelte-demo/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

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}"
+      }
+    }
+  }
+}

components/language-chooser/svelte/language-chooser-svelte-demo/src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

components/language-chooser/svelte/language-chooser-svelte-demo/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

components/language-chooser/svelte/language-chooser-svelte-demo/src/routes/+layout.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import "../app.css";
+  import type { Snippet } from "svelte";
+
+  const { children }: { children: Snippet } = $props();
+</script>
+
+{@render children()}

components/language-chooser/svelte/language-chooser-svelte-daisyui/src/App.svelte → components/language-chooser/svelte/language-chooser-svelte-demo/src/routes/+page.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import "./app.css";
-  import LanguageChooser from "./lib/LanguageChooser.svelte";
-  import LanguageChooserModal from "./lib/LanguageChooserModal.svelte";
   import {
     defaultDisplayName,
     type IOrthography,
   } from "@ethnolib/find-language";
+  import { LanguageChooserModal } from "@ethnolib/language-chooser-svelte-daisyui";
 
   let showModal = $state(() => {});
   let orthography: IOrthography = $state({});

components/language-chooser/svelte/language-chooser-svelte-demo/svelte.config.js

@@ -0,0 +1,12 @@
+import adapter from "@sveltejs/adapter-static";
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+export default {
+  preprocess: vitePreprocess(),
+  compilerOptions: {
+    runes: true,
+  },
+  kit: {
+    adapter: adapter({ fallback: "200.html" }),
+  },
+};

components/language-chooser/svelte/language-chooser-svelte-demo/tailwind.config.js

@@ -0,0 +1,17 @@
+import daisyui from "daisyui";
+import typography from "@tailwindcss/typography";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./src/**/*.{html,js,svelte,ts}",
+    "../language-chooser-svelte-daisyui/src/lib/**/*.svelte",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [daisyui, typography],
+  daisyui: {
+    themes: ["light", "dark", "cupcake"],
+  },
+};

components/language-chooser/svelte/language-chooser-svelte-demo/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "strict": true,
+    "skipLibCheck": true
+  }
+}

components/language-chooser/svelte/language-chooser-svelte-demo/vite.config.ts

@@ -0,0 +1,27 @@
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";
+import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
+
+export default defineConfig({
+  plugins: [nxViteTsPaths(), sveltekit()],
+  cacheDir:
+    "../../../../node_modules/.vite/components/language-chooser/svelte/language-chooser-svelte-demo",
+  ssr: {
+    // Process workspace packages through Vite (not externalized to Node.js)
+    // so that .svelte.ts files are compiled by the Svelte compiler and
+    // TypeScript source files are handled correctly.
+    // Process workspace packages and their CJS transitive deps through Vite
+    // rather than externalizing them to Node.js. This ensures .svelte.ts files
+    // are compiled by the Svelte compiler, TypeScript source is transformed, and
+    // CJS deps (lodash, fuse.js) are converted to ESM for named imports.
+    noExternal: [
+      "@ethnolib/find-language",
+      "@ethnolib/language-chooser-controller",
+      "@ethnolib/language-chooser-svelte-daisyui",
+      "@ethnolib/state-management-svelte",
+      "@ethnolib/state-management-core",
+      "lodash",
+      "fuse.js",
+    ],
+  },
+});

components/state-management/state-management-core/src/field.ts

@@ -60,3 +60,19 @@ export class Field<T> {
     if (this.updateUI) this.updateUI(this._value as ReadonlyValue<T>);
   }
 }
+
+/**
+ * Duck-type check for {@link Field}. Using instanceof would fail when
+ * state-management-core is bundled separately by each package (e.g. in Vite
+ * pre-bundling), producing distinct class instances that fail instanceof even
+ * though they are structurally identical.
+ */
+export function isField(value: unknown): value is Field<unknown> {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "updateUI" in value &&
+    "value" in value &&
+    "requestUpdate" in value
+  );
+}