@greenwood/plugin-import-jsx

Overview

Enables usage of import syntax for loading JSX rendering Web Components compatible with WCC. For more information and complete docs on Greenwood, please visit our website.

Note: This is not React JSX!

This package assumes you already have @greenwood/cli installed.

Installation

You can use your favorite JavaScript package manager to install this package.

# npm
$ npm i -D @greenwood/plugin-import-jsx

# yarn
$ yarn add @greenwood/plugin-import-jsx --dev

# pnpm
$ pnpm add -D @greenwood/plugin-import-jsx

Usage

Add this plugin to your greenwood.config.js:

import { greenwoodPluginImportJsx } from '@greenwood/plugin-import-jsx';

export default {
  // ...

  plugins: [
    greenwoodPluginImportJsx()
  ]
}

This will then allow you to use import to include WCC compatible JSX rendering Web Components:

export default class FooterComponent extends HTMLElement {
  connectedCallback() {
    this.render();
  }

  render() {
    return (
      <footer>
        <h4>My Blog</h4>
      </footer>
    );
  }
}

customElements.define('app-footer', FooterComponent);

Types

Types should automatically be inferred through this package's exports map, but can be referenced explicitly in both JavaScript (JSDoc) and TypeScript files if needed.

/** @type {import('@greenwood/plugin-import-jsx').ImportJsxPlugin} */

import type { ImportJsxPlugin } from '@greenwood/plugin-import-jsx';

Notes

• For SSR and prerender use cases, follow these steps
• For client side / browser code specifically, it is recommended to use import attributes syntax, e.g.

  import '../path/to/footer.jsx' with { type: 'jsx' };