sillsdev · gmjgeek · Mar 13, 2025 · Mar 13, 2025 · Mar 13, 2025
diff --git a/components/language-chooser/svelte/svelteapp/.eslintrc.js b/components/language-chooser/svelte/svelteapp/.eslintrc.js
@@ -0,0 +1,27 @@
+module.exports = {
+  parser: "@typescript-eslint/parser",
+  plugins: ["svelte3", "@typescript-eslint"],
+  extends: ["../../../../.eslintrc.json"],
+  ignorePatterns: ["!**/*", "vite.config.ts"],
+  overrides: [
+    {
+      files: ["*.ts", "*.js", "*.svelte"],
+      rules: {},
+    },
+    {
+      files: ["*.ts", "*.tsx"],
+      rules: {},
+    },
+    {
+      files: ["*.js", "*.jsx"],
+      rules: {},
+    },
+    {
+      files: ["*.svelte"],
+      processor: "svelte3/svelte3",
+    },
+  ],
+  settings: {
+    "svelte3/typescript": require("typescript"),
+  },
+};
diff --git a/components/language-chooser/svelte/svelteapp/index.html b/components/language-chooser/svelte/svelteapp/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/global.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte + TS + Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/components/language-chooser/svelte/svelteapp/package.json b/components/language-chooser/svelte/svelteapp/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@ethnolib/svelteapp",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "scripts": {
+    "typecheck": "tsc",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "prebuild": "npm run typecheck",
+    "build": "nx vite:build",
+    "lint": "eslint .",
+    "test": "nx vite:test --config vitest.config.ts"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "~2.4.3",
+    "@tsconfig/svelte": "^4.0.1",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "svelte": "^3.59.1",
+    "svelte-check": "^2.10.2",
+    "svelte-preprocess": "^5.0.3"
+  },
+  "// We've tested with 18 and have no reason to believe it won't work with higher versions": "",
+  "engines": {
+    "node": ">=18.18"
+  },
+  "nx": {}
+}
diff --git a/components/language-chooser/svelte/svelteapp/public/favicon.png b/components/language-chooser/svelte/svelteapp/public/favicon.png
diff --git a/components/language-chooser/svelte/svelteapp/public/global.css b/components/language-chooser/svelte/svelteapp/public/global.css
@@ -0,0 +1,68 @@
+html,
+body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  color: #333;
+  margin: 0;
+  padding: 8px;
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+}
+
+a {
+  color: rgb(0, 100, 200);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a:visited {
+  color: rgb(0, 80, 160);
+}
+
+label {
+  display: block;
+}
+
+input,
+button,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  -webkit-padding: 0.4em 0;
+  padding: 0.4em;
+  margin: 0 0 0.5em 0;
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+}
+
+input:disabled {
+  color: #ccc;
+}
+
+button {
+  color: #333;
+  background-color: #f4f4f4;
+  outline: none;
+}
+
+button:disabled {
+  color: #999;
+}
+
+button:not(:disabled):active {
+  background-color: #ddd;
+}
+
+button:focus {
+  border-color: #666;
+}
diff --git a/components/language-chooser/svelte/svelteapp/src/App.svelte b/components/language-chooser/svelte/svelteapp/src/App.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  export let name: string;
+</script>
+
+<main>
+  <h1>Welcome {name}!</h1>
+  <p>
+    Visit <a href="https://nx.dev">Nx</a> or
+    <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build
+    Svelte apps.
+  </p>
+</main>
+
+<style>
+  main {
+    text-align: center;
+    padding: 1em;
+    max-width: 240px;
+    margin: 0 auto;
+  }
+
+  h1 {
+    color: #ff3e00;
+    text-transform: uppercase;
+    font-size: 4em;
+    font-weight: 100;
+  }
+
+  @media (min-width: 640px) {
+    main {
+      max-width: none;
+    }
+  }
+</style>
diff --git a/components/language-chooser/svelte/svelteapp/src/main.ts b/components/language-chooser/svelte/svelteapp/src/main.ts
@@ -0,0 +1,10 @@
+import App from './App.svelte';
+
+const app = new App({
+  target: document.body,
+  props: {
+    name: 'Nx with Svelte',
+  },
+});
+
+export default app;
diff --git a/components/language-chooser/svelte/svelteapp/svelte.config.cjs b/components/language-chooser/svelte/svelteapp/svelte.config.cjs
@@ -0,0 +1,7 @@
+const sveltePreprocess = require("svelte-preprocess");
+
+module.exports = {
+  // Consult https://github.com/sveltejs/svelte-preprocess
+  // for more information about preprocessors
+  preprocess: sveltePreprocess(),
+};
diff --git a/components/language-chooser/svelte/svelteapp/tsconfig.app.json b/components/language-chooser/svelte/svelteapp/tsconfig.app.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "esnext",
+    "ignoreDeprecations": "5.0",
+    "isolatedModules": true,
+    "sourceMap": true,
+    "types": ["svelte", "node", "vite/client"],
+    "strict": false,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "checkJs": true
+  },
+  "files": [],
+  "include": [],
+  "references": []
+}
diff --git a/components/language-chooser/svelte/svelteapp/tsconfig.json b/components/language-chooser/svelte/svelteapp/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "types": ["vite/client", "vitest"],
+    "paths": {
+        "@svelte/shared": ["libs/shared/src/index.ts"]
+    }
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../../tsconfig.base.json"
+}
diff --git a/components/language-chooser/svelte/svelteapp/tsconfig.spec.json b/components/language-chooser/svelte/svelteapp/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node"]
+  },
+  "include": [
+    "vite.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/components/language-chooser/svelte/svelteapp/vite.config.mts b/components/language-chooser/svelte/svelteapp/vite.config.mts
@@ -0,0 +1,42 @@
+/// <reference types="vitest" />
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+
+import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
+
+export default defineConfig({
+  cacheDir: "../../node_modules/.vite/svelte",
+
+  server: {
+    port: 4200,
+    host: "localhost",
+    fs: {
+      allow: [process.cwd()],
+    },
+  },
+
+  preview: {
+    port: 4300,
+    host: "localhost",
+  },
+
+  plugins: [svelte(), nxViteTsPaths()],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [
+  //    viteTsConfigPaths({
+  //      root: '../../',
+  //    }),
+  //  ],
+  // },
+
+  test: {
+    globals: true,
+    cache: {
+      dir: "../../node_modules/.vitest",
+    },
+    environment: "jsdom",
+    include: ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+  },
+});
diff --git a/components/language-chooser/svelte/svelteapp/vitest.config.ts b/components/language-chooser/svelte/svelteapp/vitest.config.ts
@@ -0,0 +1,10 @@
+/// <reference types="vitest" />
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  test: {
+    expect: {
+      requireAssertions: true,
+    },
+  },
+});
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -11,7 +11,12 @@ import eslintPluginReactHooks from "eslint-plugin-react-hooks";
 
 export default [
   {
-    ignores: ["**/node_modules/**/*", "**/dist/**"],
+    ignores: [
+      "**/node_modules/**/*",
+      "**/dist/**",
+      "**/vite.config.*.timestamp*",
+      "**/vitest.config.*.timestamp*",
+    ],
   },
   eslint.configs.recommended,
   eslintConfigPrettier, // disables eslint rules that could conflict with prettier
@@ -56,7 +61,7 @@ export default [
         "@typescript-eslint/ban-types": "off", // Record<string, never> is not intuitive for us compared to {}
         "@typescript-eslint/no-inferrable-types": "off", // not worth worrying about (not even convinced it's a problem at all)
       },
-    }
+    },
   ),
 
   // React configs to be applied to react files only

diff --git a/nx.json b/nx.json
@@ -60,7 +60,8 @@
     "projects": [
       "@ethnolib/language-chooser-react-mui",
       "@ethnolib/language-chooser-react-hook",
-      "@ethnolib/find-language"
+      "@ethnolib/find-language",
+      "@ethnolib/svelteapp"
     ]
   }
 }