build: support preact 🥳

[ad1992]

closes #5909
Since there is no umd build available for react-jsxruntime and won't be in the future as well in favor of ESM hence making the umd build work isn't possible.

Hence I have created a separate dev and prod build for Preact which can be used by setting the env variable process.env._IS_PREACT.

The host needs to set this variable to true for Preact projects before importing Excalidraw

When using vite, you will have to make sure the variable process.env.IS_PREACT is available at runtime since Vite removes it by default, so you can update the vite config to ensure its available

 define: {
    "process.env.IS_PREACT": process.env.IS_PREACT,
  },

I have tested in local and it works well.
So until we ship ESM build, we can keep supporting Preact with separate build

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
excalidraw	✅ Ready (Inspect)	Visit Preview	Nov 13, 2023 9:31am
excalidraw-package-example	✅ Ready (Inspect)	Visit Preview	Nov 13, 2023 9:31am

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
docs	⬜️ Ignored (Inspect)	Visit Preview	Nov 13, 2023 9:31am

[ad1992]

@excalibot trigger release

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🟢	Lines	73.64% / 70%	44764 / 60786
🟢	Statements	73.64% / 70%	44764 / 60786
🟢	Functions	69.85% / 68%	1430 / 2047
🟢	Branches	81.15% / 70%	5631 / 6939

File Coverage

No changed files found.

Generated in workflow #983

[excalibot]

@ad1992 Preview version has been shipped 🚀
You can use @excalidraw/[email protected] for testing!

[github-actions]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
dist/excalidraw.production.min.js	314.1 KB (-0.08% 🔽)	6.3 s (-0.08% 🔽)	468 ms (-16.97% 🔽)	6.8 s
dist/excalidraw-assets/locales	280.73 KB (0%)	5.7 s (0%)	91 ms (-49.35% 🔽)	5.8 s
dist/excalidraw-assets/vendor*.js	826.02 KB (0%)	16.6 s (0%)	1.5 s (+11.29% 🔺)	18 s

[ad1992]

Hi @Aloento I am trying to make Preact work, however I need to set an env / window variable in PREACT to test it out and I am not familiar with PREACT, so could you tell how can I do that Code Sandbox ?

I don't see any way to initialize the window variable (I was expecting index.html) but there is none in CSB started template for Preact and .env doesn't work either when I set in .env.

[Aloento]

@ad1992 Don't use PreactCLI.
https://preactjs.com/guide/v10/getting-started#create-a-vite-powered-preact-app
https://codesandbox.io/p/sandbox/jolly-moon-5yqj6l?file=%2Findex.html%3A1%2C1

[ad1992]

@excalibot trigger release

[excalibot]

@ad1992 Preview version has been shipped 🚀
You can use @excalidraw/[email protected] for testing!

[ad1992]

Don't know whats going on in Preact :(
It's not logging the variable window.IS_PREACT which I put in main which is very weird which means its not using main.js file, probably I should debug in my local

[Aloento]

Where is IS_PREACT defined?

[ad1992]

So ultimately it was all CSB due to which it wasn't working :(, tried it local and works like a charm, you just need to define window.IS_PREACT before importing Excalidraw as mentioned in PR desc (index.html is a good place to do so) and it should work well.

@Aloento can you try once and let me if it works fine for you? Also thanks for sharing the CSB with index.html 🙏 , the default builder plate of CSB was making it hard to use index.html as I am not familiar with Preact.

[Aloento]

Works!

[ad1992]

Works!

Awesome! I will finalize the PR then and it should have Preact Support in the next release 🚀

[ad1992]

@excalibot trigger release

[excalibot]

@ad1992 Preview version has been shipped 🚀
You can use @excalidraw/[email protected] for testing!

[ad1992]

@excalibot trigger release

[excalibot]

@ad1992 Preview version has been shipped 🚀
You can use @excalidraw/[email protected] for testing!

[ad1992]

@Aloento I have updated the approach to use env variable instead so it's available at build time and only one of builds gets bundled in the host. I have verified it, could you verify as well whether its working well ?
When using vite, you will have to make sure the variable process.env.IS_PREACT is available at runtime since Vite removes it by default, so you can update the vite config to ensure its available

 define: {
    "process.env.IS_PREACT": process.env.IS_PREACT,
  },

You can use the #7255 (comment) for testing

[ad1992]

So one downside of introducing .env for Vite users (host) would be to make sure process.env is available which vite removes by default. So to avoid this the last alternative I am thinking is export it as a separate folder itself under "preact" so preact users would import it as

import { Excalidraw } from "@excalidraw/excalidraw/preact"

This would simplify everything I feel and not impact non preact users at all in any way.

[ad1992]

So one downside of introducing .env for Vite users (host) would be to make sure process.env is available which vite removes by default. So to avoid this the last alternative I am thinking is export it as a separate folder itself under "preact" so preact users would import it as

import { Excalidraw } from "@excalidraw/excalidraw/preact"

This would simplify everything I feel and not impact non preact users at all in any way.

Alright after having an internal discussion with @dwelle we decided to go ahead with .env for now. The above approach has some things to be taken care of

1. webpack-merge for some reason combines entry points in the configs which adds on to duplicate bundles inside preact folder

2. Fonts folders are also duplicated
   (2) we might handle soon and move it out of dist folder but for now we will keep it with .env variable as we will be launching ESM very soon so these things will be taken care in it.

[ad1992]

@Aloento I have updated the approach to use env variable instead so it's available at build time and only one of builds gets bundled in the host. I have verified it, could you verify as well whether its working well ? When using vite, you will have to make sure the variable process.env.IS_PREACT is available at runtime since Vite removes it by default, so you can update the vite config to ensure its available

 define: {
    "process.env.IS_PREACT": process.env.IS_PREACT,
  },

You can use the #7255 (comment) for testing

@Aloento did you get a chance to test this?

[Aloento]

Yes, it works.

[ad1992]

Yes, it works.

Awesome, thanks for confirming :)

[dwelle]

🎉