Skip to content

Commit ff2caaf

Browse files
birkskyumbirkskyum
committed
initial commit
0 parents  commit ff2caaf

33 files changed

Lines changed: 5203 additions & 0 deletions

‎.changeset/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Changesets
2+
3+
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
4+
with multi-package repos, or single-package repos to help you version and publish your code. You can
5+
find the full documentation for it in
6+
[the Changesets repository](https://github.com/changesets/changesets).

‎.changeset/config.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"$schema": "https://unpkg.com/@changesets/config@2.3.1/schema.json",
3+
"changelog": "@changesets/cli/changelog",
4+
"commit": false,
5+
"fixed": [],
6+
"linked": [],
7+
"access": "public",
8+
"baseBranch": "main",
9+
"updateInternalDependencies": "patch",
10+
"ignore": []
11+
}

‎.changeset/initial-release.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@solidjs/image": minor
3+
---
4+
5+
Release the initial version of `@solidjs/image`.

‎.github/workflows/cr.yml‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
name: ⚡️ Continuous Releases
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
merge_group:
8+
pull_request:
9+
10+
permissions:
11+
contents: read
12+
13+
jobs:
14+
cr:
15+
name: Continuous release
16+
runs-on: ubuntu-latest
17+
steps:
18+
- uses: actions/checkout@v4
19+
20+
- uses: pnpm/action-setup@v4
21+
22+
- name: Use Node.js from .nvmrc
23+
uses: actions/setup-node@v4
24+
with:
25+
node-version-file: ".nvmrc"
26+
registry-url: "https://registry.npmjs.org"
27+
cache: "pnpm"
28+
29+
- name: Install dependencies
30+
run: pnpm install --frozen-lockfile
31+
32+
- name: Build
33+
run: pnpm build
34+
35+
- name: Release package preview
36+
run: pnpm dlx pkg-pr-new@0.0 publish "."

‎.github/workflows/release.yml‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
name: Release
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
concurrency: ${{ github.workflow }}-${{ github.ref }}
9+
10+
permissions:
11+
contents: write
12+
pull-requests: write
13+
id-token: write
14+
15+
jobs:
16+
release:
17+
name: Release
18+
runs-on: ubuntu-latest
19+
steps:
20+
- name: Checkout repository
21+
uses: actions/checkout@v4
22+
23+
- uses: pnpm/action-setup@v4
24+
25+
- name: Use Node.js from .nvmrc
26+
uses: actions/setup-node@v4
27+
with:
28+
node-version-file: ".nvmrc"
29+
registry-url: "https://registry.npmjs.org"
30+
cache: "pnpm"
31+
32+
- name: Install dependencies
33+
run: pnpm install --frozen-lockfile
34+
35+
- name: Create release pull request or publish to npm
36+
id: changesets
37+
uses: changesets/action@v1
38+
with:
39+
publish: pnpm run release
40+
title: "chore: release"
41+
commit: "chore: release"
42+
env:
43+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

‎.github/workflows/tests.yml‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
name: 🧪 Tests
2+
3+
on:
4+
workflow_dispatch:
5+
pull_request:
6+
branches:
7+
- main
8+
push:
9+
branches:
10+
- main
11+
12+
permissions:
13+
contents: read
14+
15+
jobs:
16+
tests:
17+
name: Build and test
18+
runs-on: ubuntu-latest
19+
steps:
20+
- uses: actions/checkout@v4
21+
22+
- uses: pnpm/action-setup@v4
23+
24+
- name: Use Node.js from .nvmrc
25+
uses: actions/setup-node@v4
26+
with:
27+
node-version-file: ".nvmrc"
28+
registry-url: "https://registry.npmjs.org"
29+
cache: "pnpm"
30+
31+
- name: Install dependencies
32+
run: pnpm install --frozen-lockfile
33+
34+
- name: Build
35+
run: pnpm build
36+
37+
- name: Test
38+
run: pnpm test
39+
40+
- name: Verify package
41+
run: npm pack --dry-run

