support custom JavaScript formats

[thescientist13]

Type of Change

Feature

Summary

It would be nice to support importing things that are not just javascript, e.g.

import '../components/greeting.ts';

export default class ContactPage extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <h1>Welcome to our About page!</h1>
      <x-greeting name="About Page"></x-greeting>
    `;
  }
}

But also need to make sure it won't break / yell if something non JS compatible was added and sent to acorn

import '../components/greeting.ts';
import sheet from '../theme.css' with { type: 'css' }; 

export default class ContactPage extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <h1>Welcome to our About page!</h1>
      <x-greeting></x-greeting>
      <x-greeting name="About Page"></x-greeting>
    `;
  }
}

Details

This is because right now we limit what can be passed to WCC, otherwise acorn will fail on things that are not ultimately transformed into JavaScript, e.g.

    registerDeps {
      moduleURL: URL {
        href: 'file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/src/components/card/card.ts',
        origin: 'null',
        protocol: 'file:',
        username: '',
        password: '',
        host: '',
        hostname: '',
        port: '',
        pathname: '/Users/owenbuckley/Workspace/project-evergreen/greenwood/packages/plugin-typescript/test/cases/exp-prerender.serve.ssr/src/components/card/card.ts',
        search: '',
        searchParams: URLSearchParams {},
        hash: ''
      }
    }
SyntaxError [Error]: Unexpected token (9:21)
    at pp$4.raise (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/wc-compiler/node_modules/acorn/dist/acorn.mjs:3453:13)
    at pp$9.unexpected (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/wc-compiler/node_modules/acorn/dist/acorn.mjs:754:8)
    at pp$8.parseVar (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/wc-compiler/node_modules/acorn/dist/acorn.mjs:1299:12)
    at pp$8.parseVarStatement (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/wc-compiler/node_modules/acorn/dist/acorn.mjs:1161:8)
    at pp$8.parseStatement (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/wc-compiler/node_modules/acorn/dist/acorn.mjs:909:17)
    at pp$8.parseBlock (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/wc-compiler/node_modules/acorn/dist/acorn.mjs:1230:21)
    at pp$8.parseStatement (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/wc-compiler/node_modules/acorn/dist/acorn.mjs:912:36)
    at pp$8.parseIfStatement (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/wc-compiler/node_modules/acorn/dist/acorn.mjs:1059:26)
    at pp$8.parseStatement (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/wc-compiler/node_modules/acorn/dist/acorn.mjs:901:33)
    at pp$8.parseBlock (file:///Users/owenbuckley/Workspace/project-evergreen/greenwood/node_modules/wc-compiler/node_modules/acorn/dist/acorn.mjs:1230:21) {
  pos: 209,
  loc: { line: 9, column: 21 },
  raisedAt: 210
}

  

While the above outcome may seem expected, for frameworks like Greenwood that support custom imports, the use of fs here totally bypasses the ESM loader mechanics, which means if you have a custom loader for handling TypeScript, it will never run, thus WCC will always just be reading the unprocessed source contents.