Skip to content
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

esbuild/TranslocoExtractKeysWebpackPlugin, feedback and import bug #216

Open
qwenger opened this issue Jan 29, 2025 · 0 comments
Open

esbuild/TranslocoExtractKeysWebpackPlugin, feedback and import bug #216

qwenger opened this issue Jan 29, 2025 · 0 comments

Comments

@qwenger
Copy link

qwenger commented Jan 29, 2025

Hi,

Thanks for developing this project, and sorry that I haven't used a template for this issue, it's a bit of a mixed bag.

TL;DR:

Long version:

What works

I migrated an internal project from Angular v16 to v19 and chose to switch to the new application/esbuild backend. This project uses Transloco with TKM and the Webpack plugin, so those don't work anymore.
I've managed to create a replacement by using @angular-builders/custom-esbuild instead of @angular-devkit/build-angular and writing an esbuild plugin that hooks to setup(build)/build.onDispose. It isn't possible to hook to build.onLoad, which means that file watching has to be set up separately - I've chosen chokidar as it is already in use.

While it seems to work sufficiently well, it's still very rough, fresh of the day, only tested on a small project, and written by someone with relatively little Angular and TS practice (a.k.a. myself). Plus it monkey-patches TranslocoExtractKeysWebpackPlugin (better would be to refactor to a common core and two separate plugins for Webpack and esbuild). Hence I've not made it into a PR.

Relevant code:

angular.json:

{
  ...
        "build": {
          "builder": "@angular-builders/custom-esbuild:application",
          ...
          "configurations": {
            ...
            "development-tkm": {
              "plugins": ["./dev-server-tkm.ts"],
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          ...
        },
        "serve": {
          "builder": "@angular-builders/custom-esbuild:dev-server",
          ...
        },
        "serve-with-tkm": {
          "builder": "@angular-builders/custom-esbuild:dev-server",
          "options": {
            "buildTarget": "myproject:build:development-tkm"
          }
        },
  ...
}

dev-server-tkm.ts:

import type { Plugin, PluginBuild } from 'esbuild';
// FIXME: for some reason, standard importing of @jsverse/transloco-keys-manager doesn't work, so access as local file for now.
//import { TranslocoExtractKeysWebpackPlugin } from '@jsverse/transloco-keys-manager';
import { TranslocoExtractKeysWebpackPlugin } from './node_modules/@jsverse/transloco-keys-manager/public-api.js';
import chokidar from 'chokidar';
import translocoConfig from './transloco.config';

const definePlugin: Plugin = {
  name: "extract-keys",
  setup(build: PluginBuild) {
    let plugin = new TranslocoExtractKeysWebpackPlugin(translocoConfig);
    let watcher = chokidar.watch(".", {
      ignored: (path, stats) =>
        ((!stats?.isFile() || false) && !!path.match(/^(\.[a-zA-Z]+|node_modules)/))
        || ((stats?.isFile() || false) && !(path.match(/\.(ts|html)$/) && !path.match(/\.spec\.ts$/))),
    });
    let callback = (path: string) => {
      plugin.apply({hooks: {watchRun: {
        tapPromise(name: string, func: any) {
          console.log(`Notifying TKM for change in path ${path}`);
          func({
            modifiedFiles: [path],
            watchFileSystem: {watcher: {mtimes: {}}},
          });
        },
      }}});
    };
    watcher
      .on("add", callback)
      .on("addDir", callback)
      .on("change", callback)
    ;
    build.onDispose(() => {
      watcher.close();
    });
  },
};

export default definePlugin;

As you can see, there's quite some monkey-patching happening to adapt to TranslocoExtractKeysWebpackPlugin that expects stuff from webpack (hooks.watchRun.tapPromise, modifiedFiles, watchFileSystem.watcher.mtimes, ...).

What doesn't work

See the FIXME in the above code. If I do an

import { TranslocoExtractKeysWebpackPlugin } from '@jsverse/transloco-keys-manager';

from TypeScript, I get

dev-server-tkm.ts(4,10): error TS2305: Module '"@jsverse/transloco-keys-manager"' has no exported member 'TranslocoExtractKeysWebpackPlugin'.

(are the double quotes expected in this error message?)

I've tried many things, verified my versions (Node 22.13.1, npm 10.9.2, TKM 6.1.0), looked at the package.json and public-api.js in node_modules/@jsverse/transloco-keys-manager... Nothing helped. Importing marker from the main path also doesn't work, but import { marker } from '@jsverse/transloco-keys-manager/marker' does (so strange!).

So for now I've just imported the file with a relative path, bypassing the npm packaging. Ugly but works.

Maybe there's a simple explanation, maybe there's a simple fix in the way you build for npm. Maybe it's related to #201 (which was for CJS), maybe not. In any case I would have expected ESM+.d.ts types to be sufficient... Help is appreciated.

EDIT 2025-02-04: fixed multiple watcher registration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant