@greenwood/plugin-import-jsx v0.30.0

@greenwood/plugin-import-jsx

Overview

Enables usage of import syntax for loading JSX rendering Web Components compatible with WCC. (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.

examples:

# npm
npm install @greenwood/plugin-import-jsx --save-dev

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

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

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