‎.gitignore‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
node_modules
2+
dist
3+
coverage
4+
.vite
5+
.pnpm-store
6+
.image
7+
8+
*.log
9+
*.tsbuildinfo
10+
11+
.env
12+
.DS_Store
13+
Thumbs.db

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
24.15.0

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 Ryan Carniato
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
# `@solidjs/image`
2+
3+
## Install
4+
5+
```bash
6+
npm i @solidjs/image
7+
```
8+
9+
```bash
10+
pnpm add @solidjs/image
11+
```
12+
13+
## Setup
14+
15+
### Vite
16+
17+
```ts
18+
import { imagePlugin } from "@solidjs/image/vite";
19+
20+
export default defineConfig({
21+
plugins: [
22+
imagePlugin({
23+
/**
24+
* Used to process local image imports
25+
*
26+
* example:
27+
* import myImage from './path/to/my-image.jpg?image';
28+
*/
29+
local: {
30+
/**
31+
* Image formats that can be processed
32+
*/
33+
input: ['jpeg', 'png'],
34+
/**
35+
* Image format for the output images.
36+
*
37+
* Take note that each input image will
38+
* produce a new image for each format
39+
*/
40+
output: ['jpeg', 'png'],
41+
/**
42+
* Sizes of the output images, based on width
43+
* while retaining the aspect ratio.
44+
*
45+
* This option also produces an image for
46+
* each width and for each output format.
47+
*/
48+
sizes: [480, 600],
49+
/**
50+
* Quality of the processed images
51+
*/
52+
quality: 80,
53+
/**
54+
* Where the processed images as emitted
55+
*/
56+
publicPath: "public",
57+
},
58+
/**
59+
* Used for remote images
60+
*
61+
* example:
62+
* import myImage from 'image:my-value';
63+
*/
64+
remote: {
65+
/**
66+
* Transforms the right-hand part of the `image:*` string
67+
*/
68+
transformURL(url) {
69+
return {
70+
/**
71+
* The default image for the given url
72+
*/
73+
src: {
74+
source: `https://picsum.photos/seed/${url}/1200/900.webp`,
75+
width: 1080,
76+
height: 760,
77+
},
78+
/**
79+
* Variants of the image (format, size) for responsiveness
80+
*/
81+
variants: [
82+
{
83+
path: `https://picsum.photos/seed/${url}/800/600.jpg`,
84+
width: 800,
85+
type: "image/jpeg",
86+
},
87+
{
88+
path: `https://picsum.photos/seed/${url}/400/300.jpg`,
89+
width: 400,
90+
type: "image/jpeg",
91+
},
92+
{
93+
path: `https://picsum.photos/seed/${url}/800/600.png`,
94+
width: 800,
95+
type: "image/png",
96+
},
97+
{
98+
path: `https://picsum.photos/seed/${url}/400/300.png`,
99+
width: 400,
100+
type: "image/png",
101+
},
102+
],
103+
};
104+
},
105+
},
106+
}),
107+
],
108+
});
109+
```
110+
111+
## Usage
112+
113+
### Local image
114+
115+
```tsx
116+
import { SolidImage as Image } from "@solidjs/image";
117+
import { type JSX, onMount, Show } from "solid-js";
118+
119+
import exampleImage from "../images/example.jpg?image";
120+
121+
interface PlaceholderProps {
122+
show: () => void;
123+
}
124+
125+
function Placeholder(props: PlaceholderProps): JSX.Element {
126+
onMount(() => {
127+
props.show();
128+
});
129+
130+
return <div>Loading...</div>;
131+
}
132+
133+
export default function App(): JSX.Element {
134+
return (
135+
<div style={{ width: "50vw" }}>
136+
<Image
137+
{...exampleImage}
138+
alt="example"
139+
fallback={(visible, show) => (
140+
<Show when={visible()}>
141+
<Placeholder show={show} />
142+
</Show>
143+
)}
144+
/>
145+
</div>
146+
);
147+
}
148+
```
149+
150+
### Remote image
151+
152+
```tsx
153+
import { SolidImage as Image } from "@solidjs/image";
154+
import { type JSX, onMount, Show } from "solid-js";
155+
156+
import exampleImage from "image:foobar";
157+
158+
interface PlaceholderProps {
159+
show: () => void;
160+
}
161+
162+
function Placeholder(props: PlaceholderProps): JSX.Element {
163+
onMount(() => {
164+
props.show();
165+
});
166+
167+
return <div>Loading...</div>;
168+
}
169+
170+
export default function App(): JSX.Element {
171+
return (
172+
<div style={{ width: "50vw" }}>
173+
<Image
174+
{...exampleImage}
175+
alt="example"
176+
fallback={(visible, show) => (
177+
<Show when={visible()}>
178+
<Placeholder show={show} />
179+
</Show>
180+
)}
181+
/>
182+
</div>
183+
);
184+
}
185+
```

0 commit comments

Comments
 (0)