Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Build flag to select ECMAScript version for output #14901

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
pjebs opened this issue Jan 5, 2025 · 2 comments
Closed

Build flag to select ECMAScript version for output #14901

pjebs opened this issue Jan 5, 2025 · 2 comments

Comments

@pjebs
Copy link

pjebs commented Jan 5, 2025

Describe the problem

I want to use Svelte on a browser that only has ECMAScript 5.1 support.
The aim is to use the current Vite build system with minimal playing around.

I know that in the past, rollup was used directly which meant you could do a whole lot of playing around with configs and use a ECMAScript 5.1 conversion plugin.

Describe the proposed solution

Is there a flag I can use to change the output?

Importance

It would be great since I'm not a JS developer and playing with configs intimidates me.

@pjebs pjebs changed the title Build flat to select ECMAScript version for output Build flag to select ECMAScript version for output Jan 6, 2025
@Ocean-OS
Copy link
Contributor

Ocean-OS commented Jan 6, 2025

There used to be a legacy option for compilation, but that was removed with the release of Svelte 5. There are similar issues to this, but not exactly the same, you might want to look at #558 and #14420. From what I've found, most people recommend using Rollup (which you mentioned), SWC, or Babel. I've used both SWC and Rollup, and found them to be pretty easy to use.
If you were to use SWC, you could do it programmatically, like this:

/**
 * @typedef {import("@swc/core").JscTarget} EcmaVersion
 */
 import {transform} from '@swc/core';
 import {readdirSync as dir, readFileSync as read, writeFileSync as write} from 'fs';
 import {join, parse} from 'path';
 /**
 * @param {string} directory
 * @param {EcmaVersion} ecmaVersion
 */
 async function build(directory, ecmaVersion='es5') {
    let files = dir(directory, {recursive: true}).filter(file => {
       return file.match(/\.js$/i);
    }).map(file => join(directory, file));
    for (let file of files) {
      let name = parse(file).base;
       let source = read(file, 'utf-8');
       let compiled = await transform(source, {
         filename: name,
         jsc: {
           target: ecmaVersion,
           parser: {
             syntax: 'ecmascript',
           },
           transform: {},
         },
       });
       write(file, compiled.code);
    }
 }

And then you could transform an entire directory of files, like this:

build('src', 'es5'); //if your files are in the `src` directory

Note: This script I have provided is rather minimal and doesn't account for things like error handling.
You could also use the (unofficial) Vite plugin and just transfer the config from the script above to the plugin's config.

@dummdidumm
Copy link
Member

ES5 does not have lots of features we rely on, so beyond downleveling syntax you would also need a bunch of polyfills. Most notably, Svelte 5 uses proxies, which AFAIK are not really polyfillable.

Converting this to a discussion because this is neither a feature request (or rather; we won't add such an option) nor a bug report.

@sveltejs sveltejs locked and limited conversation to collaborators Jan 7, 2025
@dummdidumm dummdidumm converted this issue into discussion #14927 Jan 7, 2025

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants