Experiments with resolving

This commit is contained in:
Jade Ellis 2024-07-19 15:34:55 +01:00
parent ae3c753d71
commit e7a42d7b74
No known key found for this signature in database
GPG key ID: 8705A2A3EBF77BD2
4 changed files with 340 additions and 36 deletions

View file

@ -14,6 +14,7 @@
"@json-feed-types/1_1": "^1.0.2",
"@rollup/plugin-commonjs": "^25.0.8",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/pluginutils": "^5.1.0",
"@sveltejs/adapter-auto": "^3.2.2",
"@sveltejs/adapter-node": "^5.1.1",
"@sveltejs/kit": "^2.5.16",
@ -53,7 +54,8 @@
"vite": "^5.3.1",
"vite-plugin-dynamic-import": "^1.5.0",
"vite-plugin-image-optimizer": "^1.1.8",
"vite-plugin-thumbhash": "^0.1.6"
"vite-plugin-thumbhash": "^0.1.6",
"vite-plugin-thumbhash-svg": "workspace:^"
},
"type": "module",
"dependencies": {

View file

@ -1,8 +1,10 @@
<script>
<script lang="ts">
export let src;
export let alt;
export let title;
export let thumb;
// export let align
// export let small: boolean;
// console.log("imgcmp", thumb);
let className = "";
export { className as class };
@ -25,6 +27,18 @@
<figcaption>{title}</figcaption>
{/if}
</figure>
<!-- {:else}
<img
{src}
{alt}
{title}
style:float={align}
width={thumb?.originalWidth}
height={thumb?.originalHeight}
style:background-image={loaded ? "none" : `url('${thumb?.thumbSrc}')`}
on:load={() => loaded = true}
/>
{/if} -->
<style>
img {

View file

@ -1,5 +1,5 @@
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig, type PluginOption } from "vite";
import { defineConfig, type PluginOption } from "vite";
import { ViteImageOptimizer } from "vite-plugin-image-optimizer";
import dynamicImport from 'vite-plugin-dynamic-import'
import typeAsJsonSchemaPlugin from "rollup-plugin-type-as-json-schema";
@ -7,9 +7,10 @@ import typeAsJsonSchemaPlugin from "rollup-plugin-type-as-json-schema";
import path from "node:path";
import { mdsvex } from 'mdsvex';
import mdsvexConfig from "./mdsvex.config.js";
import { extname } from 'node:path';
import { extname, relative } from 'node:path';
// import { realpath } from 'node:fs';
import { thumbHash } from 'vite-plugin-thumbhash'
import { thumbHash } from 'vite-plugin-thumbhash-svg'
// import { imagetools } from 'vite-imagetools'
function mdsvex_transform() {
@ -26,27 +27,74 @@ function mdsvex_transform() {
}
};
}
// export const blurRE = /(\?|&)blurhash(?:&|$)/
// function blurhash_transform() {
// return {
// name: "blurhash transformer",
// async transform(code: string, id: string) {
// if (!blurRE.test(id)) return;
// console.log(id.includes("blurhash"), id)
// return code;
// // return `export default \`${c.replace(/`/g, "\\`").trim()}\`;`;
// }
// };
// }
const fallback: {[key: string]: string} = {
'.avif': 'png',
'.gif': 'gif',
'.heif': 'jpg',
'.jpeg': 'jpg',
'.jpg': 'jpg',
'.png': 'png',
'.tiff': 'jpg',
'.webp': 'png'
import { resolve, dirname } from 'node:path';
import { createFilter } from '@rollup/pluginutils'
type Options =
| {
include?: Array<string | RegExp> | string | RegExp
exclude?: Array<string | RegExp> | string | RegExp
rootdir?: string
}
| undefined
function relativeResolver({ include, exclude, rootdir: rootDirCfg }: Options = {}): import('vite').Plugin {
const rootDir = resolve(rootDirCfg || process.cwd());
const filter = createFilter(include, exclude)
console.log(rootDir)
return {
name: "relative resolver",
async resolveId(file, origin, opt) {
if (file.includes("Design")) {
console.log(file, origin, !filter(origin), opt.isEntry)
}
if (opt.isEntry) return
if (!filter(origin)) {
// console.log(origin, "not filter")
return null
}
console.log("relatively resolving")
console.log(relative(rootDir, resolve(dirname(origin as string), decodeURIComponent(file))))
// if (!isThumbHash(file)) return
// Your local include path must either starts with `./` or `../`
// if (file.startsWith('./') || file.startsWith('../')) {
// console.log(file, 'from', origin, 'to', resolve(dirname(origin as string), file))
// Return an absolute include path
return relative(rootDir, resolve(dirname(origin as string), decodeURIComponent(file)));
// }
return null; // Continue to the next plugins!
},
}
}
export const blurRE = /(\?|&)blurhash(?:&|$)/
const isThumbHash = (id: string) => {
return id.endsWith('?th') || id.endsWith('?thumb')
}
function blurhash_transform() {
return {
name: "blurhash transformer",
async transform(code: string, id: string) {
// if (!blurRE.test(id)) return;
if (!isThumbHash(id)) return;
console.log(id, code)
// console.log(id.includes("blurhash"), id)
return code;
// return `export default \`${c.replace(/`/g, "\\`").trim()}\`;`;
}
};
}
const fallback: { [key: string]: string } = {
'.avif': 'png',
'.gif': 'gif',
'.heif': 'jpg',
'.jpeg': 'jpg',
'.jpg': 'jpg',
'.png': 'png',
'.tiff': 'jpg',
'.webp': 'png'
};
@ -59,6 +107,7 @@ export default defineConfig({
}
},
plugins: [
// relativeResolver({include: [/node_modules\/Notes/]}),
// blurhash_transform(),
typeAsJsonSchemaPlugin(),
ViteImageOptimizer({
@ -69,14 +118,14 @@ export default defineConfig({
// defaultDirectives: async (url, metadata) => {
// console.log("vite", url)
// // if (!url.searchParams.has('svex-enhanced')) return new URLSearchParams();
// // const img_width = url.searchParams.get('imgWidth');
// // const width = img_width ? parseInt(img_width) : (await metadata()).width;
// // if (!width) {
// // console.warn(`Could not determine width of image ${url.href}`);
// return new URLSearchParams();
// // }
// // return new URLSearchParams({
// // 'metadata': '',
// // // format: `avif;webp;${fallback[path.extname(url.href)] ?? 'png'}`
@ -86,14 +135,17 @@ export default defineConfig({
// mdsvex_transform(),
sveltekit(),
dynamicImport({
filter(id) {
if (id.includes('node_modules/Notes')) {
return true
}
}
filter(id) {
if (id.includes('node_modules/Notes')) {
return true
}
}
}),
// blurhash_transform(),
thumbHash({
// exclude: [/\.svg/]
}),
thumbHash(),
// dynamicImportVars({
// // options
// })

238
pnpm-lock.yaml generated
View file

@ -8,6 +8,37 @@ importers:
.: {}
packages/vite-plugin-thumbhash-svg:
dependencies:
'@napi-rs/canvas':
specifier: ^0.1.53
version: 0.1.53
'@resvg/resvg-js':
specifier: ^2.6.2
version: 2.6.2
'@rollup/pluginutils':
specifier: ^5.1.0
version: 5.1.0(rollup@4.18.0)
thumbhash-node:
specifier: ^0.1.3
version: 0.1.3
devDependencies:
'@rollup/plugin-typescript':
specifier: ^11.1.6
version: 11.1.6(rollup@4.18.0)(tslib@2.6.3)(typescript@5.4.5)
'@types/node':
specifier: ^20.14.2
version: 20.14.2
rollup:
specifier: ^4.18.0
version: 4.18.0
rollup-plugin-dts:
specifier: ^6.1.1
version: 6.1.1(rollup@4.18.0)(typescript@5.4.5)
vite:
specifier: ^5.3.1
version: 5.3.1(@types/node@20.14.2)(terser@5.31.1)
packages/website:
dependencies:
'@codemirror/commands':
@ -92,6 +123,9 @@ importers:
'@rollup/plugin-node-resolve':
specifier: ^15.2.3
version: 15.2.3(rollup@4.18.0)
'@rollup/pluginutils':
specifier: ^5.1.0
version: 5.1.0(rollup@4.18.0)
'@sveltejs/adapter-auto':
specifier: ^3.2.2
version: 3.2.2(@sveltejs/kit@2.5.16(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.2)(terser@5.31.1)))(svelte@4.2.18)(vite@5.3.1(@types/node@20.14.2)(terser@5.31.1)))
@ -212,6 +246,9 @@ importers:
vite-plugin-thumbhash:
specifier: ^0.1.6
version: 0.1.6(rollup@4.18.0)(vite@5.3.1(@types/node@20.14.2)(terser@5.31.1))
vite-plugin-thumbhash-svg:
specifier: workspace:^
version: link:../vite-plugin-thumbhash-svg
packages:
@ -219,6 +256,18 @@ packages:
resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
engines: {node: '>=6.0.0'}
'@babel/code-frame@7.24.7':
resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==}
engines: {node: '>=6.9.0'}
'@babel/helper-validator-identifier@7.24.7':
resolution: {integrity: sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==}
engines: {node: '>=6.9.0'}
'@babel/highlight@7.24.7':
resolution: {integrity: sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==}
engines: {node: '>=6.9.0'}
'@babel/runtime@7.24.7':
resolution: {integrity: sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==}
engines: {node: '>=6.9.0'}
@ -771,6 +820,82 @@ packages:
'@polka/url@1.0.0-next.25':
resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
'@resvg/resvg-js-android-arm-eabi@2.6.2':
resolution: {integrity: sha512-FrJibrAk6v29eabIPgcTUMPXiEz8ssrAk7TXxsiZzww9UTQ1Z5KAbFJs+Z0Ez+VZTYgnE5IQJqBcoSiMebtPHA==}
engines: {node: '>= 10'}
cpu: [arm]
os: [android]
'@resvg/resvg-js-android-arm64@2.6.2':
resolution: {integrity: sha512-VcOKezEhm2VqzXpcIJoITuvUS/fcjIw5NA/w3tjzWyzmvoCdd+QXIqy3FBGulWdClvp4g+IfUemigrkLThSjAQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [android]
'@resvg/resvg-js-darwin-arm64@2.6.2':
resolution: {integrity: sha512-nmok2LnAd6nLUKI16aEB9ydMC6Lidiiq2m1nEBDR1LaaP7FGs4AJ90qDraxX+CWlVuRlvNjyYJTNv8qFjtL9+A==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
'@resvg/resvg-js-darwin-x64@2.6.2':
resolution: {integrity: sha512-GInyZLjgWDfsVT6+SHxQVRwNzV0AuA1uqGsOAW+0th56J7Nh6bHHKXHBWzUrihxMetcFDmQMAX1tZ1fZDYSRsw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
'@resvg/resvg-js-linux-arm-gnueabihf@2.6.2':
resolution: {integrity: sha512-YIV3u/R9zJbpqTTNwTZM5/ocWetDKGsro0SWp70eGEM9eV2MerWyBRZnQIgzU3YBnSBQ1RcxRZvY/UxwESfZIw==}
engines: {node: '>= 10'}
cpu: [arm]
os: [linux]
'@resvg/resvg-js-linux-arm64-gnu@2.6.2':
resolution: {integrity: sha512-zc2BlJSim7YR4FZDQ8OUoJg5holYzdiYMeobb9pJuGDidGL9KZUv7SbiD4E8oZogtYY42UZEap7dqkkYuA91pg==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
'@resvg/resvg-js-linux-arm64-musl@2.6.2':
resolution: {integrity: sha512-3h3dLPWNgSsD4lQBJPb4f+kvdOSJHa5PjTYVsWHxLUzH4IFTJUAnmuWpw4KqyQ3NA5QCyhw4TWgxk3jRkQxEKg==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
'@resvg/resvg-js-linux-x64-gnu@2.6.2':
resolution: {integrity: sha512-IVUe+ckIerA7xMZ50duAZzwf1U7khQe2E0QpUxu5MBJNao5RqC0zwV/Zm965vw6D3gGFUl7j4m+oJjubBVoftw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
'@resvg/resvg-js-linux-x64-musl@2.6.2':
resolution: {integrity: sha512-UOf83vqTzoYQO9SZ0fPl2ZIFtNIz/Rr/y+7X8XRX1ZnBYsQ/tTb+cj9TE+KHOdmlTFBxhYzVkP2lRByCzqi4jQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
'@resvg/resvg-js-win32-arm64-msvc@2.6.2':
resolution: {integrity: sha512-7C/RSgCa+7vqZ7qAbItfiaAWhyRSoD4l4BQAbVDqRRsRgY+S+hgS3in0Rxr7IorKUpGE69X48q6/nOAuTJQxeQ==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
'@resvg/resvg-js-win32-ia32-msvc@2.6.2':
resolution: {integrity: sha512-har4aPAlvjnLcil40AC77YDIk6loMawuJwFINEM7n0pZviwMkMvjb2W5ZirsNOZY4aDbo5tLx0wNMREp5Brk+w==}
engines: {node: '>= 10'}
cpu: [ia32]
os: [win32]
'@resvg/resvg-js-win32-x64-msvc@2.6.2':
resolution: {integrity: sha512-ZXtYhtUr5SSaBrUDq7DiyjOFJqBVL/dOBN7N/qmi/pO0IgiWW/f/ue3nbvu9joWE5aAKDoIzy/CxsY0suwGosQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
'@resvg/resvg-js@2.6.2':
resolution: {integrity: sha512-xBaJish5OeGmniDj9cW5PRa/PtmuVU3ziqrbr5xJj901ZDN4TosrVaNZpEiLZAxdfnhAe7uQ7QFWfjPe9d9K2Q==}
engines: {node: '>= 10'}
'@rollup/plugin-commonjs@25.0.8':
resolution: {integrity: sha512-ZEZWTK5n6Qde0to4vS9Mr5x/0UZoqCxPVR9KRUjU4kA2sO7GEUn1fop0DAwpO6z0Nw/kJON9bDmSxdWxO/TT1A==}
engines: {node: '>=14.0.0'}
@ -807,6 +932,19 @@ packages:
rollup:
optional: true
'@rollup/plugin-typescript@11.1.6':
resolution: {integrity: sha512-R92yOmIACgYdJ7dJ97p4K69I8gg6IEHt8M7dUBxN3W6nrO8uUxX5ixl0yU/N3aZTi8WhPuICvOHXQvF6FaykAA==}
engines: {node: '>=14.0.0'}
peerDependencies:
rollup: ^2.14.0||^3.0.0||^4.0.0
tslib: '*'
typescript: '>=3.7.0'
peerDependenciesMeta:
rollup:
optional: true
tslib:
optional: true
'@rollup/pluginutils@5.1.0':
resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
engines: {node: '>=14.0.0'}
@ -1004,7 +1142,7 @@ packages:
'@codemirror/view': '>=6.0.0'
Notes@file:packages/website/Notes-1.0.0.tgz:
resolution: {integrity: sha512-xCCKWgymkVWUkLdweyflXYP+ZoiTiSYCenZ06XwZoc2aLEyt6BtkyuWifHmKSoj3oMr1W5R9fYSHW/KHJPI0gQ==, tarball: file:packages/website/Notes-1.0.0.tgz}
resolution: {integrity: sha512-sdUss5UFgf1JtJojplEO6AblI1Hm4wJXOobEA4IUwwz4Z5Hzv+Kx/sSqTg+ZQH4qFuzbhEUOT53TUycXs8bmZQ==, tarball: file:packages/website/Notes-1.0.0.tgz}
version: 1.0.0
acorn@8.12.0:
@ -1574,6 +1712,9 @@ packages:
resolution: {integrity: sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==}
engines: {node: '>=14'}
js-tokens@4.0.0:
resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
js-yaml@3.14.1:
resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
hasBin: true
@ -2010,6 +2151,13 @@ packages:
deprecated: Rimraf versions prior to v4 are no longer supported
hasBin: true
rollup-plugin-dts@6.1.1:
resolution: {integrity: sha512-aSHRcJ6KG2IHIioYlvAOcEq6U99sVtqDDKVhnwt70rW6tsz3tv5OSjEiWcgzfsHdLyGXZ/3b/7b/+Za3Y6r1XA==}
engines: {node: '>=16'}
peerDependencies:
rollup: ^3.29.4 || ^4
typescript: ^4.5 || ^5.0
rollup-plugin-type-as-json-schema@0.2.6:
resolution: {integrity: sha512-oxnqPK25qv5AqMOxZELQOGVFeidJJLBbd6Hngn4kbTGP9qH+CEw4SUW8hwt8bEVBGQPaL7wLYZXkVXYJgnlZ1Q==}
engines: {node: '>=14'}
@ -2550,6 +2698,23 @@ snapshots:
'@jridgewell/gen-mapping': 0.3.5
'@jridgewell/trace-mapping': 0.3.25
'@babel/code-frame@7.24.7':
dependencies:
'@babel/highlight': 7.24.7
picocolors: 1.0.1
optional: true
'@babel/helper-validator-identifier@7.24.7':
optional: true
'@babel/highlight@7.24.7':
dependencies:
'@babel/helper-validator-identifier': 7.24.7
chalk: 2.4.2
js-tokens: 4.0.0
picocolors: 1.0.1
optional: true
'@babel/runtime@7.24.7':
dependencies:
regenerator-runtime: 0.14.1
@ -3062,6 +3227,57 @@ snapshots:
'@polka/url@1.0.0-next.25': {}
'@resvg/resvg-js-android-arm-eabi@2.6.2':
optional: true
'@resvg/resvg-js-android-arm64@2.6.2':
optional: true
'@resvg/resvg-js-darwin-arm64@2.6.2':
optional: true
'@resvg/resvg-js-darwin-x64@2.6.2':
optional: true
'@resvg/resvg-js-linux-arm-gnueabihf@2.6.2':
optional: true
'@resvg/resvg-js-linux-arm64-gnu@2.6.2':
optional: true
'@resvg/resvg-js-linux-arm64-musl@2.6.2':
optional: true
'@resvg/resvg-js-linux-x64-gnu@2.6.2':
optional: true
'@resvg/resvg-js-linux-x64-musl@2.6.2':
optional: true
'@resvg/resvg-js-win32-arm64-msvc@2.6.2':
optional: true
'@resvg/resvg-js-win32-ia32-msvc@2.6.2':
optional: true
'@resvg/resvg-js-win32-x64-msvc@2.6.2':
optional: true
'@resvg/resvg-js@2.6.2':
optionalDependencies:
'@resvg/resvg-js-android-arm-eabi': 2.6.2
'@resvg/resvg-js-android-arm64': 2.6.2
'@resvg/resvg-js-darwin-arm64': 2.6.2
'@resvg/resvg-js-darwin-x64': 2.6.2
'@resvg/resvg-js-linux-arm-gnueabihf': 2.6.2
'@resvg/resvg-js-linux-arm64-gnu': 2.6.2
'@resvg/resvg-js-linux-arm64-musl': 2.6.2
'@resvg/resvg-js-linux-x64-gnu': 2.6.2
'@resvg/resvg-js-linux-x64-musl': 2.6.2
'@resvg/resvg-js-win32-arm64-msvc': 2.6.2
'@resvg/resvg-js-win32-ia32-msvc': 2.6.2
'@resvg/resvg-js-win32-x64-msvc': 2.6.2
'@rollup/plugin-commonjs@25.0.8(rollup@4.18.0)':
dependencies:
'@rollup/pluginutils': 5.1.0(rollup@4.18.0)
@ -3101,6 +3317,15 @@ snapshots:
optionalDependencies:
rollup: 4.18.0
'@rollup/plugin-typescript@11.1.6(rollup@4.18.0)(tslib@2.6.3)(typescript@5.4.5)':
dependencies:
'@rollup/pluginutils': 5.1.0(rollup@4.18.0)
resolve: 1.22.8
typescript: 5.4.5
optionalDependencies:
rollup: 4.18.0
tslib: 2.6.3
'@rollup/pluginutils@5.1.0(rollup@4.18.0)':
dependencies:
'@types/estree': 1.0.5
@ -3862,6 +4087,9 @@ snapshots:
optionalDependencies:
'@pkgjs/parseargs': 0.11.0
js-tokens@4.0.0:
optional: true
js-yaml@3.14.1:
dependencies:
argparse: 1.0.10
@ -4507,6 +4735,14 @@ snapshots:
dependencies:
glob: 7.2.3
rollup-plugin-dts@6.1.1(rollup@4.18.0)(typescript@5.4.5):
dependencies:
magic-string: 0.30.10
rollup: 4.18.0
typescript: 5.4.5
optionalDependencies:
'@babel/code-frame': 7.24.7
rollup-plugin-type-as-json-schema@0.2.6:
dependencies:
lodash: 4.17.21