Create a plugin for import JSX plugin (using WCC)

[thescientist13]

Type of Change

• New Feature Request
• Documentation / Website
• Improvement / Suggestion
• Bug
• Other (please clarify below)

Summary

With the newest release of WCC@0.6.0, it now supports using JSX inside custom element definitions, with runtime overhead. It is still very experimental, but would be nice to at least lay the ground work for this now.

Details

It should be pretty easy to implement, you can see an example working here:

import { load } from 'wc-compiler/src/jsx-loader.js';
import { ResourceInterface } from '@greenwood/cli/src/lib/resource-interface.js';
import { pathToFileURL } from 'url';

class JsxResource extends ResourceInterface {
  constructor(compilation, options) {
    super(compilation, options);
    this.extensions = ['.jsx'];
    this.contentType = 'text/javascript';
  }

  async serve(url) {
    return new Promise(async (resolve, reject) => {
      try {
        const result = await load(pathToFileURL(url));

        resolve({
          body: result.source,
          contentType: this.contentType
        });
      } catch (e) {
        reject(e);
      }
    });
  }
}

const greenwoodPluginImportJsx = (options = {}) => {
  return [{
    type: 'resource',
    name: 'plugin-import-jsx:resource',
    provider: (compilation) => new JsxResource(compilation, options)
  }];
};

export {
  greenwoodPluginImportJsx
};

Will also want to bump to latest version of WCC as well.