Support transformations with --stub mode

[jacob-8]

Environment

node 18.12.1
Windows 11
pnpm 8.6.0

Reproduction

• clone https://github.com/unocss/unocss/tree/svelte-scoped-stub
• pnpm install
• pnpm -F svelte-scoped stub (if we instead run pnpm -F svelte-scoped build at this point, there will be no error later)
• cd examples/svelte-scoped
• pnpm install
• pnpm dev to see the error

Sorry the repro is full-blown and not minimal. I'm mostly posting this to see if the problem is already known and has a workaround. If not and the big repo is a hassle, let me know if you want a minimal repro.

Describe the bug

I'm using inline testing from Vitest and as directed in https://vitest.dev/guide/in-source.html#other-bundlers I have added the following to my build.config.ts:

replace: {
    'import.meta.vitest': 'undefined',
  },

When I build the svelte-scoped package and consume it an example project in a separate folder there are no problems. However, when I try to stub and then start the project up I get this error:

if (import.meta.vitest) {
           ^^^^
SyntaxError: Cannot use 'import.meta' outside a module

Additional context

No response

Logs

No response

[pi0]

Hi. It is an expected limitation of passive stubs since we do not build or bundle any of the source code to be able to rewrite them.

We might think about a custom jiti plugin btw and add it to default stubs

[justin-schroeder]

@jacob-8 fwiw after reading the source a bit I was able to add some of this functionality. There is an undocumented property of the jiti options: transformOptions which accepts options for babel, including a plugins option. In my case I have a wrapper stub script that modifies the unbuild’s generated stub file to inject a transformOptions. This allows me to pass the code through a babel plugin to perform some code mods.

It feels kinda hacky but it does work.

[justin-schroeder]

Update: In our case we needed to transform import.meta.hot and couldn’t find a babel plugin out there to do it, so we forked babel-plugin-transform-import-meta (which only transforms import.meta.url) and created babel-plugin-transform-import-meta-x to transform any subproperty of meta to whatever arbitrary code you need. This got us back up and running with stubs. Here is a sample of the jiti call (again, we transform it to be this using a wrapper function around the build(path, stub: true) call:

import jiti from "file:///Users/justinschroeder/Projects/formkit/node_modules/.pnpm/jiti@1.21.0/node_modules/jiti/lib/index.js";

/** @type {import("/Users/justinschroeder/Projects/formkit/packages/core/src/index")} */
const _module = jiti(null, {
  "esmResolve": true,
  "interopDefault": true,
  "transformOptions": {
    "babel": {
      "plugins": [
        [
          require('babel-plugin-transform-import-meta-x'),
          { replacements: { 'hot': '({ on: () => {} })' } },
        ],
        [
          require('babel-plugin-transform-replace-expressions'),
          { replace: { __DEV__: 'true' } },
        ],
      ],
    },
  },
  "cache": '.jiti-cache',
  "alias": {
    "@formkit/core": "/Users/justinschroeder/Projects/formkit/packages/core"
  }
})("/Users/justinschroeder/Projects/formkit/packages/core/src/index.ts");

Bit of a bear to get the stubs to look like that, but it seems #368 could be helpful in this regard.

[pi0]

@justin-schroeder feel free to open an issue in jiti, i think we can have import.meta.hot stub out of the box and there is already a transformer for it.

[pi0]

Babel plugin support landed via #368

I still love to track any fixes in jiti directly btw if someone can make a tracker 🙏🏼