Examples: Update fflate version

[gkjohnson]

Related to #21654

Description

See comment here.

This PR updates the fflate file in js/libs and jsm/libs to use the latest esm and umd files from the published package. The new esm variant does not use require so it shouldn't cause issues with skypack. I'm not sure where the previous minified fflate module came from but this one is not minified. Perhaps we should change the file name?

You can see that the new module version of fflate functions correctly in the fbx example:

https://raw.githack.com/gkjohnson/three.js/fflate-update/examples/webgl_loader_fbx.html

For some reason I'm not able to get the FBX example to work at all when switching it over to use the classic examples/js/ scripts even before updating fflate. I get an "unknown format" error -- am I missing a step here?

cc @Mugen87 @donmccurdy

[Mugen87]

@gkjohnson The issue in FBXLoader should be fixed via #21671. Do you mind trying again?

@marcofugaro It seems npm run build-examples formats strings in a way that potentially breaks code. In FBXLoader, the following line:

const CORRECT = 'Kaydara FBX Binary  \0'; 

was transformed to:

const CORRECT = 'Kaydara FBX Binary	\0'; 

Notice that the two spaces after "Binary" were replaced with a tab. This breaks the detection of binary FBX files.

I've patched this by using unicode characters which is more robust anyway. However, it's probably better to ensure npm run build-examples does not perform such changes to strings.

[Mugen87]

I'm not sure where the previous minified fflate module came from but this one is not minified.

The developer of fflate provided these builds for us.

Perhaps we should change the file name?

Yes, otherwise it's confusing.

[gkjohnson]

• Renamed fflate.module.min.js to fflate.module.js
• Used find and replace to adjust fflate imports in jsm files
• Tested FBX Loader example with classic script tag and module variants

Thanks @Mugen87! That fixed it

[Mugen87]

This line needs an update, too.

three.js/examples/webgl2_materials_texture2darray.html

Line 59 in 58cd930

import { unzipSync } from './jsm/libs/fflate.module.min.js';

The editor also imports fflate in Loader.js, Menubar.File.js and sw.js.

[Mugen87]

And here:

three.js/utils/build/rollup.examples.config.js

Line 119 in 58cd930

code = code.replace( 'import * as fflate from \'../libs/fflate.module.min.js\';', '' );

[gkjohnson]

ooh sneaky. I'd just checked in the /jsm folder. Last commit fixes those two lines.

[Mugen87]

Unfortunately, the PR is still incomplete. Next to webgl2_rendertarget_texture2darray, please update:

three.js/examples/webgl2_materials_texture2darray.html

Line 59 in 58cd930

import { unzipSync } from './jsm/libs/fflate.module.min.js';

three.js/editor/js/Loader.js

Line 10 in 58cd930

import { unzipSync, strFromU8 } from '../../examples/jsm/libs/fflate.module.min.js';

three.js/editor/js/Menubar.File.js

Line 3 in 58cd930

import { zipSync, strToU8 } from '../../examples/jsm/libs/fflate.module.min.js';

three.js/editor/sw.js

Line 16 in 58cd930

'../examples/jsm/libs/fflate.module.min.js',

[marcofugaro]

@marcofugaro It seems npm run build-examples formats strings in a way that potentially breaks code.

@Mugen87 oh yeah, it's because of this line:

three.js/utils/build/rollup.examples.config.js

Line 17 in 58cd930

code = code.replace( doubleSpaces, '\t' );

I saw your fix in #21671, thank you!

I'll see if we can make eslint change spaces to tabs with this rule: https://eslint.org/docs/rules/indent

[gkjohnson]

@Mugen87 sorry, thanks for the catch. Just updated and I no longer see any references to fflate.module.min.js in the entire repository.

[mrdoob]

Thanks!