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