diff --git a/package-lock.json b/package-lock.json index 0d5ac01..b6d3853 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14823,6 +14823,13 @@ "node": ">=6" } }, + "node_modules/harmony-reflect": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz", + "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==", + "dev": true, + "license": "(Apache-2.0 OR MPL-1.1)" + }, "node_modules/has-bigints": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz", @@ -15258,6 +15265,19 @@ "node": ">=0.10.0" } }, + "node_modules/identity-obj-proxy": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz", + "integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==", + "dev": true, + "license": "MIT", + "dependencies": { + "harmony-reflect": "^1.4.6" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/ieee754": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", @@ -28700,6 +28720,7 @@ "@tsconfig/svelte": "^5.0.4", "@types/jest": "^29.5.14", "eslint-plugin-svelte3": "^4.0.0", + "identity-obj-proxy": "^3.0.0", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "rimraf": "^5.0.10", diff --git a/packages/svelte/env.d.ts b/packages/svelte/env.d.ts new file mode 100644 index 0000000..8d5c5bc --- /dev/null +++ b/packages/svelte/env.d.ts @@ -0,0 +1,14 @@ +/// +/// + +/** + * Declares the Svelte component type for TypeScript. + * This allows you to import .svelte files into your .ts files. + */ +declare module "*.svelte" { + import type { ComponentType, SvelteComponent } from "svelte"; + // Define the SvelteComponent type more generically or specifically if needed. + // For general use, ComponentType is a good start. + const component: ComponentType; + export default component; +} diff --git a/packages/svelte/example/index.html b/packages/svelte/example/index.html new file mode 100644 index 0000000..0b20c48 --- /dev/null +++ b/packages/svelte/example/index.html @@ -0,0 +1,16 @@ + + + + + + + + @ldo/svelte Library Example + + + +
+ + + + \ No newline at end of file diff --git a/packages/svelte/example/src/App.svelte b/packages/svelte/example/src/App.svelte new file mode 100644 index 0000000..5a0a25c --- /dev/null +++ b/packages/svelte/example/src/App.svelte @@ -0,0 +1,29 @@ + + +
+

@ldo/svelte Example App

+

{message}

