Vite import.meta.glob not supported, Unknown expression: MetaProperty

[torrinworx]

Vite supports global imports that let you import multiple modules. That functionality seems to be getting caught by the transform util:

https://github.com/Nefsen402/destam-dom/blob/2a14dcbeafdb8030eb10f3c429e970a21a617183/transform/util.js#L415

Is it possible to do something like this in /transform/util.js:

} else if (node.type === 'MetaProperty') {
    return;
}

Right now using import.meta.glob like this:

    const pages = import.meta.glob('./pages/*.jsx');

Get's caught:

11:17:26 AM [vite] Internal server error: Unknown expression: MetaProperty
  Plugin: transform-literal-html
  File: /home/torrin/Repos/Personal/OpenGig.org/frontend/index.jsx
      at traverseExpression (file:///home/torrin/Repos/Personal/OpenGig.org/node_modules/destam-dom/transform/util.js:415:10)
      at traverseExpression (file:///home/torrin/Repos/Personal/OpenGig.org/node_modules/destam-dom/transform/util.js:344:4)
      at traverseExpression (file:///home/torrin/Repos/Personal/OpenGig.org/node_modules/destam-dom/transform/util.js:320:4)
      at traverse (file:///home/torrin/Repos/Personal/OpenGig.org/node_modules/destam-dom/transform/util.js:434:6)
      at traverseBody (file:///home/torrin/Repos/Personal/OpenGig.org/node_modules/destam-dom/transform/util.js:214:5)
      at traverseFunction (file:///home/torrin/Repos/Personal/OpenGig.org/node_modules/destam-dom/transform/util.js:250:3)
      at traverseExpression (file:///home/torrin/Repos/Personal/OpenGig.org/node_modules/destam-dom/transform/util.js:303:4)
      at traverse (file:///home/torrin/Repos/Personal/OpenGig.org/node_modules/destam-dom/transform/util.js:434:6)
      at traverseBody (file:///home/torrin/Repos/Personal/OpenGig.org/node_modules/destam-dom/transform/util.js:214:5)
      at traverse (file:///home/torrin/Repos/Personal/OpenGig.org/node_modules/destam-dom/transform/util.js:462:4)
11:17:26 AM [vite] Pre-transform error: Unknown expression: MetaProperty

[torrinworx]

Hmmm, even with that pass through it doesn't seem to parse the functions returned by default from those files as components, something like this:

            const Page = pages[matchedPath];
            return <Page {...{state, ...p.props}}/> 

Results in:

Caused by: Error: Objects passed to destam-dom must be iterable (like arrays). Maybe you passed in a raw object?

logging node results in this:

Node {
  type: 'MetaProperty',
  start: 321,
  end: 332,
  loc: SourceLocation {
    start: Position { line: 8, column: 16, index: 321 },
    end: Position { line: 8, column: 27, index: 332 },
    filename: undefined,
    identifierName: undefined
  },
  meta: Node {
    type: 'Identifier',
    start: 321,
    end: 327,
    loc: SourceLocation {
      start: [Position],
      end: [Position],
      filename: undefined,
      identifierName: 'import'
    },
    name: 'import'
  },
  property: Node {
    type: 'Identifier',
    start: 328,
    end: 332,
    loc: SourceLocation {
      start: [Position],
      end: [Position],
      filename: undefined,
      identifierName: 'meta'
    },
    name: 'meta'
  }
}

[Nefsen402]

You were actually on the right track. I think we just ignore the expression. The reason it's still not working is because if you look at the documentation as you've posted yourself, you can see it transforms to:

// code produced by vite
const modules = {
  './dir/foo.js': () => import('./dir/foo.js'),
  './dir/bar.js': () => import('./dir/bar.js'),
}

It lowers the global import to dynamic imports (lower is compiler speak for transforming into a simpler representation). Dynamic imports return a promise. Therefore, you must await them before you actually use them with destam-dom.

[Nefsen402]

Release v0.9.2 fixes this