@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!. See a demonstration repo here.

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 / TSX 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);

For TSX support, make sure you follow the instructions in the above linked page for configuring your tsconfig.json.

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';

Options

Serve Pages

By default, this plugin will automatically support rendering SSR pages ending in either .jsx or .tsx. To disable this option, you can disable this setting by passing servePages: false to the plugin:

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

export default {
  // ...

  plugins: [
    greenwoodPluginImportJsx({
      servePages: false,
    })
  ]
}

Inferred Observability

With this option enabled, this plugin will automatically handle the <script> setup needed to support Signals based reactivity in WCC.

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

export default {
  // ...

  plugins: [
    greenwoodPluginImportJsx({
      inferredObservability: true, // default is `false`
    })
  ]
}

Notes

• For SSR and prerender use cases, follow these steps
• Read the full WCC JSX documentation for all caveats and considerations