Browse Source

Fix tesseract.js being part of the common chunk (#11571)

* Fix tesseract.js being part of the common chunk

Besides being 620 KB large, it also causes a modules-related runtime
error in production...

* Fix code style issue

* Fix modules error
tags/v3.0.0rc1
Eugen Rochko 3 months ago
parent
commit
dfe6059889
No account linked to committer's email address
3 changed files with 24 additions and 12 deletions
  1. +14
    -12
      app/javascript/mastodon/features/ui/components/focal_point_modal.js
  2. +4
    -0
      app/javascript/mastodon/features/ui/util/async-components.js
  3. +6
    -0
      babel.config.js

+ 14
- 12
app/javascript/mastodon/features/ui/components/focal_point_modal.js View File

@@ -10,11 +10,11 @@ import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
import IconButton from 'mastodon/components/icon_button';
import Button from 'mastodon/components/button';
import Video from 'mastodon/features/video';
import { TesseractWorker } from 'tesseract.js';
import Textarea from 'react-textarea-autosize';
import UploadProgress from 'mastodon/features/compose/components/upload_progress';
import CharacterCounter from 'mastodon/features/compose/components/character_counter';
import { length } from 'stringz';
import { Tesseract as fetchTesseract } from 'mastodon/features/ui/util/async-components';

const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -148,19 +148,21 @@ class FocalPointModal extends ImmutablePureComponent {
handleTextDetection = () => {
const { media } = this.props;

const worker = new TesseractWorker({
workerPath: `${assetHost}/packs/ocr/worker.min.js`,
corePath: `${assetHost}/packs/ocr/tesseract-core.wasm.js`,
langPath: `${assetHost}/ocr/lang-data`,
});

this.setState({ detecting: true });

worker.recognize(media.get('url'))
.progress(({ progress }) => this.setState({ progress }))
.finally(() => worker.terminate())
.then(({ text }) => this.setState({ description: removeExtraLineBreaks(text), dirty: true, detecting: false }))
.catch(() => this.setState({ detecting: false }));
fetchTesseract().then(({ TesseractWorker }) => {
const worker = new TesseractWorker({
workerPath: `${assetHost}/packs/ocr/worker.min.js`,
corePath: `${assetHost}/packs/ocr/tesseract-core.wasm.js`,
langPath: `${assetHost}/ocr/lang-data`,
});

worker.recognize(media.get('url'))
.progress(({ progress }) => this.setState({ progress }))
.finally(() => worker.terminate())
.then(({ text }) => this.setState({ description: removeExtraLineBreaks(text), dirty: true, detecting: false }))
.catch(() => this.setState({ detecting: false }));
}).catch(() => this.setState({ detecting: false }));
}

render () {

+ 4
- 0
app/javascript/mastodon/features/ui/util/async-components.js View File

@@ -133,3 +133,7 @@ export function ListAdder () {
export function Search () {
return import(/*webpackChunkName: "features/search" */'../../search');
}

export function Tesseract () {
return import(/*webpackChunkName: "tesseract" */'tesseract.js');
}

+ 6
- 0
babel.config.js View File

@@ -20,6 +20,12 @@ module.exports = (api) => {
['react-intl', { messagesDir: './build/messages' }],
'preval',
],
overrides: [{
test: /tesseract\.js/,
presets: [
['@babel/env', { ...envOptions, modules: 'commonjs' }],
],
}],
};

switch (env) {

Loading…
Cancel
Save