support resource plugin based transformations for non "standard" module formats (ex: TypeScript, GraphQL) for SSR

[thescientist13]

Overview

As a companion to #878, would like to get support for other current formats working in NodeJS SSR.

TypeScript

I had started playing around with this as part of #992 and for someone it seems liked the TypeScript plugin serve function was not reading the file path correctly?

{
  moduleURL: URL {
    href: 'file:///Users/owenbuckley/Workspace/project-evergreen/repos/greenwood/packages/plugin-typescript/test/cases/exp-build.prerender/src/components/header.ts',
    origin: 'null',
    protocol: 'file:',
    username: '',
    password: '',
    host: '',
    hostname: '',
    port: '',
    pathname: '/Users/owenbuckley/Workspace/project-evergreen/repos/greenwood/packages/plugin-typescript/test/cases/exp-build.prerender/src/components/header.ts',
    search: '',
    searchParams: URLSearchParams {},
    hash: ''
  }
}

{
  plugins: [
    TypeScriptResource {
      compilation: [Object],
      options: {},
      extensions: [Array],
      contentType: 'text/javascript'
    }
  ]
}

NO URL!!!

      1) "before all" hook in "TypeScript Plugin with static pre-rendering"
{
  moduleContents: 'export default class HeaderComponent extends HTMLElement {\n' +
    '\n' +
    '  async connectedCallback() {\n' +
    '    super.connectedCallback();\n' +
    '\n' +
    '    const navigation = [{\n' +
    "      route: '/about/',\n" +
    "      label: 'About'\n" +
    '    }, {\n' +
    "      route: '/contact/',\n" +
    "      label: 'Contact'\n" +
    '    }];\n' +
    '    \n' +
    '    console.debug({ navigation });\n' +
    '\n' +
    '    /* eslint-disable indent */\n' +
    '    this.innerHTML = `\n' +
    '      <header class="header">\n' +
    '        <nav>\n' +
    '          <ul>\n' +
    '            ${navigation.map((item) => {\n' +
    '              return `\n' +
    '                <li>\n' +
    '                  <a href="${item.route}" title="Click to visit the ${item.label} page">${item.label}</a>\n' +
    '                </li>\n' +
    '              `;\n' +
    "            }).join('')}\n" +
    '          </ul>\n' +
    '        </nav>\n' +
    '      </header>\n' +
    '    `;\n' +
    '    /* eslint-enable */\n' +
    '  }\n' +
    '}\n' +
    '\n' +
    "customElements.define('app-header', HeaderComponent);"
}
serve {
  url: 'file:///Users/owenbuckley/Workspace/project-evergreen/repos/greenwood/packages/plugin-typescript/test/cases/exp-build.prerender/src/components/header.ts'
}



  0 passing (3s)
  1 failing

  1) (Experimental) Build Greenwood With:
       TypeScript Plugin with static pre-rendering
         "before all" hook in "TypeScript Plugin with static pre-rendering":
     Error: the string "NO URL!!!\n" was thrown, throw an Error :)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)



[Error: ENOENT: no such file or directory, open 'file:///Users/owenbuckley/Workspace/project-evergreen/repos/greenwood/packages/plugin-typescript/test/cases/exp-build.prerender/src/components/header.ts'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: 'file:///Users/owenbuckley/Workspace/project-evergreen/repos/greenwood/packages/plugin-typescript/test/cases/exp-build.prerender/src/components/header.ts'
}

GraphQL

The main issue here is that it assumes import maps, which don't exist in NodeJS, so we might have to find another way to alias files.

import client from '@greenwood/plugin-graphql/core/client';
import MenuQuery from '@greenwood/plugin-graphql/queries/menu';

export default class HeaderComponent extends HTMLElement {
  ...
}

customElements.define('app-header', HeaderComponent);

---

Should also see how to factor in import assertions into this along with #923 when handling standard formats.