From b9a9518e9cbb38f38b83e5a2a6d0575751554879 Mon Sep 17 00:00:00 2001 From: Maxwell Barvian Date: Fri, 25 Oct 2024 23:52:13 -0700 Subject: [PATCH 01/27] Init Svelte, fix tests --- package.json | 2 +- packages/svelte/.gitignore | 29 ++ packages/svelte/.npmrc | 1 + packages/svelte/README.md | 58 +++ packages/svelte/package.json | 71 ++++ packages/svelte/playwright.config.ts | 1 + packages/svelte/postcss.config.js | 6 + packages/svelte/src/app.css | 3 + packages/svelte/src/app.d.ts | 13 + packages/svelte/src/app.html | 12 + packages/svelte/src/lib/NumberFlow.svelte | 40 ++ packages/svelte/src/lib/index.ts | 39 ++ packages/svelte/src/routes/+layout.svelte | 5 + packages/svelte/src/routes/+page.svelte | 10 + packages/svelte/svelte.config.js | 18 + packages/svelte/tailwind.config.ts | 11 + .../renders-correctly-1-chromium-darwin.png | Bin 0 -> 7866 bytes ...ders-correctly-1-chromium-no-js-darwin.png | Bin 0 -> 7866 bytes .../renders-correctly-1-firefox-darwin.png | Bin 0 -> 22947 bytes .../renders-correctly-1-webkit-darwin.png | Bin 0 -> 22229 bytes .../updates-correctly-1-chromium-darwin.png | Bin 0 -> 8020 bytes .../updates-correctly-1-firefox-darwin.png | Bin 0 -> 23022 bytes .../updates-correctly-1-webkit-darwin.png | Bin 0 -> 22345 bytes packages/svelte/tests/render.test.ts | 6 + packages/svelte/tests/update.test.ts | 10 + packages/svelte/tsconfig.json | 15 + packages/svelte/vite.config.ts | 10 + pnpm-lock.yaml | 364 +++++++++++++++++- 28 files changed, 722 insertions(+), 2 deletions(-) create mode 100644 packages/svelte/.gitignore create mode 100644 packages/svelte/.npmrc create mode 100644 packages/svelte/README.md create mode 100644 packages/svelte/package.json create mode 100644 packages/svelte/playwright.config.ts create mode 100644 packages/svelte/postcss.config.js create mode 100644 packages/svelte/src/app.css create mode 100644 packages/svelte/src/app.d.ts create mode 100644 packages/svelte/src/app.html create mode 100644 packages/svelte/src/lib/NumberFlow.svelte create mode 100644 packages/svelte/src/lib/index.ts create mode 100644 packages/svelte/src/routes/+layout.svelte create mode 100644 packages/svelte/src/routes/+page.svelte create mode 100644 packages/svelte/svelte.config.js create mode 100644 packages/svelte/tailwind.config.ts create mode 100644 packages/svelte/tests/__screenshots__/render.test.ts/renders-correctly-1-chromium-darwin.png create mode 100644 packages/svelte/tests/__screenshots__/render.test.ts/renders-correctly-1-chromium-no-js-darwin.png create mode 100644 packages/svelte/tests/__screenshots__/render.test.ts/renders-correctly-1-firefox-darwin.png create mode 100644 packages/svelte/tests/__screenshots__/render.test.ts/renders-correctly-1-webkit-darwin.png create mode 100644 packages/svelte/tests/__screenshots__/update.test.ts/updates-correctly-1-chromium-darwin.png create mode 100644 packages/svelte/tests/__screenshots__/update.test.ts/updates-correctly-1-firefox-darwin.png create mode 100644 packages/svelte/tests/__screenshots__/update.test.ts/updates-correctly-1-webkit-darwin.png create mode 100644 packages/svelte/tests/render.test.ts create mode 100644 packages/svelte/tests/update.test.ts create mode 100644 packages/svelte/tsconfig.json create mode 100644 packages/svelte/vite.config.ts diff --git a/package.json b/package.json index ffe9c9b7..6ce21efc 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "scripts": { "build": "pnpm -r build", "build:packages": "pnpm -r --filter=\"./packages/*\" build", - "test": "pnpm -r test --workspace-concurrency=1", + "test": "pnpm -r --workspace-concurrency=1 test", "format": "prettier --write .", "version": "changeset version && git add --all", "release": "pnpm build:packages && changeset publish" diff --git a/packages/svelte/.gitignore b/packages/svelte/.gitignore new file mode 100644 index 00000000..b7fb094a --- /dev/null +++ b/packages/svelte/.gitignore @@ -0,0 +1,29 @@ +test-results +node_modules + +# Output +.output +.vercel +/.svelte-kit +/build +/dist + +# testing +/test-results/ +/playwright-report/ +/blob-report/ +/playwright/.cache/ + +# OS +.DS_Store +Thumbs.db + +# Env +.env +.env.* +!.env.example +!.env.test + +# Vite +vite.config.js.timestamp-* +vite.config.ts.timestamp-* diff --git a/packages/svelte/.npmrc b/packages/svelte/.npmrc new file mode 100644 index 00000000..b6f27f13 --- /dev/null +++ b/packages/svelte/.npmrc @@ -0,0 +1 @@ +engine-strict=true diff --git a/packages/svelte/README.md b/packages/svelte/README.md new file mode 100644 index 00000000..16c70df2 --- /dev/null +++ b/packages/svelte/README.md @@ -0,0 +1,58 @@ +# create-svelte + +Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte). + +Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging). + +## Creating a project + +If you're seeing this, you've probably already done this step. Congrats! + +```bash +# create a new project in the current directory +npx sv create + +# create a new project in my-app +npx sv create my-app +``` + +## Developing + +Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: + +```bash +npm run dev + +# or start the server and open the app in a new browser tab +npm run dev -- --open +``` + +Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app. + +## Building + +To build your library: + +```bash +npm run package +``` + +To create a production version of your showcase app: + +```bash +npm run build +``` + +You can preview the production build with `npm run preview`. + +> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment. + +## Publishing + +Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)). + +To publish your library to [npm](https://www.npmjs.com): + +```bash +npm publish +``` diff --git a/packages/svelte/package.json b/packages/svelte/package.json new file mode 100644 index 00000000..e8944a2a --- /dev/null +++ b/packages/svelte/package.json @@ -0,0 +1,71 @@ +{ + "name": "@number-flow/svelte", + "publishConfig": { + "access": "public" + }, + "version": "0.1.0", + "description": "A component to transition and format numbers.", + "license": "MIT", + "homepage": "https://number-flow.barvian.me/svelte", + "repository": { + "type": "git", + "url": "https://github.com/barvian/number-flow", + "directory": "src" + }, + "bugs": { + "url": "https://github.com/barvian/number-flow/issues" + }, + "keywords": [ + "accessible", + "odometer", + "animation", + "number-format", + "number-animation", + "animated-number" + ], + "scripts": { + "dev": "vite dev", + "build": "vite build && pnpm package", + "package": "svelte-kit sync && svelte-package && publint", + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", + "test": "playwright test", + "test:ui": "playwright test --ui", + "test:update": "playwright test --update-snapshots" + }, + "files": [ + "dist", + "!dist/**/*.test.*", + "!dist/**/*.spec.*", + "README.md" + ], + "svelte": "./dist/index.js", + "types": "./dist/index.d.ts", + "type": "module", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "svelte": "./dist/index.js" + } + }, + "dependencies": { + "number-flow": "workspace:*" + }, + "peerDependencies": { + "svelte": "^4 || ^5" + }, + "devDependencies": { + "@playwright/test": "^1.45.3", + "@sveltejs/adapter-auto": "^3.0.0", + "@sveltejs/kit": "^2.0.0", + "@sveltejs/package": "^2.0.0", + "@sveltejs/vite-plugin-svelte": "^3.0.0", + "autoprefixer": "^10.4.20", + "publint": "^0.2.0", + "svelte": "^4.0.0", + "svelte-check": "^4.0.0", + "tailwindcss": "^3.4.9", + "typescript": "^5.0.0", + "vite": "^5.0.11" + } +} diff --git a/packages/svelte/playwright.config.ts b/packages/svelte/playwright.config.ts new file mode 100644 index 00000000..f631e3c6 --- /dev/null +++ b/packages/svelte/playwright.config.ts @@ -0,0 +1 @@ +export { config as default } from '../../lib/playwright' diff --git a/packages/svelte/postcss.config.js b/packages/svelte/postcss.config.js new file mode 100644 index 00000000..ba807304 --- /dev/null +++ b/packages/svelte/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {} + } +}; diff --git a/packages/svelte/src/app.css b/packages/svelte/src/app.css new file mode 100644 index 00000000..6c8f99f2 --- /dev/null +++ b/packages/svelte/src/app.css @@ -0,0 +1,3 @@ +@import 'tailwindcss/base'; +@import 'tailwindcss/components'; +@import 'tailwindcss/utilities' diff --git a/packages/svelte/src/app.d.ts b/packages/svelte/src/app.d.ts new file mode 100644 index 00000000..da08e6da --- /dev/null +++ b/packages/svelte/src/app.d.ts @@ -0,0 +1,13 @@ +// See https://svelte.dev/docs/kit/types#app.d.ts +// for information about these interfaces +declare global { + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface PageState {} + // interface Platform {} + } +} + +export {}; diff --git a/packages/svelte/src/app.html b/packages/svelte/src/app.html new file mode 100644 index 00000000..f22aeaad --- /dev/null +++ b/packages/svelte/src/app.html @@ -0,0 +1,12 @@ + + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ + diff --git a/packages/svelte/src/lib/NumberFlow.svelte b/packages/svelte/src/lib/NumberFlow.svelte new file mode 100644 index 00000000..5a8ae3d7 --- /dev/null +++ b/packages/svelte/src/lib/NumberFlow.svelte @@ -0,0 +1,40 @@ + + + + {@html renderFlow({ formatted: parts.formatted, willChange })} + \ No newline at end of file diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts new file mode 100644 index 00000000..fd084451 --- /dev/null +++ b/packages/svelte/src/lib/index.ts @@ -0,0 +1,39 @@ +import { + NumberFlowLite, + canAnimate as _canAnimate, + prefersReducedMotion as _prefersReducedMotion +} from 'number-flow' +import { onMount } from 'svelte' +import { derived, readable } from 'svelte/store' +export type { Value, Format, Trend, NumberFlowLite } from 'number-flow' + +NumberFlowLite.define() + +export { default } from './NumberFlow.svelte' + +const canAnimate = readable(_canAnimate, (set) => { + onMount(() => { + set(_canAnimate) + }) +}) + +const prefersReducedMotion = readable(false, (set) => { + onMount(() => { + set(_prefersReducedMotion?.matches ?? false) + const onChange = ({ matches }: MediaQueryListEvent) => { + set(matches) + } + _prefersReducedMotion?.addEventListener('change', onChange) + return () => { + _prefersReducedMotion?.removeEventListener('change', onChange) + } + }) +}) + +const canAnimateWithPreference = derived( + [canAnimate, prefersReducedMotion], + ([canAnimate, prefersReducedMotion]) => canAnimate && !prefersReducedMotion +) + +export const getCanAnimate = ({ respectMotionPreference = true } = {}) => + respectMotionPreference ? canAnimateWithPreference : canAnimate diff --git a/packages/svelte/src/routes/+layout.svelte b/packages/svelte/src/routes/+layout.svelte new file mode 100644 index 00000000..c3bace01 --- /dev/null +++ b/packages/svelte/src/routes/+layout.svelte @@ -0,0 +1,5 @@ + + + diff --git a/packages/svelte/src/routes/+page.svelte b/packages/svelte/src/routes/+page.svelte new file mode 100644 index 00000000..06b5c091 --- /dev/null +++ b/packages/svelte/src/routes/+page.svelte @@ -0,0 +1,10 @@ + +
+ Text node + +
+ \ No newline at end of file diff --git a/packages/svelte/svelte.config.js b/packages/svelte/svelte.config.js new file mode 100644 index 00000000..1295460d --- /dev/null +++ b/packages/svelte/svelte.config.js @@ -0,0 +1,18 @@ +import adapter from '@sveltejs/adapter-auto'; +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; + +/** @type {import('@sveltejs/kit').Config} */ +const config = { + // Consult https://svelte.dev/docs/kit/integrations + // for more information about preprocessors + preprocess: vitePreprocess(), + + kit: { + // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list. + // If your environment is not supported, or you settled on a specific environment, switch out the adapter. + // See https://svelte.dev/docs/kit/adapters for more information about adapters. + adapter: adapter() + } +}; + +export default config; diff --git a/packages/svelte/tailwind.config.ts b/packages/svelte/tailwind.config.ts new file mode 100644 index 00000000..d50a5e52 --- /dev/null +++ b/packages/svelte/tailwind.config.ts @@ -0,0 +1,11 @@ +import type { Config } from 'tailwindcss'; + +export default { + content: ['./src/**/*.{html,js,svelte,ts}'], + + theme: { + extend: {} + }, + + plugins: [] +} as Config; diff --git a/packages/svelte/tests/__screenshots__/render.test.ts/renders-correctly-1-chromium-darwin.png b/packages/svelte/tests/__screenshots__/render.test.ts/renders-correctly-1-chromium-darwin.png new file mode 100644 index 0000000000000000000000000000000000000000..b5d1e1e5103d24222e6d887ff607ce56e1ba164f GIT binary patch literal 7866 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 wYaLkYz*+~^I>UA>dA%uA7|Z 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 wYaLkYz*+~^IABVx#!1lWScogG5&W@QZjO<=A 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 TpYa9=3)}1F=~}!i@Z!G!%wdcJ literal 0 HcmV?d00001 diff --git a/packages/svelte/tests/__screenshots__/render.test.ts/renders-correctly-1-webkit-darwin.png b/packages/svelte/tests/__screenshots__/render.test.ts/renders-correctly-1-webkit-darwin.png new file mode 100644 index 0000000000000000000000000000000000000000..1bcdbb648ef085b0cecafcfebd75a7ddb271ae7e GIT binary patch literal 22229 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 R-6Li9eDCpH#kYZH{}25e-@5<+ literal 0 HcmV?d00001 diff --git a/packages/svelte/tests/__screenshots__/update.test.ts/updates-correctly-1-chromium-darwin.png b/packages/svelte/tests/__screenshots__/update.test.ts/updates-correctly-1-chromium-darwin.png new file mode 100644 index 0000000000000000000000000000000000000000..d2946e67c8f7050f71c045bb2831280df4dfa0d5 GIT binary patch literal 8020 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 KLfPd1)Bgd|C9Zh@ literal 0 HcmV?d00001 diff --git a/packages/svelte/tests/__screenshots__/update.test.ts/updates-correctly-1-webkit-darwin.png b/packages/svelte/tests/__screenshots__/update.test.ts/updates-correctly-1-webkit-darwin.png new file mode 100644 index 0000000000000000000000000000000000000000..2181a2a9dc2d22048dc385da3c4f59dafd0f67fa GIT binary patch literal 22345 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 { + await page.goto('/') + await expect(page).toHaveScreenshot() +}) diff --git a/packages/svelte/tests/update.test.ts b/packages/svelte/tests/update.test.ts new file mode 100644 index 00000000..d22359c4 --- /dev/null +++ b/packages/svelte/tests/update.test.ts @@ -0,0 +1,10 @@ +import { test, expect } from '@playwright/test' + +test.skip(({ javaScriptEnabled }) => !javaScriptEnabled) + +test('updates correctly', async ({ page }) => { + await page.goto('/') + const btn = page.getByRole('button', { name: 'Change' }) + await btn.click() + await expect(page).toHaveScreenshot() +}) diff --git a/packages/svelte/tsconfig.json b/packages/svelte/tsconfig.json new file mode 100644 index 00000000..6f788f16 --- /dev/null +++ b/packages/svelte/tsconfig.json @@ -0,0 +1,15 @@ +{ + "extends": "./.svelte-kit/tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": true, + "module": "NodeNext", + "moduleResolution": "NodeNext" + } +} diff --git a/packages/svelte/vite.config.ts b/packages/svelte/vite.config.ts new file mode 100644 index 00000000..f8378ebd --- /dev/null +++ b/packages/svelte/vite.config.ts @@ -0,0 +1,10 @@ +import { sveltekit } from '@sveltejs/kit/vite' +import { defineConfig } from 'vite' + +export default defineConfig({ + plugins: [sveltekit()], + server: { + port: 3039, + strictPort: true + } +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 72d7f7f2..ea16bae7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -171,6 +171,49 @@ importers: specifier: ^5 version: 5.6.2 + packages/svelte: + dependencies: + number-flow: + specifier: workspace:* + version: link:../number-flow + devDependencies: + '@playwright/test': + specifier: ^1.45.3 + version: 1.48.0 + '@sveltejs/adapter-auto': + specifier: ^3.0.0 + version: 3.3.1(@sveltejs/kit@2.7.3(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)))(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))) + '@sveltejs/kit': + specifier: ^2.0.0 + version: 2.7.3(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)))(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)) + '@sveltejs/package': + specifier: ^2.0.0 + version: 2.3.7(svelte@4.2.19)(typescript@5.6.2) + '@sveltejs/vite-plugin-svelte': + specifier: ^3.0.0 + version: 3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)) + autoprefixer: + specifier: ^10.4.20 + version: 10.4.20(postcss@8.4.47) + publint: + specifier: ^0.2.0 + version: 0.2.12 + svelte: + specifier: ^4.0.0 + version: 4.2.19 + svelte-check: + specifier: ^4.0.0 + version: 4.0.5(picomatch@4.0.2)(svelte@4.2.19)(typescript@5.6.2) + tailwindcss: + specifier: ^3.4.9 + version: 3.4.13 + typescript: + specifier: ^5.0.0 + version: 5.6.2 + vite: + specifier: ^5.0.11 + version: 5.4.10(@types/node@22.7.9)(terser@5.36.0) + packages/vue: dependencies: number-flow: @@ -2472,6 +2515,42 @@ packages: resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==} engines: {node: '>=18'} + '@sveltejs/adapter-auto@3.3.1': + resolution: {integrity: sha512-5Sc7WAxYdL6q9j/+D0jJKjGREGlfIevDyHSQ2eNETHcB1TKlQWHcAo8AS8H1QdjNvSXpvOwNjykDUHPEAyGgdQ==} + peerDependencies: + '@sveltejs/kit': ^2.0.0 + + '@sveltejs/kit@2.7.3': + resolution: {integrity: sha512-Vx7nq5MJ86I8qXYsVidC5PX6xm+uxt8DydvOdmJoyOK7LvGP18OFEG359yY+aa51t6pENvqZAMqAREQQx1OI2Q==} + engines: {node: '>=18.13'} + hasBin: true + peerDependencies: + '@sveltejs/vite-plugin-svelte': ^3.0.0 || ^4.0.0-next.1 + svelte: ^4.0.0 || ^5.0.0-next.0 + vite: ^5.0.3 + + '@sveltejs/package@2.3.7': + resolution: {integrity: sha512-LYgUkde5GUYqOpXbcoCGUpEH4Ctl3Wj4u4CVZBl56dEeLW5fGHE037ZL1qlK0Ky+QD5uUfwONSeGwIOIighFMQ==} + engines: {node: ^16.14 || >=18} + hasBin: true + peerDependencies: + svelte: ^3.44.0 || ^4.0.0 || ^5.0.0-next.1 + + '@sveltejs/vite-plugin-svelte-inspector@2.1.0': + resolution: {integrity: sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==} + engines: {node: ^18.0.0 || >=20} + peerDependencies: + '@sveltejs/vite-plugin-svelte': ^3.0.0 + svelte: ^4.0.0 || ^5.0.0-next.0 + vite: ^5.0.0 + + '@sveltejs/vite-plugin-svelte@3.1.2': + resolution: {integrity: sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==} + engines: {node: ^18.0.0 || >=20} + peerDependencies: + svelte: ^4.0.0 || ^5.0.0-next.0 + vite: ^5.0.0 + '@svitejs/changesets-changelog-github-compact@1.2.0': resolution: {integrity: sha512-08eKiDAjj4zLug1taXSIJ0kGL5cawjVCyJkBb6EWSg5fEPX6L+Wtr0CH2If4j5KYylz85iaZiFlUItvgJvll5g==} engines: {node: ^14.13.1 || ^16.0.0 || >=18} @@ -3057,6 +3136,10 @@ packages: aria-query@5.3.0: resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==} + aria-query@5.3.2: + resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==} + engines: {node: '>= 0.4'} + array-iterate@2.0.1: resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==} @@ -3283,6 +3366,10 @@ packages: resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} engines: {node: '>= 8.10.0'} + chokidar@4.0.1: + resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==} + engines: {node: '>= 14.16.0'} + chownr@2.0.0: resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==} engines: {node: '>=10'} @@ -3347,6 +3434,9 @@ packages: resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==} engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'} + code-red@1.0.4: + resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==} + collapse-white-space@2.1.0: resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==} @@ -3628,6 +3718,9 @@ packages: decode-named-character-reference@1.0.2: resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==} + dedent-js@1.0.1: + resolution: {integrity: sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==} + deep-eql@5.0.2: resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==} engines: {node: '>=6'} @@ -3704,6 +3797,9 @@ packages: devalue@5.0.0: resolution: {integrity: sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==} + devalue@5.1.1: + resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==} + devlop@1.1.0: resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==} @@ -3851,6 +3947,9 @@ packages: resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==} engines: {node: '>=12'} + esm-env@1.0.0: + resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==} + esprima@4.0.1: resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==} engines: {node: '>=4'} @@ -4128,6 +4227,9 @@ packages: resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==} engines: {node: '>=4'} + globalyzer@0.1.0: + resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==} + globby@11.1.0: resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==} engines: {node: '>=10'} @@ -4136,6 +4238,9 @@ packages: resolution: {integrity: sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==} engines: {node: '>=18'} + globrex@0.1.2: + resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==} + graceful-fs@4.2.11: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} @@ -4291,6 +4396,10 @@ packages: ieee754@1.2.1: resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} + ignore-walk@5.0.1: + resolution: {integrity: sha512-yemi4pMf51WKT7khInJqAvsIGzoqYXblnsz0ql8tM+yi1EKYTY1evX4NAbJrLL/Aanr2HyZeluqU+Oi7MGHokw==} + engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0} + ignore@5.3.2: resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==} engines: {node: '>= 4'} @@ -4626,6 +4735,9 @@ packages: resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==} engines: {node: '>=14'} + locate-character@3.0.0: + resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==} + locate-path@5.0.0: resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==} engines: {node: '>=8'} @@ -4701,6 +4813,9 @@ packages: loupe@3.1.2: resolution: {integrity: sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==} + lower-case@2.0.2: + resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==} + lru-cache@10.4.3: resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} @@ -5152,6 +5267,9 @@ packages: nlcst-to-string@4.0.0: resolution: {integrity: sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==} + no-case@3.0.4: + resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==} + node-addon-api@7.1.1: resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==} @@ -5191,6 +5309,19 @@ packages: resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} engines: {node: '>=0.10.0'} + npm-bundled@2.0.1: + resolution: {integrity: sha512-gZLxXdjEzE/+mOstGDqR6b0EkhJ+kM6fxM6vUuckuctuVPh80Q6pw/rSZj9s4Gex9GxWtIicO1pc8DB9KZWudw==} + engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0} + + npm-normalize-package-bin@2.0.0: + resolution: {integrity: sha512-awzfKUO7v0FscrSpRoogyNm0sajikhBWpU0QMrW09AMi9n1PoKU6WaIqUzuJSQnpciZZmJ/jMZ2Egfmb/9LiWQ==} + engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0} + + npm-packlist@5.1.3: + resolution: {integrity: sha512-263/0NGrn32YFYi4J533qzrQ/krmmrWwhKkzwTuM4f/07ug51odoaNjUexxO4vxlzURHcmYMH1QjvHjsNDKLVg==} + engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0} + hasBin: true + npm-run-path@4.0.1: resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==} engines: {node: '>=8'} @@ -5365,6 +5496,9 @@ packages: resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==} engines: {node: '>= 0.8'} + pascal-case@3.1.2: + resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==} + path-browserify@1.0.1: resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==} @@ -5832,6 +5966,11 @@ packages: psl@1.9.0: resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==} + publint@0.2.12: + resolution: {integrity: sha512-YNeUtCVeM4j9nDiTT2OPczmlyzOkIXNtdDZnSuajAxS/nZ6j3t7Vs9SUB4euQNddiltIwu7Tdd3s+hr08fAsMw==} + engines: {node: '>=16'} + hasBin: true + punycode@2.3.1: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} engines: {node: '>=6'} @@ -5913,6 +6052,10 @@ packages: resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} engines: {node: '>=8.10.0'} + readdirp@4.0.2: + resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==} + engines: {node: '>= 14.16.0'} + redis-errors@1.2.0: resolution: {integrity: sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==} engines: {node: '>=4'} @@ -6052,6 +6195,10 @@ packages: s.color@0.0.15: resolution: {integrity: sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==} + sade@1.8.1: + resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==} + engines: {node: '>=6'} + safe-buffer@5.1.2: resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==} @@ -6111,6 +6258,9 @@ packages: set-blocking@2.0.0: resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==} + set-cookie-parser@2.7.1: + resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==} + setprototypeof@1.1.0: resolution: {integrity: sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==} @@ -6402,6 +6552,30 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + svelte-check@4.0.5: + resolution: {integrity: sha512-icBTBZ3ibBaywbXUat3cK6hB5Du+Kq9Z8CRuyLmm64XIe2/r+lQcbuBx/IQgsbrC+kT2jQ0weVpZSSRIPwB6jQ==} + engines: {node: '>= 18.0.0'} + hasBin: true + peerDependencies: + svelte: ^4.0.0 || ^5.0.0-next.0 + typescript: '>=5.0.0' + + svelte-hmr@0.16.0: + resolution: {integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==} + engines: {node: ^12.20 || ^14.13.1 || >= 16} + peerDependencies: + svelte: ^3.19.0 || ^4.0.0 + + svelte2tsx@0.7.22: + resolution: {integrity: sha512-hf55ujq17ufVpDQlJzaQfRr9EjlLIwGmFlpKq4uYrQAQFw/99q1OcVYyBT6568iJySgBUY9PdccURrORmfetmQ==} + peerDependencies: + svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0 + typescript: ^4.9.4 || ^5.0.0 + + svelte@4.2.19: + resolution: {integrity: sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==} + engines: {node: '>=16'} + svg-tags@1.0.0: resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==} @@ -6464,6 +6638,9 @@ packages: thenify@3.3.1: resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==} + tiny-glob@0.2.9: + resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==} + tiny-inflate@1.0.3: resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==} @@ -6964,6 +7141,14 @@ packages: terser: optional: true + vitefu@0.2.5: + resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==} + peerDependencies: + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 + peerDependenciesMeta: + vite: + optional: true + vitefu@1.0.2: resolution: {integrity: sha512-0/iAvbXyM3RiPPJ4lyD4w6Mjgtf4ejTK6TPvTNG3H32PLwuT0N/ZjJLiXug7ETE/LWtTeHw9WRv7uX/tIKYyKg==} peerDependencies: @@ -9577,6 +9762,63 @@ snapshots: '@sindresorhus/merge-streams@2.3.0': {} + '@sveltejs/adapter-auto@3.3.1(@sveltejs/kit@2.7.3(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)))(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)))': + dependencies: + '@sveltejs/kit': 2.7.3(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)))(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)) + import-meta-resolve: 4.1.0 + + '@sveltejs/kit@2.7.3(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)))(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))': + dependencies: + '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)) + '@types/cookie': 0.6.0 + cookie: 0.6.0 + devalue: 5.1.1 + esm-env: 1.0.0 + import-meta-resolve: 4.1.0 + kleur: 4.1.5 + magic-string: 0.30.12 + mrmime: 2.0.0 + sade: 1.8.1 + set-cookie-parser: 2.7.1 + sirv: 3.0.0 + svelte: 4.2.19 + tiny-glob: 0.2.9 + vite: 5.4.10(@types/node@22.7.9)(terser@5.36.0) + + '@sveltejs/package@2.3.7(svelte@4.2.19)(typescript@5.6.2)': + dependencies: + chokidar: 4.0.1 + kleur: 4.1.5 + sade: 1.8.1 + semver: 7.6.3 + svelte: 4.2.19 + svelte2tsx: 0.7.22(svelte@4.2.19)(typescript@5.6.2) + transitivePeerDependencies: + - typescript + + '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)))(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))': + dependencies: + '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)) + debug: 4.3.7 + svelte: 4.2.19 + vite: 5.4.10(@types/node@22.7.9)(terser@5.36.0) + transitivePeerDependencies: + - supports-color + + '@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))': + dependencies: + '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)))(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)) + debug: 4.3.7 + deepmerge: 4.3.1 + kleur: 4.1.5 + magic-string: 0.30.12 + svelte: 4.2.19 + svelte-hmr: 0.16.0(svelte@4.2.19) + vite: 5.4.10(@types/node@22.7.9)(terser@5.36.0) + vitefu: 0.2.5(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)) + transitivePeerDependencies: + - supports-color + '@svitejs/changesets-changelog-github-compact@1.2.0': dependencies: '@changesets/get-github-info': 0.6.0 @@ -10342,6 +10584,8 @@ snapshots: dependencies: dequal: 2.0.3 + aria-query@5.3.2: {} + array-iterate@2.0.1: {} array-union@2.1.0: {} @@ -10657,6 +10901,10 @@ snapshots: optionalDependencies: fsevents: 2.3.3 + chokidar@4.0.1: + dependencies: + readdirp: 4.0.2 + chownr@2.0.0: {} chroma-js@1.4.1: {} @@ -10703,6 +10951,14 @@ snapshots: co@4.6.0: {} + code-red@1.0.4: + dependencies: + '@jridgewell/sourcemap-codec': 1.5.0 + '@types/estree': 1.0.5 + acorn: 8.12.1 + estree-walker: 3.0.3 + periscopic: 3.1.0 + collapse-white-space@2.1.0: {} color-convert@1.9.3: @@ -10950,6 +11206,8 @@ snapshots: dependencies: character-entities: 2.0.2 + dedent-js@1.0.1: {} + deep-eql@5.0.2: {} deep-equal@1.0.1: {} @@ -10995,6 +11253,8 @@ snapshots: devalue@5.0.0: {} + devalue@5.1.1: {} + devlop@1.1.0: dependencies: dequal: 2.0.3 @@ -11200,6 +11460,8 @@ snapshots: escape-string-regexp@5.0.0: {} + esm-env@1.0.0: {} + esprima@4.0.1: {} estree-util-attach-comments@3.0.0: @@ -11530,6 +11792,8 @@ snapshots: globals@11.12.0: {} + globalyzer@0.1.0: {} + globby@11.1.0: dependencies: array-union: 2.1.0 @@ -11548,6 +11812,8 @@ snapshots: slash: 5.1.0 unicorn-magic: 0.1.0 + globrex@0.1.2: {} + graceful-fs@4.2.11: {} graphql@16.9.0: {} @@ -11804,6 +12070,10 @@ snapshots: ieee754@1.2.1: {} + ignore-walk@5.0.1: + dependencies: + minimatch: 5.1.6 + ignore@5.3.2: {} image-meta@0.2.1: {} @@ -12133,6 +12403,8 @@ snapshots: mlly: 1.7.2 pkg-types: 1.2.1 + locate-character@3.0.0: {} + locate-path@5.0.0: dependencies: p-locate: 4.1.0 @@ -12203,6 +12475,10 @@ snapshots: loupe@3.1.2: {} + lower-case@2.0.2: + dependencies: + tslib: 2.7.0 + lru-cache@10.4.3: {} lru-cache@11.0.0: {} @@ -12995,6 +13271,11 @@ snapshots: dependencies: '@types/nlcst': 2.0.3 + no-case@3.0.4: + dependencies: + lower-case: 2.0.2 + tslib: 2.7.0 + node-addon-api@7.1.1: {} node-fetch-native@1.6.4: {} @@ -13017,6 +13298,19 @@ snapshots: normalize-range@0.1.2: {} + npm-bundled@2.0.1: + dependencies: + npm-normalize-package-bin: 2.0.0 + + npm-normalize-package-bin@2.0.0: {} + + npm-packlist@5.1.3: + dependencies: + glob: 8.1.0 + ignore-walk: 5.0.1 + npm-bundled: 2.0.1 + npm-normalize-package-bin: 2.0.0 + npm-run-path@4.0.1: dependencies: path-key: 3.1.1 @@ -13319,6 +13613,11 @@ snapshots: parseurl@1.3.3: {} + pascal-case@3.1.2: + dependencies: + no-case: 3.0.4 + tslib: 2.7.0 + path-browserify@1.0.1: {} path-exists@4.0.0: {} @@ -13693,6 +13992,12 @@ snapshots: psl@1.9.0: {} + publint@0.2.12: + dependencies: + npm-packlist: 5.1.3 + picocolors: 1.1.1 + sade: 1.8.1 + punycode@2.3.1: {} querystringify@2.2.0: {} @@ -13795,6 +14100,8 @@ snapshots: dependencies: picomatch: 2.3.1 + readdirp@4.0.2: {} + redis-errors@1.2.0: {} redis-parser@3.0.0: @@ -13988,6 +14295,10 @@ snapshots: s.color@0.0.15: {} + sade@1.8.1: + dependencies: + mri: 1.2.0 + safe-buffer@5.1.2: {} safe-buffer@5.2.1: {} @@ -14058,6 +14369,8 @@ snapshots: set-blocking@2.0.0: {} + set-cookie-parser@2.7.1: {} + setprototypeof@1.1.0: {} setprototypeof@1.2.0: {} @@ -14376,6 +14689,46 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} + svelte-check@4.0.5(picomatch@4.0.2)(svelte@4.2.19)(typescript@5.6.2): + dependencies: + '@jridgewell/trace-mapping': 0.3.25 + chokidar: 4.0.1 + fdir: 6.4.2(picomatch@4.0.2) + picocolors: 1.1.1 + sade: 1.8.1 + svelte: 4.2.19 + typescript: 5.6.2 + transitivePeerDependencies: + - picomatch + + svelte-hmr@0.16.0(svelte@4.2.19): + dependencies: + svelte: 4.2.19 + + svelte2tsx@0.7.22(svelte@4.2.19)(typescript@5.6.2): + dependencies: + dedent-js: 1.0.1 + pascal-case: 3.1.2 + svelte: 4.2.19 + typescript: 5.6.2 + + svelte@4.2.19: + dependencies: + '@ampproject/remapping': 2.3.0 + '@jridgewell/sourcemap-codec': 1.5.0 + '@jridgewell/trace-mapping': 0.3.25 + '@types/estree': 1.0.5 + acorn: 8.12.1 + aria-query: 5.3.2 + axobject-query: 4.1.0 + code-red: 1.0.4 + css-tree: 2.3.1 + estree-walker: 3.0.3 + is-reference: 3.0.2 + locate-character: 3.0.0 + magic-string: 0.30.12 + periscopic: 3.1.0 + svg-tags@1.0.0: {} svgo@3.3.2: @@ -14473,6 +14826,11 @@ snapshots: dependencies: any-promise: 1.3.0 + tiny-glob@0.2.9: + dependencies: + globalyzer: 0.1.0 + globrex: 0.1.2 + tiny-inflate@1.0.3: {} tiny-invariant@1.3.3: {} @@ -14867,7 +15225,7 @@ snapshots: cac: 6.7.14 debug: 4.3.7 pathe: 1.1.2 - vite: 5.4.3(@types/node@22.7.9)(terser@5.36.0) + vite: 5.4.10(@types/node@22.7.9)(terser@5.36.0) transitivePeerDependencies: - '@types/node' - less @@ -15018,6 +15376,10 @@ snapshots: fsevents: 2.3.3 terser: 5.36.0 + vitefu@0.2.5(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)): + optionalDependencies: + vite: 5.4.10(@types/node@22.7.9)(terser@5.36.0) + vitefu@1.0.2(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0)): optionalDependencies: vite: 5.4.3(@types/node@22.7.9)(terser@5.36.0) From 4d34368c206e89f8f8f3017be5e03a3c9378f6a0 Mon Sep 17 00:00:00 2001 From: Maxwell Barvian Date: Sat, 26 Oct 2024 00:03:52 -0700 Subject: [PATCH 02/27] Fix failing sveltekit tests --- packages/svelte/tests/update.test.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/svelte/tests/update.test.ts b/packages/svelte/tests/update.test.ts index d22359c4..856e3fa4 100644 --- a/packages/svelte/tests/update.test.ts +++ b/packages/svelte/tests/update.test.ts @@ -3,7 +3,9 @@ import { test, expect } from '@playwright/test' test.skip(({ javaScriptEnabled }) => !javaScriptEnabled) test('updates correctly', async ({ page }) => { - await page.goto('/') + // Not sure why this is necessary for Chromium/Safari but I couldn't get it to work without it: + // https://www.reddit.com/r/sveltejs/comments/15m9jch/how_do_you_wait_for_sveltekit_to_be_completely/ + await page.goto('/', { waitUntil: 'networkidle' }) const btn = page.getByRole('button', { name: 'Change' }) await btn.click() await expect(page).toHaveScreenshot() From a72f8f6c19270b823c9ec56f6d7debb609fa4567 Mon Sep 17 00:00:00 2001 From: Maxwell Barvian Date: Sat, 26 Oct 2024 00:19:56 -0700 Subject: [PATCH 03/27] Svelte docs --- site/src/components/Match.astro | 13 +++++++-- site/src/lib/framework.ts | 11 ++++---- site/src/pages/[...framework]/index.mdx | 35 +++++++++++++++++++++---- 3 files changed, 47 insertions(+), 12 deletions(-) diff --git a/site/src/components/Match.astro b/site/src/components/Match.astro index 465efd3b..c6b6f08d 100644 --- a/site/src/components/Match.astro +++ b/site/src/components/Match.astro @@ -12,10 +12,10 @@ type Props = Polymorphic<{ as: Tag }> & } ) -const { as: _Tag, react, vue, ...props } = Astro.props +const { as: _Tag, react, vue, svelte, ...props } = Astro.props let Tag = _Tag ?? (Object.keys(props).length ? 'div' : Fragment) const framework = getFramework(Astro.params) -const noBool = typeof react !== 'boolean' && typeof vue !== 'boolean' +const noBool = typeof react !== 'boolean' && typeof vue !== 'boolean' && typeof svelte !== 'boolean' --- )) + }{ + framework === 'svelte' && + (typeof svelte == 'string' ? ( + svelte + ) : Astro.slots.has('svelte') ? ( + + ) : ( + (svelte || noBool) && + )) }{ /* */ diff --git a/site/src/lib/framework.ts b/site/src/lib/framework.ts index cb9a5ebf..536bac20 100644 --- a/site/src/lib/framework.ts +++ b/site/src/lib/framework.ts @@ -17,12 +17,13 @@ export const FRAMEWORKS = { sandbox: 'https://codesandbox.io/p/devbox/number-flow-vue-7t7y6y', lightColor: '#42B883', darkColor: '#42B883' + }, + svelte: { + name: 'Svelte', + sandbox: '', + lightColor: '#FF3E00', + darkColor: '#F96844' } - // svelte: { - // name: 'Svelte', - // lightColor: '#FF3E00', - // darkColor: '#F96844' - // }, // vanilla: { // name: 'Vanilla', // lightColor: '#F7DF1E', diff --git a/site/src/pages/[...framework]/index.mdx b/site/src/pages/[...framework]/index.mdx index 7f56b8fe..6b2a9ca0 100644 --- a/site/src/pages/[...framework]/index.mdx +++ b/site/src/pages/[...framework]/index.mdx @@ -49,6 +49,20 @@ import NumberFlow from '@number-flow/vue' ``` + +```svelte + + + + +``` + See [MDN's `Intl.NumberFormat` reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#parameters) for a full list of `locales` and `format` options. @@ -166,18 +180,27 @@ Note that "excessive use of `will-change` will result in excessive memory use" ( Can be set to `false` to animate regardless of the user's reduced motion preference. - + + --- + + +--- + + -

: () => void

+

: (e: CustomEvent) => void

-Triggered when update animations start. Not to be confused with the built-in +Triggered when update animations start. + +Not to be confused with the built-in `onAnimationStart`[`animationstart` event](https://developer.mozilla.org/en-US/docs/Web/API/Element/animationstart_event), which would trigger for animations on the `` element itself. + -

: () => void

+

: (e: CustomEvent) => void

Triggered when update animations finish. @@ -215,14 +238,16 @@ See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric# + useCanAnimate(opts?: {'{'} respectMotionPreference?: boolean {'}'}): boolean useCanAnimate(opts?: {'{'} respectMotionPreference?: {'MaybeRefOrGetter }'}): {'ComputedRef'} +getCanAnimate(opts?: {'{'} respectMotionPreference?: boolean {'}'}): {'Readable'} -Returns `true` if NumerFlow can animate, i.e. the browser supports the [required features](https://caniuse.com/mdn-css_types_mod) +Returns `true`a computed ref whose value is `true`a readable store whose value is `true` if NumerFlow can animate, i.e. the browser supports the [required features](https://caniuse.com/mdn-css_types_mod) and (optionally) the user is [okay with motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion). See the [Framer Motion example](/examples#framer-motion) for a usage scenario. From 6e174e0c30a3b49ba207bc122c1fa13266b2c3cf Mon Sep 17 00:00:00 2001 From: Maxwell Barvian Date: Sat, 26 Oct 2024 00:21:07 -0700 Subject: [PATCH 04/27] Comment react optimization --- packages/react/src/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx index fc5e05e3..bff3d7ab 100644 --- a/packages/react/src/index.tsx +++ b/packages/react/src/index.tsx @@ -125,7 +125,11 @@ class NumberFlowImpl extends React.Component< override getSnapshotBeforeUpdate(prevProps: Readonly) { this.updateNonPartsProps(prevProps) - if (this.props.isolate || this.props.animated === false || prevProps.parts === this.props.parts) + if ( + this.props.isolate || + this.props.animated === false /* totally optional optimization */ || + prevProps.parts === this.props.parts + ) return false this.#el?.willUpdate() return true From 5970cdb95ab0b17ac02c09432301ccd945a36163 Mon Sep 17 00:00:00 2001 From: Maxwell Barvian Date: Sat, 26 Oct 2024 00:26:05 -0700 Subject: [PATCH 05/27] Fix missing timings on Svelte docs --- site/src/pages/[...framework]/index.mdx | 27 ++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/site/src/pages/[...framework]/index.mdx b/site/src/pages/[...framework]/index.mdx index 6b2a9ca0..3ed2d73e 100644 --- a/site/src/pages/[...framework]/index.mdx +++ b/site/src/pages/[...framework]/index.mdx @@ -78,8 +78,7 @@ NumberFlow accepts additional props to customize its transitions: There are three props to customize the animation timings. Each accept an [`EffectTiming`](https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getTiming#return_value) object: - - + ```jsx ``` - - + + ```vue ``` - + + +```svelte + +``` From 7534f2e35d6e871b1b13a008b8a923c23e1077e6 Mon Sep 17 00:00:00 2001 From: Maxwell Barvian Date: Sat, 26 Oct 2024 00:40:28 -0700 Subject: [PATCH 06/27] Fix React animation prop types --- .changeset/fresh-swans-rescue.md | 5 +++++ packages/react/src/index.tsx | 15 +++++++++------ 2 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 .changeset/fresh-swans-rescue.md diff --git a/.changeset/fresh-swans-rescue.md b/.changeset/fresh-swans-rescue.md new file mode 100644 index 00000000..b20d90ae --- /dev/null +++ b/.changeset/fresh-swans-rescue.md @@ -0,0 +1,5 @@ +--- +'@number-flow/react': patch +--- + +fix animation handler types diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx index bff3d7ab..a7a03ab8 100644 --- a/packages/react/src/index.tsx +++ b/packages/react/src/index.tsx @@ -34,8 +34,8 @@ type BaseProps = React.HTMLAttributes & Partial & { isolate?: boolean willChange?: boolean - onAnimationsStart?: () => void - onAnimationsFinish?: () => void + onAnimationsStart?: (e: CustomEvent) => void + onAnimationsFinish?: (e: CustomEvent) => void } type NumberFlowImplProps = BaseProps & { @@ -105,14 +105,17 @@ class NumberFlowImpl extends React.Component< ) if (prevProps?.onAnimationsStart) - this.#el.removeEventListener('animationsstart', prevProps.onAnimationsStart) + this.#el.removeEventListener('animationsstart', prevProps.onAnimationsStart as EventListener) if (this.props.onAnimationsStart) - this.#el.addEventListener('animationsstart', this.props.onAnimationsStart) + this.#el.addEventListener('animationsstart', this.props.onAnimationsStart as EventListener) if (prevProps?.onAnimationsFinish) - this.#el.removeEventListener('animationsfinish', prevProps.onAnimationsFinish) + this.#el.removeEventListener( + 'animationsfinish', + prevProps.onAnimationsFinish as EventListener + ) if (this.props.onAnimationsFinish) - this.#el.addEventListener('animationsfinish', this.props.onAnimationsFinish) + this.#el.addEventListener('animationsfinish', this.props.onAnimationsFinish as EventListener) } override componentDidMount() { From 014fca45e09bdbd4b4ed3946a4ff5ec9714a9348 Mon Sep 17 00:00:00 2001 From: Maxwell Barvian Date: Sat, 26 Oct 2024 01:12:51 -0700 Subject: [PATCH 07/27] Update svelte README --- packages/svelte/README.md | 61 ++++++--------------------------------- 1 file changed, 9 insertions(+), 52 deletions(-) diff --git a/packages/svelte/README.md b/packages/svelte/README.md index 16c70df2..3ed171ca 100644 --- a/packages/svelte/README.md +++ b/packages/svelte/README.md @@ -1,58 +1,15 @@ -# create-svelte +[![NumberFlow for Svelte](https://number-flow.barvian.me/preview.webp)](https://number-flow.barvian.me/svelte) -Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte). +# Number Flow for Svelte -Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging). +A Svelte component to transition & format numbers. -## Creating a project +[![NPM Version](https://img.shields.io/npm/v/@number-flow/svelte.svg)](https://npmjs.com/package/@number-flow/svelte) +[![Bundle size](https://badgen.net/bundlephobia/minzip/@number-flow/svelte@latest)](https://bundlephobia.com/package/@number-flow/svelte@latest) +[![Follow @mbarvian](https://img.shields.io/twitter/follow/mbarvian.svg?style=social&label=Follow)](https://x.com/mbarvian) -If you're seeing this, you've probably already done this step. Congrats! +--- -```bash -# create a new project in the current directory -npx sv create +## Documentation -# create a new project in my-app -npx sv create my-app -``` - -## Developing - -Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: - -```bash -npm run dev - -# or start the server and open the app in a new browser tab -npm run dev -- --open -``` - -Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app. - -## Building - -To build your library: - -```bash -npm run package -``` - -To create a production version of your showcase app: - -```bash -npm run build -``` - -You can preview the production build with `npm run preview`. - -> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment. - -## Publishing - -Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)). - -To publish your library to [npm](https://www.npmjs.com): - -```bash -npm publish -``` +For full documentation, visit [number-flow.barvian.me/svelte](https://number-flow.barvian.me/svelte). From 3c477adf50261f65306c690b053b0c7b505f3eb5 Mon Sep 17 00:00:00 2001 From: Maxwell Barvian Date: Sat, 26 Oct 2024 01:36:41 -0700 Subject: [PATCH 08/27] Init Svelte activity example --- package.json | 1 + pnpm-lock.yaml | 376 +++++++++++++----- prettier.config.js | 8 +- site/astro.config.mjs | 7 +- site/package.json | 5 + .../examples/_Activity/index.astro | 6 +- .../_Activity/svelte/Component.svelte | 107 +++++ .../examples/_Activity/svelte/index.svelte | 25 ++ site/svelte.config.mjs | 5 + 9 files changed, 430 insertions(+), 110 deletions(-) create mode 100644 site/src/pages/[...framework]/examples/_Activity/svelte/Component.svelte create mode 100644 site/src/pages/[...framework]/examples/_Activity/svelte/index.svelte create mode 100644 site/svelte.config.mjs diff --git a/package.json b/package.json index 6ce21efc..70014d8d 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "playwright": "^1.48.0", "prettier": "^3.3.3", "prettier-plugin-astro": "^0.14.0", + "prettier-plugin-svelte": "^3.2.7", "prettier-plugin-tailwindcss": "^0.6.5", "typescript": "^5.6.2" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ea16bae7..4bc57708 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,9 +26,12 @@ importers: prettier-plugin-astro: specifier: ^0.14.0 version: 0.14.1 + prettier-plugin-svelte: + specifier: ^3.2.7 + version: 3.2.7(prettier@3.3.3)(svelte@5.1.3) prettier-plugin-tailwindcss: specifier: ^0.6.5 - version: 0.6.5(prettier-plugin-astro@0.14.1)(prettier@3.3.3) + version: 0.6.5(prettier-plugin-astro@0.14.1)(prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@5.1.3))(prettier@3.3.3) typescript: specifier: ^5.6.2 version: 5.6.2 @@ -95,7 +98,7 @@ importers: version: 18.3.1(react@18.3.1) tsup: specifier: ^8.2.4 - version: 8.2.4(@microsoft/api-extractor@7.47.11(@types/node@22.7.9))(@swc/core@1.7.3(@swc/helpers@0.5.13))(jiti@2.3.3)(postcss@8.4.47)(typescript@5.6.2)(yaml@2.5.0) + version: 8.2.4(@microsoft/api-extractor@7.47.11(@types/node@22.7.9))(@swc/core@1.7.3(@swc/helpers@0.5.13))(jiti@2.3.3)(postcss@8.4.47)(typescript@5.6.3)(yaml@2.5.0) packages/react/test/apps/react-18: dependencies: @@ -252,13 +255,13 @@ importers: version: 0.10.2(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.21.0)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)) nuxt: specifier: ^3.13.2 - version: 3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.9)(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.2)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)) + version: 3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.9)(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)) vue: specifier: latest - version: 3.5.12(typescript@5.6.2) + version: 3.5.12(typescript@5.6.3) vue-router: specifier: latest - version: 4.4.5(vue@3.5.12(typescript@5.6.2)) + version: 4.4.5(vue@3.5.12(typescript@5.6.3)) devDependencies: '@nuxtjs/tailwindcss': specifier: ^6.12.2 @@ -271,16 +274,19 @@ importers: dependencies: '@astrojs/check': specifier: ^0.9.3 - version: 0.9.3(prettier-plugin-astro@0.14.1)(prettier@3.3.3)(typescript@5.6.2) + version: 0.9.3(prettier-plugin-astro@0.14.1)(prettier@3.3.3)(typescript@5.6.3) '@astrojs/mdx': specifier: ^3.1.3 - version: 3.1.3(astro@4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.2)) + version: 3.1.3(astro@4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3)) '@astrojs/react': specifier: ^3.6.2 version: 3.6.2(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0)) + '@astrojs/svelte': + specifier: ^5.7.2 + version: 5.7.2(astro@4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3))(svelte@5.1.3)(typescript@5.6.3)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0)) '@astrojs/vue': specifier: ^4.5.2 - version: 4.5.2(astro@4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.2))(rollup@4.21.0)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2)) + version: 4.5.2(astro@4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3))(rollup@4.21.0)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) '@headlessui/react': specifier: ^2.1.8 version: 2.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -289,10 +295,13 @@ importers: version: 0.8.0(nanostores@0.11.3)(react@18.3.1) '@nanostores/vue': specifier: ^0.10.0 - version: 0.10.0(@vue/devtools-api@6.6.4)(nanostores@0.11.3)(vue@3.5.12(typescript@5.6.2)) + version: 0.10.0(@vue/devtools-api@6.6.4)(nanostores@0.11.3)(vue@3.5.12(typescript@5.6.3)) '@number-flow/react': specifier: workspace:* version: link:../packages/react + '@number-flow/svelte': + specifier: workspace:* + version: link:../packages/svelte '@number-flow/vue': specifier: workspace:* version: link:../packages/vue @@ -313,7 +322,7 @@ importers: version: 18.3.0 astro: specifier: ^4.15.9 - version: 4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.2) + version: 4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3) astro-font: specifier: ^0.1.81 version: 0.1.81 @@ -332,6 +341,9 @@ importers: lucide-react: specifier: ^0.446.0 version: 0.446.0(react@18.3.1) + lucide-svelte: + specifier: ^0.453.0 + version: 0.453.0(svelte@5.1.3) nanostores: specifier: ^0.11.3 version: 0.11.3 @@ -341,19 +353,25 @@ importers: react-dom: specifier: ^18 version: 18.3.1(react@18.3.1) + svelte: + specifier: ^5.1.3 + version: 5.1.3 tailwindcss: specifier: ^3.4.13 version: 3.4.13 tailwindcss-spring: specifier: ^1.0.1 version: 1.0.1(tailwindcss@3.4.13) + typescript: + specifier: ^5.6.3 + version: 5.6.3 vue: specifier: ^3.5.12 - version: 3.5.12(typescript@5.6.2) + version: 3.5.12(typescript@5.6.3) devDependencies: '@astrojs/vercel': specifier: ^7.8.1 - version: 7.8.1(astro@4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.2))(next@14.2.15(@babel/core@7.25.2)(@playwright/test@1.48.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) + version: 7.8.1(astro@4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3))(next@14.2.15(@babel/core@7.25.2)(@playwright/test@1.48.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@astropub/context': specifier: ^0.1.0 version: 0.1.0 @@ -368,13 +386,13 @@ importers: version: 2.0.0 lucide-vue-next: specifier: ^0.453.0 - version: 0.453.0(vue@3.5.12(typescript@5.6.2)) + version: 0.453.0(vue@3.5.12(typescript@5.6.3)) postcss-easing-gradients: specifier: ^3.0.1 version: 3.0.1 radix-vue: specifier: ^1.9.7 - version: 1.9.7(vue@3.5.12(typescript@5.6.2)) + version: 1.9.7(vue@3.5.12(typescript@5.6.3)) sharp: specifier: ^0.33.5 version: 0.33.5 @@ -453,6 +471,14 @@ packages: react: ^17.0.2 || ^18.0.0 || ^19.0.0-beta react-dom: ^17.0.2 || ^18.0.0 || ^19.0.0-beta + '@astrojs/svelte@5.7.2': + resolution: {integrity: sha512-d3nfPe7OMoDqdw7SXfvYlyCSB4p84p92IIvEsu5E1jDPFbS1mlC76hjAlr0nJHQfV1MZPWifEmmfgDBWLCuS8g==} + engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0} + peerDependencies: + astro: ^4.0.0 + svelte: ^4.0.0 || ^5.0.0-next.190 + typescript: ^5.3.3 + '@astrojs/telemetry@3.1.0': resolution: {integrity: sha512-/ca/+D8MIKEC8/A9cSaPUqQNZm+Es/ZinRv0ZAzvu2ios7POQSsVD+VOj7/hypWNsNM3T7RpfgNq7H2TU1KEHA==} engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0} @@ -3028,6 +3054,11 @@ packages: peerDependencies: acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 + acorn-typescript@1.4.13: + resolution: {integrity: sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==} + peerDependencies: + acorn: '>=8.9.0' + acorn@8.12.1: resolution: {integrity: sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==} engines: {node: '>=0.4.0'} @@ -3955,6 +3986,9 @@ packages: engines: {node: '>=4'} hasBin: true + esrap@1.2.2: + resolution: {integrity: sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==} + estree-util-attach-comments@3.0.0: resolution: {integrity: sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==} @@ -4838,6 +4872,11 @@ packages: peerDependencies: react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc + lucide-svelte@0.453.0: + resolution: {integrity: sha512-K+eE2ZeE00ThIEbAmZB3Hq0sVS+1ZLj+7nqtJvN0Xrh/KZnfnEChG+do80sctqXQEE+iG1dA2T+5fVcJS1awfA==} + peerDependencies: + svelte: ^3 || ^4 || ^5.0.0-next.42 + lucide-vue-next@0.453.0: resolution: {integrity: sha512-5zmv83vxAs9SVoe22veDBi8Dw0Fh2F+oTngWgKnKOkrZVbZjceXLQ3tescV2boB0zlaf9R2Sd9RuUP2766xvsQ==} peerDependencies: @@ -5869,6 +5908,12 @@ packages: resolution: {integrity: sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw==} engines: {node: ^14.15.0 || >=16.0.0} + prettier-plugin-svelte@3.2.7: + resolution: {integrity: sha512-/Dswx/ea0lV34If1eDcG3nulQ63YNr5KPDfMsjbdtpSWOxKKJ7nAc2qlVuYwEvCr4raIuredNoR7K4JCkmTGaQ==} + peerDependencies: + prettier: ^3.0.0 + svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0 + prettier-plugin-tailwindcss@0.6.5: resolution: {integrity: sha512-axfeOArc/RiGHjOIy9HytehlC0ZLeMaqY09mm8YCkMzznKiDkwFzOpBvtuhuv3xG5qB73+Mj7OCe2j/L1ryfuQ==} engines: {node: '>=14.21.3'} @@ -6576,6 +6621,10 @@ packages: resolution: {integrity: sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==} engines: {node: '>=16'} + svelte@5.1.3: + resolution: {integrity: sha512-Sl8UFHlBvF54aK8MElFvyvaUfPE2REOz6LnhR2pBClCL11MU4qpn4V+KgAggaXxDyrP2iQixvHbtpHqL/zXlSQ==} + engines: {node: '>=18'} + svg-tags@1.0.0: resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==} @@ -6804,6 +6853,11 @@ packages: engines: {node: '>=14.17'} hasBin: true + typescript@5.6.3: + resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==} + engines: {node: '>=14.17'} + hasBin: true + ufo@1.5.4: resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==} @@ -7459,6 +7513,9 @@ packages: zhead@2.2.4: resolution: {integrity: sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==} + zimmerframe@1.1.2: + resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==} + zip-stream@6.0.1: resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==} engines: {node: '>= 14'} @@ -7491,13 +7548,13 @@ snapshots: '@antfu/utils@0.7.10': {} - '@astrojs/check@0.9.3(prettier-plugin-astro@0.14.1)(prettier@3.3.3)(typescript@5.6.2)': + '@astrojs/check@0.9.3(prettier-plugin-astro@0.14.1)(prettier@3.3.3)(typescript@5.6.3)': dependencies: - '@astrojs/language-server': 2.14.2(prettier-plugin-astro@0.14.1)(prettier@3.3.3)(typescript@5.6.2) + '@astrojs/language-server': 2.14.2(prettier-plugin-astro@0.14.1)(prettier@3.3.3)(typescript@5.6.3) chokidar: 3.6.0 fast-glob: 3.3.2 kleur: 4.1.5 - typescript: 5.6.2 + typescript: 5.6.3 yargs: 17.7.2 transitivePeerDependencies: - prettier @@ -7509,12 +7566,12 @@ snapshots: '@astrojs/internal-helpers@0.4.1': {} - '@astrojs/language-server@2.14.2(prettier-plugin-astro@0.14.1)(prettier@3.3.3)(typescript@5.6.2)': + '@astrojs/language-server@2.14.2(prettier-plugin-astro@0.14.1)(prettier@3.3.3)(typescript@5.6.3)': dependencies: '@astrojs/compiler': 2.10.3 '@astrojs/yaml2ts': 0.2.1 '@jridgewell/sourcemap-codec': 1.5.0 - '@volar/kit': 2.4.5(typescript@5.6.2) + '@volar/kit': 2.4.5(typescript@5.6.3) '@volar/language-core': 2.4.5 '@volar/language-server': 2.4.5 '@volar/language-service': 2.4.5 @@ -7559,12 +7616,12 @@ snapshots: transitivePeerDependencies: - supports-color - '@astrojs/mdx@3.1.3(astro@4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.2))': + '@astrojs/mdx@3.1.3(astro@4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3))': dependencies: '@astrojs/markdown-remark': 5.2.0 '@mdx-js/mdx': 3.0.1 acorn: 8.12.1 - astro: 4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.2) + astro: 4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3) es-module-lexer: 1.5.4 estree-util-visit: 2.0.0 github-slugger: 2.0.0 @@ -7596,6 +7653,17 @@ snapshots: - supports-color - vite + '@astrojs/svelte@5.7.2(astro@4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3))(svelte@5.1.3)(typescript@5.6.3)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))': + dependencies: + '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@5.1.3)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0)) + astro: 4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3) + svelte: 5.1.3 + svelte2tsx: 0.7.22(svelte@5.1.3)(typescript@5.6.3) + typescript: 5.6.3 + transitivePeerDependencies: + - supports-color + - vite + '@astrojs/telemetry@3.1.0': dependencies: ci-info: 4.0.0 @@ -7608,13 +7676,13 @@ snapshots: transitivePeerDependencies: - supports-color - '@astrojs/vercel@7.8.1(astro@4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.2))(next@14.2.15(@babel/core@7.25.2)(@playwright/test@1.48.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': + '@astrojs/vercel@7.8.1(astro@4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3))(next@14.2.15(@babel/core@7.25.2)(@playwright/test@1.48.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': dependencies: '@astrojs/internal-helpers': 0.4.1 '@vercel/analytics': 1.3.1(next@14.2.15(@babel/core@7.25.2)(@playwright/test@1.48.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1) '@vercel/edge': 1.1.2 '@vercel/nft': 0.27.4 - astro: 4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.2) + astro: 4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3) esbuild: 0.21.5 fast-glob: 3.3.2 web-vitals: 3.5.2 @@ -7624,14 +7692,14 @@ snapshots: - react - supports-color - '@astrojs/vue@4.5.2(astro@4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.2))(rollup@4.21.0)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2))': + '@astrojs/vue@4.5.2(astro@4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3))(rollup@4.21.0)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))': dependencies: - '@vitejs/plugin-vue': 5.1.4(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2)) - '@vitejs/plugin-vue-jsx': 4.0.1(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2)) + '@vitejs/plugin-vue': 5.1.4(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) + '@vitejs/plugin-vue-jsx': 4.0.1(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) '@vue/compiler-sfc': 3.5.12 - astro: 4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.2) - vite-plugin-vue-devtools: 7.5.3(rollup@4.21.0)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2)) - vue: 3.5.12(typescript@5.6.2) + astro: 4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3) + vite-plugin-vue-devtools: 7.5.3(rollup@4.21.0)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) + vue: 3.5.12(typescript@5.6.3) transitivePeerDependencies: - '@nuxt/kit' - rollup @@ -8569,11 +8637,11 @@ snapshots: '@floating-ui/utils@0.2.8': {} - '@floating-ui/vue@1.1.5(vue@3.5.12(typescript@5.6.2))': + '@floating-ui/vue@1.1.5(vue@3.5.12(typescript@5.6.3))': dependencies: '@floating-ui/dom': 1.6.11 '@floating-ui/utils': 0.2.8 - vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2)) + vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3)) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -8934,10 +9002,10 @@ snapshots: nanostores: 0.11.3 react: 18.3.1 - '@nanostores/vue@0.10.0(@vue/devtools-api@6.6.4)(nanostores@0.11.3)(vue@3.5.12(typescript@5.6.2))': + '@nanostores/vue@0.10.0(@vue/devtools-api@6.6.4)(nanostores@0.11.3)(vue@3.5.12(typescript@5.6.3))': dependencies: nanostores: 0.11.3 - vue: 3.5.12(typescript@5.6.2) + vue: 3.5.12(typescript@5.6.3) optionalDependencies: '@vue/devtools-api': 6.6.4 @@ -9046,13 +9114,13 @@ snapshots: rc9: 2.1.2 semver: 7.6.3 - '@nuxt/devtools@1.6.0(rollup@4.21.0)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2))': + '@nuxt/devtools@1.6.0(rollup@4.21.0)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))': dependencies: '@antfu/utils': 0.7.10 '@nuxt/devtools-kit': 1.6.0(magicast@0.3.5)(rollup@4.21.0)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)) '@nuxt/devtools-wizard': 1.6.0 '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.21.0) - '@vue/devtools-core': 7.4.4(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2)) + '@vue/devtools-core': 7.4.4(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) '@vue/devtools-kit': 7.4.4 birpc: 0.2.19 consola: 3.2.3 @@ -9210,12 +9278,12 @@ snapshots: - supports-color - webpack-sources - '@nuxt/vite-builder@3.13.2(@types/node@22.7.9)(magicast@0.3.5)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.2)(vue@3.5.12(typescript@5.6.2))': + '@nuxt/vite-builder@3.13.2(@types/node@22.7.9)(magicast@0.3.5)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3))': dependencies: '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.21.0) '@rollup/plugin-replace': 5.0.7(rollup@4.21.0) - '@vitejs/plugin-vue': 5.1.4(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2)) - '@vitejs/plugin-vue-jsx': 4.0.1(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2)) + '@vitejs/plugin-vue': 5.1.4(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) + '@vitejs/plugin-vue-jsx': 4.0.1(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) autoprefixer: 10.4.20(postcss@8.4.47) clear: 0.1.0 consola: 3.2.3 @@ -9228,7 +9296,7 @@ snapshots: get-port-please: 3.1.2 h3: 1.13.0 knitwork: 1.1.0 - magic-string: 0.30.11 + magic-string: 0.30.12 mlly: 1.7.2 ohash: 1.1.4 pathe: 1.1.2 @@ -9243,8 +9311,8 @@ snapshots: unplugin: 1.14.1 vite: 5.4.10(@types/node@22.7.9)(terser@5.36.0) vite-node: 2.1.2(@types/node@22.7.9)(terser@5.36.0) - vite-plugin-checker: 0.8.0(typescript@5.6.2)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)) - vue: 3.5.12(typescript@5.6.2) + vite-plugin-checker: 0.8.0(typescript@5.6.3)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)) + vue: 3.5.12(typescript@5.6.3) vue-bundle-renderer: 2.1.1 transitivePeerDependencies: - '@biomejs/biome' @@ -9805,6 +9873,15 @@ snapshots: transitivePeerDependencies: - supports-color + '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@5.1.3)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0)))(svelte@5.1.3)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))': + dependencies: + '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@5.1.3)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0)) + debug: 4.3.7 + svelte: 5.1.3 + vite: 5.4.3(@types/node@22.7.9)(terser@5.36.0) + transitivePeerDependencies: + - supports-color + '@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))': dependencies: '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)))(svelte@4.2.19)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)) @@ -9819,6 +9896,20 @@ snapshots: transitivePeerDependencies: - supports-color + '@sveltejs/vite-plugin-svelte@3.1.2(svelte@5.1.3)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))': + dependencies: + '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@5.1.3)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0)))(svelte@5.1.3)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0)) + debug: 4.3.7 + deepmerge: 4.3.1 + kleur: 4.1.5 + magic-string: 0.30.12 + svelte: 5.1.3 + svelte-hmr: 0.16.0(svelte@5.1.3) + vite: 5.4.3(@types/node@22.7.9)(terser@5.36.0) + vitefu: 0.2.5(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0)) + transitivePeerDependencies: + - supports-color + '@svitejs/changesets-changelog-github-compact@1.2.0': dependencies: '@changesets/get-github-info': 0.6.0 @@ -9910,10 +10001,10 @@ snapshots: '@tanstack/virtual-core@3.10.8': {} - '@tanstack/vue-virtual@3.10.8(vue@3.5.12(typescript@5.6.2))': + '@tanstack/vue-virtual@3.10.8(vue@3.5.12(typescript@5.6.3))': dependencies: '@tanstack/virtual-core': 3.10.8 - vue: 3.5.12(typescript@5.6.2) + vue: 3.5.12(typescript@5.6.3) '@testing-library/dom@10.4.0': dependencies: @@ -10061,14 +10152,14 @@ snapshots: '@unhead/schema': 1.11.10 '@unhead/shared': 1.11.10 - '@unhead/vue@1.11.10(vue@3.5.12(typescript@5.6.2))': + '@unhead/vue@1.11.10(vue@3.5.12(typescript@5.6.3))': dependencies: '@unhead/schema': 1.11.10 '@unhead/shared': 1.11.10 defu: 6.1.4 hookable: 5.5.3 unhead: 1.11.10 - vue: 3.5.12(typescript@5.6.2) + vue: 3.5.12(typescript@5.6.3) '@vercel/analytics@1.3.1(next@14.2.15(@babel/core@7.25.2)(@playwright/test@1.48.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)': dependencies: @@ -10126,36 +10217,41 @@ snapshots: transitivePeerDependencies: - supports-color - '@vitejs/plugin-vue-jsx@4.0.1(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2))': + '@vitejs/plugin-vue-jsx@4.0.1(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))': dependencies: '@babel/core': 7.25.2 '@babel/plugin-transform-typescript': 7.25.9(@babel/core@7.25.2) '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.25.2) vite: 5.4.10(@types/node@22.7.9)(terser@5.36.0) - vue: 3.5.12(typescript@5.6.2) + vue: 3.5.12(typescript@5.6.3) transitivePeerDependencies: - supports-color - '@vitejs/plugin-vue-jsx@4.0.1(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2))': + '@vitejs/plugin-vue-jsx@4.0.1(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))': dependencies: '@babel/core': 7.25.2 '@babel/plugin-transform-typescript': 7.25.9(@babel/core@7.25.2) '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.25.2) vite: 5.4.3(@types/node@22.7.9)(terser@5.36.0) - vue: 3.5.12(typescript@5.6.2) + vue: 3.5.12(typescript@5.6.3) transitivePeerDependencies: - supports-color - '@vitejs/plugin-vue@5.1.4(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2))': + '@vitejs/plugin-vue@5.1.4(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))': dependencies: vite: 5.4.10(@types/node@22.7.9)(terser@5.36.0) - vue: 3.5.12(typescript@5.6.2) + vue: 3.5.12(typescript@5.6.3) '@vitejs/plugin-vue@5.1.4(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2))': dependencies: vite: 5.4.3(@types/node@22.7.9)(terser@5.36.0) vue: 3.5.12(typescript@5.6.2) + '@vitejs/plugin-vue@5.1.4(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))': + dependencies: + vite: 5.4.3(@types/node@22.7.9)(terser@5.36.0) + vue: 3.5.12(typescript@5.6.3) + '@vitest/browser@2.1.2(@vitest/spy@2.1.2)(playwright@1.48.0)(typescript@5.6.2)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vitest@2.1.2)': dependencies: '@testing-library/dom': 10.4.0 @@ -10188,7 +10284,7 @@ snapshots: dependencies: '@vitest/spy': 2.1.2 estree-walker: 3.0.3 - magic-string: 0.30.11 + magic-string: 0.30.12 optionalDependencies: msw: 2.4.10(typescript@5.6.2) vite: 5.4.3(@types/node@22.7.9)(terser@5.36.0) @@ -10205,7 +10301,7 @@ snapshots: '@vitest/snapshot@2.1.2': dependencies: '@vitest/pretty-format': 2.1.2 - magic-string: 0.30.11 + magic-string: 0.30.12 pathe: 1.1.2 '@vitest/spy@2.1.2': @@ -10218,12 +10314,12 @@ snapshots: loupe: 3.1.2 tinyrainbow: 1.2.0 - '@volar/kit@2.4.5(typescript@5.6.2)': + '@volar/kit@2.4.5(typescript@5.6.3)': dependencies: '@volar/language-service': 2.4.5 '@volar/typescript': 2.4.5 typesafe-path: 0.2.2 - typescript: 5.6.2 + typescript: 5.6.3 vscode-languageserver-textdocument: 1.0.12 vscode-uri: 3.0.8 @@ -10268,7 +10364,7 @@ snapshots: '@vscode/l10n@0.0.18': {} - '@vue-macros/common@1.15.0(rollup@4.21.0)(vue@3.5.12(typescript@5.6.2))': + '@vue-macros/common@1.15.0(rollup@4.21.0)(vue@3.5.12(typescript@5.6.3))': dependencies: '@babel/types': 7.25.9 '@rollup/pluginutils': 5.1.3(rollup@4.21.0) @@ -10277,7 +10373,7 @@ snapshots: local-pkg: 0.5.0 magic-string-ast: 0.6.2 optionalDependencies: - vue: 3.5.12(typescript@5.6.2) + vue: 3.5.12(typescript@5.6.3) transitivePeerDependencies: - rollup @@ -10348,7 +10444,7 @@ snapshots: '@vue/devtools-api@6.6.4': {} - '@vue/devtools-core@7.4.4(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2))': + '@vue/devtools-core@7.4.4(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))': dependencies: '@vue/devtools-kit': 7.5.3 '@vue/devtools-shared': 7.5.3 @@ -10356,11 +10452,11 @@ snapshots: nanoid: 3.3.7 pathe: 1.1.2 vite-hot-client: 0.2.3(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)) - vue: 3.5.12(typescript@5.6.2) + vue: 3.5.12(typescript@5.6.3) transitivePeerDependencies: - vite - '@vue/devtools-core@7.5.3(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2))': + '@vue/devtools-core@7.5.3(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3))': dependencies: '@vue/devtools-kit': 7.5.3 '@vue/devtools-shared': 7.5.3 @@ -10368,7 +10464,7 @@ snapshots: nanoid: 3.3.7 pathe: 1.1.2 vite-hot-client: 0.2.3(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0)) - vue: 3.5.12(typescript@5.6.2) + vue: 3.5.12(typescript@5.6.3) transitivePeerDependencies: - vite @@ -10431,23 +10527,29 @@ snapshots: '@vue/shared': 3.5.12 vue: 3.5.12(typescript@5.6.2) + '@vue/server-renderer@3.5.12(vue@3.5.12(typescript@5.6.3))': + dependencies: + '@vue/compiler-ssr': 3.5.12 + '@vue/shared': 3.5.12 + vue: 3.5.12(typescript@5.6.3) + '@vue/shared@3.5.12': {} - '@vueuse/core@10.11.1(vue@3.5.12(typescript@5.6.2))': + '@vueuse/core@10.11.1(vue@3.5.12(typescript@5.6.3))': dependencies: '@types/web-bluetooth': 0.0.20 '@vueuse/metadata': 10.11.1 - '@vueuse/shared': 10.11.1(vue@3.5.12(typescript@5.6.2)) - vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2)) + '@vueuse/shared': 10.11.1(vue@3.5.12(typescript@5.6.3)) + vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3)) transitivePeerDependencies: - '@vue/composition-api' - vue '@vueuse/metadata@10.11.1': {} - '@vueuse/shared@10.11.1(vue@3.5.12(typescript@5.6.2))': + '@vueuse/shared@10.11.1(vue@3.5.12(typescript@5.6.3))': dependencies: - vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.2)) + vue-demi: 0.14.10(vue@3.5.12(typescript@5.6.3)) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -10471,6 +10573,10 @@ snapshots: dependencies: acorn: 8.12.1 + acorn-typescript@1.4.13(acorn@8.12.1): + dependencies: + acorn: 8.12.1 + acorn@8.12.1: {} agent-base@6.0.2: @@ -10606,7 +10712,7 @@ snapshots: astro-font@0.1.81: {} - astro@4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.2): + astro@4.15.9(@types/node@22.7.9)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3): dependencies: '@astrojs/compiler': 2.10.3 '@astrojs/internal-helpers': 0.4.1 @@ -10662,7 +10768,7 @@ snapshots: string-width: 7.2.0 strip-ansi: 7.1.0 tinyexec: 0.3.0 - tsconfck: 3.1.3(typescript@5.6.2) + tsconfck: 3.1.3(typescript@5.6.3) unist-util-visit: 5.0.0 vfile: 6.0.3 vite: 5.4.3(@types/node@22.7.9)(terser@5.36.0) @@ -10672,7 +10778,7 @@ snapshots: yargs-parser: 21.1.1 zod: 3.23.8 zod-to-json-schema: 3.23.2(zod@3.23.8) - zod-to-ts: 1.2.0(typescript@5.6.2)(zod@3.23.8) + zod-to-ts: 1.2.0(typescript@5.6.3)(zod@3.23.8) optionalDependencies: sharp: 0.33.5 transitivePeerDependencies: @@ -11464,6 +11570,11 @@ snapshots: esprima@4.0.1: {} + esrap@1.2.2: + dependencies: + '@jridgewell/sourcemap-codec': 1.5.0 + '@types/estree': 1.0.5 + estree-util-attach-comments@3.0.0: dependencies: '@types/estree': 1.0.5 @@ -12500,9 +12611,13 @@ snapshots: dependencies: react: 18.3.1 - lucide-vue-next@0.453.0(vue@3.5.12(typescript@5.6.2)): + lucide-svelte@0.453.0(svelte@5.1.3): dependencies: - vue: 3.5.12(typescript@5.6.2) + svelte: 5.1.3 + + lucide-vue-next@0.453.0(vue@3.5.12(typescript@5.6.3)): + dependencies: + vue: 3.5.12(typescript@5.6.3) lz-string@1.5.0: {} @@ -13218,7 +13333,7 @@ snapshots: klona: 2.0.6 knitwork: 1.1.0 listhen: 1.9.0 - magic-string: 0.30.11 + magic-string: 0.30.12 mime: 4.0.4 mlly: 1.7.2 mri: 1.2.0 @@ -13332,18 +13447,18 @@ snapshots: nuxi@3.15.0: {} - nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.9)(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.2)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)): + nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.9)(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)): dependencies: '@nuxt/devalue': 2.0.2 - '@nuxt/devtools': 1.6.0(rollup@4.21.0)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2)) + '@nuxt/devtools': 1.6.0(rollup@4.21.0)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.21.0) '@nuxt/schema': 3.13.2(rollup@4.21.0) '@nuxt/telemetry': 2.6.0(magicast@0.3.5)(rollup@4.21.0) - '@nuxt/vite-builder': 3.13.2(@types/node@22.7.9)(magicast@0.3.5)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.2)(vue@3.5.12(typescript@5.6.2)) + '@nuxt/vite-builder': 3.13.2(@types/node@22.7.9)(magicast@0.3.5)(rollup@4.21.0)(terser@5.36.0)(typescript@5.6.3)(vue@3.5.12(typescript@5.6.3)) '@unhead/dom': 1.11.10 '@unhead/shared': 1.11.10 '@unhead/ssr': 1.11.10 - '@unhead/vue': 1.11.10(vue@3.5.12(typescript@5.6.2)) + '@unhead/vue': 1.11.10(vue@3.5.12(typescript@5.6.3)) '@vue/shared': 3.5.12 acorn: 8.12.1 c12: 1.11.2(magicast@0.3.5) @@ -13391,13 +13506,13 @@ snapshots: unhead: 1.11.10 unimport: 3.13.1(rollup@4.21.0) unplugin: 1.14.1 - unplugin-vue-router: 0.10.8(rollup@4.21.0)(vue-router@4.4.5(vue@3.5.12(typescript@5.6.2)))(vue@3.5.12(typescript@5.6.2)) + unplugin-vue-router: 0.10.8(rollup@4.21.0)(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3)) unstorage: 1.12.0(ioredis@5.4.1) untyped: 1.5.1 - vue: 3.5.12(typescript@5.6.2) + vue: 3.5.12(typescript@5.6.3) vue-bundle-renderer: 2.1.1 vue-devtools-stub: 0.1.0 - vue-router: 4.4.5(vue@3.5.12(typescript@5.6.2)) + vue-router: 4.4.5(vue@3.5.12(typescript@5.6.3)) optionalDependencies: '@parcel/watcher': 2.4.1 '@types/node': 22.7.9 @@ -13955,11 +14070,17 @@ snapshots: prettier: 3.3.3 sass-formatter: 0.7.9 - prettier-plugin-tailwindcss@0.6.5(prettier-plugin-astro@0.14.1)(prettier@3.3.3): + prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@5.1.3): + dependencies: + prettier: 3.3.3 + svelte: 5.1.3 + + prettier-plugin-tailwindcss@0.6.5(prettier-plugin-astro@0.14.1)(prettier-plugin-svelte@3.2.7(prettier@3.3.3)(svelte@5.1.3))(prettier@3.3.3): dependencies: prettier: 3.3.3 optionalDependencies: prettier-plugin-astro: 0.14.1 + prettier-plugin-svelte: 3.2.7(prettier@3.3.3)(svelte@5.1.3) prettier@2.8.7: {} @@ -14006,20 +14127,20 @@ snapshots: queue-tick@1.0.1: {} - radix-vue@1.9.7(vue@3.5.12(typescript@5.6.2)): + radix-vue@1.9.7(vue@3.5.12(typescript@5.6.3)): dependencies: '@floating-ui/dom': 1.6.11 - '@floating-ui/vue': 1.1.5(vue@3.5.12(typescript@5.6.2)) + '@floating-ui/vue': 1.1.5(vue@3.5.12(typescript@5.6.3)) '@internationalized/date': 3.5.6 '@internationalized/number': 3.5.4 - '@tanstack/vue-virtual': 3.10.8(vue@3.5.12(typescript@5.6.2)) - '@vueuse/core': 10.11.1(vue@3.5.12(typescript@5.6.2)) - '@vueuse/shared': 10.11.1(vue@3.5.12(typescript@5.6.2)) + '@tanstack/vue-virtual': 3.10.8(vue@3.5.12(typescript@5.6.3)) + '@vueuse/core': 10.11.1(vue@3.5.12(typescript@5.6.3)) + '@vueuse/shared': 10.11.1(vue@3.5.12(typescript@5.6.3)) aria-hidden: 1.2.4 defu: 6.1.4 fast-deep-equal: 3.1.3 nanoid: 5.0.7 - vue: 3.5.12(typescript@5.6.2) + vue: 3.5.12(typescript@5.6.3) transitivePeerDependencies: - '@vue/composition-api' @@ -14705,6 +14826,10 @@ snapshots: dependencies: svelte: 4.2.19 + svelte-hmr@0.16.0(svelte@5.1.3): + dependencies: + svelte: 5.1.3 + svelte2tsx@0.7.22(svelte@4.2.19)(typescript@5.6.2): dependencies: dedent-js: 1.0.1 @@ -14712,6 +14837,13 @@ snapshots: svelte: 4.2.19 typescript: 5.6.2 + svelte2tsx@0.7.22(svelte@5.1.3)(typescript@5.6.3): + dependencies: + dedent-js: 1.0.1 + pascal-case: 3.1.2 + svelte: 5.1.3 + typescript: 5.6.3 + svelte@4.2.19: dependencies: '@ampproject/remapping': 2.3.0 @@ -14729,6 +14861,22 @@ snapshots: magic-string: 0.30.12 periscopic: 3.1.0 + svelte@5.1.3: + dependencies: + '@ampproject/remapping': 2.3.0 + '@jridgewell/sourcemap-codec': 1.5.0 + '@types/estree': 1.0.5 + acorn: 8.12.1 + acorn-typescript: 1.4.13(acorn@8.12.1) + aria-query: 5.3.2 + axobject-query: 4.1.0 + esm-env: 1.0.0 + esrap: 1.2.2 + is-reference: 3.0.2 + locate-character: 3.0.0 + magic-string: 0.30.12 + zimmerframe: 1.1.2 + svg-tags@1.0.0: {} svgo@3.3.2: @@ -14890,9 +15038,9 @@ snapshots: ts-interface-checker@0.1.13: {} - tsconfck@3.1.3(typescript@5.6.2): + tsconfck@3.1.3(typescript@5.6.3): optionalDependencies: - typescript: 5.6.2 + typescript: 5.6.3 tslib@2.6.2: {} @@ -14900,7 +15048,7 @@ snapshots: tsscmp@1.0.6: {} - tsup@8.2.4(@microsoft/api-extractor@7.47.11(@types/node@22.7.9))(@swc/core@1.7.3(@swc/helpers@0.5.13))(jiti@2.3.3)(postcss@8.4.47)(typescript@5.6.2)(yaml@2.5.0): + tsup@8.2.4(@microsoft/api-extractor@7.47.11(@types/node@22.7.9))(@swc/core@1.7.3(@swc/helpers@0.5.13))(jiti@2.3.3)(postcss@8.4.47)(typescript@5.6.3)(yaml@2.5.0): dependencies: bundle-require: 5.0.0(esbuild@0.23.1) cac: 6.7.14 @@ -14922,7 +15070,7 @@ snapshots: '@microsoft/api-extractor': 7.47.11(@types/node@22.7.9) '@swc/core': 1.7.3(@swc/helpers@0.5.13) postcss: 8.4.47 - typescript: 5.6.2 + typescript: 5.6.3 transitivePeerDependencies: - jiti - supports-color @@ -14962,6 +15110,8 @@ snapshots: typescript@5.6.2: {} + typescript@5.6.3: {} + ufo@1.5.4: {} ultrahtml@1.5.3: {} @@ -15033,7 +15183,7 @@ snapshots: estree-walker: 3.0.3 fast-glob: 3.3.2 local-pkg: 0.5.0 - magic-string: 0.30.11 + magic-string: 0.30.12 mlly: 1.7.2 pathe: 1.1.2 pkg-types: 1.2.1 @@ -15096,24 +15246,24 @@ snapshots: universalify@2.0.1: {} - unplugin-vue-router@0.10.8(rollup@4.21.0)(vue-router@4.4.5(vue@3.5.12(typescript@5.6.2)))(vue@3.5.12(typescript@5.6.2)): + unplugin-vue-router@0.10.8(rollup@4.21.0)(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3)): dependencies: '@babel/types': 7.25.9 '@rollup/pluginutils': 5.1.0(rollup@4.21.0) - '@vue-macros/common': 1.15.0(rollup@4.21.0)(vue@3.5.12(typescript@5.6.2)) + '@vue-macros/common': 1.15.0(rollup@4.21.0)(vue@3.5.12(typescript@5.6.3)) ast-walker-scope: 0.6.2 chokidar: 3.6.0 fast-glob: 3.3.2 json5: 2.2.3 local-pkg: 0.5.0 - magic-string: 0.30.11 + magic-string: 0.30.12 mlly: 1.7.2 pathe: 1.1.2 scule: 1.3.0 unplugin: 1.14.1 yaml: 2.5.0 optionalDependencies: - vue-router: 4.4.5(vue@3.5.12(typescript@5.6.2)) + vue-router: 4.4.5(vue@3.5.12(typescript@5.6.3)) transitivePeerDependencies: - rollup - vue @@ -15237,7 +15387,7 @@ snapshots: - supports-color - terser - vite-plugin-checker@0.8.0(typescript@5.6.2)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)): + vite-plugin-checker@0.8.0(typescript@5.6.3)(vite@5.4.10(@types/node@22.7.9)(terser@5.36.0)): dependencies: '@babel/code-frame': 7.25.9 ansi-escapes: 4.3.2 @@ -15255,7 +15405,7 @@ snapshots: vscode-languageserver-textdocument: 1.0.12 vscode-uri: 3.0.8 optionalDependencies: - typescript: 5.6.2 + typescript: 5.6.3 vite-plugin-dts@4.3.0(@types/node@22.7.9)(rollup@4.21.0)(typescript@5.6.2)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0)): dependencies: @@ -15310,9 +15460,9 @@ snapshots: - rollup - supports-color - vite-plugin-vue-devtools@7.5.3(rollup@4.21.0)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2)): + vite-plugin-vue-devtools@7.5.3(rollup@4.21.0)(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)): dependencies: - '@vue/devtools-core': 7.5.3(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.2)) + '@vue/devtools-core': 7.5.3(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0))(vue@3.5.12(typescript@5.6.3)) '@vue/devtools-kit': 7.5.3 '@vue/devtools-shared': 7.5.3 execa: 8.0.1 @@ -15380,6 +15530,10 @@ snapshots: optionalDependencies: vite: 5.4.10(@types/node@22.7.9)(terser@5.36.0) + vitefu@0.2.5(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0)): + optionalDependencies: + vite: 5.4.3(@types/node@22.7.9)(terser@5.36.0) + vitefu@1.0.2(vite@5.4.3(@types/node@22.7.9)(terser@5.36.0)): optionalDependencies: vite: 5.4.3(@types/node@22.7.9)(terser@5.36.0) @@ -15541,16 +15695,16 @@ snapshots: dependencies: ufo: 1.5.4 - vue-demi@0.14.10(vue@3.5.12(typescript@5.6.2)): + vue-demi@0.14.10(vue@3.5.12(typescript@5.6.3)): dependencies: - vue: 3.5.12(typescript@5.6.2) + vue: 3.5.12(typescript@5.6.3) vue-devtools-stub@0.1.0: {} - vue-router@4.4.5(vue@3.5.12(typescript@5.6.2)): + vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)): dependencies: '@vue/devtools-api': 6.6.4 - vue: 3.5.12(typescript@5.6.2) + vue: 3.5.12(typescript@5.6.3) vue@3.5.12(typescript@5.6.2): dependencies: @@ -15562,6 +15716,16 @@ snapshots: optionalDependencies: typescript: 5.6.2 + vue@3.5.12(typescript@5.6.3): + dependencies: + '@vue/compiler-dom': 3.5.12 + '@vue/compiler-sfc': 3.5.12 + '@vue/runtime-dom': 3.5.12 + '@vue/server-renderer': 3.5.12(vue@3.5.12(typescript@5.6.3)) + '@vue/shared': 3.5.12 + optionalDependencies: + typescript: 5.6.3 + web-namespaces@2.0.1: {} web-vitals@3.5.2: {} @@ -15685,6 +15849,8 @@ snapshots: zhead@2.2.4: {} + zimmerframe@1.1.2: {} + zip-stream@6.0.1: dependencies: archiver-utils: 5.0.2 @@ -15695,9 +15861,9 @@ snapshots: dependencies: zod: 3.23.8 - zod-to-ts@1.2.0(typescript@5.6.2)(zod@3.23.8): + zod-to-ts@1.2.0(typescript@5.6.3)(zod@3.23.8): dependencies: - typescript: 5.6.2 + typescript: 5.6.3 zod: 3.23.8 zod@3.23.8: {} diff --git a/prettier.config.js b/prettier.config.js index 38ea998d..c948f17c 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -5,13 +5,19 @@ export default { semi: false, trailingComma: 'none', printWidth: 100, - plugins: ['prettier-plugin-astro', 'prettier-plugin-tailwindcss'], + plugins: ['prettier-plugin-astro', 'prettier-plugin-svelte', 'prettier-plugin-tailwindcss'], overrides: [ { files: '*.astro', options: { parser: 'astro' } + }, + { + files: '*.svelte', + options: { + parser: 'svelte' + } } ] } diff --git a/site/astro.config.mjs b/site/astro.config.mjs index ec748e8e..e596850c 100644 --- a/site/astro.config.mjs +++ b/site/astro.config.mjs @@ -1,11 +1,11 @@ import { defineConfig, envField } from 'astro/config' -import react from '@astrojs/react' import pkg from '/../packages/number-flow/package.json' import mdx from '@astrojs/mdx' import vercel from '@astrojs/vercel/serverless' import shikiTheme from './highlighter-theme.json' - +import react from '@astrojs/react' import vue from '@astrojs/vue' +import svelte from '@astrojs/svelte' // https://astro.build/config export default defineConfig({ @@ -46,7 +46,8 @@ export default defineConfig({ } } // ... - }) + }), + svelte() ], output: 'hybrid', adapter: vercel({ diff --git a/site/package.json b/site/package.json index ca3a7c96..4405cbfc 100644 --- a/site/package.json +++ b/site/package.json @@ -13,12 +13,14 @@ "@astrojs/check": "^0.9.3", "@astrojs/mdx": "^3.1.3", "@astrojs/react": "^3.6.2", + "@astrojs/svelte": "^5.7.2", "@astrojs/vue": "^4.5.2", "@headlessui/react": "^2.1.8", "@nanostores/react": "^0.8.0", "@nanostores/vue": "^0.10.0", "@number-flow/react": "workspace:*", "@number-flow/vue": "workspace:*", + "@number-flow/svelte": "workspace:*", "@radix-ui/react-slider": "^1.2.0", "@radix-ui/react-tabs": "^1.1.0", "@types/lodash": "^4.17.9", @@ -31,11 +33,14 @@ "framer-motion": "^11.9.0", "lodash": "^4.17.21", "lucide-react": "^0.446.0", + "lucide-svelte": "^0.453.0", "nanostores": "^0.11.3", "react": "^18", "react-dom": "^18", + "svelte": "^5.1.3", "tailwindcss": "^3.4.13", "tailwindcss-spring": "^1.0.1", + "typescript": "^5.6.3", "vue": "^3.5.12" }, "devDependencies": { diff --git a/site/src/pages/[...framework]/examples/_Activity/index.astro b/site/src/pages/[...framework]/examples/_Activity/index.astro index b191b7d4..07f10f6f 100644 --- a/site/src/pages/[...framework]/examples/_Activity/index.astro +++ b/site/src/pages/[...framework]/examples/_Activity/index.astro @@ -9,6 +9,8 @@ import React from './react' import react from './react/Component.tsx?raw' import Vue from './vue/index.vue' import vue from './vue/Component.vue?raw' +import Svelte from './vue/index.vue' +import svelte from './svelte/Component.svelte?raw' --- @@ -16,10 +18,12 @@ import vue from './vue/Component.vue?raw' - + + + diff --git a/site/src/pages/[...framework]/examples/_Activity/svelte/Component.svelte b/site/src/pages/[...framework]/examples/_Activity/svelte/Component.svelte new file mode 100644 index 00000000..49141785 --- /dev/null +++ b/site/src/pages/[...framework]/examples/_Activity/svelte/Component.svelte @@ -0,0 +1,107 @@ + + + diff --git a/site/src/pages/[...framework]/examples/_Activity/svelte/index.svelte b/site/src/pages/[...framework]/examples/_Activity/svelte/index.svelte new file mode 100644 index 00000000..a59aa582 --- /dev/null +++ b/site/src/pages/[...framework]/examples/_Activity/svelte/index.svelte @@ -0,0 +1,25 @@ + + + diff --git a/site/svelte.config.mjs b/site/svelte.config.mjs new file mode 100644 index 00000000..4ed60f2e --- /dev/null +++ b/site/svelte.config.mjs @@ -0,0 +1,5 @@ +import { vitePreprocess } from '@astrojs/svelte' + +export default { + preprocess: vitePreprocess() +} From e2ffe03286dd79ecb059bb47dacc5bfbe75ac6da Mon Sep 17 00:00:00 2001 From: Maxwell Barvian Date: Sat, 26 Oct 2024 01:38:23 -0700 Subject: [PATCH 09/27] Run a format --- .../react/test/apps/react-18/next.config.mjs | 4 +- .../test/apps/react-18/postcss.config.mjs | 10 +- .../react/test/apps/react-18/tsconfig.json | 48 ++-- .../test/apps/react-19/postcss.config.mjs | 10 +- .../test/apps/react-19/tailwind.config.ts | 34 +-- .../react/test/apps/react-19/tsconfig.json | 50 ++-- packages/svelte/postcss.config.js | 10 +- packages/svelte/src/app.css | 2 +- packages/svelte/src/app.d.ts | 2 +- packages/svelte/src/lib/NumberFlow.svelte | 70 +++--- packages/svelte/src/routes/+layout.svelte | 2 +- packages/svelte/src/routes/+page.svelte | 11 +- packages/svelte/svelte.config.js | 8 +- packages/svelte/tailwind.config.ts | 14 +- packages/vue/test/apps/nuxt3/tsconfig.json | 4 +- site/.vscode/extensions.json | 4 +- site/.vscode/launch.json | 18 +- site/src/components/Tweet/api/get-oembed.ts | 8 +- site/src/components/Tweet/api/get-tweet.ts | 111 ++++----- site/src/components/Tweet/api/index.ts | 6 +- site/src/components/Tweet/api/types/edit.ts | 8 +- .../components/Tweet/api/types/entities.ts | 44 ++-- site/src/components/Tweet/api/types/index.ts | 14 +- site/src/components/Tweet/api/types/media.ts | 104 ++++----- site/src/components/Tweet/api/types/photo.ts | 14 +- site/src/components/Tweet/api/types/tweet.ts | 126 +++++----- site/src/components/Tweet/api/types/user.ts | 16 +- site/src/components/Tweet/api/types/video.ts | 32 +-- .../Tweet/twitter-theme/AvatarImg.astro | 8 +- .../Tweet/twitter-theme/MediaImg.astro | 8 +- .../Tweet/twitter-theme/Skeleton.astro | 2 +- .../Tweet/twitter-theme/TweetContainer.astro | 18 +- .../Tweet/twitter-theme/TweetInReplyTo.astro | 17 +- .../Tweet/twitter-theme/TweetInfo.astro | 42 ++-- .../Tweet/twitter-theme/TweetLink.astro | 13 +- .../Tweet/twitter-theme/TweetNotFound.astro | 14 +- .../Tweet/twitter-theme/TweetReplies.astro | 30 +-- .../Tweet/twitter-theme/TweetSkeleton.astro | 36 +-- .../Tweet/twitter-theme/icons/Verified.astro | 19 +- .../icons/VerifiedBusiness.astro | 87 ++++--- .../icons/VerifiedGovernment.astro | 21 +- .../twitter-theme/icons/icons.module.css | 14 +- .../Tweet/twitter-theme/icons/index.ts | 8 +- .../quoted-tweet/QuotedTweet.astro | 20 +- .../quoted-tweet/QuotedTweetContainer.astro | 12 +- .../quoted-tweet/QuotedTweetHeader.astro | 64 +++-- .../quoted-tweet/quoted-tweet-body.module.css | 14 +- .../quoted-tweet-container.module.css | 22 +- .../quoted-tweet-header.module.css | 42 ++-- .../Tweet/twitter-theme/skeleton.module.css | 32 +-- .../components/Tweet/twitter-theme/theme.css | 220 +++++++++--------- .../twitter-theme/tweet-actions.module.css | 90 +++---- .../Tweet/twitter-theme/tweet-body.module.css | 12 +- .../twitter-theme/tweet-container.module.css | 38 +-- .../twitter-theme/tweet-header.module.css | 106 ++++----- .../tweet-in-reply-to.module.css | 18 +- .../tweet-info-created-at.module.css | 12 +- .../Tweet/twitter-theme/tweet-info.module.css | 52 ++--- .../Tweet/twitter-theme/tweet-link.module.css | 12 +- .../tweet-media-video.module.css | 102 ++++---- .../twitter-theme/tweet-media.module.css | 66 +++--- .../twitter-theme/tweet-not-found.module.css | 12 +- .../twitter-theme/tweet-replies.module.css | 46 ++-- .../twitter-theme/tweet-skeleton.module.css | 4 +- .../components/Tweet/twitter-theme/types.ts | 10 +- .../twitter-theme/verified-badge.module.css | 8 +- site/src/env.d.ts | 2 +- site/tsconfig.json | 31 +-- 68 files changed, 1057 insertions(+), 1111 deletions(-) diff --git a/packages/react/test/apps/react-18/next.config.mjs b/packages/react/test/apps/react-18/next.config.mjs index 4678774e..1d614782 100644 --- a/packages/react/test/apps/react-18/next.config.mjs +++ b/packages/react/test/apps/react-18/next.config.mjs @@ -1,4 +1,4 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {}; +const nextConfig = {} -export default nextConfig; +export default nextConfig diff --git a/packages/react/test/apps/react-18/postcss.config.mjs b/packages/react/test/apps/react-18/postcss.config.mjs index 1a69fd2a..c0f93ff2 100644 --- a/packages/react/test/apps/react-18/postcss.config.mjs +++ b/packages/react/test/apps/react-18/postcss.config.mjs @@ -1,8 +1,8 @@ /** @type {import('postcss-load-config').Config} */ const config = { - plugins: { - tailwindcss: {}, - }, -}; + plugins: { + tailwindcss: {} + } +} -export default config; +export default config diff --git a/packages/react/test/apps/react-18/tsconfig.json b/packages/react/test/apps/react-18/tsconfig.json index e7ff90fd..7a75d434 100644 --- a/packages/react/test/apps/react-18/tsconfig.json +++ b/packages/react/test/apps/react-18/tsconfig.json @@ -1,26 +1,26 @@ { - "compilerOptions": { - "lib": ["dom", "dom.iterable", "esnext"], - "allowJs": true, - "skipLibCheck": true, - "strict": true, - "noEmit": true, - "esModuleInterop": true, - "module": "esnext", - "moduleResolution": "bundler", - "resolveJsonModule": true, - "isolatedModules": true, - "jsx": "preserve", - "incremental": true, - "plugins": [ - { - "name": "next" - } - ], - "paths": { - "@/*": ["./*"] - } - }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"] + "compilerOptions": { + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] } diff --git a/packages/react/test/apps/react-19/postcss.config.mjs b/packages/react/test/apps/react-19/postcss.config.mjs index 1a69fd2a..c0f93ff2 100644 --- a/packages/react/test/apps/react-19/postcss.config.mjs +++ b/packages/react/test/apps/react-19/postcss.config.mjs @@ -1,8 +1,8 @@ /** @type {import('postcss-load-config').Config} */ const config = { - plugins: { - tailwindcss: {}, - }, -}; + plugins: { + tailwindcss: {} + } +} -export default config; +export default config diff --git a/packages/react/test/apps/react-19/tailwind.config.ts b/packages/react/test/apps/react-19/tailwind.config.ts index d43da912..4b852eb5 100644 --- a/packages/react/test/apps/react-19/tailwind.config.ts +++ b/packages/react/test/apps/react-19/tailwind.config.ts @@ -1,19 +1,19 @@ -import type { Config } from "tailwindcss"; +import type { Config } from 'tailwindcss' const config: Config = { - content: [ - "./pages/**/*.{js,ts,jsx,tsx,mdx}", - "./components/**/*.{js,ts,jsx,tsx,mdx}", - "./app/**/*.{js,ts,jsx,tsx,mdx}", - ], - theme: { - extend: { - colors: { - background: "var(--background)", - foreground: "var(--foreground)", - }, - }, - }, - plugins: [], -}; -export default config; + content: [ + './pages/**/*.{js,ts,jsx,tsx,mdx}', + './components/**/*.{js,ts,jsx,tsx,mdx}', + './app/**/*.{js,ts,jsx,tsx,mdx}' + ], + theme: { + extend: { + colors: { + background: 'var(--background)', + foreground: 'var(--foreground)' + } + } + }, + plugins: [] +} +export default config diff --git a/packages/react/test/apps/react-19/tsconfig.json b/packages/react/test/apps/react-19/tsconfig.json index d8b93235..96f8e1b6 100644 --- a/packages/react/test/apps/react-19/tsconfig.json +++ b/packages/react/test/apps/react-19/tsconfig.json @@ -1,27 +1,27 @@ { - "compilerOptions": { - "target": "ES2017", - "lib": ["dom", "dom.iterable", "esnext"], - "allowJs": true, - "skipLibCheck": true, - "strict": true, - "noEmit": true, - "esModuleInterop": true, - "module": "esnext", - "moduleResolution": "bundler", - "resolveJsonModule": true, - "isolatedModules": true, - "jsx": "preserve", - "incremental": true, - "plugins": [ - { - "name": "next" - } - ], - "paths": { - "@/*": ["./*"] - } - }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"] + "compilerOptions": { + "target": "ES2017", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] } diff --git a/packages/svelte/postcss.config.js b/packages/svelte/postcss.config.js index ba807304..35237ebf 100644 --- a/packages/svelte/postcss.config.js +++ b/packages/svelte/postcss.config.js @@ -1,6 +1,6 @@ export default { - plugins: { - tailwindcss: {}, - autoprefixer: {} - } -}; + plugins: { + tailwindcss: {}, + autoprefixer: {} + } +} diff --git a/packages/svelte/src/app.css b/packages/svelte/src/app.css index 6c8f99f2..a31e4441 100644 --- a/packages/svelte/src/app.css +++ b/packages/svelte/src/app.css @@ -1,3 +1,3 @@ @import 'tailwindcss/base'; @import 'tailwindcss/components'; -@import 'tailwindcss/utilities' +@import 'tailwindcss/utilities'; diff --git a/packages/svelte/src/app.d.ts b/packages/svelte/src/app.d.ts index da08e6da..4e661d5d 100644 --- a/packages/svelte/src/app.d.ts +++ b/packages/svelte/src/app.d.ts @@ -10,4 +10,4 @@ declare global { } } -export {}; +export {} diff --git a/packages/svelte/src/lib/NumberFlow.svelte b/packages/svelte/src/lib/NumberFlow.svelte index 5a8ae3d7..6db871c5 100644 --- a/packages/svelte/src/lib/NumberFlow.svelte +++ b/packages/svelte/src/lib/NumberFlow.svelte @@ -1,40 +1,48 @@ - + {@html renderFlow({ formatted: parts.formatted, willChange })} - \ No newline at end of file + diff --git a/packages/svelte/src/routes/+layout.svelte b/packages/svelte/src/routes/+layout.svelte index c3bace01..fdd2329d 100644 --- a/packages/svelte/src/routes/+layout.svelte +++ b/packages/svelte/src/routes/+layout.svelte @@ -1,5 +1,5 @@ diff --git a/packages/svelte/src/routes/+page.svelte b/packages/svelte/src/routes/+page.svelte index 06b5c091..eb9c2add 100644 --- a/packages/svelte/src/routes/+page.svelte +++ b/packages/svelte/src/routes/+page.svelte @@ -1,10 +1,11 @@ +
- Text node - + Text node +
- \ No newline at end of file + diff --git a/packages/svelte/svelte.config.js b/packages/svelte/svelte.config.js index 1295460d..4473feeb 100644 --- a/packages/svelte/svelte.config.js +++ b/packages/svelte/svelte.config.js @@ -1,5 +1,5 @@ -import adapter from '@sveltejs/adapter-auto'; -import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; +import adapter from '@sveltejs/adapter-auto' +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' /** @type {import('@sveltejs/kit').Config} */ const config = { @@ -13,6 +13,6 @@ const config = { // See https://svelte.dev/docs/kit/adapters for more information about adapters. adapter: adapter() } -}; +} -export default config; +export default config diff --git a/packages/svelte/tailwind.config.ts b/packages/svelte/tailwind.config.ts index d50a5e52..57702645 100644 --- a/packages/svelte/tailwind.config.ts +++ b/packages/svelte/tailwind.config.ts @@ -1,11 +1,11 @@ -import type { Config } from 'tailwindcss'; +import type { Config } from 'tailwindcss' export default { - content: ['./src/**/*.{html,js,svelte,ts}'], + content: ['./src/**/*.{html,js,svelte,ts}'], - theme: { - extend: {} - }, + theme: { + extend: {} + }, - plugins: [] -} as Config; + plugins: [] +} as Config diff --git a/packages/vue/test/apps/nuxt3/tsconfig.json b/packages/vue/test/apps/nuxt3/tsconfig.json index a746f2a7..947f6b69 100644 --- a/packages/vue/test/apps/nuxt3/tsconfig.json +++ b/packages/vue/test/apps/nuxt3/tsconfig.json @@ -1,4 +1,4 @@ { - // https://nuxt.com/docs/guide/concepts/typescript - "extends": "./.nuxt/tsconfig.json" + // https://nuxt.com/docs/guide/concepts/typescript + "extends": "./.nuxt/tsconfig.json" } diff --git a/site/.vscode/extensions.json b/site/.vscode/extensions.json index 22a15055..3a1c9ecd 100644 --- a/site/.vscode/extensions.json +++ b/site/.vscode/extensions.json @@ -1,4 +1,4 @@ { - "recommendations": ["astro-build.astro-vscode"], - "unwantedRecommendations": [] + "recommendations": ["astro-build.astro-vscode"], + "unwantedRecommendations": [] } diff --git a/site/.vscode/launch.json b/site/.vscode/launch.json index d6422097..230708db 100644 --- a/site/.vscode/launch.json +++ b/site/.vscode/launch.json @@ -1,11 +1,11 @@ { - "version": "0.2.0", - "configurations": [ - { - "command": "./node_modules/.bin/astro dev", - "name": "Development server", - "request": "launch", - "type": "node-terminal" - } - ] + "version": "0.2.0", + "configurations": [ + { + "command": "./node_modules/.bin/astro dev", + "name": "Development server", + "request": "launch", + "type": "node-terminal" + } + ] } diff --git a/site/src/components/Tweet/api/get-oembed.ts b/site/src/components/Tweet/api/get-oembed.ts index 66c8a24e..14eff812 100644 --- a/site/src/components/Tweet/api/get-oembed.ts +++ b/site/src/components/Tweet/api/get-oembed.ts @@ -1,8 +1,8 @@ export async function getOEmbed(url: string): Promise { - const res = await fetch(`https://publish.twitter.com/oembed?url=${url}`); + const res = await fetch(`https://publish.twitter.com/oembed?url=${url}`) - if (res.ok) return res.json(); - if (res.status === 404) return; + if (res.ok) return res.json() + if (res.status === 404) return - throw new Error(`Fetch for embedded tweet failed with code: ${res.status}`); + throw new Error(`Fetch for embedded tweet failed with code: ${res.status}`) } diff --git a/site/src/components/Tweet/api/get-tweet.ts b/site/src/components/Tweet/api/get-tweet.ts index 192b7b4d..e4f8b949 100644 --- a/site/src/components/Tweet/api/get-tweet.ts +++ b/site/src/components/Tweet/api/get-tweet.ts @@ -1,81 +1,68 @@ -import type { Tweet } from "./types/index.js"; +import type { Tweet } from './types/index.js' -const SYNDICATION_URL = "https://cdn.syndication.twimg.com"; +const SYNDICATION_URL = 'https://cdn.syndication.twimg.com' export class TwitterApiError extends Error { - status: number; - data: any; + status: number + data: any - constructor({ - message, - status, - data, - }: { - message: string; - status: number; - data: any; - }) { - super(message); - this.name = "TwitterApiError"; - this.status = status; - this.data = data; - } + constructor({ message, status, data }: { message: string; status: number; data: any }) { + super(message) + this.name = 'TwitterApiError' + this.status = status + this.data = data + } } -const TWEET_ID = /^[0-9]+$/; +const TWEET_ID = /^[0-9]+$/ function getToken(id: string) { - return ((Number(id) / 1e15) * Math.PI) - .toString(6 ** 2) - .replace(/(0+|\.)/g, ""); + return ((Number(id) / 1e15) * Math.PI).toString(6 ** 2).replace(/(0+|\.)/g, '') } /** * Fetches a tweet from the Twitter syndication API. */ -export async function getTweet( - id: string, - fetchOptions?: RequestInit, -): Promise { - if (id.length > 40 || !TWEET_ID.test(id)) { - throw new Error(`Invalid tweet id: ${id}`); - } +export async function getTweet(id: string, fetchOptions?: RequestInit): Promise { + if (id.length > 40 || !TWEET_ID.test(id)) { + throw new Error(`Invalid tweet id: ${id}`) + } - const url = new URL(`${SYNDICATION_URL}/tweet-result`); + const url = new URL(`${SYNDICATION_URL}/tweet-result`) - url.searchParams.set("id", id); - url.searchParams.set("lang", "en"); - url.searchParams.set( - "features", - [ - "tfw_timeline_list:", - "tfw_follower_count_sunset:true", - "tfw_tweet_edit_backend:on", - "tfw_refsrc_session:on", - "tfw_fosnr_soft_interventions_enabled:on", - "tfw_show_birdwatch_pivots_enabled:on", - "tfw_show_business_verified_badge:on", - "tfw_duplicate_scribes_to_settings:on", - "tfw_use_profile_image_shape_enabled:on", - "tfw_show_blue_verified_badge:on", - "tfw_legacy_timeline_sunset:true", - "tfw_show_gov_verified_badge:on", - "tfw_show_business_affiliate_badge:on", - "tfw_tweet_edit_frontend:on", - ].join(";"), - ); - url.searchParams.set("token", getToken(id)); + url.searchParams.set('id', id) + url.searchParams.set('lang', 'en') + url.searchParams.set( + 'features', + [ + 'tfw_timeline_list:', + 'tfw_follower_count_sunset:true', + 'tfw_tweet_edit_backend:on', + 'tfw_refsrc_session:on', + 'tfw_fosnr_soft_interventions_enabled:on', + 'tfw_show_birdwatch_pivots_enabled:on', + 'tfw_show_business_verified_badge:on', + 'tfw_duplicate_scribes_to_settings:on', + 'tfw_use_profile_image_shape_enabled:on', + 'tfw_show_blue_verified_badge:on', + 'tfw_legacy_timeline_sunset:true', + 'tfw_show_gov_verified_badge:on', + 'tfw_show_business_affiliate_badge:on', + 'tfw_tweet_edit_frontend:on' + ].join(';') + ) + url.searchParams.set('token', getToken(id)) - const res = await fetch(url.toString(), fetchOptions); - const isJson = res.headers.get("content-type")?.includes("application/json"); - const data = isJson ? await res.json() : undefined; + const res = await fetch(url.toString(), fetchOptions) + const isJson = res.headers.get('content-type')?.includes('application/json') + const data = isJson ? await res.json() : undefined - if (res.ok) return data; - if (res.status === 404) return; + if (res.ok) return data + if (res.status === 404) return - throw new TwitterApiError({ - message: typeof data.error === "string" ? data.error : "Bad request.", - status: res.status, - data, - }); + throw new TwitterApiError({ + message: typeof data.error === 'string' ? data.error : 'Bad request.', + status: res.status, + data + }) } diff --git a/site/src/components/Tweet/api/index.ts b/site/src/components/Tweet/api/index.ts index 24b62e52..027ac005 100644 --- a/site/src/components/Tweet/api/index.ts +++ b/site/src/components/Tweet/api/index.ts @@ -1,3 +1,3 @@ -export * from "./types/index.js"; -export * from "./get-tweet.js"; -export * from "./get-oembed.js"; +export * from './types/index.js' +export * from './get-tweet.js' +export * from './get-oembed.js' diff --git a/site/src/components/Tweet/api/types/edit.ts b/site/src/components/Tweet/api/types/edit.ts index b12c0203..a9f36498 100644 --- a/site/src/components/Tweet/api/types/edit.ts +++ b/site/src/components/Tweet/api/types/edit.ts @@ -1,6 +1,6 @@ export interface TweetEditControl { - edit_tweet_ids: string[]; - editable_until_msecs: string; - is_edit_eligible: boolean; - edits_remaining: string; + edit_tweet_ids: string[] + editable_until_msecs: string + is_edit_eligible: boolean + edits_remaining: string } diff --git a/site/src/components/Tweet/api/types/entities.ts b/site/src/components/Tweet/api/types/entities.ts index 150d62ae..b6a7936f 100644 --- a/site/src/components/Tweet/api/types/entities.ts +++ b/site/src/components/Tweet/api/types/entities.ts @@ -1,40 +1,40 @@ -export type Indices = [number, number]; +export type Indices = [number, number] export interface HashtagEntity { - indices: Indices; - text: string; + indices: Indices + text: string } export interface UserMentionEntity { - id_str: string; - indices: Indices; - name: string; - screen_name: string; + id_str: string + indices: Indices + name: string + screen_name: string } export interface MediaEntity { - display_url: string; - expanded_url: string; - indices: Indices; - url: string; + display_url: string + expanded_url: string + indices: Indices + url: string } export interface UrlEntity { - display_url: string; - expanded_url: string; - indices: Indices; - url: string; + display_url: string + expanded_url: string + indices: Indices + url: string } export interface SymbolEntity { - indices: Indices; - text: string; + indices: Indices + text: string } export interface TweetEntities { - hashtags: HashtagEntity[]; - urls: UrlEntity[]; - user_mentions: UserMentionEntity[]; - symbols: SymbolEntity[]; - media?: MediaEntity[]; + hashtags: HashtagEntity[] + urls: UrlEntity[] + user_mentions: UserMentionEntity[] + symbols: SymbolEntity[] + media?: MediaEntity[] } diff --git a/site/src/components/Tweet/api/types/index.ts b/site/src/components/Tweet/api/types/index.ts index fcf36d06..39fefcae 100644 --- a/site/src/components/Tweet/api/types/index.ts +++ b/site/src/components/Tweet/api/types/index.ts @@ -1,7 +1,7 @@ -export * from "./edit.js"; -export * from "./entities.js"; -export * from "./media.js"; -export * from "./photo.js"; -export * from "./tweet.js"; -export * from "./user.js"; -export * from "./video.js"; +export * from './edit.js' +export * from './entities.js' +export * from './media.js' +export * from './photo.js' +export * from './tweet.js' +export * from './user.js' +export * from './video.js' diff --git a/site/src/components/Tweet/api/types/media.ts b/site/src/components/Tweet/api/types/media.ts index 9cbd1963..50a951ef 100644 --- a/site/src/components/Tweet/api/types/media.ts +++ b/site/src/components/Tweet/api/types/media.ts @@ -1,74 +1,74 @@ -import type { Indices } from "./entities.js"; +import type { Indices } from './entities.js' export type RGB = { - red: number; - green: number; - blue: number; -}; + red: number + green: number + blue: number +} export type Rect = { - x: number; - y: number; - w: number; - h: number; -}; + x: number + y: number + w: number + h: number +} export type Size = { - h: number; - w: number; - resize: string; -}; + h: number + w: number + resize: string +} export interface VideoInfo { - aspect_ratio: [number, number]; - variants: { - bitrate?: number; - content_type: "video/mp4" | "application/x-mpegURL"; - url: string; - }[]; + aspect_ratio: [number, number] + variants: { + bitrate?: number + content_type: 'video/mp4' | 'application/x-mpegURL' + url: string + }[] } interface MediaBase { - display_url: string; - expanded_url: string; - ext_media_availability: { - status: string; - }; - ext_media_color: { - palette: { - percentage: number; - rgb: RGB; - }[]; - }; - indices: Indices; - media_url_https: string; - original_info: { - height: number; - width: number; - focus_rects: Rect[]; - }; - sizes: { - large: Size; - medium: Size; - small: Size; - thumb: Size; - }; - url: string; + display_url: string + expanded_url: string + ext_media_availability: { + status: string + } + ext_media_color: { + palette: { + percentage: number + rgb: RGB + }[] + } + indices: Indices + media_url_https: string + original_info: { + height: number + width: number + focus_rects: Rect[] + } + sizes: { + large: Size + medium: Size + small: Size + thumb: Size + } + url: string } export interface MediaPhoto extends MediaBase { - type: "photo"; - ext_alt_text?: string; + type: 'photo' + ext_alt_text?: string } export interface MediaAnimatedGif extends MediaBase { - type: "animated_gif"; - video_info: VideoInfo; + type: 'animated_gif' + video_info: VideoInfo } export interface MediaVideo extends MediaBase { - type: "video"; - video_info: VideoInfo; + type: 'video' + video_info: VideoInfo } -export type MediaDetails = MediaPhoto | MediaAnimatedGif | MediaVideo; +export type MediaDetails = MediaPhoto | MediaAnimatedGif | MediaVideo diff --git a/site/src/components/Tweet/api/types/photo.ts b/site/src/components/Tweet/api/types/photo.ts index 583f02b2..fe06ebf1 100644 --- a/site/src/components/Tweet/api/types/photo.ts +++ b/site/src/components/Tweet/api/types/photo.ts @@ -1,10 +1,10 @@ -import type { Rect, RGB } from "./media.js"; +import type { Rect, RGB } from './media.js' export interface TweetPhoto { - backgroundColor: RGB; - cropCandidates: Rect[]; - expandedUrl: string; - url: string; - width: number; - height: number; + backgroundColor: RGB + cropCandidates: Rect[] + expandedUrl: string + url: string + width: number + height: number } diff --git a/site/src/components/Tweet/api/types/tweet.ts b/site/src/components/Tweet/api/types/tweet.ts index 95942713..171d6252 100644 --- a/site/src/components/Tweet/api/types/tweet.ts +++ b/site/src/components/Tweet/api/types/tweet.ts @@ -1,87 +1,87 @@ -import type { TweetEditControl } from "./edit.js"; -import type { Indices, TweetEntities } from "./entities.js"; -import type { MediaDetails } from "./media.js"; -import type { TweetPhoto } from "./photo.js"; -import type { TweetUser } from "./user.js"; -import type { TweetVideo } from "./video.js"; +import type { TweetEditControl } from './edit.js' +import type { Indices, TweetEntities } from './entities.js' +import type { MediaDetails } from './media.js' +import type { TweetPhoto } from './photo.js' +import type { TweetUser } from './user.js' +import type { TweetVideo } from './video.js' /** * Base tweet information shared by a tweet, a parent tweet and a quoted tweet. */ export interface TweetBase { - /** - * Language code of the tweet. E.g "en", "es". - */ - lang: string; - /** - * Creation date of the tweet in the format ISO 8601. - */ - created_at: string; - /** - * Text range of the tweet text. - */ - display_text_range: Indices; - /** - * All the entities that are part of the tweet. Like hashtags, mentions, urls, etc. - */ - entities: TweetEntities; - /** - * The unique identifier of the tweet. - */ - id_str: string; - /** - * The tweet text, including the raw text from the entities. - */ - text: string; - /** - * Information about the user who posted the tweet. - */ - user: TweetUser; - /** - * Edit information about the tweet. - */ - edit_control: TweetEditControl; - isEdited: boolean; - isStaleEdit: boolean; + /** + * Language code of the tweet. E.g "en", "es". + */ + lang: string + /** + * Creation date of the tweet in the format ISO 8601. + */ + created_at: string + /** + * Text range of the tweet text. + */ + display_text_range: Indices + /** + * All the entities that are part of the tweet. Like hashtags, mentions, urls, etc. + */ + entities: TweetEntities + /** + * The unique identifier of the tweet. + */ + id_str: string + /** + * The tweet text, including the raw text from the entities. + */ + text: string + /** + * Information about the user who posted the tweet. + */ + user: TweetUser + /** + * Edit information about the tweet. + */ + edit_control: TweetEditControl + isEdited: boolean + isStaleEdit: boolean } /** * A tweet as returned by the the Twitter syndication API. */ export interface Tweet extends TweetBase { - __typename: "Tweet"; - favorite_count: number; - mediaDetails?: MediaDetails[]; - photos?: TweetPhoto[]; - video?: TweetVideo; - conversation_count: number; - news_action_type: "conversation"; - quoted_tweet?: QuotedTweet; - in_reply_to_screen_name?: string; - in_reply_to_status_id_str?: string; - in_reply_to_user_id_str?: string; - parent?: TweetParent; - possibly_sensitive?: boolean; + __typename: 'Tweet' + favorite_count: number + mediaDetails?: MediaDetails[] + photos?: TweetPhoto[] + video?: TweetVideo + conversation_count: number + news_action_type: 'conversation' + quoted_tweet?: QuotedTweet + in_reply_to_screen_name?: string + in_reply_to_status_id_str?: string + in_reply_to_user_id_str?: string + parent?: TweetParent + possibly_sensitive?: boolean } /** * The parent tweet of a tweet reply. */ export interface TweetParent extends TweetBase { - reply_count: number; - retweet_count: number; - favorite_count: number; + reply_count: number + retweet_count: number + favorite_count: number } /** * A tweet quoted by another tweet. */ export interface QuotedTweet extends TweetBase { - reply_count: number; - retweet_count: number; - favorite_count: number; - mediaDetails?: MediaDetails[]; - self_thread: { - id_str: string; - }; + reply_count: number + retweet_count: number + favorite_count: number + mediaDetails?: MediaDetails[] + self_thread: { + id_str: string + } } diff --git a/site/src/components/Tweet/api/types/user.ts b/site/src/components/Tweet/api/types/user.ts index 8595143a..3608491d 100644 --- a/site/src/components/Tweet/api/types/user.ts +++ b/site/src/components/Tweet/api/types/user.ts @@ -1,10 +1,10 @@ export interface TweetUser { - id_str: string; - name: string; - profile_image_url_https: string; - profile_image_shape: "Circle" | "Square"; - screen_name: string; - verified: boolean; - verified_type?: "Business" | "Government"; - is_blue_verified: boolean; + id_str: string + name: string + profile_image_url_https: string + profile_image_shape: 'Circle' | 'Square' + screen_name: string + verified: boolean + verified_type?: 'Business' | 'Government' + is_blue_verified: boolean } diff --git a/site/src/components/Tweet/api/types/video.ts b/site/src/components/Tweet/api/types/video.ts index 68d20ad8..46b2651c 100644 --- a/site/src/components/Tweet/api/types/video.ts +++ b/site/src/components/Tweet/api/types/video.ts @@ -1,18 +1,18 @@ export interface TweetVideo { - aspectRatio: [number, number]; - contentType: string; - durationMs: number; - mediaAvailability: { - status: string; - }; - poster: string; - variants: { - type: string; - src: string; - }[]; - videoId: { - type: string; - id: string; - }; - viewCount: number; + aspectRatio: [number, number] + contentType: string + durationMs: number + mediaAvailability: { + status: string + } + poster: string + variants: { + type: string + src: string + }[] + videoId: { + type: string + id: string + } + viewCount: number } diff --git a/site/src/components/Tweet/twitter-theme/AvatarImg.astro b/site/src/components/Tweet/twitter-theme/AvatarImg.astro index d4fc997c..2a5e7ad0 100644 --- a/site/src/components/Tweet/twitter-theme/AvatarImg.astro +++ b/site/src/components/Tweet/twitter-theme/AvatarImg.astro @@ -1,9 +1,9 @@ --- interface Props { - src: string; - alt: string; - width: number; - height: number; + src: string + alt: string + width: number + height: number } --- diff --git a/site/src/components/Tweet/twitter-theme/MediaImg.astro b/site/src/components/Tweet/twitter-theme/MediaImg.astro index c8aa9a8a..8e9ee764 100644 --- a/site/src/components/Tweet/twitter-theme/MediaImg.astro +++ b/site/src/components/Tweet/twitter-theme/MediaImg.astro @@ -1,9 +1,9 @@ --- interface Props { - src: string; - alt: string; - class?: string; - draggable?: boolean; + src: string + alt: string + class?: string + draggable?: boolean } --- diff --git a/site/src/components/Tweet/twitter-theme/Skeleton.astro b/site/src/components/Tweet/twitter-theme/Skeleton.astro index 4cee6fcc..5579426f 100644 --- a/site/src/components/Tweet/twitter-theme/Skeleton.astro +++ b/site/src/components/Tweet/twitter-theme/Skeleton.astro @@ -1,5 +1,5 @@ --- -import styles from "./skeleton.module.css"; +import styles from './skeleton.module.css' --- diff --git a/site/src/components/Tweet/twitter-theme/TweetContainer.astro b/site/src/components/Tweet/twitter-theme/TweetContainer.astro index 07dba9a7..f6f4dbbd 100644 --- a/site/src/components/Tweet/twitter-theme/TweetContainer.astro +++ b/site/src/components/Tweet/twitter-theme/TweetContainer.astro @@ -1,17 +1,17 @@ --- -import clsx from "clsx"; -import styles from "./tweet-container.module.css"; -import "./theme.css"; +import clsx from 'clsx' +import styles from './tweet-container.module.css' +import './theme.css' interface Props { - className?: string; + className?: string } -const { className } = Astro.props; +const { className } = Astro.props --- -
-
- -
+
+
+ +
diff --git a/site/src/components/Tweet/twitter-theme/TweetInReplyTo.astro b/site/src/components/Tweet/twitter-theme/TweetInReplyTo.astro index e61fd035..b6d399ae 100644 --- a/site/src/components/Tweet/twitter-theme/TweetInReplyTo.astro +++ b/site/src/components/Tweet/twitter-theme/TweetInReplyTo.astro @@ -1,17 +1,12 @@ --- -import type { EnrichedTweet } from "../utils.js"; -import s from "./tweet-in-reply-to.module.css"; +import type { EnrichedTweet } from '../utils.js' +import s from './tweet-in-reply-to.module.css' interface Props { - tweet: EnrichedTweet; + tweet: EnrichedTweet } -const { tweet } = Astro.props; +const { tweet } = Astro.props --- - - Replying to @{tweet.in_reply_to_screen_name} + + Replying to @{tweet.in_reply_to_screen_name} diff --git a/site/src/components/Tweet/twitter-theme/TweetInfo.astro b/site/src/components/Tweet/twitter-theme/TweetInfo.astro index 6b895437..fb22e4d3 100644 --- a/site/src/components/Tweet/twitter-theme/TweetInfo.astro +++ b/site/src/components/Tweet/twitter-theme/TweetInfo.astro @@ -1,29 +1,29 @@ --- -import type { EnrichedTweet } from "../utils.js"; -import TweetInfoCreatedAt from "./TweetInfoCreatedAt.astro"; -import styles from "./tweet-info.module.css"; +import type { EnrichedTweet } from '../utils.js' +import TweetInfoCreatedAt from './TweetInfoCreatedAt.astro' +import styles from './tweet-info.module.css' interface Props { - tweet: EnrichedTweet; + tweet: EnrichedTweet } -const { tweet } = Astro.props; +const { tweet } = Astro.props ---
- - - - + + + +
diff --git a/site/src/components/Tweet/twitter-theme/TweetLink.astro b/site/src/components/Tweet/twitter-theme/TweetLink.astro index 124bd3d3..a597be06 100644 --- a/site/src/components/Tweet/twitter-theme/TweetLink.astro +++ b/site/src/components/Tweet/twitter-theme/TweetLink.astro @@ -1,15 +1,10 @@ --- -import s from "./tweet-link.module.css"; +import s from './tweet-link.module.css' interface Props { - href: string; + href: string } --- - - + + diff --git a/site/src/components/Tweet/twitter-theme/TweetNotFound.astro b/site/src/components/Tweet/twitter-theme/TweetNotFound.astro index fd03d689..b8c46bca 100644 --- a/site/src/components/Tweet/twitter-theme/TweetNotFound.astro +++ b/site/src/components/Tweet/twitter-theme/TweetNotFound.astro @@ -1,15 +1,15 @@ --- -import TweetContainer from "./TweetContainer.astro"; -import styles from "./tweet-not-found.module.css"; +import TweetContainer from './TweetContainer.astro' +import styles from './tweet-not-found.module.css' interface Props { - error?: any; + error?: any } --- -
-

Tweet not found

-

The embedded tweet could not be found…

-
+
+

Tweet not found

+

The embedded tweet could not be found…

+
diff --git a/site/src/components/Tweet/twitter-theme/TweetReplies.astro b/site/src/components/Tweet/twitter-theme/TweetReplies.astro index bb8450d4..837b2ba3 100644 --- a/site/src/components/Tweet/twitter-theme/TweetReplies.astro +++ b/site/src/components/Tweet/twitter-theme/TweetReplies.astro @@ -1,23 +1,23 @@ --- -import { type EnrichedTweet, formatNumber } from "../utils.js"; -import s from "./tweet-replies.module.css"; +import { type EnrichedTweet, formatNumber } from '../utils.js' +import s from './tweet-replies.module.css' interface Props { - tweet: EnrichedTweet; + tweet: EnrichedTweet } -const { tweet } = Astro.props; +const { tweet } = Astro.props ---
- - - { - tweet.conversation_count === 0 - ? "Read more on Twitter" - : tweet.conversation_count === 1 - ? `Read ${formatNumber(tweet.conversation_count)} reply` - : `Read ${formatNumber(tweet.conversation_count)} replies` - } - - + + + { + tweet.conversation_count === 0 + ? 'Read more on Twitter' + : tweet.conversation_count === 1 + ? `Read ${formatNumber(tweet.conversation_count)} reply` + : `Read ${formatNumber(tweet.conversation_count)} replies` + } + +
diff --git a/site/src/components/Tweet/twitter-theme/TweetSkeleton.astro b/site/src/components/Tweet/twitter-theme/TweetSkeleton.astro index 711e2af7..0c0f84e3 100644 --- a/site/src/components/Tweet/twitter-theme/TweetSkeleton.astro +++ b/site/src/components/Tweet/twitter-theme/TweetSkeleton.astro @@ -1,23 +1,23 @@ --- -import TweetContainer from "./TweetContainer.astro"; -import Skeleton from "./Skeleton.astro"; -import styles from "./tweet-skeleton.module.css"; +import TweetContainer from './TweetContainer.astro' +import Skeleton from './Skeleton.astro' +import styles from './tweet-skeleton.module.css' --- - - -
- - + + +
+ + diff --git a/site/src/components/Tweet/twitter-theme/icons/Verified.astro b/site/src/components/Tweet/twitter-theme/icons/Verified.astro index 46d296f2..db3f73ed 100644 --- a/site/src/components/Tweet/twitter-theme/icons/Verified.astro +++ b/site/src/components/Tweet/twitter-theme/icons/Verified.astro @@ -1,16 +1,11 @@ --- -import styles from "./icons.module.css"; +import styles from './icons.module.css' --- - - - - + + + + diff --git a/site/src/components/Tweet/twitter-theme/icons/VerifiedBusiness.astro b/site/src/components/Tweet/twitter-theme/icons/VerifiedBusiness.astro index 065c963c..fc5cf55b 100644 --- a/site/src/components/Tweet/twitter-theme/icons/VerifiedBusiness.astro +++ b/site/src/components/Tweet/twitter-theme/icons/VerifiedBusiness.astro @@ -1,50 +1,45 @@ --- -import styles from "./icons.module.css"; +import styles from './icons.module.css' --- - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + diff --git a/site/src/components/Tweet/twitter-theme/icons/VerifiedGovernment.astro b/site/src/components/Tweet/twitter-theme/icons/VerifiedGovernment.astro index a0534304..0d146434 100644 --- a/site/src/components/Tweet/twitter-theme/icons/VerifiedGovernment.astro +++ b/site/src/components/Tweet/twitter-theme/icons/VerifiedGovernment.astro @@ -1,17 +1,12 @@ --- -import styles from "./icons.module.css"; +import styles from './icons.module.css' --- - - - - + + + + diff --git a/site/src/components/Tweet/twitter-theme/icons/icons.module.css b/site/src/components/Tweet/twitter-theme/icons/icons.module.css index aca493e6..ff9c07f8 100644 --- a/site/src/components/Tweet/twitter-theme/icons/icons.module.css +++ b/site/src/components/Tweet/twitter-theme/icons/icons.module.css @@ -1,9 +1,9 @@ .verified { - margin-left: 0.125rem; - max-width: 20px; - max-height: 20px; - height: 1.25em; - fill: currentColor; - user-select: none; - vertical-align: text-bottom; + margin-left: 0.125rem; + max-width: 20px; + max-height: 20px; + height: 1.25em; + fill: currentColor; + user-select: none; + vertical-align: text-bottom; } diff --git a/site/src/components/Tweet/twitter-theme/icons/index.ts b/site/src/components/Tweet/twitter-theme/icons/index.ts index ecd39189..08473bbf 100644 --- a/site/src/components/Tweet/twitter-theme/icons/index.ts +++ b/site/src/components/Tweet/twitter-theme/icons/index.ts @@ -1,5 +1,5 @@ -import Verified from "./Verified.astro"; -import VerifiedBusiness from "./VerifiedBusiness.astro"; -import VerifiedGovernment from "./VerifiedGovernment.astro"; +import Verified from './Verified.astro' +import VerifiedBusiness from './VerifiedBusiness.astro' +import VerifiedGovernment from './VerifiedGovernment.astro' -export { Verified, VerifiedBusiness, VerifiedGovernment }; +export { Verified, VerifiedBusiness, VerifiedGovernment } diff --git a/site/src/components/Tweet/twitter-theme/quoted-tweet/QuotedTweet.astro b/site/src/components/Tweet/twitter-theme/quoted-tweet/QuotedTweet.astro index 4ed0e609..c58499c5 100644 --- a/site/src/components/Tweet/twitter-theme/quoted-tweet/QuotedTweet.astro +++ b/site/src/components/Tweet/twitter-theme/quoted-tweet/QuotedTweet.astro @@ -1,18 +1,18 @@ --- -import type { EnrichedQuotedTweet } from "../../utils"; -import QuotedTweetContainer from "./QuotedTweetContainer.astro"; -import QuotedTweetHeader from "./QuotedTweetHeader.astro"; -import QuotedTweetBody from "./QuotedTweetBody.astro"; -import TweetMedia from "../TweetMedia.astro"; +import type { EnrichedQuotedTweet } from '../../utils' +import QuotedTweetContainer from './QuotedTweetContainer.astro' +import QuotedTweetHeader from './QuotedTweetHeader.astro' +import QuotedTweetBody from './QuotedTweetBody.astro' +import TweetMedia from '../TweetMedia.astro' interface Props { - tweet: EnrichedQuotedTweet; + tweet: EnrichedQuotedTweet } -const { tweet } = Astro.props; +const { tweet } = Astro.props --- - - - {tweet.mediaDetails?.length ? : null} + + + {tweet.mediaDetails?.length ? : null} diff --git a/site/src/components/Tweet/twitter-theme/quoted-tweet/QuotedTweetContainer.astro b/site/src/components/Tweet/twitter-theme/quoted-tweet/QuotedTweetContainer.astro index 1a09ce69..6b3e66b4 100644 --- a/site/src/components/Tweet/twitter-theme/quoted-tweet/QuotedTweetContainer.astro +++ b/site/src/components/Tweet/twitter-theme/quoted-tweet/QuotedTweetContainer.astro @@ -1,12 +1,12 @@ --- -import type { EnrichedQuotedTweet } from "../../utils.js"; -import styles from "./quoted-tweet-container.module.css"; +import type { EnrichedQuotedTweet } from '../../utils.js' +import styles from './quoted-tweet-container.module.css' -type Props = { tweet: EnrichedQuotedTweet }; +type Props = { tweet: EnrichedQuotedTweet } ---
-
- -
+
+ +
diff --git a/site/src/components/Tweet/twitter-theme/quoted-tweet/QuotedTweetHeader.astro b/site/src/components/Tweet/twitter-theme/quoted-tweet/QuotedTweetHeader.astro index 431d0789..a55a15f2 100644 --- a/site/src/components/Tweet/twitter-theme/quoted-tweet/QuotedTweetHeader.astro +++ b/site/src/components/Tweet/twitter-theme/quoted-tweet/QuotedTweetHeader.astro @@ -1,45 +1,35 @@ --- -import clsx from "clsx"; -import AvatarImg from "../AvatarImg.astro"; -import styles from "./quoted-tweet-header.module.css"; -import type { EnrichedQuotedTweet } from "../../utils.js"; -import VerifiedBadge from "../VerifiedBadge.astro"; +import clsx from 'clsx' +import AvatarImg from '../AvatarImg.astro' +import styles from './quoted-tweet-header.module.css' +import type { EnrichedQuotedTweet } from '../../utils.js' +import VerifiedBadge from '../VerifiedBadge.astro' interface Props { - tweet: EnrichedQuotedTweet; + tweet: EnrichedQuotedTweet } -const { user } = Astro.props.tweet; -const { tweet } = Astro.props; +const { user } = Astro.props.tweet +const { tweet } = Astro.props ---
- -
- -
- -
-
- {user.name} -
- -
- @{user.screen_name} -
-
+ +
+ +
+ +
+
+ {user.name} +
+ +
+ @{user.screen_name} +
+
diff --git a/site/src/components/Tweet/twitter-theme/quoted-tweet/quoted-tweet-body.module.css b/site/src/components/Tweet/twitter-theme/quoted-tweet/quoted-tweet-body.module.css index d3f4fb50..e31a45c3 100644 --- a/site/src/components/Tweet/twitter-theme/quoted-tweet/quoted-tweet-body.module.css +++ b/site/src/components/Tweet/twitter-theme/quoted-tweet/quoted-tweet-body.module.css @@ -1,9 +1,9 @@ .root { - font-size: var(--tweet-quoted-body-font-size); - font-weight: var(--tweet-quoted-body-font-weight); - line-height: var(--tweet-quoted-body-line-height); - margin: var(--tweet-quoted-body-margin); - overflow-wrap: break-word; - white-space: pre-wrap; - padding: 0 0.75rem; + font-size: var(--tweet-quoted-body-font-size); + font-weight: var(--tweet-quoted-body-font-weight); + line-height: var(--tweet-quoted-body-line-height); + margin: var(--tweet-quoted-body-margin); + overflow-wrap: break-word; + white-space: pre-wrap; + padding: 0 0.75rem; } diff --git a/site/src/components/Tweet/twitter-theme/quoted-tweet/quoted-tweet-container.module.css b/site/src/components/Tweet/twitter-theme/quoted-tweet/quoted-tweet-container.module.css index 0e4951f8..5fa933db 100644 --- a/site/src/components/Tweet/twitter-theme/quoted-tweet/quoted-tweet-container.module.css +++ b/site/src/components/Tweet/twitter-theme/quoted-tweet/quoted-tweet-container.module.css @@ -1,19 +1,19 @@ .root { - width: 100%; - overflow: hidden; - border: var(--tweet-border); - border-radius: 12px; - margin: var(--tweet-quoted-container-margin); - transition-property: background-color, box-shadow; - transition-duration: 0.2s; - /* cursor: pointer; */ + width: 100%; + overflow: hidden; + border: var(--tweet-border); + border-radius: 12px; + margin: var(--tweet-quoted-container-margin); + transition-property: background-color, box-shadow; + transition-duration: 0.2s; + /* cursor: pointer; */ } .root:hover { - background-color: var(--tweet-quoted-bg-color-hover); + background-color: var(--tweet-quoted-bg-color-hover); } .article { - position: relative; - box-sizing: inherit; + position: relative; + box-sizing: inherit; } diff --git a/site/src/components/Tweet/twitter-theme/quoted-tweet/quoted-tweet-header.module.css b/site/src/components/Tweet/twitter-theme/quoted-tweet/quoted-tweet-header.module.css index 4e4d7950..7b939bd2 100644 --- a/site/src/components/Tweet/twitter-theme/quoted-tweet/quoted-tweet-header.module.css +++ b/site/src/components/Tweet/twitter-theme/quoted-tweet/quoted-tweet-header.module.css @@ -1,38 +1,38 @@ .header { - display: flex; - padding: 0.75rem 0.75rem 0 0.75rem; - line-height: var(--tweet-header-line-height); - font-size: var(--tweet-header-font-size); - white-space: nowrap; - overflow-wrap: break-word; - overflow: hidden; + display: flex; + padding: 0.75rem 0.75rem 0 0.75rem; + line-height: var(--tweet-header-line-height); + font-size: var(--tweet-header-font-size); + white-space: nowrap; + overflow-wrap: break-word; + overflow: hidden; } .avatar { - position: relative; - height: 20px; - width: 20px; + position: relative; + height: 20px; + width: 20px; } .avatarSquare { - border-radius: 4px; + border-radius: 4px; } .author { - display: flex; - margin: 0 0.5rem; + display: flex; + margin: 0 0.5rem; } .authorText { - font-weight: 700; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; + font-weight: 700; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; } .username { - color: var(--tweet-font-color-secondary); - text-decoration: none; - text-overflow: ellipsis; - margin-left: 0.125rem; + color: var(--tweet-font-color-secondary); + text-decoration: none; + text-overflow: ellipsis; + margin-left: 0.125rem; } diff --git a/site/src/components/Tweet/twitter-theme/skeleton.module.css b/site/src/components/Tweet/twitter-theme/skeleton.module.css index bb8b2137..d2b65e61 100644 --- a/site/src/components/Tweet/twitter-theme/skeleton.module.css +++ b/site/src/components/Tweet/twitter-theme/skeleton.module.css @@ -1,24 +1,24 @@ .skeleton { - display: block; - width: 100%; - border-radius: 5px; - background-image: var(--tweet-skeleton-gradient); - background-size: 400% 100%; - animation: loading 8s ease-in-out infinite; + display: block; + width: 100%; + border-radius: 5px; + background-image: var(--tweet-skeleton-gradient); + background-size: 400% 100%; + animation: loading 8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { - .skeleton { - animation: none; - background-position: 200% 0; - } + .skeleton { + animation: none; + background-position: 200% 0; + } } @keyframes loading { - 0% { - background-position: 200% 0; - } - 100% { - background-position: -200% 0; - } + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } } diff --git a/site/src/components/Tweet/twitter-theme/theme.css b/site/src/components/Tweet/twitter-theme/theme.css index bac27ee9..f384ff50 100644 --- a/site/src/components/Tweet/twitter-theme/theme.css +++ b/site/src/components/Tweet/twitter-theme/theme.css @@ -1,133 +1,125 @@ .astro-tweet-theme { - --tweet-container-margin: 1.5rem 0; + --tweet-container-margin: 1.5rem 0; - /* Header */ - --tweet-header-font-size: 0.9375rem; - --tweet-header-line-height: 1.25rem; + /* Header */ + --tweet-header-font-size: 0.9375rem; + --tweet-header-line-height: 1.25rem; - /* Text */ - --tweet-body-font-size: 1.25rem; - --tweet-body-font-weight: 400; - --tweet-body-line-height: 1.5rem; - --tweet-body-margin: 0; + /* Text */ + --tweet-body-font-size: 1.25rem; + --tweet-body-font-weight: 400; + --tweet-body-line-height: 1.5rem; + --tweet-body-margin: 0; - /* Quoted Tweet */ - --tweet-quoted-container-margin: 0.75rem 0; - --tweet-quoted-body-font-size: 0.938rem; - --tweet-quoted-body-font-weight: 400; - --tweet-quoted-body-line-height: 1.25rem; - --tweet-quoted-body-margin: 0.25rem 0 0.75rem 0; + /* Quoted Tweet */ + --tweet-quoted-container-margin: 0.75rem 0; + --tweet-quoted-body-font-size: 0.938rem; + --tweet-quoted-body-font-weight: 400; + --tweet-quoted-body-line-height: 1.25rem; + --tweet-quoted-body-margin: 0.25rem 0 0.75rem 0; - /* Info */ - --tweet-info-font-size: 0.9375rem; - --tweet-info-line-height: 1.25rem; + /* Info */ + --tweet-info-font-size: 0.9375rem; + --tweet-info-line-height: 1.25rem; - /* Actions like the like, reply and copy buttons */ - --tweet-actions-font-size: 0.875rem; - --tweet-actions-line-height: 1rem; - --tweet-actions-font-weight: 700; - --tweet-actions-icon-size: 1.25em; - --tweet-actions-icon-wrapper-size: calc( - var(--tweet-actions-icon-size) + 0.75em - ); + /* Actions like the like, reply and copy buttons */ + --tweet-actions-font-size: 0.875rem; + --tweet-actions-line-height: 1rem; + --tweet-actions-font-weight: 700; + --tweet-actions-icon-size: 1.25em; + --tweet-actions-icon-wrapper-size: calc(var(--tweet-actions-icon-size) + 0.75em); - /* Reply button */ - --tweet-replies-font-size: 0.875rem; - --tweet-replies-line-height: 1rem; - --tweet-replies-font-weight: 700; + /* Reply button */ + --tweet-replies-font-size: 0.875rem; + --tweet-replies-line-height: 1rem; + --tweet-replies-font-weight: 700; } :where(.astro-tweet-theme) * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } -:is([data-theme="light"], .light) :where(.astro-tweet-theme), +:is([data-theme='light'], .light) :where(.astro-tweet-theme), :where(.astro-tweet-theme) { - --tweet-skeleton-gradient: linear-gradient( - 270deg, - #fafafa, - #eaeaea, - #eaeaea, - #fafafa - ); - --tweet-border: 1px solid rgb(207, 217, 222); - --tweet-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Helvetica, Arial, sans-serif; - --tweet-font-color: rgb(15, 20, 25); - --tweet-font-color-secondary: rgb(83, 100, 113); - --tweet-bg-color: #fff; - --tweet-bg-color-hover: rgb(247, 249, 249); - --tweet-quoted-bg-color-hover: rgba(0, 0, 0, 0.03); - --tweet-color-blue-primary: rgb(29, 155, 240); - --tweet-color-blue-primary-hover: rgb(26, 140, 216); - --tweet-color-blue-secondary: rgb(0, 111, 214); - --tweet-color-blue-secondary-hover: rgba(0, 111, 214, 0.1); - --tweet-color-red-primary: rgb(249, 24, 128); - --tweet-color-red-primary-hover: rgba(249, 24, 128, 0.1); - --tweet-color-green-primary: rgb(0, 186, 124); - --tweet-color-green-primary-hover: rgba(0, 186, 124, 0.1); - --tweet-twitter-icon-color: var(--tweet-font-color); - --tweet-verified-old-color: rgb(130, 154, 171); - --tweet-verified-blue-color: var(--tweet-color-blue-primary); + --tweet-skeleton-gradient: linear-gradient(270deg, #fafafa, #eaeaea, #eaeaea, #fafafa); + --tweet-border: 1px solid rgb(207, 217, 222); + --tweet-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, + sans-serif; + --tweet-font-color: rgb(15, 20, 25); + --tweet-font-color-secondary: rgb(83, 100, 113); + --tweet-bg-color: #fff; + --tweet-bg-color-hover: rgb(247, 249, 249); + --tweet-quoted-bg-color-hover: rgba(0, 0, 0, 0.03); + --tweet-color-blue-primary: rgb(29, 155, 240); + --tweet-color-blue-primary-hover: rgb(26, 140, 216); + --tweet-color-blue-secondary: rgb(0, 111, 214); + --tweet-color-blue-secondary-hover: rgba(0, 111, 214, 0.1); + --tweet-color-red-primary: rgb(249, 24, 128); + --tweet-color-red-primary-hover: rgba(249, 24, 128, 0.1); + --tweet-color-green-primary: rgb(0, 186, 124); + --tweet-color-green-primary-hover: rgba(0, 186, 124, 0.1); + --tweet-twitter-icon-color: var(--tweet-font-color); + --tweet-verified-old-color: rgb(130, 154, 171); + --tweet-verified-blue-color: var(--tweet-color-blue-primary); } -:is([data-theme="dark"], .dark) :where(.astro-tweet-theme) { - --tweet-skeleton-gradient: linear-gradient( - 270deg, - #15202b, - rgb(30, 39, 50), - rgb(30, 39, 50), - rgb(21, 32, 43) - ); - --tweet-border: 1px solid rgb(66, 83, 100); - --tweet-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Helvetica, Arial, sans-serif; - --tweet-font-color: rgb(247, 249, 249); - --tweet-font-color-secondary: rgb(139, 152, 165); - --tweet-bg-color: rgb(21, 32, 43); - --tweet-bg-color-hover: rgb(30, 39, 50); - --tweet-quoted-bg-color-hover: rgba(255, 255, 255, 0.03); - --tweet-color-blue-primary: rgb(29, 155, 240); - --tweet-color-blue-primary-hover: rgb(26, 140, 216); - --tweet-color-blue-secondary: rgb(107, 201, 251); - --tweet-color-blue-secondary-hover: rgba(107, 201, 251, 0.1); - --tweet-color-red-primary: rgb(249, 24, 128); - --tweet-color-red-primary-hover: rgba(249, 24, 128, 0.1); - --tweet-color-green-primary: rgb(0, 186, 124); - --tweet-color-green-primary-hover: rgba(0, 186, 124, 0.1); - --tweet-twitter-icon-color: var(--tweet-font-color); - --tweet-verified-old-color: rgb(130, 154, 171); - --tweet-verified-blue-color: #fff; +:is([data-theme='dark'], .dark) :where(.astro-tweet-theme) { + --tweet-skeleton-gradient: linear-gradient( + 270deg, + #15202b, + rgb(30, 39, 50), + rgb(30, 39, 50), + rgb(21, 32, 43) + ); + --tweet-border: 1px solid rgb(66, 83, 100); + --tweet-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, + sans-serif; + --tweet-font-color: rgb(247, 249, 249); + --tweet-font-color-secondary: rgb(139, 152, 165); + --tweet-bg-color: rgb(21, 32, 43); + --tweet-bg-color-hover: rgb(30, 39, 50); + --tweet-quoted-bg-color-hover: rgba(255, 255, 255, 0.03); + --tweet-color-blue-primary: rgb(29, 155, 240); + --tweet-color-blue-primary-hover: rgb(26, 140, 216); + --tweet-color-blue-secondary: rgb(107, 201, 251); + --tweet-color-blue-secondary-hover: rgba(107, 201, 251, 0.1); + --tweet-color-red-primary: rgb(249, 24, 128); + --tweet-color-red-primary-hover: rgba(249, 24, 128, 0.1); + --tweet-color-green-primary: rgb(0, 186, 124); + --tweet-color-green-primary-hover: rgba(0, 186, 124, 0.1); + --tweet-twitter-icon-color: var(--tweet-font-color); + --tweet-verified-old-color: rgb(130, 154, 171); + --tweet-verified-blue-color: #fff; } @media (prefers-color-scheme: dark) { - :where(.astro-tweet-theme) { - --tweet-skeleton-gradient: linear-gradient( - 270deg, - #15202b, - rgb(30, 39, 50), - rgb(30, 39, 50), - rgb(21, 32, 43) - ); - --tweet-border: 1px solid rgb(66, 83, 100); - --tweet-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Helvetica, Arial, sans-serif; - --tweet-font-color: rgb(247, 249, 249); - --tweet-font-color-secondary: rgb(139, 152, 165); - --tweet-bg-color: rgb(21, 32, 43); - --tweet-bg-color-hover: rgb(30, 39, 50); - --tweet-color-blue-primary: rgb(29, 155, 240); - --tweet-color-blue-primary-hover: rgb(26, 140, 216); - --tweet-color-blue-secondary: rgb(107, 201, 251); - --tweet-color-blue-secondary-hover: rgba(107, 201, 251, 0.1); - --tweet-color-red-primary: rgb(249, 24, 128); - --tweet-color-red-primary-hover: rgba(249, 24, 128, 0.1); - --tweet-color-green-primary: rgb(0, 186, 124); - --tweet-color-green-primary-hover: rgba(0, 186, 124, 0.1); - --tweet-twitter-icon-color: var(--tweet-font-color); - --tweet-verified-old-color: rgb(130, 154, 171); - --tweet-verified-blue-color: #fff; - } + :where(.astro-tweet-theme) { + --tweet-skeleton-gradient: linear-gradient( + 270deg, + #15202b, + rgb(30, 39, 50), + rgb(30, 39, 50), + rgb(21, 32, 43) + ); + --tweet-border: 1px solid rgb(66, 83, 100); + --tweet-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, + sans-serif; + --tweet-font-color: rgb(247, 249, 249); + --tweet-font-color-secondary: rgb(139, 152, 165); + --tweet-bg-color: rgb(21, 32, 43); + --tweet-bg-color-hover: rgb(30, 39, 50); + --tweet-color-blue-primary: rgb(29, 155, 240); + --tweet-color-blue-primary-hover: rgb(26, 140, 216); + --tweet-color-blue-secondary: rgb(107, 201, 251); + --tweet-color-blue-secondary-hover: rgba(107, 201, 251, 0.1); + --tweet-color-red-primary: rgb(249, 24, 128); + --tweet-color-red-primary-hover: rgba(249, 24, 128, 0.1); + --tweet-color-green-primary: rgb(0, 186, 124); + --tweet-color-green-primary-hover: rgba(0, 186, 124, 0.1); + --tweet-twitter-icon-color: var(--tweet-font-color); + --tweet-verified-old-color: rgb(130, 154, 171); + --tweet-verified-blue-color: #fff; + } } diff --git a/site/src/components/Tweet/twitter-theme/tweet-actions.module.css b/site/src/components/Tweet/twitter-theme/tweet-actions.module.css index d9e393ea..ed1888c5 100644 --- a/site/src/components/Tweet/twitter-theme/tweet-actions.module.css +++ b/site/src/components/Tweet/twitter-theme/tweet-actions.module.css @@ -1,90 +1,90 @@ .actions { - display: flex; - align-items: center; - color: var(--tweet-font-color-secondary); - padding-top: 0.25rem; - margin-top: 0.25rem; - border-top: var(--tweet-border); - overflow-wrap: break-word; - white-space: nowrap; - text-overflow: ellipsis; + display: flex; + align-items: center; + color: var(--tweet-font-color-secondary); + padding-top: 0.25rem; + margin-top: 0.25rem; + border-top: var(--tweet-border); + overflow-wrap: break-word; + white-space: nowrap; + text-overflow: ellipsis; } .like, .reply, .copy { - text-decoration: none; - color: inherit; - display: flex; - align-items: center; - margin-right: 1.25rem; + text-decoration: none; + color: inherit; + display: flex; + align-items: center; + margin-right: 1.25rem; } .like:hover, .reply:hover, .copy:hover { - background-color: rgba(0, 0, 0, 0); + background-color: rgba(0, 0, 0, 0); } .like:hover > .likeIconWrapper { - background-color: var(--tweet-color-red-primary-hover); + background-color: var(--tweet-color-red-primary-hover); } .like:hover > .likeCount { - color: var(--tweet-color-red-primary); - text-decoration-line: underline; + color: var(--tweet-color-red-primary); + text-decoration-line: underline; } .likeIconWrapper, .replyIconWrapper, .copyIconWrapper { - width: var(--tweet-actions-icon-wrapper-size); - height: var(--tweet-actions-icon-wrapper-size); - display: flex; - justify-content: center; - align-items: center; - margin-left: -0.25rem; - border-radius: 9999px; + width: var(--tweet-actions-icon-wrapper-size); + height: var(--tweet-actions-icon-wrapper-size); + display: flex; + justify-content: center; + align-items: center; + margin-left: -0.25rem; + border-radius: 9999px; } .likeIcon, .replyIcon, .copyIcon { - height: var(--tweet-actions-icon-size); - fill: currentColor; - user-select: none; + height: var(--tweet-actions-icon-size); + fill: currentColor; + user-select: none; } .likeIcon { - color: var(--tweet-color-red-primary); + color: var(--tweet-color-red-primary); } .likeCount, .replyText, .copyText { - font-size: var(--tweet-actions-font-size); - font-weight: var(--tweet-actions-font-weight); - line-height: var(--tweet-actions-line-height); - margin-left: 0.25rem; + font-size: var(--tweet-actions-font-size); + font-weight: var(--tweet-actions-font-weight); + line-height: var(--tweet-actions-line-height); + margin-left: 0.25rem; } .reply:hover > .replyIconWrapper { - background-color: var(--tweet-color-blue-secondary-hover); + background-color: var(--tweet-color-blue-secondary-hover); } .reply:hover > .replyText { - color: var(--tweet-color-blue-secondary); - text-decoration-line: underline; + color: var(--tweet-color-blue-secondary); + text-decoration-line: underline; } .replyIcon { - color: var(--tweet-color-blue-primary); + color: var(--tweet-color-blue-primary); } .copy { - font: inherit; - background: none; - border: none; - cursor: pointer; + font: inherit; + background: none; + border: none; + cursor: pointer; } .copy:hover > .copyIconWrapper { - background-color: var(--tweet-color-green-primary-hover); + background-color: var(--tweet-color-green-primary-hover); } .copy:hover .copyIcon { - color: var(--tweet-color-green-primary); + color: var(--tweet-color-green-primary); } .copy:hover > .copyText { - color: var(--tweet-color-green-primary); - text-decoration-line: underline; + color: var(--tweet-color-green-primary); + text-decoration-line: underline; } diff --git a/site/src/components/Tweet/twitter-theme/tweet-body.module.css b/site/src/components/Tweet/twitter-theme/tweet-body.module.css index f8e686a3..771f657c 100644 --- a/site/src/components/Tweet/twitter-theme/tweet-body.module.css +++ b/site/src/components/Tweet/twitter-theme/tweet-body.module.css @@ -1,8 +1,8 @@ .root { - font-size: var(--tweet-body-font-size); - font-weight: var(--tweet-body-font-weight); - line-height: var(--tweet-body-line-height); - margin: var(--tweet-body-margin); - overflow-wrap: break-word; - white-space: pre-wrap; + font-size: var(--tweet-body-font-size); + font-weight: var(--tweet-body-font-weight); + line-height: var(--tweet-body-line-height); + margin: var(--tweet-body-margin); + overflow-wrap: break-word; + white-space: pre-wrap; } diff --git a/site/src/components/Tweet/twitter-theme/tweet-container.module.css b/site/src/components/Tweet/twitter-theme/tweet-container.module.css index d02e6cc4..21eb1408 100644 --- a/site/src/components/Tweet/twitter-theme/tweet-container.module.css +++ b/site/src/components/Tweet/twitter-theme/tweet-container.module.css @@ -1,25 +1,25 @@ .root { - width: 100%; - min-width: 250px; - max-width: 550px; - overflow: hidden; - /* Base font styles */ - color: var(--tweet-font-color); - font-family: var(--tweet-font-family); - font-weight: 400; - box-sizing: border-box; - border: var(--tweet-border); - border-radius: 12px; - margin: var(--tweet-container-margin); - background-color: var(--tweet-bg-color); - transition-property: background-color, box-shadow; - transition-duration: 0.2s; + width: 100%; + min-width: 250px; + max-width: 550px; + overflow: hidden; + /* Base font styles */ + color: var(--tweet-font-color); + font-family: var(--tweet-font-family); + font-weight: 400; + box-sizing: border-box; + border: var(--tweet-border); + border-radius: 12px; + margin: var(--tweet-container-margin); + background-color: var(--tweet-bg-color); + transition-property: background-color, box-shadow; + transition-duration: 0.2s; } .root:hover { - background-color: var(--tweet-bg-color-hover); + background-color: var(--tweet-bg-color-hover); } .article { - position: relative; - box-sizing: inherit; - padding: 0.75rem 1rem; + position: relative; + box-sizing: inherit; + padding: 0.75rem 1rem; } diff --git a/site/src/components/Tweet/twitter-theme/tweet-header.module.css b/site/src/components/Tweet/twitter-theme/tweet-header.module.css index 2ce994e2..38a053dd 100644 --- a/site/src/components/Tweet/twitter-theme/tweet-header.module.css +++ b/site/src/components/Tweet/twitter-theme/tweet-header.module.css @@ -1,96 +1,96 @@ .header { - display: flex; - padding-bottom: 0.75rem; - line-height: var(--tweet-header-line-height); - font-size: var(--tweet-header-font-size); - white-space: nowrap; - overflow-wrap: break-word; - overflow: hidden; + display: flex; + padding-bottom: 0.75rem; + line-height: var(--tweet-header-line-height); + font-size: var(--tweet-header-font-size); + white-space: nowrap; + overflow-wrap: break-word; + overflow: hidden; } .avatar { - position: relative; - height: 48px; - width: 48px; + position: relative; + height: 48px; + width: 48px; } .avatarOverflow { - height: 100%; - width: 100%; - position: absolute; - overflow: hidden; - border-radius: 9999px; + height: 100%; + width: 100%; + position: absolute; + overflow: hidden; + border-radius: 9999px; } .avatarSquare { - border-radius: 4px; + border-radius: 4px; } .avatarShadow { - height: 100%; - width: 100%; - transition-property: background-color; - transition-duration: 0.2s; - box-shadow: rgb(0 0 0 / 3%) 0px 0px 2px inset; + height: 100%; + width: 100%; + transition-property: background-color; + transition-duration: 0.2s; + box-shadow: rgb(0 0 0 / 3%) 0px 0px 2px inset; } .avatarShadow:hover { - background-color: rgba(26, 26, 26, 0.15); + background-color: rgba(26, 26, 26, 0.15); } .author { - max-width: calc(100% - 84px); - display: flex; - flex-direction: column; - justify-content: center; - margin: 0 0.5rem; + max-width: calc(100% - 84px); + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 0.5rem; } .authorLink { - text-decoration: none; - color: inherit; - display: flex; - align-items: center; + text-decoration: none; + color: inherit; + display: flex; + align-items: center; } .authorLink:hover { - text-decoration-line: underline; + text-decoration-line: underline; } .authorVerified { - display: inline-flex; + display: inline-flex; } .authorLinkText { - font-weight: 700; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; + font-weight: 700; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; } .authorMeta { - display: flex; + display: flex; } .authorFollow { - display: flex; + display: flex; } .username { - color: var(--tweet-font-color-secondary); - text-decoration: none; - text-overflow: ellipsis; + color: var(--tweet-font-color-secondary); + text-decoration: none; + text-overflow: ellipsis; } .follow { - color: var(--tweet-color-blue-secondary); - text-decoration: none; - font-weight: 700; + color: var(--tweet-color-blue-secondary); + text-decoration: none; + font-weight: 700; } .follow:hover { - text-decoration-line: underline; + text-decoration-line: underline; } .separator { - padding: 0 0.25rem; + padding: 0 0.25rem; } .brand { - margin-inline-start: auto; + margin-inline-start: auto; } .twitterIcon { - width: 23.75px; - height: 23.75px; - color: var(--tweet-twitter-icon-color); - fill: currentColor; - user-select: none; + width: 23.75px; + height: 23.75px; + color: var(--tweet-twitter-icon-color); + fill: currentColor; + user-select: none; } diff --git a/site/src/components/Tweet/twitter-theme/tweet-in-reply-to.module.css b/site/src/components/Tweet/twitter-theme/tweet-in-reply-to.module.css index cf9d0202..672c97cd 100644 --- a/site/src/components/Tweet/twitter-theme/tweet-in-reply-to.module.css +++ b/site/src/components/Tweet/twitter-theme/tweet-in-reply-to.module.css @@ -1,13 +1,13 @@ .root { - text-decoration: none; - color: var(--tweet-font-color-secondary); - font-size: 0.9375rem; - line-height: 1.25rem; - margin-bottom: 0.25rem; - overflow-wrap: break-word; - white-space: pre-wrap; + text-decoration: none; + color: var(--tweet-font-color-secondary); + font-size: 0.9375rem; + line-height: 1.25rem; + margin-bottom: 0.25rem; + overflow-wrap: break-word; + white-space: pre-wrap; } .root:hover { - text-decoration-thickness: 1px; - text-decoration-line: underline; + text-decoration-thickness: 1px; + text-decoration-line: underline; } diff --git a/site/src/components/Tweet/twitter-theme/tweet-info-created-at.module.css b/site/src/components/Tweet/twitter-theme/tweet-info-created-at.module.css index 8de223a6..6dd1a192 100644 --- a/site/src/components/Tweet/twitter-theme/tweet-info-created-at.module.css +++ b/site/src/components/Tweet/twitter-theme/tweet-info-created-at.module.css @@ -1,10 +1,10 @@ .root { - color: inherit; - text-decoration: none; - font-size: var(--tweet-info-font-size); - line-height: var(--tweet-info-line-height); + color: inherit; + text-decoration: none; + font-size: var(--tweet-info-font-size); + line-height: var(--tweet-info-line-height); } .root:hover { - text-decoration-thickness: 1px; - text-decoration-line: underline; + text-decoration-thickness: 1px; + text-decoration-line: underline; } diff --git a/site/src/components/Tweet/twitter-theme/tweet-info.module.css b/site/src/components/Tweet/twitter-theme/tweet-info.module.css index a668a342..aa94c8b3 100644 --- a/site/src/components/Tweet/twitter-theme/tweet-info.module.css +++ b/site/src/components/Tweet/twitter-theme/tweet-info.module.css @@ -1,38 +1,38 @@ .info { - display: flex; - align-items: center; - color: var(--tweet-font-color-secondary); - margin-top: 0.125rem; - overflow-wrap: break-word; - white-space: nowrap; - text-overflow: ellipsis; + display: flex; + align-items: center; + color: var(--tweet-font-color-secondary); + margin-top: 0.125rem; + overflow-wrap: break-word; + white-space: nowrap; + text-overflow: ellipsis; } .infoLink { - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; } .infoLink { - height: var(--tweet-actions-icon-wrapper-size); - width: var(--tweet-actions-icon-wrapper-size); - font: inherit; - margin-left: auto; - display: flex; - justify-content: center; - align-items: center; - margin-right: -4px; - border-radius: 9999px; - transition-property: background-color; - transition-duration: 0.2s; + height: var(--tweet-actions-icon-wrapper-size); + width: var(--tweet-actions-icon-wrapper-size); + font: inherit; + margin-left: auto; + display: flex; + justify-content: center; + align-items: center; + margin-right: -4px; + border-radius: 9999px; + transition-property: background-color; + transition-duration: 0.2s; } .infoLink:hover { - background-color: var(--tweet-color-blue-secondary-hover); + background-color: var(--tweet-color-blue-secondary-hover); } .infoIcon { - color: inherit; - fill: currentColor; - height: var(--tweet-actions-icon-size); - user-select: none; + color: inherit; + fill: currentColor; + height: var(--tweet-actions-icon-size); + user-select: none; } .infoLink:hover > .infoIcon { - color: var(--tweet-color-blue-secondary); + color: var(--tweet-color-blue-secondary); } diff --git a/site/src/components/Tweet/twitter-theme/tweet-link.module.css b/site/src/components/Tweet/twitter-theme/tweet-link.module.css index b41aa448..241e2b95 100644 --- a/site/src/components/Tweet/twitter-theme/tweet-link.module.css +++ b/site/src/components/Tweet/twitter-theme/tweet-link.module.css @@ -1,10 +1,10 @@ .root { - font-weight: inherit; - color: var(--tweet-color-blue-secondary); - text-decoration: none; - cursor: pointer; + font-weight: inherit; + color: var(--tweet-color-blue-secondary); + text-decoration: none; + cursor: pointer; } .root:hover { - text-decoration-thickness: 1px; - text-decoration-line: underline; + text-decoration-thickness: 1px; + text-decoration-line: underline; } diff --git a/site/src/components/Tweet/twitter-theme/tweet-media-video.module.css b/site/src/components/Tweet/twitter-theme/tweet-media-video.module.css index 0b61d887..4314593f 100644 --- a/site/src/components/Tweet/twitter-theme/tweet-media-video.module.css +++ b/site/src/components/Tweet/twitter-theme/tweet-media-video.module.css @@ -1,70 +1,70 @@ .anchor { - display: flex; - align-items: center; - color: white; - padding: 0 1rem; - border: 1px solid transparent; - border-radius: 9999px; - font-weight: 700; - transition: background-color 0.2s; - cursor: pointer; - user-select: none; - outline-style: none; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; + display: flex; + align-items: center; + color: white; + padding: 0 1rem; + border: 1px solid transparent; + border-radius: 9999px; + font-weight: 700; + transition: background-color 0.2s; + cursor: pointer; + user-select: none; + outline-style: none; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; } .videoButton { - position: relative; - height: 67px; - width: 67px; - display: flex; - align-items: center; - justify-content: center; - background-color: var(--tweet-color-blue-primary); - transition-property: background-color; - transition-duration: 0.2s; - border: 4px solid #fff; - border-radius: 9999px; - cursor: pointer; + position: relative; + height: 67px; + width: 67px; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--tweet-color-blue-primary); + transition-property: background-color; + transition-duration: 0.2s; + border: 4px solid #fff; + border-radius: 9999px; + cursor: pointer; } .videoButton:hover, .videoButton:focus-visible { - background-color: var(--tweet-color-blue-primary-hover); + background-color: var(--tweet-color-blue-primary-hover); } .videoButtonIcon { - margin-left: 3px; - width: calc(50% + 4px); - height: calc(50% + 4px); - max-width: 100%; - color: #fff; - fill: currentColor; - user-select: none; + margin-left: 3px; + width: calc(50% + 4px); + height: calc(50% + 4px); + max-width: 100%; + color: #fff; + fill: currentColor; + user-select: none; } .watchOnTwitter { - position: absolute; - top: 12px; - right: 8px; + position: absolute; + top: 12px; + right: 8px; } .watchOnTwitter > a { - min-width: 2rem; - min-height: 2rem; - font-size: 0.875rem; - line-height: 1rem; - backdrop-filter: blur(4px); - background-color: rgba(15, 20, 25, 0.75); + min-width: 2rem; + min-height: 2rem; + font-size: 0.875rem; + line-height: 1rem; + backdrop-filter: blur(4px); + background-color: rgba(15, 20, 25, 0.75); } .watchOnTwitter > a:hover { - background-color: rgba(39, 44, 48, 0.75); + background-color: rgba(39, 44, 48, 0.75); } .viewReplies { - position: relative; - min-height: 2rem; - background-color: var(--tweet-color-blue-primary); - border-color: var(--tweet-color-blue-primary); - font-size: 0.9375rem; - line-height: 1.25rem; + position: relative; + min-height: 2rem; + background-color: var(--tweet-color-blue-primary); + border-color: var(--tweet-color-blue-primary); + font-size: 0.9375rem; + line-height: 1.25rem; } .viewReplies:hover { - background-color: var(--tweet-color-blue-primary-hover); + background-color: var(--tweet-color-blue-primary-hover); } diff --git a/site/src/components/Tweet/twitter-theme/tweet-media.module.css b/site/src/components/Tweet/twitter-theme/tweet-media.module.css index 72f6bdc6..375461e6 100644 --- a/site/src/components/Tweet/twitter-theme/tweet-media.module.css +++ b/site/src/components/Tweet/twitter-theme/tweet-media.module.css @@ -1,53 +1,53 @@ .root { - margin-top: 0.75rem; - overflow: hidden; - position: relative; + margin-top: 0.75rem; + overflow: hidden; + position: relative; } .rounded { - border: var(--tweet-border); - border-radius: 12px; + border: var(--tweet-border); + border-radius: 12px; } .mediaWrapper { - display: grid; - grid-auto-rows: 1fr; - gap: 2px; - height: 100%; - width: 100%; + display: grid; + grid-auto-rows: 1fr; + gap: 2px; + height: 100%; + width: 100%; } .grid2Columns { - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(2, 1fr); } .grid3 > a:first-child { - grid-row: span 2; + grid-row: span 2; } .grid2x2 { - grid-template-rows: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); } .mediaContainer { - position: relative; - height: 100%; - width: 100%; - display: flex; - align-items: center; - justify-content: center; + position: relative; + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; } .mediaLink { - text-decoration: none; - outline-style: none; + text-decoration: none; + outline-style: none; } .skeleton { - padding-bottom: 56.25%; - width: 100%; - display: block; + padding-bottom: 56.25%; + width: 100%; + display: block; } .image { - position: absolute; - top: 0px; - left: 0px; - bottom: 0px; - height: 100%; - width: 100%; - margin: 0; - object-fit: cover; - object-position: center; + position: absolute; + top: 0px; + left: 0px; + bottom: 0px; + height: 100%; + width: 100%; + margin: 0; + object-fit: cover; + object-position: center; } diff --git a/site/src/components/Tweet/twitter-theme/tweet-not-found.module.css b/site/src/components/Tweet/twitter-theme/tweet-not-found.module.css index 5eec055f..bfb64fa2 100644 --- a/site/src/components/Tweet/twitter-theme/tweet-not-found.module.css +++ b/site/src/components/Tweet/twitter-theme/tweet-not-found.module.css @@ -1,10 +1,10 @@ .root { - display: flex; - flex-direction: column; - align-items: center; - padding-bottom: 0.75rem; + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 0.75rem; } .root > h3 { - font-size: 1.25rem; - margin-bottom: 0.5rem; + font-size: 1.25rem; + margin-bottom: 0.5rem; } diff --git a/site/src/components/Tweet/twitter-theme/tweet-replies.module.css b/site/src/components/Tweet/twitter-theme/tweet-replies.module.css index 4efb4300..9837c7a4 100644 --- a/site/src/components/Tweet/twitter-theme/tweet-replies.module.css +++ b/site/src/components/Tweet/twitter-theme/tweet-replies.module.css @@ -1,31 +1,31 @@ .replies { - padding: 0.25rem 0; + padding: 0.25rem 0; } .link { - text-decoration: none; - color: var(--tweet-color-blue-secondary); - display: flex; - align-items: center; - justify-content: center; - min-width: 32px; - min-height: 32px; - user-select: none; - outline-style: none; - transition-property: background-color; - transition-duration: 0.2s; - padding: 0 1rem; - border: var(--tweet-border); - border-radius: 9999px; + text-decoration: none; + color: var(--tweet-color-blue-secondary); + display: flex; + align-items: center; + justify-content: center; + min-width: 32px; + min-height: 32px; + user-select: none; + outline-style: none; + transition-property: background-color; + transition-duration: 0.2s; + padding: 0 1rem; + border: var(--tweet-border); + border-radius: 9999px; } .link:hover { - background-color: var(--tweet-color-blue-secondary-hover); + background-color: var(--tweet-color-blue-secondary-hover); } .text { - font-weight: var(--tweet-replies-font-weight); - font-size: var(--tweet-replies-font-size); - line-height: var(--tweet-replies-line-height); - overflow-wrap: break-word; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; + font-weight: var(--tweet-replies-font-weight); + font-size: var(--tweet-replies-font-size); + line-height: var(--tweet-replies-line-height); + overflow-wrap: break-word; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } diff --git a/site/src/components/Tweet/twitter-theme/tweet-skeleton.module.css b/site/src/components/Tweet/twitter-theme/tweet-skeleton.module.css index df94f5c9..74edde85 100644 --- a/site/src/components/Tweet/twitter-theme/tweet-skeleton.module.css +++ b/site/src/components/Tweet/twitter-theme/tweet-skeleton.module.css @@ -1,4 +1,4 @@ .root { - pointer-events: none; - padding-bottom: 0.25rem; + pointer-events: none; + padding-bottom: 0.25rem; } diff --git a/site/src/components/Tweet/twitter-theme/types.ts b/site/src/components/Tweet/twitter-theme/types.ts index bc5b8eb5..252f147e 100644 --- a/site/src/components/Tweet/twitter-theme/types.ts +++ b/site/src/components/Tweet/twitter-theme/types.ts @@ -6,12 +6,12 @@ * client component unless they're Server Actions. */ export type TwitterComponents = { - TweetNotFound?: typeof import("./TweetNotFound.astro"); - AvatarImg?: typeof import("./AvatarImg.astro"); - MediaImg?: typeof import("./MediaImg.astro"); -}; + TweetNotFound?: typeof import('./TweetNotFound.astro') + AvatarImg?: typeof import('./AvatarImg.astro') + MediaImg?: typeof import('./MediaImg.astro') +} /** * @deprecated Use `TwitterComponents` instead. */ -export type TweetComponents = TwitterComponents; +export type TweetComponents = TwitterComponents diff --git a/site/src/components/Tweet/twitter-theme/verified-badge.module.css b/site/src/components/Tweet/twitter-theme/verified-badge.module.css index c16e77ec..55537b1c 100644 --- a/site/src/components/Tweet/twitter-theme/verified-badge.module.css +++ b/site/src/components/Tweet/twitter-theme/verified-badge.module.css @@ -1,10 +1,10 @@ .verifiedOld { - color: var(--tweet-verified-old-color); + color: var(--tweet-verified-old-color); } .verifiedBlue { - color: var(--tweet-verified-blue-color); + color: var(--tweet-verified-blue-color); } .verifiedGovernment { - /* color: var(--tweet-verified-government-color); */ - color: rgb(130, 154, 171); + /* color: var(--tweet-verified-government-color); */ + color: rgb(130, 154, 171); } diff --git a/site/src/env.d.ts b/site/src/env.d.ts index 9bc5cb41..e16c13c6 100644 --- a/site/src/env.d.ts +++ b/site/src/env.d.ts @@ -1 +1 @@ -/// \ No newline at end of file +/// diff --git a/site/tsconfig.json b/site/tsconfig.json index d756abe7..e014bf28 100644 --- a/site/tsconfig.json +++ b/site/tsconfig.json @@ -1,20 +1,13 @@ { - "extends": [ - "astro/tsconfigs/strictest", - "../tsconfig.json" - ], - "compilerOptions": { - "jsx": "preserve", - "jsxImportSource": "react", - "exactOptionalPropertyTypes": false, - "baseUrl": ".", - "paths": { - "/*": [ - "./*" - ], - "@/*": [ - "./src/*" - ] - } - } -} \ No newline at end of file + "extends": ["astro/tsconfigs/strictest", "../tsconfig.json"], + "compilerOptions": { + "jsx": "preserve", + "jsxImportSource": "react", + "exactOptionalPropertyTypes": false, + "baseUrl": ".", + "paths": { + "/*": ["./*"], + "@/*": ["./src/*"] + } + } +} From 32b29aa30d966a848daef7989668881349e6b009 Mon Sep 17 00:00:00 2001 From: Maxwell Barvian Date: Sat, 26 Oct 2024 02:25:41 -0700 Subject: [PATCH 10/27] Fix svelte examples --- pnpm-lock.yaml | 37 +++++ site/package.json | 3 +- .../examples/_Activity/index.astro | 4 +- .../_Activity/svelte/Component.svelte | 134 +++++++++--------- .../examples/_Activity/svelte/index.svelte | 28 ++-- .../examples/_Slider/index.astro | 10 +- .../examples/_Slider/svelte/Component.svelte | 43 ++++++ .../examples/_Slider/svelte/index.svelte | 5 + .../examples/_Slider/vue/Component.vue | 3 +- 9 files changed, 181 insertions(+), 86 deletions(-) create mode 100644 site/src/pages/[...framework]/examples/_Slider/svelte/Component.svelte create mode 100644 site/src/pages/[...framework]/examples/_Slider/svelte/index.svelte diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4bc57708..91587496 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -326,6 +326,9 @@ importers: astro-font: specifier: ^0.1.81 version: 0.1.81 + bits-ui: + specifier: ^0.21.16 + version: 0.21.16(svelte@5.1.3) clsx: specifier: ^2.1.1 version: 2.1.1 @@ -1796,6 +1799,11 @@ packages: '@mdx-js/mdx@3.0.1': resolution: {integrity: sha512-eIQ4QTrOWyL3LWEe/bu6Taqzq2HQvHcyTMaOrI95P2/LmJE7AsfPfgJGuFLPVqBUE1BC1rik3VIhU+s9u72arA==} + '@melt-ui/svelte@0.76.2': + resolution: {integrity: sha512-7SbOa11tXUS95T3fReL+dwDs5FyJtCEqrqG3inRziDws346SYLsxOQ6HmX+4BkIsQh1R8U3XNa+EMmdMt38lMA==} + peerDependencies: + svelte: '>=3 <5' + '@microsoft/api-extractor-model@7.29.8': resolution: {integrity: sha512-t3Z/xcO6TRbMcnKGVMs4uMzv/gd5j0NhMiJIGjD4cJMeFJ1Hf8wnLSx37vxlRlL0GWlGJhnFgxvnaL6JlS+73g==} @@ -3263,6 +3271,11 @@ packages: birpc@0.2.19: resolution: {integrity: sha512-5WeXXAvTmitV1RqJFppT5QtUiz2p1mRSYU000Jkft5ZUCLJIk4uQriYNO50HknxKwM6jd8utNc66K1qGIwwWBQ==} + bits-ui@0.21.16: + resolution: {integrity: sha512-XFZ7/bK7j/K+5iktxX/ZpmoFHjYjpPzP5EOO/4bWiaFg5TG1iMcfjDhlBTQnJxD6BoVoHuqeZPHZvaTgF4Iv3Q==} + peerDependencies: + svelte: ^4.0.0 || ^5.0.0-next.118 + blob-to-buffer@1.2.9: resolution: {integrity: sha512-BF033y5fN6OCofD3vgHmNtwZWRcq9NLyyxyILx9hfMy1sXYy4ojFl765hJ2lP0YaN2fuxPaLO2Vzzoxy0FLFFA==} @@ -4115,6 +4128,9 @@ packages: peerDependencies: tailwindcss: ^3.2.0 + focus-trap@7.6.0: + resolution: {integrity: sha512-1td0l3pMkWJLFipobUcGaf+5DTY4PLDDrcqoSaKP8ediO/CoWCCYk/fT/Y2A4e6TNB+Sh6clRJCjOPPnKoNHnQ==} + fontaine@0.5.0: resolution: {integrity: sha512-vPDSWKhVAfTx4hRKT777+N6Szh2pAosAuzLpbppZ6O3UdD/1m6OlHjNcC3vIbgkRTIcLjzySLHXzPeLO2rE8cA==} @@ -8953,6 +8969,16 @@ snapshots: transitivePeerDependencies: - supports-color + '@melt-ui/svelte@0.76.2(svelte@5.1.3)': + dependencies: + '@floating-ui/core': 1.6.8 + '@floating-ui/dom': 1.6.11 + '@internationalized/date': 3.5.6 + dequal: 2.0.3 + focus-trap: 7.6.0 + nanoid: 5.0.7 + svelte: 5.1.3 + '@microsoft/api-extractor-model@7.29.8(@types/node@22.7.9)': dependencies: '@microsoft/tsdoc': 0.15.0 @@ -10853,6 +10879,13 @@ snapshots: birpc@0.2.19: {} + bits-ui@0.21.16(svelte@5.1.3): + dependencies: + '@internationalized/date': 3.5.6 + '@melt-ui/svelte': 0.76.2(svelte@5.1.3) + nanoid: 5.0.7 + svelte: 5.1.3 + blob-to-buffer@1.2.9: {} boolbase@1.0.0: {} @@ -11725,6 +11758,10 @@ snapshots: picocolors: 1.0.1 tailwindcss: 3.4.13 + focus-trap@7.6.0: + dependencies: + tabbable: 6.2.0 + fontaine@0.5.0: dependencies: '@capsizecss/metrics': 2.2.0 diff --git a/site/package.json b/site/package.json index 4405cbfc..075c9ec2 100644 --- a/site/package.json +++ b/site/package.json @@ -19,8 +19,8 @@ "@nanostores/react": "^0.8.0", "@nanostores/vue": "^0.10.0", "@number-flow/react": "workspace:*", - "@number-flow/vue": "workspace:*", "@number-flow/svelte": "workspace:*", + "@number-flow/vue": "workspace:*", "@radix-ui/react-slider": "^1.2.0", "@radix-ui/react-tabs": "^1.1.0", "@types/lodash": "^4.17.9", @@ -28,6 +28,7 @@ "@types/react-dom": "^18", "astro": "^4.15.9", "astro-font": "^0.1.81", + "bits-ui": "^0.21.16", "clsx": "^2.1.1", "date-fns": "^2.30.0", "framer-motion": "^11.9.0", diff --git a/site/src/pages/[...framework]/examples/_Activity/index.astro b/site/src/pages/[...framework]/examples/_Activity/index.astro index 07f10f6f..e42c8b44 100644 --- a/site/src/pages/[...framework]/examples/_Activity/index.astro +++ b/site/src/pages/[...framework]/examples/_Activity/index.astro @@ -9,7 +9,7 @@ import React from './react' import react from './react/Component.tsx?raw' import Vue from './vue/index.vue' import vue from './vue/Component.vue?raw' -import Svelte from './vue/index.vue' +import Svelte from './svelte/index.svelte' import svelte from './svelte/Component.svelte?raw' --- @@ -18,7 +18,7 @@ import svelte from './svelte/Component.svelte?raw' - + diff --git a/site/src/pages/[...framework]/examples/_Activity/svelte/Component.svelte b/site/src/pages/[...framework]/examples/_Activity/svelte/Component.svelte index 49141785..e4c1ec02 100644 --- a/site/src/pages/[...framework]/examples/_Activity/svelte/Component.svelte +++ b/site/src/pages/[...framework]/examples/_Activity/svelte/Component.svelte @@ -33,75 +33,79 @@ bookmarked, onlike, onrepost, - onbookmark + onbookmark, + class: cls, + ...props }: Props = $props() - + +
diff --git a/site/src/pages/[...framework]/examples/_Activity/svelte/index.svelte b/site/src/pages/[...framework]/examples/_Activity/svelte/index.svelte index a59aa582..4e7e056f 100644 --- a/site/src/pages/[...framework]/examples/_Activity/svelte/index.svelte +++ b/site/src/pages/[...framework]/examples/_Activity/svelte/index.svelte @@ -8,18 +8,16 @@ } from '../stores' - + diff --git a/site/src/pages/[...framework]/examples/_Slider/index.astro b/site/src/pages/[...framework]/examples/_Slider/index.astro index 7f54be47..ca246937 100644 --- a/site/src/pages/[...framework]/examples/_Slider/index.astro +++ b/site/src/pages/[...framework]/examples/_Slider/index.astro @@ -8,17 +8,25 @@ import React from './react' import react from './react/Component.tsx?raw' import Vue from './vue/index.vue' import vue from './vue/Component.vue?raw' +import Svelte from './svelte/index.svelte' +import svelte from './svelte/Component.svelte?raw' + +import clsx from 'clsx/lite' +import { getFramework } from '@/lib/framework' +const framework = getFramework(Astro.params) --- - + + + diff --git a/site/src/pages/[...framework]/examples/_Slider/svelte/Component.svelte b/site/src/pages/[...framework]/examples/_Slider/svelte/Component.svelte new file mode 100644 index 00000000..a04b41cd --- /dev/null +++ b/site/src/pages/[...framework]/examples/_Slider/svelte/Component.svelte @@ -0,0 +1,43 @@ + + +
+ + + + + {#each thumbs as thumb} + + {/each} + + {#if value[0] != null} +
+ +
+ {/if} +
diff --git a/site/src/pages/[...framework]/examples/_Slider/svelte/index.svelte b/site/src/pages/[...framework]/examples/_Slider/svelte/index.svelte new file mode 100644 index 00000000..6b10d3c1 --- /dev/null +++ b/site/src/pages/[...framework]/examples/_Slider/svelte/index.svelte @@ -0,0 +1,5 @@ + + + diff --git a/site/src/pages/[...framework]/examples/_Slider/vue/Component.vue b/site/src/pages/[...framework]/examples/_Slider/vue/Component.vue index 10a7f413..149bf887 100644 --- a/site/src/pages/[...framework]/examples/_Slider/vue/Component.vue +++ b/site/src/pages/[...framework]/examples/_Slider/vue/Component.vue @@ -12,14 +12,13 @@ import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'radix-vue' @@ -23,10 +23,11 @@ {/each} {#if value[0] != null} -
+
Date: Sat, 26 Oct 2024 10:21:37 -0700 Subject: [PATCH 12/27] Avoid name conflicts among wrappers --- .changeset/fuzzy-waves-smoke.md | 8 +++++++ packages/number-flow/src/index.ts | 15 +------------ packages/number-flow/src/util/dom.ts | 10 +++++++++ packages/react/src/index.tsx | 26 ++++++++++++----------- packages/svelte/src/lib/NumberFlow.svelte | 4 ++-- packages/svelte/src/lib/index.ts | 5 +++-- packages/vue/src/index.ts | 9 ++++++-- packages/vue/src/index.vue | 2 +- packages/vue/vite.config.mjs | 2 +- site/src/assets/main.css | 3 ++- 10 files changed, 49 insertions(+), 35 deletions(-) create mode 100644 .changeset/fuzzy-waves-smoke.md diff --git a/.changeset/fuzzy-waves-smoke.md b/.changeset/fuzzy-waves-smoke.md new file mode 100644 index 00000000..fe9295b7 --- /dev/null +++ b/.changeset/fuzzy-waves-smoke.md @@ -0,0 +1,8 @@ +--- +'number-flow': patch +'@number-flow/svelte': minor +'@number-flow/react': minor +'@number-flow/vue': minor +--- + +Rename number-flow element to avoid conflicts between wrappers diff --git a/packages/number-flow/src/index.ts b/packages/number-flow/src/index.ts index 3cdaf507..7ba94e7e 100644 --- a/packages/number-flow/src/index.ts +++ b/packages/number-flow/src/index.ts @@ -18,8 +18,8 @@ import styles, { widthDeltaVar, deltaVar } from './styles' -import { BROWSER } from './util/env' import { max } from './util/math' +export { define } from './util/dom' export { prefersReducedMotion } from './styles' export { render, type RenderProps } from './ssr' @@ -67,19 +67,6 @@ export class NumberFlowLite extends ServerSafeHTMLElement implements Props { respectMotionPreference: true } - static define() { - if (!BROWSER) return - const RegisteredElement = customElements.get('number-flow') - if ( - RegisteredElement && - !(RegisteredElement === this || RegisteredElement.prototype instanceof this) - ) { - console.error('An element has already been defined under the name `number-flow`.') - } else if (!RegisteredElement) { - customElements.define('number-flow', this) - } - } - // Kinda gross but can't do e.g. Object.assign in constructor because TypeScript // can't determine if they're definitively assigned that way: transformTiming = (this.constructor as typeof NumberFlowLite).defaultProps.transformTiming diff --git a/packages/number-flow/src/util/dom.ts b/packages/number-flow/src/util/dom.ts index 70347d18..3bd61039 100644 --- a/packages/number-flow/src/util/dom.ts +++ b/packages/number-flow/src/util/dom.ts @@ -1,3 +1,5 @@ +import { BROWSER } from './env' + type ExcludeReadonly = { -readonly [K in keyof T as T[K] extends Readonly ? never : K]: T[K] } @@ -32,3 +34,11 @@ export const offset = (el: HTMLElement, justify: Justify) => { } export const visible = (el: HTMLElement) => el.offsetWidth > 0 && el.offsetHeight > 0 + +// HMR-safe customElements.define +export const define = (name: string, constructor: CustomElementConstructor) => { + if (!BROWSER) return + const RegisteredElement = customElements.get(name) + if (RegisteredElement === constructor) return + return customElements.define(name, constructor) +} diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx index a7a03ab8..4a78085f 100644 --- a/packages/react/src/index.tsx +++ b/packages/react/src/index.tsx @@ -10,27 +10,29 @@ import { type PartitionedParts, NumberFlowLite, prefersReducedMotion, - canAnimate as _canAnimate + canAnimate as _canAnimate, + define } from 'number-flow' export type { Value, Format, Trend } from 'number-flow' -const isReact19 = React.version.startsWith('19.') +const REACT_MAJOR = parseInt(React.version.match(/^(\d+)\./)?.[1]!) +const isReact19 = REACT_MAJOR >= 19 // Can't wait to not have to do this in React 19: const OBSERVED_ATTRIBUTES = ['parts'] as const type ObservedAttribute = (typeof OBSERVED_ATTRIBUTES)[number] -export class NumberFlowElement extends NumberFlowLite { - static observedAttributes = OBSERVED_ATTRIBUTES +export class NumberFlowReact extends NumberFlowLite { + static observedAttributes = isReact19 ? [] : OBSERVED_ATTRIBUTES attributeChangedCallback(attr: ObservedAttribute, _oldValue: string, newValue: string) { this[attr] = JSON.parse(newValue) } } -NumberFlowElement.define() +define('number-flow-react', NumberFlowReact) type NonPartsProps = Omit -type BaseProps = React.HTMLAttributes & +type BaseProps = React.HTMLAttributes & Partial & { isolate?: boolean willChange?: boolean @@ -39,7 +41,7 @@ type BaseProps = React.HTMLAttributes & } type NumberFlowImplProps = BaseProps & { - innerRef: React.MutableRefObject + innerRef: React.MutableRefObject parts: PartitionedParts } @@ -146,9 +148,9 @@ class NumberFlowImpl extends React.Component< if (snapshot) this.#el?.didUpdate() } - #el?: NumberFlowElement + #el?: NumberFlowReact - handleRef(el: NumberFlowElement) { + handleRef(el: NumberFlowReact) { if (this.props.innerRef) this.props.innerRef.current = el this.#el = el } @@ -158,7 +160,7 @@ class NumberFlowImpl extends React.Component< return ( // @ts-expect-error missing types - (function NumberFlow( +const NumberFlow = React.forwardRef(function NumberFlow( { value, locales, format, ...props }, _ref ) { React.useImperativeHandle(_ref, () => ref.current!, []) - const ref = React.useRef() + const ref = React.useRef() const localesString = React.useMemo(() => (locales ? JSON.stringify(locales) : ''), [locales]) const formatString = React.useMemo(() => (format ? JSON.stringify(format) : ''), [format]) diff --git a/packages/svelte/src/lib/NumberFlow.svelte b/packages/svelte/src/lib/NumberFlow.svelte index 6db871c5..2d0d51d0 100644 --- a/packages/svelte/src/lib/NumberFlow.svelte +++ b/packages/svelte/src/lib/NumberFlow.svelte @@ -36,7 +36,7 @@ $: parts = partitionParts(value, formatter) - {@html renderFlow({ formatted: parts.formatted, willChange })} - + diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts index fd084451..871ca69b 100644 --- a/packages/svelte/src/lib/index.ts +++ b/packages/svelte/src/lib/index.ts @@ -1,13 +1,14 @@ import { NumberFlowLite, canAnimate as _canAnimate, - prefersReducedMotion as _prefersReducedMotion + prefersReducedMotion as _prefersReducedMotion, + define } from 'number-flow' import { onMount } from 'svelte' import { derived, readable } from 'svelte/store' export type { Value, Format, Trend, NumberFlowLite } from 'number-flow' -NumberFlowLite.define() +define('number-flow-lite', NumberFlowLite) export { default } from './NumberFlow.svelte' diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts index 68b762a5..6005a6b1 100644 --- a/packages/vue/src/index.ts +++ b/packages/vue/src/index.ts @@ -1,8 +1,13 @@ import { computed, onMounted, ref, toValue, watchEffect, type MaybeRefOrGetter } from 'vue' -import { NumberFlowLite, canAnimate as _canAnimate, prefersReducedMotion } from 'number-flow' +import { + NumberFlowLite, + canAnimate as _canAnimate, + define, + prefersReducedMotion +} from 'number-flow' export type { Value, Format, Trend, NumberFlowLite } from 'number-flow' -NumberFlowLite.define() +define('number-flow-lite', NumberFlowLite) export { default } from './index.vue' diff --git a/packages/vue/src/index.vue b/packages/vue/src/index.vue index 70f73618..155cae3d 100644 --- a/packages/vue/src/index.vue +++ b/packages/vue/src/index.vue @@ -73,7 +73,7 @@ const parts = computed(() => partitionParts(value, formatter.value))