JSX

A plugin that allows usage of WCC's experimental JSX syntax (opens in a new window) when authoring native Web Components, including SSR pages. See the plugin's README (opens in a new window) for complete usage information, including (very!) experimental support for using TC39 Signals for reactivity (opens in a new window).

You can see a demonstration repo here (opens in a new window).

Installation

You can use your favorite JavaScript package manager to install this plugin:

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

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

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

Then add this plugin to your greenwood.config.js:

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

export default {
  plugins: [greenwoodPluginImportJsx({
    inferredObservability: true, // add this to enable TC39 Signals based reactivity
  })],
};

Usage

This will then allow you to author custom elements with a render function that returns JSX for templating and basic reactivity.

export default class Counter extends HTMLElement {
  count;

  constructor() {
    super();
    this.count = 0;
  }

  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: 'open' }); // if using Declarative Shadow DOM
      this.render(); // this is required
    }
  }

  increment() {
    this.count += 1;
    this.render();
  }

  decrement() {
    this.count -= 1;
    this.render();
  }

  render() {
    const { count } = this;

    return (
      <div style="color:red">
        <button onclick={(this.count -= 1)}> - </button>
        <span>
          You have clicked <span class="red">{count}</span> times
        </span>
        <button onclick={this.increment}> - </button>
        <button onclick={this.decrement}> + </button>
      </div>
    );
  }
}

customElements.define('x-counter', Counter);

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

If using TypeScript to author your components, make sure to read WCC's docs (opens in a new window) for using JSX + TypeScript.

Edit on GitHub

Introduction

Pages

Resources

Plugins

Content As Data

Reference