Skip to content

Conversation

@iiirxs
Copy link

@iiirxs iiirxs commented Aug 16, 2024

This PR adds the appropriate logic so that the code only imports dynamically the translation messages for the languages that are actually needed, instead of loading the messages for all languages.

Regarding, the built artifacts, the wikipedia-preview.umd.cjs will continue to load all translation messages, as this is intended to be used as standalone file that contains the whole library. However, the wikipedia-preview.js ESM module will now only load the translation messages for the required families.

Steps followed for testing:

  • npm run build
  • Create a directory named "dynamic-import-test"
  • Inside this directory create a JS file named "app.js" with the following content:
import wikipediaPreview from '../dist/wikipedia-preview.js'

wikipediaPreview.init( {
	root: '.content > p, .footer > p',
	detectLinks: true,
	lang: 'fr',
	debug: true
} )
  • Inside the same directory create a vite config file named vite.config.app.js with the following contents (mostly copied from vite.config.js file:
import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'path'
import { defineConfig } from 'vite'
import commonjs from 'vite-plugin-commonjs'
import fs from 'fs'
import childProcess from 'child_process'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  plugins: [
    commonjs()
  ],
  define: {
    APP_VERSION: JSON.stringify(JSON.parse(fs.readFileSync('./package.json')).version),
    GIT_HASH: JSON.stringify(childProcess.execSync('git rev-parse --short HEAD').toString().trim())
  },
  build: {
    target: 'es2015',
    lib: {
      entry: resolve(__dirname, './app.js'),
      name: 'app',
      fileName: 'my-app',
    },
    sourcemap: true,
    cssCodeSplit: true,
    rollupOptions: {
      output: {
        assetFileNames: 'my-app.[ext]',
        dir: 'app',
      }
    }
  }
})
  • Build the new files to use them directly inside HTML: vite build --config ./dynamic-import-test/vite.config.app.js

  • Then inside demo/articles/french.html:

    1. Add the styles inside the :
        <link href="../../dist/wikipedia-preview-link.css" rel="stylesheet" type="text/css"/>
        <link href="../../dist/wikipedia-preview.css" rel="stylesheet" type="text/css"/>
    
    1. Comment out the previous <script> tags and add this one: <script src="../../app/my-app.js"></script>
  • Finally, test that the french.html file only loads the required messages.

@hueitan
Copy link
Member

hueitan commented Aug 19, 2024

Thanks @iiirxs for the PR. This aligns with the work in Phabricator ticket T282727. Backward compatibility must be supported, the changes should also work for the Wikipedia Preview WordPress plugin, and this should be documented in the README.md file to explain its usage.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants