PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1
tldraw/apps/examples/vite.config.ts

24 lines
516 B
TypeScript
Raw Normal View History

fix vite HMR issue (#2279) This is an attempt at #1989. The big issue there is when `shapeUtils` change when you're relying on tldraw to provide you with the store instead of providing your own. Our `useTLStore` component had a bug where it would rely on effects & a ref to detect when its options had changed whilst still scheduling updates. Fresh opts would come in, but they'd be different from the ones in the ref, so we'd schedule an update, so the opts would come in again, but they'd still be different as we hadn't run effects yet, and we'd schedule an update again (and so on). This diff fixes that by storing the previous opts in state instead of a ref, so they're updating in lockstep with the store itself. this prevents the update loop. There are still situations where we can get into loops if the developer is passing in custom tools, shapeUtils, or components but not memoising them or defining them outside of react. As a DX improvement, we do some auto-memoisation of these values using shallow equality to help with this issue. ### Change Type - [x] `patch` — Bug fix ### Test Plan - [x] Unit Tests ### Release Notes - Fixes a bug that could cause crashes due to a re-render loop with HMR #1989
2023-12-01 16:48:30 +00:00
import react from '@vitejs/plugin-react'
New vite-based examples app (#1226) Right now this examples app looks exactly the same as our old examples app, but there are a couple of tiny differences: - We use `vite` instead of our own esbuild setup for development and bundling - We use `@tldraw/assets` for smart asset hashing instead of copying the assets to a public folder You can use `@tldraw/assets` with vite with a bunch of extra config, but it (plus a bunch of other bundlers) also support a special syntax for specifying asset urls: `new URL('./my/asset.svg', import.meta.url).href`. This approach is more standards-complient, but doesn't work with every bundler just yet. This diff also adds a url-based version of `@tldraw/assets`, although I'd like to tweak the entry point - right now you need to import from `@tldraw/assets/lib/urls`, but i'd like to find a way to get this to `@tldraw/assets/urls` or something at some point. There are a couple other extra fixes in here: - vscode builds were broken, they're fixed now! - there's also a little tweak to the `getBundlerAssetUrls` API to allow passing in a function instead of an object for URL formatting - there are new internal-only functions for injecting asset urls globally instead of passing them in via react props. this means we can get the benefits of cacheable URLs without having to clutter our examples by passing them in
2023-05-05 13:10:36 +00:00
import path from 'path'
import { defineConfig } from 'vite'
export default defineConfig({
fix vite HMR issue (#2279) This is an attempt at #1989. The big issue there is when `shapeUtils` change when you're relying on tldraw to provide you with the store instead of providing your own. Our `useTLStore` component had a bug where it would rely on effects & a ref to detect when its options had changed whilst still scheduling updates. Fresh opts would come in, but they'd be different from the ones in the ref, so we'd schedule an update, so the opts would come in again, but they'd still be different as we hadn't run effects yet, and we'd schedule an update again (and so on). This diff fixes that by storing the previous opts in state instead of a ref, so they're updating in lockstep with the store itself. this prevents the update loop. There are still situations where we can get into loops if the developer is passing in custom tools, shapeUtils, or components but not memoising them or defining them outside of react. As a DX improvement, we do some auto-memoisation of these values using shallow equality to help with this issue. ### Change Type - [x] `patch` — Bug fix ### Test Plan - [x] Unit Tests ### Release Notes - Fixes a bug that could cause crashes due to a re-render loop with HMR #1989
2023-12-01 16:48:30 +00:00
plugins: [react()],
New vite-based examples app (#1226) Right now this examples app looks exactly the same as our old examples app, but there are a couple of tiny differences: - We use `vite` instead of our own esbuild setup for development and bundling - We use `@tldraw/assets` for smart asset hashing instead of copying the assets to a public folder You can use `@tldraw/assets` with vite with a bunch of extra config, but it (plus a bunch of other bundlers) also support a special syntax for specifying asset urls: `new URL('./my/asset.svg', import.meta.url).href`. This approach is more standards-complient, but doesn't work with every bundler just yet. This diff also adds a url-based version of `@tldraw/assets`, although I'd like to tweak the entry point - right now you need to import from `@tldraw/assets/lib/urls`, but i'd like to find a way to get this to `@tldraw/assets/urls` or something at some point. There are a couple other extra fixes in here: - vscode builds were broken, they're fixed now! - there's also a little tweak to the `getBundlerAssetUrls` API to allow passing in a function instead of an object for URL formatting - there are new internal-only functions for injecting asset urls globally instead of passing them in via react props. this means we can get the benefits of cacheable URLs without having to clutter our examples by passing them in
2023-05-05 13:10:36 +00:00
root: path.join(__dirname, 'src'),
publicDir: path.join(__dirname, 'public'),
build: {
outDir: path.join(__dirname, 'dist'),
assetsInlineLimit: 0,
},
server: {
port: 5420,
},
clearScreen: false,
main: exclude @tldraw/assets from vite dep optimization to fix examples links
2023-05-09 17:31:19 +00:00
optimizeDeps: {
exclude: ['@tldraw/assets'],
},
Feature flags rework (#1474) This diff tweaks our `debugFlags` framework to support setting different default value for different environments, makes it easier to define feature flags, and makes feature flags show up in the debug menu by default. With this change, feature flags will default to being enabled in dev and preview environments, but disabled in production. Specify a feature flag like this: ```ts const featureFlags = { myCoolNewFeature: createFeatureFlag('myCoolNewFeature') } ``` optionally, pass a second value to control its defaults: ```ts const featureFlags = { featureEnabledInProduction: createFeatureFlag('someFeature', { all: true }), customEnabled: createFeatureFlag('otherFeature', {development: true, staging: false, production: false}), } ``` In code, the value can be read using `featureFlags.myFeature.value`. Remember to wrap reading it in a reactive context! ### Change Type - [x] `patch` — Bug Fix ### Test Plan - ### Release Notes [internal only change]
2023-05-30 13:06:15 +00:00
define: {
'process.env.TLDRAW_ENV': JSON.stringify(process.env.VERCEL_ENV ?? 'development'),
},
New vite-based examples app (#1226) Right now this examples app looks exactly the same as our old examples app, but there are a couple of tiny differences: - We use `vite` instead of our own esbuild setup for development and bundling - We use `@tldraw/assets` for smart asset hashing instead of copying the assets to a public folder You can use `@tldraw/assets` with vite with a bunch of extra config, but it (plus a bunch of other bundlers) also support a special syntax for specifying asset urls: `new URL('./my/asset.svg', import.meta.url).href`. This approach is more standards-complient, but doesn't work with every bundler just yet. This diff also adds a url-based version of `@tldraw/assets`, although I'd like to tweak the entry point - right now you need to import from `@tldraw/assets/lib/urls`, but i'd like to find a way to get this to `@tldraw/assets/urls` or something at some point. There are a couple other extra fixes in here: - vscode builds were broken, they're fixed now! - there's also a little tweak to the `getBundlerAssetUrls` API to allow passing in a function instead of an object for URL formatting - there are new internal-only functions for injecting asset urls globally instead of passing them in via react props. this means we can get the benefits of cacheable URLs without having to clutter our examples by passing them in
2023-05-05 13:10:36 +00:00
})
Reference in a new issue Copy permalink