[Feature request] Add support to UXP-based web browsers

[EchedelleLR]

Given that this project is in its beginnings yet, it would be ideal to have into account side web browsers such as UXP-based ones like Pale Moon or Basilisk from the start while adding support to certain web features.

By now, the support is none and the website doesn't even load with a maximum of this being thrown in the console:

SyntaxError: expected expression, got keyword 'import'[Learn More]  
index.166e7ea2.js:1:1328

[EchedelleLR]

I think that setting https://vitejs.dev/config/build-options.html#build-target to es2015 would fix the issue here.

Another option is using https://github.com/vitejs/vite/tree/main/packages/plugin-legacy as suggested in https://vitejs.dev/guide/build.html#browser-compatibility.

[ColinEspinas]

Hello @EchedeyLR, thanks for opening an issue, we don't support those browsers for now as I didn't have any clues about them. I'll be happy to try and support them.

Would you mind trying to get the changes you specified working with the browser you'd like to see supported?

Have a great day.

[EchedelleLR]

[EchedelleLR]

I tested on Pale Moon with a custom Photon-based theme (to avoid you confusing it with Firefox or similar).

I had to add a package.json since you avoid it to just use npx.

I added testing over serve which is a non-needed dependency and is just to run it on top of NodeJS.

[EchedelleLR]

vite.config.js:

import legacy from '@vitejs/plugin-legacy'

export default {
  root: './src',
  publicDir: '../assets',
  build: {
    outDir: '../dist'
  },
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ]
}

package.json:

{
  "name": "front-end",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "deploy": "serve ./dist/"
  },
  "devDependencies": {
    "@vitejs/plugin-legacy": "^2.3.1",
    "terser": "^5.16.1",
    "vite": "^3.2.3"
  },
  "dependencies": {
    "serve": "^14.1.2"
  }
}

[ColinEspinas]

Thanks for your messages, I think you should fork the repo and create a branch, it would be easier to see your code in context.

A few comments on what you tried till now:

• We don't want to add a package.json if not necessary (maybe using the buildTarget option that you previously mentioned could work instead of adding a plugin?).
• I don't understand the usage of serve when you have a preview command from vite
• Did you succeed in supporting your browser with your current configuration?

[EchedelleLR]

maybe using the buildTarget option that you previously mentioned could work instead of adding a plugin?

es2015 is ES6 which is supports modules. I can test but I am unsure if that would work.

Main point of using Vite on development use to be wide compatibility too, so I don't guess the focus on ignoring some tools even if I understand your minimalistic maintenance approach.

Development mode doesn't show it working in the browser since the Polyfills seems to only be loaded after a full compilation (building and then manual deployment).

I don't understand the usage of serve when you have a preview command from vite

serve just make the deployment over ./dist/ folder as showed so I don't have to install Apache HTTP Server to show it working properly and, as told before, is something I added and not a requirement.

Did you succeed in supporting your browser with your current configuration?

As showed in the picture and described... yes...

[EchedelleLR]

I performed a test, both in development mode and deploy mode with serve using build.target at es2015 which is the minimum supported version by default: it didn't work.

[EchedelleLR]

Mmmm, I misread the use of vite preview. Ok, I will test now.

[EchedelleLR]

The only way to support it is using the official legacy plugin as suggested before.

[EchedelleLR]

I am submitting changes to https://github.com/EchedeyLR/front-end/tree/extended-browser-support if you wanna review.

[ColinEspinas]

Thanks @EchedeyLR, I'll checkout your branch.

I'm just trying to keep the bloat to a minimum here, that is why looking for a solution without using any plugin would have been better But if there is none we will gladly add a package to handle it.

When you are ready with your changes do not hesitate to create a pull request so I can review it correctly before merging.

Have a great day.

[EchedelleLR]

I have a question related to project name and version in the package.json file. If you check my branch, I just left them a bit general...

This applies a bit for the README.md for which I am unsure if that name is currently appropriate.

I also have doubts if MWMBL must be in uppercase, lowercase, mixed or what since the search front-end shows it in both uppercase and lowercase...

[ColinEspinas]

@EchedeyLR In the package.json you can omit the version number and the name and just put the package in private. We don't version this repo as of now (maybe we should but this is not the topic of this change).

The name in a sentence is written in lowercase as any word, in the logotype it is stylized in uppercase. In the end no change is needed in this regard.

I've checked your branch but you should really open a PR so I can do a proper review.

[EchedelleLR]

@ColinEspinas check #30

[EchedelleLR]

I think that github-pages CI could need some edition after this.