0

EDIT / UPDATE:

I have taken loganfsmyth's advice and pulled out babel as the first argument to the sveltify function and I can access / console log babel.template.statement.ast however, if I try to call that function my app hangs indefinitely.

Thie details:

I am trying to use this with svelte to replace the import statement and I have a plugin as:

const sveltify = (babel) => ({
  visitor: {
    ImportDeclaration(path){
      // import x from 'svelte/somewhere'
      if (path.node.source.value.startsWith("svelte/")) {
        const specifiers = path.node.specifiers.map(s => ` ${s.local.name}` );
        const importee = path.node.source.value.replace('/', '.');

        // this line works without babel.template.statement.ast but gives the error in the question title
        // adding babel.template.statement.ast causes the app to hang indefinitely 
        const importNode = babel.template.statement.ast`const {${specifiers} } = ${importee};`;

        path.replaceWith(importNode);
      }
    }
  }
});

and my babel options:

const SVELTE_OPTIONS = {
  presets: [
    // [
    //   Babel.availablePresets['env'],
    //   {
    //     useBuiltIns: 'usage',
    //     corejs: 3,
    //   }
    // ],
    ['es2017', { 'modules': false }],
  ],
  plugins: [
    sveltify,
    'transform-modules-commonjs',
    'transform-destructuring',
    'proposal-object-rest-spread',
  ],
};

And finally I am using that in my code later on a call to transform like this:

// simplified
function transpile(moduleCode) {
  const { code } = Babel.transform(moduleCode, SVELTE_OPTIONS);
  return code;
}
cbutler
  • 833
  • 13
  • 36

2 Answers2

1

The other question you linked is pulling babel out of the first param of the plugin, and you should be doing the same, so

const sveltify = () => ({

should be

const sveltify = (babel) => ({

then you can use babel.template from that object.

loganfsmyth
  • 156,129
  • 30
  • 331
  • 251
  • I have tried that and the approach from the original answer but my application hangs. I assumed it was because babel or some part of the path was not available but it is in fact there in a console log. I will investigate to see what is happening – cbutler Jan 15 '21 at 06:45
  • I have updated the question. I am getting an error trying to call the babel.template.statement.ast function. It causes my app to hang and there is no output to the console. if I dont call the ast function and console log importNode I get the string I am trying to replace the import statement with – cbutler Jan 15 '21 at 07:52
  • Indefinite handing isn't much to go on, at this point it doesn't seem like there's any way for someone to answer this. Sounds like it's probably throwing but something is swallowing the error? – loganfsmyth Jan 15 '21 at 19:48
0

I think the problem was in the way I was calling ast. The following works:

const sveltify = (babel) => ({
  visitor: {
    ImportDeclaration(path){
      // import x from 'svelte/somewhere'
      if (path.node.source.value.startsWith("svelte/")) {
        const specifiers = path.node.specifiers.map(s => ` ${s.local.name}` );
        const importee = path.node.source.value.replace('/', '.');
        const tmpNode = `const {${specifiers} } = ${importee};`;
        const importNode = babel.template.statement.ast(tmpNode);

        path.replaceWith(importNode);
      }
    }
  }
});
cbutler
  • 833
  • 13
  • 36