Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixes type definitions @astrojs/image and adds more documentation to the README #4045

Merged
merged 22 commits into from
Jul 27, 2022
Merged

Fixes type definitions @astrojs/image and adds more documentation to the README #4045

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
ced02ac
WIP: moving to a static .d.ts types file
Jul 25, 2022
e72d2b1
fixing named exports for getImage and getPicture
Jul 25, 2022
97ce8f9
removing the exports.astro map for now
Jul 25, 2022
bbfe181
WIP: adding readme docs for component attributes
Jul 25, 2022
cc4fe95
Adding docs for getImage and getPicture
Jul 25, 2022
f2c2ec2
Merge branch 'main' into fix/image-types
Jul 25, 2022
f418fcf
Merge branch 'main' into fix/image-types
Jul 26, 2022
4aeb4f8
Merge branch 'main' into fix/image-types
Jul 26, 2022
966da18
leaning fully on TSC to build .d.ts files
Jul 26, 2022
7ba8469
finally found the solution for proper ESM import types
Jul 26, 2022
2a9de43
adding a note to the README for tsconfig updates
Jul 26, 2022
2632086
chore: add changesets
Jul 26, 2022
606ea33
typo
Jul 26, 2022
5865b15
docs: removing the "Images in Markdown" example
Jul 26, 2022
0381da2
Merge branch 'main' into fix/image-types
Jul 26, 2022
6a4e82c
removing the need for publishing src to NPM
Jul 26, 2022
3aa2210
Merge branch 'fix/image-types' of github.com:withastro/astro into fix…
Jul 26, 2022
cdf48f2
fix: make type re-export explicit
Jul 26, 2022
ae6d203
updating image module defs to match InputFormat
Jul 27, 2022
0aadefe
using astro syntax highlighting for README code blocks
Jul 27, 2022
ef0361f
nit: missing backtick in README
Jul 27, 2022
01d18e0
make sure Astro component directives aren't recommended twice
Jul 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fifty-apricots-clap.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'astro': patch
---

Adding support for custom "astro/client" type definitions in `@astrojs/image`
5 changes: 5 additions & 0 deletions .changeset/five-singers-notice.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/image': minor
---

Big improvements to the TypeScript and Language Tools support for `@astrojs/image` :tada:
173 changes: 173 additions & 0 deletions packages/astro/client-base.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
/// <reference types="vite/types/importMeta" />

// CSS modules
type CSSModuleClasses = { readonly [key: string]: string };
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was the real magic sauce for ESM import types

Moving out all the types except images into a client-base.d.ts allows the main use case of astro/client to work. The image integration now uses only this base file, avoiding the issue of duplicating *.jpg module definitions


declare module '*.module.css' {
const classes: CSSModuleClasses;
export default classes;
}
declare module '*.module.scss' {
const classes: CSSModuleClasses;
export default classes;
}
declare module '*.module.sass' {
const classes: CSSModuleClasses;
export default classes;
}
declare module '*.module.less' {
const classes: CSSModuleClasses;
export default classes;
}
declare module '*.module.styl' {
const classes: CSSModuleClasses;
export default classes;
}
declare module '*.module.stylus' {
const classes: CSSModuleClasses;
export default classes;
}
declare module '*.module.pcss' {
const classes: CSSModuleClasses;
export default classes;
}

// CSS
declare module '*.css' {
const css: string;
export default css;
}
declare module '*.scss' {
const css: string;
export default css;
}
declare module '*.sass' {
const css: string;
export default css;
}
declare module '*.less' {
const css: string;
export default css;
}
declare module '*.styl' {
const css: string;
export default css;
}
declare module '*.stylus' {
const css: string;
export default css;
}
declare module '*.pcss' {
const css: string;
export default css;
}

// Built-in asset types
// see `src/constants.ts`

// media
declare module '*.mp4' {
const src: string;
export default src;
}
declare module '*.webm' {
const src: string;
export default src;
}
declare module '*.ogg' {
const src: string;
export default src;
}
declare module '*.mp3' {
const src: string;
export default src;
}
declare module '*.wav' {
const src: string;
export default src;
}
declare module '*.flac' {
const src: string;
export default src;
}
declare module '*.aac' {
const src: string;
export default src;
}

// fonts
declare module '*.woff' {
const src: string;
export default src;
}
declare module '*.woff2' {
const src: string;
export default src;
}
declare module '*.eot' {
const src: string;
export default src;
}
declare module '*.ttf' {
const src: string;
export default src;
}
declare module '*.otf' {
const src: string;
export default src;
}