+
diff --git a/packages/svelte/example/src/main.ts b/packages/svelte/example/src/main.ts new file mode 100644 index 0000000..09e0758 --- /dev/null +++ b/packages/svelte/example/src/main.ts @@ -0,0 +1,9 @@ +import App from "./App.svelte"; +// You might have some global CSS for the example app itself +// import './app.css'; + +const app = new App({ + target: document.getElementById('app')!, +}); + +export default app; \ No newline at end of file diff --git a/packages/svelte/jest.config.js b/packages/svelte/jest.config.js new file mode 100644 index 0000000..0104051 --- /dev/null +++ b/packages/svelte/jest.config.js @@ -0,0 +1,86 @@ +// packages/svelte/jest.config.js + +/** @type {import('jest').Config} */ +const config = { + // Indicates whether the coverage information should be collected while executing the test + collectCoverage: true, + // An array of glob patterns indicating a set of files for which coverage information should be collected + collectCoverageFrom: ["src/**/*.{ts,svelte}"], // Focus coverage on your source files + // The directory where Jest should output its coverage files + coverageDirectory: "coverage", + // A list of reporter names that Jest uses when writing coverage reports + coverageReporters: ["json", "text", "lcov", "html"], + + // The test environment that will be used for testing (jsdom for browser-like environment) + testEnvironment: "jest-environment-jsdom", + + // A list of paths to modules that run some code to configure or set up the testing framework + // before each test file in the suite. + setupFilesAfterEnv: ["/jest.setup.ts"], + + // The glob patterns Jest uses to detect test files + testMatch: [ + "/src/**/*.test.ts", + "/src/**/*.spec.ts", + "/test/**/*.test.ts", // Or wherever your tests are located + "/test/**/*.spec.ts", + ], + + // An array of file extensions your modules use + moduleFileExtensions: ["ts", "js", "svelte", "json"], + + // A map from regular expressions to module names or to arrays of module names + // that allow to stub out resources with a single module + moduleNameMapper: { + // Alias for SvelteKit-style $lib imports (if you use them) + "^\\$lib(.*)$": "/src$1", + // Mock CSS imports to prevent errors + "\\.(css|less|scss|sass)$": "identity-obj-proxy", + // You can add mocks for other static assets if needed + // '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '/__mocks__/fileMock.js', + }, + + // A map from regular expressions to paths to transformers + transform: { + "^.+\\.svelte$": [ + "svelte-jester", // Uses your svelte-jester@^5.0.0 + { + preprocess: true, // This will automatically use svelte.config.js + // Set to false if svelte.config.js is not found or not to be used. + // You could also pass preprocess options directly here: + // preprocess: require('svelte-preprocess')({ typescript: true }) + }, + ], + "^.+\\.ts$": [ + // Changed from (ts|tsx) as tsx is less common in Svelte libs + "ts-jest", + { + tsconfig: "/tsconfig.json", // Points to your package's tsconfig for type-safety + // Example: disabling some TS diagnostics if they are noisy in tests + // diagnostics: { + // ignoreCodes: ['TS151001'] + // } + }, + ], + // If you have .js files that need transpilation (e.g. using modern JS features not supported by Node version running Jest) + // you might add a babel-jest transformer here. For a library mostly in TS, this might not be needed. + // '^.+\\.js$': 'babel-jest', + }, + + // An array of regexp pattern strings that are matched against all source file paths before transformation. + // If the file path matches any of the patterns, it will not be transformed. + // This is important for node_modules that are published as ES modules but Jest runs in CJS by default. + transformIgnorePatterns: [ + "/node_modules/(?!(svelte-routing|another-es-module-package)/)", // Adjust if you use ESM-only deps + ], + + // Indicates whether each individual test should be reported during the run + verbose: true, + + // Optionally, if your project or tests are pure ESM, you might explore ESM support in Jest: + // preset: 'ts-jest/presets/default-esm', // or 'ts-jest/presets/default-esm-legacy' + // extensionsToTreatAsEsm: ['.ts', '.svelte'], + // moduleNameMapper for ESM often needs to handle .js extensions in imports. +}; + +export default config; diff --git a/packages/svelte/jest.setup.ts b/packages/svelte/jest.setup.ts new file mode 100644 index 0000000..40d2ecc --- /dev/null +++ b/packages/svelte/jest.setup.ts @@ -0,0 +1,5 @@ +// packages/svelte/jest.setup.js + +// Extends Jest's expect method with matchers from @testing-library/jest-dom +// For example, to use `expect(element).toHaveTextContent(/react/i)` +import "@testing-library/jest-dom"; diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 3268b69..1353efa 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -34,6 +34,7 @@ "@tsconfig/svelte": "^5.0.4", "@types/jest": "^29.5.14", "eslint-plugin-svelte3": "^4.0.0", + "identity-obj-proxy": "^3.0.0", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "rimraf": "^5.0.10", @@ -66,4 +67,4 @@ "access": "public" }, "gitHead": "0287cd6371f06630763568dec5e41653f7b8583e" -} \ No newline at end of file +} diff --git a/packages/svelte/src/index.ts b/packages/svelte/src/index.ts new file mode 100644 index 0000000..e9622f6 --- /dev/null +++ b/packages/svelte/src/index.ts @@ -0,0 +1,7 @@ +export function myExampleFunction() { + console.log("Hello Example Function"); +} + +export function myReactiveStore() { + console.log("Hello Example Store"); +} diff --git a/packages/svelte/svelte.config.js b/packages/svelte/svelte.config.js new file mode 100644 index 0000000..db183a2 --- /dev/null +++ b/packages/svelte/svelte.config.js @@ -0,0 +1,19 @@ +// packages/svelte/svelte.config.js +import sveltePreprocess from "svelte-preprocess"; + +/** @type {import('@sveltejs/kit').Config} */ // Or just an empty object if not using Kit features +const config = { + preprocess: sveltePreprocess({ + typescript: true, // Enable TypeScript preprocessing + // You can add other svelte-preprocess options here if needed, + // e.g., for SCSS, PostCSS, etc. + // scss: { includePaths: ['theme'] }, + // postcss: true, + }), + // compilerOptions for Svelte if needed, though usually not for Jest transforms directly + // compilerOptions: { + // customElement: false, + // } +}; + +export default config; diff --git a/packages/svelte/test/trivial.test.ts b/packages/svelte/test/trivial.test.ts new file mode 100644 index 0000000..2978695 --- /dev/null +++ b/packages/svelte/test/trivial.test.ts @@ -0,0 +1,5 @@ +describe("Trivial", () => { + it("Is true", () => { + expect(true).toBe(true); + }); +}); diff --git a/packages/svelte/tsconfig.json b/packages/svelte/tsconfig.json new file mode 100644 index 0000000..bd44c14 --- /dev/null +++ b/packages/svelte/tsconfig.json @@ -0,0 +1,58 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "target": "ESNext", + "module": "ESNext", + "moduleResolution": "bundler", + "baseUrl": ".", + "paths": { + "$lib": [ + "src" + ], + "$lib/*": [ + "src/*" + ], + // Add this path alias for your library: + "@ldo/svelte": [ + "src/index.ts" + ], // Points to your library's main entry point for types + "@ldo/svelte/*": [ + "src/*" + ] // Allows importing submodules like '@ldo/svelte/store' if you structure that way + }, + "resolveJsonModule": true, + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, + "isolatedModules": true, + "sourceMap": true, + "strict": true, + "noEmit": true, + "lib": [ + "DOM", + "ESNext" + ], + "types": [ + "jest", + "@testing-library/jest-dom", + "@types/node", + "svelte" // Added "svelte" to ensure Svelte's global types are picked up + ] + }, + "include": [ + "src/**/*.ts", + "src/**/*.d.ts", // Make sure to include your new env.d.ts + "src/**/*.svelte", + "tests/**/*.ts", + "tests/**/*.svelte", + "example/src/**/*.ts", // Include example app's TS files + "example/src/**/*.svelte", // Include example app's Svelte files + "vite.config.ts", + "vite.config.example.ts", + "jest.config.js" + ], + "exclude": [ + "node_modules", + "dist", + "dist-example" + ] +} \ No newline at end of file diff --git a/packages/svelte/vite.config.example.ts b/packages/svelte/vite.config.example.ts new file mode 100644 index 0000000..9190af4 --- /dev/null +++ b/packages/svelte/vite.config.example.ts @@ -0,0 +1,57 @@ +// packages/svelte/vite.config.example.ts +import { defineConfig } from "vite"; +import { svelte } from "@sveltejs/vite-plugin-svelte"; +import sveltePreprocess from "svelte-preprocess"; +import path from "path"; + +// Assuming your library's package name is "@ldo/svelte" +// and its source entry is "src/index.ts" +const libraryPackageName = "@ldo/svelte"; // Or derive from your package.json if preferred +const librarySourceEntryPoint = path.resolve(__dirname, "src/index.ts"); + +export default defineConfig({ + // This tells Vite that the root of your example app is the 'example' folder + root: path.resolve(__dirname, "example"), + + // Define a different public directory for the example app if needed, default is 'public' inside the root. + // publicDir: path.resolve(__dirname, 'example/public'), + + plugins: [ + svelte({ + preprocess: sveltePreprocess({ + typescript: true, // Enable TypeScript in