6c846716c3
this is take #2 of this PR https://github.com/tldraw/tldraw/pull/3764 This continues the idea kicked off in https://github.com/tldraw/tldraw/pull/3684 to explore LOD and takes it in a different direction. Several things here to call out: - our dotcom version would start to use Cloudflare's image transforms - we don't rewrite non-image assets - we debounce zooming so that we're not swapping out images while zooming (it creates jank) - we load different images based on steps of .25 (maybe we want to make this more, like 0.33). Feels like 0.5 might be a bit too much but we can play around with it. - we take into account network connection speed. if you're on 3g, for example, we have the size of the image. - dpr is taken into account - in our case, Cloudflare handles it. But if it wasn't Cloudflare, we could add it to our width equation. - we use Cloudflare's `fit=scale-down` setting to never scale _up_ an image. - we don't swap the image in until we've finished loading it programatically (to avoid a blank image while it loads) TODO - [x] We need to enable Cloudflare's pricing on image transforms btw @steveruizok 😉 - this won't work quite yet until we do that. ### Change Type <!-- ❗ Please select a 'Scope' label ❗️ --> - [x] `sdk` — Changes the tldraw SDK - [ ] `dotcom` — Changes the tldraw.com web app - [ ] `docs` — Changes to the documentation, examples, or templates. - [ ] `vs code` — Changes to the vscode plugin - [ ] `internal` — Does not affect user-facing stuff <!-- ❗ Please select a 'Type' label ❗️ --> - [ ] `bugfix` — Bug fix - [x] `feature` — New feature - [ ] `improvement` — Improving existing features - [ ] `chore` — Updating dependencies, other boring stuff - [ ] `galaxy brain` — Architectural changes - [ ] `tests` — Changes to any test code - [ ] `tools` — Changes to infrastructure, CI, internal scripts, debugging tools, etc. - [ ] `dunno` — I don't know ### Test Plan 1. Test images on staging, small, medium, large, mega 2. Test videos on staging - [x] Unit Tests - [ ] End to end tests ### Release Notes - Assets: make option to transform urls dynamically to provide different sized images on demand.
87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
import react from '@vitejs/plugin-react-swc'
|
|
import { config } from 'dotenv'
|
|
import { defineConfig } from 'vite'
|
|
|
|
config({
|
|
path: './.env.local',
|
|
})
|
|
|
|
export const getMultiplayerServerURL = () => {
|
|
return process.env.MULTIPLAYER_SERVER?.replace(/^ws/, 'http')
|
|
}
|
|
|
|
function urlOrLocalFallback(mode: string, url: string | undefined, localFallbackPort: number) {
|
|
if (url) {
|
|
return JSON.stringify(url)
|
|
}
|
|
|
|
if (mode === 'development') {
|
|
// in dev, vite lets us inline javascript expressions - so we return a template string that
|
|
// will be evaluated on the client
|
|
return '`http://${location.hostname}:' + localFallbackPort + '`'
|
|
} else {
|
|
// in production, we have to fall back to a hardcoded value
|
|
return JSON.stringify(`http://localhost:${localFallbackPort}`)
|
|
}
|
|
}
|
|
|
|
// https://vitejs.dev/config/
|
|
export default defineConfig((env) => ({
|
|
plugins: [react({ tsDecorators: true })],
|
|
publicDir: './public',
|
|
build: {
|
|
// output source maps to .map files and include //sourceMappingURL comments in JavaScript files
|
|
// these get uploaded to Sentry and can be used for debugging
|
|
sourcemap: true,
|
|
|
|
// our svg icons break if we use data urls, so disable inline assets for now
|
|
assetsInlineLimit: 0,
|
|
},
|
|
// add backwards-compatible support for NEXT_PUBLIC_ env vars
|
|
define: {
|
|
...Object.fromEntries(
|
|
Object.entries(process.env)
|
|
.filter(([key]) => key.startsWith('NEXT_PUBLIC_'))
|
|
.map(([key, value]) => [`process.env.${key}`, JSON.stringify(value)])
|
|
),
|
|
'process.env.MULTIPLAYER_SERVER': urlOrLocalFallback(env.mode, getMultiplayerServerURL(), 8787),
|
|
'process.env.ASSET_UPLOAD': urlOrLocalFallback(env.mode, process.env.ASSET_UPLOAD, 8788),
|
|
'process.env.ASSET_BUCKET_ORIGIN': urlOrLocalFallback(
|
|
env.mode,
|
|
process.env.ASSET_BUCKET_ORIGIN,
|
|
8788
|
|
),
|
|
'process.env.TLDRAW_ENV': JSON.stringify(process.env.TLDRAW_ENV ?? 'development'),
|
|
// Fall back to staging DSN for local develeopment, although you still need to
|
|
// modify the env check in 'sentry.client.config.ts' to get it reporting errors
|
|
'process.env.SENTRY_DSN': JSON.stringify(
|
|
process.env.SENTRY_DSN ??
|
|
'https://4adc43773d07854d8a60e119505182cc@o578706.ingest.sentry.io/4506178821881856'
|
|
),
|
|
},
|
|
server: {
|
|
proxy: {
|
|
'/api': {
|
|
target: getMultiplayerServerURL() || 'http://127.0.0.1:8787',
|
|
rewrite: (path) => path.replace(/^\/api/, ''),
|
|
ws: false, // we talk to the websocket directly via workers.dev
|
|
// Useful for debugging proxy issues
|
|
// configure: (proxy, _options) => {
|
|
// proxy.on('error', (err, _req, _res) => {
|
|
// console.log('[proxy] proxy error', err)
|
|
// })
|
|
// proxy.on('proxyReq', (proxyReq, req, _res) => {
|
|
// console.log('[proxy] Sending Request to the Target:', req.method, req.url)
|
|
// })
|
|
// proxy.on('proxyRes', (proxyRes, req, _res) => {
|
|
// console.log(
|
|
// '[proxy] Received Response from the Target:',
|
|
// proxyRes.statusCode,
|
|
// req.url
|
|
// )
|
|
// })
|
|
// },
|
|
},
|
|
},
|
|
},
|
|
}))
|