// other
declare module '*.wasm' {
const initWasm: (options: WebAssembly.Imports) => Promise<WebAssembly.Exports>;
export default initWasm;
}
declare module '*.webmanifest' {
const src: string;
export default src;
}
declare module '*.pdf' {
const src: string;
export default src;
}
declare module '*.txt' {
const src: string;
export default src;
}

// web worker
declare module '*?worker' {
const workerConstructor: {
new (): Worker;
};
export default workerConstructor;
}

declare module '*?worker&inline' {
const workerConstructor: {
new (): Worker;
};
export default workerConstructor;
}

declare module '*?sharedworker' {
const sharedWorkerConstructor: {
new (): SharedWorker;
};
export default sharedWorkerConstructor;
}

declare module '*?raw' {
const src: string;
export default src;
}

declare module '*?url' {
const src: string;
export default src;
}

declare module '*?inline' {
const src: string;
export default src;
}
174 changes: 1 addition & 173 deletions packages/astro/client.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,4 @@
/// <reference types="vite/types/importMeta" />

// CSS modules
type CSSModuleClasses = { readonly [key: string]: string };

declare module '*.module.css' {
const classes: CSSModuleClasses;
export default classes;
}
declare module '*.module.scss' {
const classes: CSSModuleClasses;
export default classes;
}
declare module '*.module.sass' {
const classes: CSSModuleClasses;
export default classes;
}
declare module '*.module.less' {
const classes: CSSModuleClasses;
export default classes;
}
declare module '*.module.styl' {
const classes: CSSModuleClasses;
export default classes;
}
declare module '*.module.stylus' {
const classes: CSSModuleClasses;
export default classes;
}
declare module '*.module.pcss' {
const classes: CSSModuleClasses;
export default classes;
}

// CSS
declare module '*.css' {
const css: string;
export default css;
}
declare module '*.scss' {
const css: string;
export default css;
}
declare module '*.sass' {
const css: string;
export default css;
}
declare module '*.less' {
const css: string;
export default css;
}
declare module '*.styl' {
const css: string;
export default css;
}
declare module '*.stylus' {
const css: string;
export default css;
}
declare module '*.pcss' {
const css: string;
export default css;
}

// Built-in asset types
// see `src/constants.ts`
/// <reference path="./client-base.d.ts" />

// images
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image types are still included here, using types: ["astro/client"] will get all types from client-base.d.ts plus basic image types

declare module '*.jpg' {
Expand Down Expand Up @@ -98,110 +33,3 @@ declare module '*.avif' {
const src: string;
export default src;
}

// media
declare module '*.mp4' {
const src: string;
export default src;
}
declare module '*.webm' {
const src: string;
export default src;
}
declare module '*.ogg' {
const src: string;
export default src;
}
declare module '*.mp3' {
const src: string;
export default src;
}
declare module '*.wav' {
const src: string;
export default src;
}
declare module '*.flac' {
const src: string;
export default src;
}
declare module '*.aac' {
const src: string;
export default src;
}

// fonts
declare module '*.woff' {
const src: string;
export default src;
}
declare module '*.woff2' {
const src: string;
export default src;
}
declare module '*.eot' {
const src: string;
export default src;
}
declare module '*.ttf' {
const src: string;
export default src;
}
declare module '*.otf' {
const src: string;
export default src;
}

// other
declare module '*.wasm' {
const initWasm: (options: WebAssembly.Imports) => Promise<WebAssembly.Exports>;
export default initWasm;
}
declare module '*.webmanifest' {
const src: string;
export default src;
}
declare module '*.pdf' {
const src: string;
export default src;
}
declare module '*.txt' {
const src: string;
export default src;
}

// web worker
declare module '*?worker' {
const workerConstructor: {
new (): Worker;
};
export default workerConstructor;
}

declare module '*?worker&inline' {
const workerConstructor: {
new (): Worker;
};
export default workerConstructor;
}

declare module '*?sharedworker' {
const sharedWorkerConstructor: {
new (): SharedWorker;
};
export default sharedWorkerConstructor;
}

declare module '*?raw' {
const src: string;
export default src;
}

declare module '*?url' {
const src: string;
export default src;
}

declare module '*?inline' {
const src: string;
export default src;
}
2 changes: 2 additions & 0 deletions packages/astro/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
".": "./astro.js",
"./env": "./env.d.ts",
"./client": "./client.d.ts",
"./client-base": "./client-base.d.ts",
"./astro-jsx": "./astro-jsx.d.ts",
"./jsx/*": "./dist/jsx/*",
"./jsx-runtime": "./dist/jsx-runtime/index.js",
Expand Down Expand Up @@ -65,6 +66,7 @@
"config.mjs",
"env.d.ts",
"client.d.ts",
"client-base.d.ts",
"astro-jsx.d.ts",
"README.md",
"vendor"
Expand Down
Loading