Snowpack support

[ljani]

I'm a Lingui refugee (hi 👋🏻) looking for new home since they removed tagged templates support and I'm looking to localize my Snowpack application as soon as possible.

Here's some context from my Lingui ticket for Snowpack support:

Snowpack is an emerging [1,2] build tool for web frontends. It focuses on build performance by using esbuild and additionally by avoiding transpilation with babel. Thus, many Snowpack users try to avoid usage of babel in their development pipeline.

As lingui relies heavily on babel-plugin-macros, it would be nice to see an alternative, type-safe API without babel-plugin-macros to be used with for example Snowpack.

Thus, I started searching for a internalization localization library using tagged templates and found ttag. ttag seems to play nice with Snowpack, because of the po2json command. Here's an excerpt from my snowpack.config.cjs:

plugins: [
    [
        "@snowpack/plugin-build-script",
        {
            input: [".po"],
            output: [".json"],
            cmd: "ttag po2json $FILE --format compact",
        },
    ]
],
packageOptions: {
    namedExports: ["ttag"],
}

I mainly opened this ticket to share my Snowpack config, but I'd like you to consider creating a Snowpack plugin for ttag. I think po2json could be quite easily adapted into a Snowpack plugin.

I also noticed a few other points, should I open separate tickets for these?

• https://github.com/ttag-org/ttag/pull/191 did not include updates to the types/index.d.ts
• I wouldn't mind if I could update all my .po files with one command. I scripted this step, but it's something that probably should be built-in. It is not, right?
• ttag-cli documentation could be up there in ttag.js.org/docs/
• ESM support?

Thank you for your work!

EDIT: I forgot that ttag didn't support ESM and needs namedExports

[AlexMost]

Hi @ljani ! Thanks for your feedback. Haven't tried snowpack before, looks like it's quite promising build tool, so ttag plugin will be useful. We have implemented something similar for the webpack - https://github.com/ttag-org/ttag-po-loader.

Good points about improving doc and typings. Going to create separate tickets for that!

Can you, please, explain more about the ESM support? Or to provide a link to some other package that already has it, so it can be taken as an example.

[ljani]

Hey! Good to hear you found it interesting and made some progress already!

Sure, I was a bit plain with ESM:

• Snowpack primarly supports ECMAScript modules (export, import and that stuff), but CommonJS (CJS) (module.export =, const x = require("..."), etc) modules are supported via a compatibility workaround (packageOptions.namedExports above).
• Here's an example of ESM only package: lodash-es ("module": "lodash.js")
• Another example of ESM+CJS in one package.json: @microsoft/signalr ("main": "./dist/cjs/index.js" and "module": "./dist/esm/index.js")
• Comparing lodash-es with ttag@1.7.24 we can spot following differences:
  • package.json (lodash-es, ttag) contains "type": "module" and "module": "lodash.js" in addition to normal "main": "lodash.js", which is found in both of the packages.
  • Whereas ttag's index.js contains module.export = statement(s) (CJS), lodash-es' index file lodash.js contains export ... statements (ESM).
• ttag's current src is already using ESM, but Babel compiles them to CJS for publishing to npm
• How to configure and package the library then? Sorry, I have no idea 😁 I haven't really authored any packages. Quick google yields following at least one 2ality link (usually a good source) how to build a hybrid CJS+ESM package. Also copying eg. Microsoft example might be a good way I think?
• If you want to read something, NodeJS has a long document on ESM, but I'm not sure if it's the best material to read

Hope this dump gave you at least something.