Fix Vite support

[kibertoad]

fix #89

[kibertoad]

@jaclas Can you check if this branch fixes your issue?

[codecov-commenter]

Codecov Report

Merging #92 (e698b72) into main (106748e) will not change coverage.
The diff coverage is 100.00%.

❗ Current head e698b72 differs from pull request most recent head 5e8f161. Consider uploading reports for the commit 5e8f161 to get more accurate results

@@            Coverage Diff            @@
##              main       #92   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            1         1           
  Lines          146       146           
=========================================
  Hits           146       146           

Impacted Files	Coverage Δ
index.js	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 106748e...5e8f161. Read the comment docs.

[jaclas]

I checked, everything works, thank you very much!

[jorgebucaran]

Thank you, @jaclas. Just curious, but how did you test that this branch fixed your issue?

[jaclas]

@jorgebucaran Damn... I installed colorette with npm, did a quick test, saw the color changes in the console (bash) and wrote that it was ok. Sorry for the rush, didn't want to block the issue and hence too superficial check.

[jorgebucaran]

Okay, so are we positive that this fixes the Vite issue? Just want to make sure.

[jaclas]

Unfortunately not, I modified the code bundled about by Vite for the latest changes from Colorrette and there is still an error:

[kibertoad]

@jaclas Can you try solution from facebook/create-react-app#12212 and report back if it helps?

Namely adding

if (!('process' in window)) {
  // @ts-ignore
  window.process = {}
}

into the beginning of the file

[jaclas]

It helped, the error is no longer there:

[kibertoad]

@jorgebucaran I don't think it's possible to have version that works both with Node and with browser, and also is an ESM module (because that one executes in strict mode and does not allow referencing undefined variables). How would you like to proceed?

[jorgebucaran]

Would import process from "node:process" help?

Can anybody help me understand how browser support should work? How do you use this package in a browser? And what is the expected behavior (other than not seeing an uncaught error)?

[kibertoad]

No, because it is failing in non-node environments where node package is not going to be present either.
Not sure where it is used in browser, I assume some of the deps are colouring their console with colorette, hence things break down.
Fixing support universally would require making colorette a CJS module (so that it no longer crashes on referencing undeclared variables)

[jorgebucaran]

Hmm, this good? 🤔

const proc = typeof process === "undefined" ? {} : process

[kibertoad]

@jorgebucaran I think any reference to non-defined variable will break it. you can try running locally and replace process with xyz

[jaclas]

I am using colorette in a backend project in node. There I made my own wrapper for a logger that also uses colorette. Now I started working in SvelteKit and just wanted to move my logger wrapper to that environment, unfortunately I ran into a problem and had to abandon colorette. SvelteKit works on both sides, the backend and the frontend, in the backend everything colors nicely (I like it a lot), and already in the browser it would be enough if it didn't crash, I don't know if the colors are even available in the browser console.

[jorgebucaran]

Thanks for the info, @jaclas. 👍

@kibertoad #92 (comment) seems to work for me.

[kibertoad]

@jaclas Could you please try latest version of this branch? It should fix the issue for real now, would be great to confirm :D

[jaclas]

@kibertoad Okay, just give me a hint how should I install this version? Should I clone your repo or is it possible via npm?

[kibertoad]

@jaclas You can use npm: https://stackoverflow.com/questions/39732397/install-specific-branch-from-github-using-npm

But actually easiest way to try would be just copy-paste whole index.js from the branch into your local node_modules version :D

[jaclas]

Thx for tip with npm. It will come in handy on other occasions.
I have now copied the file as you advised and it seems to be ok:

[kibertoad]

@jaclas Thank you for checking this!
@jorgebucaran We are good to merge then :)

[so1ve]

@jaclas Actually you can use define:

export default defineConfig({
  define: {
    'process.env': {}
  }
})