Jackson Morgan
4 months ago
parent
170cd2186c
commit
3c2c952562
@ -0,0 +1,14 @@ |
|||||||
|
/// <reference types="svelte" />
|
||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
/** |
||||||
|
* 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<SvelteComponent> is a good start.
|
||||||
|
const component: ComponentType<SvelteComponent>; |
||||||
|
export default component; |
||||||
|
} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
|
||||||
|
<head> |
||||||
|
<meta charset="UTF-8" /> |
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||||
|
<title>@ldo/svelte Library Example</title> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body> |
||||||
|
<div id="app"></div> |
||||||
|
<script type="module" src="/src/main.ts"></script> |
||||||
|
</body> |
||||||
|
|
||||||
|
</html> |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
<script lang="ts"> |
||||||
|
import { myExampleFunction, myReactiveStore } from "@ldo/svelte"; |
||||||
|
|
||||||
|
let message = "Testing @ldo/svelte library!"; |
||||||
|
|
||||||
|
myExampleFunction(); |
||||||
|
myReactiveStore(); |
||||||
|
|
||||||
|
// Example of using a function from your library |
||||||
|
// if (typeof myExampleFunction === 'function') { |
||||||
|
// message = myExampleFunction(); |
||||||
|
// } |
||||||
|
|
||||||
|
// Example of subscribing to a store from your library |
||||||
|
// let storeValue: any; |
||||||
|
// if (myReactiveStore && typeof myReactiveStore.subscribe === 'function') { |
||||||
|
// const unsubscribe = myReactiveStore.subscribe(value => { |
||||||
|
// storeValue = value; |
||||||
|
// }); |
||||||
|
// // Clean up subscription on component destroy |
||||||
|
// import { onDestroy } from 'svelte'; |
||||||
|
// onDestroy(unsubscribe); |
||||||
|
// } |
||||||
|
</script> |
||||||
|
|
||||||
|
<main> |
||||||
|
<h1>@ldo/svelte Example App</h1> |
||||||
|
<p>{message}</p> |
||||||
|
</main> |
||||||
@ -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; |
||||||
@ -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: ["<rootDir>/jest.setup.ts"], |
||||||
|
|
||||||
|
// The glob patterns Jest uses to detect test files
|
||||||
|
testMatch: [ |
||||||
|
"<rootDir>/src/**/*.test.ts", |
||||||
|
"<rootDir>/src/**/*.spec.ts", |
||||||
|
"<rootDir>/test/**/*.test.ts", // Or wherever your tests are located
|
||||||
|
"<rootDir>/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(.*)$": "<rootDir>/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)$': '<rootDir>/__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: "<rootDir>/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; |
||||||
@ -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"; |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
export function myExampleFunction() { |
||||||
|
console.log("Hello Example Function"); |
||||||
|
} |
||||||
|
|
||||||
|
export function myReactiveStore() { |
||||||
|
console.log("Hello Example Store"); |
||||||
|
} |
||||||
@ -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; |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
describe("Trivial", () => { |
||||||
|
it("Is true", () => { |
||||||
|
expect(true).toBe(true); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -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" |
||||||
|
] |
||||||
|
} |
||||||
@ -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 <script lang="ts">
|
||||||
|
}), |
||||||
|
// Hot Module Replacement (HMR) options for Svelte
|
||||||
|
// These are generally good defaults for development.
|
||||||
|
hot: { |
||||||
|
preserveLocalState: true, // Try to preserve component state on HMR updates
|
||||||
|
}, |
||||||
|
}), |
||||||
|
], |
||||||
|
resolve: { |
||||||
|
alias: { |
||||||
|
// This is a crucial alias. It makes sure that when your example app
|
||||||
|
// imports your library (e.g., `import { ... } from '@ldo/svelte';`),
|
||||||
|
// it uses the actual source code from your `src` directory,
|
||||||
|
// allowing for live updates and easy testing during development.
|
||||||
|
[libraryPackageName]: librarySourceEntryPoint, |
||||||
|
}, |
||||||
|
// Important for Svelte projects to prevent issues with multiple Svelte instances.
|
||||||
|
dedupe: ["svelte"], |
||||||
|
}, |
||||||
|
server: { |
||||||
|
// Port for the example app's dev server
|
||||||
|
port: 5173, // Vite's default, or choose another like 3000 or 8080
|
||||||
|
open: true, // Automatically open the app in the browser on server start (optional)
|
||||||
|
}, |
||||||
|
build: { |
||||||
|
// Output directory for the built example app (e.g., when running `npm run build:example`)
|
||||||
|
// This should be different from your library's `dist` directory.
|
||||||
|
outDir: path.resolve(__dirname, "dist-example"), |
||||||
|
emptyOutDir: true, // Clean the output directory before building
|
||||||
|
}, |
||||||
|
// Ensure that dependencies from the main library are correctly resolved if linked
|
||||||
|
// optimizeDeps: {
|
||||||
|
// include: ['@ldo/svelte'], // May not be necessary with the alias
|
||||||
|
// },
|
||||||
|
}); |
||||||
Loading…
Reference in new issue